HTML5 para todos

El tema está más caliente que nunca, y estuve charlando en estos días con diferentes personas que no han llegado a familiarizarse todavía con los conceptos detrás de este conjunto de tecnologías, por lo que me parece apropiado hacer una compilación de recursos sobre el tema, extendiendo un poco lo cubierto en el post sobre el logo de HTML5.

A continuación dejo una serie de recursos (en inglés) para profundizar sobre varias de las tecnologías que forman parte de este estándar en constante evolución, que a pesar de no estar completamente especificado, está siendo utilizado masivamente en producción.

Demos

Lo primero que puede ser útil es ver algunos ejemplos de las distintas capacidades, así que van algunos recursos para familiarizarse y entender un poco más lo que hay disponible. En casi todos los casos está aclarado, pero vale reiterarlo: estos ejemplos funcionan bien, mal o nada según el browser con que se prueben. Idealmente, conviene tener más de uno a mano para entender las diferencias. Y también es bueno ver qué cosas funcionan en todos o casi todos.

• HTML 5 Demos and Examples contiene demos duras de funcionalidad específicas por API. Son técnicas e incluyen código simple para entender cómo se usan, pero no son especialmente atractivas visualmente.
  
• 48 Excellent HTML5 demos incluye más demos vistosas. Están recopiladas de distintos orígenes y  no siempre tienen mucho detalles sobre las técnicas subyacentes, pero sirven para darse idea de las posibilidades.
• HTML5 Form Demo es un único ejemplo que muestra concisamente el mecanismo de validaciones en formularios y los recursos gráficos asociados. Una buena descripción del API se encuentra en esta página de Mozilla.
• Los Slides de Google que son usados en casi todas sus presentaciones, tienen un montón de demos que apuntan sobre todo al soporte de Chrome, pero la mayoría funcionan en FireFox, Safari, Opera e incluso en IE 9 Beta. Lo interesante es que la presentación completa está armada en HTML5 y las explicaciones son muy detalladas.

Ejemplos, Plantillas

• html5bolerplate es una plantilla muy completa que permite utilizar todos los recursos comunes de HTML5 en la mayoría de los browsers (¡incluyendo IE6!). Además, utiliza las mejores técnicas de caching y compresión para máxima eficiencia, buenas prácticas de configuración del sitio (para Apache, IIS, ngnix, etc), optimizaciones para navegadores móviles, y mucho más.
• Para quienes se asusten con la plantilla anterior (por la inmensa cantidad de cosas que contempla), Easy HTML5 Template o HTML5 Reset son versiones reducidas, menos ambiciosas, que pueden servir como punto de partida.

Guías y Cartillas

• Diseñando un Blog en HTML5 es un extenso artículo describiendo las técnicas necesarias y los diferentes pasos para construir una aplicación de este tipo.
• Un punto fundamental en cuanto a la utilización apropiada de HTML5 es aprovechar al máximo las horas de estilo para separar por completo el contenido de la presentación visual. La guía HTML5 y CSS3: las técnicas que pronto usará contiene una buena descripción de cómo estructurar las diversas áreas de un sitio y aplicarles estilos, también usando un Blog como ejemplo.
• Hay algunas técnicas extra con CSS3 descriptas en CSS Background Image Hacks.
• Finalmente, dejo esta cartilla de HTML5, otra cartilla visual, y un libro de bolsillo de referencia.

 

 

Raros Lenguajes Nuevos: CoffeeScript

CoffeeScript es un lenguaje que compila a JavaScript, y mantiene una premisa fundamental: sigue siendo JavaScript.

El código es compilado a su equivalente, y es posible utilizar cualquier librería o extensión como en el ambiente original. El código final generado es prolijo y entendible, pasa las validaciones de JavaScript Lint y funciona en cualquier motor de JavaScript.

Lo que CoffeeScript aporta es una sintaxis simplificada, inspirada en Ruby y Python, despojada de llaves y puntos y comas, bastante más legible pero con exactamente el mismo poder y características del JavaScript tradicional.

Veamos algunos ejemplos:

# Asignación:
number   = 42
opposite = true
# Condiciones:
number = -42 if opposite

Esto genera el siguiente JavaScript:

var number, opposite;
number = 42;
opposite = true;
if (opposite) {
number = -42;
}

Y aunque estos ejemplos suenan triviales, ya pueden notarse algunas abreviaturas importantes. Pero veamos un ejemplo más extremo, que utiliza declaración de funciones, espacios de nombre y comprensión de arrays:

# Declaración de funciones
square = (x) -> x * x

# Declaración de un array:
list = [1, 2, 3, 4, 5]

# Funciones dentro de un espacio de nombres:
math =
  root:   Math.sqrt
  square: square
  cube:   (x) -> x * square x


# Comprensión de Arrays:
cubes = (math.cube num for num in list)

Y su equivalente en JavaScript:

var cubes, list, math, num, square;
var __slice = Array.prototype.slice;

square = function(x) {
  return x * x;
};

list = [1, 2, 3, 4, 5];

math = {
  root: Math.sqrt,
  square: square,
  cube: function(x) {
    return x * square(x);
  }
};

