Lic. Juan Jos Huiza

HTML5 no es una nueva versin del antiguo lenguaje de etiquetas, ni siquiera una mejora de esta ya antigua tecnologa, sino un nuevo concepto para la construccin de sitios web y aplicaciones en una era que combina dispositivos mviles, computacin en la nube y trabajos en red.

Todo comenz mucho tiempo atrs con una simple versin de HTML propuesta para crear la estructura bsica de pginas web, organizar su contenido y compartir informacin.

El lenguaje y la web misma nacieron principalmente con la intencin de comunicar informacin por medio de texto.

El limitado objetivo de HTML motiv a varias compaas a desarrollar nuevos lenguajes y programas para agregar caractersticas a la web nunca antes implementadas.

Estos desarrollos iniciales crecieron hasta convertirse en populares y poderosos accesorios.

De las opciones propuestas, Java y Flash fueron las ms exitosas; ambas fueron masivamente adoptadas y ampliamente consideradas como el futuro de Internet

El mayor inconveniente de Java y Flash puede describirse como una falta de integracin. Ambos fueron concebidos desde el principio como complementos (plug-ins), algo que se inserta dentro de una estructura pero que comparte con la misma slo espacio en la pantalla

No exista comunicacin e integracin alguna entre aplicaciones y documentos..

La falta de integracin result ser crtica y prepar el camino para la evolucin de un lenguaje que comparte espacio en el documento con HTML y no est afectado por las limitaciones de los plug-ins.

Javascript, un lenguaje interpretado incluido en navegadores, claramente era la manera de mejorar la experiencia de los usuarios y proveer funcionalidad para la web.

Desarrolladores, impulsados por las mejoras otorgadas por los navegadores, comenzaron a aplicar Javascripten sus aplicaciones de un modo nunca visto. La innovacin y los increbles resultados obtenidos llamaron la atencin de ms programadores. Pronto lo que fue llamado la Web 2.0 naci y la percepcin de Javascript en la comunidad de programadores cambi radicalmente.

Gracias a estas nuevas implementaciones, Javascript, HTML y CSS se convirtieron pronto en la ms perfecta combinacin para la necesaria evolucin de la web.

HTML5 es, de hecho, una mejora de esta combinacin, el pegamento que une todo.

HTML5 propone estndares para cada aspecto de la web y tambin un propsito claro para cada una de las tecnologas involucradas.

HTML5

Provee los elementos estructuralesHTML

Se encuentra concentrado en cmo volver esa estructura utilizable y atractiva a la vista

CSS

tiene todo el poder necesario para proveer dinamismo y construir aplicaciones web completamente funcionales

JS

IMPORTANTE: En este momento no todos los navegadores soportan HTML5 y la mayora de sus funciones se encuentran actualmente en estado de desarrollo.

Sea cual fuere el navegador elegido, siempre tenga en mente que un buen desarrollador instala y prueba sus cdigos en cada programa disponible en el mercado.

Estructura global Los documentos HTML se encuentran estrictamente

organizados.

Cada parte del documento est diferenciada, declarada y determinada por etiquetas especficas.

Veremos cmo construir la estructura global de un documento HTML y los nuevos elementos semnticos incorporados en HTML5.

DOM es esencialmente una interfaz de programacin de aplicaciones (API) que proporciona un conjunto estndar de objetos para representar documentos HTML.

El World Wide Web Consortium (W3C), el consorcio encargado de definir los estndares de la web, decidi crear un modelo de objetos nico, el DOM, para que todos los fabricantes de navegadores web pudieran adoptarlo, facilitando la compatibilidad plena entre ellos.

W3C DOM (Document Object Model)

Document Object Model: Lo que nos dice el Modelo de Objetos de Documento es que todos los objetos de una pgina web son propiedad de un objeto principal: El objeto document.

El objeto principal que se maneja durante la navegacin es el objeto window, e inmediatamente por debajo de este se encuentra el elemento document.

DOM

document se refiere a toda la pgina, incluyendo no solamente la seccin de body.

El DOM nos dice que los objetos de una pgina siguen una estructura jerrquica.

JavaScript

Bloque de texto.

Letra cursiva

Document

html

head body

title

Ttulo

