1 00:00:01,668 --> 00:00:04,905 Hallo, ik ben Lloyd Hilaiel met Marcio Galli in Mozilla Labs. 2 00:00:04,905 --> 00:00:09,710 In deze korte video die we hebben gemaakt geven we je een overzicht van het Chromeless project. 3 00:00:09,710 --> 00:00:13,547 Chromeless is een experiment dat zich er op richt het makkelijker te maken om te sleutelen 4 00:00:13,547 --> 00:00:16,917 met nieuwe ideeën met betrekking tot het uiterlijk van de webbrowser. 5 00:00:16,917 --> 00:00:19,122 Het probeert meer mensen te betrekken bij de discussie 6 00:00:19,122 --> 00:00:21,622 over hoe web browsers eruit zouden moeten zien. 7 00:00:21,622 --> 00:00:23,954 En hoe het zou moeten werken. 8 00:00:23,954 --> 00:00:26,828 Technisch gezien is Chromeless niet echt nieuw. 9 00:00:26,828 --> 00:00:30,130 We hebben XULrunner, de applicatie-runtime waar 10 00:00:30,130 --> 00:00:31,932 Firefox en Thunderbird op gebouwd zijn, gepakt 11 00:00:31,932 --> 00:00:34,735 en er een kleine laag software bovenop gedaan. 12 00:00:34,735 --> 00:00:37,804 Deze laag maakt het mogelijk om snel een webbrowser te maken 13 00:00:37,804 --> 00:00:42,509 met technologieën als HTML, javascript en CSS. 14 00:00:42,509 --> 00:00:45,412 In Chromeless bepaalt een enkel HTML document 15 00:00:45,412 --> 00:00:48,588 hoe het uiterlijk van de browser eruit ziet. 16 00:00:48,588 --> 00:00:50,517 Om het wat makkelijker te maken noemen we 17 00:00:50,517 --> 00:00:54,152 dit HTML document de 'browser code'. 18 00:00:54,152 --> 00:00:57,457 Net zoals normale web-content andere sites en iframes kan insluiten 19 00:00:57,457 --> 00:00:59,960 kan deze 'browser code' dat ook 20 00:00:59,960 --> 00:01:02,696 maar het heeft meer rechten om de content 21 00:01:02,696 --> 00:01:05,149 in dat iframe te bewerken en beheren. 22 00:01:05,149 --> 00:01:08,035 Dit principe, het pakken van bestaande web-concepten 23 00:01:08,035 --> 00:01:10,237 en ze een klein beetje aan te passen, 24 00:01:10,237 --> 00:01:13,106 is het idee achter Chromeless. 25 00:01:13,106 --> 00:01:17,611 Laten we eens kijken naar wat je kunt doen. 26 00:01:17,611 --> 00:01:20,080 Waar je nu naar kijkt is een hele simpele, 27 00:01:20,080 --> 00:01:21,816 maar werkende webbrowser. 28 00:01:21,816 --> 00:01:24,584 Hier zie je eenvoudige HTML wat een invoerveld 29 00:01:24,584 --> 00:01:27,788 maakt waar je een URL kan intypen en een iframe 30 00:01:27,788 --> 00:01:30,157 waar deze web-content komt te staan. 31 00:01:30,157 --> 00:01:32,395 Met Chromeless is dit echt alle code die je moet schrijven om 32 00:01:32,395 --> 00:01:34,328 een browser te maken. 33 00:01:34,328 --> 00:01:35,596 Laten we een stapje verder gaan. 34 00:01:35,596 --> 00:01:38,403 Wat als we de gebruiker volledig-scherm modus willen laten gebruiken. 35 00:01:38,403 --> 00:01:40,634 Uitbreiden naar volledig scherm is natuurlijk 36 00:01:40,634 --> 00:01:42,903 iets wat een gemiddelde pagina niet kan doen. 37 00:01:42,903 --> 00:01:45,247 Dus moeten we er een nieuwe API bij halen. 38 00:01:45,247 --> 00:01:47,729 Binnen Chromeless is de algemene 'Require' functie 39 00:01:47,729 --> 00:01:50,629 de manier om nieuwe API's te bereiken. 40 00:01:50,629 --> 00:01:54,014 In dit geval hebben we de 'misc' library nodig. 41 00:01:54,014 --> 00:01:55,931 De naam 'misc' is gewoon een tijdelijke aanduiding 42 00:01:55,931 --> 00:01:58,585 maar het stelt een volledig - scherm functie bloot die we kunnen gebruiken 43 00:01:58,585 --> 00:02:01,221 om de mode van de browser te activeren. 44 00:02:01,221 --> 00:02:03,638 Het zal deze functie aanroepen in een knop, 45 00:02:03,638 --> 00:02:05,336 klik-handler. 46 00:02:05,336 --> 00:02:07,896 Met 4 extra regels code heeft onze browser nu 47 00:02:07,896 --> 00:02:10,931 een functionele volledig-scherm mode. 48 00:02:10,931 --> 00:02:12,966 Laten we nu iets meer speels proberen 49 00:02:12,966 --> 00:02:14,601 waarbij we een paar nieuwe ideeën combineren. 50 00:02:14,601 --> 00:02:16,960 Zoals we al eerder gezegd hebben, heeft de 'browser code' 51 00:02:16,960 --> 00:02:21,241 meer voorrechten om de content in iframes te beheren. 52 00:02:21,241 --> 00:02:24,878 Een voorbeeld hiervan is de experimentele 'dom load', 53 00:02:24,878 --> 00:02:28,682 die wordt gebruikt als er nieuw content in een iframe wordt geladen. 54 00:02:28,682 --> 00:02:31,418 De andere tool die we gaan gebruiken is de 'dom shot' library, 55 00:02:31,418 --> 00:02:34,788 wat een grafische momentopname van een 'dom node' kan maken. 56 00:02:34,788 --> 00:02:37,391 De teruggekeerde waarde van de functie is een data-URL die 57 00:02:37,391 --> 00:02:40,227 ingesloten PNG afbeelding-data bevat. 58 00:02:40,227 --> 00:02:42,629 Marcio heeft deze en een beetje 59 00:02:42,629 --> 00:02:44,624 jquery gecombineerd om deze demonstratie browser te maken. 60 00:02:44,624 --> 00:02:48,072 Het laat je thumbnails van geopende tabbladen zien, 61 00:02:48,072 --> 00:02:50,938 met een fisheye effect. 62 00:02:50,938 --> 00:02:53,707 Hopelijk geeft dit je een goed idee over 63 00:02:53,707 --> 00:02:55,308 wat Chromeless nou eigenlijk is. 64 00:02:55,308 --> 00:02:56,844 Om meer te leren raden we je aan 65 00:02:56,844 --> 00:03:00,080 de code van github te halen en te beginnen met de bijgesloten handleiding. 66 00:03:00,080 --> 00:03:03,150 Hoewel sommige API's die ik je heb laten zien misschien veranderd zijn, 67 00:03:03,150 --> 00:03:06,954 zijn de basis ideeën achter Chromeless dat zeker niet. 68 00:03:06,954 --> 00:03:08,989 Als je ideeën hebt over Chromeless, of zou willen 69 00:03:08,989 --> 00:03:11,792 bijdragen, kan je je bij de groep aansluiten op de gebruikelijke plaatsen, 70 00:03:11,792 --> 00:03:13,933 op IRC en onze mailing list. 71 00:03:13,933 --> 99:59:59,999 Bedankt voor het kijken.