ENSAYO TEMTICO USO DEL ESTANDAR HTML5

Autores: Chire Saire, Josimar Edinson Universidad Nacional de San Agustn Guzmn Apaza, Rel Universidad Nacional de San Agustn Quispe Infantes, Wilfredo Felix Universidad Nacional de San Agustn

Colaborador: Ing. Cesar Baluarte Araya Universidad Nacional de San Agustn cbaluarte@unsa.edu.pe, Arequipa-Per

Uso del Estndar HTML5

Contenido
RESUMEN.......................................................................................................................... 4 ABSTRACT......................................................................................................................... 4 INTRODUCCION................................................................................................................. 5 CONCEPTOS ..................................................................................................................... 5 Conceptos previos...............................................................................5 Estndar HTML 5.................................................................................6 Etiquetas HTML5.................................................................................7 Compatibilidad en distintos Navegadores............................................7 Preprocesadores de lenguaje CSS3.......................................................7 HTML5 Web Storage............................................................................9 WebWorkers......................................................................................10 Geolocalizacion..................................................................................11 Offline API.........................................................................................11 ARQUITECTURA............................................................................................................... 13 FUNCIONALIDAD............................................................................................................. 14 VENTAJAS........................................................................................................................ 15 DESVENTAJAS................................................................................................................. 16 APLICACIN.................................................................................................................... 16 Algunas Aplicaciones.........................................................................16 Propuesta de aplicabilidad de HTML5..................................................17 Maquetacion usando HTML5...............................................................18 Responsive Design con HTML5............................................................18 Uso de Libreras de Compatibilidad y de Desarrollo.............................20 Aplicaciones en Dispositivos Moviles..................................................20 TENDENCIAS................................................................................................................... 20 2

Uso del Estndar HTML5

HTML6..............................................................................................20 Portabilidad de Cdigo.......................................................................21 Tiendas de Aplicaciones.....................................................................21 DISCUSION...................................................................................................................... 21 CONCLUSIONES.............................................................................................................. 21 BIBLIOGRAFIA................................................................................................................. 22

Uso del Estndar HTML5

RESUMEN
Al hablar de HTML5 nos referimos a una familia de tecnologas que en combinacin nos

proporcionan una nueva serie de posibilidades al momento de construir aplicaciones y

sitios web.

EL avance de la tecnologa hace que las empresas tengan que

proporcionar a sus

cliente/usuarios acceso a sus aplicaciones principales de forma rpida y sencilla. Con HTML5, el navegador se est convirtiendo en una plataforma principal para los negocios y las caractersticas como WebSockets, almacenamiento offline, interfaz de usuario enriquecida entre otras permiten crear sorprendentes aplicaciones web empresariales. El gran impacto de la tecnologa mvil hace que empresas de marketing realizan interminables estudios de anlisis para ver la manera de cmo aumentar sus esfuerzos en optimizar al 100% sus acciones en publicidad, marketing y servicios para el cliente, el HTML5 ayuda por su gran revolucin, las grandes empresas de telefona tienen conocimiento sobre este gran impacto de html5 y estn implementando sistemas ptimos con html5. Una de las grandes ventajas que presenta se aprecia en algunos dispositivos mviles como el iphone, o el Ipad que no son compatibles con Flash, pero que s soportan este lenguaje. Se cree que HTML 5 ir ganando terreno de una manera rpida y estar en todos lados lo que har que el sistema sea ms dinmico.
HTML5 brinda beneficios sustanciales para compaas que otros modelos de TI no pueden brindan beneficios como: la simplicidad, el costo, la seguridad, la flexibilidad y la

movilidad. Este ensayo muestra una descripcin del estndar HTML5, sus ventajas y desventajas; aplicaciones en el mundo real y tendencias a futuro. Palabras Clave html5, web semntica

ABSTRACT
Speaking of HTML5 we mean a family of technologies that in combination will provide a new set of possibilities when building applications and websites.

Uso del Estndar HTML5

