Alpha's Manifesto

La madriguera de una insignificante figurita blanquinegra.

Link del día: Mockups iPhone, funcionales!

Acordándome de cuando hablé de Create Free iPhone Apps, quería charlar sobre esta aplicación web llamada Mokk.me, una aplicación que nos permite visualmente construir elementos de un diseño gráfico para iPhone y personalizar esos elementos a gusto.

Cabe aclarar que todo este sistema funciona en nuestra máquina, quizá la única funcionalidad del servidor es guardar URLs de diseños en particular para luego poder modificarlos. El UI es bastante completo y fácil de utilizar, prácticamente todo se puede hacer con un click, así que es una experiencia muy intuitiva.

Mejor aún, del resultado que tengamos, sólo tenemos que visitar un link para verificar en nuestro iPhone cómo se ve, y luego de eso ya podemos guardar ese HTML para utilizarlo en nuestro producto. Más simple, quizá sólo sea la otra aplicación, que hace todo por nosotros.

Soy un zorrinito mobile.

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: Live.js

Para diseñar y trabajar sobre HTML, mientras más atajos tomemos, mejor. Mucho del trabajo es repetitivo, y cuando queremos aplicar estilos, la cantidad de idas y vueltas de una ventana a otra es innumerable, por lo menos, hasta que logramos la perfección del diseño original.

Ya alguien tuvo la idea de circunvalar ese problema y surgió Live.js, un script más cerca a diseñar en el navegador, que automáticamente detecta cambios en el HTML, el JavaScript, o el CSS y los aplica a la página actual.

El proyecto surgió como una desviación desde BackFire, un sistema un poco más complejo (cliente-servidor) que nos permitía guardar los cambios en CSS que hacíamos con cualquier navegador inline (como FireBug, WebKit developer toolbar, etc.).

El punto es que Live.js automatiza todo eso y nos permite trabajar en los archivos de forma directa y ver los resultados en el navegador de forma transparente. Imaginen utilizarlo en conjunto con dos monitores. La productividad se eleva una muy buena cantidad.

Soy un zorrinito en vivo.

Link del día: AngularJS

Hace poquito apareció en mi feed de Youtube una charla de Google Tech Talks llamada How to Write Clean and Testable Code. Para ser sinceros, el video dura más de una hora así que no lo ví, pero en lugar de eso busqué las diapositivas que se habían usado en él y las encontré aquí: How to write Clean and Testable Code Slides. Las diapositivas no me resultaron demasiado reveladoras tampoco pero sí resaltan algunos conceptos claves que es bueno siempre tener en mente.

Más allá de eso, en las diapositivas (y muy seguramente en la charla) se menciona a AngularJS, así que lo fui a buscar. Parece que AngularJS es un sistema de templating a través de JavaScript, pero mucho mayor que simplemente templating. Digamos que más que estar orientado en generar HTML a partir de datos, también se preocupa de la forma en que esos datos deben interactuar, de forma que, podríamos decir, también genera algo de código dinámicamente para que estos datos funcionen correctamente.

No lo he probado, pero ellos dicen que es la forma en la que debería haber sido HTML si es que hubiera sido pensado desde un principio para aplicaciones web.

¿Alguien lo probó? ¿Cuáles son sus experiencias?

Soy un zorrinito javascript.

Link del día: Simulador de iPad

Gracias a @Woork me enteré de este Simulador de iPad totalmente hecho en CSS y JS. Si lo prueban un poco se darán cuenta que la mayoría de las aplicaciones no están implementadas todavía, pero hay cosas que sí están implementadas y pueden probarse hoy, por supuesto, de la misma forma que funcionaría en un iPad real:

  • Moverse sobre las distintas pantallas (pueden usar el mouse o las teclas de dirección del teclado)
  • El botón de Sleep
  • El botón de Power
  • Sostener los iconos y cambiar su posición
  • Borrar aplicaciones
  • Safari
  • Lock/Unlock
  • Búsqueda

Es mucho y anda muy bien para ser un poco de JavaScript.

Fuera de eso, cabe aclarar que el creador de este simulador, Altyrne, tiene un blog en donde actualiza muy regularmente sobre sus experimentos con navegadores, JavaScript, HTML5 y CSS3, aparte de jQuery, animaciones, etc.

Soy un zorrinito JavaScript.

Link del día: HTML5 más profundo

Hace un tiempo ya que tuvimos un link de introducción a HTML5, como para saber de qué se trataba, y por supuesto, el tiempo ha pasado y esta nueva tecnología se ha vuelto mucho más popular. Lo bueno es que ya mucho del mismo es aplicable a los navegadores actuales, por lo que no tenemos exactamente que esperar a que el estándar sea totalmente aprobado. Al menos no si es que deseamos estar en lo último y aprovechar sus bondades.

Pero lo que es actualmente aplicable y lo que no podemos verlo en un buen artículo de InfoWold llamado How to use HTML5 on your website today, para poder adaptarnos a las nuevas capacidades. Podemos también hacer un repaso rápido a sus características gracias a An Introduction to HTML5, o ver su historia (que realmente es interesante) en A Brief History of Markup, o repasar básicamente de qué se trata HTML5 y en qué forma es importante, bajo un artículo del mismo nombre: ¿Qué demonios es HTML5 y por qué debería importarme?

