Return to Video

Introdução ao Chromeless

  • 0:02 - 0:05
    Olá, eu sou o Lloyd Jilaiel, a trabalhar com o Marcio Galli na Mozilla Labs.
  • 0:05 - 0:10
    Nesta pequena apresentação, vamos dar-vos uma visão geral sobre o projecto Chromeless
  • 0:10 - 0:14
    Chromeless é uma experiência que pretende facilitar a materialização
  • 0:14 - 0:17
    de novas ideias sobre um interface web
  • 0:17 - 0:19
    Tenciona ser um ponto de contacto entre as pessoas,
  • 0:19 - 0:22
    acerca de como deve ser um software para browser
  • 0:22 - 0:24
    e como era suposto funcionar.
  • 0:24 - 0:27
    Tecnicamente Chromless não é realmente nada de novo.
  • 0:27 - 0:30
    O que nós fizemos foi tirar o XULrunner e o runtime da aplicação
  • 0:30 - 0:32
    no qual o Firefox e o Thunderbird assentam
  • 0:32 - 0:35
    e pôr uma fina camada de abstracção por cima.
  • 0:35 - 0:38
    o que permite construir rapidamete um browser web
  • 0:38 - 0:43
    usando tecnologias web como: html, javascript e css.
  • 0:43 - 0:45
    No Chromeless, um simples documento html,
  • 0:45 - 0:49
    define o interface de utilizador do próprio browser.
  • 0:49 - 0:51
    Para melhor entender , nós estivemos a chamar este
  • 0:51 - 0:54
    documento de html como se tratasse do codigo do browser.
  • 0:54 - 0:57
    Assim como qualquer conteúdo web pode embeber outros sites e iframes,
  • 0:57 - 1:00
    este código no browser também pode
  • 1:00 - 1:03
    mas tem maiores privilégios para afectar e monitorizar
  • 1:03 - 1:05
    o conteúdo desse iframe.
  • 1:05 - 1:08
    Este tema de extrair de conceitos web existentes
  • 1:08 - 1:10
    e aumenta-los apenas um pouco
  • 1:10 - 1:13
    é a ideia basica por detrás de Chromeless.
  • 1:13 - 1:18
    Agora, façamos uma pequena tour sobre algumas coisas que pode fazer.
  • 1:18 - 1:20
    O que estamos a ver é na verdade um browser bastante simples
  • 1:20 - 1:22
    mas funcional.
  • 1:22 - 1:25
    Eis um html básico que renderiza uma caixa de texto
  • 1:25 - 1:28
    onde poderás escrever uma URL e um iframe
  • 1:28 - 1:30
    que poderá albergar algum conteúdo.
  • 1:30 - 1:32
    Com o Chromeless o único codigo necessário
  • 1:32 - 1:34
    para construir um browser é este.
  • 1:34 - 1:36
    Vamos um pouco mais além.
  • 1:36 - 1:38
    E se quisessemos dar a opção de alternar o modo de fullscreen?
  • 1:38 - 1:41
    Expandir para fullscreen é algo que
  • 1:41 - 1:43
    qualquer pagina web pode fazer.
  • 1:43 - 1:45
    Então teremos de de ir buscar uma nova API
  • 1:45 - 1:48
    No Chromeless, o global require function
  • 1:48 - 1:51
    é a forma como aceder a novas APIs
  • 1:51 - 1:54
    Neste caso vamos necessitar da biblioteca "misc"
  • 1:54 - 1:56
    O nome "misc" é só um placeholder
  • 1:56 - 1:59
    mas expões uma função de ecrã inteiro, a qual podemos utilizar
  • 1:59 - 2:01
    para trocar o modo do browser
  • 2:01 - 2:04
    invoca esta função dentro de um botão,
  • 2:04 - 2:05
    click handler.
  • 2:05 - 2:08
    Com apenas mais 4 linhas de código, o nosso browser agora tem
  • 2:08 - 2:11
    um modo ecrã total funcional.
  • 2:11 - 2:13
    A seguir, vamos tentar algo um pouco mais divertido
  • 2:13 - 2:15
    combinando algumas ideias.
  • 2:15 - 2:17
    Antes de tudo, o código do browser tem
  • 2:17 - 2:21
    privilégios acrescidos pra monitorizar conteúdo web a correr em iframes.
  • 2:21 - 2:25
    Um exemplo típico é o evento experimental DOM load
  • 2:25 - 2:29
    que dispara quando novo conteúdo é carregado num iframe.
  • 2:29 - 2:31
    A outra ferramenta que vamos usar é a biblioteca de DOM shot
  • 2:31 - 2:35
    que pode tirar um instantâneo gráfico de um DOM node específico.
  • 2:35 - 2:37
    O valor retornado da função é uma data URL que
  • 2:37 - 2:40
    contém dados de imagem PNG embebida.
  • 2:40 - 2:43
    Agora Marcio combinou estas duas características e um pouco de
  • 2:43 - 2:45
    jquery pra construir este browser demonstrativo.
  • 2:45 - 2:48
    Deixa-nos ver thumbnails de tabs abertos,
  • 2:48 - 2:51
    com um efeito de olho-de-peixe.
  • 2:51 - 2:54
    Decerto isto já dá uma boa ideia
  • 2:54 - 2:55
    do que o Chromeless é.
  • 2:55 - 2:57
    Para aprender mais, recomendamos que vá
  • 2:57 - 3:00
    até ao Gihub e comece com o tutorial lá incluído.
  • 3:00 - 3:03
    Enquanto algumas das APIs que aqui mostrei. podem ter mudado
  • 3:03 - 3:07
    a ideia base por detrás do Chromeless, concerteza que não.
  • 3:07 - 3:09
    Se tiver algo a dizer acerca do Chromeless, ou se quiser
  • 3:09 - 3:12
    contribuir, junte-se nos locais habituais,
  • 3:12 - 3:14
    no IRC e na nossa mailing list.
  • 3:14 -
    OBrigado por assistir.
Title:
Introdução ao Chromeless
Video Language:
English
Duration:
03:16

Portuguese subtitles

Revisions Compare revisions