Introducción a HTML5

Como anteriormente, hoy vamos a seguir hablando sobre la web semántica en la nueva especificación del lenguaje HTML. Si ya hemos hablado sobre elementos estructurales y los microformatos y algunos nuevos elementos de texto, hoy vamos a profundizar aún más en las diferentes categorías de contenido que se especifican en HTML5.

Modelos de Contenido

En versiones anteriores de la especificación, los elementos se dividían en dos categorías: inline y block. En la nueva especificación del lenguaje, se usa una jerarquía mucho más amplia dividiéndose estos en un mayor número de categorías

Los elementos inline ahora tienen un modelo de contenido llamado “text-level semantics” o semántica a nivel de texto en la lengua del imperio. Muchos de los antiguos elementos block se encuentran ahora bajo la denominación de “grouping content” o contenidos de agrupación. Estos son las listas, los divs y los párrafos entre otros.

Leer más

Anteriormente hice un avance de lo que la nueva web semántica nos depara con la nueva especificación de HTML5. Hoy vamos a profundizar un poco más en el tema y vamos a hacer un repaso por los nuevos elementos de estructuración de nuestros documentos HTML.

Elementos estructurales

Durante muchos años, hemos utilizado div con clases específicas para definir —por regla general— un header, un footer, navs y otras entidades muy comunes al desarrollo de cualquier sitio web.

Era de esperar que algún día, todas esas entidades formaran parte del lenguaje y ese día es hoy gracias a la nueva especificación del lenguaje HTML5.

Leer más

Como ya sabéis, en HTML tenemos una gama bastante limitada de elementos para construir la estructura de nuestros sitios web. Tenemos elementos para construir listas, párrafos, abreviaciones, enlaces, tablas, divisiones… Pero no tenemos nada para construir noticias, historias o recetas por ejemplo.

Otros lenguajes de marcas como XML nos ofrecen la posibilidad de crear todos los elementos que necesitemos. Así que si necesitamos un elemento receta solo tenemos que crearlo. El único problema es que también tendremos que crear un parseador que sepa lo que el elemento receta significa. En HTML tenemos una serie de elementos limitados a nuestra disposición. Esos elementos, están implementados en los navegadores que saben interpretarlos. Si pudiésemos crear nuestros propios elementos, sería un absoluto caos.

HTML provee de un mecanismo que facilita a los diseñadores web el añadir más nivel de semántica a través del atributo class que nos permite etiquetar instancias específicas de un elemento como un tipo o clase especial de ese elemento. Los navegadores no entienden lo que añadimos en el atributo class así que no afecta lo más mínimo en el renderizado de la página. Efectivamente, las clases no solo sirven para el CSS y para el JavaScript, si las clases siguen una convención adecuada en sus nombres, pueden ser usadas para más cosas

Leer más

En esta introducción a los formularios de HTML5 II de hoy, vamos a introducir varios atributos de los Web Forms 2.0 que ayer se nos quedaron en el tintero en la primera parte de este artículo dentro de la serie Introducción a HTML5.

Ayer hablábamos sobre la inclusión de los atributos placeholder, autofocus y autocomplete y de como usarlos en nuestros formularios de HTML5. También veíamos como definir una función en JavaScript que se encargara de averiguar si un elemento soporta esos atributos para poder ofrecer la misma experiencia de usuario a aquellos navegadores que no soportan aún la nueva especificación.

Para que no tengas que estar mirando el post anterior para recordar esa función voy a reproducirla en esta nueva entrada y entramos en materia con los nuevos atributos:

function elSupports(el, attr) {
    var telement = document.createElement(el);
    if (attr in telement) {
        return true;
    } else {
        return false;
    }
}

Leer más

En el post de hoy voy a hacer una introducción a los formularios de HTML5 que vienen con muchas nuevas funcionalidades pensadas para solucionar problemas cotidianos de forma declarativa con la nueva especificación del lenguaje.

Aunque hemos dedicado los primeros artículos sobre la nueva especificación del lenguaje HTML a hablar de las etiquetas relacionadas con el mundo multimedia, no solo de multimedia vive el desarrollador y en la nueva especificación se trata de forma estrecha la mejora de los formularios web para hacerlos más asequibles y sencillos de utilizar.