Por último, y si es que estamos listos para poner manos a la obra, tendremos que tener a mano una buena cheat sheet, para no perder de vista las posibilidades que tenemos, y saber bien de qué forma debemos utilizarlas, y utilizar un código de reset HTML5 para que todos los elementos se comporten de la misma manera (aunque siendo sinceros, esto está más relacionado con CSS3).

Recuerden que aplicaciones HTML5 sobran, sientansé libres de explorar las que ya están en el mercado, que también son una muy buena fuente de aprendizaje.

Soy un zorrinito HTML5.

<Shirt> HTML </Shirt>

HTMLHey all, take a look at my new Zazzle account, here I’ll be posting stuff I can turn into collectible things. Go get your own!

For now, I only have the T <Shirt>, remarkably showing off the HTML power of what we do everyday.

Enjoy!

I’m a HTML little skunk.


Hola a todos, peguenlé una mirada a mi nueva cuenta de Zazzle, donde estaré publicando cosas que pueda usar de collecionables. ¡Consigan el suyo!

Por ahora sólo tengo el T <Shirt>, que muestra el poder del HTML que usamos día a día.

¡Disfruten!

Soy un zorrinito HTML.

Link del día: Optimización web vs. desarrollo prolijo

Hace tiempo ya estaba comentando con un colega sobre la enorme cantidad de medidas que pueden tomarse para mejorar la performance de una aplicación web. Existen miles de factores involucrados, entre los cuales hay muchas configuraciones y tweaks que pueden hacerse al servidor, pero muchos otros tienen que ver con el código en sí mismo. Sí señores, estamos hablando de HTML, CSS y JS.

El problema en este punto es que un HTML mínimo puede no ser el HTML que nuestro generador de contenidos genera. Puede que el CSS sea automatizado también, o que nuestro diseñador o desarrollador HTML no esté pensando en hacer las cosas de la forma “más mínima posible”, sino realmente trabajando en hacer que algo se vea bien y esté bien codificado. No está entre sus prioridades escribir

background: url("image.jpg") repeat top left scroll;

en lugar de

background: url(image.jpg);

Ambos son equivalentes, pero la segunda es más corta y por tanto más eficiente. Pero nuestro desarrollador debe realmente preocuparse porque el desarrollo sea correcto, que la visualización sea consistente y que sea acorde entre navegadores.

Ni hablar de JavaScript, en donde la cantidad de optimizaciones, minimizaciones y mejoras puede ser realmente importante. Alguno quiere trabajar sobre JavaScrpt minimizado? Sin duda: no.

La alternativa a la que llegamos era la de tener dos versiones de la aplicación. La de desarrollo con código normal y la de producción. Una vez que desde la de desarrollo se hicieran pruebas y quisiera hacerse un release, solo teníamos que correr una serie de herramientas que nos permitieran tener una versión minimizada y optimizada del código, bajo el riesgo de que algo se rompiera en el proceso.

Pero ahora Google acaba de publicar un módulo que han desarrollado para Apache 2.2, llamado mod_pagespeed, el cual hace optimizaciones y cache en el momento de los pedidos, para optimizar los sitios web sin tener que modificar los archivos reales. Por supuesto, es altamente configurable, y podemos ver la gran cantidad de mejoras que puede realizar en el poco tiempo que tiene.

Google nos cuenta que ya está trabajando con GoDaddy para que todos sus clientes puedan utilizarlo, y con Cotendo para que esté disponible en su CDN también. Si ustedes no tienen la suerte de estar entre ellos, pueden bajarlo por cuenta propia desde la página del proyecto de PageSpeed, e instalarlo en sus propios servidores.

Soy un zorrinito acelerado.

Link del día: CSS3 para navegadores viejos

Todos sabemos que cuando queremos avanzar en las tendencias tecnológicas, muchas veces debemos dejar atrás a una serie de usuarios que no quieren o no pueden actualizar sus plataformas. Para muchos desarrolladores web, Internet Explorer es hoy el problema de dar soporte a todos los posibles usuarios, más específicamente en las versiones antiguas de este navegador. (Según parece, todavía hay gente que utiliza la versión 5.)

Gracias a un tweet de @jmma me enteré de un script llamado Selectivizr (nombres 2.0 si los hay) que simula los selectores CSS3 para IE6, IE7 e IE8. Por supuesto, ya luego podemos utilizar CSS3 y librerías JavaScript con selectores CSS3 sin problemas.

En el fondo, sabemos que no es perfecto (vean la sección “You need to know”), pero está mucho más cerca de ayudarnos a avanzar sin dejar a muchos usuarios de lado.

Soy un zorrinito compatible.

Link del día: HTML Instant

Gracias a la gente de BreakingDev me enteré de una aplicación web llamada HTML Instant, en donde podemos comenzar a maquetear HTML instantáneo, viendo los resultados ahí mismo en donde estamos trabajando.

Lo bueno es que podemos ver los resultados de forma instantánea y sin mucho trabajo, podemos codificar al mismo tiempo que vemos nuestros errores para fácilmente corregirlos. No hay siquiera por qué cambiar de ventana. La aplicación de una sola página consta también de ciertos snippets pre-armados sobre los cuales podemos trabajar más fácilmente.

Por supuesto, también acepta CSS y JavaScript.

Soy un zorrinito web.