Categorías: Labs

HTML fuera del navegador

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks.

Entre mis amigos, soy conocido como algo de un nerd de Star Wars. Mi seudónimo por largo tiempo ha sido cfjedimaster (una combinación de dos pasiones, la otra es ColdFusion), yo trabajo en un cuarto lleno hasta los topes con juguetes de Star Wars, y de hecho he conseguido hacerme un par de tatuajes de Star Wars. Dicho eso, esa fue otra película que tuvo la mayor influencia en mi carrera actual – Tron.

Poster de Tron

Ya había descubierto un interés en las computadoras antes de eso, pero fue Tron lo que realmente cristalizó la idea para mí. De repente, me imaginé a mí mismo siendo el programador – creando programas inteligentes y dominando la red. Sí, lo sé, era nerd en ese entonces también.

Mis sueños, sin embargo, se toparon con la realidad rápidamente durante mi tiempo en la especialidad de Ciencias de Computación en la universidad. Primero, descubrí que “¡Oye, soy bueno en matemáticas!” no significa nada cuando te topas con Cálculo 3, y en segundo lugar, descubrí que no estaba muy interesado en el desempeño de uno u otro algoritmo de ordenamiento. Cambié a inglés como especialidad (siempre una buena opción) pero seguí jugando con las computadoras. Fue durante este tiempo que fui expuesto a Mosaic y la web en sus inicios.

Rápidamente salté dentro de la web dado que – lo pondré francamente – la programación era más fácil de lo que había estado expuesto. Puedo recordar LiveScript. Puedo recordar mis primeros scripts en Perl CGI. Esto no fue exactamente lo mismo que crear light cycles pero fue simple, divertido, y en realidad a la vanguardia. He dedicado un buen tiempo de mi vida adulta ahora como un desarrollador web, y mientras, ciertamente, tengo ideas de la web siendo un entorno prístino, ha sido bueno para mí (y millones de otros) y amo ver lo mucho que evoluciona en el tiempo.

Una de las formas más fascinantes en que las tecnologías web han crecido es fuera de la web misma. En este artículo, revisaremos en varias formas que podemos reusar nuestras tecnologías basadas en web (HTML, JavaScript y CSS) en entornos no basados en web. Aunque sería absurdo decir que no se debe aprender otras tecnologías, o que los estándares web funcionan en cualquier lugar y en toda situación, siento fuertemente que las habilidades detrás de la web son las que están abiertas a una gran variedad de personas en diferentes disciplinas – tengas o no un PhD en ciencias de las computación.

Móvil

Este es el punto típicamente en donde discutimos cuán importante es lo móvil, pero es 2014 y creo que ya lo tenemos claro. El desarrollo móvil ha implicado típicamente Java (Android) u Objective-C (iOS). Los desarrolladores también pueden usar estándares web para construir aplicaciones nativas. Una solución es Apache Cordova (también conocido como PhoneGap).

Cordova usa un visor de web envuelto en una aplicación nativa que permite a los desarrolladores web construir lo que típicamente se conoce como aplicaciones híbridas. Además de proporcionar una manera fácil de poner tu código HTML en una aplicación, Cordova provee una serie de diferentes plugins que te permiten hacer más de lo que una típica página web puede hacer en un dispositivo. Así por ejemplo, puedes acceder fácilmente a la cámara:

navigator.camera.getPicture(onSuccess, onFail, {
    quality: 50,
    destinationType: Camera.DestinationType.DATA_URL
});
 
function onSuccess(imageData) {
    var image = document.getElementById('myImage');
    image.src = "data:image/jpeg;base64," + imageData;
}
 
function onFail(message) {
    alert('Error: ' + message);
}

También pueden trabajar con el acelerómetro, GPS, libreta de contactos, el sistema de archivos, y más. Cordova provee una API de JavaScript que maneja la comunicación al código nativo en el back end. Lo mejor de todo, el mismo código puede ser usado para construir aplicaciones nativas para plataformas diferentes (incluyendo Firefox OS, ahora con soporte en Cordova & PhoneGap).

Para ser claros, este no es un caso de ser capaz de tomar una sitio web existente y sólo empaquetarlo. Las aplicaciones móviles son – por definición – completamente diferentes de un simple sitio web. Pero el hecho de que puedes usar tu conocimiento existente, te da una gran ventaja para empezar.

Otro ejemplo de esto (y uno que debería ser bien conocido por los lectores de este sitio) es Firefox OS. A diferencia de Cordova, los desarrolladores no tienen que envolver su HTML dentro de un contenedor visor web. El sistema operativo entero está basado en estándares web. Lo que hace a Firefox OS más fascinante es el soporte para aplicaciones alojadas. Firefox OS es una nueva plataforma, y la posibilidad que tus visitantes que estén usando un dispositivo con este sistema es probablemente baja. Pero con las aplicaciones alojadas puedes fácilmente proveer soporte para instalación en el dispositivo mientras se ejecuta tu aplicación de una URL tradicional.

Considera esta simple demo llamada INeedIt. Si visitas esta aplicación en Chrome, simplemente funciona. Si la visitas en un navegador móvil en Android o iOS – trabaja de igual forma. Pero visítala con Firefox OS y el código te preguntará si quieres instalar la aplicación. Aquí está el bloque que maneja esto.

