1
00:00:01,668 --> 00:00:04,905
Hola! Em dic Lloyd Hilaiel i estic treballant amb Marcio Galli a Mozilla Labs.

2
00:00:04,905 --> 00:00:09,710
En aquest curt vídeo que hem compilat farem una ullada al projecte Chromeless.

3
00:00:09,710 --> 00:00:13,547
Chromeless és un experiment que apunta a facilitar el jugar

4
00:00:13,547 --> 00:00:16,917
amb noves idees al voltant de la interfície d'usuari en la web.

5
00:00:16,917 --> 00:00:19,122
intenta incluir a més gent en la conversa

6
00:00:19,122 --> 00:00:21,622
sobre com hauria de ser un programa de navegació web.

7
00:00:21,622 --> 00:00:23,954
I de com hauria de funcionar

8
00:00:23,954 --> 00:00:26,828
Tècnicament, Chromeless no és realment res de nou.

9
00:00:26,828 --> 00:00:30,130
El que hem fet és agafar XULrunner, el temps d'ejecució de aplicació sobre

10
00:00:30,130 --> 00:00:31,932
els quals Firefox i Thunderbird estàn construïts

11
00:00:31,932 --> 00:00:34,735
i posar una prima capa d'abstracció per sobre.

12
00:00:34,735 --> 00:00:37,804
La capa fa possible construir ràpidament un explorador web

13
00:00:37,804 --> 00:00:42,509
fent servir tecnologies web com html, javascript i css.

14
00:00:42,509 --> 00:00:45,412
Ara en Chromeless un senzill document html

15
00:00:45,412 --> 00:00:48,588
defineix la interfície d'usuari de l'explorador mateix.

16
00:00:48,588 --> 00:00:50,517
Per fer més fàcil la comunicació hem estat anomenant

17
00:00:50,517 --> 00:00:54,152
el document html inicial "codi d'explorador".

18
00:00:54,152 --> 00:00:57,457
Ara tal com altre contingut web normal pot integrar llocs i quadres flotants,

19
00:00:57,457 --> 00:00:59,960
Aquest explorador també ho pot integrar

20
00:00:59,960 --> 00:01:02,696
però té majors privilegis per a afectar i monitorejar

21
00:01:02,696 --> 00:01:05,149
contingut dins aquest marc.

22
00:01:05,149 --> 00:01:08,035
Aquest tema d'agafar conceptos web ja existents

23
00:01:08,035 --> 00:01:10,237
i augmentar-los una mica

24
00:01:10,237 --> 00:01:13,106
és la idea bàsica de Chromeless.

25
00:01:13,106 --> 00:01:17,611
Ara, fem un recorregut per algunes de las cosas que pot fer.

26
00:01:17,611 --> 00:01:20,080
El que estàs mirant ara és un explorador web

molt simple,

27
00:01:20,080 --> 00:01:21,816
però funcional

28
00:01:21,816 --> 00:01:24,584
Aquí pots veure html bàsic que genera un quadre

29
00:01:24,584 --> 00:01:27,788
de text on pots introduir una url i un marc

30
00:01:27,788 --> 00:01:30,157
on anar al contingut web.

31
00:01:30,157 --> 00:01:32,395
Amb Chromeless és en realitat tot el codi que necessites

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

33
00:01:34,328 --> 00:01:35,596
Portem-lo una mica mes lluny.

34
00:01:35,596 --> 00:01:38,403
I si volem deixar a l'usuari activar el mode a pantalla completa?

35
00:01:38,403 --> 00:01:40,634
Expandir-se a pantalla completa és, òbviament, quelcom

36
00:01:40,634 --> 00:01:42,903
que una pàgina web normal no pot fer.

37
00:01:42,903 --> 00:01:45,247
Així que hem de obrir una nova API.

38
00:01:45,247 --> 00:01:47,729
Dintre de Chromeless, el mode d'accedir a noves API's,

39
00:01:47,729 --> 00:01:50,629
es fa mitjançant la funció "global require".

40
00:01:50,629 --> 00:01:54,014
En aquest cas farem servir la "biblioteca misc".

41
00:01:54,014 --> 00:01:55,931
El nom "misc" és només un contenidor

42
00:01:55,931 --> 00:01:58,585
però exposa una funció de pantalla completa que podem usar

43
00:01:58,585 --> 00:02:01,221
per canviar el mode de l'explorador.

44
00:02:01,221 --> 00:02:03,638
Invocarà la funció dintre d'un manejador

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

46
00:02:05,336 --> 00:02:07,896
Amb 4 línies més de codi el nostre explorador ara te

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

48
00:02:10,931 --> 00:02:12,966
Així que a continuació intentarem alguna cosa una mica més lúdica

49
00:02:12,966 --> 00:02:14,601
combinant un parell de noves ideas.

50
00:02:14,601 --> 00:02:16,960
Primer, com mencionarem abans, el codi

51
00:02:16,960 --> 00:02:21,241
té majors privilegis per a monitorejar el contingut web ejecutant-se en marcs.

52
00:02:21,241 --> 00:02:24,878
Un exemple és el esdeveniment experimental "dom load"

53
00:02:24,878 --> 00:02:28,682
que s'activa quan es carrega nou contingut en un marc.

54
00:02:28,682 --> 00:02:31,418
L'altra ferramenta que usarem serà la biblioteca "dom shot"

55
00:02:31,418 --> 00:02:34,788
la qual pot obtenir instantànies gràfiques d'un node "dom" específic.

56
00:02:34,788 --> 00:02:37,391
El valor afegit per la funció és una url que

57
00:02:37,391 --> 00:02:40,227
contenint dades d'imatge png integrades.

58
00:02:40,227 --> 00:02:42,629
Ara Marcio combina les dues característiques i una mica de

59
00:02:42,629 --> 00:02:44,624
jquery per construir aquest explorador de demostració.

60
00:02:44,624 --> 00:02:48,072
Et deixa veure miniatures de pestanyes obertes,

61
00:02:48,072 --> 00:02:50,938
amb un efecte d'ull de peix.

62
00:02:50,938 --> 00:02:53,707
Esperem que això et permetrà comprendre molt bé

63
00:02:53,707 --> 00:02:55,308
en què consisteix Chromeless.

64
00:02:55,308 --> 00:02:56,844
Per saber més et recomanem

65
00:02:56,844 --> 00:03:00,080
obtenir el codi des de github i començar amb el tutorial inclòs.

66
00:03:00,080 --> 00:03:03,150
Mentre que algunes de les API's que hem mostrat aquí podrien haver canviat,

67
00:03:03,150 --> 00:03:06,954
les idees bàsiques darrere Chromeless segur que no ho han fet.

68
00:03:06,954 --> 00:03:08,989
Si tens idees sobre Chromeless, o t'agradaria

69
00:03:08,989 --> 00:03:11,792
contribuir, pots unir-te a la batalla en els llocs usuals,

70
00:03:11,792 --> 00:03:13,933
via IRC i a la nostra llista de distribució.

71
00:03:13,933 --> 99:59:59,999
Gràcies per l'atenció.