Alpha's Manifesto

A black and white figure's thought-hive

Programando Arkanoid – Parte 1

Cómo hacer un pequeño juego en JavaScript y HTML5 canvas

Haciendo ya mucho tiempo que no trabajaba en JavaScript sin la utilización de ningún framework, me propuse crear algo simple que a la vez fuera divertido. Pensé en algunas opciones y la ganadora fue un juego de Arkanoid (que, ahora me entero, es una de las tantas copias del Breakout, y para mi el nombre original siempre fue Arkanoid, en fin).

El resultado final lo pueden ver aquí y el código fuente está en mi repositorio de GitHub, pero no es tanto el resultado sino el viaje lo que fue interesante, y quiero describir las cosas que aprendí en ese camino.

Vengan y acompáñenme en mi viaje.

(Read more →)

Responsive Web vs. Mobile Web

¿Qué son y cuándo usar cada uno?

Pantallas y tamaños

Ahora que el mundo web se ha acelerado de forma increíble, CSS3 y HTML5 son más y más poderosos cada día. Una de las características que trajo CSS3 son media queries, que habilitan un nuevo tipo de sitio llamado responsive web. ¿Qué es esto y cómo nos afecta?

(Read more →)

VS2012, día cuatro

Videos resumidos luego del release oficial

Introducción

Ya casi llegando al final de esta investigación sobre qué tiene Vs2012 para ofrecernos, estoy ya probando la versión oficial, ya lista para trabajo en producción. Mucho de lo que encontré en ella no es una sorpresa para mí, y mis entregas anteriores se hicieron desde el Release Candidate. Hay muchos más cambios que ocurrieron entre ese RC y la versión final, algunas superficiales (como la pantalla de Start Page), otras debo descubrirlas aún.

Hay muchos más videos al respecto que dejaré a disposición de ustedes, pero esta vez, en lugar de agrupar el contenido por video, lo haré por funcionalidad y dejaré las referencias al final. Sin embargo, voy adelantando que muchos de ellos vienen directamente de Visual Studio 2012 Premium and Ultimate Overview de Channel 9, y del blog de Scott Hanselman.

(Read more →)

Mobile: ¿Web o lenguajes nativos?

Sobre cómo elegir la tecnología correcta

Cuando una organización, por grande o pequeña que sea, quiere comenzar su presencia en el mercado mobile, hay una pregumta que siempre surge y que muchas veces no les resulta fácil resolver. ¿Qué es más conveniente: utilizar tecnologías web y sus capabilidades para llegar a todos los dispositivos, o utilizar el framework propio de los dispositivos para utilizar todo el potencial que ellos ofrecen?

Está claro que una solución web puede hacer uso de todas las nuevas tecnologías, incluyendo HTML5, CSS3, las nuevas versiones de JavaScript y una variedad de trucos que muchos programadores conocen, pero utilizar el lenguaje nativo de los dispositivos hace que nada sea imposible. Entonces, ¿cuál es la más apropiada?

Como siempre, la respuesta correcta no es absoluta, sino que varios factores juegan al momento de una desición estratégica. Primero, consideremos los beneficios y problemas de cada elección, lado a lado.

 Web (HTML, JS, CSS)  Lenguaje nativo
A favor
  • Cross-browser
  • Curva de aprendizaje suave
  • Estándares definidos
  • Alto nivel
  • Acceso a cualquier funcionalidad del dispositivo
  • Mejor performance
  • Look and feel consistente con otras apps
  • Capacidad de reinventar el UI completamente
En contra
  • No toda funcionalidad de dispositivo móvil está disponible
  • Distintos niveles de implementación según el navegador
  • Estándares todavía en desarrollo
  • Requiere conectividad, al menos en algún punto
  • Requiere instalación de una aplicación
  • Diferentes según dispositivos, modelos y versiones
  • Diferentes políticas de market
  • Requiere de uso de licencias para algunos markets
  • Requiere aprendizaje y especialización
  • Los ciclos de vida los determina el market

Existe una tercera opción que he elegido no listar: los híbridos. Son compañías o frameworks que aseguran la llegada a una mayoría de dispositivos, solucionando la necesidad de aprender distintos lenguajes. Sin embargo, estas soluciones por lo general son tercerizadas (es decir, corren la aplicación por su cuenta), o son wrappers (es decir, toda nuestra aplicación corre dentro de otra aplicación que ellos proveen) o simplemente revierten a aplicaciones HTML sin demasiado poder. El mercado todavía está surgiendo para estos frameworks y hay resultados muy variados con ellos aún, razón por la cual he elegido dejarlos fuera de la consideración de hoy.

Tomar una decisión según cuál opción tenga más ítems de su lado puede parecer una solución fácil, pero realmente no es la más sabia. La decisión debe alinearse con los objetivos estratégicos de la organización, incluyendo el mercado destino, el tipo de usuario que se espera tener, los recursos disponibles para afrontar el desarrollo, y el tipo de llegada que la aplicación desea tener.