The advancement of technology means that companies have to provide their customer / users access to their main applications quickly and easily. With HTML5, the browser is becoming the main platform for business and features like WebSockets, offline storage, rich user interface let you create amazing including enterprise web applications. The major impact of mobile technology makes endless marketing companies perform analytical studies to see how to how to increase their efforts to optimize 100% shares in advertising, marketing and customer services, the HTML5 support for their great revolution , the big phone companies are aware of this great html5 impact and are implementing optimal systems with html5. One of the great advantages seen in some mobile devices like the iPhone, or iPad that do not support Flash, but that do support this language. It is believed that HTML 5 will gain ground quickly and is everywhere which will make the system more dynamic. HTML5 provides substantial benefits for companies other IT models can not provide benefits such as simplicity, cost, security, flexibility and mobility. This paper shows a description of the HTML5 standard, its advantages and disadvantages, real-world applications and future trends. Keywords - html5, semantic web

INTRODUCCION
El aumento de la necesidad de desarrollo de aplicaciones web ha dado lugar a la aparicin del estndar HTML5 que incluye funcionalidades que remplazan a libreras y software. Tecnologas como Flash en especial ha sido usado en reemplazo de HTML para desarrollar web apps que superan las habilidades de un navegador: Audio, video, webcams, micrfonos, datos binarios. Ahora HTML5 es capaz de cumplir con lo que hacen estas tecnologas sin necesidad de plugins y con una gran compatibilidad entre navegadores. Actualmente el estndar HTML5 es utilizado por los navegadores en sus ltimas versiones, pero la tecnologa no se usa del todo en el desarrollo de pginas web.

CONCEPTOS
Conceptos previos
HTML [10], HyperText Markup Language (lenguaje de marcado de hipertexto), hace referencia al lenguaje de marcado predominante para la elaboracin de pginas web que se utiliza para describir y traducir la estructura y la informacin en forma de texto, as como para complementar el 5

Uso del Estndar HTML5

texto con objetos tales como imgenes. HTML tambin puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo JavaScript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML, consta de varios componentes vitales, entre ellos los elementos y sus atributos, tipos de data y la declaracin de tipo de documento.

XHTML [11], eXtensible HyperText Markup Language, bsicamente es HTML expresado como XML. Es ms estricto a nivel tcnico, pero esto permite que posteriormente sea ms fcil al hacer cambios o buscar errores entre otros. XHTML es solamente la versin XML de HTML, por lo que tiene, bsicamente, las mismas funcionalidades, pero cumple las especificaciones, ms estrictas, de XML. Su objetivo es avanzar en el proyecto del World Wide Web Consortium de lograr una web semntica, donde la informacin, y la forma de presentarla estn claramente separadas. HTTP (HyperText Transfer Protocol): Protocolo de transferencia de hipertexto utilizado para el envo de pginas Web. AJAX [12] (Asynchronous JavaScript And XML): Unin de JavaScript y XML que recupera informacin Web de forma asncrona. Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicacin asncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las pginas sin necesidad de recargarlas, lo que significa aumentar la interactividad, velocidad y usabilidad en las aplicaciones. Ajax es una tecnologa asncrona, en el sentido de que los datos adicionales se solicitan al servidor y se cargan en segundo plano sin interferir con la visualizacin ni el comportamiento de la pgina.

Estndar HTML 5
Segn [4] html5 expande la definicin de lo que una pagina web puede hacer. Esta de Actualmente. HTML5 que es un estndar y termino de marketing para agrupar las nuevas tecnologas de desarrollo de aplicaciones web: HTML5, CSS3 y nuevas capacidades de Javascript. La versin ms usada de HTML, HTML4 carece de caractersticas necesarias para la creacin de aplicaciones modernas y esto llevo al uso de tecnologas de frameworks basados en Javascript como jQuery, jQuery UI, Sproutcore entre otros. 6

Uso del Estndar HTML5 Etiquetas HTML5

Todo el cdigo que se tiene en HTML normal seguir funcionando sin problemas en HTML5. Para empezar a usar HTML5 lo nico que se tiene que hacer es colocar la etiqueta: <!DOCTYPE html> Es un DOCTYPE mucho ms simplificado que XHTML5 (cuyas reglas siguen siendo usadas) y permite usar todas las habilidades de HTML5 sin que nada de lo que ya tienes programado deje de funcionar.

