HTML5 Rocks, la referencia oficial de Google

Google acaba de presentar un nuevo sitio, HTML5 Rocks, un estupendo recurso y referencia para desarrolladores interesados en usar HTML5 hoy mismo.

HTML5 Rocks

Básicamente, HTML5 Rocks está dividido en cuatro secciones:

  • Presentation. Presentación Interactiva que ncluye varios ejemplos con los que puedes jugar para conocer más a fondo a HTML5.
  • Playground. Editor en línea con el que podrás escribir, editar y ejecutar código HTML5, todo en la misma interfaz.
  • Tutorials. Guías paso a paso de cómo utilizar características específicas de HTML5.
  • Resources. Galería de enlaces de recursos externos sobre HTML5, CSS3, etc.

Es notable el respaldo que Google le está dando a HTML5, y este nuevo sitio es muestra de ello. Si eres desarrollador, ya tienes un nuevo enlace obligado para agregar a tus marcadores (bookmarks).

Fuente: Google Code Blog y The Chromium Blog.

Sencha Touch

Hace un par de días, el asombroso Ext JS se unió con jQTouch y Raphaël para conformar Sencha. ¡Qué rápido liberaron su primer producto! Su nombre: Sencha Touch. Se trata del primer framework HTML5 multi plataforma para desarrollar aplicaciones web especiales para dispositivos móviles.

Sencha Touch

¿Qué incluye Sencha Touch? Una completa librería de widgets de interfaz de usurario, manejo total de eventos “touch” con transiciones CSS3, así como un paquete de datos accesible via AJAX, JSONp o YQL.

¿Qué puedo desarrollar con Sencha Touch? Aquí una galería de ejemplos; recomendamos usar algún navegador basado en Webkit (como Chrome, Safari o el nuevo Flock), por aquello de las transiciones.

¿Interesados? Pueden entrar al sitio de Sencha Touch para leer más al respecto, ver demos y, por supuesto, descargar este asombroso framework.

Fuente: Sencha Blog.

Amar a HTML5 y CSS3 es odiar a Internet Explorer

IE BasuraSin lugar a dudas, HTML5 y CSS3 han llegado para facilitarle la vida a los diseñadores y desarrolladores web, lo cual conlleva una mejor experiencia del usuario final.

Con HTML5 podemos insertar audio y video en nuestras páginas sin necesidad de plugins de terceros (como Flash), generar gráficas y textos dinámicos a través del manejo de canvas, implementar en esquema más claro a través de sus nuevas etiquetas (header, nav, section, footer, etc), entre otras cosas.

Con CSS3 podemos crear diseños web asombrosos incluso sin la necesidad de recurrir a imágenes, gracias a sus esquinas redondeadas, sombras para textos y bloques, degradados de colores, inclusión de fuentes (tipos de letras) no estándares, entre otros muchos beneficios.

Con tanta belleza tenía que existir un “pero“… y se llama Internet Explorer. Y no sólo me refiero al mundialmente odiado IE6, si no también a IE7 e IE8.

En el estupendo sitio “When can I use…” nos ofrece un análisis detallado de todas y cada una de las características de HTML5 y CSS3 en los navegadores web más populares, en sus versiones pasadas, presentes, e incluso futuras. La siguiente tabla es el resumen global de dicha comparación; en cada celda podemos observar el número de versión del navegador web, junto al porcentaje de características HTML5 y CSS3 soportados; los colores hablan por si mismos.

Tabla comparativa de Navegadores

Como referencia, las versiones estables actuales de cada navegador son: Internet Explorer 8.0, Firefox 3.5 (a pocos días de la liberación de Firefox 3.6), Safari 4, Chrome 3.0 y Opera 10.10.

Enseguida nos damos cuenta que Firefox, Chrome y Safari son los que mejor soportan a HTML5 y CSS3, mientras que Internet Explorer literalmente está para llorar. En el caso de Opera, es una tristeza que siendo un buen navegador tenga un soporte tan mediocre.

¿La tabla anterior les parece demasiado genérica? Ok, veamos a profundidad qué características de HTML5 y CSS3 soportan los navegadores estables actuales.

Firefox 3.5

Firefox 3.5