Texto Texto Texto

En primer lugar necesitamos indicar el tipo de documento

que estamos creando. Esto en HTML5 es extremadamente sencillo:

IMPORTANTE: Esta lnea debe ser la primera lnea del archivo, sin espacios o lneas que la precedan.

Encabezados

Luego de declarar el tipo de documento, debemos

comenzar a construir la estructura HTML.

Como siempre, la estructura tipo rbol de este lenguaje tiene su raz en el elemento .

Este elemento envolver al resto del cdigo:

El atributo lang en la etiqueta de apertura es el nico atributo que necesitamos especificar en HTML5.

Este atributo define el idioma humano del contenido del documento que estamos creando, en este caso espor espaol.

El cdigo HTML insertado entre las etiquetas tiene que ser dividido entre dos secciones principales. Al igual que en versiones previas de HTML, la primera seccin es la cabecera y la segunda el cuerpo.

El siguiente paso, por lo tanto, ser crear estas dos secciones en el cdigo usando los elementos y ya conocidos.

La etiqueta no cambi desde versiones anteriores y su propsito sigue siendo exactamente el mismo. Dentro de las etiquetas definiremos el ttulo de nuestra pgina web, declararemos el set de caracteres correspondiente, proveeremos informacin general acerca del documento e incorporaremos los archivos externos con estilos, cdigos Javascript, etc.

La siguiente gran seccin que es parte principal de la

organizacin de un documento HTML es el cuerpo. El cuerpo representa la parte visible de todo documento y es especificado entre etiquetas .

Estas etiquetas tampoco han cambiado en relacin con versiones previas de HTML:

Es momento de construir la cabecera del documento.

Algunos cambios e innovaciones fueron incorporados dentro de la cabecera, y uno de ellos es la etiqueta que define el juego de caracteres a utilizar para mostrar el documento.

sta es una etiqueta que especifica cmo el texto ser presentado en pantalla:

Valores comunes:

UTF-8 - Unicode

ISO-8859-1 Alfabeto latino

Por supuesto, podemos cambiar el tipo iso-8859-1 por el necesario para nuestros documentos y agregar otras etiquetas como description o keywordspara definir

otros aspectos de la pgina web, como es mostrado en el siguiente ejemplo:

El atributo name dentro de la etiqueta especifica su tipo y content declara su valor, pero ninguno de estos valores es mostrado en pantalla.

En HTML5 no es necesario cerrar etiquetas simples con una barra al final, pero recomendamos utilizarlas por razones de

compatibilidad. El anterior cdigo se podra escribir de la siguiente manera:

Keywords: Define las palabras clave para los buscadores.

Author: Autor de la pgina.

Description: Descripcin de la pgina.

La etiqueta , como siempre, simplemente especifica el ttulo del documento, y no hay nada nuevo para comentar

Este texto es el ttulo del documento

Otro importante elemento que va dentro de la

cabecera del documento es .

Este elemento es usado para incorporar estilos, cdigos Javascript, imgenes o conos desde archivos externos.

Uno de los usos ms comunes para es la incorporacin de archivos con estilos CSS:

Este texto es el ttulo del documento

index.html Misestilos.css

Raz

CSS (Cascading Style Sheets) Un archivo de estilos es un grupo de reglas de

formato que ayudarn a cambiar la apariencia de

nuestra pgina web (por ejemplo, el tamao y color del texto). Sin estas reglas, el texto y cualquier otro elemento HTML

sera mostrado en pantalla utilizando los estilos estndar provistos por el navegador.

No es estrictamente necesario obtener esta informacin de archivos externos pero es una prctica recomendada.

Cargar las reglas CSS desde un documento externo (otro archivo) nos permitir organizar el documento principal, incrementar la velocidad de carga y aprovechar las nuevas caractersticas de HTML5.

Estructura del cuerpo

La estructura del cuerpo (el cdigo entre las etiquetas ) generar la parte visible del documento.

Este es el cdigo que producir nuestra pgina web.

Normalmente una pgina o aplicacin web est dividida entre varias reas visuales para mejorar la experiencia del usuario y facilitar la interactividad.

Estructura semntica de HTML5

Figura 1