Compatibilidad en distintos Navegadores

Un problema que se presenta en el uso de html5 es si podemos usarlo en el navegador que queremos, un sitio que puede responder esto es CanIUSe.com. Donde encontrars una lista de todas las capacidades de HTML5, CSS3 y el nuevo Javascript, junto a una tabla de compatibilidad. Sin embargo, no te asustes demasiado si ves muchos cuadros rojos. Recuerda los scripts que mencion arriba como IE-CSS3 o HTML5 Enabling Script. Existen varias herramientas que permiten hacer compatible html5 con otros navegadores que no lo permiten. Una herramienta puede ser Modernizr .

Preprocesadores de lenguaje CSS3

Los preprocesadores de lenguaje CSS aaden la posibilidad de crear funciones, variables, hacer operaciones, y escribir menos cdigo, LESS es un preprocesador que permite agregar estas caractersticas a las funcionalidades que provee CSS3.

Uso del Estndar HTML5

Se puede utilizar la librera o una herramienta que transforme cdigo less en cdigo CSS como SimpLESS.

El siguiente es un ejemplo que muestra el potencial de less. // LESS @color: #4D926A; #header { color: @color; } h2 { color: @color; }

Uso del Estndar HTML5 HTML5 Web Storage

Segn [5] HTML5 pone a disposicin de los desarrolladores una API que permite almacenar una cantidad de informacin mucho mayor en los navegadores de los usuarios. Esta API define un interfaz Storage y proporciona una implementacin concreta de dicho interfaz a travs de dos objetos diferentes: local Storage y sesin Storage. Cada objeto Storage proporciona acceso a una lista de pares clave,valor que sern los que contendrn la informacin que hemos almacenado. Estos elementos de la lista se conocen como items. Las claves de los items son String incluyendo la cadena vaca que tambin es una clave vlida. La diferencia fundamental entre el objeto local Storage y sesin Storage es el tiempo que la informacin permanece disponible [4]. De este modo, en el objeto local Storage, los datos almacenados estn disponibles para el navegador en todo momento aunque cerremos todas las ventanas, lo que significa que si queremos eliminar esta informacin debemos hacerlo explcitamente; por otro lado, en el objeto sesin Storage es donde la informacin permanece disponible para el navegador hasta que cerremos la ventana, despus se elimina. Segn [6] el Web storage no solo es parte de html5 sino que esta siendo normalizado por el W3C (Consocrio World Wide Web), donde indica que web storage esta en una especificacio separada y se apoya en Internet Explorer8 y navegadores como Google Ghrome, Mozilla y Opera. Este tipo de almacenamiento de informacin en el navegador proporciono algunas ventajas que se considero por [4] que hace una comparacin con algunas caractersticas de los cookies pero con una capacidad mucho mayor y no hay informacin almacenada en el encabezado de la solicitud HTTP , esta ventajas compara la persistencia cookies y cookies de sesin con local storage y sesin storage. 1. Las diferentes ventanas abiertas del mismo site comparten estos objetos, lo que nos permite sincronizar informacin entre diferentes ventanas del navegador en tiempo real, sin necesidad de recargar. 2. Los datos almacenados no viajan en las peticiones del cliente, lo cual permite almacenar mayor cantidad de informacin 3. Podemos almacenar todo tipo de informacin, no slo informacin textual: Podemos almacenar Strings, Numbers, Arrays (Aunque posteriormente debemos convertirla al objeto en s, ya que realmente se almacena como String) 4. La informacin est disponible incluso si el usuario no tiene conexin en ese momento, lo que nos permite implementar aplicaciones web que trabajen offline. Caracterstica muy til para aplicaciones mviles. 5. Cada site que visitemos tiene sus propios objetos Storage, la informacin slo se comparte entre ventanas bajo el mismo dominio.

Uso del Estndar HTML5

