WEBVTT

00:00:01.668 --> 00:00:04.905
Olá, eu sou o Lloyd Jilaiel, a trabalhar com o Marcio Galli na Mozilla Labs.

00:00:04.905 --> 00:00:09.710
Nesta pequena apresentação, vamos dar-vos uma visão geral sobre o projecto Chromeless

00:00:09.710 --> 00:00:13.547
Chromeless é uma experiência que pretende facilitar a materialização

00:00:13.547 --> 00:00:16.917
de novas ideias sobre um interface web

00:00:16.917 --> 00:00:19.122
Tenciona ser um ponto de contacto entre as pessoas,

00:00:19.122 --> 00:00:21.622
acerca de como deve ser um software para browser

00:00:21.622 --> 00:00:23.954
e como era suposto funcionar.

00:00:23.954 --> 00:00:26.828
Tecnicamente Chromless não é realmente nada de novo.

00:00:26.828 --> 00:00:30.130
O que nós fizemos foi tirar o XULrunner e o runtime da aplicação

00:00:30.130 --> 00:00:31.932
no qual o Firefox e o Thunderbird assentam

00:00:31.932 --> 00:00:34.735
e pôr uma fina camada de abstracção por cima.

00:00:34.735 --> 00:00:37.804
o que permite construir rapidamete um browser web

00:00:37.804 --> 00:00:42.509
usando tecnologias web como: html, javascript e css.

00:00:42.509 --> 00:00:45.412
No Chromeless, um simples documento html,

00:00:45.412 --> 00:00:48.588
define o interface de utilizador do próprio browser.

00:00:48.588 --> 00:00:50.517
Para melhor entender , nós estivemos a chamar este

00:00:50.517 --> 00:00:54.152
documento de html como se tratasse do codigo do browser.

00:00:54.152 --> 00:00:57.457
Assim como qualquer conteúdo web pode embeber outros sites e iframes,

00:00:57.457 --> 00:00:59.960
este código no browser também pode

00:00:59.960 --> 00:01:02.696
mas tem maiores privilégios para afectar e monitorizar

00:01:02.696 --> 00:01:05.149
o conteúdo desse iframe.

00:01:05.149 --> 00:01:08.035
Este tema de extrair de conceitos web existentes

00:01:08.035 --> 00:01:10.237
e aumenta-los apenas um pouco

00:01:10.237 --> 00:01:13.106
é a ideia basica por detrás de Chromeless.

00:01:13.106 --> 00:01:17.611
Agora, façamos uma pequena tour sobre algumas coisas que pode fazer.

00:01:17.611 --> 00:01:20.080
O que estamos a ver é na verdade um browser bastante simples

00:01:20.080 --> 00:01:21.816
mas funcional.

00:01:21.816 --> 00:01:24.584
Eis um html básico que renderiza uma caixa de texto

00:01:24.584 --> 00:01:27.788
onde poderás escrever uma URL e um iframe

00:01:27.788 --> 00:01:30.157
que poderá albergar algum conteúdo.

00:01:30.157 --> 00:01:32.395
Com o Chromeless o único codigo necessário

00:01:32.395 --> 00:01:34.328
para construir um browser é este.

00:01:34.328 --> 00:01:35.596
Vamos um pouco mais além.

00:01:35.596 --> 00:01:38.403
E se quisessemos dar a opção de alternar o modo de fullscreen?

00:01:38.403 --> 00:01:40.634
Expandir para fullscreen é algo que

00:01:40.634 --> 00:01:42.903
qualquer pagina web pode fazer.

00:01:42.903 --> 00:01:45.247
Então teremos de de ir buscar uma nova API

00:01:45.247 --> 00:01:47.729
No Chromeless, o global require function

00:01:47.729 --> 00:01:50.629
é a forma como aceder a novas APIs

00:01:50.629 --> 00:01:54.014
Neste caso vamos necessitar da biblioteca "misc"

00:01:54.014 --> 00:01:55.931
O nome "misc" é só um placeholder

00:01:55.931 --> 00:01:58.585
mas expões uma função de ecrã inteiro, a qual podemos utilizar

00:01:58.585 --> 00:02:01.221
para trocar o modo do browser

00:02:01.221 --> 00:02:03.638
invoca esta função dentro de um botão,

00:02:03.638 --> 00:02:05.336
click handler.

00:02:05.336 --> 00:02:07.896
Com apenas mais 4 linhas de código, o nosso browser agora tem

00:02:07.896 --> 00:02:10.931
um modo ecrã total funcional.

00:02:10.931 --> 00:02:12.966
A seguir, vamos tentar algo um pouco mais divertido

00:02:12.966 --> 00:02:14.601
combinando algumas ideias.

00:02:14.601 --> 00:02:16.960
Antes de tudo, o código do browser tem

00:02:16.960 --> 00:02:21.241
privilégios acrescidos pra monitorizar conteúdo web a correr em iframes.

00:02:21.241 --> 00:02:24.878
Um exemplo típico é o evento experimental DOM load

00:02:24.878 --> 00:02:28.682
que dispara quando novo conteúdo é carregado num iframe.

00:02:28.682 --> 00:02:31.418
A outra ferramenta que vamos usar é a biblioteca de DOM shot

00:02:31.418 --> 00:02:34.788
que pode tirar um instantâneo gráfico de um DOM node específico.

00:02:34.788 --> 00:02:37.391
O valor retornado da função é uma data URL que

00:02:37.391 --> 00:02:40.227
contém dados de imagem PNG embebida.

00:02:40.227 --> 00:02:42.629
Agora Marcio combinou estas duas características e um pouco de

00:02:42.629 --> 00:02:44.624
jquery pra construir este browser demonstrativo.

00:02:44.624 --> 00:02:48.072
Deixa-nos ver thumbnails de tabs abertos,

00:02:48.072 --> 00:02:50.938
com um efeito de olho-de-peixe.

00:02:50.938 --> 00:02:53.707
Decerto isto já dá uma boa ideia

00:02:53.707 --> 00:02:55.308
do que o Chromeless é.

00:02:55.308 --> 00:02:56.844
Para aprender mais, recomendamos que vá

00:02:56.844 --> 00:03:00.080
até ao Gihub e comece com o tutorial lá incluído.

00:03:00.080 --> 00:03:03.150
Enquanto algumas das APIs que aqui mostrei. podem ter mudado

00:03:03.150 --> 00:03:06.954
a ideia base por detrás do Chromeless, concerteza que não.

00:03:06.954 --> 00:03:08.989
Se tiver algo a dizer acerca do Chromeless, ou se quiser

00:03:08.989 --> 00:03:11.792
contribuir, junte-se nos locais habituais,

00:03:11.792 --> 00:03:13.933
no IRC e na nossa mailing list.

00:03:13.933 --> 99:59:59.999
OBrigado por assistir.