Mostrando entradas con la etiqueta html5. Mostrar todas las entradas
Mostrando entradas con la etiqueta html5. Mostrar todas las entradas

martes, 29 de marzo de 2011

Cuba: un micro-framework para desarrollo web basado en Rum

Suba

(Después de un lapsus entre feriados largos y proyectos, vuelvo a la carga)

En el último Ruby Meetup en Buenos Aires, del que hablé un poco más en el último post hace una semana, otra de las presentaciones correspondió a Michel Martens (soveran, en GitHub), quien presentó Cuba, su microframework inicialmente basado en el proyecto anterior Rum, otro pequeño mapper sobre Rack, pero que quedó discontinuado.

Rack es una abstracción que muchos de los frameworks web de Ruby utilizan para evitar reimplementar toda la interacción básica con un servidor web. Es básicamente una interfaz estandarizada sobre el servidor, independiente de cada implementación particular (soporta Mongrel, WEBrick, FCGI, Thin, y otros).

Rack surgió básicamente como una alternativa a Ruby on Rails, pero hoy hay Rails también puede utilizar Rack por debajo.

Muchos de los frameworks más chicos, como Sinatra, Camping o Merb construyen una capa de aplicación muy fina por encima de Rack, con lo que obtienen un modelo más limpio (obviamente con mucha menos magia que Rails), pero más eficiente cuando uno está dispuesto a trabajar un poco en algunas características en pos de más velocidad, menos consumo de recursos y muchas veces, más claridad en la solución final.

Cuba es otro de estos microframeworks, y tiene algunas características muy interesantes, que me sorprendieron en la presentación de Michel:

  • Es realmente minimalista, muy cerca del mismo Rack, lo que otorga mucho control sobre el flujo de trabajo del servidor web.
  • A pesar de tener algunas similaridades con Sinatra, es todavía más rápido, y más explícito.
  • Integra plantillas para vistas usando Tilt y testing utilizando Cutest y Capybara, aunque es trivial integrar cualquier otra cosa.

Veamos un ejemplo mínimo para entender que tan simple y de bajo nivel es Cuba:

require "cuba"

Cuba.use Rack::Session::Cookie

Cuba.define do
  on get do
    on "hello" do
      res.write "Hello world!"
    end

    on true do
      res.redirect "/hello"
    end
  end
end

Por supuesto hay oportunidades para abstraer todo un poco más pero se puede notar como se puede manipular de manera explícita la respuesta del servidor (res). Esto en Sinatra es más implícito, lo que está bien para muchos casos pero a veces es bueno poder acceder y manipular la respuesta de manera directa.

Aclaro que no tuve oportunidad de probar mucho Cuba, pero me parecieron interesantes algunos de los principios de diseño y los resultados obtenidos, y más aún saber que es un proyecto que está vivo y en manos de alguien que tenemos cerca.

miércoles, 23 de marzo de 2011

Navegadores actualizados: lo bueno, lo malo y lo feo

En estos últimos días hubo muchísima actividad alrededor de los navegadores web principales.

Por todos lados resonó el lanzamiento de FireFox 4, y con menos ruido desde la comunidad pero mucha promoción se lanzó también Internet Explorer 9. Por su parte, sin tanto ruido, Google Chrome siguió actualizándose silenciosamente y en mi caso pasó a la versión 11 Beta (quienes no están suscriptos al canal beta deberían estar alrededor de la versión 10.0.648.15).

A continuación algunos detalles, apreciaciones y recursos que me parecen interesantes para desarrolladores:

IE 9

Internet Explorer 9

Esta versión es una imprescindible actualización de Microsoft, mientras hace esfuerzos denodados por eliminar los últimos restos de IE 6, que ya es un problema grave hasta para ellos mismos.

Casualmente, días antes del lanzamiento de IE 9 lanzaron también la campaña http://ie6countdown.com/ que me parece llena de problemas. Este sitio propone incorporar un banner que se activa si el navegador con que se accede al sitio es IE 6, pero en caso que el usuario en cuestión le preste atención y haga clic en el banner, es derivado al sitio de Internet Explorer, donde lo más probable es que termine descargando Explorer 8, no el 9.

