Return to Video

Een introductie van Chromeless.

  • 0:02 - 0:05
    Hallo, ik ben Lloyd Hilaiel met Marcio Galli in Mozilla Labs.
  • 0:05 - 0:10
    In deze korte video die we hebben gemaakt geven we je een overzicht van het Chromeless project.
  • 0:10 - 0:14
    Chromeless is een experiment dat zich er op richt het makkelijker te maken om te sleutelen
  • 0:14 - 0:17
    met nieuwe ideeën met betrekking tot het uiterlijk van de webbrowser.
  • 0:17 - 0:19
    Het probeert meer mensen te betrekken bij de discussie
  • 0:19 - 0:22
    over hoe web browsers eruit zouden moeten zien.
  • 0:22 - 0:24
    En hoe het zou moeten werken.
  • 0:24 - 0:27
    Technisch gezien is Chromeless niet echt nieuw.
  • 0:27 - 0:30
    We hebben XULrunner, de applicatie-runtime waar
  • 0:30 - 0:32
    Firefox en Thunderbird op gebouwd zijn, gepakt
  • 0:32 - 0:35
    en er een kleine laag software bovenop gedaan.
  • 0:35 - 0:38
    Deze laag maakt het mogelijk om snel een webbrowser te maken
  • 0:38 - 0:43
    met technologieën als HTML, javascript en CSS.
  • 0:43 - 0:45
    In Chromeless bepaalt een enkel HTML document
  • 0:45 - 0:49
    hoe het uiterlijk van de browser eruit ziet.
  • 0:49 - 0:51
    Om het wat makkelijker te maken noemen we
  • 0:51 - 0:54
    dit HTML document de 'browser code'.
  • 0:54 - 0:57
    Net zoals normale web-content andere sites en iframes kan insluiten
  • 0:57 - 1:00
    kan deze 'browser code' dat ook
  • 1:00 - 1:03
    maar het heeft meer rechten om de content
  • 1:03 - 1:05
    in dat iframe te bewerken en beheren.
  • 1:05 - 1:08
    Dit principe, het pakken van bestaande web-concepten
  • 1:08 - 1:10
    en ze een klein beetje aan te passen,
  • 1:10 - 1:13
    is het idee achter Chromeless.
  • 1:13 - 1:18
    Laten we eens kijken naar wat je kunt doen.
  • 1:18 - 1:20
    Waar je nu naar kijkt is een hele simpele,
  • 1:20 - 1:22
    maar werkende webbrowser.
  • 1:22 - 1:25
    Hier zie je eenvoudige HTML wat een invoerveld
  • 1:25 - 1:28
    maakt waar je een URL kan intypen en een iframe
  • 1:28 - 1:30
    waar deze web-content komt te staan.
  • 1:30 - 1:32
    Met Chromeless is dit echt alle code die je moet schrijven om
  • 1:32 - 1:34
    een browser te maken.
  • 1:34 - 1:36
    Laten we een stapje verder gaan.
  • 1:36 - 1:38
    Wat als we de gebruiker volledig-scherm modus willen laten gebruiken.
  • 1:38 - 1:41
    Uitbreiden naar volledig scherm is natuurlijk
  • 1:41 - 1:43
    iets wat een gemiddelde pagina niet kan doen.
  • 1:43 - 1:45
    Dus moeten we er een nieuwe API bij halen.
  • 1:45 - 1:48
    Binnen Chromeless is de algemene 'Require' functie
  • 1:48 - 1:51
    de manier om nieuwe API's te bereiken.
  • 1:51 - 1:54
    In dit geval hebben we de 'misc' library nodig.
  • 1:54 - 1:56
    De naam 'misc' is gewoon een tijdelijke aanduiding
  • 1:56 - 1:59
    maar het stelt een volledig - scherm functie bloot die we kunnen gebruiken
  • 1:59 - 2:01
    om de mode van de browser te activeren.
  • 2:01 - 2:04
    Het zal deze functie aanroepen in een knop,
  • 2:04 - 2:05
    klik-handler.
  • 2:05 - 2:08
    Met 4 extra regels code heeft onze browser nu
  • 2:08 - 2:11
    een functionele volledig-scherm mode.
  • 2:11 - 2:13
    Laten we nu iets meer speels proberen
  • 2:13 - 2:15
    waarbij we een paar nieuwe ideeën combineren.
  • 2:15 - 2:17
    Zoals we al eerder gezegd hebben, heeft de 'browser code'
  • 2:17 - 2:21
    meer voorrechten om de content in iframes te beheren.
  • 2:21 - 2:25
    Een voorbeeld hiervan is de experimentele 'dom load',
  • 2:25 - 2:29
    die wordt gebruikt als er nieuw content in een iframe wordt geladen.
  • 2:29 - 2:31
    De andere tool die we gaan gebruiken is de 'dom shot' library,
  • 2:31 - 2:35
    wat een grafische momentopname van een 'dom node' kan maken.
  • 2:35 - 2:37
    De teruggekeerde waarde van de functie is een data-URL die
  • 2:37 - 2:40
    ingesloten PNG afbeelding-data bevat.
  • 2:40 - 2:43
    Marcio heeft deze en een beetje
  • 2:43 - 2:45
    jquery gecombineerd om deze demonstratie browser te maken.
  • 2:45 - 2:48
    Het laat je thumbnails van geopende tabbladen zien,
  • 2:48 - 2:51
    met een fisheye effect.
  • 2:51 - 2:54
    Hopelijk geeft dit je een goed idee over
  • 2:54 - 2:55
    wat Chromeless nou eigenlijk is.
  • 2:55 - 2:57
    Om meer te leren raden we je aan
  • 2:57 - 3:00
    de code van github te halen en te beginnen met de bijgesloten handleiding.
  • 3:00 - 3:03
    Hoewel sommige API's die ik je heb laten zien misschien veranderd zijn,
  • 3:03 - 3:07
    zijn de basis ideeën achter Chromeless dat zeker niet.
  • 3:07 - 3:09
    Als je ideeën hebt over Chromeless, of zou willen
  • 3:09 - 3:12
    bijdragen, kan je je bij de groep aansluiten op de gebruikelijke plaatsen,
  • 3:12 - 3:14
    op IRC en onze mailing list.
  • 3:14 -
    Bedankt voor het kijken.
Title:
Een introductie van Chromeless.
Video Language:
English
Duration:
03:16
tkfanmail edited ดัตช์ subtitles for Introducing Chromeless
tkfanmail added a translation

Dutch subtitles

Revisions Compare revisions