Return to Video

Introducing Chromeless

  • 0:02 - 0:05
    Hej, jag är Lloyd Hilaiel och arbetar med Marco Galli på mozilla Labs.
  • 0:05 - 0:10
    Den här korta filmen kommer ge dig en översikt över chromeless-projektet.
  • 0:10 - 0:14
    Chromeless är ett experiment som ska göra det lättare att testa
  • 0:14 - 0:17
    ideér om webbläsarens gränssnitt.
  • 0:17 - 0:19
    Det försöker inkludera mer folk i konversationen
  • 0:19 - 0:22
    om hur webbläsare ska se ut.
  • 0:22 - 0:24
    Och hur de ska funka.
  • 0:24 - 0:27
    Tekniskt sett är Chromeless ingenting nytt.
  • 0:27 - 0:30
    Vad vi har gjort är att ta XULrunner, platformen
  • 0:30 - 0:32
    som Firefox och thunderbird är byggda på,
  • 0:32 - 0:35
    och lagt ett tunt avskiljande lager på den.
  • 0:35 - 0:38
    Detta gör det möjligt att snbbt göra en webbläsare
  • 0:38 - 0:43
    genom att använda tekniker som html, javascript och css.
  • 0:43 - 0:45
    I Chromeless definierar ett enda html dokument
  • 0:45 - 0:49
    webbläsarens användargränssnitt.
  • 0:49 - 0:51
    För att göra det enklare att prata om har vi kallat
  • 0:51 - 0:54
    html dokumentet för webbläsarkoden.
  • 0:54 - 0:57
    Precis som vanligt webbinehåll kan inbädda sajter och iframes
  • 0:57 - 1:00
    kan den här webbläsaren också göra det
  • 1:00 - 1:03
    men den har större privilegier för att påverka och övervaka
  • 1:03 - 1:05
    innehåll bredvid den iframen.
  • 1:05 - 1:08
    Det här temat om att ta existerande webbkoncept
  • 1:08 - 1:10
    och utöka dem lite grann
  • 1:10 - 1:13
    är idén bakon Chromeless.
  • 1:13 - 1:18
    Nu ska jag visa lite saker du kan göra.
  • 1:18 - 1:20
    Det du tittar på nu är en väldigt simpel
  • 1:20 - 1:22
    men funktionell webbläsare.
  • 1:22 - 1:25
    Här kan du se html som renderar ett textfält
  • 1:25 - 1:28
    där du kan skriva in en url och en iframe
  • 1:28 - 1:30
    dit webbinnehåll går.
  • 1:30 - 1:32
    Med Chromeless är det här igentligen den enda koden du behöver för att
  • 1:32 - 1:34
    göra en webbläsare.
  • 1:34 - 1:36
    Nu tar vi det lite längre.
  • 1:36 - 1:38
    Tänk om vi ville låta användaren välja fullskärmsläge.
  • 1:38 - 1:41
    Expandera till fullskärm är tydligt inget
  • 1:41 - 1:43
    som en genomsnittlig webbsida kan göra.
  • 1:43 - 1:45
    Så vi måste sätta in ett nytt API.
  • 1:45 - 1:48
    Inuti Chromeless är den globala kravfunktionen
  • 1:48 - 1:51
    hur du kan komma åt nya APIs.
  • 1:51 - 1:54
    I det här fallet behöver vi misc biblioteket.
  • 1:54 - 1:56
    Namnet misc är bara en platshållare
  • 1:56 - 1:59
    men den exponerar en fullskärmsfunktion som vi kan använda
  • 1:59 - 2:01
    för att välja läge på webbläsaren.
  • 2:01 - 2:04
    Den kommer anropa den här funktionen i en kanapp,
  • 2:04 - 2:05
    klickhanterare.
  • 2:05 - 2:08
    Med 4 kodrader till har vår webbläsare
  • 2:08 - 2:11
    ett funktionellt fullskärmsläge.
  • 2:11 - 2:13
    Nu provar vi något mer lekfullt
  • 2:13 - 2:15
    som kombinerar några nya ideér.
  • 2:15 - 2:17
    Först, som vi nämnde förut, har webbläsarkod
  • 2:17 - 2:21
    större privilegier för att övervaka webbinnehåll som kör i iframes.
  • 2:21 - 2:25
    Ett exempel på detta är den exprimentella domladdningshändelsen
  • 2:25 - 2:29
    som används när nytt innehåll laddas in i en iframe.
  • 2:29 - 2:31
    Det andra verktyget vi använder är "dom shot" biblioteket
  • 2:31 - 2:35
    som kan få en grafisk översikt över den specifika dom noden.
  • 2:35 - 2:37
    Returneringsvärdet av funktionen är en data url som
  • 2:37 - 2:40
    innehåller inbäddad pingbilddata.
  • 2:40 - 2:43
    Nu har Marcio kombinerat dessa två funktioner och en liten bit
  • 2:43 - 2:45
    jquery för att bygga denna demonstrationswebbläsare.
  • 2:45 - 2:48
    Den låter dig se förhandsgranskningar av öppna flikar
  • 2:48 - 2:51
    med en fiskögseffekt.
  • 2:51 - 2:54
    Förhoppningsvis ger det dig en ganska bra förståelse om
  • 2:54 - 2:55
    vad Chromeless handlar om.
  • 2:55 - 2:57
    För att lära dig mer rekommenderar vi att du
  • 2:57 - 3:00
    hämtar koden från github och börjar med den inkluderade handledningen.
  • 3:00 - 3:03
    Medans några APIs som jag har visat dig här kanske har ändrats.
  • 3:03 - 3:07
    Har ideérna bakom Cromeless inte det.
  • 3:07 - 3:09
    Om du har tankar om chromeless, eller vill
  • 3:09 - 3:12
    medverka, kan du gå med på dom vanliga ställena,
  • 3:12 - 3:14
    på IRC och vår e-post lista.
  • 3:14 -
    Tack för att du tittade.
Title:
Introducing Chromeless
Video Language:
English
Duration:
03:16

Swedish subtitles

Revisions