Existe una diferencia notable con los cookies con lo que Web storage [5]: Las cookies HTTP sufren de almacenamiento de datos limitado (por ejemplo, 4KB), mientras que la capacidad de almacenamiento de datos de la API WebStorage para la mayora de los navegadores es de 5 MB como por especificacin W3C con una excepcin a IE8 (o superior) que soporta hasta 10 MB. Cookies limitan la accesibilidad de datos para un cierto nombre de dominio o una direccin URL donde el WebStorage puede limitar el acceso a un determinado nombre de dominio, o al dominio TLD (como. Org) o para la sesin de usuario dado. Los datos almacenados en las cookies se transmiten por cada solicitud al servidor, por lo que es muy lento e ineficaz. Sin embargo, los datos API WebStorage no se transmite por cada peticin del servidor y utilizan solo cuando se le pregunta. Web Storage es ms pblico que las cookies. Esta es la razn por la que tenemos que tomar precauciones especiales para garantizar la seguridad, existen algunas ventajas que ponen en manos de los desarrolladores algunos aspectos como estos.

WebWorkers
Segn [7] los Web Workers permiten ejecutar scripts en paralelo (background). Para su uso se instancia un worker que estar en un fichero javascript y se indica qu debe hacer cuando se reciba un mensaje. Estas operaciones pueden ser clculos matemticos complejos, solicitudes a la red, o acceso al almacenamiento local; resulta de gran utilidad en aplicaciones web que dependen de scripts pesados para ejecutar alguna funcionalidad. Existen varios obstculos que evitan que las aplicaciones interesantes se extrapolen (es decir, de implementaciones principalmente de servidor) a JavaScript del cliente. Algunas de estas aplicaciones incluyen compatibilidad de navegadores, escritura esttica, accesibilidad y rendimiento. Afortunadamente, el rendimiento se est convirtiendo rpidamente en algo del pasado, pues los desarrolladores de navegadores mejoran con gran rapidez la velocidad de los motores JavaScript de estos. De hecho, uno de los obstculos que an se mantienen en JavaScript es el lenguaje en s. JavaScript es un entorno de subproceso nico, es decir, que no se pueden ejecutar varias secuencias de comandos al mismo tiempo. Por ejemplo, imagina un sitio que necesite gestionar eventos de interfaz de usuario, solicitar y procesar grandes cantidades de datos de API y manipular los DOM. Algo muy comn, verdad? Desafortunadamente, todo esto no puede realizarse de forma simultnea debido a las limitaciones en el tiempo de ejecucin de los 10

Uso del Estndar HTML5

navegadores de JavaScript. La ejecucin de secuencias de comandos se realiza en un nico subproceso. Los desarrolladores imitan la "simultaneidad" utilizando tcnicas como setTimeout(), setInterval() y XMLHttpRequest, as como gestores de eventos. S, todas estas funciones se ejecutan de forma asncrona; sin embargo, que no se bloqueen unas a otras no significa necesariamente que tengan lugar de forma simultnea. Los eventos asncronos se procesan despus de haber generado la secuencia de comandos que se est ejecutando en ese momento. HTML5 nos web worker para resolver estos problemas y hacer una ejecucin en paralelo.

Geolocalizacion
Segun [7], la geolocalizacion es una de las caracteristicas mas resaltantes de html5 que permite localizar en que parte del mundo se encuentra una persona y opcionalmente compartir esa informacin con los dems. Esta informacin es aun mas precisa con html5, en contra parte [8] define el API de geolocalizacin no es ms que una interfaz que nos entrega los datos de localizacin que nuestro dispositivo nos puede ofrecer. Para tener una precisin o una perfecta performance se debe tener en cuenta el dispositivo.Si tu dispositivo es un pc sobremesa, casi seguro que la localizacin la realizar en base a la geolocalizacin IP, el ms bsico de los mtodos, que puede incluso dar resultados a cientos de Km. Sin embargo si tenemos un smartphone, las coordenadas podrn responder a una triangulacin en base a las redes mviles cercanas. En el mejor de los casos (tengo un iPhone o cualquier otro smartphone Android de gama media / alta) el dispositivo dispondr de GPS con lo cual la localizacin ser casi perfecta (menos de 20m de exactitud). Por otro lado el navegador es quien decide qu sistema de localizacin usar en base a su propia tabla de prioridades. Ventajas de Geo localizacin : Si quiero hacer una aplicacin HTML5 para dispositivos mviles que me localize los restaurantes cercanos, la geolocalizacin es genial. Si quiero hacer una pgina que me corrobore que estoy delante del pc de mi casa, la geolocalizacin ser un poco inexacta.