Como un buen ejemplo, muchas empresas grandes quieren entrar al mercado mobile, y deben hacer algo digno de su nombre, pero quieren tener presencia en todos los dispositivos. Al mismo tiempo, startups pequeñas quieren hacer una inversión pequeña para aproximarse al mercado. En estos casos la mejor opción será web, excepto que requieran capacidades especiales (como acceso a la red celular, o acceso USB, etcétera).

En los otros casos, o cuando el público destino es un conjunto de usuarios muy particular, las soluciones nativas pueden ser las más apropiadas. Por ejemplo, cuando el usuario serán oficiales de seguridad de una empresa, haciendo uso de la cámara o acelerómetro del teléfono, las organizaciones pueden decidir que tal o cuál marca de dispositivo con tal o cuál versión será la apropiada y reducir el desarrollo a un sólo lenguaje.

Front-end code standards

Una aproximación de best practices

Acabo de leer el artículo de IsoBar Front-end Code Standards & Best Practices. El artículo cubre de forma extensiva varias de las tecnologías utilizadas, con las sugerencias que esta empresa utiliza interamente. Cubre varios aspectos del uso de HTML (y algunas nuevas características de HTML5), CSS (y algunas nuevas características de CSS3), JavaScript, Performance, e integración cross-browser.

Personalmente no me siento de acuerdo con la totalidad de los items mencionados, pero creo que como punto de partida es muy bueno. Tienen una buena cantidad de referencias al por qué conviene hacer las cosas de la forma que ahí están explicadas, y muchas veces las razones son totalmente válidas. Muchas veces también se pesan pros y contras de cada aproximación, lo cual ayuda a tomar una decisión educada del proceso que elijamos seguir.

Soy un zorrinito front-end.

Link del día: Herramientas para CSS3

Desde hace rato que tengo ganas de hacer algo en CSS3, y no dudo que muchos de ustedes también. La gran pregunta que todos debemos tener es “Cómo empezar?”. El qué hacer es un tema aparte, pero el cómo hacerlo es algo que seguramente podemos solucionar con algunas herramientas.

Algunas de estas herramientas están enumeradas en el artículo de Cats Who Code llamada 10 Useful tools for CSS3 development. En este pequeño artículo nos cuentan de distintas herramientas (todas muy visuales y atractivas) que nos permiten usar características de CSS3 en Internet Explorer, crear estilos desde cero, o trabajar con características en particular, como sombreados, refactorización, border-radius.

Hay dos en particular que más que herramientas son un algo especial. Una de ellas es Modernizr, del cual me sorprende no haber comentado antes: sin ningún tipo de JavaScript hace uso de selectores para utilizar condicionalmente características que pueden estar soportadas o no. (Aunque yo prefiero Selectivizr que emula esos comportamientos.),

El otro de ellos es simplemente una página de referencia, que es el HTML5 & CSS3 browser support. Su  nombre ya es bastante indicativo de qué contenido tiene.

Y como extra, y como no podía ser de otra manera, un CSS3 Cheat sheet.

Soy un zorrinito CSS3.

Link del día: Performance HTML5, CSS3 y DOM, Parte 2: Performance HTML5

Hay varias formas de aproximarse a la performance de una aplicación que está construida bajo los nuevos estándares e implementaciones de HTML5, CSS3, y, por supuesto, JavaScript. Como ya lo habíamos mencionado en la parte 1 de este artículo, el tutorial de HTML5 Rocks llamado Improving the performance of your HTML5 App trata varios puntos que son importantes para lograr una buena performance y una aplicación sólida.

Repasémoslos rápidamente:

  • Delegar animaciones al browser siempre que sea posible
    • Transformaciones y trancisiones con instrucciones CSS
    • Renderización “incentivada” a ser a través del GPU con [code lang=”css”]-webkit-transform: translateZ(0);[/code]
    • Separación de threads de animación con [code lang=”javascript”]window.requestAnimationFrame[/code]
  • Profiling de JavaScript
    • Utilizar el DOM lo menos posible
    • Nombrar funciones anónimas para identificar dónde están los problemas más fácilmente
    • Refactorizar el código
    • Crear funciones definidas y autollamadas si hacer métodos más pequeños no se puede (de esa forma “nombramos” parte del código)
  • Utilización del DOM
    • Lo menos posible (nuevamente)
    • Cachear elementos cuando tenga sentido
    • Hacer lecturas, luego modificaciones, luego escrituras para evitar reflows
    • No usar el DOM dentro de loops
  • Inicialización tardía
    • Delegación de eventos en lugar de asociación de handlers

Y eso es, a muy grandes rasgos, este artículo. Realmente recomiendo que le den una leída a fondo si ustedes trabajan del lado de la web. Realmente no verán una página de la misma manera.

Soy un zorrinito performante.