He aquí uno de los principales problemas que veo en IE 9: no tiene soporte en Windows XP, un sistema operativo que sigue teniendo un nivel de presencia enorme, y que es el que deben estar utilizando la mayor cantidad de los usuarios que usan aún IE6. El resultado es que muchos de esos usuarios quedarán usando un navegador que todavía no cumple con los estándares modernos.

Fuera de este detalle, IE 9 se puso al día y soporta una buena cantidad de los últimos estándares conocidos como HTML 5. No implementa todos porque Microsoft tomó la decisión de no atacar estándares que no estén a cierto nivel de decisión, con lo que en la práctica hay cosas que otros navegadores soportan y IE9 no, pero el argumento es al menos atendible y la brecha es mucho menor.

IE9 es muy rápido, usa muy bien la aceleración gráfica, y tiene algunas características interesantes en cuanto a su integración con Windows. Claro, sólo corre en Windows, lo que es otra gran diferencia con respecto a los demás.

Para quienes estén interesados, Microsoft Argentina realizará un evento gratuito sobre las novedades, el próximo lunes 28, en sus oficinas de Bouchard 710, 4to piso, en Buenos Aires. Aunque es gratuito, requiere registración. Para más detalles y registro ver el post de Miguel Sáez sobre el evento.

Firefox 4

Firefox 4

Mozilla finalmente liberó la nueva versión de su producto más famoso. Desde el punto de vista de los cambios visibles, en varias áreas comparte con IE9 el acercarse más a algunos principios establecidos por Chrome, como minimizar el espacio que el navegador mismo toma de la pantalla, dejando todo lo posible para el contenido.

También avanza en mayor soporte para los estándares, y aunque la versión acaba de salir, un dato importante para los desarrolladores es que FireBug ya está actualizado para esta versión.

Otro aspecto interesante es que esta va a ser la última entrega de Firefox que se deba descargar e instalar. A partir de ahora, las actualizaciones también seguirán el mecanismo de "goteo" de Chrome, y el navegador se mantendrá actualizado en forma paulatina, sin mayor intervención del usuario, aunque algunas actualizaciones queden a la espera de que el navegador -o el sistema completo- se reinicie.

Chrome

Chrome

Una de las novedades más importantes de Chrome es que cambió el logo/icono, como pueden ver.

Hablando un poco más en serio, los cambios son como siempre incrementales, y en el caso de la versión beta, experimentales. Por ejemplo, ya están probando algunas APIs de voz y usando aceleración gráfica para el soporte 3D en las hojas de estilo.

Más adelante se ve venir que están por quitar Gears de Chrome, ya que esta extensión existía para dar soporte a características que ya se han implementado en HTML5. Sin embargo, muchas opciones de soporte fuera de línea de aplicaciones como GMail, Calendar y Docs lo utilizan, por lo que no sería raro ver que pronto estos productos migren hacia los nuevos estándares.

 

jueves, 17 de marzo de 2011

El juego de la vida en HTML5 usando Canvas

El juego de la vida de Conway (también conocido simplemente como "Life") es un ejemplo clásicos de Autómatas Celulares creado por John Horton Conway en los 70.

