¿Qué es el HTML5 shiv?

HTML5 shiv es algo que se escucha mucho a la hora de hacer un sitio web usando HTML5.

Si el sitio que estás haciendo solo debe funcionar en navegadores más avanzados como los que usan Webkit (Chrome, Safari, etc) o Firefox, entonces no es necesario que sigas leyendo esto… a no ser que tu sitio en HTML5 requiera de ser correctamente interpretado por Internet Explorer.

IE no reconoce los nuevos elementos del HTML5 (article, section, etc), es por esto que para que los mismos se visualicen correctamente estilizados en el mencionado navegador, es necesario crearlos mediante javascript.

La solución es bastante simple, tienes que poner el siguiente código en el head de tu sitio:

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Cada vez hay menos excusas para empezar a usar HTML5 en nuestros sitios!

Read more »

Traducción de “HTML 5 + XML = XHTML 5″

HTML 5 Doctor es un excelente sitio en inglés en el cual varios expertos escriben sobre este lenguaje. La verdad que vale la pena leer el total de sus artículos ya que son muy interesantes y útiles.

Bruce Lawson es uno de estos gurús, trabaja en la parte de Estándares Web Abiertos para Opera, también es miembro de la “Web Standards Project´s Accesibility Task Force” y de el “W3C Mobile Best Practices Working Group”. El escribe en su blog: www.brucelawson.co.uk y también en www.html5doctor.com.

Bruce muy amablemente me dió el permiso para publicar una traducción de su artículo llamado “HTML5 + XML = XHTML 5” publicado el 2 de julio de 2009 en HTML5 Doctor. Así que ¡muchas gracias Bruce!.
Traducción

Me gusta la sintaxis del XHTML. Es como lo aprendí. Estoy acostumbrado al código en minúsculas, atributos entre comillas y a las barras en elementos como el br y el img. Me hacen sentir bien y cómodo, como una taza de “Ovaltine” y “The Evil Dead” en la tele.

Pero puede que a ti no. Puede ser que tu quieras etiquetas en MAYÚSCULAS, código sin barras y atributos sin comillas. Y, en HTML 5 puedes elegir.

Gracias al principio de “pave the cowpaths“(destino del enlace en inglés; la traducción literal sería algo así como “asfaltar el camino de las vacas”, pero el significado refiere a reutilizar lo que ya se está utilizando si no me equivoco), todo depende de ti. Cómo a ti te guste. Lo que tu quieras, lo que a ti te guste.

Pero no dejes que nadie te diga que el HTML 5 mata al XML, conoce al XHTML 5. XHTML 5 es la serialización XML del HTML 5 y, cómo podrás imaginar, tiene todas las reglas estrictas de parseo que tu esperarías (y estás acostumbrado si, como yo, creciste con los XHTML DOCTYPES). Debe ser servido con un tipo MIME XML, como application/xml o application/xhtml+xml (o sea que Internet Explorer no lo interpretará por el momento) y será frágil ante la violación más sutil al código bien formado. (Ve “Sirviendo XHTML con el tipo MIME correcto” (destino del link en inglés) para más información).

Las reglas habituales de XML aplican: no se permiten “document.writes“, no se requiere un DOCTYPE, algunas diferencias en sintaxis y script para ser cautos y puedes usar namespaces.

Las diferencias principales están resumidas en la wiki oficial de WHATWG, “Diferencias entre HTML y XHTML” (destino del link en inglés). También es posible escribir documentos poliglotas (destino en inglés) que pueden ser procesados por los navegadores, dependiendo del tipo MIME utilizado.

Magne le envió un correo a html5Doctor.com preguntando: “¿es correcto usar etiquetas del HTML5 en una página con el DOCTYPE de XHTML 1.1? ¿Cuál debería usar, qué es lo recomendado ahora?

Si deseas aplicar las nuevas características, necesitas usar el DOCTYPE para HTML5 o XHTML5. Debido a que Internet Explorer no puede procesar XML, por razones pragmaticas la gente de HTML 5 Doctor recomienda usar HTML 5.

Bueno, espero que te haya gustado el artículo traducido, si encontrás algún error, falla o algo mal traducido, por favor, házmelo saber.

Read more »

Nuevos tipos de input en HTML5

Dentro de la gran cantidad de novedades que nos ofrece el HTML5, una muy interesante son los nuevos valores para el atributo type del elemento input.

Estos nuevos tipos de campos hacen que los navegadores adopten distintos comportamientos que, sin dudas, nos van a hacer la vida más fácil a los desarrolladores de sitios web.

