Trabajo Prctico Redes: HTML5

Redes de Informacin 2010

HTML5

Introduccin En el tiempo que llevamos relacionados con la informtica, hemos sido testigos de cambios importantes, pero tambin hemos visto algunos momentos en verdad revolucionarios, tanto a nivel hardware como a nivel software. En estos das, los ordenadores han alcanzado una capacidad sorprendente, mientras que el software se vuelve cada vez ms completo y ms til. Gran parte del potencial que han demostrado hardware y software se debe gracias a la existencia de la red de redes, que expande la funcionalidad de cualquier sistema, simplemente "conectndolo" al mundo. Ahora, Internet est a punto de sufrir un cambio radical con la aparicin de la quinta versin del HyperText Markup Language, y si es adoptada en la forma que imaginamos, es probable que nosotros cambiemos junto con Internet, porque la red ya no ser la misma. La diferencia entre utilizar un lenguaje propuesto y aprobar su existencia como estndar es demasiado grande, especialmente si hablamos de tiempo. Muchos de los navegadores que estn disponibles en el mercado han comenzado a soportar HTML 5, y a pesar de que el lenguaje todava no se encuentra en fase de recomendacin, varias de sus capacidades principales podrn ser aprovechadas dentro de muy poco, con la salida de navegadores actualizados. Slo para que tengamos una idea mejor del tiempo que esto 1 guez, Pietropaolo, Pizzo Domn

Trabajo Prctico Redes: HTML5

Redes de Informacin 2010

suele demorar, la versin HTML 4.01 que utilizamos en estos das fue publicada en diciembre del ao 1999, y recin ahora hemos comenzado a ver su verdadero potencial.

