Alpha's Manifesto

A black and white figure's thought-hive

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

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.

Link del día: Framework HTML5 Mobile

Muchas buzzwords en el título, pero no deja de ser verdad. Hace un tiempito ya anda dando vueltas The-M-Project, bajo el título de “HTML5 JavaScript Framework, escribe aplicaciones móviles multi-plataforma”. Si eso no es prometedor, no sé qué lo es.

El proyecto aún está en estado alpha, y nos instancian a que le hagamos las modificaciones que nos plazca en GitHub para luego integrarlo al proyecto principal, si es que son buenas modificaciones, claro.

Hay una aplicación demo que tienen llamada Todo2, que es básicamente una lista de tareas, o Twitter Sample, una aplicación de búsqueda de Tweets, o mejor que nada, el Kitchen Sink, para ver un poco de todo.

Soy un zorrinito web.

Link del día: Humane.js

Vamos a seguir con otra librería JavaScript, en este caso, Humane.js. Esta en particular se trata de un sistema de envío de mensajes al usuario a través de ventanas que recuerdan mucho al lightbox, sin ser tan intrusivas, ni difíciles de utilizar en el código. Estos mensajitos automáticamente se van luego de un tiempo o podemos esperar a que el usuario realice alguna acción (para asegurarnos de que haya efectivamente leído nuestro mensaje).

Para ser sincero, no lo veo como algo revolucionario o ni siquiera nuevo, pero desde la simplicidad de su utilización hasta lo simple de su implementación (la cual podemos ver en GitHub), hace que sea ideal para implementar en dispositivos en donde el espacio es importante, y la simplicidad del mensaje también. Yo creo que uno de estos se vería muy bien en aplicaciones móviles.

Soy un zorrinito simple.

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: Flash runtime en JavaScript

Ha habido mucho debate sobre Flash últimamente, más específicamente desde que los teléfonos móviles más famosos del mercado no lo admiten como parte de la interactividad que van a brindar. Por si fuera poco, no sólo no piensan admitirlos como parte del mundo móvil sino que Apple publicó una carta abierta sobre el tema, Thoughts on Flash, en donde exponen varias razones (muchas de ellas debatibles en mi opinión) por las cuales Flash no sería una buena idea para ningún dispositivo móvil en general.

Por supuesto, los usuarios no disfrutan de esto tampoco. Sabemos que gran parte de la interactividad en muchos sitios está basada en Flash (para bien o para mal), y que hay sitios que de no ser por Flash, no funcionarían. Parecería que, afortunadamente o desafortunadamente, Flash está para quedarse.

Tobias Schneider decidió aprovechar muchas de las ventajas que se puede lograr con JavaScript, SVG y otras tecnologías relacionadas, para a través de JavaScript renderizar archivos swf (Flash) y permitir su disposición e interacción en el navegador. Esta librería se llama Gordon (muy apropiado nombre).

Desafortunadamente esta librería no soporta todo tipo de interacción Flash aún, sino que de a poco está extendiendo la cantidad de características que soporta, por ahora parecerían estar cubiertas las versiones 1 y 2 de Flash. Pueden pasar a ver los demos, o leer las notas de compatibilidad.

Soy un zorrinito flash gordon.

Link del día: JavaScript IDE para iPhone

De parte de un pequeño artículo de web.desktop.life me enteré de un pequeño proyecto llamado jscoder, el cual es un pequeño IDE (no tan pequeño si lo vemos desde el iPhone) en donde podemos codificar JavaScript y ejecutarlo allí mismo. Por si fuera poco, también disponemos de la función de autocompletar código, por ahora solo palabras clave, pero en el futuro también habrán snippets de código para utilizar.

De ocurrir errores en la ejecución del código, el teléfono nos devolverá un mensajito de error explicando qué ocurrió, y por supuesto, el código está adaptado para que este “ambiente” funcione en este dispositivo, teniendo en cuenta la orientación, el click con los dedos (“tap”) y tantas otras cosas que, claro, podemos utilizar para aprender.

Personalmente no considero demasiado productivo el hecho de programar en un dispositivo móvil (ya sabemos que escribir es difícil, encima quieren programar?), pero no deja de ser algo novedoso y que en cierta moda está demostrando las capacidades de estos dispositivos.

Soy un zorrinito móvil.

Link del día: Academia Virtual de Microsoft

Todos saben lo mucho que me apasiona poder encontrar lugares online en donde se den cursos gratuitos de forma medianamente seria, con profesionales que sepan del tema que hablan, y a veces hasta con exámenes que permitan evaluar y certificar que uno sabe lo que estudió. Mi primera aproximación a uno de estos fue con el programa Desarrollador 5 Estrellas de Microsoft (del cual todavía estoy debiendo un par de exámenes), y luego Sun Learning Connection (el cual vi muy completo pero nunca tuve tiempo suficiente de hacer cursos). Ahora me encuentro con otro más, aparte de la cantidad de links que ya he provisto antes, como el proyecto de Academic Earth, o la compilación de Free Lectures, pero no es el caso de ellos.

En este caso, se trata de la Microsoft Virtual Academy, otro de los proyectos educativos de Microsoft para mantener a la gente informada y capacitándose sobre distintas temáticas, muchas, por supuesto, relacionadas a las tecnologías que ellos desarrollan. Está relacionado al resto de la red de TechNet que ellos han creado, por lo cual todos los estudios que desarrollemos con Microsoft se van relacionando a nuestro Live ID, que utilizaremos en todos estos servicios por igual para identificarnos.

Soy un zorrinito alumno.