En esta introducción a los formularios de HTML5 vamos a hablar de varias de las novedades que atañen a los cambios más significativos a la hora de generar formularios y en siguientes entregas de éste mismo artículo hablaremos sobre el resto. Los cambios son bastantes y un solo artículo no da para describirlos todos en detalle por lo que dividiré éste artículo en varios.

Leer más

Hoy voy a hacer una introducción al elemento video de HTML5. Como ya sabéis, la nueva especificación de HTML5 incluye la nueva etiqueta video con la que se puede empotrar archivos de vídeo de forma nativa en nuestros proyectos web sin necesidad de plugins adicionales.

Con el aumento del ancho de banda, los contenidos de vídeo han ido aumentando de forma vertiginosa hasta convertirse en una de las mayores necesidades de ancho de banda en la red. El método por excelencia a la hora de reproducir vídeo a través de un navegador ha sido utilizar el plugin de Flash. Mucho ha tenido que ver la industria del porno primero y YouTUBE después en esa decisión. Usar el plugin de flash no es la única vía, se puede usar también Silveright ya que no tiene complejidad alguna utilizar dicha plataforma para generar contenido multimedia. Por supuesto, todo eso va a cambiar con la llegada de HTML5.

Como siempre y para no perder la costumbre, existe una guerra entre fabricantes de navegadores sobre que formato de vídeo debe de ser el estándar para la nueva especificación y por supuesto no todos reproducen los mismos formatos de forma nativa

Leer más

Hoy voy a hacer una pequeña introducción al elemento audio de HTML5 que como ya todos sabéis, forma parte de la nueva especificación de HTML5 y nos permite empotrar archivos de audio en nuestros proyectos web sin necesidad de utilizar plugins adicionales como Flash.

El nuevo elemento permite el uso de diferentes formatos de archivo puesto que los formatos que soportan los diferentes navegadores no son parte del estándar sino que depende de la implementación de cada fabricante. Puedes guiarte con esta tabla para comprobar que formatos soportan los navegadores más usados de forma nativa:

Tanto en Safari como en Chrome, algunos formatos dependen de Quicktime y ffmpeg respectivamente. Chrome realmente no soporta todos los formatos de forma nativa, tan solo Vorbis y MP3, por el contrario, si compilamos Chromium con soporte para ffmpeg si estarán disponibles todos esos formatos de forma nativa a través de ffmpeg, de ahí la cursiva.

Leer más

Como prometí anteriormente, en el post de hoy voy a hacer una introducción al elemento canvas de HTML5 profundizando un poco en sus características, sus virtudes y sus defectos.

El elemento canvas puede definirse como un entorno para crear imágenes dinámicas. El propio elemento es relativamente simple. Lo único que hay que especificar al usarlo son sus dimensiones:

<canvas id="entorno_canvas" width="360" height="240">;
</canvas>

Cualquier cosa que escribamos entre la apertura y cierre de la etiqueta canvas solamente será interpretado por navegadores que no soportan aún la nueva etiqueta.

Leer más

Hoy voy a hacer una breve introducción a la especificación HTML5. Ya sabes que la especificación de HTML5 es la más potente que se conoce hasta ahora y que permite cosas tan maravillosas como empotrar vídeo y audio de forma nativa sin necesidad de plugins adicionales que dejarán de ser necesarios. En este post solo introduciremos algunos de los nuevos elementos de la nueva especificación, en próximas entregas ahondaremos en cada uno de ellos.

La web de hoy en día no sería lo que es si no fuera por la innovadora inclusión del elemento img el 22 de Septiembre de 1995 en la especificación de HTML 2.0. Se lo que estás pensando, y si, efectivamente, tampoco sería lo que es sin la inestimable ayuda de la industria del porno que ha estado siempre en la cúspide de la innovación, pero eso es harina de otro costal y además da para escribir uno o varios posts al respecto.

El caso es que hasta la introducción del elemento img que posibilitaba la inclusión de imágenes en la web, ésta, no había tenido gran éxito fuera del ámbito académico y científico. Eso junto la adición del lenguaje de lado cliente JavaScript fue lo que hizo que la web fuera lanzada y poco a poco fuera convirtiéndose en el referente de lo que la abstracta palabra Internet significa. Hoy en día, la web es un sitio maravilloso donde procrastinar como campeones y navegar como jamás Chanquete lo hubiera siquiera imaginado.

Leer más