[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,,Olá, eu sou o Lloyd Jilaiel, a trabalhar com o Marcio Galli na Mozilla Labs.
Dialogue: 0,0:00:04.90,0:00:09.71,Default,,0000,0000,0000,,Nesta pequena apresentação, vamos dar-vos uma visão geral sobre o projecto Chromeless
Dialogue: 0,0:00:09.71,0:00:13.55,Default,,0000,0000,0000,,Chromeless é uma experiência que pretende facilitar a materialização
Dialogue: 0,0:00:13.55,0:00:16.92,Default,,0000,0000,0000,,de novas ideias sobre um interface web
Dialogue: 0,0:00:16.92,0:00:19.12,Default,,0000,0000,0000,,Tenciona ser um ponto de contacto entre as pessoas,
Dialogue: 0,0:00:19.12,0:00:21.62,Default,,0000,0000,0000,,acerca de como deve ser um software para browser
Dialogue: 0,0:00:21.62,0:00:23.95,Default,,0000,0000,0000,,e como era suposto funcionar.
Dialogue: 0,0:00:23.95,0:00:26.83,Default,,0000,0000,0000,,Tecnicamente Chromless não é realmente nada de novo.
Dialogue: 0,0:00:26.83,0:00:30.13,Default,,0000,0000,0000,,O que nós fizemos foi tirar o XULrunner e o runtime da aplicação
Dialogue: 0,0:00:30.13,0:00:31.93,Default,,0000,0000,0000,,no qual o Firefox e o Thunderbird assentam
Dialogue: 0,0:00:31.93,0:00:34.74,Default,,0000,0000,0000,,e pôr uma fina camada de abstracção por cima.
Dialogue: 0,0:00:34.74,0:00:37.80,Default,,0000,0000,0000,,o que permite construir rapidamete um browser web
Dialogue: 0,0:00:37.80,0:00:42.51,Default,,0000,0000,0000,,usando tecnologias web como: html, javascript e css.
Dialogue: 0,0:00:42.51,0:00:45.41,Default,,0000,0000,0000,,No Chromeless, um simples documento html,
Dialogue: 0,0:00:45.41,0:00:48.59,Default,,0000,0000,0000,,define o interface de utilizador do próprio browser.
Dialogue: 0,0:00:48.59,0:00:50.52,Default,,0000,0000,0000,,Para melhor entender , nós estivemos a chamar este
Dialogue: 0,0:00:50.52,0:00:54.15,Default,,0000,0000,0000,,documento de html como se tratasse do codigo do browser.
Dialogue: 0,0:00:54.15,0:00:57.46,Default,,0000,0000,0000,,Assim como qualquer conteúdo web pode embeber outros sites e iframes,
Dialogue: 0,0:00:57.46,0:00:59.96,Default,,0000,0000,0000,,este código no browser também pode
Dialogue: 0,0:00:59.96,0:01:02.70,Default,,0000,0000,0000,,mas tem maiores privilégios para afectar e monitorizar
Dialogue: 0,0:01:02.70,0:01:05.15,Default,,0000,0000,0000,,o conteúdo desse iframe.
Dialogue: 0,0:01:05.15,0:01:08.04,Default,,0000,0000,0000,,Este tema de extrair de conceitos web existentes
Dialogue: 0,0:01:08.04,0:01:10.24,Default,,0000,0000,0000,,e aumenta-los apenas um pouco
Dialogue: 0,0:01:10.24,0:01:13.11,Default,,0000,0000,0000,,é a ideia basica por detrás de Chromeless.
Dialogue: 0,0:01:13.11,0:01:17.61,Default,,0000,0000,0000,,Agora, façamos uma pequena tour sobre algumas coisas que pode fazer.
Dialogue: 0,0:01:17.61,0:01:20.08,Default,,0000,0000,0000,,O que estamos a ver é na verdade um browser bastante simples
Dialogue: 0,0:01:20.08,0:01:21.82,Default,,0000,0000,0000,,mas funcional.
Dialogue: 0,0:01:21.82,0:01:24.58,Default,,0000,0000,0000,,Eis um html básico que renderiza uma caixa de texto
Dialogue: 0,0:01:24.58,0:01:27.79,Default,,0000,0000,0000,,onde poderás escrever uma URL e um iframe
Dialogue: 0,0:01:27.79,0:01:30.16,Default,,0000,0000,0000,,que poderá albergar algum conteúdo.
Dialogue: 0,0:01:30.16,0:01:32.40,Default,,0000,0000,0000,,Com o Chromeless o único codigo necessário
Dialogue: 0,0:01:32.40,0:01:34.33,Default,,0000,0000,0000,,para construir um browser é este.
Dialogue: 0,0:01:34.33,0:01:35.60,Default,,0000,0000,0000,,Vamos um pouco mais além.
Dialogue: 0,0:01:35.60,0:01:38.40,Default,,0000,0000,0000,,E se quisessemos dar a opção de alternar o modo de fullscreen?
Dialogue: 0,0:01:38.40,0:01:40.63,Default,,0000,0000,0000,,Expandir para fullscreen é algo que
Dialogue: 0,0:01:40.63,0:01:42.90,Default,,0000,0000,0000,,qualquer pagina web pode fazer.
Dialogue: 0,0:01:42.90,0:01:45.25,Default,,0000,0000,0000,,Então teremos de de ir buscar uma nova API
Dialogue: 0,0:01:45.25,0:01:47.73,Default,,0000,0000,0000,,No Chromeless, o global require function
Dialogue: 0,0:01:47.73,0:01:50.63,Default,,0000,0000,0000,,é a forma como aceder a novas APIs
Dialogue: 0,0:01:50.63,0:01:54.01,Default,,0000,0000,0000,,Neste caso vamos necessitar da biblioteca "misc"
Dialogue: 0,0:01:54.01,0:01:55.93,Default,,0000,0000,0000,,O nome "misc" é só um placeholder
Dialogue: 0,0:01:55.93,0:01:58.58,Default,,0000,0000,0000,,mas expões uma função de ecrã inteiro, a qual podemos utilizar
Dialogue: 0,0:01:58.58,0:02:01.22,Default,,0000,0000,0000,,para trocar o modo do browser
Dialogue: 0,0:02:01.22,0:02:03.64,Default,,0000,0000,0000,,invoca esta função dentro de um botão,
Dialogue: 0,0:02:03.64,0:02:05.34,Default,,0000,0000,0000,,click handler.
Dialogue: 0,0:02:05.34,0:02:07.90,Default,,0000,0000,0000,,Com apenas mais 4 linhas de código, o nosso browser agora tem
Dialogue: 0,0:02:07.90,0:02:10.93,Default,,0000,0000,0000,,um modo ecrã total funcional.
Dialogue: 0,0:02:10.93,0:02:12.97,Default,,0000,0000,0000,,A seguir, vamos tentar algo um pouco mais divertido
Dialogue: 0,0:02:12.97,0:02:14.60,Default,,0000,0000,0000,,combinando algumas ideias.
Dialogue: 0,0:02:14.60,0:02:16.96,Default,,0000,0000,0000,,Antes de tudo, o código do browser tem
Dialogue: 0,0:02:16.96,0:02:21.24,Default,,0000,0000,0000,,privilégios acrescidos pra monitorizar conteúdo web a correr em iframes.
Dialogue: 0,0:02:21.24,0:02:24.88,Default,,0000,0000,0000,,Um exemplo típico é o evento experimental DOM load
Dialogue: 0,0:02:24.88,0:02:28.68,Default,,0000,0000,0000,,que dispara quando novo conteúdo é carregado num iframe.
Dialogue: 0,0:02:28.68,0:02:31.42,Default,,0000,0000,0000,,A outra ferramenta que vamos usar é a biblioteca de DOM shot
Dialogue: 0,0:02:31.42,0:02:34.79,Default,,0000,0000,0000,,que pode tirar um instantâneo gráfico de um DOM node específico.
Dialogue: 0,0:02:34.79,0:02:37.39,Default,,0000,0000,0000,,O valor retornado da função é uma data URL que
Dialogue: 0,0:02:37.39,0:02:40.23,Default,,0000,0000,0000,,contém dados de imagem PNG embebida.
Dialogue: 0,0:02:40.23,0:02:42.63,Default,,0000,0000,0000,,Agora Marcio combinou estas duas características e um pouco de
Dialogue: 0,0:02:42.63,0:02:44.62,Default,,0000,0000,0000,,jquery pra construir este browser demonstrativo.
Dialogue: 0,0:02:44.62,0:02:48.07,Default,,0000,0000,0000,,Deixa-nos ver thumbnails de tabs abertos,
Dialogue: 0,0:02:48.07,0:02:50.94,Default,,0000,0000,0000,,com um efeito de olho-de-peixe.
Dialogue: 0,0:02:50.94,0:02:53.71,Default,,0000,0000,0000,,Decerto isto já dá uma boa ideia
Dialogue: 0,0:02:53.71,0:02:55.31,Default,,0000,0000,0000,,do que o Chromeless é.
Dialogue: 0,0:02:55.31,0:02:56.84,Default,,0000,0000,0000,,Para aprender mais, recomendamos que vá
Dialogue: 0,0:02:56.84,0:03:00.08,Default,,0000,0000,0000,,até ao Gihub e comece com o tutorial lá incluído.
Dialogue: 0,0:03:00.08,0:03:03.15,Default,,0000,0000,0000,,Enquanto algumas das APIs que aqui mostrei. podem ter mudado
Dialogue: 0,0:03:03.15,0:03:06.95,Default,,0000,0000,0000,,a ideia base por detrás do Chromeless, concerteza que não.
Dialogue: 0,0:03:06.95,0:03:08.99,Default,,0000,0000,0000,,Se tiver algo a dizer acerca do Chromeless, ou se quiser
Dialogue: 0,0:03:08.99,0:03:11.79,Default,,0000,0000,0000,,contribuir, junte-se nos locais habituais,
Dialogue: 0,0:03:11.79,0:03:13.93,Default,,0000,0000,0000,,no IRC e na nossa mailing list.
Dialogue: 0,0:03:13.93,9:59:59.99,Default,,0000,0000,0000,,OBrigado por assistir.