Trabajando Con HTML5 y CSS3

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.
Introduccin 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.
Generacin de bibliotecas de estilos con CSS3
9.
Multimedia Audio y Video
10.
Web Sockets
11.
Web Workers
12.
Geolocalizacin
13.
Drag and Drop
14.
Notificaciones
15.
Compatibilidad Navegadores
Programa .NET 4.5 Web Application Developer Visual Studio 2012
1.
114
Introduccin a URL Routing
1.1
Caractersticas de HTML5
Simplificacin: el nuevo cdigo ofrece nuevas formas, ms sencillas de

especificar, algunos parmetros y piezas de cdigo.
Contenido multimedia: reproduccin 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 tecnologa 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 informacin y consultas en bases de datos siempre en un servidor,
haciendo que las aplicaciones sean ms lentas y siempre requeridas de una
conexin a Internet constante. Asimismo, HTML5 permitir almacenar y
procesar informacin en el cliente, convirtiendo a una aplicacin web a una
aplicacin mucho ms parecida a una de escritorio.
Efectos y nueva versin de hojas de estilo CSS: la nueva versin de HTML

acompaar a una nueva versin de las hojas de estilo CSS, denominado
CSS3. Se trata de nuevas posibilidades de formato, como por ejemplo, la
implementacin de sombras, bordes redondeados, etc.
Muchas de las cosas que, hasta ahora, solo podran lograrse insertndo las
como imgenes, podrn realizarse con cdigo. Esto no solo se traduce en una
mejora de la velocidad y performance de un sitio, sino tambin en nuevas e
ilimitadas opciones de diseo.
115
Geo-locacin: los sitios web podrn saber la ubicacin fsica de la persona

que lo visita.
Tipografas no estndar: la mayor limitacin a la que se enfrentaban los

diseadores era la imposibilidad de utilizar tipografas no estndar en sitios
web. Prcticamente, todos estaban limitados a aquellas que fueron impuestas
por los navegadores principales como: Arial, Times New Roman, Verdana,
Tahoma, etc. Considerar que la implementacin de sistemas como Google
Fonts, hoy permite utilizar muchas ms.
Por lo tanto, la nueva versin de HTML contiene elementos dedicados ampliamente a

mejorar la experiencia del usuario en una pgina web, haciendo ms fcil poder
agregar elementos de audio, video y en general del web 2.0, as como, organizar
contenidos utilizando menos cdigo.
La nueva versin es ms 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.
116
Estructuras y Esquemas en HTML5
HTML4 y HTML5 son 100% compatibles entre s. Todo el cdigo 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 representacin especial en pantalla.
Todas se comportan como un <div> o un <span>, pero cada una tiene un significado
semntico 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>, diseada para reemplazar la
necesidad de crear divs, sin significado semntico.
<hgroup>
Muchos headers necesitan mltiples ttulos, como un blog que tiene un ttulo 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 diseado para colocar la botonera de navegacin 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, sera la zona donde
estn todos los posts. En un video de youtube, habra un section para el video, uno
para los datos del video, otro para la zona de comentarios.
117
<article>
Define zonas nicas de contenido independiente. En el home de un blog, cada post
sera un article. En un post del blog, el post y cada uno de sus comentarios sera un
<article>.
<aside>
Cualquier contenido que no est relacionado con el objetivo primario de la pgina va en
un aside. En un blog, obviamente el aside es la barra lateral de informacin. En el
home de un peridico, puede ser el rea de indicadores econmicos.
<footer>
Representa el pie de pgina y todo lo que lo compone.
div siempre debe usarse cuando se necesite una caja con objetivos de diseo grfico o
cualquier cosa que no tenga significado semntico. Se deben usar las etiquetas semnticas de
HTML5 donde sean necesarias.
2.1
118
Las etiquetas nuevas de HTML5

