[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.67,0:00:04.90,Default,,0000,0000,0000,,¡Hola! Soy Lloyd Hilaiel trabajando con Marcio Galli en Mozilla Labs.
Dialogue: 0,0:00:04.90,0:00:09.71,Default,,0000,0000,0000,,En este corto video que hemos compilado te daremos un vistazo del proyecto Chromeless.
Dialogue: 0,0:00:09.71,0:00:13.55,Default,,0000,0000,0000,,Chromeless es un experimento que apunta a hacer más fácil jugar
Dialogue: 0,0:00:13.55,0:00:16.92,Default,,0000,0000,0000,,con nuevas ideas en torno a la interfaz de usuario en la web.
Dialogue: 0,0:00:16.92,0:00:19.12,Default,,0000,0000,0000,,Este intenta incluir a más gente en la conversación
Dialogue: 0,0:00:19.12,0:00:21.62,Default,,0000,0000,0000,,acerca de cómo debería lucir un programa de navegación web.
Dialogue: 0,0:00:21.62,0:00:23.95,Default,,0000,0000,0000,,Y cómo debería funcionar.
Dialogue: 0,0:00:23.95,0:00:26.83,Default,,0000,0000,0000,,Técnicamente, Chromeless no es realmente algo tan nuevo.
Dialogue: 0,0:00:26.83,0:00:30.13,Default,,0000,0000,0000,,Lo que hemos hecho es tomar XULrunner, el tiempo de ejecución de aplicación sobre
Dialogue: 0,0:00:30.13,0:00:31.93,Default,,0000,0000,0000,,el cual Firefox y Thunderbird están construidos
Dialogue: 0,0:00:31.93,0:00:34.74,Default,,0000,0000,0000,,y colocar una delgada capa de abstracción encima.
Dialogue: 0,0:00:34.74,0:00:37.80,Default,,0000,0000,0000,,Esta capa hace posible construir rápidamente un explorador web
Dialogue: 0,0:00:37.80,0:00:42.51,Default,,0000,0000,0000,,usando tecnologías web como html, javascript y css.
Dialogue: 0,0:00:42.51,0:00:45.41,Default,,0000,0000,0000,,Ahora en Chromeless un sencillo documento html
Dialogue: 0,0:00:45.41,0:00:48.59,Default,,0000,0000,0000,,define la interfaz de usuario del explorador en sí.
Dialogue: 0,0:00:48.59,0:00:50.52,Default,,0000,0000,0000,,Para hacer más fácil la conversación hemos estado llamando
Dialogue: 0,0:00:50.52,0:00:54.15,Default,,0000,0000,0000,,este documento html inicial "código de explorador".
Dialogue: 0,0:00:54.15,0:00:57.46,Default,,0000,0000,0000,,Este explorador puede, al igual que el contenido web normal,
Dialogue: 0,0:00:57.46,0:00:59.96,Default,,0000,0000,0000,,integrar también otros sitios y cuadros flotantes
Dialogue: 0,0:00:59.96,0:01:02.70,Default,,0000,0000,0000,,pero tiene mayores privilegios para afectar y monitorear
Dialogue: 0,0:01:02.70,0:01:05.15,Default,,0000,0000,0000,,contenido dentro de ese marco.
Dialogue: 0,0:01:05.15,0:01:08.04,Default,,0000,0000,0000,,Este tema de tomar conceptos web existentes
Dialogue: 0,0:01:08.04,0:01:10.24,Default,,0000,0000,0000,,y aumentarlos sólo un poco
Dialogue: 0,0:01:10.24,0:01:13.11,Default,,0000,0000,0000,,es la idea básica detrás de Chromeless.
Dialogue: 0,0:01:13.11,0:01:17.61,Default,,0000,0000,0000,,Ahora, hagamos un recorrido por algunas de las cosas que puedes hacer.
Dialogue: 0,0:01:17.61,0:01:20.08,Default,,0000,0000,0000,,Lo que estás mirando ahora es un explorador web
Dialogue: 0,0:01:20.08,0:01:21.82,Default,,0000,0000,0000,,muy simple, pero funcional
Dialogue: 0,0:01:21.82,0:01:24.58,Default,,0000,0000,0000,,Aquí puedes ver html básico que genera un cuadro
Dialogue: 0,0:01:24.58,0:01:27.79,Default,,0000,0000,0000,,de texto donde puedes introducir una url y un marco
Dialogue: 0,0:01:27.79,0:01:30.16,Default,,0000,0000,0000,,donde irá el contenido web.
Dialogue: 0,0:01:30.16,0:01:32.40,Default,,0000,0000,0000,,Con Chromeless esto es en realidad todo el código que necesitas
Dialogue: 0,0:01:32.40,0:01:34.33,Default,,0000,0000,0000,,para construir un explorador.
Dialogue: 0,0:01:34.33,0:01:35.60,Default,,0000,0000,0000,,Llevémoslo un poco más lejos.
Dialogue: 0,0:01:35.60,0:01:38.40,Default,,0000,0000,0000,,¿Y si quisiéramos dejar al usuario activar el modo a pantalla completa?
Dialogue: 0,0:01:38.40,0:01:40.63,Default,,0000,0000,0000,,Expandirse a pantalla completa es, obviamente, algo
Dialogue: 0,0:01:40.63,0:01:42.90,Default,,0000,0000,0000,,que una página web promedio no puede hacer.
Dialogue: 0,0:01:42.90,0:01:45.25,Default,,0000,0000,0000,,Así que tenemos que llamar una nueva API.
Dialogue: 0,0:01:45.25,0:01:47.73,Default,,0000,0000,0000,,Dentro de Chromeless, el modo de acceder a nuevas API's,
Dialogue: 0,0:01:47.73,0:01:50.63,Default,,0000,0000,0000,,es por medio de la función global "require".
Dialogue: 0,0:01:50.63,0:01:54.01,Default,,0000,0000,0000,,En este caso usaremos "require" con la biblioteca "misc".
Dialogue: 0,0:01:54.01,0:01:55.93,Default,,0000,0000,0000,,El nombre "misc" es sólo un contenedor
Dialogue: 0,0:01:55.93,0:01:58.58,Default,,0000,0000,0000,,pero expone una función de pantalla completa que podemos usar
Dialogue: 0,0:01:58.58,0:02:01.22,Default,,0000,0000,0000,,para cambiar el modo del explorador.
Dialogue: 0,0:02:01.22,0:02:03.64,Default,,0000,0000,0000,,Invocará esta función dentro de un manejador
Dialogue: 0,0:02:03.64,0:02:05.34,Default,,0000,0000,0000,,de click de botón.
Dialogue: 0,0:02:05.34,0:02:07.90,Default,,0000,0000,0000,,Con 4 líneas más de código nuestro explorador ahora tiene
Dialogue: 0,0:02:07.90,0:02:10.93,Default,,0000,0000,0000,,tiene un modo de pantalla completa funcional.
Dialogue: 0,0:02:10.93,0:02:12.97,Default,,0000,0000,0000,,Así que a continuación intentaremos algo un poco más lúdico
Dialogue: 0,0:02:12.97,0:02:14.60,Default,,0000,0000,0000,,combinando un par de nuevas ideas.
Dialogue: 0,0:02:14.60,0:02:16.96,Default,,0000,0000,0000,,Primero, como mencionamos antes, el código
Dialogue: 0,0:02:16.96,0:02:21.24,Default,,0000,0000,0000,,tiene mayores privilegios para monitorear el contenido web ejecutándose en marcos.
Dialogue: 0,0:02:21.24,0:02:24.88,Default,,0000,0000,0000,,Un ejemplo de esto es el evento experimental "dom load"
Dialogue: 0,0:02:24.88,0:02:28.68,Default,,0000,0000,0000,,que es disparado cuando se carga nuevo contenido en un marco.
Dialogue: 0,0:02:28.68,0:02:31.42,Default,,0000,0000,0000,,La otra herramienta que usaremos será la biblioteca "dom shot"
Dialogue: 0,0:02:31.42,0:02:34.79,Default,,0000,0000,0000,,la cual puede obtener instantáneas gráficas de un nodo "dom" específico.
Dialogue: 0,0:02:34.79,0:02:37.39,Default,,0000,0000,0000,,El valor devuelto por la función es una url que
Dialogue: 0,0:02:37.39,0:02:40.23,Default,,0000,0000,0000,,contiene datos de imagen png integrados.
Dialogue: 0,0:02:40.23,0:02:42.63,Default,,0000,0000,0000,,Ahora Marcio combinó estas dos características y un poco de
Dialogue: 0,0:02:42.63,0:02:44.62,Default,,0000,0000,0000,,jquery para construir este explorador de demostración.
Dialogue: 0,0:02:44.62,0:02:48.07,Default,,0000,0000,0000,,Este te deja ver miniaturas de pestañas abiertas,
Dialogue: 0,0:02:48.07,0:02:50.94,Default,,0000,0000,0000,,con un efecto de ojo de pez.
Dialogue: 0,0:02:50.94,0:02:53.71,Default,,0000,0000,0000,,Esperamos que esto te permita comprender muy bien
Dialogue: 0,0:02:53.71,0:02:55.31,Default,,0000,0000,0000,,de qué se trata Chromeless.
Dialogue: 0,0:02:55.31,0:02:56.84,Default,,0000,0000,0000,,Para saber más te recomendamos
Dialogue: 0,0:02:56.84,0:03:00.08,Default,,0000,0000,0000,,obtener el código desde github y empezar con el tutorial incluido.
Dialogue: 0,0:03:00.08,0:03:03.15,Default,,0000,0000,0000,,Mientras que algunas de las API's que hemos mostrado aquí podrían haber cambiado,
Dialogue: 0,0:03:03.15,0:03:06.95,Default,,0000,0000,0000,,las ideas básicas detrás de Chromeless de seguro no lo han hecho.
Dialogue: 0,0:03:06.95,0:03:08.99,Default,,0000,0000,0000,,Si tienes ideas acerca de Chromeless, o te gustaría
Dialogue: 0,0:03:08.99,0:03:11.79,Default,,0000,0000,0000,,contribuir, puedes unirte a la batalla en los lugares usuales,
Dialogue: 0,0:03:11.79,0:03:13.93,Default,,0000,0000,0000,,por IRC y nuestra lista de correo.
Dialogue: 0,0:03:13.93,9:59:59.99,Default,,0000,0000,0000,,Gracias por la atención.