-
¡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.
