HTML5

ALCANTARA SANCHEZ, Johny J. jjalcantaras@unc.edu.pe LLAXA BOLAOS, Faustino fllaxab@unc.edu.pe

INTRODUCCION

HTML 5, ya que no es simplemente una nueva versin del lenguaje de marcacin HTML, sino una agrupacin de diversas especificaciones concernientes a el desarrollo web. Es decir, HTML 5 no se limita slo a crear nuevas etiquetas, atributos y eliminar aquellas marcas que estn en desuso o se utilizan inadecuadamente, sino que va mucho ms all. As pues, HTML 5 es una nueva versin de diversas especificaciones, entre las que se encuentran:

HTML 4 XHTML 1 DOM Nivel 2 (DOM = Document Objetc Model)

HTML 5 pretende proporcionar una plataforma con la que desarrollar aplicaciones web ms parecidas a las aplicaciones de escritorio, donde su ejecucin dentro de un navegador no implique falta de recursos o facilidades para resolver las necesidades reales de los desarrolladores. Para ello se estn creando unas APIs que permitan trabajar con cualquiera de los elementos de la pgina y realizar acciones que hasta hoy era necesario realizar por medio de tecnologas accesorias.

1. Lo positivo de HTML 5 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. 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. 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. 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.

2. Caractersticas: a. Mejor estructura Actualmente es abusivo el uso de elementos DIV para estructurar una web en bloques. El HTML5 nos brinda varios elementos que perfeccionan esta estructuracin estableciendo qu es cada seccin, eliminando as DIV innecesarios. Este cambio en la semntica hace que la estructura de la web sea ms coherente y fcil de entender por otras personas y los navegadores podrn darle ms importancia a segn qu secciones de la web facilitndole adems la tarea a los buscadores, as como cualquier otra aplicacin que interprete sitios web. Las webs se dividirn en los siguientes elementos: <section></section> - Se utiliza para representar una seccin general dentro de un documento o aplicacin, como un captulo de un libro. Puede contener subsecciones y si lo acompaamos de h1-h6 podemos estructurar mejor toda la pgina

creando jerarquas del contenido, algo muy favorable para el buen posicionamiento web. <article></article> - El elemento de artculo representa un componente de una pgina que consiste en una composicin autnoma en un documento, pgina, aplicacin, o sitio web con la intencin de que pueda ser reutilizado y repetido. Podra utilizarse en los artculos de los foros, una revista o el artculo de peridico, una entrada de un blog, un comentario escrito por un usuario, un widget interactivo o gadget, o cualquier otro artculo independiente de contenido. Cuando los elementos de <article> son anidados, los elementos de <article> interiores representan los artculos que en principio son relacionados con el contenido del artculo externo. Por ejemplo, un artculo de un blog que permite comentarios de usuario, dichos comentarios se podran representar con <article>. <aside></aside> - Representa una seccin de la pgina que abarca un contenido tangencialmente relacionado con el contenido que lo rodea, por lo que se le puede considerar un contenido independiente. Este elemento puede utilizarse para efectos tipogrficos, barras laterales, elementos publicitarios, para grupos de elementos de la navegacin, u otro contenido que se considere separado del contenido principal de la pgina. <header></header> Elemento <header> representa un grupo de artculos introductorios o de navegacin. <nav></nav> - El elemento <nav> representa una seccin de una pgina que es un link a otras pginas o a partes dentro de la pgina: una seccin con links de navegacin. No todos los grupos de enlaces en una pgina tienen que estar en un elemento <nav>, slo las secciones que consisten en bloques principales de la navegacin son apropiadas para ser

utilizadas con el elemento <nav>. Puede utilizarse particularmente en el pie de pgina para tener un men con un listado de enlaces a varias pginas de un sitio, como el Copyright; home page, poltica de uso y privacidad. No obstante, el elemento <footer> es plenamente suficiente sin necesidad de tener un elemento <nav>. <footer></footer> - El elemento <footer> representa el pi de una seccin, con informacin acerca de la pgina/seccin que poco tiene que ver con el contenido de la pgina, como el autor, el copyright o el ao.

<input type="tel"> nmeros telefnicos. <input type="url"> direcciones web. <input type="email"> direcciones de email. <input type="date"> para seleccionar un da en un calendario. <input type="month"> para meses. <input type="week"> para semanas. <input type="time"> para fechas. <input type="datetime"> para una fecha exacta, absoluta y tiempo. <input type="datetime-local"> para fechas locales y frecuencia.

3. REFERENCIAS BIBLIOGRAFICAS [1] Que es HTML5 Miguel ngel lvarez (2009, octubre, 14). [En linea]. Disponible en: http://www.desarrolloweb.com/articulo s/que-es-html5.html [2] Manual de HTML5 Alejandro Castillo Canton. [En linea]. Disponible en: http://theproc.es/files/5321 [3] Conoce html5 & css3 Javier Usobiaga. [En linea]. Disponible en: http://www.slideshare.net/Martulina/co noce-html5-y-css3-6893390

b. Mejoras en los formularios El elemento input adquiere gran relevancia al ampliarse los elementos que se permitiran en el type. <input type="search"> para cajas de bsqueda. <input type="number"> para adicionar o restar nmeros mediante botones. <input type="range"> para seleccionar un valor entre dos valores predeterminados. <input type="color"> seleccionar un color.