Aquí es justo mencionar que Firefox 3.6 (actualmente en Beta 4, cuya versión final debe ser liberada este mes) ya ofrece soporte para más características de CSS3, como los gradientes y fondos múltiples.

Chrome 3

Chrome 3

Safari 4

Safari 4

Opera 10

Opera 10

Internet Explorer 6, 7 y 8

Internet Explorer

Las imágenes anteriores fueron elaboradas por Deep Blue Sky, usando su estupenda librería Modernizr, a través de FindmebyIP, donde tú mismo puedes verificar qué características de HTML5 y CSS3 soporta tu navegador web.

¿Lo malo? La gran mayoría de usuarios sigue usando Internet Explorer… ¿lo peor? Microsoft no ha ofrecido grandes expectativas para soportar decentemente HTML5 y CSS3 en el próximo IE9. ¿Qué podemos hacer nosotros como desarrolladores y diseñadores web? ¡dejar de dar soporte a IE! Así de sencillo, pues si seguimos haciéndolo, jamás los usuarios se sentirán obligados a migrar a un navegador web de calidad.

Por el lado dónde lo quieran observar, amar a HTML5 y CSS3 es odiar a Internet Explorer.

El DocType de HTML5

Una de las cosas que más he odiado al momento de empezar a escribir el código HTML de alguna página web, es el tener que “copiar y pegar” el DocType de alguna otra página y/o referencia web, pues es prácticamente imposible recordar todo de memoria. Aquí el ejemplo de un encabezado típico XHTML 1.0 Strict , así como la definición de la codificación de caracteres:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

Demasiado engorroso, ¿verdad? Pero hoy las cosas son muy diferentes; ahora con HTML5, todo lo anterior se resume a lo siguiente:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>

¡Excelente! Ahora no habrá necesidad de recurrir a alguna referencia de DocType para copiarla y pegarla, pues la nueva definición es sumamente sencilla de aprender y utilizar. Lo mejor de todo, es que dicha definición es compatible con las versiones anteriores de HTML y XHTML.

¿Cómo? ¿No sabes qué es y para que sirve el DocType? Ok, veamos lo básico. El DocType realmente tiene una doble finalidad:

  • Le indica al browser (navegador web) que use el “standard mode“, en otras palabras, le indica que no active el “quirks mode“; de esta forma, el browser realizará el renderizado de la página web de manera correcta. Esto es válido en todos los navegadores modernos, incluso (asombrosamente) en IE6.
  • Le indica a los validadores de código, cuál versión del estándar utilizar para realizar la validación correspondiente.

Si quieren profundizar sobre el tema, los invito a leer los detalles sobre el DocType en la especificación oficial de HTML5.

Referencias: Mark McAulay, Quackit, Supermighty, John Resig.

W3C cancela XHTML 2 (en favor de HTML 5)

Era de esperarse, después de mucho tiempo de debate entre cuál sería el futuro estándar entre XHTML2 o HTML5, todo indicaba extraoficialmente que HTML5 era la respuesta, pero ahora la W3C lo ha hecho oficial, ha decidido cancelar el grupo de trabajo de XHTML2 para finales de este año, en favor de darle más empuje a HTML5 (gracias a Andrés Nieto por el aviso).

En lo particular, me emociona el camino de HTML5, y el hecho de que ya se está empezando a trabajar activamente sobre él; ya es una realidad y debemos conocerlo… ¡y usarlo! Por ejemplo, en la siguiente imagen podemos observar los cambios radicales entre el HTML “normal” (HTML 4.1 o XHTML 1.0) y el nuevo HTML5.

html5-estructura

Imagen tomada de AnexoM

Pero hay que tener cuidado, pues no todos los navegadores web soportan HTML5 (si, adivinaron, Internet Explorer, incluso en su nueva versión 8, es el único browser – de entre los más populares – que no soporta aún HTML5); pero no todo está perdido, ya que podemos utilizar trucos en JavaScript para que IE “reconozca” la existencia de tags como <header>, <nav>, <article>, <section>, <aside> y <footer>, entre otros.

Transformaciones 3D en Firefox 3.5

¿Ya usas Firefox 3.5 verdad? Entonces, ya puedes disfrutar, entre otras muchas cosas, de la propiedad CSS -moz-transform, con la cual podemos crear diseños 3D como el que tenemos a continuación (den click sobre la imagen para abrir el demo).

