1
00:00:01,668 --> 00:00:04,905
¡Hola! Soy Lloyd Hilaiel trabajando con Marcio Galli en Mozilla Labs.

2
00:00:04,905 --> 00:00:09,710
En este corto video que hemos compilado te daremos un vistazo del proyecto Chromeless.

3
00:00:09,710 --> 00:00:13,547
Chromeless es un experimento que apunta a hacer más fácil jugar

4
00:00:13,547 --> 00:00:16,917
con nuevas ideas en torno a la interfaz de usuario en la web.

5
00:00:16,917 --> 00:00:19,122
Este intenta incluir a más gente en la conversación

6
00:00:19,122 --> 00:00:21,622
acerca de cómo debería lucir un programa de navegación web.

7
00:00:21,622 --> 00:00:23,954
Y cómo debería funcionar.

8
00:00:23,954 --> 00:00:26,828
Técnicamente, Chromeless no es realmente algo tan nuevo.

9
00:00:26,828 --> 00:00:30,130
Lo que hemos hecho es tomar XULrunner, el tiempo de ejecución de aplicación sobre

10
00:00:30,130 --> 00:00:31,932
el cual Firefox y Thunderbird están construidos

11
00:00:31,932 --> 00:00:34,735
y colocar una delgada capa de abstracción encima.

12
00:00:34,735 --> 00:00:37,804
Esta capa hace posible construir rápidamente un explorador web

13
00:00:37,804 --> 00:00:42,509
usando tecnologías web como html, javascript y css.

14
00:00:42,509 --> 00:00:45,412
Ahora en Chromeless un sencillo documento html

15
00:00:45,412 --> 00:00:48,588
define la interfaz de usuario del explorador en sí.

16
00:00:48,588 --> 00:00:50,517
Para hacer más fácil la conversación hemos estado llamando

17
00:00:50,517 --> 00:00:54,152
este documento html inicial "código de explorador".

18
00:00:54,152 --> 00:00:57,457
Este explorador puede, al igual que el contenido web normal,

19
00:00:57,457 --> 00:00:59,960
integrar también otros sitios y cuadros flotantes

20
00:00:59,960 --> 00:01:02,696
pero tiene mayores privilegios para afectar y monitorear

21
00:01:02,696 --> 00:01:05,149
contenido dentro de ese marco.

22
00:01:05,149 --> 00:01:08,035
Este tema de tomar conceptos web existentes

23
00:01:08,035 --> 00:01:10,237
y aumentarlos sólo un poco

24
00:01:10,237 --> 00:01:13,106
es la idea básica detrás de Chromeless.

25
00:01:13,106 --> 00:01:17,611
Ahora, hagamos un recorrido por algunas de las cosas que puedes hacer.

26
00:01:17,611 --> 00:01:20,080
Lo que estás mirando ahora es un explorador web

27
00:01:20,080 --> 00:01:21,816
muy simple, pero funcional

28
00:01:21,816 --> 00:01:24,584
Aquí puedes ver html básico que genera un cuadro

29
00:01:24,584 --> 00:01:27,788
de texto donde puedes introducir una url y un marco

30
00:01:27,788 --> 00:01:30,157
donde irá el contenido web.

31
00:01:30,157 --> 00:01:32,395
Con Chromeless esto es en realidad todo el código que necesitas

32
00:01:32,395 --> 00:01:34,328
para construir un explorador.

33
00:01:34,328 --> 00:01:35,596
Llevémoslo un poco más lejos.

34
00:01:35,596 --> 00:01:38,403
¿Y si quisiéramos dejar al usuario activar el modo a pantalla completa?

35
00:01:38,403 --> 00:01:40,634
Expandirse a pantalla completa es, obviamente, algo

36
00:01:40,634 --> 00:01:42,903
que una página web promedio no puede hacer.

37
00:01:42,903 --> 00:01:45,247
Así que tenemos que llamar una nueva API.

38
00:01:45,247 --> 00:01:47,729
Dentro de Chromeless, el modo de acceder a nuevas API's,

39
00:01:47,729 --> 00:01:50,629
es por medio de la función global "require".

40
00:01:50,629 --> 00:01:54,014
En este caso usaremos "require" con la biblioteca "misc".

41
00:01:54,014 --> 00:01:55,931
El nombre "misc" es sólo un contenedor

42
00:01:55,931 --> 00:01:58,585
pero expone una función de pantalla completa que podemos usar

43
00:01:58,585 --> 00:02:01,221
para cambiar el modo del explorador.

44
00:02:01,221 --> 00:02:03,638
Invocará esta función dentro de un manejador

45
00:02:03,638 --> 00:02:05,336
de click de botón.

46
00:02:05,336 --> 00:02:07,896
Con 4 líneas más de código nuestro explorador ahora tiene

47
00:02:07,896 --> 00:02:10,931
tiene un modo de pantalla completa funcional.

48
00:02:10,931 --> 00:02:12,966
Así que a continuación intentaremos algo un poco más lúdico

49
00:02:12,966 --> 00:02:14,601
combinando un par de nuevas ideas.

50
00:02:14,601 --> 00:02:16,960
Primero, como mencionamos antes, el código

51
00:02:16,960 --> 00:02:21,241
tiene mayores privilegios para monitorear el contenido web ejecutándose en marcos.

52
00:02:21,241 --> 00:02:24,878
Un ejemplo de esto es el evento experimental "dom load"

53
00:02:24,878 --> 00:02:28,682
que es disparado cuando se carga nuevo contenido en un marco.

54
00:02:28,682 --> 00:02:31,418
La otra herramienta que usaremos será la biblioteca "dom shot"

55
00:02:31,418 --> 00:02:34,788
la cual puede obtener instantáneas gráficas de un nodo "dom" específico.

56
00:02:34,788 --> 00:02:37,391
El valor devuelto por la función es una url que

57
00:02:37,391 --> 00:02:40,227
contiene datos de imagen png integrados.

58
00:02:40,227 --> 00:02:42,629
Ahora Marcio combinó estas dos características y un poco de

59
00:02:42,629 --> 00:02:44,624
jquery para construir este explorador de demostración.

60
00:02:44,624 --> 00:02:48,072
Este te deja ver miniaturas de pestañas abiertas,

61
00:02:48,072 --> 00:02:50,938
con un efecto de ojo de pez.

62
00:02:50,938 --> 00:02:53,707
Esperamos que esto te permita comprender muy bien

63
00:02:53,707 --> 00:02:55,308
de qué se trata Chromeless.

64
00:02:55,308 --> 00:02:56,844
Para saber más te recomendamos

65
00:02:56,844 --> 00:03:00,080
obtener el código desde github y empezar con el tutorial incluido.

66
00:03:00,080 --> 00:03:03,150
Mientras que algunas de las API's que hemos mostrado aquí podrían haber cambiado,

67
00:03:03,150 --> 00:03:06,954
las ideas básicas detrás de Chromeless de seguro no lo han hecho.

68
00:03:06,954 --> 00:03:08,989
Si tienes ideas acerca de Chromeless, o te gustaría

69
00:03:08,989 --> 00:03:11,792
contribuir, puedes unirte a la batalla en los lugares usuales,

70
00:03:11,792 --> 00:03:13,933
por IRC y nuestra lista de correo.

71
00:03:13,933 --> 99:59:59,999
Gracias por la atención.