if(!$rootScope.checkedInstall && ("mozApps" in window.navigator)) {
    var appUrl = 'http://'+document.location.host+'/manifest.webapp';
    console.log('No se ha comprobado y se puede comprobar');
    var request = window.navigator.mozApps.checkInstalled(appUrl);
 
    //silently ignore
    request.onerror = function(e) {
        console.log('Error al comprobar la instalación '+request.error.name);
    };
 
    request.onsuccess = function(e) {
        if (request.result) {
            console.log("¡App está instalada!");
        } else {
            console.log("¡App no está instalada!");
 
            if(confirm('¿Te gustaría instalar esto como una aplicación?')) {
                console.log('Bueno, intentemos instalar.');
                var installRequest = window.navigator.mozApps.install(appUrl);
 
                installRequest.onerror = function() {
                    console.log('Instalación fallida: '+this.error.name);
                    alert('Lo sentido, instalación fallida.');
                };
 
                installRequest.onsuccess = function() {
                    console.log('hecho');
                    alert('Gracias, aplicación instalada!');
                };
            }
            $rootScope.checkedInstall=true;
        }
    };
} else {
    console.log('no comprobado o no compatible');
}

¿Muy sencillo, verdad? Lo que amo de esto es que el código es 100% ignorado fuera de Firefox OS pero mejorado automáticamente para la gente que utiliza ese sistema operativo. No hay riesgo – pero obtengo el beneficio de proveerles una forma para descargar y tener mi aplicación en la pantalla de sus dispositivos.

Instalar aplicación en Firefox OS Simulator

Escritorio

Claro, todavía hay unas cuantas personas que se sientan en frente de una caja gris (o laptop) para su día a día en el trabajo. Muchas aplicaciones de escritorio han sido reemplazadas por páginas web, pero todavía hay cosas que están fuera del alcance de las aplicaciones web. Todavía hay momentos en lo que una aplicación de escritorio tiene sentido. Y afortunadamente también hay múltiples maneras de construirlas con estándares web.

¿Recuerdas el código del ejemplo que recién te mostré? ¿En el que a los usuarios de Firefox OS se les daría la oportunidad de instalar la aplicación desde una página web? Exactamente el mismo código funciona en el escritorio también. Si bien, todavía en desarrollo (de hecho, la aplicación que construí no funciona debido a un bug con la geolocalización), con el tiempo permitirá enviar tu aplicación basada en web a tanto para usuarios móviles de Firefox OS como también a los otros cientos de millones de usuarios de escritorio. Aquí está la aplicación instalada en mi propia carpeta de aplicaciones.

ineeditapp

Como dije, sin embargo, esto es todavía nuevo y necesita trabajarse un poco más antes de que puedas hacer uso activo de ello. Algo que puedes usar ahora mismo es Node Webkit. Este proyecto de código abierto te permite envolver una aplicación Node.js en un shell de escritorio. Los ejecutables pueden ser creados para Windows, Mac y Linux. Puedes tener todo el poder de una aplicación “real” de escritorio con el fácil uso de estándares web como tu plataforma. Ya hay una creciente lista de aplicaciones reales haciendo uso del framework – yo he usado algunos, incluso antes de darme cuenta que éstos usaban Node Webkit detrás de escenas.

Como ejemplo, revisa A Wizard’s Lizard, un RGP con calabozos aleatorios y gran jugabilidad.

A Wizar's Lizard

Extensiones de aplicaciones nativas

En la sección previa, cubrimos aplicaciones desarrolladas con estándares web. Hoy también hay múltiples aplicaciones construidas nativamente, que pueden ser extendidas con estándares web. Como un desarrollador web, probablemente ya estés familiarizado con los complementos de Firefox y las extensiones de Chrome. Hay un increíble ecosistema rico en extensiones de navegador para casi cualquier necesidad que puedas pensar. Lo que me interesa, sin embargo, es el movimiento para usar estándares web para abrir otros productos también.

¿Sabías que Photoshop, sí, Photoshop, ahora tiene la posibilidad de extenderse con Node.js? Denominada “Adobe Generator”, esta capa de extensibilidad habilita una interfaz basada en script para el producto. Un ejemplo de esto es la habilidad de generar recursos web de capas basadas en un simple esquema de nombres. Si alguna vez has tenido que crear manualmente recursos web, y actualizarlos, desde un PSD, apreciarás esto. La característica completa es impulsada por JavaScript y todo hace uso de una API pública con la cual puedes desarrollar. El código, y los ejemplos, están disponibles vía GitHub.

generator-screen-shot-500

¿Qué es lo que sigue?

Viniendo de la perspectiva de alguien quien ha estado en la industria por demasiado tiempo, puedo decir que me siento increíblemente afortunado que los estándares web se hayan convertido en una fuerza de innovación y creatividad. Pero no es la suerte que ha impulsado esta mejora. Esto es el trabajo duro de muchas personas, compañías y organizaciones (como Mozilla) que han creado el paisaje fértil que hoy tenemos ante nosotros. Para continuar esto, se requiere que todos estemos involucrados, evangelizar a otros y que se conviertan en defensores de una web creada por todos – para todos.

The following two tabs change content below.

AngelFQC

Web Developer at BeezNest Latino
Ingeniero de Sistemas y Computación. Desarrollador PHP. Mozilla Peru. Chamilo LMS Developer.