Así como actualmente tenemos el conocido password que oculta la contraseña con asteriscos o círculos (dependiendo del navegador); ahora contamos con el nuevo search que presenta una pequeña cruz para poder borrar su contenido; o también el nuevo campo numérico number que muestra dos flechas (hacia arriba y hacia abajo) para aumentar o disminuir el valor del número.

Algo muy importante a tener en cuenta es que si bien estos elementos todavía no son soportados por todos los navegadores modernos, el uso de los mismos no afectará de ningún modo en los navegadores que no los soporten, actuarán simplemente como si fuesen del tipo text.

Ejemplos de los nuevos atributos

A continuación los distintos valores, recuerda que solo verás los nuevos comportamientos si estás utilizando algún navegador moderno (últimas versiones de Chrome, Firefox, Safari, Opera o IE).

Read more »

5 grandes nos enseñan HTML5: Mozilla, Google, Apple, Facebook y Opera

A esta altura es inconmensurable la cantidad de información que existe en la web sobre HTML5. Existen múltiples recursos en línea para que aprendamos cada detalle sobre el mismo, desde blogs personales a grandes portales de tecnología. A continuación te mostramos 5 grandes compañías dentro del mundo de internet que quieren que aprendamos todo sobre HTML5, CSS3 y nuevas tecnologías.
 
Mozilla

Mozilla es el único de esta lista que ofrece contenido enteramente en español. Y por suerte hay unos cuántos artículos y tutoriales. Su sitio es muy recomendable tanto si recién empiezas como si tienes algo de experiencia.

HTML5Rocks de Google

HTML5Rocks.com es el sitio que nos ofrece Google, con varios artículos y secciones como son las diapositivas, los tutoriales paso a paso y varias cosas más que encontrarás en su sitio: HTML5Rocks.com.
 
Apple

La compañía del reciente fallecido Steve Jobs apostó y apuesta mucho por el HTML5 con decisiones como no soportar más flash en su iPhone y iPad. Así es que esta empresa también tiene su sección de HTML5 con demos muy interesantes y diversos recursos.

Facebook HTML5 Resource Center

La red social más popular anunció recientemente su sección sobre HTML5 en la cual tienen tanto información para principiantes como para niveles más avanzados.
 
Opera

Opera no se queda atrás y también posee mucho contenido sobre HTML5 en su sección denominada Open Web, dentro de su portal de desarrolladores.

Espero te sirva esta lista y si sabes de alguna otra gran compañía que ofrezca recursos sobre HTML5 házmelo saber.

Read more »

La etiqueta meta viewport en la web móvil

La etiqueta meta para el viewport fue introducida por Apple en Safari para móviles, para ayudar a los desarrolladores a mejorar la presentación de sus aplicaciones web en un iPhone, iPod Touch o iPad. A continuación una breve explicación y un video muy descriptivo.

La etiqueta viewport nos permite a los que construimos sitios web o web apps, definir el ancho, alto y escala del área usada por el navegador para mostrar contenido.

Al fijar el ancho o alto del viewport, los desarrolladores podemos usar un número fijo de pixeles (ej: 320, 480, etc) o usar dos constantes, device-width y device height respectivamente.Se considera una buena práctica configurar el viewport con algunas de estas dos constantes, en vez de un ancho o alto fijo. Muchos desarrolladores caen en el error de configurar el viewport con un width de 320, siendo este el ancho del iPhone. Utilizando las constantes, se verá de mejor forma no solo en el iPhone sino que en muchos “mobile browsers” más. A continuación la configuración más común de una etiqueta meta, para introducir dentro del head de tu mobile web app:
1
   
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Más abajo les dejo un video corto pero muy explicativo de la meta tag para definir el viewport. El que habla en el video es Maximiliano Firtman, autor (entre muchas cosas) de varios libros relacionados al desarrollo web, entre ellos recomiendo el libro Programming the Mobile Web, donde se puede leer mucho más de la mobile web y web apps, muy bueno. También les sugiero que lo sigan en Twitter en @firt).

Dentro de esta temática, Maximiliano creó el sitio Mobile HTML5, que ayuda a entender la compatibilidad de HTML5 en navegadores mobile y tablets.

Read more »

¿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 »

HTML5 Mejoras en los formularios

