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