Trabajando Con HTML5 y CSS3

Programa .NET 4.5 Web Application Developer Visual Studio 2012

Trabajando con HTML5 y CSS3

Al finalizar el curso, el alumno podrá:

Reconocer y aplicar HTML5 con CSS3 en un Proyecto ASP.NET MVC.

Temas:

1. Introducción a URL Routing

2. Estructuras y Esquemas en HTML5

3. Compatibilidad en HTML5

4. Nuevos Input en HTML5

5. Nuevos atributos en HTML5

6. Nuevos elementos en HTML5

7. Canvas

8. Generación de bibliotecas de estilos con CSS3

9. Multimedia – Audio y Video

10. Web Sockets

11. Web Workers

12. Geolocalización

13. Drag and Drop

14. Notificaciones

15. Compatibilidad Navegadores

Trabajando con HTML5 y CSS3 114

1. Introducción a URL Routing

1.1 Características de HTML5

Simplificación: el nuevo código ofrece nuevas formas, más sencillas de especificar, algunos parámetros y piezas de código.

Contenido multimedia: reproducción de audio y video sin necesidad de plugins

Animaciones: posibilidad de mostrar contenidos de manera similar a Adobe Flash, pero prescindiendo de este componente. HTML5 tendrá soporte nativo

para una tecnología similar a Flash.

Almacenamiento de datos del lado del cliente: una diferencia fundamental entre las aplicaciones de escritorio y web, era la necesidad de éstas últimas, de procesar la información y consultas en bases de datos siempre en un servidor,

haciendo que las aplicaciones sean más lentas y siempre requeridas de una conexión a Internet constante. Asimismo, HTML5 permitirá almacenar y procesar información en el cliente, convirtiendo a una aplicación web a una aplicación mucho más parecida a una de escritorio.

Efectos y nueva versión de hojas de estilo CSS: la nueva versión de HTML

acompañará a una nueva versión de las hojas de estilo CSS, denominado CSS3. Se trata de nuevas posibilidades de formato, como por ejemplo, la implementación de sombras, bordes redondeados, etc. Muchas de las cosas que, hasta ahora, solo podrían lograrse insertándolas como imágenes, podrán realizarse con código. Esto no solo se traduce en una

mejora de la velocidad y performance de un sitio, sino también en nuevas e ilimitadas opciones de diseño.


Geo-locación: los sitios web podrán saber la ubicación física de la persona que lo visita.

Tipografías no estándar: la mayor limitación a la que se enfrentaban los diseñadores era la imposibilidad de utilizar tipografías no estándar en sitios web. Prácticamente, todos estaban limitados a aquellas que fueron impuestas por los navegadores principales como: Arial, Times New Roman, Verdana, Tahoma, etc. Considerar que la implementación de sistemas como Google

Fonts, hoy permite utilizar muchas más.

Por lo tanto, la nueva versión de HTML contiene elementos dedicados ampliamente a mejorar la experiencia del usuario en una página web, haciendo más fácil poder agregar elementos de audio, video y en general del web 2.0, así como, organizar

contenidos utilizando menos código. La nueva versión es más eficiente y ocupa menos recursos en la computadora del cliente; en particular, mediante el uso del nuevo reproductor que no requiere flash o Adobe Player para utilizarse, siendo el HTML5, compatible con las versiones anteriores de HTML.


2. Estructuras y Esquemas en HTML5

HTML4 y HTML5 son 100% compatibles entre sí. Todo el código en HTML normal seguirá funcionando sin problemas en HTML5. Para empezar a usar HTML5, se deberá colocar este DOCTYPE, antes de la etiqueta <html>: <!DOCTYPE html>

Las principales etiquetas HTML5 nuevas, no tienen una representación especial en pantalla. Todas se comportan como un <div> o un <span>, pero cada una tiene un significado semántico superior a un simple div o span.

<header>

Hacer cosas como <div id=”header”> no tiene mucho sentido cuando el 99% de los proyectos web, tienen una cabecera. <header>, diseñada para reemplazar la necesidad de crear divs, sin significado semántico.

<hgroup>

Muchos headers necesitan múltiples títulos, como un blog que tiene un título y un tagline explicando el blog. De tal manera que <hgroup> permite colocar un h1, h2 y h3 dentro del header, sin afectar el SEO, permitiendo usar otro h1 en el sitio. En el HTML actual, solo se puede usar h1, una vez por sitio o el h1 pierde prioridad de SEO.

<nav> Está diseñado para colocar la botonera de navegación principal. Se puede colocar cualquier etiqueta dentro, aunque lo recomendado es usar listas <ul>. <section> Define un área de contenido única dentro del sitio. En un blog, sería la zona donde están todos los posts. En un video de youtube, habría un section para el video, uno

para los datos del video, otro para la zona de comentarios.


<article> Define zonas únicas de contenido independiente. En el home de un blog, cada post

sería un article. En un post del blog, el post y cada uno de sus comentarios sería un <article>.

<aside> Cualquier contenido que no esté relacionado con el objetivo primario de la página va en un aside. En un blog, obviamente el aside es la barra lateral de información. En el

home de un periódico, puede ser el área de indicadores económicos.

<footer> Representa el pie de página y todo lo que lo compone.

div siempre debe usarse cuando se necesite una caja con objetivos de diseño gráfico o cualquier cosa que no tenga significado semántico. Se deben usar las etiquetas semánticas de HTML5 donde sean necesarias.


2.1 Las etiquetas nuevas de HTML5 Las etiquetas semánticas, a pesar de ser claves para un posicionamiento en

buscadores y buen desarrollo web, no son la razón por la que todo el mundo habla de HTML5, los videos, audios y animación vectorial están en la lista de prioridades.

Específicamente, las nuevas etiquetas son:

<video> Inserta video sin necesidad de plugins. Es muy fácil usarla, pero cada navegador soporta códecs diferentes de video, lo que hace necesario recodificar un video en múltiples códecs.

<audio> Lo mismo que video, pero sin video. Puede usar múltiples formatos, en especial mp3, pero también depende del navegador.

<input *>

Input ya existía como la etiqueta para insertar cajas de texto y botones. Ahora es más poderosa, con la capacidad de insertar cajas tipo “email” que se autovalidan, calendarios tipo "date", sliders, números, entre otras.

<canvas>

Un área de dibujo vectorial y de bitmaps con Javascript. Es un API de dibujo entero para Javascript.

