1 Wat voor extra opties heeft HTML5 ten opzichte van de vorige versies van HTML? Verslag PWS (Versie 1.7) Gemaakt door Stefan Bloemendaal & Kevin Kerk...
HFD 6: Conclusie (samenvatting deelvragen en hoofdvraag). o o o o
Wat is HTML? (Deelvraag) – Pag. 21 Waarom een nieuwe versie van HTML5? (Deelvraag) – Pag. 21 Wat zijn de voordelen van HTML5? (Deelvraag) – Pag. 21 Hoe maak je een website in HTML5? (Deelvraag) – Pag. 22 ‐ 24
Zie minicursus op website, verslag bevat alleen welke functies besproken worden, in welke video ze besproken worden, in welke pagina je ze kan testen en de compatibiliteit per browser.
o Wat voor extra opties heeft HTML5 ten opzichte van de vorige versies van HTML? (Hoofdvraag) – Pag. 25
HFD 7: Bronvermelding. Pag. 26
HFD 8: Bijlagen (usb‐stick, en logboek + extra’s). Pag. 27 ‐ 29 2 Verslag PWS HTML5 – Stefan Bloemendaal & Kevin Kerkhoven ‐ 2011
HFD 1: Inleiding PWS HTML5.
Indeling PWS verslag en website. Indeling verslag Het PWS verslag van de website is opgedeeld in 8 hoofdstukken: 1. Inleiding PWS HTML5. Hoe het verslag en de website is ingedeeld, waarom wij dit onderwerp hebben gekozen, belangrijke informatie (compatibiliteit met websites etc.). 2. Hoofdvraag + deelvragen met korte omschrijving. Welke deelvragen en hoofdvraag wij bij dit PWS hebben bedacht, ieder voorzien van een korte omschrijving. 3. Achtergrondinformatie deelvragen. De door ons getypte tekst op onze website die uitgebreid antwoord geeft op de deelvragen. 4. Beschrijving eindproduct. Bevat schetsen met toelichting, veranderingen sinds de launch van de website en hoe/waarom het eindproduct (de website) deze lay‐out heeft gekregen. Hoe functioneert het eindproduct. 5. Leerpunten (opgeloste problemen). Welke problemen wij tegenkwamen tijdens het bouwen van de website en wat we hiervan geleerd hebben. 6. Conclusie (samenvatting deelvragen + hoofdvraag). Samenvattingen tekst van website (korte antwoorden op deelvragen) + antwoord hoofdvraag. 7. Bronvermelding. Welke sites, software en services wij gebruikt hebben om ons doel (de website) te realiseren. 8. Bijlagen (usb‐stick en logboek + extra’s). Het logboek geeft aan wie er aan het PWS heeft gewerkt, hoelang en wanneer de persoon aan het PWS heeft gewerkt en wat er precies gedaan is. Usb‐stick bevat: Website, Google Chrome Portable (Aanbevolen webbrowser voor onze site), Nieuwste versie van het verslag (beschikbaar op PDF en DOCX). Extra’s: Originele schetsen, Aparte Excel‐sheet van het logboek (Op usb), oudere versies van de website (ingepakt in RAR‐bestand op usb) en originele instructievideo’s die ook op YouTube beschikbaar zijn (op usb in aparte map).
3 Verslag PWS HTML5 – Stefan Bloemendaal & Kevin Kerkhoven ‐ 2011
Indeling website De website bestaat uit 9 pagina’s: Home, Wat is HTML?, Waarom HTML5?, Voordelen HTML5, Minicursus HTML5 (hierin de pagina’s Minicursus HTML5 basis, Minicursus HTML5 nieuw, Testfuncties CSS3) en Downloadlink verslag PWS (zie plaatje hieronder).
Waarom PWS over HTML5? Wij hadden veel moeite om een goed onderwerp te kiezen voor het profielwerkstuk. Eerst wilden we een “game‐ontwikkeling guide” maken met behulp van Game Maker, maar we begonnen toch te twijfelen of dat wel nuttig en haalbaar was. Daarnaast had een ander groepje al ongeveer hetzelfde onderwerp gekozen. Toen dachten we eraan om een iPhone app te maken voor het rooster (omdat dit soms zo klunzig kan werken met Safari) en ook om een handleiding te schrijven over hoe men iPhone apps maakt. Het jammere is, dat dit niet of nauwelijks mogelijk was met Windows. Er zijn wel programma’s voor Windows die het mogelijk maken om iPhone apps te maken, maar die kosten geld en het resultaat is niet altijd super. Apple heeft een gratis programma om apps te maken maar die is alleen voor MacOS beschikbaar. Wij beschikken geen van beide over een Mac computer. Android apps zouden ook niet mogelijk zijn, we beschikken geen van beide over een telefoon met Android OS. Daarna hebben we er nog over nagedacht om een programma te maken voor Windows zelf, maar we konden niet beslissen wat voor soort programma we gingen maken, want er is al zoveel op de markt beschikbaar. We zaten klem, totdat K. van Opstal (docent informatica, Stanislas College Westplantsoen, Delft) ons een tip gaf over HTML5. We waren al gewend om websites met XHTML te maken, dus we wisten er al wat van af. Daarnaast is het gloednieuw en goed uitvoerbaar op ieder platform. Het is nuttig, interessant en leuk. Dus daarom hebben wij gekozen voor HTML5. We hebben bij dit verslag een website gebouwd met HTML5 en CSS3 en we hebben ook een logboek bijgehouden.
4 Verslag PWS HTML5 – Stefan Bloemendaal & Kevin Kerkhoven ‐ 2011
Belangrijke informatie Alle basisfuncties van HTML en CSS worden ondersteunt door alle recente browsers. Maar HTML5 en CSS3 zijn nog gloednieuw, vandaar dat niet iedere browser alle nieuwe functies ondersteunt. Voor deze website hebben we geprobeerd de belangrijkste nieuwe functies te gebruiken die compatible zijn met de nieuwste browsers, hieronder verstaan we: IE9/Firefox 4+/Safari 5/Opera 11 en Chrome 5. De compatibiliteit van iedere functie wordt per browser aangegeven in HFD5 en bij de functie‐tests op de website. Er zijn ook enkele functies die per browser op een iets andere manier toegepast worden, dit wordt ook aangegeven bij de functiebeschrijving van HFD5. Wij hebben besloten om HTML5 niet met IE10 te testen aangezien deze browser nog in bèta is.
Bij CSS3 zijn soms prefixen nodig om enkele browsers goed te laten werken, hieronder verstaan we: Firefox: ‐moz‐, Chrome/Safari: ‐webkit‐, Opera: ‐0‐, Internet Explorer: ‐ms‐. Als je deze fixen voorbij ziet komen in W3schools (de pagina waar we naar verwijzen in onze CSS3 testpagina) weet je dat deze prefixen voor de desbetreffende browser gebruikt zijn. Om het voor u (en ons) niet te ingewikkeld te maken, raden wij de nieuwste versie van Google Chrome aan. Alle functies die in deze website en verslag gebruikt en beschreven worden zijn compatible met deze browser. Een goed alternatief voor Google Chrome is de nieuwste versie van Mozilla Firefox. Wij proberen onze site en verslag zo recent mogelijk te houden om de compatibiliteit met de recentste browsers weer te geven, dit lukt niet altijd omdat het een tijd duurt om iedere functie uitvoerig te testen, onze excuses hiervoor! Een oplossing voor dit probleem is http://www.html5test.com, deze site geeft precies aan welke HTML5‐functies uw browser ondersteunt! Het geeft ook informatie over mobiele browsers zoals Safari voor iOS (Apple).
5 Verslag PWS HTML5 – Stefan Bloemendaal & Kevin Kerkhoven ‐ 2011
HFD 2: Hoofdvraag en deelvragen met korte omschrijving. Hoofdvraag: Wat voor extra opties heeft HTML5 ten opzichte van de vorige versies van HTML? (Deze vraag wordt beantwoord in hoofdstuk 6 met behulp van de deelvragen.)
Deelvraag 1: Wat is HTML? (Uitleg HTML, wat is het? Hoe wordt het toegepast? Wie heeft het ontworpen?)
Deelvraag 2: Waarom een nieuwe versie van HTML? (Oude functies van HTML met de nieuwe vergelijken, verbeteringen opsommen.)
Deelvraag 3: Wat zijn de voordelen van HTML5? (Voordelen opsommen van het gebruik van HTML5.)
Deelvraag 4: Hoe maak je een website met HTML5? (In website: Uitleg alle basisfuncties en enkele belangrijke nieuwere functies van HTML5 door middel van YouTube video’s en verwijzing naar W3schools pagina’s voor het leren van CSS3. Op de website staan ook testpagina’s voor zowel de nieuwe functies uit HTML5 als de nieuwe functies in CSS3. In verslag: Het verslag geeft alleen maar aan welke tags er besproken worden, wat ze precies doen, in welke video ze staan en of ze compatible zijn met de recente browsers.)
6 Verslag PWS HTML5 – Stefan Bloemendaal & Kevin Kerkhoven ‐ 2011
HFD 3: Achtergrondinformatie deelvragen.
Tekst van pagina “Wat is HTML?” "HTML, een opmaaktaal van het internet!" HTML (HyperText Markup Language) is een beroemde opmaaktaal van het internet. Vele websites gebruiken deze opmaaktaal. Denk bijvoorbeeld aan de roosters van vele scholen, waaronder van het Stanislas College en het Grotius, deze zijn ook geschreven in HTML. Natuurlijk is HTML niet de enige opmaaktaal die beschikbaar is op het internet. Denk bijvoorbeeld aan PHP (Hypertext PreProcessor). De meeste sites die alleen maar gemaakt zijn met HTML zien er een beetje saai uit. Behalve de opmaak van een website kan er niet gek veel worden gedaan. Zo waren video's zonder Flash-plugin nog niet mogelijk tot de komst van HTML5. Denk ook aan games, deze worden meestal "Flash-games" genoemd en zijn vrij simpel, maar de naam zegt het al: er is toch Flash voor nodig. Zo heb je ook Javascript-plugins en Quicktime-plugins en nog veel meer. Omdat we het hier alleen over HTML hebben gebruiken we geen van deze plugins in deze website. De mogelijkheden met alleen maar HTML zijn dus niet eindeloos, ongeacht welke versie. Voor een uitgebreide webpagina zoals bijvoorbeeld YouTube of Newgrounds zijn er veel meer middelen nodig dan alleen HTML. Je kan HTML een beetje vergelijken met Microsoft Office Word, je kan tekst plaatsen, lettertype wijzigen, bepalen waar alles komt te staan, alles een leuk kleurtje geven en afbeeldingen erbij plaatsen. Daarnaast kan je meerdere pagina's maken en linken naar andere websites. Maar door de komst van HTML5 zijn er wel veel mogelijkheden bijgekomen, HTML5 wordt ook steeds populairder: YouTube heeft bijvoorbeeld al een HTML5-player en vele smartphones, waaronder de Apple iPhone en de Samsung Galaxy, bieden al HTML5 support aan.
7 Verslag PWS HTML5 – Stefan Bloemendaal & Kevin Kerkhoven ‐ 2011
HTML websites worden meestal niet gemaakt met handige programmaatjes zoals Word, meestal wordt alles uitvoerig getypt in de opmaaktaal van HTML5. Hoe dit moet zie je in de Minicursus HTML5. Hier worden zowel de basis als de nieuwe elementen van HTML5 uitgelegd.
HTML en CSS Om de HTML een beetje "kleur" en "stijl" te geven, kan gebruik worden gemaakt van het style commando in de HTML. Het enige nadeel hieraan is dat je voor iedere pagina weer dezelfde (of een deels aangepaste) style commando moet toevoegen. Het zou makkelijker zijn om alle pagina's te linken naar een bestand die de style commando's bevat. Daarom gebruikt men CSS (Cascading Style Sheet), het bestand bevat alle style commando's die de pagina nodig heeft. De basisfuncties en de nieuwe functies van CSS3 kan je vinden in de Minicursus HTML5. Hier staat een testpagina waar je de CSS3 functies kan testen.
De geschiedenis van HTML HTML werd in 1991 bedacht en ontwikkeld door Tim Berners-Lee om belangrijke documenten toegankelijk te maken (zoals de documenten van Genève en CERN). Toen werd SGML (Standard Generalized Markup Language) gebruikt om websites goed weer te geven. In 1993 werd de eerste webbrowser die HTML kon weergeven uitgegegen: Mosaic, door NCSA. In 1995 bracht W3C HTML 2.0 uit, dat was de eerste specificatie van HTML die als officieel kan worden beschouwd. Toen ging het snel.
Door de "browseroorlog" tussen de browsers van Netscape en Microsoft kwamen er regelmatig nieuwe versies van HTML uit. Hieronder volgt een lijstje van alle uitgegeven versies en aanpassingen van de SGMLversies van HTML: · HTML (gepubliceerd als IETF-'draft', juli 1993) · HTML 2.0 (gepubliceerd als RFC 1866, november 1995) · formulieren in HTML (gepubliceerd als RFC 1867, november 1995)
8 Verslag PWS HTML5 – Stefan Bloemendaal & Kevin Kerkhoven ‐ 2011
· tabellen in HTML (gepubliceerd als RFC 1842, mei 1996) · client-side image maps in HTML (gepubliceerd als RFC 1980, augustus 1996) · internationalisatie van HTML (gepubliceerd als RFC 2070, januari 1997) · HTML 3.0 (gepubliceerd als IETF-'draft', april 1995), nooit algemeen geïmplementeerd in browsers · HTML 3.2 (gepubliceerd als W3C-aanbeveling, januari 1997), een poging om de gemeenschappelijke features in browsers te beschrijven · HTML 4.0 (gepubliceerd als W3C-aanbeveling, december 1997), een geactualiseerde poging, met drie versies (strict, transitional en frameset) · HTML 4.01 (gepubliceerd als W3C-aanbeveling, januari 1999), voor kleine verbeteringen · Verdere verbetering van HTML 4.01 (gepubliceerd door W3C tot in 2001) · ISO/IEC 15445:2000, de publicatie van HTML 4.01 strict als ISO-standaard · HTML 5 (in ontwikkeling) Dan volgt nu een lijst met alle XML-versies van HTML: · XHTML 1.0 (gepubliceerd als W3C-aanbeveling, januari 2000 met een revisie in augustus 2002), een bewerking van HTML 4.01 voor XML · XHTML 1.1 (gepubliceerd als W3C-aanbeveling, mei 2001), bevat kleine wijzigingen en ondersteunt modularisatie · XHTML 2.0, (in ontwikkeling) dat niet compatibel is met XHTML 1.0 · XHTML 5, (in ontwikkeling) de XML-versie van HTML5 (Bron: Wikipedia)
W3C kiest altijd een nieuwe standaard, omdat HTML5 niet volledig klaar is, is dit nog niet de HTML-standaard, maar CSS3 is nu wel de CSS-standaard.
Tekst van pagina “Waarom HTML5?” Nieuwe Functies HTML5 HTML5 is een verbeterde versie van zijn voorgangers. HTML5 introduceert nieuwe functies. Deze nieuwe functies zorgen ervoor dat het voor de gebruiker én voor de maker van de site het een stuk overzichtelijker wordt. Omdat er een hoop nieuwe tags zijn binnen HTML5 wordt de sheet waarin de maker de code schrijft een stuk overzichtelijker omdat er nu meer tags zijn voor een specifieke dingen. Hierdoor wordt het wel een stuk lastiger om te leren, maar als je al de tags eenmaal onder de knie hebt werkt het een stuk fijner. Zoals al eerder vermeld, is HTML5 ook handiger voor de gebruiker. HTML5 heeft namelijk iets wat zijn voorgaande versies niet hadden. Speciale tags die je kunt toepassen, om zo een interactieve lay-out te maken, zonder gebruik te maken van Flash. Zo kan de gebruiker bijvoorbeeld het kader waarin de tekst staat verkleinen of vergroten. Dit doet de gebruiker door rechts onderin het driehoekje te bewegen. Probeer het maar eens uit op deze pagina!
9 Verslag PWS HTML5 – Stefan Bloemendaal & Kevin Kerkhoven ‐ 2011
Ook is er een video tag waarmee de gebruiker een video kan afspelen in de browser zelf, zonder eerst doorgelinkt te worden. Al deze dingen helpen de gebruiker en de maker om de omgang met HTML5 makkelijker te maken. Ook kan met de iframe tag gebruiken om YouTube video's af te spelen met HTML5 video, Het is hetzelfde principe als de video tag, alleen wordt er nu gebruikt gemaakt van het internet. In plaats van dat de video op de server wordt opgeslagen, linkt de website nu naar YouTube zodat de website de benodigde gegevens kan binnenhalen om zo de video te weergeven op de website. YouTube moet wel eerst zo ingesteld zijn om HTML5 video weer te geven, anders wordt de Flash variant gebruikt. De Flash variant is nog wel compatibel met oudere browsers, HTML5 uiteraard niet.
Snelheid van HTML5 HTML5 kan er ook voor zorgen dat web-pagina's sneller worden geladen dan voorheen. Dit komt omdat er flinke verbeteringen zijn op het gebied van Document Object Model (DOM). De makers van HTML5 hebben er ook voor gezorgd dat je web-applicaties op het internet kunt gebruiken zonder dat je een internet verbinding hebt. Want iedereen heeft wel eens het probleem gehad dat je opeens geen internet meer had. Daarom hebben de makers van HTML5 iets bedacht, bij het eerste bezoek aan de desbetreffende web-applicatie worden alle benodigde bestanden gedownload. Wanneer je deze web-applicatie dan bezoekt terwijl je geen internet hebt, kun je toch aan de gang omdat je alle benodigde bestanden hebt gedownload. Al de wijzigingen die je toe hebt gepast tijdens je bezoek aan de web-applicatie worden opgeslagen, de eerst volgende keer dat je die web-applicatie bezoekt wanneer je wel internet hebt, worden alle wijzigingen naar de desbetreffende server gestuurd en opgeslagen.
10 Verslag PWS HTML5 – Stefan Bloemendaal & Kevin Kerkhoven ‐ 2011
Tekst van pagina “Voordelen HTML5” HTML5 heeft een nieuwe structuur! HTML5 herkent nu beter de "structuur" van een webpagina wat verbeteringen kan geven bij het weergeven van elementen, tot deze structuur behoren: <section> (sectie) (begin),
