El Lenguaje de marcado de hipertexto (HTML) ha sido una tecnología central para la Web desde principios de la década de 1990. Tim Berners-Lee creó HTML en 1989 como una forma simple pero efectiva de codificar documentos electrónicos. De hecho, el propósito original de un navegador web era servir como lector de dichos documentos. Dos décadas más tarde, el propio navegador se ha convertido en un portal a un mundo de medios en línea. Es por eso que HTML5 no es solo otra revisión de HTML, sino un estándar integral sobre cómo funcionan las páginas web .
Para comprender mejor qué hace que HTML5 sea único, retrocedamos un poco el reloj. En 1994, HTML todavía estaba en su primera revisión, Mosaic y Netscape dominaban el mercado de los navegadores, y la mayoría de la gente aún no había experimentado esta cosa nueva llamada World Wide Web. Ese año, el creador de HTML, Berners-Lee, encabezó un grupo de estándares web recientemente establecido conocido como World Wide Web Consortium (W3C).
Aunque W3C es una autoridad de estándares respetada en la actualidad, los jugadores comerciales en el mercado de navegadores de la década de 1990 ignoraron en gran medida esos estándares y abrieron sus propios caminos. Para 1995, el W3C había publicado la segunda revisión del estándar HTML y Microsoft , el recién llegado a la Web, estaba ganando terreno con su navegador Internet Explorer (IE). Microsoft ignoró en gran medida los estándares, y Netscape luchó por mantener una participación de mercado respetable mientras IE comenzó a dominar [fuente: Harris].
Durante estas primeras guerras de navegadores, los desarrolladores web se enfrentaron al desafío de mantener la compatibilidad de sus sitios con cada nueva versión de los principales navegadores, así como con los navegadores Opera y Apple Safari menos utilizados. Aunque W3C había publicado HTML 3.2 en 1997, seguido de HTML 4 en 1998, seguir los estándares parecía menos importante que mantenerse al día con las funciones específicas del navegador. Esto continuó hasta 2003 cuando la Fundación Mozilla impulsada por la comunidad rompió la tendencia. Después del lanzamiento del navegador Mozilla original, seguido de su navegador Firefox en 2004, Mozilla rápidamente se deshizo del dominio de IE. Además, estos nuevos navegadores en realidad siguieron los estándares W3C existentes mientras lo hacían.
Mientras que Firefox de Mozilla siguió creciendo utilizando el antiguo estándar HTML 4, Mozilla se unió a Apple y Opera en 2004 para formar un grupo llamado Web Hypertext Application Technology Working Group (WHATWG). El objetivo de WHATWG es mantener vivo el desarrollo de HTML. Aunque originalmente dudó, el W3C se unió al renacimiento de HTML en 2006. Juntos, WHATWG y W3C combinaron las especificaciones existentes para HTML y XHTML y las desarrollaron aún más para crear la nueva especificación HTML5. Esa especificación es actualmente mantenida y publicada por W3C [fuente: W3C , WHATWG ].
Este artículo explora esta nueva tecnología HTML5. Veremos XHTML y otras tecnologías que se incorporaron a HTML5 y cubriremos los puntos básicos de cómo usar HTML5 para crear contenido web atractivo y compatible con los estándares. También veremos algunas maneras interesantes en que las personas usan HTML5 en la Web. Comencemos analizando los objetivos de HTML5 y por qué es mucho más que HTML.
- HTML5 va más allá de HTML
- Tecnologías de base HTML5
- Contenido HTML básico
- Formularios
- Elementos semánticos
- Elementos multimedia y la rivalidad de Flash
- El lienzo
- Creando el Look con CSS3
- JavaScript como componente central
- Tecnologías de aplicaciones web
- Pruebas de concepto innovadoras
HTML5 va más allá de HTML
Por sí mismo, HTML se enfoca en presentar documentos estáticos, es decir, texto, enlaces y poco más. A través de HTML 4, el estándar HTML era el mismo con la sintaxis HTML utilizada para lograr este objetivo. El estándar HTML5 tiene un objetivo mucho más amplio para describir el contenido, el estilo y las interfaces de aplicaciones detrás de una página web cuando se carga en su navegador. Más específicamente, HTML5 establece una sintaxis única para interactuar con todos los elementos que la página web ha cargado en la memoria de su computadora.
Hay un posible punto de confusión que debemos aclarar sobre el término "HTML5" antes de continuar. Hay una nueva versión del propio lenguaje de marcado llamado HTML5. Sin embargo, ese lenguaje es solo una parte del estándar más amplio que comparte el nombre HTML5. Este artículo cubre todos los componentes del estándar HTML5, del cual el lenguaje HTML5 es una pieza central.
Con esa distinción en mente, ¿cómo carga el navegador una página escrita de acuerdo con el nuevo estándar HTML5 y no con el antiguo lenguaje HTML 4? Después de todo, generalmente solo confiamos en nuestros navegadores para cargar páginas web sin preocuparnos por el HTML detrás de ellas. La respuesta es simple: siempre que el navegador sea compatible con HTML5, puede manejar cualquier cosa que le arrojes sin necesidad de distinguir entre las revisiones de HTML.
Para hacer realidad esta magia, el estándar HTML5 integra nuevas versiones de múltiples tecnologías que trabajan juntas hacia objetivos comunes. Estos objetivos incluyen lo siguiente:
- Mantener el lenguaje simple e intuitivo.
- Garantizar que el código sea fácil de leer y mantener
- Direccionamiento de páginas como aplicaciones interactivas en lugar de documentos estáticos
- Confiar en las hojas de estilo en cascada (CSS) para diseñar el contenido
- Reconocimiento de JavaScript como un componente central de secuencias de comandos para páginas web
- Adoptar contenido dinámico de tecnologías del lado del servidor como PHP y ASP
Ahora que sabe que HTML5 es más que el propio marcado HTML, examinemos las tecnologías básicas del estándar.
Tecnologías de base HTML5
Un lenguaje de marcado utiliza una serie de etiquetas para marcar elementos en un archivo. El marcado se basa en algún tipo de modelo que define cuáles son esos elementos y cómo usarlos. Dado que HTML siempre se ha tratado de codificar documentos, se basa en algo llamado modelo de objeto de documento (DOM). El DOM se incorpora dentro de la propia aplicación del navegador web. Por lo tanto, el lenguaje de marcado es solo una forma de dar instrucciones al navegador basadas en un modelo que ya comprende.
Para comprender mejor la relación entre un DOM y HTML, piense en el DOM como una caja de sellos de goma. Cada sello es un elemento diferente dentro del DOM. Cada página escrita en HTML es solo una serie de impresiones hechas a partir de los sellos, que se completan con su propio contenido personalizado. El navegador web puede mostrar cualquier cosa creada a partir de los sellos en ese cuadro.
Técnicamente hablando, el DOM es una interfaz de programación de aplicaciones (API) que proporciona una plataforma neutral para procesar documentos HTML o XML. (El lenguaje de marcado extensible, o XML, se parece a HTML, pero le permite al programador agregar un conjunto personalizado de elementos que puede usar en un documento). El estándar HTML5 requiere el DOM conocido como DOM5 HTML. Preparadas para el crecimiento de HTML5, las últimas versiones de los navegadores Chrome , Firefox , IE, Safari y Opera pueden procesar páginas bajo DOM5 HTML.
Otra base importante para HTML5 son sus tipos de extensiones multipropósito de correo de Internet ( MIME ) asociadas. MIME es un estándar del Grupo de trabajo de ingeniería de Internet (IETF) para alertar al software con capacidad de Internet qué tipo de contenido está tratando de procesar. Esto generalmente corresponde a un tipo específico de archivo, como un documento HTML o un archivo de audio MP3.
Los desarrolladores web especifican tipos MIME cuando codifican una página web. Esto le pide al navegador que cargue los archivos correspondientes de acuerdo con sus tipos. Hay dos tipos MIME que se unen a DOM5 HTML para formar la base del nuevo estándar HTML5: el tipo HTML MIME (texto/html) y el tipo XML MIME (aplicación/xhtml+xml). HTML5 incluye actualizaciones en la sintaxis para ambos tipos de MIME.
En resumen, las tecnologías fundamentales en el estándar HTML5 son DOM5 HTML y los tipos MIME compatibles con HTML5 para HTML y XML. A continuación, pasemos a cómo armar una página web usando HTML5.
Contenido HTML básico
Como mínimo, HTML5 incluye la versión 5 de la sintaxis HTML básica. El código de muestra en la barra lateral de esta página muestra cómo se vería este código HTML para una página web básica. Cuando esté navegando por la web, use la opción "Ver fuente" o similar en su navegador para ver el HTML (y otro código) cargado para crear la página que está viendo actualmente. Todo el código que se muestra en nuestro ejemplo también es compatible con versiones anteriores de HTML 4, lo que significa que no tiene ninguna de las nuevas incorporaciones disponibles en HTML5.
Aunque no está presente en todas las páginas web, es una buena práctica comenzar su archivo HTML con una declaración de tipo de documento (doctype) como se muestra en el ejemplo. Esto confirma que el navegador debe esperar HTML estándar al interpretar el documento. Algunos desarrolladores confían en las extensiones del estándar HTML, que utilizan archivos de definición de tipo de documento (DTD). Si ese es el caso, el desarrollador especifica la ubicación de la DTD como parte de este tipo de documento.
Además del tipo de documento, el código restante en el ejemplo es sintaxis HTML estándar. Si no está familiarizado con esta sintaxis, consulte nuestro artículo Cómo funcionan las páginas web .
Entonces, ¿qué hay de nuevo en estos elementos básicos en HTML5? Aquí está la lista, y veremos más de cerca cada uno en las páginas que siguen.
- Elementos de formulario nuevos y actualizados: diseño de la estructura del formulario y procesamiento de la entrada del formulario del usuario
- Elementos semánticos: identificación del contenido en función de su función dentro de una página web
- Elementos multimedia: incrustación de audio, video y otros medios interactivos sin necesidad de extensiones de navegador de terceros
- Elementos de Ruby: apoyo a la internacionalización de páginas web en idiomas asiáticos
Formularios
Aunque los formularios (secciones de un sitio web donde los usuarios pueden ingresar datos específicos, como nombres, direcciones, etc.) fueron parte de los primeros elementos disponibles en HTML, carecían de muchas características útiles antes de HTML5. Para compensar esto, los desarrolladores externos crearon un software de formularios web que hace que los formularios HTML básicos parezcan casi obsoletos. Sin embargo, HTML5 dio nueva vida a los formularios, con nuevos elementos de formulario, tipos de entrada y atributos para los elementos existentes.
Sin distinguir entre la sintaxis antigua y la nueva, examinemos el enfoque general para crear un formulario para su página web utilizando HTML5. Aquí algunos pasos recomendados para empezar:
- Establezca un bloque de formulario usando el
- Designe un bloque de campos dentro del formulario usando el
- Diseñe cada campo en el conjunto de campos usando
- Dentro de cada etiqueta, agregue el nombre del campo como desea que se muestre más eletiqueta para el campo en sí.
- Use el atributo de tipo dentro de la etiqueta de entrada () que solicita al navegador que valide la entrada del usuario en función de ese tipo. Esto elimina la necesidad de código adicional para manejar la validación y solicitar el reingreso. HTML5 incluye los siguientes tipos de entrada: fecha, hora, fecha y hora, fecha y hora local, mes, semana, número, correo electrónico, teléfono, URL, rango, color y búsqueda. También puede usar el atributo de patrón con una expresión regular para crear un patrón de validación personalizado.
- Indique los campos obligatorios agregando el atributo obligatorio para un elemento de entrada.
- Utilice el atributo de enfoque automático para establecer un elemento de entrada en particular como el primer elemento del formulario. Aquí es donde un navegador web colocará automáticamente el cursor del usuario después de cargar el formulario.
- Use el atributo de marcador de posición si lo desea para agregar sugerencias de texto sobre qué ingresar en un campo determinado.
- Establezca estilos CSS para ":requerido" y ":no válido" para que el usuario tenga una indicación visual de la información faltante o la entrada que no se validará para un tipo de entrada determinado.
Consulte una guía de referencia de HTML5 actualizada para obtener una lista completa de los elementos del formulario y sus atributos. Además, tenga en cuenta que la compatibilidad con algunos campos de formulario varía entre navegadores web. Asegúrese de probar su formulario en cada tipo de navegador que desee que admita su sitio web.
Si bien los elementos de formulario HTML tienen más funciones en la versión 5, el siguiente tipo de elemento es completamente nuevo en HTML5.
Elementos semánticos
Los elementos semánticos en HTML5 son, como su nombre lo indica, aquellos que hacen referencia al significado de determinado contenido. El uso de etiquetas no es suficiente, ya que la mayoría de los sitios web actuales contienen varios tipos diferentes de contenido en una sola página. Los desarrolladores web deben aplicar reglas separadas sobre cómo debe verse o comportarse cada tipo de contenido.
Sin elementos semánticos, los desarrolladores web han utilizado
Con el tiempo, ciertos tipos de contenido se volvieron muy comunes en los sitios web, como encabezados, pies de página, menús y puntos de navegación. HTML5 los incorpora agregando elementos semánticos estándar. Esto significa que puede dividir su bloque en elementos semánticos útiles en lugar de una serie de
La siguiente es la lista de elementos de página semánticos con una breve definición de cada uno. Asegúrese de encontrar una referencia de HTML5 en la que pueda confiar para obtener una lista completa de atributos válidos y elementos secundarios para cada elemento semántico.
Bloquear elementos:
- sección : una división de página genérica utilizada para ayudar a dividir un bloque más grande de contenido
- artículo : contenido que es originalmente de una fuente externa, a veces agregado dinámicamente en la carga de la página mediante el uso de un script agregador
- encabezado y pie de página : bloques que aparecen en la parte superior e inferior de cada página
- hgroup : una agrupación de múltiples encabezados relacionados, como un título y un subtítulo
- menú : una lista de comandos (consulte el elemento de comando) y atributos que especifican el comportamiento del menú
- nav : identifica un bloque que es estrictamente para la navegación del sitio web, generalmente una lista desordenada de enlaces a otras páginas del sitio.
- dirección : incluye información de contacto del autor del contenido dentro de un bloque, como un artículo, una sección o el cuerpo de una página completa
- a un lado : indica que el contenido debe tratarse como una barra lateral
Elementos en línea:
- resumen y detalles : alternar entre un adelanto/resumen y detalles completos para el mismo contenido
- figure y figcaption : elementos que se usan para aplicar un comportamiento común a las imágenes, sin importar qué elementos multimedia (img, svg o canvas) se usen para incluirlas
- hora : texto que representa una fecha del calendario, la hora del reloj o ambas, formateado para que el navegador pueda ajustar las diferencias de zona horaria si es necesario
- comando : una etiqueta y un comportamiento asociado con esa etiqueta cuando usa el teclado o el mouse para interactuar con él, generalmente se usa dentro de un bloque de menú
- dfn : un término que se define dentro del contenido
- wbr : una etiqueta que indica un lugar aceptable para dividir el texto dentro de una palabra cuando se ajusta a varias líneas
Los elementos semánticos se crearon como una mejora con respecto a los elementos HTML más genéricos. Sin embargo, el próximo tipo de elemento nuevo pretende ser un reemplazo total para las extensiones de medios de terceros en los navegadores web.
¿Espacio o no espacio?
Es posible que haya notado que cuando nos referimos a otras versiones de HTML, como HTML 4, hay un espacio antes del número, mientras que no hay espacio en las referencias a HTML5. Ha habido mucha discusión y debate sobre este tema en la comunidad de HTML, pero eventualmente, tanto WHATWG como W3C adoptaron HTML5 como la ortografía oficial para mantener la coherencia de la documentación.
Elementos multimedia y la rivalidad de Flash
Una de las características más comentadas de HTML5 es su nuevo enfoque para incrustar medios en una página web . Echaremos un vistazo a algunas aplicaciones sorprendentes de esta característica de HTML5 más adelante en este artículo. HTML5 logra esta incrustación sin necesidad de un complemento de navegador externo. Los siguientes son los elementos multimedia disponibles en HTML5:
- audio : incrusta audio en la página e incluye atributos para especificar cómo reproducirlo; los formatos de archivo admitidos variarán entre los navegadores web
- video : incrusta un video en la página e incluye atributos para especificar cómo reproducirlo; los formatos de archivo admitidos variarán entre los navegadores web
- fuente : se usa con elementos de audio o video para identificar una fuente; se pueden especificar varias fuentes para un solo elemento
- incrustar : incrusta y especifica el tipo de medio para el contenido que podría no ser compatible con otros elementos de medios
- lienzo : reserva parte de la página, o la pantalla de la computadora, donde JavaScript puede dibujar imágenes; Próximamente, descubriremos más sobre cómo funciona esta nueva característica importante.
- svg : incruste gráficos vectoriales codificados con lenguaje de marcado SVG, lo que permite escalarlos dinámicamente al área de la página en la que se cargan sin perder calidad gráfica
A medida que se desarrollaba HTML5, los expertos del mercado cuestionaron si reemplazaría a Flash, que actualmente está controlado por Adobe. Flash es un reproductor multimedia que puede agregar como complemento a su navegador web. Debido a que Flash tiene todas las funciones necesarias para que un sitio incruste diferentes tipos de medios, sitios como YouTube han dependido de él durante años. Incluso hay algunas aplicaciones web que dependen completamente de Flash para potenciar sus interfaces interactivas. La adopción de Flash estaba tan extendida en 2007 que, tras el lanzamiento del muy esperado iPhone de Apple, muchos consumidores se molestaron al saber que su sistema operativo , Apple iOS, no era compatible con Flash.
Cuando Google , posiblemente la marca más grande en Internet, se lanzó de lleno a desarrollar sus aplicaciones con HTML5, los seguidores de Flash se dieron cuenta. Antes de HTML5, la única amenaza para el dominio de Flash eran los desarrolladores de aplicaciones web dispuestos a crear y mantener alternativas HTML/JavaScript personalizadas. Con HTML5, esas personalizaciones engorrosas ya no son necesarias cuando se crea una experiencia multimedia interactiva para competir con la tecnología Flash.
Entonces, ¿quién ganará: Flash o HTML5? La respuesta corta es, "Ninguno". Cada tecnología tiene sus propias características, ventajas y desventajas. Además, Adobe y Google han trabajado en herramientas de conversión de Flash a HTML5. Al momento de escribir este artículo, parece que aunque HTML5 está ganando estatus, es probable que Flash mantenga su propia popularidad por un tiempo también.
Vaya a la página siguiente donde desglosaremos el elemento canvas y cómo usarlo en sus páginas web HTML5.
El lienzo
Una de las características nuevas más importantes de HTML5 es el lienzo. La función de lienzo le permite identificar una sección de una página web , dibujar contenido dentro de ella y agregar funcionalidad interactiva. Todo esto es posible a través de una combinación de código HTML y JavaScript . Veamos las tres partes que necesitará para configurar un lienzo en HTML5:
Parte 1: Usa el
ancho = "400"
altura="300>
Si ve este texto, su navegador
no tiene soporte de lienzo HTML5.
Parte 2: Cree el JavaScript que dibuja el contenido en el lienzo. Más adelante, descubriremos cómo agregar y administrar el código JavaScript asociado con una página web HTML5. Aquí, veamos algunos ejemplos de JavaScript que puede usar para objetos de lienzo. El siguiente código dibuja un rectángulo dentro del lienzo de arriba:
function dibujarRectángulo() {
var targetCanvas = document.getElementById("sampleCanvas");
var rectContext = sampleCanvas.getContext("2d");
rectContext.fillStyle = "azul";
rectContext.fillRect(50, 25, 150, 100);
}
Esta función dibuja un rectángulo azul sólido dentro de su lienzo. Las dos líneas "var" crean variables que puede usar. El primero (targetCanvas) identifica el elemento de lienzo al que se dirige utilizando su ID del HTML. El segundo (rectContext) configura un contexto bidimensional para dibujar. Piense en el contexto como una capa transparente de vidrio colocada sobre el lienzo y llamará a funciones para dibujar sobre ese vidrio.
La línea "fillStyle" identifica el color azul por su nombre, que HTML reconoce y asocia con uno de sus colores con nombre. También puede usar cualquier color, patrón o degradado como lo haría al escribir código de estilo en HTML o CSS. La línea "fillRect" dibuja el rectángulo a partir de un desplazamiento desde la parte superior izquierda, los primeros dos números son los desplazamientos x e y como si la parte superior izquierda del lienzo estuviera en las coordenadas (0,0). Los dos segundos números indican el ancho y la altura del rectángulo, respectivamente.
Parte 3: llamar a la función de JavaScript desde el código HTML. Esto une las dos piezas. Puede llamar a la función tan pronto como se cargue la página web, lo que tiene sentido si está utilizando el lienzo para dibujar contenidos de página interactivos que deben aparecer tan pronto como se cargue la página. Otra opción es crear un botón, menú u otro elemento en el HTML que active el evento de dibujo. El siguiente es un ejemplo de un botón que podría usar para ejecutar el script de ejemplo anterior:
Dive Into HTML5 tiene una guía fácil de seguir para crear elementos de lienzo para sus páginas web. Además, una referencia confiable de HTML5 debería proporcionar amplios recursos para dibujar gráficos sofisticados, tanto fijos como en movimiento. Si desea hacer un uso extensivo del lienzo en HTML5, deberá estar familiarizado con la programación en JavaScript. A continuación, exploremos cómo CSS3 crea la apariencia de una página web HTML5.
Creando el Look con CSS3
Cada elemento HTML tiene una serie de atributos que utiliza en el código para modificar el aspecto o la función de ese elemento. El estilo y los atributos relacionados ajustan el tamaño, el color, la ubicación, los bordes y otros aspectos físicos del elemento. A lo largo de los años de vida de la Web, los desarrolladores de sitios adoptaron ampliamente la práctica de separar el estilo del contenido. Al hacer esta separación, los desarrolladores disfrutan de las siguientes ventajas:
- Menos código para mantener: varios elementos en varias páginas web pueden compartir los mismos estilos sin repetir el código de estilo para cada uno.
- Mantenimiento más fácil con el tiempo: Actualizar a un nuevo estilo, o arreglar uno existente, significa cambiar solo una parte del código de estilo en lugar de actualizar cada elemento usando ese código.
Por lo tanto, mientras que el estilo se puede colocar en línea con el código HTML, la opción más popular para los desarrolladores web es usar hojas de estilo en cascada (CSS) para administrar todo el código de estilo asociado con un sitio web. El HTML de cada página puede hacer referencia a una o más hojas de estilo, que su navegador debe cargar cuando se carga la página. Estas hojas de estilo, en forma de archivos CSS, pretenden imitar lo que podría ingresar usando