isocube

¡Recuerda! Si no estás usando Firefox 3.5, no podrás ver el demo correctamente. En el demo, de nombre “isocube“, podemos ver como la propiedad -moz-transform es usada para simular un cubo y un plano horizontal, en donde cada cada del cubo, y el plano mismo tienen elementos HTML típicos (texto, botones e incluso un video .ogg).

Este es un ejemplo que, usando las nuevas herramientas HTML5 y un poco de imaginación, podemos lograr cosas verdaderamente sorprendentes en la web.

Vía Mozilla Hacks.

HTML 5 – El Futuro de la Web, Hoy.

Desde hace tiempo tenía la duda sobre el futuro estándar del HTML, pues ambas vertientes XHTML 2 y HTML 5 tenían fortalezas importantes. Pero el camino es claro ahora, y gracias al evento Google I/O 2009 ya conocemos hacia dónde debemos enfocarnos los desarrolladores web: HTML 5.

html

No sólo la gente de Google lo dice, pues en la keynote inaugural del evento, pudimos escuchar incluso a personalidades importantes de Mozilla y Palm hablar sobre ello.

Aquí quisiera hacer un paréntesis. Me sentí sumamente complacido al observar como Google demostró su apertura a la libre competencia, pues el invitar a Mozilla (Firefox es competencia directa para Chrome) y a Palm (WebOS es competencia directa para Android) habla muy bien de ellos. ¡Ovación de pie para Google! Ya quisiera ver algo similar en un evento de Microsoft, e incluso en uno de Apple.

Regresando al tema, entre las características más importantes (no son las únicas) del HTML 5, podemos mencionar:

  • Canvas. Esta característica permite dibujar desde gráficas arbitrarias hasta juegos y aplicaciones en 3D, usando sólo JavaScript, sin necesidad de addons o plugins de terceros (adiós Adobe Flash, adiós Java Applets).
  • Audio y Video. Estas nuevas etiquetas permitirán la inserción directa de contenido multimedia en nuestras páginas web, sin necesidad de depender, como mencioné anteriormente, de plugins o agregados especiales. Todo la interactividad se manejará por medio de JavaScript.
  • Geolocalización. Característica importante para nuestro mundo moderno, donde conocer nuestra ubicación exacta cada vez se vuelve una prioridad, no sólo para nosotros, si no para diversas aplicaciones.
  • AppCache y Bases de Datos. ¿Aplicaciones web offline con conexiones a bases de datos? ¡ahora totalmente posible! Sobre este tema estaré sumamente pendiente y ya les comentaré en el futuro.
  • Web workers. Esta característica permitirá ejecutar procesos en el background, para evitar cuelgues innecesarios de nuestras aplicaciones. Prácticamente, los browsers serán los “nuevos” sistemas operativos.

No son las únicas características, pero son las que sobresalen entre la avalancha de novedades de HTML 5.

¿Qué browsers soportan HTML 5? Las últimas versiones en desarrollo de los principales navegadores web: Firefox 3.5 Beta, Chrome 3.0 Beta, Opera 10 Beta y Safari 4 Beta. ¿Y qué sucede con Internet Explorer? Los de Microsoft “dicen” que pronto soportarán HTML 5… citando a Vic Gundotra (vicepresidente de ingeniería de Google, durante la keynote): “esperamos impacientemente evidencia de ello” (¡Ja!).

Así es, mis estimados colegas desarrolladores, el futuro de la Web está en manos de HTML 5 además de, por supuesto, CSS 3 y JavaScript.

Lecturas recomendas:

Google Chrome 3.0 Beta

Avalancha de noticias sobre Google en las últimas 48 horas debido al Google I/O 2009, así que vámonos por partes. Antes que nada, recordarán que hace apenas unos días les platicaba de la liberación de Google Chrome 2.0 en su versión final, pues poco nos hicieron esperar, ya que acaba de ser liberado Google Chrome 3.0 Beta.

google-chrome-3-beta

No hay que perder de vista que aún es una beta, pero se comporta muy bien luego de algunas pruebas que he realizado. ¿Vale la pena instalarlo? Si estás interesado en disfrutar de las bondades de HTML 5, la respuesta es SI; en caso contrario, la sugerencia es seguir usando Google Chrome 2.0.

