Tip:
Highlight text to annotate it
X
Bienvenidos a nuestro proyecto Google Developers Hackademy,
donde expertos de habla hispana en América Latina
te enseñarán algunas de nuestras herramientas,
productos para desarrolladores, APIs y nuevos trucos.
El curso está dividido en cinco partes.
Te invitamos a verlo y a aprender juntos.
Comenzamos.
Buen día. Bienvenidos al curso de introducción al desarrollo web
HTML5 con Google Drive.
Mi nombre es César Antón Dorantes,
Google Developer Expert para la plataforma Google Drive.
En esta lección veremos los siguientes temas:
Estructura de documentos HTML5;
estructura de archivos en aplicaciones HTML5;
web hosting gratuito usando Google Drive Public Folders;
sincronización automática con Google Drive;
y, finalmente,
una práctica donde armaremos un sitio web HTML5.
¿Estás listo?
¡Comencemos!
HTML5 presenta un enfoque diferente
a las versiones anteriores.
Ahora se hace mucho más énfasis en mantener
una estructura clara y sencilla.
Hoy en día usamos principalmente el HTML
para describir el orden y estructura de nuestra app.
La lógica, escrita en JavaScript,
y los detalles visuales, escritos en CSS,
se mantienen por separado y hablaremos de ellos
en otra lección.
HTML5 tiene una estructura muy semántica
y sus etiquetas son muy descriptivas,
lo que nos hace fácil declarar y editar
la estructura de nuestra aplicación.
Si ya estás familiarizado con HTML4,
verás que ahora todo es mucho más fácil.
Empezamos declarando el doctype,
el cual ha sido recortado,
haciéndolo más sencillo de escribir y recordar,
pues ahora basta con mencionar que es un documento HTML.
Ahora colocamos las etiquetas HTML.
Estas indican dónde inicia y dónde termina nuestro código.
También, aquí declaramos en qué idioma está el documento
usando el atributo "lang"
y las siglas correspondientes al idioma.
En este caso usamos las siglas "es",
pues el documento está en español.
En esta parte declaramos las etiquetas "head" y "body".
En "head" colocamos la información que deseamos
que solo esté disponible para el navegador y buscadores;
en "body" se coloca la información que deseamos
que el usuario pueda ver a través del navegador.
Es hora de escribir el título que deseamos que se muestre
en el navegador para nuestra aplicación.
Para hacerlo, colocamos el título dentro las etiquetas
"title" adentro de "head".
Ahora coloquemos algunas metatags para declarar
la información básica de nuestra página.
Empezamos por la codificación de nuestra página
dentro del atributo "charset".
Se recomienda UTF-8
pues acepta los acentos y la letra "ñ".
Usando los atributos "name" y "content",
declaramos la descripción y autor de la página.
Notarás que no estoy usando las famosas "keywords".
Hoy en día su uso ya no se recomienda,
pues los buscadores ya no las toman en cuenta
para el ranking del sitio,
y en algunas ocasiones pueden llegar a perjudicarlo.
Es tiempo de empezar a declarar el contenido que deseamos
se muestre dentro de nuestra aplicación.
Recuerda que en HTML5
esto se hace adentro de la etiqueta "body".
Se recomienda que el contenido central de nuestra página
se indique dentro de la etiqueta "article".
Escribámosla en nuestro código.
Finalmente, coloquemos el contenido
que queremos mostrar dentro de "article"
¡y listo!, ya tenemos una aplicación HTML5
con todo lo básico.
Es muy importante mantener los archivos
en carpetas separadas según su tipo.
Esto será muy útil durante el desarrollo del proyecto,
pues facilita encontrarlos y editarlos.
Así como también declarar las rutas
a los distintos archivos desde el código,
en particular cuando estemos trabajando en proyectos grandes.
Las carpetas básicas para un proyecto HTML5 son:
"CSS":
Aquí guardamos los archivos que determinan
la apariencia y efectos visuales.
"HTML":
En esta carpeta colocamos los archivos correspondientes
a cada página de nuestro proyecto.
"IMG":
Este es el lugar para colocar las texturas, fotografías,
logotipos y demás imágenes que usaremos.
Resulta muy útil coordinarse desde el inicio
con el equipo de diseño sobre los nombres de imágenes,
de este modo, ellos pueden agregar o actualizar elementos
sin tener que esperar al equipo de desarrollo.
"JS":
Aquí van los archivos JavaScript,
los cuales usaremos para definir
el comportamiento de nuestra aplicación.
El archivo index.html
siempre debe colocarse en el directorio raíz,
separado de los demás archivos HTML de nuestro proyecto.
En este archivo colocamos la página de bienvenida.
Esta estructura de archivos
es la misma para páginas o aplicaciones web.
Gracias a que tenemos
todos los archivos que nuestro proyecto requiere,
este está listo para el futuro de las aplicaciones,
que son las HTML5 Packaged Apps.
La principal diferencia es que una Packaged App
contiene un archivo en el directorio raíz
llamado "Manifest",
y el usuario, en vez de descargar los datos
cada vez desde el servidor,
este se instala en el equipo como una aplicación normal.
Incluso tiene acceso al hardware conectado directamente por USB,
como con las aplicaciones nativas.
Actualmente, podemos encontrar esta tecnología
ya en uso en Windows 8, BlackBerry 10
y el nuevo Firefox OS,
pero muy pronto estará disponible
en las Chrome Packaged Apps,
que te permitirán vender tus aplicaciones HTML5
desde la Chrome Store,
y estas se pueden instalar en cualquier dispositivo
que cuente con Google Chrome.
Una función muy poderosa de Google Drive
para los desarrolladores
es la opción de usar las carpetas como hosting
para páginas y aplicaciones HTML5 de forma gratuita
y sin límite de ancho de banda.
Actualmente, Google Drive nos permite guardar hasta 15 GB
de forma gratuita
y cuenta con varios paquetes muy económicos
para rentar espacio adicional si así lo requerimos.
Para los que poseen una Chrome Book,
Google les regala 100 GB
de almacenamiento en Drive por un año.
Para usar una carpeta como web hosting,
solo sigue estos sencillos pasos.
Paso 1:
Primero, necesitamos crear la carpeta que usaremos
para almacenar nuestro proyecto
desde la aplicación web de Google Drive.
Para este ejemplo, crearemos una carpeta llamada
"Drive HTML hosting".
Paso 2:
Ahora, seleccionamos la carpeta que acabamos de crear
dando clic derecho con nuestro mouse.
Buscamos la opción "Compartir"
y seleccionamos "Compartir".
Paso 3:
Notarás que aparecerá una ventana
en donde se muestran las opciones
para compartir de esta carpeta.
En este caso, necesitamos ubicar la sección
"Quién tiene acceso".
Por default, las carpetas son privadas.
Para activar el hosting,
necesitamos convertir la carpeta en pública.
Para esto, primero debemos dar clic donde dice "Cambiar".
Paso 4:
Se abrirá la ventana "Opciones para compartir".
En "Opciones de visibilidad",
debemos seleccionar la opción "Público en la Web"
y dar clic en "Guardar".
Esto nos mandará de vuelta a la pantalla anterior.
Ahora veremos que el contenido de la carpeta
está marcado como "Público en la red".
¡Y listo!, ya hemos activado
el "Drive HTML hosting"
para todos los archivos y subcarpetas
que guardemos en este folder.
Demos clic en "Fin" para salir de esta pantalla.
Paso 5:
Ahora necesitamos saber la URL
que le fue asignada a nuestra carpeta.
Para verla, debemos hacer clic derecho en la carpeta,
pero, en esta ocasión, elegimos la opción "Detalles".
Si hicimos todo correctamente,
veremos que se ha agregado un nuevo detalle llamado:
"Alojamiento".
Esta dirección apunta nuestra carpeta
pero en un formato de página web.
Si la carpeta contiene un archivo llamado index.html,
lo cargará por defecto cuando alguien acceda a esta dirección.
Caso contrario,
mostrará una lista de todos los archivos
que contiene esta carpeta,
de modo que también lo podemos usar
para compartir fácilmente
todo el contenido de la carpeta con el mundo.
Si es un archivo que Google Drive pueda usar,
mostrará su contenido directamente en el navegador,
caso contrario,
se iniciará una descarga del archivo seleccionado.
Para gozar de los beneficios de la sincronización automática,
lo primero que debemos hacer es descargar la aplicación
"Google Drive for Desktop",
la cual está disponible en Mac y Windows.
Una vez instalada, debemos esperar a que termine
la sincronización de los archivos en mi unidad.
El tiempo que tome dependerá del tamaño
y cantidad de los archivos,
así como también de la velocidad de nuestra conexión a Internet.
Esto nos permitirá crear y editar archivos
directamente en nuestro equipo,
los cuales se mantienen sincronizados con la nube,
por lo que, cada vez que guardemos un cambio,
este se verá reflejado de forma automática
y casi instantánea en nuestra página o aplicación.
Otra gran ventaja es que Google Drive
nos permite compartir carpetas con otros usuarios,
y estas también se mantendrán sincronizadas con sus equipos,
siempre que ellos tengan instalada la aplicación
Google Drive for Desktop.
Esto facilita mucho el trabajo en equipo.
Una más de las potentes herramientas de colaboración
en tiempo real que nos ofrece la plataforma Google Drive.
Te invito a que veas esta lección nuevamente,
esta vez haciendo pausas para ir siguiendo los pasos
y copiando el código que se te muestra.
Para comparar, puedes ver un ejemplo ya armado
en la dirección que aparece en pantalla.
Con esto concluimos por el momento.
Nos vemos en la siguiente lección:
"Introducción a Google Charts",
en donde aprenderemos, entre otras cosas,
cómo hacer gráficas para tus aplicaciones HTML5,
y créeme, no te la quieres perder.
Me despido de ustedes por el momento y recuerden:
¡sigan programando!