Offline API
Segn [5], si hablamos de aplicaciones web debemos de considerar el uso de internet para descargar estas y luego renderizarlas, pero es algo contradictorio tener un concepto como web offline se debe tener en cuenta que es imposible descargar cuando no se esta conectado a la red por lo tanto toda web offline necesita de una conexin para descargar y poder trabajar luego offline. Algunos problemas detectados en las aplicaciones web a los html5 resuelve y son nombrados por [6]que expone lo siguiente:

11

Uso del Estndar HTML5

Para dar al usuario la experiencia de la navegacin por Internet sin problemas, la mayora de los navegadores ofrecen la facilidad de almacenamiento en cach. Pero el almacenamiento en cach adolece de las siguientes limitaciones: Los desarrolladores no tienen control alguno sobre las pginas para almacenar en cach. Por lo tanto no puede almacenar en cach todos los archivos de cualquier aplicacin especfica. No proporciona una manera confiable para que podamos acceder a las pginas mientras est en modo fuera de lnea. Segn [6] detalla esta caracterstica importante como HTML5 supera estas limitaciones donde: El usuario puede utilizar las funciones de nubes en un dispositivo mvil, trabajar sin conexin con una aplicacin local desplegados en una base de datos local, y compartir informacin con el resto de la nube cuando va en lnea otra vez. AppCache almacena slo las pginas especificadas que se incluyen en el archivo de manifiesto y por lo tanto es confiable. Con un mayor grado de certeza, que ofrece al usuario el control de la forma en que las aplicaciones web debe buscar cuando est desconectado. Si bien ya en HTML 4 hay pginas que pueden visualizarse sin estar conectados a Internet, el uso de aplicaciones web offline se hace mucho ms complejo. HTML5 plantea una revolucin en este tema. Google, el gigante de los buscadores y de las aplicaciones en lnea es una de las empresas que apuesta por HTML5 y ha mostrado especial atencin en esta caracterstica, para poder brindar a los usuarios que eligen sus servicios, nuevas opciones para trabajo offline, que irn perfeccionndose a medida de que HTML5 logre mayor aceptacin y compatibilidad con los navegadores. Adems de lo que ofrece Google, este fundamental avance, permitir que existan mayor cantidad de aplicaciones de diferentes fabricantes y desarrolladores que podrn brindar soluciones para equipos de escritorio y tambin para mviles. En la actualidad, tenemos la posibilidad de almacenar informacin de forma local a la aplicacin mediante los interfaces disponibles con localStorage, Web SQL Database o IndexedDB. Estas caractersticas tan interesantes, pueden no ser suficientes si la pgina en las que se van a implementar no puede ser cargada por el navegador debido a la falta de conectividad.

12

Uso del Estndar HTML5

Las aplicacin Web offline consta de una sola pgina HTML sin la necesidad de cargar ms de pginas HTML a travs de los ciclos de peticin-respuesta. Toda la accin est en una pgina[9].

ARQUITECTURA
Existen varias arquitecturas para aplicaciones web hechas con HTML5. A continuacin damos a conocer algunas arquitecturas que utilizan HTML5 como parte de la vista. Arquitectura de una aplicacin empresarial

La arquitectura muestra la Aplicacin donde se encuentran las vistas, otros elementos de interfaz de usuario y la lgica de la aplicacin, luego el acceso a datos, los datos, el API de acceso al DOM y - Aplicacin: Contiene las vistas, otros elementos de interfaz de usuario y la lgica de la aplicacin. 13