¿HTML 5? En mi próximo post hablaré sobre ello.

Enlaces:

Google Developer Day 2008 – Gears y AJAX

Dion AlmaerEn este post, haré mi reseña de la tercera y cuarta sesión de la tarde del Google Developer Day 2008, efectuado el lunes pasado en la Ciudad de México. ¿Por qué ambas sesiones en un sólo post? Simple, ambas sesiones fueron magistralmente presentadas por la misma persona: Dion Almaer.

Dion trabaja en el grupo de Desarrollo de Programas en Google, dedicando gran parte de su tiempo a lidiar con la tecnología dirigida a desarrolladores. Colabora en equipos como el de Google Gears. Es también co-fundador de AJAXian, la principal fuente de información y recursos de la comunidad AJAX. Por si fuera poco, es co-autor del libro “Pragmatic AJAX“.

Ambas sesiones fueron una delicia, ya que nos presentó toda la información de una manera sumamente clara y amena, con ejemplos muy interesantes y aplicativos. Además, sus diapositivas en pantalla fueron dignas de un doctorado en diseño gráfico. Si, lo acepto, Dion es mi nuevo ídolo.

Entremos en materia. La principal aplicación de Google Gears, ahora llamado sólo Gears (ya que se puede usar en sitios externos a Google), es la de permitir acceder a nuestro contenido en línea (online) de manera local (offline) para no depender de una conexión a Internet. Para mi es sumamente útil usar aplicaciones web, como Gmail, Google Reader y Remember The Milk de manera offline.

Otras aplicaciones y características de Gears son las siguientes:

  • Permite insertar nuestros gadgets en Blogger, hojas de cálculo, mapas, anuncios y muchos sitos más.
  • Existe una base de datos local integrada en Gears que permite búsquedas completas de texto, permitiendo fácilmente el ofrecer búsquedas avanzadas de clientes.
  • Podemos correr código JavaScript en el background (workerpools) sin bloquear la interface del navegador.
  • Gears soporta diferentes plataformas para dispositivos móviles, con paquetes completos de APIs, haciendo posible que evitemos las complicaciones de demoras en transmisión en celulares que utilizan Windows.
  • Podemos habilitar servicios de colaboración a través de diferentes dominios en forma segura, al habilitar explícitamente que Gears Yorker corra desde otro dominio.

Aquí algunas diapositivas de la sesión de Gears.

The Gears Philosophy

Gears Platforms

Sobre la sesión de AJAX, la última del día, Dion nos mostró como con las APIs AJAX de Google podemos añadir mapas, videos, feeds, fotografías y búsquedas en nuestras aplicaciones web con tan sólo unas instrucciones en JavaScript. Así mismo, nos mencionó la situación actual de AJAX, sus aplicaciones y su futuro.

¿Alguna vez pensaron que AJAX podría usarse en la Wii? ¡Dion lo hizo! Junto con un colega, creó una aplicación web en la que usando un control de la Wii, podía “lanzar dardos” a la pantalla de la computadora… simplemente asombroso.

Algo que me llamó mucho la atención, es la integración de Gears (si, también se habló de Gears en la sesión de AJAX) con HTML 5. Dion mencionó que cuando llegue el momento en que HTML 5 se convierta en el estándar de-facto para los desarrolladores web, Gears ya está preparado para su implementacion, pues incluso fué tomado en cuenta como parte de su especificación por parte del W3C.

Aquí algunas dispositivas de la sesión de AJAX.

AJAX

HTML 5 y Google Gears

¡Gracias a todos por leer mis reseñas del evento! Una disculpa por las imágenes, traté de editarlas para hacerlas más claras para ustedes. Cuando sean publicadas las presentaciones originales (se mencionó que nos serían proporcionadas), las compartiré con todos ustedes.

Por último, toda esta semana no he publicado noticias tecnológicas por elaborar estas reseñas, así que ya tengo varias noticias atrasadas que darles, entre las cuales están:

  • La adquisición de Symbian por parte de Nokia, para convertirlo en OpenSource.
  • La liberación del API para la disponibilidad de datos por parte de MySpace.
  • Nuevas características (en beta) para Blogger.
  • Bill Gates se despide definitivamente de Microsoft.

