0:00:01.668,0:00:04.905
¡Hola! Soy Lloyd Hilaiel trabajando con Marcio Galli en Mozilla Labs.

0:00:04.905,0:00:09.710
En este corto video que hemos compilado te daremos un vistazo del proyecto Chromeless.

0:00:09.710,0:00:13.547
Chromeless es un experimento que apunta a hacer más fácil jugar

0:00:13.547,0:00:16.917
con nuevas ideas en torno a la interfaz de usuario en la web.

0:00:16.917,0:00:19.122
Este intenta incluir a más gente en la conversación

0:00:19.122,0:00:21.622
acerca de cómo debería lucir un programa de navegación web.

0:00:21.622,0:00:23.954
Y cómo debería funcionar.

0:00:23.954,0:00:26.828
Técnicamente, Chromeless no es realmente algo tan nuevo.

0:00:26.828,0:00:30.130
Lo que hemos hecho es tomar XULrunner, el tiempo de ejecución de aplicación sobre

0:00:30.130,0:00:31.932
el cual Firefox y Thunderbird están construidos

0:00:31.932,0:00:34.735
y colocar una delgada capa de abstracción encima.

0:00:34.735,0:00:37.804
Esta capa hace posible construir rápidamente un explorador web

0:00:37.804,0:00:42.509
usando tecnologías web como html, javascript y css.

0:00:42.509,0:00:45.412
Ahora en Chromeless un sencillo documento html

0:00:45.412,0:00:48.588
define la interfaz de usuario del explorador en sí.

0:00:48.588,0:00:50.517
Para hacer más fácil la conversación hemos estado llamando

0:00:50.517,0:00:54.152
este documento html inicial "código de explorador".

0:00:54.152,0:00:57.457
Este explorador puede, al igual que el contenido web normal,

0:00:57.457,0:00:59.960
integrar también otros sitios y cuadros flotantes

0:00:59.960,0:01:02.696
pero tiene mayores privilegios para afectar y monitorear

0:01:02.696,0:01:05.149
contenido dentro de ese marco.

0:01:05.149,0:01:08.035
Este tema de tomar conceptos web existentes

0:01:08.035,0:01:10.237
y aumentarlos sólo un poco

0:01:10.237,0:01:13.106
es la idea básica detrás de Chromeless.

0:01:13.106,0:01:17.611
Ahora, hagamos un recorrido por algunas de las cosas que puedes hacer.

0:01:17.611,0:01:20.080
Lo que estás mirando ahora es un explorador web

0:01:20.080,0:01:21.816
muy simple, pero funcional

0:01:21.816,0:01:24.584
Aquí puedes ver html básico que genera un cuadro

0:01:24.584,0:01:27.788
de texto donde puedes introducir una url y un marco

0:01:27.788,0:01:30.157
donde irá el contenido web.

0:01:30.157,0:01:32.395
Con Chromeless esto es en realidad todo el código que necesitas

0:01:32.395,0:01:34.328
para construir un explorador.

0:01:34.328,0:01:35.596
Llevémoslo un poco más lejos.

0:01:35.596,0:01:38.403
¿Y si quisiéramos dejar al usuario activar el modo a pantalla completa?

0:01:38.403,0:01:40.634
Expandirse a pantalla completa es, obviamente, algo

0:01:40.634,0:01:42.903
que una página web promedio no puede hacer.

0:01:42.903,0:01:45.247
Así que tenemos que llamar una nueva API.

0:01:45.247,0:01:47.729
Dentro de Chromeless, el modo de acceder a nuevas API's,

0:01:47.729,0:01:50.629
es por medio de la función global "require".

0:01:50.629,0:01:54.014
En este caso usaremos "require" con la biblioteca "misc".

0:01:54.014,0:01:55.931
El nombre "misc" es sólo un contenedor

0:01:55.931,0:01:58.585
pero expone una función de pantalla completa que podemos usar

0:01:58.585,0:02:01.221
para cambiar el modo del explorador.

0:02:01.221,0:02:03.638
Invocará esta función dentro de un manejador

0:02:03.638,0:02:05.336
de click de botón.

0:02:05.336,0:02:07.896
Con 4 líneas más de código nuestro explorador ahora tiene

0:02:07.896,0:02:10.931
tiene un modo de pantalla completa funcional.

0:02:10.931,0:02:12.966
Así que a continuación intentaremos algo un poco más lúdico

0:02:12.966,0:02:14.601
combinando un par de nuevas ideas.

0:02:14.601,0:02:16.960
Primero, como mencionamos antes, el código

0:02:16.960,0:02:21.241
tiene mayores privilegios para monitorear el contenido web ejecutándose en marcos.

0:02:21.241,0:02:24.878
Un ejemplo de esto es el evento experimental "dom load"

0:02:24.878,0:02:28.682
que es disparado cuando se carga nuevo contenido en un marco.

0:02:28.682,0:02:31.418
La otra herramienta que usaremos será la biblioteca "dom shot"

0:02:31.418,0:02:34.788
la cual puede obtener instantáneas gráficas de un nodo "dom" específico.

0:02:34.788,0:02:37.391
El valor devuelto por la función es una url que

0:02:37.391,0:02:40.227
contiene datos de imagen png integrados.

0:02:40.227,0:02:42.629
Ahora Marcio combinó estas dos características y un poco de

0:02:42.629,0:02:44.624
jquery para construir este explorador de demostración.

0:02:44.624,0:02:48.072
Este te deja ver miniaturas de pestañas abiertas,

0:02:48.072,0:02:50.938
con un efecto de ojo de pez.

0:02:50.938,0:02:53.707
Esperamos que esto te permita comprender muy bien

0:02:53.707,0:02:55.308
de qué se trata Chromeless.

0:02:55.308,0:02:56.844
Para saber más te recomendamos

0:02:56.844,0:03:00.080
obtener el código desde github y empezar con el tutorial incluido.

0:03:00.080,0:03:03.150
Mientras que algunas de las API's que hemos mostrado aquí podrían haber cambiado,

0:03:03.150,0:03:06.954
las ideas básicas detrás de Chromeless de seguro no lo han hecho.

0:03:06.954,0:03:08.989
Si tienes ideas acerca de Chromeless, o te gustaría

0:03:08.989,0:03:11.792
contribuir, puedes unirte a la batalla en los lugares usuales,

0:03:11.792,0:03:13.933
por IRC y nuestra lista de correo.

0:03:13.933,9:59:59.000
Gracias por la atención.