El elemento input adquiere gran relevancia al ampliarse los elementosque se permitiran en el “type”.
· <input type="search"> para cajas de búsqueda.
· <input type="number"> para adicionar o restar números mediante botones.
· <input type="range"> para seleccionar un valor entre dos valorespredeterminados.
· <input type="color"> seleccionar un color.
· <input type="tel"> números telefónicos.
· <input type="url"> direcciones web.
· <input type="email"> direcciones de email.
· <input type="date"> para seleccionar un día en un calendario.
· <input type="month"> para meses.
· <input type="week"> para semanas.
· <input type="time"> para fechas.
· <input type="datetime"> para una fecha exacta, absoluta y tiempo.
· <input type="datetime-local"> para fechas locales y frecuencia.

Read more »

HTML5 Mejor estructura

Actualmente es abusivo el uso de elementos DIV para estructurar una web en bloques. El HTML5 nos brinda varios elementos que perfeccionan esta estructuración estableciendo qué es cada sección, eliminando así DIV innecesarios. Este cambio en la semántica hace que la estructura de la web sea más coherente y fácil de entender por otras personas y los navegadores podrán darle más importancia a según qué secciones de la web facilitándole además la tarea a los buscadores, así como cualquier otra aplicación que interprete sitios web. Las webs se dividirán en los siguientes elementos:


<section></section>

Se utiliza para representar una sección “general” dentro de un documento o aplicación, como un capítulo de un libro. Puede contener subsecciones y si lo acompañamos de h1-h6 podemos estructurar mejor toda la página creando jerarquías del contenido, algo mu favorable para el buen posicionamiento web.


<article></article> - El elemento de artículo representa un componente de una página que consiste en una composición autónoma en un documento, página, aplicación, o sitio web con la intención de que pueda ser reutilizado y repetido. Podría utilizarse en los artículos de los foros, una revista o el artículo de periódico, una entrada de un blog, un comentario escrito por un usuario, un widget interactivo o gadget, o cualquier otro artículo independiente de contenido.

Cuando los elementos de
<article> son anidados, los elementos de <article> interiores representan los artículos que en principio
son relacionados con el contenido del artículo externo. Por ejemplo, un artículo de un blog que permite comentarios de
usuario, dichos comentarios se podrían representar con <article>.

<aside></aside> - Representa una sección de la página que abarca un contenido tangencialmente relacionado con el contenido que lo rodea, por lo que se le puede considerar un contenido independiente. Este elemento puede utilizarse para efectos tipográficos, barras laterales, elementos publicitarios, para grupos de elementos de la navegación, u otro contenido que se considere separado del contenido principal de la página.


<header></header> - Elemento <header> representa un grupo de artículos introductorios o de navegación.

<nav></nav> - El elemento <nav> representa una sección de una página que es un link a otras páginas o a partes dentro de la
página: una sección con links de navegación.

No todos los grupos de enlaces en una página tienen que estar en un elemento <nav>, sólo las secciones que consisten en bloques principales de la navegación son apropiadas para ser utilizadas con el elemento <nav>. Puede utilizarse particularmente en el pie de página para tener un menú con un listado de enlaces a varias páginas de un sitio, como el Copyright; home page, política de uso y privacidad. No obstante, el elemento <footer> es plenamente suficiente sin necesidad de tener un elemento <nav>.

<footer></footer> - El elemento <footer> representa el pié de una sección, con información acerca de la página/sección que
poco tiene que ver con el contenido de la página, como el autor, el copyright o el año.

Read more »

HTML5 Introduccion

El HTML5 (HyperText Markup Language, versión 5) es la quinta revisión

del lenguaje de programación “básico” de la World Wide Web, el HTML.

Esta nueva versión pretende remplazar al actual (X)HTML, corrigiendo

problemas con los que los desarrolladores web se encuentran, así como

rediseñar el código actualizandolo a nuevas necesidades que demanda la

web de hoy en día.

Debido a que estos cambios afectaran la forma de desarrollar la web en

un futuro inmediato, desde The Process, plantearemos una serie de

artículos donde desvelaremos los cambios más importantes.

Actualmente el HTML5 está en un estado BETA, aunque ya algunas

empresas están desarrollando sus sitios webs en esta versión del

lenguaje. A diferencia de otras versiones de HTML, los cambios en HTML5

comienzan añadiendo semántica y accesibilidad implícitas, especificando

cada detalle y borrando cualquier ambigüedad. Se tiene en cuenta el

dinamismo de muchos sitios webs (facebook, twenti, etc), donde su

aspecto y funcionalidad son más semejantes a aplicaciones webs que a

documentos.

Read more »