<svg> Una etiqueta, igual que <img>, para insertar dibujos y animaciones vectoriales al estilo de Flash. Está basado en el estándar abierto SVG (Scalable Vector

Graphics), derivado de XML.


3. Compatibilidad en HTML5

A pesar de que en un futuro, se espera que este nuevo lenguaje funcione a la perfección en todos los sistemas de navegación, incluyendo los dispositivos móviles, por ahora se ejecuta mejor en Google Chrome, Safari y Mozilla Firefox, siendo Microsoft Internet Explorer el que se

queda muy atrás en esta carrera (únicamente los navegadores 8.0 en adelante lo soportan). Por lo tanto, no todas las características que ofrecen HTML5 y CSS3 son admitidas por los navegadores web actuales. Por tanto, es necesario consultar algunas páginas de referencia para conocer qué elementos se pueden utilizar porque son admitidos por la mayoría de los navegadores y qué elementos no se pueden utilizar porque no funcionarán.

Soporte según The HTML5 Test (http://html5test.com/):

http://html5test.com/


Soporte según Whan can I use... (http://caniuse.com/):

Otro sitio web con información sobre soporte de HTML5 y CSS3 es findmebyIP. En las siguientes imágenes, se puede ver la compatibilidad o soporte de los nuevos controles y atributos de formulario (http://fmbip.com/)

http://caniuse.com/


4. Nuevos Input en HTML5

Cuando se trata de formularios, se refiere también a la interacción entre los usuarios y una aplicación web, basados en la introducción de datos de entrada. En muchas ocasiones, la entrada de datos puede convertirse en una tarea tediosa para los desarrolladores, quienes tienen que buscar qué métodos son los mejores para introducir datos, de una manera intuitiva y validarlos por medio de la programación. Es frecuente ver, en aplicaciones web medianamente bien realizadas, rutinas de validación de

datos que permiten al usuario, rellenar los formularios con la información correcta. El trabajo para la validación de los datos, generalmente, se realiza con un lenguaje del lado del cliente como Javascript, aunque algunos prefieren lenguajes de servidor para validar datos. No siempre es recomendable validar los datos en el servidor, por el abuso de transacciones HTTP que pueden producirse. Por ello, el mejor método para la validación es JavaScript en el

lado del cliente, o una mezcla entre ambas arquitecturas, cliente y servidor. Gracias a HTML5 los desarrolladores poseen importantes herramientas para validar datos en un formulario, de una forma más fácil, con menos rutinas de código. HTML5 está pensado para ser usado en múltiples entornos, y por tal razón se han creado nuevos tipos de INPUT.

INPUT tel: Este tipo de input viene predispuesto con un formato para escribir números telefónicos. En realidad no hace validación, pero sí se puede implementar una con la nueva API de validación de JavaScript.

INPUT number pre formateado: Sirve para escribir solo números. En algunos navegadores, cuando se ejecuta el evento onSubmit, no se hace el envío en caso que el campo number, esté lleno de caracteres que no sean numéricos.


INPUT search:

Además de proporcionar un campo de entrada, se le agrega un ícono de búsqueda para distinguirlo de un campo de navegación.

INPUT color: Este input brinda una paleta de colores donde el usuario puede escoger un color de forma dinámica. Es lo que, generalmente, se llama un colorpicker, con la particularidad

que lo ofrece el propio navegador.

INPUT range: Proporciona un control que se desliza, cambiando automáticamente el valor del campo.

INPUT URL: Este tipo de entrada viene con un formato para URL absoluta.

INPUT email:

Tiene la capacidad de aceptar únicamente, direcciones de correo electrónico. Además, se pueden enviar varios email, separados por comas, si se tiene especificado el atributo múltiple.

INPUT datetime: Para obtener fecha del conjunto de la zona horaria UTC.

INPUT date: Para introducir una fecha que no haga parte de del conjunto horario.

INPUT month:

Para introducir meses del año.

INPUT week: Ofrece una utilidad para escribir y captar información de semanas.

INPUT time: Obtiene información con horas, minutos y segundos.

Tipo datetime-local:

Recibe la hora local del dispositivo.


5. Nuevos atributos en HTML5

Son aproximadamente 18 atributos que se pueden utilizar en HTML5 y que se pueden revisar el siguiente link: http://www.w3schools.com/html/html5_form_attributes.asp. A continuación, una explicación de los atributos más importantes:

El atributo autocomplete La mayoría de los navegadores tienen algún tipo de funcionalidad de autocompletar. Este atributo permite controlar cómo funciona esto; específica si un campo de formulario o de entrada, debe tener autocompletado de encendido o apagado, es decir,

On u Off. El atributo autocomplete trabaja con <form> y con los <input> siguientes: text, search, url, tel, email, password, datepickers, range y color.

El atributo autofocus El autofocus o enfoque automático proporciona una forma declarativa para enfocar un

control de formulario durante la carga de la página. Anteriormente, con JavaScript se usaba control.focus(). La nueva forma permite al navegador, hacer cosas inteligentes como no centrar el control, si el usuario ya está escribiendo en otro.

El atributo multiple

Especifica que el usuario puede introducir más de un valor en el elemento <input>; por ejemplo, <input type=email múltiples>, permite al usuario, introducir varias direcciones de correo electrónico.

http://www.w3schools.com/html/html5_form_attributes.asp


El atributo required

En un elemento se establecerá en un <input> y automáticamente, hace que el usuario se vea obligado a llenar el campo para continuar, es decir, el navegador no permitirá que se envíe la forma, sin que el input con este atributo, se encuentre vacío. El atributo requerido trabaja con los tipos de entrada: text, search, url, tel, email, password, date pickers, number, checkbox, radio y file.

El atributo min and max: Especifica el valor mínimo y máximo para un elemento <input>. Funciona con los siguientes tipos de entrada: number, range, date, datetime, datetime-local, month, time y week.

6. Nuevos elementos en HTML5


<article> Se usa para definir de forma independiente, un contenido autónomo. Puede ser contenido especificado de forma independiente del resto del sitio, también puede representar un tema de un foro, un artículo de un periódico o una entrada de un blog, entre otros.

<aside> Esta etiqueta se usa para identificar contenido, aparte del contenido en el que se enmarca, pero con el que está relacionado.

<audio>

Permite introducir audio en una aplicación. La etiqueta <source> se usa para definir, posteriormente, la ruta y el tipo.

<bdi>

Permite aislar una parte del texto, de forma que éste pueda ser formateado en una dirección diferente al resto del texto del documento. Es útil cuando se introduce texto como un nombre de usuario, por ejemplo, dentro de otro que puede variar su sentido de lectura (por ejemplo: árabe o idiomas orientales).

<canvas>

Es una de las etiquetas más famosas de HTML5. Se trata de un contenedor donde se permite el dibujo. Generalmente, se realiza a través de JavaScript.

<command> Define un comando (puede ser un botón, un botón de selección múltiple, checkbox o de

selección simple, radiobutton) que el usuario puede invocar. Un comando puede ser parte de un menú contextual, una barra de herramientas o formar parte de un menú usado el elemento <menu>, o puede ponerse en cualquier parte de la página para definir un atajo de teclado.

<datalist>


Especifica una lista de opciones predefinidas para un elemento <input>. Se usa para proporcionar la característica de autocompletado a los elementos de este tipo. Los usuarios verán una lista, que se va rellenando de forma automática, conforme ellos

escriben sugiriendo diferentes opciones La idea de esta etiqueta es normalizar las inclusiones de contenidos de aplicaciones externas vía plugins. No obstante, para integrar un fichero SWF de Flash se haría como se indica a continuación:

<footer>

Define el pie de página de un documento. Se puede tener más de un pie de página.

<header> En el sitio contrario, esta etiqueta define la cabecera.

<meter> Define una medida escalar, dentro de un rango conocido. No confundir con la etiqueta <progress>.

<nav>

Define un bloque donde se enmarcan diferentes enlaces de navegación.

<progress> Representa el grado de progreso de una tarea.

<video> Es una etiqueta equivalente a <audio>, pero en este caso sirve para emitir video.


7. Canvas

HTML 5 tiene como una de sus novedades interesantes el Canvas. El elemento Canvas permite especificar un área de la página donde se puede, a través de scripts, dibujar y renderizar imágenes, lo que amplía, notablemente, las posibilidades de las

páginas dinámicas y permite hacer cosas que hasta ahora estaban reservadas a los desarrolladores en Flash, con la ventaja que para usar Canvas no será necesario ningún “plugin” en el navegador.

7.1 Compatibilidad se Canvas

El canvas se desarrolló inicialmente por Apple para su navegador Safari y luego, fue utilizado y estandarizado por la organización WHATWG para incorporarlo a HTML 5. Posteriormente, también ha sido adoptado por navegadores como Firefox y Opera. Por lo que respecta a Chrome, es un navegador que utiliza el mismo motor de renderizado que Safari, por lo que también, soporta el elemento Canvas.

De entre los navegadores más habituales se encuentra el Internet Explorer. Existe el proyecto Explorer Canvas en el que se ha preparado un “plugin” para que Explorer soporte el dibujo 2. Sin embargo, aunque en diversos frentes se ha comenzado a utilizar Canvas, la falta de soporte de Internet Explorer hace que todavía no sea muy recomendable su incorporación a las aplicaciones

web, ya que los usuarios, no podrían ver las partes de la página donde se utiliza Canvas.


7.2 Propiedad Intelectual de Canvas Uno de los problemas de Canvas es que se creó bajo propiedad intelectual de

Apple, es decir, que dicha empresa era la creadora de la ingeniería que daba soporte a este nuevo elemento y por tanto, se encontraba bajo patentes de la compañía. Este hecho, añadido a la existencia de un formato abierto que sirve para hacer cosas similares como es el SVG, hizo que surgiera una polémica sobre la aceptación de este elemento en el nuevo estándar del HTML5. No obstante, Apple abrió la licencia de uso de patente, liberando la propiedad

intelectual de la misma, condición estrictamente necesaria para que la W3C, que siempre apoya patentes libres, incorporase finalmente dentro del nuevo estándar del lenguaje HTML.

7.3 Aplicaciones de Uso de Canvas

Canvas permite dibujar en la página y actualizar dinámicamente estos dibujos, por medio de scripts y atendiendo a las acciones del usuario. Todo esto da unas posibilidades de uso tan grandes como las que se dispone con el plugin de Flash, en lo que respecta a renderización de contenidos dinámicos. Las aplicaciones pueden ser grandes, desde juegos, efectos dinámicos en interfaces de usuario, editores de código, editores gráficos, aplicaciones,

efectos 3D, etc. Actualmente, algunas de las aplicaciones más novedosas para la web utilizan Canvas para su funcionamiento. Cuando se trabaja con Canvas, primero se debe referenciar el elemento Canvas y adquirir su contexto (API). Por el momento el único contexto

disponible es el contexto bidimensional. Se recomienda usar firebug o similares a la hora de aprender a usar la API para poder ver los cambios en vivo y avanzar con mayor velocidad:

Una vez que se adquiere el contexto, se puede empezar a dibujar en la

superficie del canvas usando la API a tal efecto documentada en http://bit.ly/l1BMyi. La API bidimensional ofrece muchas de las herramientas que podemos encontrar en cualquier aplicación de diseño gráfico como Adobe Illustrator o Inkscape: trazos, rellenos, gradientes, sombras, formas y curvas Bézier. Pero de todas formas se debe especificar cada acción usando JavaScript.

7.4 Dibujar don Javascript

Primero, se especifica el color del trazo:


Cualquier cosa que se dibuje, tendrá un contorno de color verde. Para visualizar este ejemplo, se va a dibujar un rectángulo.

La sintaxis del método strokeRect es como sigue: strokeRect (izquierda, arriba, ancho, largo). Por lo tanto, en el ejemplo anterior, se ha dibujado un

rectángulo posicionado a 20 pixels del margen izquierdo y 30 del derecho con un tamaño de 100×50 pixels.

Si por ejemplo, se desea dibujar un rectángulo relleno con color, se deberá especificar el color del relleno.

Dibujar un rectángulo con relleno.

La API 2D tiene muchos métodos para trabajar con ella. En teoría, se puede crear cualquier imagen que puede dibujarse en un programa de edición de gráficos vectoriales. El potencial de Canvas reside en su habilidad para actualizar su contenido en tiempo real. Si se usa esa habilidad para responder a eventos de usuario, se

pueden crear herramientas y juegos que anteriormente a la nueva especificación, hubiesen requerido de un plugin externo como Flash.


Laboratorio Nº 1

Realizar la maquetación con HTML5 del Layout de una Aplicación Web

Objetivo:

Implementar y validar que toda la estructura del contenido de la aplicación se encuentre basada en HTML5. Modifique el Layout para lograr dicho propósito.


8. Generación de bibliotecas de estilos con CSS3

El objetivo de CSS3 es evitar los trucos que los programadores deben emplear a la hora de hacer diseños cotidianos. Generalmente, estos trucos eran ingeniosos, pero engorrosos, lo cual emborronaba el código de las páginas haciéndolas más complicadas. Así que con la llegada de CSS3 se tiene el control total de los elementos de la aplicación web.

Estas son las características que varían en CSS3 (para mayor referencia puede revisar el siguiente link: http://www.w3schools.com/css3/default.asp)

8.1 Propiedades en CSS 3

Bordes

border-color: se añaden bordes con degradados (gradientes), pero solo para Mozilla

border-image: posibilidad de crear bordes redondos y de muchas formas para imágenes, aunque también hay incompatibilidades con Internet Explorer y demás navegadores.

border-radius: permite hacer cajas con bordes redondeados sin usar trucos.

box-shadow: sombras con gradientes para las cajas.

Fondos

background-origin&background-clip: posiciones del fondo con respecto a las cajas, con tres modos diferentes.

Background-size: especificación del tamaño de la imagen de fondo. En píxels o porcentaje.

Multiplebackgrounds: varias imágenes de fondo en el mismo elemento. Su notación es como hasta ahora, pero separando con comas, cada imagen.

http://www.w3schools.com/css3/default.asp


Color Las novedades más importantes de todo el CSS3.

Colores HSL: otra manera de especificar los colores: color, saturación y luminosidad.

Colores HSLA: lo mismo que el anterior, añadiendo un canal alfa (opacidad).

Colores RGBA: añadir un 4º canal a la notación RGB de colores: El

canal alfa (opacidad).

Opacidad: lo comentado en los dos puntos anteriores. Texto

text-shadow: efectos de sombra en texto.

text-overflow: cuando el texto desborde, se ponen automáticamente tres puntos suspensivos.

text-Wrap: trunca palabras largas que no caben en una línea.

Funciona en Safari. INTERFAZ DE CSS3

box-sizing: nuevo atributo para las cajas, para especificar las dimensiones.

resize: para redimensionar las cajas.

outline: para crear marcos y bordes dobles con la separación especificada en píxels.

OTROS

media queries

multi-columnlayout: propiedades de columnas de texto dentro de la misma caja.

Web fonts: aunque se implementó en CSS2, esta propiedad permite

que se visualice, correctamente, un texto con una fuente que el usuario no tenga instalada en su S.O.

Speech: se implementó con CSS2, pero ahora se le añaden (y quitan)

muchos atributos a esta propiedad que sirve para que una página

pueda ser leída por el ordenador en “voz alta”. Útil para que la web no

suponga una barrera para usuarios con problemas de visión.

Los usuarios esperan que sus sitios y aplicaciones web funcionen bien incluso

sin estar conectados a la red. Al haber cada vez más datos almacenados en la

nube, la pretensión de los desarrolladores es crear experiencias fluidas que

permitan acceder a los datos en condiciones de ausencia conectividad o mala

cobertura.

A continuación, se explica cómo se pueden crear sitios y aplicaciones con un buen funcionamiento sin conexión, utilizando las siguientes funcionalidades de HTML5:

AppCache, para guardar los archivos en local y acceder a ellos en modo offline en forma de URLs.

IndexedDB, para guardar datos estructurados en local, y poder acceder y consultarlos

El almacenamiento de DOM (DOM Storage) para guardar pequeñas

cantidades de información, en formato de texto en el equipo.

Los eventos Offline, para detectar si el equipo está conectado a la red.

Se hará un breve análisis a los escenarios de este tipo con una combinación de

tecnologías offline: AppCache, IndexedDB, DOM Storage, y WebSockets (o XHR).


En el caso de las aplicaciones y sitios web estilo Metro, las tecnologías offline permiten manejar los fallos en la conectividad. . En escenarios más complejos, los sitios y aplicaciones web, permiten al usuario

crear nuevos contenidos y almacenar datos, aun en condiciones de falta absoluta de conexión.

Las tecnologías offline pueden además, mejorar el rendimiento global del sistema, utilizando datos cacheados en local, precargando información que se utilizará más adelante y trasladando parte de la carga de procesamiento desde

la nube (o la red) al dispositivo del cliente. Cuanta más información se mantiene, se busca y se procesa en local, menos recursos necesita el servidor y más rápida será la experiencia del usuario.

Existe un gran interés en que las aplicaciones estilo Metro puedan funcionar offline, mayor que en el caso de los sitios web. Debido a que se distribuyen

utilizando paquetes auto-contenidos que se descargan desde las tiendas, los usuarios esperan que tengan algún tipo de funcionalidad en modo offline (juegos, libros, recetas, etc.). Aunque estas aplicaciones no puedan crear o acceder a contenidos nuevos, los contenidos anteriores deberían estar accesibles (contactos, reuniones, noticias, etc.).

8.2 Cache Local de Archivos con AppCache

AppCache permite crear caches en local de larga duración o recursos de archivos descargados. A estos recursos, se pueden acceder sin conexión, El uso de esta tecnología es tan sencillo como acceder al objeto windows.localStorage. En este objeto se puede consultar o añadir, pares

nombre-valor en forma de propiedades. En ciertas circunstancias, los datos de los usuarios seguirán residiendo en la nube, a fin de que se pueda acceder a ellos sin dificultad, utilizando varios dispositivos. Por tanto, hay que asegurarse que los datos cacheados siguen siendo relevantes y están actualizados. Para ello, se necesita crear canales de

sincronización de datos entre las aplicaciones y la nube. Se podrán usar WebSockets y XHR que ofrecen una forma de sincronización. Es preciso que se empaqueten los datos dentro de formatos transferibles (por ejemplo, XML o JSON), utilizar XHR o WebSockets para transferir estos recursos al cliente y después utilizar parsers XML o JSON para crear los objetos JavaScript que se guardarán en una base de datos IndexedDB. Esta técnica también se puede

utilizar para subir al servidor la información guardada en el DOMStorage. No siempre la conexión a la red es fiable, pero las aplicaciones sí tienen que ser fiables. Con las tecnologías offline, se anticipa a una interrupción de la conexión y hacer que las aplicaciones, funcionen mejor incluso, en muchos escenarios y situaciones de la vida real. Esta ventaja aumentará su utilización y

aumentará la satisfacción de los usuarios. Además, los eventos offline/online permiten detectar el estado de la conexión a la red, de manera que se pueden enviar los datos al servidor o esperar. Por ejemplo, detectar si se tiene conexión y actualizar la base de datos con contenidos del propio servidor utilizando WebSocketso XHR. El siguiente código muestra cómo se registra la aplicación para los eventos

online y offline:


8.3 Grandes Cantidades de Datos Estructurados con Indexeddb

IndexedDB es una base de datos local, diseñada para almacenar objetos JavaScript en la máquina local, agilizando el indexado y la búsqueda de dichos objetos. Por ejemplo, si se desea utilizar una fuente de noticias RSS, un

WebSocket o una conexión XHR, para actualizar esta base de datos cada cierto tiempo. Así los usuarios tendrían acceso a la información más reciente aunque no estén conectados a la red. Además, IndexedDB permite manipular e indexar objetos Javascript directamente. Una ventaja de utilizar IndexedDB, de forma directa, para buscar

información en local es que reduce los costes de computación. Esto supone que se puede mantener la relevancia de la información cacheada en el sistema local. El siguiente ejemplo CookbookDemo (http://ie.microsoft.com/testdrive/HTML5/Cookbook/Default.html), muestra una lista de recetas almacenadas en la máquina local accesibles con IndexedDB.


IndexedDB es una tecnología creada empleando los conceptos de base de datos ISAM. Al igual que sucede con muchas tecnologías de plataforma web, está diseñado de manera que ofrece una API de bajo nivel, que se puede utilizar para desarrollar librerías con un mayor nivel de abstracción a par tir de

ella.

A la hora de utilizar IndexedDB se crean bases de datos que contienen almacenes de objetos (contactos, correos, citas, etc.). Dichos almacenes de objetos contienen los objetos JavaScript que necesita la aplicación (contactos, nombre, apellido, dirección, etc.). Cada objeto JavaScript debe tener un

identificador único, accesible mediante una clave keyPath. Además, los almacenes de objetos contienen índices para aquellas propiedades que se pueden utilizar para hacer consultas contra la base de datos (emails: asuntos, fechas, etc.). Los filtros se pueden utilizar para organizar o reducir el bloque de resultados por medio de rangos de clave (“KeyRanges”) en los índices o en el almacén de objetos.

El siguiente ejemplo de código, muestra cómo se puede leer un registro de un libro de una base de datos “Library”:


El acceso a la información contenida en almacenes de objetos siempre es en

modo de lectura o escritura en el contexto de una transacción. Se tienen tres tipos de transacciones:

VERSION_CHANGE: se utiliza para crear o actualizar el almacén de objetos y los índices. Puesto que bloquean toda la base de datos y evitan la ejecución

simultánea de varias operaciones, no se recomiendan para leer y escribir registros en la base de datos.

READ_WRITE: permite añadir, leer, modificar y borrar registros contenidos en el almacén de objetos.

READ_ONLY: permite la lectura de objetos del almacén.

El modelo de API asíncrona, proporcionada por IndexedDB aprovecha el modelo request/response soportado por muchas APIs web, como es el caso de HXR. Las peticiones se envían al proceso local IndexedDB y los resultados se manipulan por medio de manejadores de eventos onsuccess y onerror en el lado del cliente. Aparte, no hay un mecanismo explícito para confirmar la

transacción (“commit”). Las transacciones se confirman cuando no hay más peticiones pendientes en el servidor y no hay resultados pendientes en el cliente. Más aún: queda a cargo de la aplicación la gestión de excepciones y eventos de error. En muchas ocasiones, si no se maneja un evento de error o una excepción, la transacción se aborta.

En suma, IndexedDB es un mecanismo optimizado para consultar objetos de datos utilizando índices. Aporta las APIs necesarias para acceder a grandes cantidades de datos estructurados, por medio de cursores y para filtrar los datos utilizando objetos KeyRange.

8.4 Almacenamiento de datos de texto en local, con Dom Storage y Eventos Offline/Online Los sitios web pueden utilizar el almacenamiento del DOM (DOMStorage) y los eventos de conectividad para mantener pequeñas cantidades de datos en formato de texto y detectar posibles problemas de conectividad. Imaginando un juego en el que se utiliza estas tecnologías para llevar la cuenta

de la puntuación del usuario cuando no está conectado. Suponiendo que se ha logrado una puntuación muy elevada y no hay conexión a la red ¿la página web se cuelga o devuelve un error? Ya que los datos son de naturaleza no estructurada (textos) y no necesitan mucho espacio, se podrá utilizar el DOM Storage, para guardar en local esta información sin necesidad de estar conectados y subirla al sitio web en un

momento posterior, cuando se recupere la conexión a la red. DOM Storage soporta una cantidad de datos superior a las cookies y no se necesita codificarlos de ningún modo. Además, DOM Storage no envía datos al servidor a cada petición y se puede restringir para acceso a nivel de dominio o de sesión.


El uso de esta tecnología es tan sencillo como acceder al objeto windows.localStorage. En este objeto, se puede consultar o añadir pares nombre-valor en forma de propiedades. El siguiente fragmento de código

muestra cómo se almacenaría la puntuación del juego con localStorage:


Además, los eventos offline/online, permiten detectar el estado de la conexión a la red, de manera que se puede enviar los datos al servidor o esperar. Por

ejemplo, se puede detectar si se tiene conexión y actualizar la base de datos con contenidos del propio servidor utilizando WebSockets o XHR.

Es tan sencillo como comprobar el estado de la propiedad navigator.onLine. El código siguiente, muestra cómo se registra la aplicación para los eventos online y offline.

En el caso de las aplicaciones estilo Metro, existe una API adicional, llamada Windows.ApplicationData, que permite guardar en local más tipos de datos y que pueden migrar entre múltiples máquinas.

El punto clave consiste en diseñar la aplicación o el sitio web con la idea de que la conectividad puede desaparecer en cualquier momento y se debe manejar esta situación, de manera transparente para el usuario. Si se implementa un patrón de datos que almacena información en local antes de enviarla a la nube, se tendrá una buena solución para situaciones donde el

acceso a la red da problemas. Actualizar datos en local con WebSockets y XHR En ciertas circunstancias, los datos de los usuarios seguirán residiendo en la nube, a fin de que se pueda acceder a ellos sin dificultad, utilizando varios dispositivos. Por tanto, se tiene que asegurar de que los datos cacheados siguen siendo relevantes y están actualizados. Para ello, se necesitan crear canales de sincronización de datos entre las aplicaciones y la nube. Es preciso

que se empaqueten los datos dentro de formatos transferibles (por ejemplo, XML o JSON), utilizar XHR o WebSockets para transferir estos recursos al cliente y después utilizar parsers XML o JSON para crear los objetos JavaScript que se guardarán, finalmente en una base de datos IndexedDB. Esta técnica también se puede utilizar para subir al servidor la información guardada en el DOM Storage.


Laboratorio Nº 2

Generación de biblioteca de estilos con CSS3 para toda la aplicación

Objetivo:

Implementar una hoja de estilos con CSS3, aplicando los atributos a la maquetación del Layout en la aplicación.


9. Multimedia – Audio y Video

Audio El nuevo elemento permite el uso de diferentes formatos de archivo puesto que los

formatos que soportan los diferentes navegadores no son parte del estándar sino que depende de la implementación de cada fabricante. Según la siguiente tabla, se puede comprobar qué formatos soportan los navegadores más usados de forma nativa.

Con el aumento del ancho de banda, los contenidos de video han ido aumentando de forma vertiginosa hasta convertirse en una de las mayores necesidades de ancho de banda en la red. El método por excelencia, a la hora de reproducir video a través de un

navegador. Tanto en Safari como en Chrome, algunos formatos dependen de Quicktime y “ffmpeg” respectivamente. Chrome realmente no soporta todos los formatos de forma nativa, tan solo Vorbis y MP3. Además, combinando Vorbis y MP3 se puede ofrecer audio a todos los navegadores mayoritarios.

Para usar esta característica, primero se debe embeber un archivo de audio.


Como ocurre con todas las etiquetas de HTML 5, lo que se encuentre entre las etiquetas de audio, solo será tomado en cuenta por navegadores que no soportan la

nueva etiqueta. Por ejemplo, se puede embeber un archivo de audio que se auto reproduzca por sí mismo, al cargar la página.

El atributo autoplay es un booleano y por lo tanto, no necesita de un valor, sin embargo si se desea escribir código al estilo XHTML, se puede usar autoplay="true".

Controles Se pueden cargar los controles básicos para el elemento audio.

Este atributo hace que el navegador provea de una interfaz con controles para la reproducción y el control del volumen de forma nativa. Los controles del navegador pueden ser suplantados por los propios controles usando JavaScript, a través de una API que proporciona métodos para controlar todos los aspectos de la reproducción del

archivo de audio.

Buffer Si se desea que el archivo de audio sea precargado, en segundo plano, por el navegador, entonces se puede usar el atributo preload que puede tomar tres posibles valores: none, auto y metadata.

Safari precarga los archivos de audio por defecto, usando preload="none", se puede asegurar de que eso no ocurra en aquellos contextos en los que se considere que no es necesario que el navegador precargue los archivos, por ejemplo, cuando existen muchos archivos en una misma página. Si solo se tiene un archivo de audio en la página, entonces, se podrá usar preload="auto".


Existe una forma de definir más de un archivo de audio en diferentes formatos, utilizando únicamente una etiqueta audio para ello. En lugar de usar el atributo src en

la etiqueta de apertura, se puede utilizar la etiqueta source para poder definir múltiples archivos.

Para el caso de archivos de navegadores que no soporten la funcionalidad de audio, puede usarse de la siguiente forma.

Video Con el aumento del ancho de banda, los contenidos de video han ido aumentando de

forma vertiginosa hasta convertirse en una de las mayores necesidades de ancho de banda en la red. El método por excelencia, a la hora de reproducir video, a través de un navegador, ha sido utilizar el plugin de Flash, pero éste no es la única vía, puesto que se puede usar también Silverlight, ya que no tiene complejidad alguna, para utilizar dicha plataforma y generar contenido multimedia.

Existen diversos formatos de video para la nueva especificación y por supuesto, no todos reproducen los mismos formatos de forma nativa.

El elemento video es muy parecido al elemento audio, también dispone de los atributos autoplay, loop y preload. También se puede especificar la fuente de un archivo bien usando el atributo src en la etiqueta de apertura o bien usando el elemento source entre las etiquetas de apertura y cierre. Además se puede utilizar los controles que ofrece el navegador de forma nativa utilizando el atributo controls o bien puedes ofrecer tus propios controles en JavaScript.

Obviamente, el elemento video ocupa espacio en la ventana, por lo tanto, se puede definir un tamaño para el mismo.

También se puede definir una imagen representativa para el video para que sea mostrada al navegador como portada del elemento antes de la reproducción, usando el atributo poster:


Como siempre y para no marginar a ningún navegador, se puede especificar diferentes

archivos en diferentes formatos para que todos puedan reproducir el contenido.

En el caso de usar navegadores que no soporten esta característica, se puede usar el mismo truco que se usaba con el elemento audio para seguir dando soporte a lo que pronto serán navegadores obsoletos y añadir el plugin de Flash, a través de la etiqueta object.

Sin entrar en polémicas sobre la conveniencia de usar o no, el plugin de Flash. El poder embeber un reproductor de video de forma nativa en una aplicación web, sería ideal. pero el problema con utilizar un reproductor de video, basado en plugins, es que su contenido está encerrado y oculto para el resto del documento. Disponer de elementos nativos en HTML supone la integración de los mismos con otras tecnologías del

navegador como JavaScript y CSS.

10. Web Sockets


Web Sockets es una tecnología que brinda canales de comunicación bidireccional, full-duplex, a través de un sencillo socket TCP. Brinda una comunicación real-time con los usuarios conectados.


Lo primero que se tiene que saber es si el navegador conectado soporta WebSockets, lo cual se puede comprobar de manera sencilla.

Ahora que se sabe que el navegador soporta Web Sockets, se puede empezar creando uno.

Una vez creado el objeto Web Socket se puede agregar una serie de listeners para poder manipular los eventos que ocurran en el mismo.

Sin dudas, el evento más importante es el onmessage. El parámetro e.data puede ser texto

plano, json, xml o cualquier otro formato. Ahora, se presenta un ejemplo de cuando el cliente quiere comunicarse con el server enviando un mensaje.

De esta forma se puede tener una comunicación bidireccional de manera sencilla. Finalmente, Web Sockets es aplicable donde un servicio TCP debe ser llevado a una

arquitectura web (como por ejemplo, el servicio de mensajería XMPP) Donde una aplicación web necesita comunicar datos en real-time a los usuarios (por ejemplo, una aplicación de stocks online) Web Sockets es un avance significativo para la web donde las aplicaciones en navegadores, se parecen cada vez más a las de escritorio, pero a su vez conectadas entre sí.

Para mayor información se puede revisar: http://dev.w3.org/html5/websockets/

http://dev.w3.org/html5/websockets/


11. Web Workers

Los Web Workers permiten ejecutar scripts en paralelo (background). Por ejemplo, si se tiene un proceso costoso en recursos que no es interrumpible, se podrá utilizar un Worker y evitar que el navegador colapse. Su uso es bastante sencillo, se instancia un Worker que estará en un fichero javascript independiente, se indica qué hacer cuando se reciba un mensaje y ya solo queda que el

javascript y el Worker se comuniquen enviándose mensajes.

Declarar un Worker Solo se debe crear un worker como si fuera un objeto llamado worker:

Pero además, se tiene que especificar el nombre del archivo que va a ejecutar, en este caso es worker.js, con esto ya se tiene un worker listo para ejecutar el script.

Enviar un mensaje al Worker Los Workers aceptan también mensajes, se puede enviar variables o valores directamente.

Simplemente, se debe poner el nombre.postMessage(valor) y listo.


Recibir un mensaje en el Worker

Es obvio que al poder enviar información, también puede ser recibida para procesarla.

En la variable evt se tiene la información que devuelve el Worker, y representan los datos que devuelven los scripts que se procesaron.

Uso de errores de un Worker Además, no todo puede salir bien siempre, también existe la posibilidad de que se genere un error.

La misma variable evt puede devolver el error.

Cerrar o detener el Worker

Para poder cerrar o terminar el proceso de un Worker solo se tiene que realizar lo siguiente.

Esto terminara el Worker y dejará de funcionar.


12. Geolocalización

La Geolocalización consiste en obtener la ubicación exacta del lugar del mundo donde se encuentre el usuario y opcionalmente, compartir esa información. La W3C (World Wide Web Consortium) facilita la API (application programming interface) de geolocalización, se trata de

una interfaz de alto nivel de acceso a la información de localización asociada, solamente con el dispositivo anfitrión de la aplicación, tales como latitud y longitud. La propia API es independiente de las fuentes de información de la ubicación. Las fuentes comunes de ubicación incluyen el Sistema de Posicionamiento Global (GPS o Global PositioningSystem) y la ubicación obtenida de señales de la red, como la dirección IP, RFID, WiFi y Bluetooth direcciones MAC, y GSM / CDMA ID de célula, así como, la entrada del usuario.

La API está diseñada para permitir obtener de un shot una sola posición y/o peticiones repetidas de las actualizaciones de la posición, así como, la posibilidad de consultar las posiciones almacenadas en caché. La información de ubicación está representada por coordenadas de latitud y longitud. La ubicación se mostrará en un mapa informativo de Google.

A continuación, se muestra un código que obtiene varias peticiones de posiciones.


En este ejemplo, se tienen tres simples funciones usando JavaScript que ayudarán a visualizar, de manera correcta, la ubicación. La primera de ellas consiste en obtener la información de la

ubicación y en definir si el navegador soporta esta nueva API.

Si el navegador soporta esta funcionalidad entonces, se podrá obtener la información de la ubicación actual, es decir, será una sola petición. En caso de haber no lograr obtener la ubicación o el navegador no sea soportado, se mostrará un mensaje de error al obtener los

datos y por el contrario, si se logra obtener la información de la ubicación, se muestra el mapa.

De esta forma, se puede brindar mayor funcionalidad y dinamismo a la aplicación web, donde se puede agregar detalles como compartir la ubicación con redes sociales o intercambio de información con otras aplicaciones.


13. Drag and Drop

Los llamados eventos de “arrastrar y soltar”, comúnmente conocidos por su término en inglés Drag and Drop, son una de las funcionalidades principales y más comunes de las interfaces gráficas actuales, muy utilizados y muchas veces tomados como algo habitual, se han hecho de un lugar en el comportamiento normal de un usuario de Internet.

Estos eventos consisten, básicamente, en utilizar el ratón o mouse, para mover objetos y/o elementos de una posición a otra. En la actualidad, no se puede imaginar un sistema operativo, sin la opción de mover de manera dinámica, los archivos o íconos de una ventana, carpeta o unidad a otra equivalente. Durante años se buscó implementar esta clase de funcionalidad a los navegadores web y para

ello, se hizo uso de librerías de JavaScript e incluso de Flash, tratando de imitar este efecto y poder ofrecer al cliente una experiencia relativamente parecida a lo que diariamente se experimenta en el uso de algún software. Esta búsqueda y deseo por recrear el efecto, rendirá frutos con la implementación de HTML5 para el diseño de sitios web. HTML5, cuenta con las características necesarias para poder

crear y manejar esta clase de eventos, sin necesidad de recurrir a algún complemento.

13.1 Drag and Drop nativo en los navegadores modernos

La propiedad nativa de HTML 5 en los navegadores estandarizados, hace que sea mucho más sencillo aplicar este efecto a los elementos, en vez de utilizar

alguna API o un Framework de JavaScript para realizar el proceso completo. La tarea de arrastrar y soltar en un navegador, está compuesta por dos partes básicas, los atributos HTML 5 y la función JavaScript.


Paso 1: crear los elementos La primera parte del proceso consiste en crear el o los elementos que serán arrastrados, para ello, se debe agregar el atributo draggable con el valor “true”,

dentro de la etiqueta que corresponde al elemento a utilizar. Este atributo, indicará al navegador que este elemento se puede mover sin alguna objeción; por default los objetos no tienen permitido ser arrastrados, es por ello que si no se agrega el atributo draggable, el objeto no podrá ser movido.

Paso 2: hacer draggable el elemento Como segundo paso, se debe llamar la función drag de Javascript (existen varias formas de hacerlo), una manera sencilla es agregarle el atributo ondragstart en cuyo valor, se manda llamar a la función. Por lo tanto, si se

quiere hacer que una imagen se pueda arrastrar, se debe escribir el siguiente código.

En este caso, se agrega la propiedad a un párrafo, para así poder incluir texto junto con la imagen.

Mientras que el javascript quedará de la siguiente forma.

Paso 3: formato a los elementos Después de crear los elementos que se quieren arrastrar, se pasará a darle

forma al contenedor donde se soltarán; para ello, se puede elegir un elemento "div" el cual deberá llevar los atributos ondrop", ondragenter y ondragover. El atributo ondrop" permitirá llamar la función Javascript para llevar la tarea una vez que el elemento ha sido soltado sobre el contenedor. Dado que el comportamiento, por defecto del navegador es cancelar soltados, devolver

false en los atributos dragenter y dragover permitirá el movimiento.

Por su parte en la función "drop" de Javascript debe llamar a preventDefault(), para indicar que el soltado es permitido en esa zona.


El producto final, este drag and drop con html 5, será un párrafo compuesto por una imagen y un texto, el cual se podrá seleccionar, arrastrar y soltar en un elemento div, conocido como contenedor, donde quedará localizado una vez que se suelte el botón del mouse. Se pueden crear todos los elementos

arrastrables que se desee, el punto es hacer un contenedor más grande para no verlos encimados.


14. Notificaciones

La Notificación HTML 5 es una especie de notificación que se puede ofrecer a los usuarios en ciertos eventos, incluso cuando el usuario está en otra pestaña del navegador. Esta notificación puede ser útil para eventos como el correo nuevo, nuevo Tweet, etc. Hay varios pasos para trabajar con las API de notificación. En primer lugar , se debe tener el permiso del usuario para mostrar la notificación. Se podrá mostrar la notificación, si el usuario ha dado el permiso para el mismo.

Ahora bien, si el usuario ha dado consentimiento para mostrar la notificación, entonces se podrán ver dos tipos de notificaciones.

Notificación normal (Default)

Notificación HTML

En el código, se puede apreciar que se ha creado la función javascript para mostrar la

notificación. Tener en cuenta que esta función representa una de las formas, porque hay muchas maneras de extender esta función, de acuerdo a la necesidad del contexto.


15. Compatibilidad Navegadores

Las funcionalidades de HTML 5 y CSS3 tienen muchas características interesantes e importantes. Pero, existe una brecha importante a superar, la compatibilidad o soporte HTML 5 que tienen los navegadores; el mayor problema viene de la mano con Internet Explorer (IE6,

IE7, IE8) aunque IE9 e IE10 tienen un funcionamiento aceptable. Con navegadores como Chrome y Firefox es un poco mejor, sobre todo con Chrome que está constante a los avances de HTML5. Para tener funcionando algunos elementos nuevos como <article> o <section>, es necesario hacer uso de HTML 5 shiv (una forma de usar javascript para agregar soporte HTML5 a IE)

15.1 HTML 5 enabling script Para esto, se usará el archivo JavaScript html 5.js, que debe estar dentro del elemento head. Esto es para que IE pueda determinar un elemento antes de usarlo.

Existe una condición dentro del código, el cual permite ejecutarse solo para navegadores IE, por lo tanto, no afectará la funcionalidad en Firefox o Chrome.

Por último, el código tiene un peso muy reducido, en bytes; por lo que también,

se recomienda descargar dicho archivo (https://github.com/aFarkas/html5shiv/).

https://github.com/aFarkas/html5shiv/


15.2 Modernizr Es una librería javascript que permite detectar si el navegador es compatible con ciertas funcionalidades HTML 5 y CSS3. Con ello, se puede desarrollar

utilizando lo último del estándar y detectar, si el usuario que está navegando es compatible. Con ello, si hubiese alguna funcionalidad que sea vital para la aplicación que el navegador no lo soporta se puede ejecutar un código alternativo, por ejemplo con jQuery, para que realice esa misma funcionalidad. Es posible descargar una librería con un código fuente comprimido para reducir

la cantidad de transferencia de red para entornos de producción y otra en modo comprensible por el programador, para un entorno de desarrollo. En el paquete de desarrollo comprimido es posible seleccionar solo la parte del código de las funcionalidades que se desean utilizar para que no haya que descargar todas las funcionalidades, si solo se utilizan unas pocas y hacer el fichero más ligero.

Para usarlo, primero se puede descargar desde la página oficial: http://modernizr.com/ Luego se debe referenciar el script.

Modernizr se inicia solo por lo que no es necesario usar ninguna función de

iniciar.

Existe una serie de funcionalidades que pueden validarse con Modernizr, tales como:

- Modernizr.video - Modernizr.video.webm - Modernizr.video.ogg - Modernizr.video.h264 - Modernizr.localstorage - Modernizr.webworkers

- Modernizr.applicationcache - Modernizr.geolocation - Modernizr.inputtypes - search - number - range

- color - tel - url - email - date - Modernizr.input.placeholder

- Modernizr.input.autofocus

Para mayor detalle de cada funcionalidad, se puede revisar el siguiente link: http://modernizr.com/docs/

http://modernizr.com/

http://modernizr.com/docs/


15.3 IE-CSS3

Internet Explorer 6, 7 e incluso la versión 8, aún no soporta ciertas

características del estándar CSS3. Para ello, generalmente, se tienen que hacer uso de hacks o soluciones poco recomendadas como generar una serie de capas para simular una sombra o un borde redondeado. Una solución muy limpia es la de importar mediante behavior() un fichero .htc que añadirá al navegador (IE6,7,8) algunas de las características que cualquier otro navegador ya puede utilizar.

Como se puede observar, se añade la llamada behavior() a la especificación de la clase .box. Esto hará que Internet Explorer 6+ use la especificación CSS3 (es decir, la versión sin prefijos) aplicando los estilos deseados. Para ello, se usarán estándares de Internet Explorer disponibles, únicamente, para estos

navegadores. Simplemente se deberá descargar el fichero .htc (http://fetchak.com/ie-css3/ie-css3.htc) y usarlo como se muestra en el ejemplo.

http://fetchak.com/ie-css3/ie-css3.htc


Laboratorio Nº 3

Implementación de características avanzadas en HTML 5

Objetivo:

Implementar un ejemplo que incluya las siguientes características: Aplicaciones Offline, Multimedia con Audio y Video, Web Sockets, Web Workers, Geolocalización, Drag and Drop y Notificaciones.

Trabajando Con HTML5 y CSS3

Documents

Transcript of Trabajando Con HTML5 y CSS3