Las etiquetas semnticas, a pesar de ser claves para un posicionamiento en
buscadores y buen desarrollo web, no son la razn por la que todo el mundo
habla de HTML5, los videos, audios y animacin vectorial estn en la lista de
prioridades.
Especficamente, las nuevas etiquetas son:
<video>
Inserta video sin necesidad de plugins. Es muy fcil usarla, pero cada
navegador soporta cdecs diferentes de video, lo que hace necesario
recodificar un video en mltiples cdecs.
<audio>
Lo mismo que video, pero sin video. Puede usar mltiples formatos, en
especial mp3, pero tambin depende del navegador.
<input *>
Input ya exista como la etiqueta para insertar cajas de texto y botones. Ahora
es ms poderosa, con la capacidad de insertar cajas tipo email que se
autovalidan, calendarios tipo "date", sliders, nmeros, 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 estndar abierto SVG (Scalable Vector
Graphics), derivado de XML.
3.
119
Compatibilidad en HTML5
A pesar de que en un futuro, se espera que este nuevo lenguaje funcione a la perfeccin en
todos los sistemas de navegacin, incluyendo los dispositivos mviles, por ahora se ejecuta
mejor en Google Chrome, Safari y Mozilla Firefox, siendo Microsoft Internet Explorer el que se
queda muy atrs en esta carrera (nicamente los navegadores 8.0 en adelante lo soportan).
Por lo tanto, no todas las caractersticas que ofrecen HTML5 y CSS3 son admitidas por los
navegadores web actuales. Por tanto, es necesario consultar algunas pginas de referencia
para conocer qu elementos se pueden utilizar porque son admitidos por la mayora de los
navegadores y qu elementos no se pueden utilizar porque no funcionarn.
Soporte segn The HTML5 Test (http://html5test.com/):
120
Soporte segn Whan can I use... (http://caniuse.com/):
Otro sitio web con informacin sobre soporte de HTML5 y CSS3 es findmebyIP. En las
siguientes imgenes, se puede ver la compatibilidad o soporte de los nuevos controles y
atributos de formulario (http://fmbip.com/)
121
4.
122
Nuevos Input en HTML5
Cuando se trata de formularios, se refiere tambin a la interaccin entre los usuarios y una
aplicacin web, basados en la introduccin 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 mtodos son los mejores para introducir datos, de una manera intuitiva y
validarlos por medio de la programacin.
Es frecuente ver, en aplicaciones web medianamente bien realizadas, rutinas de validacin de
datos que permiten al usuario, rellenar los formularios con la informacin correcta. El trabajo
para la validacin 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 mtodo para la validacin 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 ms fcil, con menos rutinas de cdigo.
HTML5 est pensado para ser usado en mltiples entornos, y por tal razn se han creado
nuevos tipos de INPUT.
INPUT tel:
Este tipo de input viene predispuesto con un formato para escribir nmeros telefnicos.
En realidad no hace validacin, pero s se puede implementar una con la nueva API de
validacin de JavaScript.
INPUT number pre formateado:

Sirve para escribir solo nmeros. En algunos navegadores, cuando se ejecuta el
evento onSubmit, no se hace el envo en caso que el campo number, est lleno de
caracteres que no sean numricos.
123
INPUT search:
Adems de proporcionar un campo de entrada, se le agrega un cono de bsqueda
para distinguirlo de un campo de navegacin.
INPUT color:
Este input brinda una paleta de colores donde el usuario puede escoger un color de
forma dinmica. 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 automticamente 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 electrnico. Adems,
se pueden enviar varios email, separados por comas, si se tiene especificado el
atributo mltiple.
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 ao.
INPUT week:
Ofrece una utilidad para escribir y captar informacin de semanas.
INPUT time:
Obtiene informacin con horas, minutos y segundos.
Tipo datetime-local:
Recibe la hora local del dispositivo.
5.
124
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 continuacin, una explicacin de los atributos ms importantes:
El atributo autocomplete
La mayora de los navegadores tienen algn tipo de funcionalidad de autocompletar.
Este atributo permite controlar cmo funciona esto; especfica 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 automtico proporciona una forma declarativa para enfocar un
control de formulario durante la carga de la pgina. 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 ms de un valor en el elemento <input>; por
ejemplo, <input type=email mltiples>, permite al usuario, introducir varias direcciones
de correo electrnico.
6.
125
El atributo required
En un elemento se establecer en un <input> y automticamente, hace que el usuario
se vea obligado a llenar el campo para continuar, es decir, el navegador no permitir
que se enve la forma, sin que el input con este atributo, se encuentre vaco.
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 mnimo y mximo para un elemento <input>. Funciona con los
siguientes tipos de entrada: number, range, date, datetime, datetime-local, month, time
y week.
Nuevos elementos en HTML5
126
<article>
Se usa para definir de forma independiente, un contenido autnomo. Puede ser
contenido especificado de forma independiente del resto del sitio, tambin puede
representar un tema de un foro, un artculo de un peridico 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 aplicacin. 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
direccin 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 ms famosas de HTML5. Se trata de un contenedor donde se
permite el dibujo. Generalmente, se realiza a travs de JavaScript.
<command>
Define un comando (puede ser un botn, un botn de seleccin mltiple, checkbox o de
seleccin 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 pgina para
definir un atajo de teclado.
<datalist>
127
Especifica una lista de opciones predefinidas para un elemento <input>. Se usa para
proporcionar la caracterstica de autocompletado a los elementos de este tipo. Los
usuarios vern una lista, que se va rellenando de forma automtica, conforme ellos
escriben sugiriendo diferentes opciones
La idea de esta etiqueta es normalizar las inclusiones de contenidos de aplicaciones
externas va plugins. No obstante, para integrar un fichero SWF de Flash se hara
como se indica a continuacin:
<footer>
Define el pie de pgina de un documento. Se puede tener ms de un pie de pgina.
<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 navegacin.
<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.
128
Canvas
HTML 5 tiene como una de sus novedades interesantes el Canvas.

El elemento Canvas permite especificar un rea de la pgina donde se puede, a travs de
scripts, dibujar y renderizar imgenes, lo que ampla, notablemente, las posibilidades de las
pginas dinmicas y permite hacer cosas que hasta ahora estaban reservadas a los
desarrolladores en Flash, con la ventaja que para usar Canvas no ser necesario ningn
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 organizacin WHATWG para
incorporarlo a HTML 5. Posteriormente, tambin 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 tambin, soporta el elemento Canvas.
De entre los navegadores ms 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 todava no sea muy recomendable su incorporacin a las aplicaciones
web, ya que los usuarios, no podran ver las partes de la pgina donde se
utiliza Canvas.
7.2
129
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 ingeniera que daba
soporte a este nuevo elemento y por tanto, se encontraba bajo patentes de la
compaa. Este hecho, aadido a la existencia de un formato abierto que sirve
para hacer cosas similares como es el SVG, hizo que surgiera una polmica
sobre la aceptacin de este elemento en el nuevo estndar del HTML5.
No obstante, Apple abri la licencia de uso de patente, liberando la propiedad
intelectual de la misma, condicin estrictamente necesaria para que la W3C,
que siempre apoya patentes libres, incorporase finalmente dentro del nuevo
estndar del lenguaje HTML.
7.3
Aplicaciones de Uso de Canvas

Canvas permite dibujar en la pgina y actualizar dinmicamente 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 renderizacin de contenidos dinmicos. Las
aplicaciones pueden ser grandes, desde juegos, efectos dinmicos en
interfaces de usuario, editores de cdigo, editores grficos, aplicaciones,
efectos 3D, etc.
Actualmente, algunas de las aplicaciones ms 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 aplicacin de diseo grfico como Adobe
Illustrator o Inkscape: trazos, rellenos, gradientes, sombras, formas y curvas
Bzier. Pero de todas formas se debe especificar cada accin usando
JavaScript.
7.4
Dibujar don Javascript

Primero, se especifica el color del trazo:
130
Cualquier cosa que se dibuje, tendr un contorno de color verde. Para

visualizar este ejemplo, se va a dibujar un rectngulo.
La sintaxis del mtodo strokeRect es como sigue: strokeRect (izquierda,

arriba, ancho, largo). Por lo tanto, en el ejemplo anterior, se ha dibujado un
rectngulo posicionado a 20 pixels del margen izquierdo y 30 del derecho con
un tamao de 10050 pixels.
Si por ejemplo, se desea dibujar un rectngulo relleno con color, se deber

especificar el color del relleno.
Dibujar un rectngulo con relleno.
La API 2D tiene muchos mtodos para trabajar con ella. En teora, se puede
crear cualquier imagen que puede dibujarse en un programa de edicin de
grficos 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
especificacin, hubiesen requerido de un plugin externo como Flash.
131
Laboratorio N 1
Realizar la maquetacin con HTML5 del Layout de una Aplicacin Web
Objetivo:
Implementar y validar que toda la estructura del contenido de la aplicacin se

encuentre basada en HTML5. Modifique el Layout para lograr dicho propsito.
8.
132
Generacin de bibliotecas de estilos con CSS3
El objetivo de CSS3 es evitar los trucos que los programadores deben emplear a la hora de
hacer diseos cotidianos. Generalmente, estos trucos eran ingeniosos, pero engorrosos, lo cual
emborronaba el cdigo de las pginas hacindolas ms complicadas. As que con la llegada de
CSS3 se tiene el control total de los elementos de la aplicacin web.
Estas son las caractersticas que varan 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 aaden bordes con degradados (gradientes), pero
solo para Mozilla
border-image: posibilidad de crear bordes redondos y de muchas
formas para imgenes, aunque tambin hay incompatibilidades con
Internet Explorer y dems 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: especificacin del tamao de la imagen de fondo.
En pxels o porcentaje.
Multiplebackgrounds: varias imgenes de fondo en el mismo
elemento. Su notacin es como hasta ahora, pero separando con
comas, cada imagen.
133
Color
Las novedades ms importantes de todo el CSS3.
Colores HSL: otra manera de especificar los colores: color, saturacin
y luminosidad.
Colores HSLA: lo mismo que el anterior, aadiendo un canal alfa
(opacidad).
Colores RGBA: aadir un 4 canal a la notacin 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 automticamente
tres puntos suspensivos.
text-Wrap: trunca palabras largas que no caben en una lnea.
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 separacin
especificada en pxels.
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 aaden (y quitan)
muchos atributos a esta propiedad que sirve para que una pgina
pueda ser leda por el ordenador en voz alta. til para que la web no
suponga una barrera para usuarios con problemas de visin.
Los usuarios esperan que sus sitios y aplicaciones web funcionen bien incluso
sin estar conectados a la red. Al haber cada vez ms datos almacenados en la
nube, la pretensin de los desarrolladores es crear experiencias fluidas que
permitan acceder a los datos en condiciones de ausencia conectividad o mala
cobertura.
A continuacin, se explica cmo se pueden crear sitios y aplicaciones con un
buen funcionamiento sin conexin, 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 pequeas
cantidades de informacin, en formato de texto en el equipo.
Los eventos Offline, para detectar si el equipo est conectado a la red.
Se har un breve anlisis a los escenarios de este tipo con una combinacin de
tecnologas offline: AppCache, IndexedDB, DOM Storage, y WebSockets (o
XHR).
134
En el caso de las aplicaciones y sitios web estilo Metro, las tecnologas offline
permiten manejar los fallos en la conectividad. .
En escenarios ms complejos, los sitios y aplicaciones web, permiten al usuario
crear nuevos contenidos y almacenar datos, aun en condiciones de falta
absoluta de conexin.
Las tecnologas offline pueden adems, mejorar el rendimiento global del
sistema, utilizando datos cacheados en local, precargando informacin que se
utilizar ms adelante y trasladando parte de la carga de procesamiento desde
la nube (o la red) al dispositivo del cliente. Cuanta ms informacin se
mantiene, se busca y se procesa en local, menos recursos necesita el servidor
y ms rpida ser la experiencia del usuario.
Existe un gran inters 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 algn tipo de funcionalidad en modo offline
(juegos, libros, recetas, etc.). Aunque estas aplicaciones no puedan crear o
acceder a contenidos nuevos, los contenidos anteriores deberan estar
accesibles (contactos, reuniones, noticias, etc.).
8.2
Cache Local de Archivos con AppCache

AppCache permite crear caches en local de larga duracin o recursos de
archivos descargados. A estos recursos, se pueden acceder sin conexin, El
uso de esta tecnologa es tan sencillo como acceder al objeto
windows.localStorage. En este objeto se puede consultar o aadir, pares
nombre-valor en forma de propiedades.
En ciertas circunstancias, los datos de los usuarios seguirn 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 estn actualizados. Para ello, se necesita crear canales de
sincronizacin de datos entre las aplicaciones y la nube. Se podrn usar
WebSockets y XHR que ofrecen una forma de sincronizacin. 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
despus utilizar parsers XML o JSON para crear los objetos JavaScript que se
guardarn en una base de datos IndexedDB. Esta tcnica tambin se puede
utilizar para subir al servidor la informacin guardada en el DOMStorage.
No siempre la conexin a la red es fiable, pero las aplicaciones s tienen que
ser fiables. Con las tecnologas offline, se anticipa a una interrupcin de la
conexin y hacer que las aplicaciones, funcionen mejor incluso, en muchos
escenarios y situaciones de la vida real. Esta ventaja aumentar su utilizacin y
aumentar la satisfaccin de los usuarios.
Adems, los eventos offline/online permiten detectar el estado de la conexin a
la red, de manera que se pueden enviar los datos al servidor o esperar. Por
ejemplo, detectar si se tiene conexin y actualizar la base de datos con
contenidos del propio servidor utilizando WebSocketso XHR.
El siguiente cdigo muestra cmo se registra la aplicacin para los eventos
online y offline:
8.3
135
Grandes Cantidades de Datos Estructurados con Indexeddb

IndexedDB es una base de datos local, diseada para almacenar objetos
JavaScript en la mquina local, agilizando el indexado y la bsqueda de dichos
objetos. Por ejemplo, si se desea utilizar una fuente de noticias RSS, un
WebSocket o una conexin XHR, para actualizar esta base de datos cada
cierto tiempo. As los usuarios tendran acceso a la informacin ms reciente
aunque no estn conectados a la red.
Adems, IndexedDB permite manipular e indexar objetos Javascript
directamente. Una ventaja de utilizar IndexedDB, de forma directa, para buscar
informacin en local es que reduce los costes de computacin. Esto supone
que se puede mantener la relevancia de la informacin 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 mquina local accesibles con
IndexedDB.
136
IndexedDB es una tecnologa creada empleando los conceptos de base de

datos ISAM. Al igual que sucede con muchas tecnologas de plataforma web,
est diseado de manera que ofrece una API de bajo nivel, que se puede
utilizar para desarrollar libreras con un mayor nivel de abstraccin 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 aplicacin (contactos,
nombre, apellido, direccin, etc.). Cada objeto JavaScript debe tener un
identificador nico, accesible mediante una clave keyPath. Adems, 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
almacn de objetos.
El siguiente ejemplo de cdigo, muestra cmo se puede leer un registro de un
libro de una base de datos Library:
137
El acceso a la informacin contenida en almacenes de objetos siempre es en

modo de lectura o escritura en el contexto de una transaccin. Se tienen tres
tipos de transacciones:
VERSION_CHANGE: se utiliza para crear o actualizar el almacn de objetos y

los ndices. Puesto que bloquean toda la base de datos y evitan la ejecucin
simultnea de varias operaciones, no se recomiendan para leer y escribir
registros en la base de datos.
READ_WRITE: permite aadir, leer, modificar y borrar registros contenidos en
el almacn de objetos.
READ_ONLY: permite la lectura de objetos del almacn.
El modelo de API asncrona, proporcionada por IndexedDB aprovecha el
modelo request/response soportado por muchas APIs web, como es el caso
de HXR. Las peticiones se envan 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 explcito para confirmar la
transaccin (commit). Las transacciones se confirman cuando no hay ms
peticiones pendientes en el servidor y no hay resultados pendientes en el
cliente. Ms an: queda a cargo de la aplicacin la gestin de excepciones y
eventos de error. En muchas ocasiones, si no se maneja un evento de error o
una excepcin, la transaccin 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 pequeas cantidades de datos en
formato de texto y detectar posibles problemas de conectividad.
Imaginando un juego en el que se utiliza estas tecnologas para llevar la cuenta
de la puntuacin del usuario cuando no est conectado. Suponiendo que se ha
logrado una puntuacin muy elevada y no hay conexin a la red la pgina 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
informacin sin necesidad de estar conectados y subirla al sitio web en un
momento posterior, cuando se recupere la conexin a la red. DOM Storage
soporta una cantidad de datos superior a las cookies y no se necesita
codificarlos de ningn modo. Adems, DOM Storage no enva datos al servidor
a cada peticin y se puede restringir para acceso a nivel de dominio o de
sesin.
138
El uso de esta tecnologa es tan sencillo como acceder al objeto

windows.localStorage. En este objeto, se puede consultar o aadir pares
nombre-valor en forma de propiedades. El siguiente fragmento de cdigo
muestra cmo se almacenara la puntuacin del juego con localStorage:
139
Adems, los eventos offline/online, permiten detectar el estado de la conexin a

la red, de manera que se puede enviar los datos al servidor o esperar. Por
ejemplo, se puede detectar si se tiene conexin 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 cdigo siguiente, muestra cmo se registra la aplicacin 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 ms tipos de datos y
que pueden migrar entre mltiples mquinas.
El punto clave consiste en disear la aplicacin o el sitio web con la idea de
que la conectividad puede desaparecer en cualquier momento y se debe
manejar esta situacin, de manera transparente para el usuario. Si se
implementa un patrn de datos que almacena informacin en local antes de
enviarla a la nube, se tendr una buena solucin 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 seguirn 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 estn actualizados. Para ello, se necesitan crear
canales de sincronizacin 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 despus utilizar parsers XML o JSON para crear los objetos
JavaScript que se guardarn, finalmente en una base de datos IndexedDB.
Esta tcnica tambin se puede utilizar para subir al servidor la informacin
guardada en el DOM Storage.
140
Laboratorio N 2
Generacin de biblioteca de estilos con CSS3 para toda la aplicacin
Objetivo:
Implementar una hoja de estilos con CSS3, aplicando los atributos a la maquetacin
del Layout en la aplicacin.
141
Multimedia Audio y Video
9.
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 estndar sino que
depende de la implementacin de cada fabricante. Segn la siguiente tabla, se puede
comprobar qu formatos soportan los navegadores ms 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 mtodo por excelencia, a la hora de reproducir video a travs 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. Adems, combinando Vorbis y MP3
se puede ofrecer audio a todos los navegadores mayoritarios.
Para usar esta caracterstica, primero se debe embeber un archivo de audio.
142
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 pgina.
El atributo autoplay es un booleano y por lo tanto, no necesita de un valor, sin

embargo si se desea escribir cdigo al estilo XHTML, se puede usar autoplay="true".
Controles
Se pueden cargar los controles bsicos para el elemento audio.
Este atributo hace que el navegador provea de una interfaz con controles para la
reproduccin y el control del volumen de forma nativa. Los controles del navegador
pueden ser suplantados por los propios controles usando JavaScript, a travs de una
API que proporciona mtodos para controlar todos los aspectos de la reproduccin 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 pgina. Si solo se tiene un archivo de audio en la
pgina, entonces, se podr usar preload="auto".
143
Existe una forma de definir ms 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 mltiples
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 mtodo por excelencia, a la hora de reproducir video, a travs de un
navegador, ha sido utilizar el plugin de Flash, pero ste no es la nica va, puesto que
se puede usar tambin Silverlight, ya que no tiene complejidad alguna, para utilizar
dicha plataforma y generar contenido multimedia.
Existen diversos formatos de video para la nueva especificacin y por supuesto, no
todos reproducen los mismos formatos de forma nativa.
El elemento video es muy parecido al elemento audio, tambin dispone de los atributos
autoplay, loop y preload. Tambin 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. Adems 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 tamao para el mismo.
Tambin se puede definir una imagen representativa para el vi deo para que sea
mostrada al navegador como portada del elemento antes de la reproduccin, usando el
atributo poster:
144
Como siempre y para no marginar a ningn navegador, se puede especificar dif erentes
archivos en diferentes formatos para que todos puedan reproducir el contenido.
En el caso de usar navegadores que no soporten esta caracterstica, se puede usar el

mismo truco que se usaba con el elemento audio para seguir dando soporte a lo qu e
pronto sern navegadores obsoletos y aadir el plugin de Flash, a travs de la etiqueta
object.
Sin entrar en polmicas sobre la conveniencia de usar o no, el plugin de Flash. El poder
embeber un reproductor de video de forma nativa en una aplicacin web, sera ideal.
pero el problema con utilizar un reproductor de vi deo, basado en plugins, es que su
contenido est encerrado y oculto para el resto del documento. Disponer de elementos
nativos en HTML supone la integracin de los mismos con otras tecno logas del
navegador como JavaScript y CSS.
10.
Web Sockets
145
Web Sockets es una tecnologa que brinda canales de comunicacin bidireccional, fullduplex, a travs de un sencillo socket TCP. Brinda una comunicacin real-time con los
usuarios conectados.
146
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 ms importante es el onmessage. El parmetro 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 comunicacin 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 mensajera XMPP)
Donde una aplicacin web necesita comunicar datos en real-time a los usuarios (por ejemplo,
una aplicacin de stocks online)
Web Sockets es un avance significativo para la web donde las aplicaciones en navegadores,
se parecen cada vez ms a las de escritorio, pero a su vez conectadas entre s.
Para mayor informacin se puede revisar: http://dev.w3.org/html5/websockets/
11.
147
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 envindose mensajes.
Declarar un Worker
Solo se debe crear un worker como si fuera un objeto llamado worker:
Pero adems, 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 tambin mensajes, se puede enviar variables o valores
directamente.
Simplemente, se debe poner el nombre.postMessage(valor) y listo.
148
Recibir un mensaje en el Worker

Es obvio que al poder enviar informacin, tambin puede ser recibida para procesarla.
En la variable evt se tiene la informacin que devuelve el Worker, y representan los

datos que devuelven los scripts que se procesaron.
Uso de errores de un Worker

Adems, no todo puede salir bien siempre, tambin 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.
149
Geolocalizacin
La Geolocalizacin consiste en obtener la ubicacin exacta del lugar del mundo donde se
encuentre el usuario y opcionalmente, compartir esa informacin. La W3C (World Wide Web
Consortium) facilita la API (application programming interface) de geolocalizacin, se trata de
una interfaz de alto nivel de acceso a la informacin de localizacin asociada, solamente con el
dispositivo anfitrin de la aplicacin, tales como latitud y longitud. La propia API es
independiente de las fuentes de informacin de la ubicacin. Las fuentes comunes de
ubicacin incluyen el Sistema de Posicionamiento Global (GPS o Global PositioningSystem)
y la ubicacin obtenida de seales de la red, como la direccin IP, RFID, WiFi y Bluetooth
direcciones MAC, y GSM / CDMA ID de clula, as como, la entrada del usuario.
La API est diseada para permitir obtener de un shot una sola posicin y/o peticiones
repetidas de las actualizaciones de la posicin, as como, la posibilidad de consultar las
posiciones almacenadas en cach. La informacin de ubicacin est representada por
coordenadas de latitud y longitud. La ubicacin se mostrar en un mapa informativo de Google.
A continuacin, se muestra un cdigo que obtiene varias peticiones de posiciones.
150
En este ejemplo, se tienen tres simples funciones usando JavaScript que ayudarn a visualizar,
de manera correcta, la ubicacin. La primera de ellas consiste en obtener la informacin de la
ubicacin y en definir si el navegador soporta esta nueva API.
Si el navegador soporta esta funcionalidad entonces, se podr obtener la informacin de la

ubicacin actual, es decir, ser una sola peticin. En caso de haber no lograr obtener la
ubicacin 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 informacin de la ubicacin, se muestra el mapa.
De esta forma, se puede brindar mayor funcionalidad y dinamismo a la aplicacin web, donde
se puede agregar detalles como compartir la ubicacin con redes sociales o intercambio de
informacin con otras aplicaciones.
13.
151
Drag and Drop
Los llamados eventos de arrastrar y soltar, comnmente conocidos por su trmino en ingls
Drag and Drop, son una de las funcionalidades principales y ms comunes de las interfaces
grficas 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, bsicamente, en utilizar el ratn o mouse, para mover objetos y/o
elementos de una posicin a otra. En la actualidad, no se puede imaginar un sistema operativo,
sin la opcin de mover de manera dinmica, los archivos o conos de una ventana, carpeta o
unidad a otra equivalente.
Durante aos se busc implementar esta clase de funcionalidad a los navegadores web y para
ello, se hizo uso de libreras de JavaScript e incluso de Flash, tratando de imitar este efecto y
poder ofrecer al cliente una experiencia relativamente parecida a lo qu e diariamente se
experimenta en el uso de algn software.
Esta bsqueda y deseo por recrear el efecto, rendir frutos con la implementacin de HTML5
para el diseo de sitios web. HTML5, cuenta con las caractersticas necesarias para poder
crear y manejar esta clase de eventos, sin necesidad de recurrir a algn 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 ms 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
bsicas, los atributos HTML 5 y la funcin JavaScript.
152
Paso 1: crear los elementos

La primera parte del proceso consiste en crear el o los elementos que sern
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 objecin; 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 funcin drag de Javascript (existen
varias formas de hacerlo), una manera sencilla es agregarle el atributo
ondragstart en cuyo valor, se manda llamar a la funcin. Por lo tanto, si se
quiere hacer que una imagen se pueda arrastrar, se debe escribir el siguiente
cdigo.
En este caso, se agrega la propiedad a un prrafo, para as poder incluir texto

junto con la imagen.
Mientras que el javascript quedar de la siguiente forma.
Paso 3: formato a los elementos

Despus de crear los elementos que se quieren arrastrar, se pasar a darle
forma al contenedor donde se soltarn; para ello, se puede elegir un elemento
"div" el cual deber llevar los atributos ondrop", ondragenter y ondragover.
El atributo ondrop" permitir llamar la funcin 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 funcin "drop" de Javascript debe llamar a

preventDefault(), para indicar que el soltado es permitido en esa zona.
153
El producto final, este drag and drop con html 5, ser un prrafo 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 botn del mouse. Se pueden crear todos los elementos
arrastrables que se desee, el punto es hacer un contenedor ms grande para
no verlos encimados.
14.
154
Notificaciones
La Notificacin HTML 5 es una especie de notificacin que se puede ofrecer a los usuarios en
ciertos eventos, incluso cuando el usuario est en otra pestaa del navegador. Esta notificacin
puede ser til para eventos como el correo nuevo, nuevo Tweet, etc.
Hay varios pasos para trabajar con las API de notificacin. En primer lugar , se debe tener el
permiso del usuario para mostrar la notificacin. Se podr mostrar la notificacin, si el usuario
ha dado el permiso para el mismo.
Ahora bien, si el usuario ha dado consentimiento para mostrar la notificacin, entonces se
podrn ver dos tipos de notificaciones.
Notificacin normal (Default)

Notificacin HTML
En el cdigo, se puede apreciar que se ha creado la funcin javascript para mostrar la

notificacin. Tener en cuenta que esta funcin representa una de las formas, porque hay
muchas maneras de extender esta funcin, de acuerdo a la necesidad del contexto.
155
15.
156
Compatibilidad Navegadores
Las funcionalidades de HTML 5 y CSS3 tienen muchas caractersticas 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 condicin dentro del cdigo, el cual permite ejecutarse solo para
navegadores IE, por lo tanto, no afectar la funcionalidad en Firefox o Chrome.
Por ltimo, el cdigo tiene un peso muy reducido, en bytes; por lo que tambin,
se recomienda descargar dicho archivo (https://github.com/aFarkas/html5shiv/).
157
15.2 Modernizr
Es una librera 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 estndar y detectar, si el usuario que est navegando es
compatible. Con ello, si hubiese alguna funcionalidad que sea vital para la
aplicacin que el navegador no lo soporta se puede ejecutar un cdigo
alternativo, por ejemplo con jQuery, para que realice esa misma funcionalidad.
Es posible descargar una librera con un cdigo fuente comprimido para reducir
la cantidad de transferencia de red para entornos de produccin 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 cdigo 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 ms ligero.
Para usarlo, primero se puede descargar
http://modernizr.com/
Luego se debe referenciar el script.
desde la pgina oficial:
Modernizr se inicia solo por lo que no es necesario usar ninguna funcin 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/
158
15.3 IE-CSS3
Internet Explorer 6, 7 e incluso la versin 8, an no soporta ciertas
caractersticas del estndar 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 solucin muy limpia es la de importar mediante behavior() un fichero .htc
que aadir al navegador (IE6,7,8) algunas de las caractersticas que cualquier
otro navegador ya puede utilizar.
Como se puede observar, se aade la llamada behavior() a la especificacin

de la clase .box. Esto har que Internet Explorer 6+ use la especificacin CSS3
(es decir, la versin sin prefijos) aplicando los estilos deseados. Para ello, se
usarn estndares 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.
159
Laboratorio N 3
Implementacin de caractersticas avanzadas en HTML 5
Objetivo:
Implementar un ejemplo que incluya las siguientes caractersticas: Aplicaciones Offline,

Multimedia con Audio y Video, Web Sockets, Web Workers, Geolocalizacin, Drag and
Drop y Notificaciones.

Trabajando Con HTML5 y CSS3

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Trabajando Con HTML5 y CSS3

Diunggah oleh

Hak Cipta:

Format Tersedia

Trabajando con HTML5 y CSS3

Al finalizar el curso, el alumno podr:

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

Introduccin a URL Routing

Estructuras y Esquemas en HTML5

Nuevos Input en HTML5

Nuevos atributos en HTML5

Nuevos elementos en HTML5

Generacin de bibliotecas de estilos con CSS3

Multimedia Audio y Video

Drag and Drop

Programa .NET 4.5 Web Application Developer Visual Studio 2012