Link del día: Performance HTML5, CSS3 y DOM, Parte 1: Intro

Acabo de ver dos videos de Paul Irish, del grupo de Google Chrome. Uno de ellos era Google Chrome Developer Tools: 12 Tricks to Develop Quicker. Aquí básicamente nos da una explicación de los Chrome Developer Tools con algunos trucos que no son tan sabidos. Interesante y útil.

Sin embargo, el video que más interesante me resultó es uno de media hora llamado HTML5, CSS3 and DOM Performance.

Este video es terriblemente informativo sobre varias temáticas. Quiero en el futuro poder dedicarle un poco más de tiempo a cada una, pero mientras tanto, dejenmé hacer un resumen de las cosas que se tratan en el video:

  • Reflows: primero se habla de este concepto, relacionado a las operaciones de repintado que un navegador debe realizar. Nos cuenta el caso de Chrome y de Safari (WebKit) y de ciertas operaciones y trucos para evitar. Nos muestra cómo efectivamente podemos monitorear y mejorar esa performance.
    Herramientas relacionadas: Comandos ocultos de Chrome.
  • Animaciones CSS con aceleración por hardware: Mucho del trabajo de repintado puede hacerse de forma tal que el navegador termine delegándolo al GPU de mando en la máquina cliente. Esto trae experiencias muy distintas, y puede forzarse con pocos truquitos, que en este momento son básicamente hacks. Incluso podemos ver el efecto en ciertos dispositivos móviles.
    Herramientas relacionadas: Improving the performance of your HTML5 App (artículo), Elements Complete (demostración)
  • Animación y web workers: Mucho del trabajo que nuestro javascript hace no tiene por qué estar en el thread principal de pintado de la página, esto lleva a las páginas frizadas y funcionando lento. Para eso podemos delegar nuestra ejecución a web workers, que tienen una buena performance y es amigable con la batería.
    Herramientas relacionadas:  WebGL Field (demo)
  • Benchmarking: relacionado a todo lo anterior, necesitamos de una forma objetiva y poderosa de poder probar qué elementos son mejores. El ejemplo que Paul menciona es: realmente es más performante usar el === en lugar del == en JavaScript? Ahora tenemos la forma de probarlo fácilmente.
    Herramientas relacionadas: jsPerf (herramienta de test cases para benchmarking), BrowserScope (versión colectiva de pruebas en browsers), Benchmark.js (librería JavaScript para benchmarking y testing).
  • Build scripts: la posibilidad de automatizar el generado de los sitios puede ahorrar muchos problemas en la performance. Así como alguna vez hablamos de mod_pagespeed, Paul menciona otras alternativas.
    Herramientas relacionadas: HTML5 BoilerPlate (librería de startup para generar aplicaciones bajo buenas prácticas).

Espero poder ahondar en cada uno de estos en el futuro. Estén atentos!

Soy un zorrinito performante.

Link del día: HTML5 Snippets

Todavía me encuentro intentando aplicar los conceptos nuevos de HTML5 en algún proyecto, y  dsafortunadamente todavía no he encontrado la oportunidad. Pero sé que al momento de hacerlo, voy a dudar y voy a necesitar cierta ayuda para poder trabajar con sus nuevas características y cómo ellas se reflejan en resultados tangibles.

Para eso, muy seguramente me sea muy útil esta web llamada HTML5 Snippets (muy del estilo de Refactory), que recopila una serie de snippets de código utilizando HTML5, a veces CSS3, y no he visto aún – pero supongo que puede haber – JavaScript. El sitio está apenas comenzando su funcionamiento, con lo que no hay mucho movimiento ni contenido todavía, pero ojalá crezca pronto.

También podemos ayudar a eso loggeándonos (con Twitter) y enviando nuestros propios snippets para que figuren en la web. No sólo podemos escribirlos a mano sino que también podemos importarlos desde JSFiddle (parecido a HTML Instant pero más completo), en donde muy seguramente sea más fácil de programar.

Soy un zorrinito HTML5.

Link del día: Patrones CSS3

La magia de CSS3 nos da la posibilidad de crear una enorme cantidad de figuras complejas, y lo bueno es que son características propias del lenguaje, no se tratan de hacks o de implementaciones propias de navegadores.

Han habido quienes lo llevaron un poco más allá para crear fondos con patrones hechos exclusivamente de código CSS3, y su galería puede observarse en CSS3 Pattern Gallery. La galería es totalmente interesante e interactiva, podemos cambiar los valores que forman los patrones en las cajas de texto y crear nuevos o modificar los existentes a nuestro gusto. Como extra, también es una buena forma de practicar CSS3 de una forma muy gráfica, ¿no lo creen?

Esta galería forma parte del blog de Lea Verou, un blog sobre estándares webs y técnicas CSS, que vale la pena revisar (y cuyo diseño es envidiable).

Soy un zorrinito CSS3.