Ufff, vaya que ando atrasado. Espero el lunes ponerme al día con ellas. ¡No dejen de leer este Blog! :-)

Firefox 3.0 – A la Conquista del Guinness

Dando seguimiento a las descargas de Firefox 3, podemos decir que es prácticamente un hecho, por dos motivos: el primero, no existe un récord anterior con el cual hacer competencia; el segundo, es que la meta trazada por los chicos de Mozilla era de 5 millones (Firefox 2 tuvo 1.6 millones de descargas el día de su liberación), y en el momento en que estoy escribiendo estas líneas, el contador acaba de alcanzar los ¡¡¡7 millones de descargas!!!, y eso que aún quedan aproximadamente 3 horas para que finalice el plazo. ¿Quieren saber cómo va la cuenta? Pueden checar el contador de descargas oficial, el cual se actualiza en tiempo real. Así mismo, pueden checar el mapa de descargas.

De todas formas, apenas sea oficial, ya lo publicaré en otro post. Por mientras, puedes personalizar y descargar el certificado de agradecimiento por haber descargado Firefox 3. Aquí tienen el mío como muestra (denle click a la imagen para descargar el de ustedes).

Firefox 3 Gracias

Por cierto, con motivo de la celebración del lanzamiento de Firefox 3, se ha realizado un lavado de cara al sitio de Mozilla y a su Blog, así que los invito a visitarlos.

Otra novedad, es el lanzamiento de Firefox 3.0 Portable, gracias a los chicos de PortableApps. Nay que recordar que dicha aplicación es compatible sólo para Windows.

¿Otra novedad? ¡Claro! Los inteligentes chicos de Ubuntu, ¡ya pusieron Firefox 3.0 en los repositorios oficiales! Por lo tanto, si eres usuario de Ubuntu, ya habrás recibido la notificación para actualizar Firefox. Si no, usa apt-get o Synaptic para actualizarlo.

Hace un mes, publiqué las novedades para usuarios de Firefox 3; ahora quisiera hacer un repaso de las bondades de Firefox 3 para los desarrolladores web:

  • Está basado en el motor de renderizado Gecko 1.9, lo cual significa estabilidad y velocidad.
  • Mejoras en la compatibilidad con JavaScript 2 y mejor soporte con aplicaciones XUL.
  • Aún no hay soporte completo para HTML 5 y CSS 3. Recordemos que ambos aún son  considerados “Working Draft” por la W3C, por lo que XHTML 1.0 y CSS 2.1 siguen siendo los recomendaciones del Consorcio.
  • Lee, interpreta y renderiza el código HTML más rápido que nunca.
  • Pasa de manera excelente la prueba del Acid 2, y ha mejorado considerablemente la del Acid 3.
  • Visualiza fuentes complejas y gráficos mucho mejor que Firefox 2.
  • Compatibilidad mejorada con SVG.
  • Mejor soporte a navegación fuera de línea (offline).
  • Pronto podremos disfrutar de las bondades de Firefox 3.1, programado para finales de año (ya se puede descargar la versión alpha), el cual contará con mejor soporte para CSS 3 e integración nativa con XHR (XMLHttpRequest), para una mejor ejecución de AJAX.

Sin duda, Firefox está causando una revolución, y cada día que pasa los usuarios de todas partes del mundo se están dando cuenta de la enorme necesidad de usar un navegador más seguro, rápido y confiable, y en Firefox están encontrando lo que otros navegadores (léase Internet Explorer) jamás les habían ofrecido. ¡Hurra por Firefox! :-D

Actualización [13:15 hrs CST]

Las descargas ya rebasaron los 8 millones. Conforme se acerca el final del periodo de 24 horas, la gente se está poniendo las pilas y la “velocidad” de descargas en este momento oscila entre 10,000 y 12,000 descargas por minuto… verdaderamente sorprendente :-)

Actualización [13:20 hrs CST]

Más tardé en escribir la actualización previa, en que fuera declarado concluido el periodo de 24 horas. El resultado final: 8.2 millones de descargas de Firefox 3.0 (el número exacto no ha sido mencionado oficialmente). Ahora sólo falta que la gente de Guinness hagan el comunicado oficial del récord, lo cual puede demorar algunos días. Apenas tenga el dato, lo publicaré en este Blog. ¡Gracias a todos por participar! :-D