: Se utiliza para representar una seccin general dentro de un documento. Junto con las etiquetas H1...H6, podemos conseguir una mejor organizacin.

: Representa un componente de una pgina. Por ejemplo, en un blog, se podra utilizar esta etiqueta para hacer referencia a la noticia. Se pueden utilizar etiquetas article dentro de otras etiquetas article.

: Representa a una seccin de la pgina que aunque est relacionado con el tema, se puede considerar independiente. Se puede utilizar para las barras laterales por ejemplo.

: Representa a un grupo de elementos introductorios. Usualmente se ubica el logo, ttulo y una corta descripcin del sitio web o la pgina.

: Aqu, casi todos los desarrolladores ofrecen un men o lista de enlaces con el propsito de facilitar la navegacin a travs del sitio. Los usuarios son guiados desde esta barra hacia las diferentes pginas o documentos.

: Representa el pie de una seccin, con informacin acerca de la seccin, como puede ser el autor, copyright.

El contenido ms relevante de una pgina web se encuentra, en casi todo diseo, ubicado en su centro. Esta seccin presenta informacin y enlaces valiosos.

La mayora de las veces es dividida en varias filas y columnas.

En el ejemplo de la Figura 1 se utilizaron solo dos columnas: Informacin Principal y aside(Barra Lateral), pero esta seccin es extremadamente flexible y normalmente diseadores la adaptan acorde a sus necesidades insertando ms columnas, dividiendo cada columna entre bloques ms pequeos o generando diferentes distribuciones y combinaciones.

section

aside

footer

nav

header

Siguiendo con nuestro ejemplo, la siguiente seccin es la Barra de Navegacin. Esta barra es generada en HTML5 con el elemento :

La columna Informacin Principal contiene la informacin ms relevante del documento y puede ser encontrada en diferentes formas (por ejemplo, dividida en varios bloques o columnas). Debido a

que el propsito de estas columnas es ms general, el elemento en HTML5 que especifica estas secciones se llama

simplemente :

El elemento podra estar ubicado del lado derecho o izquierdo de nuestra pgina de ejemplo, la etiqueta no tiene una posicin predefinida.

El elemento solo describe la informacin que contiene, no el lugar dentro de la estructura.

Este elemento puede estar ubicado en cualquier parte del diseo y ser usado siempre y cuando su contenido no sea considerado como el contenido principal del documento.

Generalmente, el elemento representar el final del cuerpo de nuestro documento y tendr el propsito descripto anteriormente.

Sin embargo, puede ser usado mltiples veces dentro del cuerpo para representar tambin el final de diferentes secciones (del mismo modo que la etiqueta ).

Mientras ms profundo nos introducimos en el documento, ms cerca nos encontramos de la definicin del contenido.

Esta informacin estar compuesta por diferentes elementos visuales como ttulos, textos, imgenes, videos y aplicaciones interactivas, entre otros.

Necesitamos poder diferenciar estos elementos y establecer una relacin entre ellos dentro de la estructura.

Los sitios web normalmente presentan informacin relevante dividida en partes que comparten similares caractersticas.

El elemento nos permite identificar cada una de estas partes:

El elemento no est limitado por su nombre (no se limita, por ejemplo, a artculos de noticias).

Este elemento fue creado con la intencin de contener unidades independientes de contenido, por lo que puede incluir mensajes de foros, artculos de una revista digital, entradas de blog, comentarios de usuarios, etc.

Lo que hace es agrupar porciones de informacin que estn relacionadas entre s independientemente de su naturaleza.

Dentro de cada elemento , en la parte superior

del cuerpo o al comienzo de cada , incorporamos elementos para declarar un ttulo.

Bsicamente, las etiquetas son todo lo que necesitamos para crear una lnea de cabecera para cada parte del documento, pero es normal que necesitemos tambin agregar subttulos o ms informacin que especifique de qu se trata la pgina web o una seccin en particular.

De hecho, el elemento fue creado para contener tambin otros elementos como tablas de contenido, formularios de bsqueda o textos cortos y logos.

y La etiqueta fue creada para ayudarnos a ser

an ms especficos a la hora de declarar el contenido del documento.

Antes de que este elemento sea introducido, no podamos identificar el contenido que era parte de la informacin pero a la vez independiente, como ilustraciones, fotos, videos, etc.