Uso del Estndar HTML5

- MVC: El acceso a datos. - API de acceso al DOM: Se recomienda usar JQuery en este caso - HTML5: HTML5 y CSS3 Arquitectura de PhoneGap Usa el navegador web del dispositivo como intermediario para implementar la capa lgica basada en JavaScript y la presentacin HTML5 y CSS3 [9].

FUNCIONALIDAD
HTML5 intenta solucionar algunas dificultades de las aplicaciones web tradicionales: no tener la capacidad de trabajar off-line, no almacenamiento local y una UI pobre en funcionalidad y grficos. Es una alternativa a flash e intenta aprovechar el crecimiento en cloud computing. HTML5 consta de 3 partes: HTML: Especifica un rbol jerrquico de elementos UI, como cuadros y cajas de texto. CSS: Especifica la apariencia grfica de los elementos HTML. JavaScript: Lenguaje de programacin que puede cambiar dinmicamente elementos HTML e interactuar con el usuario a travs de diversas interfaces e intercambiar data con la red.

Nuevas caractersticas importantes: Capacidad off-line: las aplicaciones pueden ser almacenadas localmente para hacer disponibles en todo momento, mejorando la experiencia del usuario en caractersticas claves (botones, imgenes, estilos, etc.) si tuviese una conexin lenta. HTML5 permite especificar qu elementos sern guardados en el dispositivo.

14

Uso del Estndar HTML5

Almacenamiento local: las aplicaciones pueden guardar datos localmente (ejm. Servicio de gmail), la especificacin de HTML5 contiene un estndar para dicha funcin que es implementada por una gran cantidad de navegadores. Reproductor de medio nativo: no es necesario flash u otros plugins para incluir audio y video en un sitio web. El caso de Apple en su sistema operativo IOS, rechaz el uso de flash en sus dispositivos. Capacidad de grficos: llamado canvas (ejm. crear cuadros), capacidad de realizar grficos en el navegador; aade valor a HTML5 y abre puerta a muchas aplicaciones derivadas. Animaciones: nativas, emulacin con js no es necesaria. Geolocalizacin: W3Cs Geolocation API es una simple JavaScript API, que puede usarse para mejorar la interaccin del usuario con su servicio de sealizacin de posicin en los dispositivos que cuentan con sensores GPS.

VENTAJAS
Su uso hace que se dependa menos de Flash, Silverlight y libreras de Javascript, las cuales se usan por necesidad de incluir video y audio. En vez de su uso el estndar define etiquetas que soportan de manera eficiente y estable este contenido. La geolocalizacin de HTML5 tiene varias aplicaciones como para conocer el mercado destino como sus necesidades. Brinda beneficios sustanciales para compaas que otras TI no pueden brindan como: la simplicidad, el costo, la seguridad, la flexibilidad. Las pginas estn mejor estructuradas, lo cual la hace localizable desde un buscador; y mejora la experiencia del usuario. Realizar dibujos, animaciones y videojuegos, esto abre el mercado hacia un mundo grande. Sitios web ms rpidos, pues HTML5 trabajo descargando primero los elementos ms ligeros y lo muestra; y va mostrando los ms pesados cuando estn listos.

15

Uso del Estndar HTML5

DESVENTAJAS
El principal problema de su uso es la compatibilidad con el navegador. La dependencia de las decisiones de actualizacin de los navegadores. La especificacin de HTML5 an no ha terminado, pueden haber cambios. Control de streaming, en Flash se puede acceder a partes del video; pero en HTML5 an no. Youtube un importante usuario de Flash an usa el mismo, significa un reto para HTML5 poder brindarle funcionalidad similar o mejor. No permite la interaccin cmara y micrfono, y Flash le lleva ventaja en ese sentido.

APLICACIN
Primero nombramos unas aplicaciones de empresas conocidas que usan funcionalidades de html5.

Algunas Aplicaciones
Gmail Usa HTML5 Web Storage para guardar en el disco del usuario los correos mas recientes. Para asi poder acceder a ellos temporalmente si se cae la conexin. Tambin usa Drag and Drop para arrastrar y soltar archivos adjuntos, entre otras funcionalidades de CSS3 para diseo.

