Tus primeros pinitos con HTML5

HTML5 es la quinta versión del lenguaje HTML, regulado por el World Wide Web Consortium (3WC). Desde sus inicios en 1991, ha sufrido varias revisiones, pero ninguna lo suficientemente profunda como para asegurar la convergencia en el desarrollo web.

HTML5 apunta más alto que nunca y, desde que en 2004 se constituyó el Web Hypertext Application Technology Working Group para favorecer su desarrollo, sus integrantes y colaboradores trabajan con las expectativas de ofrecernos una versión práctica y adaptada a las necesidades reales de la Web del siglo XXI. Actualmente se halla en fase borrador, pero ya podemos encontrar numerosos recursos y algunas páginas desarrolladas con este estándar. ¿Es el momento de pensar en la migración? Cuando menos, es la hora de conocer la próxima realidad.

El actual borrador de HTML5 define un único lenguaje que puede ser desarrollado en sintaxisHTML o XML. En este artículo, nos centraremos fundamentalmente en el desarrollo de páginas en HTML, aunque con alguna referencia a elementos XML. También es importante apuntar que es compatible con documentos HTML4 y XHTML1, con la excepción de algunas características específicas del primero, como las instrucciones de procesamiento o la desaparición de los marcos.

A lo largo de este práctico aplicaremos las novedades de HTML5 al proceso de creación de una página web personal básica. Os recordamos que, hasta que el lenguaje se consolide, podéis experimentar problemas de compatibilidad con los navegadores. Si queréis conocer de antemano qué características soporta vuestro navegador favorito, os recomendamos que visitéis la página www.html5test.com. En PC Actual hemos utilizado las últimas versiones de Mozilla Firefox yGoogle Chrome para visualizar los ejemplos de código que os proponemos.

Paso 1. La estructura HTML5 básica

A la hora de enfocar un proyecto de desarrollo web, uno de los momentos cruciales es enfrentarse al fichero en blanco. A pesar de que los frameworks nos ahorran mucho trabajo sucio, no está de más volver de vez en cuando a los orígenes y aplicar técnicas de supervivencia del desarrollador frente al código puro y duro. Por tanto, abriremos nuestro bloc de notas e iremos experimentando con las novedades de HTML5.

Es útil recordar que es insensible a mayúsculas y minúsculas, aunque las buenas prácticas del programador no aconsejan su mezcla indiscriminada. La extensión de nuestro fichero para esta quinta versión seguirá siendo .htm o .html.

La primera novedad es que HTML5 nos lo pone más fácil desde la primera línea: el nuevodoctype queda reducido a <!doctype html>. Puede incluso ser memorizado, algo impensable en versiones anteriores. En cuanto al resto, la estructura general de nuestro documento no difiere mucho respecto a lo que ya conocíamos: utilizaremos las etiquetas <head> y <body> para la cabecera y el cuerpo, respectivamente.

Paso 2. Organización del espacio del site

El siguiente paso para crear nuestra web es definir su aspecto general. Veremos qué etiquetas debemos utilizar para organizar la división del espacio de nuestra página. En versiones anteriores de HTML, nos veíamos obligados a recurrir al uso y abuso de la etiqueta <div> y sus atributos, idclass, para llevar a cabo esta tarea. HTML5 da un paso más hacia la web semántica definiendo una serie de elementos para delimitar nuestras secciones.

A la hora de construir una web típica utilizaremos la etiqueta <header> para la información de la cabecera (logo, texto introductorio…), <nav> para los menús de navegación, <section> y<article> para organizar los contenidos principales, <aside> para los contenidos secundarios, como anotaciones laterales o espacios publicitarios, y la etiqueta <footer> para incluir la información a pie de web (año, autor, información legal, etc.).

Es importante resaltar que podemos utilizar varias veces estas etiquetas en una página. Por ejemplo, podemos definir una etiqueta <header> que contenga una imagen con nuestrobanner y otra como encabezamiento de una sección.

Crea en tu documento la división que desees y sustituye las antiguas etiquetas <div> por estas. No se trata de un capricho. Además de aportar claridad al código, las etiquetas semánticas cumplen una importante función: simplifican el análisis web que realizan los motores de búsqueda.

Sigue leyendo

Anuncios

Guia de HTML5 – El Presente de la Web

“HTML5 es el presente de la web y si no estás asimilando lo que está pasando ya eres parte de la vieja generación de desarrolladores. Eso tendría que tenerte preocupado.”

Entender HTML5 es entender que hoy nos conectamos desde teléfonos móviles, tabletas, eBooks, netbooks, computadores y otra gama de dispositivos. Es entender que se acabaron los webmasters y hoy hablamos de equipos multidiciplinarios de empresas de tecnología que cuentan con frontends, backends, sysadmins, mobile devs, comunity managers y arquitectos de información en los proyectos que están reiventando mercados y generando tráfico e ingresos.

Podemos hablar de todas las empresas gigantes de la web, podemos enumerar a Microsoft, Google, Apple, Adobe, Facebook, Yahoo, Mozilla y miles de proyectos tecnológicos que independientemente de sus objetivos hoy respiran HTML5, lo apoyan y tienen propuestas que los hacen competir en código en el navegador más cercano a tu pantalla.   Es una de sus más importantes estrategias de posicionamiento y es una de sus más fuertes apuestas de reclutamiento.   Dije además que HTML5 tiene logo de super-heroe y que venden camisetas para apoyar al movimiento?

Si crees que HTML sigue representando las siglas del Hypertext Markup Language no has entendido nada.   HTML5 es una época maravillosa de la web que tienes el privilegio de estar disfrutando.  No es tecnología, ni es tendencia.  Es una época dorada.   Disfrutala y embriagate de sus tags.

Curso-HTML5-v1