¿Qué es HTML5 Boilerplate?

Seguramente hayas leído el nombre de HTML5 Boilerplate (o H5BP) en Twitter. Pero, como tantos otros temas, lo dejaste pasar pensando “esto es solo otro proyecto más” de los cientos (¿miles?) basado en HTML5. Pero este proyecto no es “uno más”, te conviene saber al menos de que se trata ya que te puede llegar a ser de gran utilidad.

HTML5 Boilerplate nos ofrece simplificar el proceso de construcción de sitios web en HTML5 y para ello nos permite descargar una especie de template o plantilla que puede ayudar no solo a los desarrolladores web novatos, sino también a los más experientes.

Con H5BP podemos obtener código del mejor (está desarrollado por gurus como Paul Irish) para: normalización para todos los navegadores (cross-browsing), optimización de performance, optmizaciones para navegadores en dispositivos móviles, clases específicas para IE, clases “no-js” y “js” para estilos basados en capacidades del navegador, un archivo .htaccess que permite el uso correcto de características HTML5 y carga de página más rápida, y mucho más; todo hecho teniendo en cuenta las mejores prácticas de hoy en día en el desarrollo web.

Incluso aunque no lo vayas a usar, puede ser algo muy instructivo el solo hecho de ver cómo está desarrollado.

Al visitar el sitio tienes 3 opciones: descargar la versión comentada y explicada, descargar la versión sin comentarios o la opción de personalizar lo que descargues.

Si quieres aprender, te recomiendo que te descargues la primer versión. El sitio es: HTML5boilerplate.com que está en inglés, aunque por suerte también está la versión en castellano.

Read more »

HTML5 Nuevas APIs y Javascript

API para hacer Drag & Drop. Mediante eventos.

API para trabajar Off-Line. Permite descargar todos los contenidos necesarios y trabajar en local.

API de Geoposicionamiento para dispositivos que lo soporten.

API Storage. Facilidad de almacenamiento persistente en local, con bases de datos (basadas en SQLite) o con almacenamiento de objetos por aplicación o por dominio Web (Local Storage y Global Storage). Se dispone de una Base de datos con la posibilidad de hacer consultas SQL.

WebSockets. API de comunicación bidireccional entre páginas. Similar a los Sockets de C.

WebWorkers. Hilos de ejecución en paralelo.

ESTÁNDAR FUTURO. System Information API. Acceso al hardware a bajo nivel: red, ficheros, CPU, Memoria, puertos USB, cámaras, micrófonos … muy interesante pero con numerosas salvedades de seguridad.

Read more »

HTML5 Novedades

Incorpora etiquetas (canvas 2D y 3D, audio, video) con codecs para mostrar los contenidos multimedia. Actualmente hay una lucha entre imponer codecs libres (WebM + VP8) o privativos (H.264/MPEG-4 AVC).

Etiquetas para manejar grandes conjuntos de datos: Datagrid, Details, Menu y Command. Permiten generar tablas dinámicas que pueden filtrar, ordenar y ocultar contenido en cliente.

Mejoras en los formularios. Nuevos tipos de datos (eMail, number, url, datetime …) y facilidades para validar el contenido sin Javascript.

Visores: MathML (fórmulas matemáticas) y SVG (gráficos vectoriales). En general se deja abierto a poder interpretar otros lenguajes XML.

Drag & Drop. Nueva funcionalidad para arrastrar objetos como imágenes.

Read more »

HTML5 en navegadores antiguos que no lo soportan

Una pregunta muy común en estos tiempos es: “¿Cómo puedo empezar a utilizar HTML5 si existen navegadores antiguos que no lo soportan?” Pero la pregunta en sí se ha formulado de forma errónea. El HTML5 no es una cosa grande como un todo, sino una colección de elementos individuales, por consiguiente lo que sí se podrá será detectar si los navegadores soportan cada elemento por separado.

Cuando los navegadores realizan un render de una página, construyen un “Modelo de Objeto de Documento” (Document Object Model - DOM), una colección de objetos que representan los elementos del HTML en la página. Cada elemento - <p>, <div>, <span> - es representado en el DOM por un objeto diferente.

Todos los objetos DOM comparten unas características comunes, aunque algunos tienen más que otros. En los navegadores que soportan rasgos del HTML5, algunos objetos tienen una única propiedad y con una simple ojeada al DOM podremos saber las características que soporta el navegador.

Existen cuatro técnicas básicas para saber cuando un navegador soporta una de estas particulares características, desde las más sencillas a las más complejas.

1. Comprueba si determinadas propiedades existen en objetos genéricos o globales (como window o navigator).
Ejemplo: comprobar soporte para la “Geolocalización”.

2. Crear un elemento, luego comprobar si determinadas propiedades existen en ese elemento.
Ejemplo: comprobar soporte para canvas.

3. Crear un elemento, comprobar si determinados métodos existen en ese elemento, llamar el método y comprobar los valores que devuelve.
Ejemplo: comprobar qué formatos de video soporta.

4. Crear un elemento, asignar una propiedad a determinado valor, entonces comprobar si la propiedad mantiene su valor.
Ejemplo: comprobar que tipo de <input> soporta.

MODERNIZR, una biblioteca para detectar HTML5.

Modernizr es una librería de JavaScript con licencia MIT de código abierto que detecta si son compatibles muchos elementos para HTML5 y CSS3. Dicha librería se irá actualizando y para utilizarla solo hay que incluir en <head><script> de tu página.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dive Into HTML5</title>
<script src="modernizr.min.js"></script>
</head>
<body>
...
</body>
</html>

Modernizr se ejecuta automáticamente, no es necesario llamar a ninguna función tipo: modernizr_init(). Cuando se ejecuta, se crea una objeto global llamado Modernizr, que contiene un set de propiedades Boleanas para cada elemento que detecta. Por ejemplo si su navegador soporta elementos canvas, la propiedad de la librería Modernizr.canvas será “true”. Si tu navegador no soporta los elementos canvas, la propiedad Modernizr.canvas será “false”.
if (Modernizr.canvas) {
// a crear formas!!
} else {
// no hay soporte para canvas, los siento

Read more »

HTML5 Otros Elementos Muy Interesantes

<audio> y <video> - Nuevos elementos que permitirán incrustar un contenido multimedia de sonido o de vídeo, respectivamente. Es una de las novedades más importantes e interesantes en este HTML5, ya que permite reproducir y controlas vídeos y audio sin necesidad de plugins como el de Flash.

El comportamiento de estos elementos multimedia será como el de cualquier elemento nativo, y permitirá insertar en un video, enlaces o imágenes, por ejemplo. Youtube, ya ha anunciado que deja el Flash y comienza a proyectar con HTML5.

<embed> - Se emplea para contenido incrustado que necesita plugins como el Flash. Es un elemento que ya reconocen los navegadores, pero ahora al formar parte de un estándar, no habrá conflicto con <object>.

<canvas> - Este es un elemento complejo que permite que se generen gráficos al hacer dibujos en su interior. Es utilizado en Google Maps y en un futuro permitirá a los desarrolladores crear aplicaciones muy interesantes.

Read more »