Return to Video

Introducing Chromeless

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

Spanish subtitles

Revisions Compare revisions