Twitter El diseo de las versiones desktop y mvil de Twitter usan CSS3 de manera intensiva, [8] La versin mvil de Twitter usa geolocalizacion sumado a Google Geolocation Services para geolocalizar tweets.

16

Uso del Estndar HTML5

Sitio web movil usando responsive design.

Facebook Usa CSS3 en el diseo y animaciones.

Propuesta de aplicabilidad de HTML5

Es posible saber si el navegador soporta HTML5 en [9] que muestra una lista de todas las capacidades de HTML5, CSS3 y el nuevo Javascript, junto a una tabla de compatibilidad.

17

Uso del Estndar HTML5 Maquetacion usando HTML5

Antes se utilizaban las etiquetas div que indicaban que son separaciones y solo eso. HTML5 provee etiquetas semnticas que indican que son y cual es el significado de los elementos que contienen dentro [13].

Debe considerarse no hacer sobre uso de elementos con tecnologa flash o hacer uso solo de la etiqueta canvas o CSS3 con la que se pueden hacer banners o slider de imgenes. Otro aspecto que debe considerarse es el posicionamiento en el buscador, podemos mejorar la visibilidad del sitio web asegurando que la pagina sea indexada con mayor exactitud [2] usando las etiquetas semnticas.

Responsive Design con HTML5

Disear sitios web para dispositivos mviles no es lo mismo que disear para una PC, por esto en la maquetacin debe considerarse varios factores como: Navegador del usuario Sistema operativo del usuario Ubicacin de los usuarios Dimensiones de pantalla del dispositivo del usuario 18

Uso del Estndar HTML5

Soporte de HTML5 Como ya explicamos, podemos crear paginas web que se ajusten a las dimensiones de pantalla del dispositivo. El siguiente es un ejemplo de pgina web usando responsive design, el ejemplo fue realizado tomando como referencia [4]. Pantalla de la pagina web en un dispositivo mvil (Resolucin de 320 x 480).

Pantalla de la pagina web en la PC (Resolucion de 1280 x 800)

19

Uso del Estndar HTML5 Uso de Libreras de Compatibilidad y de Desarrollo

Para el problema de la compatibilidad como ya mencionamos se pueden usar libreras en javascript como modernizr con la cual es posible elegir las caractersticas de HTML5 que no son compatibles con el navegador y hacerlas compatibles cargando la librera antes de cargar la pagina web.

Una librera de desarrollo que ya mencionamos es el preprocesador de lenguaje CSS, por ejemplo la librera less que soporta caractersticas de CSS3.

Aplicaciones en Dispositivos Moviles

Como se menciono anteriormente, ademas de responsive design se puede utilizar unas libreras que permiten utilizar caractersticas de HTML5 en dispositivos mviles. Los distintos dispositivos que existen presentan caractersticas que no presentan las PCs como: GPS Acelerometros Giroscopio Un framework que permite el uso de HTML5 para la creacin de aplicaciones mviles es Phonegap. Con la cual se pueden manejar eventos que solo permite el dispositivo. El enfoque de Phonegap es usar el navegador web del dispositivo como intermediario para implementar la capa lgica basada en JavaScript y la presentacin HTML y CSS, esta estructura es fcilmente portable en distintos navegadores.[14]

TENDENCIAS
HTML6
Luego de la aparicin del estndar HTML5, las dos organizaciones que lo estandarizaron y promovieron, (W3C y WHATWG) se separan y crean dos especificaciones para un nuevo estndar, W3C planea crear una especificacin nuea HTML.Next y WHATWG crea un estndar solo llamado HTML que tendr cambios continuos como sea necesario. En el caso de W3C, se proponen elementos para estndar en la direccin [16] se encuentra una lista de propuestas. Por ejemplo Michael Smith [17], un miembro de W3C, nombra elementos y atributos que propone para versiones futuras de HTML, que van a ser parte de HTML 5.1, HTML 5.2 o HTML6. HTML.Next tiene una lista de ideas de elementos para el nuevo estndar en [18]. 20