cubes = (function() {
  var _i, _len, _results;
  _results = [];
  for (_i = 0, _len = list.length; _i < _len; _i++) {
    num = list[_i];
    _results.push(math.cube(num));
  }
  return _results;
})();

¿No es notoriamente más clara la versión en CoffeeScript?

La sintaxis completa y referencia está disponible en línea.

¿Cómo funciona? El compilador está escrito en CoffeeScript (en la mejor tradición geek) utilizando Jison Parser Generator. La versión de línea de comando funciona sobre Node.js, aunque el compilador en si puede correr en cualquier motor de JavaScript.

Algo muy interesante es que cualquiera que quiera jugar un poco no necesita instalar nada. Simplemente puede ir al sitio de CoffeeScript dentro de GitHub y elegir “Try CoffeeScript” en el menú superior para acceder a un editor en línea que permite escribir código CoffeeScript del lado izquierdo y va mostrando cómo se compila (en tiempo real, letra por letra) en JavaScript, como se ve en la figura:

 

HTML 5 ya tiene logotipo oficial

Si, el W3C lanzó el logotipo oficial de HTML 5 como parte de la campaña para impulsar el standard.

El logo no es solo una imagen suelta. Hay detrás una serie de guías de uso, ya se han hecho stickers y remeras, y además está publicado bajo una licencia Creative Commons que permite flexibilidad al utilizarlo.

Entre otras características, el logo puede ser acompañado en una placa que puede agregarse a cualquier sitio para detallar cada una de las tecnologías del estándar que están utilizadas en esa aplicación.

Este ejemplo muestra todas las características habilitadas (los íconos de cada una son parte del paquete de diseño que acompaña el logo):

Notarán si pasan el mouse sobre la imagen la lista de las tecnologías soportadas. Los íconos corresponden a:

Conectividad: hace referencia a Web Sockets y Eventos enviados desde el servidor, que habilitan un estilo de comunicación "push" (donde el browser cliente no necesita timers para ir a buscar novedades, sino que puede recibirlas) o entre pares (browser a browser, por ejemplo).

CSS3: extiende los estilos para soportar transiciones y efectos, tipografías y muchos otros detalles de presentación.

Acceso a dispositivos: implica acceso a características específicas del hardware debajo del browser. El ejemplo actual de implementación es el Geo-posicionamiento (el API abstrae esta funcionalidad de la manera en que el dispositivo la resuelve -con una combinación de GPS, WiFi, señales de red celular, etc).

3D, Gráficos y Efectos: cubren características como SVG, Canvas, WebGL y extensiones 3D de CSS3.

Multimedia: incluye los nuevos tipos de objetos que soportan audio y video.

Rendimiento e Integración: refiere a la nueva funcionalidad de Web Workers, que permiten ejecutar scripts en paralelo, y XMLHttpRequest nivel 2, que mejora el componente original con la capacidad de manejar peticiones desde orígenes cruzados, agrega eventos de progreso y manejo de streams para envío y recepción.

Semántica: enriquece el contenido al darle significado a través de nuevos tags, RDFa, micro-data y micro-formatos.

Fuera de línea y Almacenamiento: abarca el soporte para operar en forma desconectada a través de las APIs de App Cache, Local Sotrage, Indexed DB y File.

 

Esperemos ver el logo en uso frecuente hasta que estas características sean ubicuas y se transforme en irrelevante.

Video: Avalancha de lanzamientos desde Microsoft

El Web Platform & Tools Content Team de Microsoft (hasta donde recuerdo, el grupo en el que está Scott Hanselman) acaba de liberar una cantidad impresionante de productos:

• ASP.NET MVC 3
• NuGet
• IIS Express 7.5
• SQL Server Compact Edition 4
• Web Deploy
• Web Farm Framework 2.0
• Orchard 1.0
• WebMatrix 1.0

El hecho de que haya salido todo junto no es casualidad: todos estos productos están relacionados de alguna manera, ya que en principio son todos piezas de la nueva estrategia de Microsoft para el desarrollo web, caracterizada por romper un poco los esquemas tradicionales de la compañía. Por ejemplo, muchos de los componentes están liberados como Open Source, y otros son gratuitos, y en líneas generales todos son bastante livianos (mucho más de lo habitual en el mundo Microsoft al menos).

Esta renovada plataforma responde indudablemente al intento de Microsoft de competir con el ambiente más popular en el desarrollo web que va desde PHP hasta Ruby on Rails, e incluso abarca parte de este espacio, como veremos.

Veamos cada componente en un poco más de detalle. Como hay mucha información de Microsoft al respecto, lo que leerán es mi interpretación personal sobre ellos, tratando de relacionarlos con equivalentes en otras plataformas con el objetivo de entender rápidamente el propósito de cada pieza, sin entrar en comparaciones sobre si una es mejor que otra. En principio, es difícil comparar plataformas disimiles y componentes aislados.

