Verslag PWS (Versie 1.7) Gemaakt door Stefan Bloemendaal & Kevin Kerkhoven. Internet link naar de site: HTML5website.webs.com

Transcriptie

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 Kerkhoven Internet link naar de site: HTML5website.webs.com Bij dit verslag hoort de bijgeleverde USB stick met website versie 1.8! HTML5Website.webs.com Alle rechten voorbehouden.

2 INHOUDSOPGAVE: HFD 1: Inleiding PWS HTML5. o Handleiding PWS verslag en website. Pag. 3 4 o Waarom PWS over HTML5? Pag. 4 o Belangrijke informatie. Pag. 5 HFD 2: Hoofdvraag en deelvragen met korte omschrijving. Pag. 6 HFD 3: Achtergrondinformatie deelvragen o Tekst van de pagina Wat is HTML? Pag. 7 9 o Tekst van de pagina Waarom HTML5? Pag o Tekst van de pagina Voordelen HTML5 Pag HFD 4: Beschrijving eindproduct. o Schetsen lay out website en toelichting Pag. 14 o Veranderingen sinds launch Pag. 15 o Functionaliteit eindproduct Pag. 16 HFD 5: Leerpunten (opgeloste problemen). Pag HFD 6: Conclusie (samenvatting deelvragen en hoofdvraag). o Wat is HTML? (Deelvraag) Pag. 21 o Waarom een nieuwe versie van HTML5? (Deelvraag) Pag. 21 o Wat zijn de voordelen van HTML5? (Deelvraag) Pag. 21 o Hoe maak je een website in HTML5? (Deelvraag) Pag 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

3 HFD 1: Inleiding PWS HTML5. Indeling verslag Indeling PWS verslag en website. 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

4 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

5 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 deze site geeft precies aan welke HTML5 functies uw browser ondersteunt! Het geeft ook informatie over mobiele browsers zoals Safari voor ios (Apple). 5

6 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

7 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

8 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

9 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

10 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