Consiste en una grilla de puntos (el universo) donde cada punto puede contener un individuo o célula (un punto de la grilla que está encendido o vivo (los puntos tienen estado binario: vivos o muertos).

El juego funciona sólo (se lo conoce como un juego de cero jugadores), y lo único que se puede hacer es preparar el estado inicial y luego echarlo a correr. La corrida involucra generaciones, o pasadas por la grilla completa para analizar el estado y calcular el de la siguiente pasada. El cálculo se hace analizando para cada punto su estado y el de los ocho que lo rodean (sus vecinos):

Celula y Vecinos

Para determinar si la célula analizada vive o muere, se aplican las siguientes reglas:

  • Una célula viva con menos de dos vecinos vivos se muere (de soledad)
  • Una con dos o tres vecinos vivos sobrevive
  • Una con más de tres vecinos vivos se muere (por sobrepoblación)
  • Una célula muerta con exactamente tres vecinos vivos, nace (por reproducción)

La grilla debe considerarse como un toroide, o sea que los puntos de la última fila continúan en la superior, y los de la última columna derecha continúan en la primera de la derecha y viceversa.

Parece sencillo, pero ha sido estudiado durante todos estos años no solamente como un interesante Code Kata, sino como un interesante ejercicio de simulación de ecosistemas.

Como no hay mejor manera de entenderlo que verlo en acción, les recomiendo ver esta versión implementada en HTML 5, utilizando el tag Canvas.

Cosas interesantes que ocurren con este juego es que espontáneamente aparecen configuraciones estables (que permanecen constantes durante muchas generaciones, variando entre un número determinado de estados. Es un interesante ejemplo de comportamiento emergente, y aunque parezca un oximorón, un ejemplo sencillo de sistemas complejos.

Juego de la Vida

Por supuesto, una de las cosas muy interesantes de ver es código fuente. Son sólo 234 líneas de JavaScript y aunque parece un poco largo para un post, creo que vale la pena pegarlo completo, aunque recomiendo que si alguien lo quiere tocar baje siempre la última versión disponible en GitHub.

 

/*
 * Copyright 2011 Julian Pulgarin 
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0

 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

var Point = function(x, y) {
    this.x = x;
    this.y = y;
};

var graphics = function() {
    var canvas;
    var ctx;
    var canvasId;

    var cellSize = 10; // pixels
    var onColour = 'rgb(0, 200, 0)';
    var offColour = 'rgb(200, 0, 0)';
    var gridColour = 'rgb(50, 50, 50)';

    var initCanvas = function(canvasId) {
        this.canvas = $(canvasId).get(0);
        this.ctx = this.canvas.getContext('2d'); 
        this.canvasId = canvasId;
    }

    var drawCell = function(x, y, alive) {
        var g = graphics;
        g.ctx.fillStyle = (alive)? onColour : offColour;
        g.ctx.fillRect(x * cellSize + 1, y * cellSize + 1, cellSize - 1, cellSize - 1);
    }

    var handleMouse = function(e) {
        var l = life;
        var g = graphics;
        var that = this;
        var cell = getCellPointUnderMouse(e);
        var state;
        processCell(cell);
        $(g.canvasId).mousemove(function(e) {
            cell = getCellPointUnderMouse(e);
            processCell(cell);
        });
        function getCellPointUnderMouse(e) {
            return new Point((e.pageX - that.offsetLeft) / g.cellSize | 0, ((e.pageY - that.offsetTop) / g.cellSize) | 0);
        }
        function processCell(cell) {
            var x = cell.x;
            var y = cell.y;
            if (x > l.xCells - 1 || y > l.yCells - 1) {
                return;
            }
            if (typeof state == 'undefined')
            {
                state = !l.prev[x][y];
            } 
            l.prev[x][y] = state;
            drawCell(x, y, state);
            // TODO: Consider setting next as well
        }
    }

    function paint() {
        var g = graphics;
        var l = life;

        for (var x = 0; x < l.xCells; x++) {
            for (var y = 0; y < l.yCells; y++) {
                g.drawCell(x, y, l.prev[x][y]);
            }
        }
    }

    return {
        canvas: canvas,
        ctx: ctx,
        canvasId: canvasId,
        cellSize: cellSize,
        onColour: onColour,
        offColour: offColour,
        gridColour: gridColour,
        initCanvas: initCanvas,
        drawCell: drawCell,
        handleMouse: handleMouse,
        paint: paint,
    }
}(); 

var life = function() { 

    var yCells; 
    var xCells;
    var prev = []; // previous generation
    var next = []; // next generation

    var _timeout;
    var _alive = false;

    var initUniverse = function(canvasId) {
        var l = life;
        var g = graphics;
        g.initCanvas(canvasId);
        l.xCells = ((g.canvas.width - 1) / g.cellSize) | 0;
        l.yCells = ((g.canvas.height - 1) / g.cellSize) | 0; 
        g.ctx.fillStyle = g.offColour;
        g.ctx.fillRect(0, 0, l.xCells * g.cellSize, l.yCells * g.cellSize);
        g.ctx.fillStyle = g.gridColour;

        for (var x = 0; x < l.xCells; x++) {
            l.prev[x] = [];
            l.next[x] = [];
            g.ctx.fillRect(x * g.cellSize, 0, 1, l.yCells * g.cellSize);
            for(var y = 0; y < l.yCells; y++)
            {
                l.prev[x][y] = false;
            }
        }
        g.ctx.fillRect(l.xCells * g.cellSize, 0, 1, l.yCells * g.cellSize);
        for(var y = 0; y < l.yCells; y++)
        {
            g.ctx.fillRect(0, y * g.cellSize, l.xCells * g.cellSize, 1);
        }
        g.ctx.fillRect(0, l.yCells * g.cellSize, l.xCells * g.cellSize, 1);
        $(canvasId).mousedown(g.handleMouse);
        $('body').mouseup(function(e)
        {
            $(g.canvasId).unbind('mousemove');
        });
    }

    var nextGen = function() {
        var l = life;
        var g = graphics;

        for (var x = 0; x < l.xCells; x++) {
            for (var y = 0; y < l.yCells; y++) {
                l.next[x][y] = l.prev[x][y];
            }
        }

        for (var x = 0; x < l.xCells; x++) {
            for (var y = 0; y < l.yCells; y++) {
                count = _neighbourCount(x, y);

                // Game of Life rules
                if (prev[x][y]) {
                    if (count < 2 || count > 3) {
                        next[x][y] = false;
                    }
                } else if (count == 3) {
                    next[x][y] = true;
                } 
            }
        }

        for (var x = 0; x < l.xCells; x++) {
            for (var y = 0; y < l.yCells; y++) {
                l.prev[x][y] = l.next[x][y];
            }
        }

        g.paint();
    }

    var toggleLife = function() {
        var l = life;

        if (!l._alive) {
            l._alive = true;
            l._timeout = setInterval("life.nextGen()", 100);
        } else {
            l._alive = false;
            clearInterval(l._timeout);
        }
    }

    var clear = function() {
        var l = life;
        var g = graphics;

        for (var x = 0; x < l.xCells; x++) {
            for (var y = 0; y < l.yCells; y++) {
                l.prev[x][y] = false;
            }
        }
        g.paint();
    }

    var _neighbourCount = function(x, y) {
        var l = life;
        var count = 0;
        var neighbours = [
            l.prev[x][(y - 1 + l.yCells) % l.yCells],
            l.prev[(x + 1 + l.xCells) % l.xCells][(y - 1 + l.yCells) % l.yCells],
            l.prev[(x + 1 + l.xCells) % l.xCells][y],
            l.prev[(x + 1 + l.xCells) % l.xCells][(y + 1 + l.yCells) % l.yCells],
            l.prev[x][(y + 1 + l.yCells) % l.yCells],
            l.prev[(x - 1 + l.xCells) % l.xCells][(y + 1 + l.yCells) % l.yCells],
            l.prev[(x - 1 + l.xCells) % l.xCells][y],
            l.prev[(x - 1 + l.xCells) % l.xCells][(y - 1 + l.yCells) % l.yCells],
        ];

        for (var i = 0; i < neighbours.length; i++) {
            if (neighbours[i]) {
                count++;
            }
        }
             
        return count;
    }

    return {
        yCells: yCells,
        xCells: xCells,
        prev: prev,
        next: next,
        initUniverse: initUniverse,
        nextGen: nextGen,
        toggleLife: toggleLife,
        clear: clear,
    }
}();

lunes, 28 de febrero de 2011

Run Web Camp en Buenos Aires

Run Web Camp

El 15 y 16 de marzo la gente de Microsoft Argentina estará presentando este evento que es parte de una gira internacional sobre desarrollo web dentro de su plataforma.

Es una pena que el sitio del evento parezca estar hecho por gente que no sabe mucho del tema en si, e insiste en publicar el programa como una imagen, haciendo la página muy poco accesible. Para beneficio de quienes no puedan leer una imagen y quieran enterarse de qué temas se presentarán, les dejo un resumen del temario.

Lo mejor del evento para mi es que participan muchos amigos. No se asusten por verme como orador, Daniel Laco que presentará conmigo se va a encargar de levantar el nivel de la charla.

Dia 1 (martes 15 de marzo) - Palais Rouge, Jerónimo Salguero 1441

09:00 Desayuno y Registración

09:30 Bienvenida (Eduardo Mangarelli - Director Regional de Nuevas Tecnologías de Microsoft)

09:45 Keynote: ASP.NET MVC (Phil Haack - Program Manager de ASP.NET MVC)

10:45 Presentando WebMatrix (Miguel Sáez, Programa Desarrolladores de Microsoft)

11:30 break

11:45 Acceso a Datos y Modelado con Entity Framework (Daniel Laco y quien escribe)

12:30 Un cambio de Vista en MVC: Razor Syntax (Drew Robbins)

13:15 almuerzo

14:15 Internet Explorer 9 y HTML 5 (Matias Woloski y Johnny Halife)

15:00 Aplicaciones AJAX con MVC (Rodo Finochietti y Pablo Zaiden)

15:45 break

16:00 Funciones avanzadas con MVC 3.0 (Daniel Cazzulino y Julián Domínguez)

16:45 Administrando paquetes con NuGet (Phil Haack)

Día 2 (miércoles 16 de marzo) - Microsoft de Argentina, Bouchard 710, 4to piso

Nótese que este segundo día es de prácticas con instructor, y es importante llevar notebook.

09:00 Desayuno y Bienvenida

09:30 Apertura: Sesión conjunta

10:00 Sesión Asistida de Desarrollo (parte 1)

13:00 almuerzo

14:00 Sesión Asistida de Desarrollo (parte 2)

17:00 Elección de proyecto

18:00 Cierre

Instructores: Phil Haack, Drew Robbins, Diego Gonzalez, Angel "Java" López

Espero que nos veamos por allá.

Mejorando aplicaciones web con Chrome Developer Tools (video)

Google Chrome

Una de las características que el navegador de Google tuvo desde el inicio fue la integración de un buen juego de herramientas para desarrolladores.

Y estas herramientas siguen progresando a lo largo del tiempo, ayudándonos en el desarrollo web (por supuesto sin importar qué navegador usen los usuarios finales). Para quienes quieran aprovechar las últimas características, es recomendable utilizar la versión disponible en el Chrome Beta Channel.

Algunas de las funciones principales incluyen:

  • Edición en vivo del DOM y las plantillas CSS (ideal para retocar sobre el navegador y experimentar hasta ajustar las páginas)
  • Depuración de JavaScript utilizando un depurador gráfico y pudiendo marcar breakpoints, o incluso editar scripts sobre la marcha, agregando sobre el navegador datos de depuración o ayudas.
  • Analizar el tiempo de ejecución de cada función para optimizar el rendimiento.
  • Seguir el flujo y proceso de pintado de las páginas mientras cargan.
  • Explorar el almacenamiento en bases de datos locales de HTML5.

Es interesante saber que estas herramientas están escritas por completo usando JavaScript y CSS, y cualquiera puede revisar el código fuente e incluso postularse para contribuir al proyecto.

Dejo un video corto (4 minutos y medio) en el que un ingeniero de Google demuestra cómo usar estas herramientas. El video está en inglés, pero la explicación es muy clara y ver las herramientas en acción seguramente les permita descubrir algún recurso que todavía no aprovechaban.

viernes, 25 de febrero de 2011

Brunch: aplicaciones HTML5 desde los hombros de gigantes

Brunch

"Parado sobre los hombros de gigantes" es una frase típica de la cultura anglosajona, famosamente usada por Isaac Newton, que refiere a construir sobre el trabajo de quienes nos han precedido.

Esta idea es la base de Brunch, un framework compuesto de varias partes preexistentes para facilitar la construcción de aplicaciones web modernas.

Incluso si uno no va a usarlo directamente, es bueno recorrer y entrar en contacto con algunos de sus componentes, todos ellos de código abierto, no todos tan conocidos. Veamos cuáles son:

  • CoffeeScript
    Es un lenguaje que compila a Javascript, simplificando mucho la sintaxis, como se puede leer en este post previo.
  • Backbone.js
    Es una librería para aplicaciones JavaScript que brinda estructura para utilizar modelos y vistas con eventos de uso declarativo, un API para colecciones con mucha funcionalidad, y capacidades de conexión utilizando JSON con interfaces REST. Pueden ver un ejemplo en línea con el código completamente documentado a un link de distancia.
  • Underscore.js
    Es otra librería, que Backbone utiliza, y que provee más funciones para manejo de estructuras de datos a mas bajo nivel, incluyendo colecciones, arrays,  extensión sobre funciones (como memorización, diferimiento, composición, etc), objetos, utilidades y cadenas.
  • Eco
    Es un motor de plantillas que permite embeber CoffeScript dentro del markup de una página, como si fuese EJS o ERB.
  • Stylus
    Es un lenguaje de declaración de hojas de estilo en cascada (CSS) con una sintaxis simplificada, como CoffeScript hace con JavaScript. Es básicamente CSS sin llaves ni otros signos de puntuación, mucho más legible.
  • Docco
    Genera documentación de código en formato HTML, soportando Markdown y colorero de sintaxis. Unos cuantos de los proyectos anteriores utilizan Docco en su documentación.
  • jQueryZepto.js
    jQuery no requiere presentación para los lectores de este blog, pero Zepto es un framework minimalista compatible con jQuery y orientado a navegadores de dispositivos móbiles basados en WebKit.

En suma, más allá de Brunch mismo, puede verse un ecosistema creciente de librerías que trabajan en conjunto y con buen nivel de compatibilidad.

 

miércoles, 2 de febrero de 2011

Leisure Suit Larry en HTML5

En la puerta de Lefty's

La aparición de nuevas librerías para gráficos y animación en HTML5 / JavaScript han posibilitado una avalancha de regresos a juegos clásicos que se adaptan bien a ser ejecutados en el browser.

Y aunque ya se pueden encarar estilos más ambiciosos, los clásicos siguen volviendo. Esta vez encontré una versión sumamente fiel de un clásico de los 80: Leisure Suit Larry. Para quienes lo jugaron en aquella época o m's tarde, ya que su popularidad lo mantuvo vivo bastante tiempo, he aquí una oportunidad de revivir esos momentos sin tener que recurrir a la virtualización.

Algo interesante de este juego y otros clásicos disponibles en el mismo sitio, es que están autorizados por las compañías que mantienen los derechos de los juegos originales, Activision y CodeMasters.

Pero además están construidos sobre un par de componentes  para juegos licenciado bajo GPL o MIT, y disponibles en Google Code:

  • El intérprete Sarien.Net, que es una implementación sobre el browser del motor original usado por Sierra On-Line para los juegos originales Space Quest, Police Quest y el de Larry.

  • El motor multiplayer Q42 es una plataforma multi-usuario sumamente liviana para juegos basados en el browser, siempre por puerto 80. El API cliente son 5K de JavaScript, y el servidor es una clase en C# que puede embeberse o referenciarse como una DLL externa (imagino que probablemente pueda correr en Mono, pero habría que probarlo).

    El motor implementa básicamente un mecanismo de chat con salas separadas, escalamiento automático, liberación de salas vacías, propiedades por usuario como nombre y posición (x,y), mensajería y soporte para múltiples usuarios por sesión, lo que permite mantener usuarios distintos en tabas separados del mismo browser, por ejemplo.

Espero que alguno se divierta con esto, jugando o programando.

lunes, 24 de enero de 2011

HTML5 para todos

HTML5 logoEl 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

 

 

martes, 18 de enero de 2011

HTML 5 ya tiene logotipo oficial

HTML 5

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):

HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage

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

HTML5_Connectivity
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).

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

HTML5_Device_Access
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).

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

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

HTML5_Performance
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.

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

HTML5_Offline_Storage
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.