Debern pasar muchos aos para que HTML 5 sea lo que HTML 4.01 es hoy, pero las mejoras que aporta la nueva versin del lenguaje son tan impresionantes, que pueden afectar de forma positiva la velocidad de su adopcin. Qu es lo que trae de nuevo HTML 5? Bueno, el ttulo propuesto originalmente era "Aplicaciones Web 1.0", por lo que eso nos da una muy buena idea de cul ser el campo que ms se beneficiar con la llegada de HTML 5. HTML5 HTML5 (HyperText Markup Language, versin 5) es la quinta revisin importante del lenguaje bsico de la World Wide Web, HTML. HTML 5 especifica dos variantes de sintaxis para HTML: un clsico HTML (text/html), la variante conocida como HTML5 y una variante XHTML conocida como sintaxis XHTML5 que deber ser servida como XML (XHTML) (application/xhtml+xml).1 Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo. Varias grandes tecnolgicas tambin han manifestado ya su apoyo a HTML5, como Google, Microsoft o Apple, estos ltimos de los que ms y muestra de ello es que han decidido darle ahora otro nuevo empujn de la mejor manera posible: mostrndolo en accin. Concretamente siete ejemplos que demuestran la potencia de HTML5 y CSS3 han lanzado en un nuevo apartado de la web oficial de la empresa Apple (http://www.apple.com/html5/), entre los que encontramos de todo: un visor de vdeos que nos permite jugar con l, un editor de fuentes, una galera de imgenes y ejemplos de las posibilidades respecto a transiciones de imgenes, vistas de 360 grados y audio. Por 2 guez, Pietropaolo, Pizzo Domn

Trabajo Prctico Redes: HTML5

Redes de Informacin 2010

supuesto todo esto sin necesidad alguna de instalar complementos adicionales y con unos consumos ms que aceptables. HTML 5 establece una serie de nuevos elementos y atributos que reflejan el uso tpico de los sitios web modernos. Los nuevos elementos estructurales sern: aside, figure, y section. An ms, se incluirn tambin las otras etiquetas: time, meter, progress, video, audio, details, datagrid, command. Sin duda todo un gran paso hacia la web semntica. La adicin de nuevos elementos es sin duda una noticia impactante, sobre todo despus de ver como el desarrollo del lenguaje HTML lleva parado desde 1999 con el lanzamiento de HTML4. El consorcio mundial de la web hasta ahora haba estado centrado en el desarrollo de SGML, XML, XForms, RSS, CSS e incluso AJAX. Como comentan en el artculo de IBM, este cambio era necesario. Seguir utilizando un lenguaje de 1999 es seguir siendo hombres de las cavernas: Nuestros navegadores ahora tienen pestaas, utilizamos RSS y conocemos XML. Cules son las novedades de HTML 5 HTML 5 incluye novedades significativas en diversos mbitos. Como decamos, no slo se trata de incorporar nuevas etiquetas o eliminar otras, sino que supone mejoras en reas que hasta ahora quedaban fuera del lenguaje y para las que se necesitaba utilizar otras tecnologas.

Estructura del cuerpo: La mayora de las webs tienen un formato comn, formado por elementos como cabecera, pie, navegadores, etc. HTML 5 permite agrupar todas estas partes de una web en nuevas etiquetas que representarn cada uno de las partes tpicas de una pgina.

3 guez, Pietropaolo, Pizzo

Domn

Trabajo Prctico Redes: HTML5

Redes de Informacin 2010

Etiquetas para contenido especfico: Hasta ahora se utilizaba una nica etiqueta para incorporar diversos tipos de contenido enriquecido, como animaciones Flash o vdeo. Ahora se utilizarn etiquetas especficas para cada tipo de contenido en particular, como audio, vdeo, etc.

Canvas: es un nuevo componente que permitir dibujar, por medio de las funciones de un API, en la pgina todo tipo de formas, que podrn estar animadas y responder a interaccin del usuario. Es algo as como las posibilidades que nos ofrece Flash, pero dentro de la especificacin del HTML y sin la necesidad de tener instalado ningn plugin. Puedes conocer ms sobre este nuevo elemento en el manual de canvas que estamos creando en DesarrolloWeb.com

Bases de datos locales: el navegador permitir el uso de una base de datos local, con la que se podr trabajar en una pgina web por medio del cliente y a travs de un API. Es algo as como las Cookies, pero pensadas para almacenar grandes cantidades de informacin, lo que permitir la creacin de aplicaciones web que funcionen sin necesidad de estar conectados a Internet.

Web Workers: son procesos que requieren bastante tiempo de procesamiento por parte del navegador, pero que se podrn realizar en un segundo plano, para que el usuario no tenga que esperar que se terminen para empezar a usar la pgina. Para ello se dispondr tambin de un API para el trabajo con los Web Workers.

Aplicaciones web Offline: Existir otro API para el trabajo con aplicaciones web, que se podrn desarrollar de modo que funcionen tambin en local y sin estar conectados a Internet.

Geolocalizacin: Las pginas web se podrn localizar geogrficamente por medio de un API que permita la Geolocalizacin.

4 guez, Pietropaolo, Pizzo

Domn

Trabajo Prctico Redes: HTML5

Redes de Informacin 2010

Nuevas APIs para interfaz de usuario: temas tan utilizados como el "drag & drop" (arrastrar y soltar) en las interfaces de usuario de los programas convencionales, sern incorporadas al HTML 5 por medio de un API.

Fin de las etiquetas de presentacin: todas las etiquetas que tienen que ver con la presentacin del documento, es decir, que modifican estilos de la pgina, sern eliminadas. La responsabilidad de definir el aspecto de una web correr a cargo nicamente de CSS.

Los nuevos elementos estructurales Estos nuevos elementos van a dar mucho juego, por ejemplo a la hora de ver el cdigo fuente de un blog, ya no ser lo mismo. Muchos elementos div, cuyo identificador era muy comn repetir, ahora tienen su propio elemento HTML5. section : Puede ser un captulo, una seccin de un captulo o bsicamente cualquier cosa que incluya su propio encabezamiento. header : La cabecera de una pgina. footer : El final de la pgina. nav : Una coleccin de links a otras pginas article : Una entrada independiente en un blog, revista, etc.

Hacia la web semntica Estos nuevos elementos nos harn dar un paso ms hacia la web semntica. Algunas pginas de hecho podrn cambiar del todo su cdigo para incluir estas novedades: aside : Es un bloque semntico que representa una nota, un consejo una explicacin. figure : Se utilizar para representar una imagen dialog : Se utilizar para representar una conversacin entre varias personas 5 guez, Pietropaolo, Pizzo Domn

Trabajo Prctico Redes: HTML5

Redes de Informacin 2010

time : Se utilizar para marcar un momento temporal en una historia meter : Se utilizar para indicar ciertas medidas dependiendo de los atributos progress: Representar el estado de cierto proceso video: Siempre sabremos que entre estas etiquetas hay un video audio: En este caso un archivo de audio details: Ms detalles sobre alguna cosa datagrid: Una tabla, una recopilacin de datos formateados menu: Un listado, un men.

Ejemplos de cdigos HTML 5 Cdigo HTML 5 para reproducir audio sin flash, quicktime ni silverlight: <html> <head> <title>fuente de mltiples elementos</title> </head> <body> <audio id="audioTestElem" autobuffer controls > <source src="test.m4a"> <source src="test.ogg" type="audio/ogg; codecs=vorbis"> <source src="url"> no audio for you </audio> </body> </html>

6 guez, Pietropaolo, Pizzo

Domn

Trabajo Prctico Redes: HTML5

Redes de Informacin 2010

Por qu se crea HTML 5? Para hacer una pgina, en principio, se necesita simplemente HTML, pero esta afirmacin hoy tiene poco que ver con la realidad y las necesidades de los desarrolladores para crear una rica experiencia de usuario.

Es que hoy pocos sitios web se basan nicamente en HTML. Quien ms quien menos utiliza CSS para definir el aspecto de la pgina, algn tipo de script del lado del cliente, en Javascript, vdeos en diversos formatos o Flash para realizar alguna animacin o interaccin con el usuario. Para poder beneficiarse e integrar todas estas tecnologas, existen multitud de etiquetas que se han ido creando al paso, segn se iban necesitando, y las cuales no han pasado por el filtro de los normalizadores de tecnologas como el W3C.

Por tanto, ms de 10 aos despus que se publicase la ltima especificacin del HTML, resulta primordial para el futuro de la web la creacin de un nuevo estndar que recoja y solucione de alguna manera, las necesidades de los desarrolladores que se han ido creando a lo largo de todo este tiempo.

Esfuerzos en diversas vertientes para la creacin de HTML 5 Sin duda ya hace tiempo que se necesitaba esta nueva especificacin, que hoy todava est en fase de borrador y podramos preguntarnos por qu ha pasado tanto tiempo sin publicarse esta nueva versin del lenguaje? La respuesta es que HTML 5 se ha convertido en un proyecto muy ambicioso, donde hay muchas personas, empresas e instituciones que tienen mucho que opinar. Es de vital importancia, por tanto, coordinar a todos los implicados para crear un nico frente comn, que asegure esta vez un xito de la tecnologa como un estndar.

7 guez, Pietropaolo, Pizzo

Domn

Trabajo Prctico Redes: HTML5

Redes de Informacin 2010

En principio, los encargados de regular los estndares de Internet son los integrantes del W3C, que han estado trabajando durante bastante tiempo en otros lenguajes como XML. No se puede decir que hayan dejado de lado HTML, pero de alguna manera estaban creando otros estndares ms rgidos que sustituyesen al lenguaje. Ante esta falta de inters en HTML y las necesidades reales de los desarrolladores de webs por parte del W3C, se cre en 2004 una comunidad de personas interesadas en mejorar y modernizar el lenguaje de marcacin. Este nuevo grupo, llamado WHATWG (Web Hypertext Application Technology Working Group), se cre a raz de una conferencia del W3C con personas integrantes de los equipos de desarrollo de Apple, la Fundacin Mozilla y Opera, a la que se han ido agregando personal de Microsoft y otras empresas implicadas en el mundo web.

El WHATWG, que funciona de manera independiente del W3C, tiene como objetivo principal trabajar en la nueva especificacin del HTML 5 y a ellos debemos muchas de los avances que estn por llegar con relacin al lenguaje. Es una organizacin abierta, donde cualquiera puede participar libre gratuitamente. De hecho, segn comentan en su web, estn realmente interesados en las opiniones e intereses de las personas que trabajan con el desarrollo web, para crear unas especificaciones que respondan a las necesidades reales de los profesionales de Internet.

Cundo estar listo HTML 5? Segn informan en la pgina de la organizacin WHATWG, HTML 5 se prev est listo como especificacin de implementacin recomendada en el 2012. Quiere esto decir que vamos a tener que esperar hasta 2012 para aprovechar las ventajas de HTML 5? realmente no es justamente as, puesto que algunos navegadores ya implementan muchas de las caractersticas del moderno lenguaje.

8 guez, Pietropaolo, Pizzo

Domn

Trabajo Prctico Redes: HTML5

Redes de Informacin 2010

Resulta que HTML 5 est formado por muchos mdulos distintos, cuyo grado de especificacin est en niveles dispares. Por tanto, muchas de las caractersticas de HTML 5 estn ya listas para ser implementadas, en un punto de desarrollo que se encuentra cercano al que finalmente ser presentado. Otras muchas caractersticas estn todava simplemente en el tintero, a modo de ideas o borradores iniciales.

De hecho, las versiones ms nuevas de casi todos los navegadores, incluido el polmico Internet Explorer 8, implementan algunas de las caractersticas de HTML 5. Claro que, para que una web se vea bien en todos los sistemas, hay que utilizar slo aquellas partes que funcionan en todos los navegadores, por lo que a da de hoy, pocas son las utilidades realmente disponibles del lenguaje, si queremos hacer un sitio web compatible. No obstante, en el peor de los casos, podemos empezar a usar a nivel experimental estas caractersticas, aunque slo sea para frotarnos las manos en espera de incorporarlas realmente en nuestras prcticas de desarrollo habituales.

Conclusin Existen numerosos esfuerzos para la creacin de las nuevas especificaciones del HTML 5, llevados a cabo por distintas organizaciones, independientes, pero que trabajan en un frente comn. Como se puede ver, existirn varios API con los que podremos trabajar para el desarrollo de todo tipo de aplicaciones complejas, que funcionarn online y offline. Quizs se entienda mejor por qu HTML 5 es un proyecto tan ambicioso y que est llevando tanto tiempo para ser elaborado. HTML 5 est llegando, pero no lo har libre de problemas. El primero y ms importante de todos es la tasa de adopcin, directamente relacionada con la decisin que tomarn los desarrolladores, actuales y futuros. Los desarrolladores sern los primeros en encontrarse 9 guez, Pietropaolo, Pizzo Domn

Trabajo Prctico Redes: HTML5

Redes de Informacin 2010

con los posibles inconvenientes tcnicos de implementar HTML 5 de forma tan temprana, y segn sus experiencias, la aplicacin general de HTML 5 podra verse demorada significativamente. El otro jugador importante es Microsoft. El gigante de Redmond domina dos mercados crticos para HTML 5: Sistemas operativos y navegadores Web. A falta de otras palabras, el ritmo al que Microsoft acepta y adopta estndares (de todo tipo, no solamente Web) es uno de los peores que existe. Si tomamos a los nmeros como referencia, el que siete de cada diez personas no pueda ver contenido HTML 5 porque utilizan un navegador que no lo soporta plenamente, no es algo muy atractivo para los desarrolladores. Resumiendo: Si Microsoft se demora, atrasa a todo lo dems.

En cuanto a la aplicacin de vdeo sin plugins, se necesita llegar a una decisin muy importante, y es la adopcin de un cdec de cdigo abierto. Hasta el momento se haba propuesto a Ogg como cdec de cabecera, pero muchos han levantado voces de protesta debido a cuestiones de calidad final del vdeo y falta de popularidad. An as, hay varios jugadores que estn apoyando ampliamente al formato. Mozilla incluir cdecs Ogg en Firefox 3.5, mientras que el sitio DailyMotion ha expresado su respaldo a Ogg. Sea cual sea el cdec, se necesita uno y pronto, de lo contrario los desarrolladores seguirn con formatos propietarios. En la red hay muchas demos que muestran algunas de las funciones aportadas por HTML 5

10 guez, Pietropaolo, Pizzo

Domn

Trabajo Prctico Redes: HTML5 Bibliografia Sitios Web: - Que es HTML5? http://www.desarrolloweb.com/articulos/que-es-html5.html http://es.wikipedia.org/wiki/HTML_5 - Apple: Ejemplos de Aplicaciones Web con HTML5 http://www.apple.com/html5/

Redes de Informacin 2010

- Novedades de HTML5 http://techlosofy.com/nuevos-elementos-en-html-5-la-quinta-version-del-lenguaje-de-laweb/ http://alt1040.com/2010/06/la-potencia-de-html5-en-accion http://www.neoteo.com/html-5-y-el-futuro-de-internet-16399.neo http://www.desarrolloweb.com/articulos/html5-futuro-desarrollo.html - Paper sobre HTML5 http://www.ibm.com/developerworks/xml/library/x-futhtml2.html http://www.w3.org/TR/html5/

- HTML5 vs FLASH http://www.genbeta.com/multimedia/comparando-el-rendimiento-de-html5-y-flash

11 guez, Pietropaolo, Pizzo

Domn