¡Hola! Soy Lloyd Hilaiel trabajando con Marcio Galli en Mozilla Labs.
En este corto video que hemos compilado te daremos un vistazo del proyecto Chromeless.
Chromeless es un experimento que apunta a hacer más fácil jugar
con nuevas ideas en torno a la interfaz de usuario en la web.
Este intenta incluir a más gente en la conversación
acerca de cómo debería lucir un programa de navegación web.
Y cómo debería funcionar.
Técnicamente, Chromeless no es realmente algo tan nuevo.
Lo que hemos hecho es tomar XULrunner, el tiempo de ejecución de aplicación sobre
el cual Firefox y Thunderbird están construidos
y colocar una delgada capa de abstracción encima.
Esta capa hace posible construir rápidamente un explorador web
usando tecnologías web como html, javascript y css.
Ahora en Chromeless un sencillo documento html
define la interfaz de usuario del explorador en sí.
Para hacer más fácil la conversación hemos estado llamando
este documento html inicial "código de explorador".
Este explorador puede, al igual que el contenido web normal,
integrar también otros sitios y cuadros flotantes
pero tiene mayores privilegios para afectar y monitorear
contenido dentro de ese marco.
Este tema de tomar conceptos web existentes
y aumentarlos sólo un poco
es la idea básica detrás de Chromeless.
Ahora, hagamos un recorrido por algunas de las cosas que puedes hacer.
Lo que estás mirando ahora es un explorador web
muy simple, pero funcional
Aquí puedes ver html básico que genera un cuadro
de texto donde puedes introducir una url y un marco
donde irá el contenido web.
Con Chromeless esto es en realidad todo el código que necesitas
para construir un explorador.
Llevémoslo un poco más lejos.
¿Y si quisiéramos dejar al usuario activar el modo a pantalla completa?
Expandirse a pantalla completa es, obviamente, algo
que una página web promedio no puede hacer.
Así que tenemos que llamar una nueva API.
Dentro de Chromeless, el modo de acceder a nuevas API's,
es por medio de la función global "require".
En este caso usaremos "require" con la biblioteca "misc".
El nombre "misc" es sólo un contenedor
pero expone una función de pantalla completa que podemos usar
para cambiar el modo del explorador.
Invocará esta función dentro de un manejador
de click de botón.
Con 4 líneas más de código nuestro explorador ahora tiene
tiene un modo de pantalla completa funcional.
Así que a continuación intentaremos algo un poco más lúdico
combinando un par de nuevas ideas.
Primero, como mencionamos antes, el código
tiene mayores privilegios para monitorear el contenido web ejecutándose en marcos.
Un ejemplo de esto es el evento experimental "dom load"
que es disparado cuando se carga nuevo contenido en un marco.
La otra herramienta que usaremos será la biblioteca "dom shot"
la cual puede obtener instantáneas gráficas de un nodo "dom" específico.
El valor devuelto por la función es una url que
contiene datos de imagen png integrados.
Ahora Marcio combinó estas dos características y un poco de
jquery para construir este explorador de demostración.
Este te deja ver miniaturas de pestañas abiertas,
con un efecto de ojo de pez.
Esperamos que esto te permita comprender muy bien
de qué se trata Chromeless.
Para saber más te recomendamos
obtener el código desde github y empezar con el tutorial incluido.
Mientras que algunas de las API's que hemos mostrado aquí podrían haber cambiado,
las ideas básicas detrás de Chromeless de seguro no lo han hecho.
Si tienes ideas acerca de Chromeless, o te gustaría
contribuir, puedes unirte a la batalla en los lugares usuales,
por IRC y nuestra lista de correo.
Gracias por la atención.