Uso del Estndar HTML5 Portabilidad de Cdigo

Este concepto trata de que en vez de tener que desarrollar una aplicacion distinta para cada plataforma mvil, utilizando lenguajes distintos y necesitando a personal distinto especializado en cada sistema operativo. Es posible desarrollar una sola aplicacion HTML5 que valiese para todas las plataformas. Adems, el proceso de actualizacin de esa aplicacion es tambin ms sencillo y rpido, pudiendo hacerse directamente y sin tener que esperar la aprobacin de la tienda en cuestin [19].

Tiendas de Aplicaciones
Los navegadores web ya no son slo para leer pginas web como los diarios. Ahora son el centro de ejecucin de las principales aplicaciones que usamos a diario. Segn [19], el navegador web se parecer cada vez ms al concepto del iPhone, en donde para cada necesidad, existe una aplicacin que se especializa en satisfacerla.

DISCUSION
Las ventajas que ofrece HTML5 hoy en da y el uso en varios sitios web, hacen que cada da vaya ganando parte del mercado; obligando a muchas empresas a migrar al mismo, y aprovechar su funcionalidad. Muchas de las empresas que predominan en el mercado, han migrado a dicha tecnologa; obligando a sus competidores y menores a hacer lo mismo. Si bien pueden existir algunas limitaciones respecto a la misma, el desarrollo de aplicaciones y el inters de muchos desarrolladores existentes, an de aquellos que se incorporan permitir darle soporta y salvaguardar las fallas y/o problemas que puedan surgir. Dndole continuidad a la tecnologa, y en general ampliando la funcionalidad.

CONCLUSIONES
Se pueden utilizar etiquetas HTML5 en la etapa de maquetacin, las cuales tienen varios beneficios ya nombrados. Es posible el uso de HTML5 considerando navegadores no compatibles, usando libreras adicionales. El surgimiento de HTML5, est revolucionando la web; pues nos da mayor funcionalidad que sus versiones anteriores. Muchas empresas ya comenzaron a migrar a HTML5 y estn tomando ventaja de sus beneficios. El diseo responsivo, es muy importante; pues cada da es mayor el nmero de dispositivos mviles, no considerar el mismo al desarrollar una aplicacin web, significa perder una parte en crecimiento del mercado de hoy en da.

21

Uso del Estndar HTML5

Con la migracin hacia la nube desde hace un tiempo, HTML5 es una forma ms para hacer esto posible; facilitando la labor de desarrolladores, pues es ms fcil migrar de HTML a la nube.

BIBLIOGRAFIA
[1] http://dev.w3.org/html5/spec/ [2] http://dl.acm.org/citation.cfm? id=1895066&coll=DL&dl=GUIDE&CFID=111491047&CFTOKEN=85575018 [3] http://britesnow.com/blog/understanding-html5-for-applications [4] HTML5 UP and RUNNING , Mark Pilgrim [5] Developing Offline Web Applications using HTML5, Nilachala Panigrahy TATA CONSULTING [6] http://en.wikipedia.org/wiki/Web_storage [7] SELECT caractersticas , beneficios FROM HTML5 , Marco Antonio Avendao Ajata [8] http://www.cristalab.com/tutoriales/introduccion-a-html5-c92171l/ [9] http://caniuse.com/ [10] http://es.wikipedia.org/wiki/HTML [11] http://es.wikipedia.org/wiki/XHTML [12] http://es.wikipedia.org/wiki/AJAX [13] http://www.desarrolloweb.com/articulos/etiquetas-semanticas-html5.html [14] Tim Kadlec, Implementing Responsive Design, Building sites for an anywhere, everywhere web [15] Matthew David, Building Websites wth HTML5 to Work with Mobile Phones [16] http://www.w3.org/TR/ [17] http://www.w3.org/html/wg/next/markup/ [18] http://www.w3.org/wiki/HTML/next [19] http://techcrunch.com/2011/12/21/guide-to-html5-14-predictions-2012/

22