11 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) <header> (begin), <footer> (eind), <article> (artikel), <aside> (extra informatie), <nav> (navigatie; menu's). "Location location location..." Reclame op het internet, natuurlijk houden we er niet van. De kans is groot dat er op deze website ook wel wat advertenties staan door WEBS, maar misschien boeien die je helemaal niet. Misschien is de advertentie alleen bedoeld voor mensen uit Voorschoten en zit jij in Delft. Nou, aan die tijd komt een eind, met de GEOLOCATION API kan men, met Javascript en HTML5, jouw locatie te weten komen door middel van jouw IP-adres. Dit is redelijk precies, maar het kan nog steeds uitschieten. Dit werkt ook al op telefoons en kan natuurlijk ook gebruikt worden voor routebeschrijvingen, routes opslaan etc. Zelf laten we niet zien hoe deze tag werkt, omdat we ons alleen richten op HTML5, geen Javascript. Hoewel dit HTML5 gebruikt, is het NIET officieel onderdeel van HTML5. Veel kleine tags maken een groot verschil! HTML5 heeft nieuwe tags! Nieuwe inline-elementen: <mark> (markeren van tekst), <time> (om tijd of datum weer te geven), <meter> (bijvoorbeeld om de beschikbare schijfruimte weer te geven) en <progress> (om weer te geven hoeveel procent de functie klaar is met het uitvoeren van een opdracht). Nieuwe form-elementen: datetime (datum en tijd), datetimelocal (lokale datum en tijd), date (datum), month (maand), week, time (tijd), number (nummer), range (rangschikking), , url. Opslaan in de browser! (Local Storage) Het is nu ook mogelijk om kleine dingen op te slaan in de browser zelf! Dit is handig, als je bijv. geen tijd hebt om een opdracht helemaal af te maken, en het dan zo in de browser op te slaan zodat je later weer verder kan! In onze minicursus laten wij de contenteditable tag zien en kan je het testen, maar we slaan het niet op omdat we geen Javascript toepassen. Je hebt ook Client Storage, deze slaat op op de server, hoewel dit HTML5 gebruikt, is het NIET officieel onderdeel van HTML5. 11

12 Nog meer met Javascript... Door HTML5 met Javascript te combineren krijg je nog meer interactie in de websites! Omdat er veel tags zijn waarvoor deels Javascript nodig is, en HTML5 Javascript beter ondersteunt dan de vorige versies van HTML, worden de websites die met HTML5 geschreven zijn steeds meer interactief en dus minder saai om naar te kijken. Een aantal voorbeelden hiervan zijn: de bovengenoemde twee voordelen (dus Geolocation en het opslaan in een browser), het Output-element. Hiermee kan je kleine sommen berekenen op je website, maar bijvoorbeeld ook voor het weergeven van de coördinaten van je muis en het Canvaselement waarmee je een figuur kan maken in HTML5 en deze kan bewerken door middel van Javascript. Met al deze voordelen worden HTML5 websites dus veel interessanter omdat de site dan niet zo statisch is, maar juist beweeglijk. Er gebeuren meer dingen als je ergens op klikt! Audio en video, nu nog makkelijker! HTML5 is samen met audio en video de perfecte combinatie! Waarom? HTML5 geeft audio en video goed en mooi weer door middel van een speciale tag, zie de minicursus (nieuwe functies) waarin Kevin deze tag uitlegt. Door deze tag is er geen Flash meer nodig om video's weer te geven of Quicktime om audio af te spelen. Je kunt de video/audio opslaan op de website of je kunt ze uploaden op YouTube en vanaf daar laten streamen. De tweede mogelijkheid gaan wij gebruiken op onze website, om de simpele reden dat er niet genoeg online opslag ruimte is. Media kan overigens beter weergegeven worden met de <figure> tag. 12

13 Doctype was nog nooit zo makkelijk! Misschien heeft u al eens eerder een website gemaakt met een van de vorige versies van HTML. Dan zult u zich vast ook wel de doctype herinneren die bijna onmogelijk was om te onthouden. Er stonden allemaal rare dingen in die u niet snapte. In HTML5 gaat u het voortaan wel onthouden! Het is namelijk heel simpel, het enige wat u hoeft op te schrijven is het volgende: <!DOCTYPE html>. Dat is alles! Zoals u ziet is dit een stuk makkelijker te onthouden en zult u de hele doctype niet meer in een apart bestandje hoeven te plakken om het daarna weer naar de website te kopiëren die u wilt maken omdat u de tekst niet meer weet. Koppen bij elkaar! Met <hgroup> kan men nu makkelijker twee of meerdere kopjes die in verband staan met elkaar weergeven. CSS3! HTML5 gebruikt als nieuwe opmaaktaal CSS3. Deze heeft veel meer mogelijkheden! Als je deze mogelijkheden wil testen, ga dan naar de minicursus en klik op CSS3 testpagina. Op de pagina staan ook links naar een website die je leert hoe je CSS3 moet gebruiken! 13

14 HFD 4: Beschrijving eindproduct. In dit hoofdstuk staan de schetsen van de website lay out met toelichting en de veranderingen die de site ondergaan heeft sinds zijn launch. Daarnaast wordt de website uitvoerig beschreven (voldoet het aan onze eisen?). Schetsen lay out website en toelichting: Toelichting structuur van de site: Later besloten het logo onder het menu te zetten en geen zoek balk te gebruiken omdat dit niet alleen kan functioneren met HTML5/CSS3. Toelichting veranderen van logo: Origineel concept voor ons logo. Deze zou gemaakt worden in Adobe Flash, toen we het W3C HTML5 logo tegen kwamen op het internet zagen we van dit logo af, omdat we die van W3C mooier vonden. 14

15 VERANDERINGEN SINDS LAUNCH: Website versie Website versie 1.6 Deze site was binnen 4 maanden gebouwd, en het heeft sinds zijn start een flinke metamorfose ondergaan: Letters werden kleiner, tekst veranderde, er kwam meer tekst en kleur in, we begonnen de tekst in een box te zetten en we hebben ook vele fouten verbetert d.m.v. W3C Validator. Daarnaast hebben we enkele borders vernieuwd met CSS3. We hebben later besloten het originele W3C HTML5 logo te gebruiken voor de site. Dit alles met een iets lichtere zwarte achtergrond. Wij gingen voor overzichtelijkheid, duidelijkheid en elegantie. 15

16 Functionaliteit eindproduct: De website die wij in ons hoofd hadden is goed uitgepakt. Zoals de schets al laat zien, komt onze website bijna helemaal overeen met onze ideeën. De voornaamste reden dat wij deze website hebben gemaakt is natuurlijk het profielwerkstuk. Maar naast het profielwerkstuk vinden wij het allebei hartstikke leuk om websites te maken, deze website was vooral een uitdaging omdat wij voor het eerste gebruik maakte van de nieuwe HTML versie HTML5 en de nieuwe opmaaktaal CSS3. Wij hebben hier veel van geleerd en kunnen dit later zeker gebruiken omdat wij na dit jaar (ervan uitgaande dat we beide slagen) een HBO Informatica opleiding willen gaan doen. Omdat we meer wilde dan alleen een website maken, hebben wij er voor gekozen om video s te maken waarin wij uitleggen hoe je een standaard website kunt maken en deze interessanter te maken met nieuwe functies van HTML5. Voor het profielwerkstuk was het maken van een website met HTML5 alleen niet genoeg, daarom moest er ook nog een verslag bij. Dit verslag bestaat onder andere uit een hoofdvraag en drie deelvragen. Deze uitgewerkte vragen hebben wij op de website gezet en er dus voor gekozen om er een educatieve website van te maken die onze vragen beantwoord en uitlegt hoe je een simpele website kan maken in HTML met wat nieuwe functies van HTML5! Indeling website: zie blz 4! (hfd 1). 16

17 HFD 5: Leerpunten (opgeloste problemen). In dit hoofdstuk staan de problemen die we zijn tegengekomen en wat we hiervan hebben geleerd. Probleem 1: Vastlopers: Regelmatig hebben wij problemen gehad met vastlopers (programma reageert niet; script loopt vast) met Google Chrome, vooral op school. Wij gebruiken de portable versie van deze browser (V ). Deze browser loopt vooral vast met de iframe tag (Flash en HTML5 YouTube player), wij vermoeden door veiligheidsredenen, aangezien Internet Explorer 7 (op school) ook veiligheidswaarschuwingen aangeeft met de YouTube player (Flash) die gebruikt wordt met de iframe tag. Daarnaast zijn de computers op school minder sterk met de hardware die wij gebruikt hebben. Hiervan hebben wij geleerd dat geen browser perfect is, er zullen voorlopig nog vele bugs voorkomen met het gebruik van HTML5, maar met browserupdates worden deze vast opgelost. Hardware speelt ook een grote rol bij het weergeven van internetpagina s. Probleem 2: CSS menu: Het maken van een menu met enkel CSS brengt nadelen met zich mee. Wij wilden een blockmenu, waarin het menu in blokken is verdeeld en uitschuift als de cursor hierover heen beweegt. Het probleem was dat iedere browser hier anders op reageerde: als het bij Internet Explorer netjes en recht stond, stond het bij Firefox schuin en andersom. Daarom hebben we gekozen voor een simpel maar elegant inline menu. Dit menu bevind zich op een regel in een zwarte balk bovenaan de pagina. De tekst van het menu is wit, als je erover heen beweegt wordt deze rood. Simpel, maar zeer netjes en goed compatibel. Hiervan hebben wij geleerd dat compatibiliteit en simpelheid een stuk belangrijker is dan eye candy. Overzicht hebben op een webpagina is belangrijk. 17

18 Probleem 3: Het grote W3C CSS3 Validator fiasco: Ons idee was om een W3C CSS Checked banner naast het HTML5 banner in de footer te zetten, maar dit is niet door gegaan. Toen wij onze CSS wilde nakijken met de W3C CSS Validator kregen wij vele fouten naar ons hoofd geslingerd, zie de lijst hieronder: (59) URI : style.css 23 #css3 Eigenschap transform bestaat niet : rotate(4deg ) 24 #css3 Eigenschap ms transform bestaat niet : rotate(4deg ) 25 #css3 Eigenschap moz transform bestaat niet : rotate(4deg ) 26 #css3 Eigenschap webkit transform bestaat niet : rotate(4deg ) 27 #css3 Eigenschap o transform bestaat niet : rotate(4deg ) 35 #css3transition Eigenschap transition bestaat niet : width 2s 36 #css3transition Eigenschap moz transition bestaat niet : width 2s 37 #css3transition Eigenschap webkit transition bestaat niet : width 2s 38 #css3transition Eigenschap o transition bestaat niet : width 2s 51 #css3stilstaandeanimatie Eigenschap animation name bestaat niet : first 52 #css3stilstaandeanimatie Eigenschap animation duration bestaat niet : 5s 53 #css3stilstaandeanimatie Eigenschap animation timing function bestaat niet : linear 54 #css3stilstaandeanimatie Eigenschap animation delay bestaat niet : 0 55 #css3stilstaandeanimatie Eigenschap animation iteration count bestaat niet : infinite 56 #css3stilstaandeanimatie Eigenschap animation direction bestaat niet : alternate 57 #css3stilstaandeanimatie Eigenschap animation play state bestaat niet : running 59 #css3stilstaandeanimatie Eigenschap moz animation name bestaat niet : first 60 #css3stilstaandeanimatie Eigenschap moz animation duration bestaat niet : 5s 61 #css3stilstaandeanimatie Eigenschap moz animation timing function bestaat niet : linear 62 #css3stilstaandeanimatie Eigenschap moz animation delay bestaat niet : 0 63 #css3stilstaandeanimatie Eigenschap moz animation iteration count bestaat niet : infinite 64 #css3stilstaandeanimatie Eigenschap moz animation direction bestaat niet : alternate 65 #css3stilstaandeanimatie Eigenschap moz animation play state bestaat niet : running 67 #css3stilstaandeanimatie Eigenschap webkit animation name bestaat niet : first 68 #css3stilstaandeanimatie Eigenschap webkit animation duration bestaat niet : 5s 69 #css3stilstaandeanimatie Eigenschap webkit animation timing function bestaat niet : linear 70 #css3stilstaandeanimatie Eigenschap webkit animation delay bestaat niet : 0 71 #css3stilstaandeanimatie Eigenschap webkit animation iteration count bestaat niet : infinite 72 #css3stilstaandeanimatie Eigenschap webkit animation direction bestaat niet : alternate 73 #css3stilstaandeanimatie Eigenschap webkit animation play state bestaat niet : running 76 Sorry, de at is niet geimplementeerd. 82 Sorry, de at moz keyframes is niet geimplementeerd. 88 Sorry, de at webkit keyframes is niet geimplementeerd. 99 #css3bewegendeanimatie Eigenschap animation name bestaat niet : second 100 #css3bewegendeanimatie Eigenschap animation duration bestaat niet : 5s 101 #css3bewegendeanimatie Eigenschap animation timing function bestaat niet : linear 102 #css3bewegendeanimatie Eigenschap animation delay bestaat niet : #css3bewegendeanimatie Eigenschap animation iteration count bestaat niet : infinite 104 #css3bewegendeanimatie Eigenschap animation direction bestaat niet : alternate 105 #css3bewegendeanimatie Eigenschap animation play state bestaat niet : running 107 #css3bewegendeanimatie Eigenschap moz animation name bestaat niet : second 108 #css3bewegendeanimatie Eigenschap moz animation duration bestaat niet : 5s 18

19 109 #css3bewegendeanimatie Eigenschap moz animation timing function bestaat niet : linear 110 #css3bewegendeanimatie Eigenschap moz animation delay bestaat niet : 2s 111 #css3bewegendeanimatie Eigenschap moz animation iteration count bestaat niet : infinite 112 #css3bewegendeanimatie Eigenschap moz animation direction bestaat niet : alternate 113 #css3bewegendeanimatie Eigenschap moz animation play state bestaat niet : running 115 #css3bewegendeanimatie Eigenschap webkit animation name bestaat niet : second 116 #css3bewegendeanimatie Eigenschap webkit animation duration bestaat niet : 5s 117 #css3bewegendeanimatie Eigenschap webkit animation timing function bestaat niet : linear 118 #css3bewegendeanimatie Eigenschap webkit animation delay bestaat niet : 2s 119 #css3bewegendeanimatie Eigenschap webkit animation iteration count bestaat niet : infinite 120 #css3bewegendeanimatie Eigenschap webkit animation direction bestaat niet : alternate 121 #css3bewegendeanimatie Eigenschap webkit animation play state bestaat niet : running 124 Sorry, de at is niet geimplementeerd. 133 Sorry, de at moz keyframes is niet geimplementeerd. 142 Sorry, de at webkit keyframes is niet geimplementeerd. 162 #anderfont Eigenschap moz column count bestaat niet : #anderfont Eigenschap webkit column count bestaat niet : 3 Dit is natuurlijk onzin: De webkit (Chrome, Safari), moz (Firefox), ms (IE) en o (Opera) tekens zijn prefixen voor websites die deze nieuwe functies nog niet geheel ondersteunen. De kans dat deze prefixen later niet meer nodig zijn is natuurlijk groot, maar nu moeten ze nog wel toegepast worden. Volgens deze lijst bestaan de functies animation en transformation in zijn geheel ook niet en schijnt niet goed te zijn geïmplementeerd, wat vreemd is, omdat deze wel staan op de w3schools site en ze werken in de (aangegeven) browsers. Hiervan hebben we geleerd dat de W3C CSS3 Validation nog zeer veel elementen mist. Wij weten zeker dat wij geen enkele fout in onze CSS hebben staan, omdat wij ons hebben gehouden aan de w3schools richtlijnen. Daarnaast werken de functies gewoon in de aangegeven browsers. We hebben zelfs heel veel verschillende CSS3 codes van verschillende websites geprobeerd in een nieuwe CSS met hetzelfde resultaat bij dezelfde functies. Wij gebruiken CSS3 en W3C CSS Validator scant standaard altijd versie 2.1, je moet versie 3 handmatig selecteren. De kans is dus groot dat de CSS3 Validator nog niet helemaal naar behoren werkt omdat er standaard nog gecontroleerd wordt met de CSS2.1 Validator. Probleem 4: Te weinig gratis schijfruimte: Wij gebruiken de host Webs.com om onze site gratis online te zetten. Jammer genoeg zit hier wel een limiet aan van 40MB met 30 minuten video. Voor de video tag hadden wij een grote video, maar we hebben een kleinere moeten gebruiken zodat we nog net tot de beschikbare ruimte kwamen! Hiervan hebben we geleerd dat je een echt professionele website nooit via een gratis host online moet zetten, al helemaal niet als je een grote website maakt met veel audio en video. 19

20 Probleem 5: Type en overzichtsfoutjes: Het is zeer veel voorgekomen: een <p> is niet afgesloten, <br/> is verkeerd getypt etc. Deze kleine typefoutjes zorgen er soms voor dat de hele website een verkeerde lay out krijgt. Je vergeet dan per ongeluk iets af te sluiten. Gelukkig geeft de W3C HTML5 Validator aan waar de fout precies zit, zodat die snel verholpen kan worden. Hiervan hebben we geleerd dat websites controleren zeer belangrijk is. Met fouten kan de pagina goed weergegeven worden, maar iedere browser is anders en compatibiliteit zien wij als het belangrijkste element op onze webpagina. Je kan nog zo n leuke lay out hebben, als heel weinig mensen het correct kunnen zien maak je alsnog weinig indruk. Van de typefoutjes hebben we verder overigens niks geleerd, die gaan gewoon per ongeluk. Probleem 6: CSS3 behoort niet tot HTML5? Eerst waren wij van plan om ook een CSS3 instructievideo te maken, maar dit staat los van HTML5. Daarom hebben we toch besloten om dat niet te doen en ons vooral te richten op het verbeteren van de bestaande onderdelen van het verslag en de website. Wij zijn van plan om in de verbeterronde van dit PWS wel een CSS3 instructievideo te maken, maar voor nu nog niet. Hiervan hebben wij geleerd dat je niet teveel af moet dwalen als je een werkstuk maakt specifiek over een bepaald onderwerp (zoals HTML5). Wij nemen al snel teveel hooi op onze vork als het gaat om HTML5. We hadden al besloten geen Java applicaties in onze site te gebruiken, omdat dit ook niet hoort tot HTML5. Wij hebben wel CSS3 gebruikt om onze site de benodigde kleuren te geven. Maar dit is ook geen onderdeel van HTML5. Daarom is de instructievideo (nog) niet doorgegaan. 20