La etiqueta fue agregada para resaltar parte de

un texto que originalmente no era considerado importante pero ahora es relevante acorde con las acciones del usuario.

http://ascii.cl/es/codigos-html.htm

El elemento es un viejo elemento

convertido en un elemento estructural.

No necesitamos usarlo previamente para construir nuestra plantilla, sin embargo podra ubicarse perfectamente en algunas situaciones en las que debemos presentar informacin de contacto relacionada con el contenido del elemento o el cuerpo completo.

Ttulo del mensaje

Este es el texto del mensaje

Ir a Google

Este elemento se utiliza para mostrar fecha y

hora en formatos comprensibles por los usuarios y el navegador.

El valor para los usuarios es ubicado entre las etiquetas mientras que el especfico para programas y navegadores

es incluido como el valor del atributo datetime.

Un segundo atributo optativo llamado pubdate es usado para indicar que el valor de datetime es la fecha de publicacin.

Formato:2011-10-12T12:10:45

Ttulo del mensaje dos

publicado 12-10-2011

Este es el texto del mensaje

CSS La nueva especificacin de HTML (HTML5) no

escribe solamente los nuevos elementos HTML o el lenguaje mismo.

La web demanda diseo y funcionalidad, no solo organizacin estructural o definicin de secciones.

En este nuevo paradigma, HTML se presenta junto con CSS y Javascript como un nico instrumento integrado.

CSS es un lenguaje que trabaja junto con HTML para proveer estilos visuales a los elementos del documento, como tamao, color, fondo, bordes, etc.

IMPORTANTE: En este momento las nuevas incorporaciones de CSS3 estn siendo implementadas en las ltimas versiones de los navegadores ms populares, pero algunas de ellas se encuentran an en estado experimental.

Por esta razn, estos nuevos estilos debern ser precedidos por prefijos tales como moz- o -webkit-para ser efectivamente interpretados.

Analizaremos este importante asunto ms adelante

Elementos block Con respecto a la estructura, bsicamente cada

navegador ordena los elementos por defecto de acuerdo a su tipo: block (bloque) o inline (en lnea).

Esta clasificacin est asociada con la forma en que los elementos son mostrados en pantalla.

Elementos block: son posicionados uno sobre otro hacia abajo en la pgina.

Elementos inline: son posicionados lado a lado, uno al lado del otro en la misma lnea, sin ningn salto de lnea a menos que ya no haya ms espacio horizontal para ubicarlos.

Casi todos los elementos estructurales en nuestros documentos sern tratados por los navegadores como elementos block por defecto.

Esto significa que cada elemento HTML que representa una parte de la organizacin visual (por ejemplo, , , , , ) ser posicionado debajo del anterior.

Cada bloque (b lock) es mostrado por defecto tan ancho como sea posible, tan alto como la informacin que contiene y uno sobre otro, como se muestra en la Figura 2

CSS Para aprender cmo podemos crear nuestra propia

organizacin de los elementos en pantalla, debemos primero entender cmo los navegadores procesan el cdigo HTML.

Los navegadores consideran cada elemento HTML como una caja.

Una pgina web es en realidad un grupo de cajas ordenadas siguiendo ciertas reglas. Estas reglas son establecidas por estilos provistos por los navegadores o por los diseadores usando CSS.

La combinacin de estas reglas es normalmente llamada modelo o sistema de disposicin.

Todas estas reglas aplicadas juntas constituyen lo que se llama un modelo de caja.

CSS en etiquetas Mi texto

Usar la tcnica demostrada anteriormente es una buena manera de probar estilos y obtener una vista rpida de sus efectos, pero no es recomendado para aplicar estilos a todo el documento.

La razn es simple: cuando usamos esta tcnica, debemos escribir y repetir cada estilo en cada uno de los elementos que queremos modificar, incrementando el tamao del documento a proporciones inaceptables y hacindolo imposible de mantener y actualizar.

Estilos embebidos

p { font-size: 70px }

Una mejor alternativa es insertar los estilos en la cabecera del documento y luego usar referencias para afectar loselementos HTML correspondientes:

index.html Misestilos.css

Raz