ASP.NET MVC es un framework open source basado en el ya antiguo patrón MVC (fue postulado originalmente por Trygve Reenskaug entre 1978/79 en Xerox) y mayormente ignorado por Microsoft en su aproximación a la web, mientras se lo adoptaba en otros ámbitos en frameworks como Struts en Java, Joomla/Drupal en PHP, Django en Python y Rails en Ruby.

Esta versión de MVC incorpora algunas novedades como un nuevo motor para las vistas, Razor, que tiene una sintaxis muy suscinta y clara para mezclar código con HTML con un mínimo de interferencia. También mejoraron mucho la limpieza del JavaScript que integran del lado cliente al evitar scripts inline y usar en cambio anotaciones de HTML 5 que son manejadas por JQuery y jQuery.unobtrusive-ajax, con lo que se pueden realizar validaciones y otras tareas del lado cliente.

Otro pilar de este framework es la extensibilidad, ya que se puede cambiar fácilmente el motor de vistas, soporta montones de frameworks de testing, alternativas para el modelo y su persistencia, y en esta nueva versión incluso mejora el mecanismo de inyección de dependencias, de modo de poder usar el contenedor que más nos guste para intercambiar cualquiera de las piezas.

NuGet es un administrador de paquetes que intenta acercar la funcionalidad de las gem de Ruby al mundo .NET. Todavía es relativamente nuevo, pero comparado con el proceso anterior de búsqueda e inclusión manual de las dependencias es un avance enorme, y seguramente va a facilitar mucho el uso de componentes externos. El proyecto es open source y es mantenido por Microsoft y miembros externos.

IIS Express es una versión gratuita de desarrollo del servidor web, mucho más liviana que el servicio completo, y con la posibilidad de utilizarlo y configurarlo sin requerir privilegios de administrador, algo que tradicionalmente generó muchísimos problemas en equipos dentro de un entorno corporativo seguro.

SQL Server Compact 4 es una versión embebida y gratuita de SQL Server. Algo similar a un SQLite. Los binarios se copian directamente dentro de la aplicación y la base de datos corre dentro del mismo proceso, con lo que no es necesaria ninguna instalación. Por supuesto este servidor no tiene las características de escala que sus hermanos mayores, pero es más que suficiente para una gran cantidad de aplicaciones, y no tiene ningún tipo de restricción de uso en su licencia.

Web Deploy y el Web Farm Framework, como sus nombres lo indican, facilitan el proceso de despliegue y actualización de aplicaciones web en servidores únicos o compuestos en granja. Ambos componentes son gratuitos.

Orchard es un sistema de administración de contenido y blogs open source, basado en MVC 3, utilizando Razor y SQL Compact por omisión. Después de un intento similar poco prolijo y muy criticado (llamado Oxite), Orchard estuvo mucho más cuidado en todo sentido, y aunque por supuesto hay críticas, el consenso es que esta es una aplicación de referencia mucho más valiosa.

Y finalmente, WebMatrix es una herramienta gratuita de desarrollo de aplicaciones web que soporta una cantidad bastante variada de tecnologías en base a plantillas, incluyendo cosas dentro y fuera del mundo Microsoft (aunque corriendo en Windows), como ScrewTurn, Umbraco, DotNetNuke, Orchard, Blogengine.net,WordPress, Drupal y Joomla. Por debajo, WebMatrix incluye IIS Express y SQL Compact, brindando un entorno completo.

Algo interesante que tiene WebMatrix es una cantidad creciente de helpers para integrar muchísimos servicios servicios populares hoy día en la web, como Bit.ly, Facebook, EventBrite, FourSquare, OData, Twitter, UserVoice y muchísimos más.

 

Finalmente, otro elemento importante de todo este combo es la cantidad impresionante de documentación disponible. Basta como muestre este listado de recursos.

Para cerrar, les dejo este video presentando WebMatrix dentro de CodeMash 2.0.1.1(si tienen problemas viendo el video, prueben en la página original en Channel 9):

Video: ¿Existe la mejor forma de probar?

El martes pasado se realizó la reunión mensual de Agiles @ Buenos Aires, organizada por la comunidad local Agiles.org. Para estar al tanto de estas actividades conviene suscribirse a la lista de correo Agiles Argentina.

La mecánica de estas reuniones es que tradicionalmente al cierre de cada una se proponen y votan los temas para la próxima, teniendo en cuenta temas que estaban pendientes en una especie de backlog informal.

Esta vez el tema central fue el testing desde un punto de vista ágil, iniciando con la presentación de Juan Gabardini titulada "¿Existe la mejor forma de probar?". En la sesión Juan recorre su experiencia personal como desarrollador volcado a tareas más ligadas a control de calidad (QA), recorriendo el espectro desde las pruebas manuales hasta las técnicas de automatización más sofisticadas, y reflexionando sobre el valor de cada variante y sus combinaciones.

La segunda mitad del evento fue una serie de preguntas, respuestas y debate a raíz de la presentación, que fue muy interesante pero es difícil de compartir en video.

Afortunadamente, si tenemos grabada la presentación de Juan, y para todos aquellos que tengan dudas o temas a debatir, creo que lo mejor puede ser plantearlos en la lista, donde tanto Juan como otros agilistas pueden aportar sus opiniones.