Inleiding! 6. Webbrowser! 7. Webserver! 9. Web Standaarden! 10. Het document object model! 13. Een goede website opbouwen! 14

Transcriptie

1 ClientSide Wepages

2 Inleiding! 6 Webbrowser! 7 Browser geschiedenis! 7 Webserver! 9 Web Standaarden! 10 Voordelen van Web Standards voor uw bedrijf!! 10 Dynamische HTML! 11 Web 2.0! 12 Het document object model! 13 Een hiërarchische structuur! 13 Ouders en hun kroost! 13 Een goede website opbouwen! 14 1: Gebruik zoveel mogelijk een standaard indeling! 14 2: Plaats belangrijkste content direct in het zicht! 14 3: Gebruik geen hoofdletters voor hele woorden of zinnen! 15 4: Spreek de taal van de bezoeker! 15 5: Plaats eigen content niet in de vorm van banners! 15 6: Gebruik opvallende en betekenisvolle hyperlinks! 15 7: Plaats knoppen bij formulieren in de leesrichting! 15 8: Gebruik geen annuleer- en wisknoppen! 16 9: Kies slimme positie van labels bij formulieren! 16 10: Sturend effect van lijnen en vlakken! 17 HTML 5! 18 HTML5: een nieuwe technologie! 19 Beperkingen! 19 Interactieve mogelijkheden! 20 Standaardisatie! 20 Resultaat! 20 Conclusie! 20 Wat gaat HTML5 ons brengen?!

3 Video in HTML5! 22 Ogg Theora! 22 H.264! 22 Ronde 1 - Medio 2009! 23 WebM! 23 Ronde 2! 24 Toekomst! 24 CSS3! 25 Wat is CSS eigenlijk?! 25 Wat gaat CSS3 ons brengen?! 25 Hype?! 26 Webpagina opbouw! 26 website opbouwen met frames! 26 Website opbouwen met DIVʼs en CSS! 27 Layout van websites! 28 Twee kolommen layout! 28 Drie kolommen layout! 29 Fixed of Liqued! 29 Web technologieën! 29 Client-Side Technologies! 30 XHTML! 30 Cascading Style Sheets! 30 JavaScript/ECMA Script! 30 Plugins! 31 Macromedia Flash / Shockwave! 31 Silverlight.! 31 PDF! 31 Java-applets.! 31 Server-Side Technologies! 31 PHP! 31 CGI/Perl! 31 XML/XSL!

4 MySQL! 32 PostgreSQL! 32 Linux/Apache! 32 IIS! 32 SSL/Secure Servers! 32 Kiezen uit verschillende technieken! 33 Web-kleuren! 33 Webkleuren introductie! 33 Een kleine test! 33 Kleuren specificeren in HTML! WebSafe Color Chart! 34 Het ontwerp van een web-formulier! 35 De layout van formulieren! 35 Het gebruiken van Visuele Elementen! 37 Primaire & secundaire acties! 38 Website fonts! 39 Gemeenschappelijke lettertypen voor alle versies van Windows en Mac equivalenten! 39 De webpagina lettertype-lijst! 40 Hoe zien de fonts er uit op verschillende systemen en browsers! 41 Afbeeldingen in webpaginas! 42 Het beste formaat voor mijn afbeelding! 42 Foto's! 42 Scalable Vector Graphics! 42 Iconen / simpele logo's! 43 Logo's! 43 Tekst! 43 Conclusie! 44 Kosten van een website! 44 Ontwikkelkosten! 44 Onderhoudskosten! 45 Verwerkingsopdracht!

5 Bronnen! 47 HTML5 demos en dom:! 47 W3c web standaarden:! 47 W3c CSS3-vooruitzichten en uitleg:! 47 W3c compliant check! 47 W3c DOM! 47 Webserver servey! 47 JavaScripting! 47 Website layout en grafische bewerkingen! 47 Thanx to:! 47 Bijlagen!

6 Inleiding Veel mensen hebben wel eens een website gemaakt. Dit is vaak een stukje hobbywerk en het eindresultaat kan best indrukwekkend zijn, maar is de site wel goed opgebouwd? Denk hierbij aan het beheer eenvoudig, kan men delen hergebruiken, is de performance optimaal. In deze reader komen de huidige achtergronden en inzichten aan bod om een betere website maken

7 Webbrowser Een browser zet webpagina's, die door een webserver zijn aangeleverd, om in een voor mensen leesbare vorm. Vaste elementen van een webpagina zijn verschillende soorten opmaak van tekst, plaatjes en links naar andere webpagina's. Deze links kunnen worden gebruikt om naar andere pagina's te surfen. Er zijn webbrowsers die dergelijke documenten voorlezen, maar de meeste browserinstallaties geven een webpagina weer op een computerscherm en kunnen ook animaties en geluid weergeven. Sommige webbrowsers zijn geïntegreerde pakketten, waarin bijvoorbeeld ook een RSS-client, client en een Usenetclient zitten. Vrijwel alle browsers hebben de mogelijkheid om weblocaties op te slaan (bladwijzers), bestanden te downloaden, een geschiedenis bij te houden van waar de gebruiker geweest is en een overzichtspagina van de meest bezochte webpages. Sommige browsers voegen hier nog andere dingen aan toe zoals meerdere tabbladen, pop-up blockers, advertentiefiltering en automatisch zoeken op een zoekmachine. Veel van deze extra mogelijkheden zijn aan een browser toe te voegen door middel van plugins. Browser geschiedenis De eerste browser heette WorldWideWeb en werd geschreven door de uitvinder van het world wide web, Sir Tim Berners-Lee in 1990 en geïntroduceerd aan zijn collega's bij CERN in maart Na een opmars van het www kwam in 1994 kwam de eerste versie van de Netscape Navigator uit en nam al snel in populariteit toe. Microsoft reageerde hierop door zelf een browser te kopen van het bedrijf Spyglass Inc. en deze te gaan ontwikkelen onder de naam Microsoft Internet Explorer (IE). Dit startte de zogenaamde browseroorlog. In de strijd om de meeste gebruikers werden er veel nieuwe technologieën bedacht door beide bedrijven. Doordat de uitbreidingen niet werkten in de browser van de concurrent had dit tot gevolg dat veel webpagina's maar in één van beide programma's goed werkten. Vanaf HTML versie 3.0 van beide programma's begon Microsoft toch langzamerhand de overhand te krijgen, omdat haar browser zich beter aan de standaarden hield en doordat deze over meer functies beschikte. In 1998 eindigde de oorlog omdat het duidelijk was dat Microsofts sterke stijging niet meer te stoppen was. Dit kwam grotendeels doordat Microsoft haar browser bij Windows inbouwde. In de jaren daarna vergrootte Microsoft haar marktaandeel tot meer dan 95%. Om het tij te keren maakte Netscape haar browser open source. Na enkele moeilijke jaren resulteerde dit in 2002 in de Mozilla Suite. Ook splitste er zich in dat jaar een onderdeel vanaf dat later Mozilla Firefox zou worden. In 2004 werd de 1.0-versie van Firefox uitgebracht. Deze werd snel populairder en voor het eerst in jaren was er een daling in het marktaandeel van IE te zien

8 Microsoft voegde meer eigen HTML- en CSS-interpretaties door, waardoor ze niet mee aan de afgesproken standaarden voldeden. Hierdoor moesten ontwikkelaars verschillende stijlen toepassen op hun webpagina s om één look-and-feel voor alle browsers te ontwikkelen. Daarna bepaald de EU dat het meeleveren van een browser met een operatingsysteem oneerlijke concurrentie is. Microsoft geeft gebruikers bij de installatie nu de mogelijkheid om te een browser te kiezen. Wat de daling van IE gebruik verder inzette

9 Webserver Een webserver is een computerprogramma dat via een netwerk verzoeken ontvangt volgens het Hypertext Transfer Protocol (http) en documenten naar de client (eindgebruiker) stuurt. Het begrip server staat in dit geval voor een computerprogramma dat voor andere programma's, de clients, een bepaalde taak afhandelt en betekent zoveel als "dienstverlener". In het geval van webservers is de client vaak een webbrowser of een downloadprogramma. Als voor de webserver een eigen computer ingericht is, kan die computer ook met "webserver" worden aangeduid. De verzoeken aan een webserver hoeven niet altijd via een fysiek netwerk gesteld worden, een dergelijke communicatie kan ook binnen één en dezelfde computer gebeuren. Hiervoor staat de webserver en de broweser op hetzelfde systeem. Dit is eenvoudig op te zetten met XAMPP, MAMP (Mac) of USBwebserver. De documenten die door een webserver geleverd worden, kunnen uit verschillende bronnen komen wat samen één webpage maakt. Zo kunnen er bestanden van een opslagmedium gebruikt worden, maar ook uitvoer van andere computerprogramma's zijn die bijvoorbeeld databases. De webserver kan daarbij met andere computerprogramma's communiceren. Een webserver kan ook modules bevatten zodat webserver-scripting talen kunnen worden uitgevoerd. Bekende webserverscripting zijn: PHP en AJAX. Apache en IIS zijn de twee meest gebruikte webservers

10 Web Standaarden Web Standaarden zijn richtlijnen en adviezen ontwikkeld door de World Wide Web Consortium (W3C) en zijn internationaal overeengekomen als algemeen gebruik waar webbouwers zich aan zouden moeten houden om de grootste groep internetgebruikers te voorzien van de meeste voordelen van gepubliceerde documenten op het web met behoud van langdurige houdbaarheid daarvan. Navolgen van web standaard betekent in grote lijnen het scheiden van content en ontwerp wat ervoor zorgt dat mensen met specifieke behoeften toegang hebben tot het web. Bijvoorbeeld mensen die blind of slechtziend zijn kunnen hun computer de webpagina's laten voorlezen en mensen met PDA's kunnen het web net zo gemakkelijk doorzoeken als degene met een desktop computer. Voordelen van Web Standards voor uw bedrijf! 1. Zoekmachine vriendelijk Schematisch en gestructureerde Html zorgt ervoor dat de content van uw website gemakkelijker beschikbaar is voor zoekmachines (search engine spiders). Dit zorgt ervoor dat internetgebruikers betere resultaten krijgen als zij in zoekmachines naar websites zoeken en betere posities (ranking) in de zoekmachines dan concurrerende websites die geen gebruik maken van Web standaards! 2. Lagere kosten en Sneller laden van pagina's Schematische code en goed georganiseerde HTML zorgt voor kleinere bestanden. Hierdoor worden pagina's sneller geladen en minder gebruik van bandbreedte (lagere hosting kosten). Dit laatste is pas echt een voordeel bij hele grote websites die elke dag door heel veel internetgebruikers bezocht word. 3. Makkelijker in onderhoud Omdat de content is gescheiden van het ontwerp (code matig), kunnen toekomstige aanpassingen en ontwerpwijzigingen gemakkelijker, sneller en dus goedkoper worden doorgevoerd. 4. Beter beschikbaar Schematisch gestructureerde Html maakt het gemakkelijker voor "screen readers" en browsing devices om de content van uw site te interpreteren en presenteren aan uw bezoekers

11 Dynamische HTML DHTML is geen officiële standaard, maar een marketingterm die gebruikt werd bij de introductie van de 4.x browserversies door Netscape en Microsoft. Eerdere browsers dan de 4.x-versies van Netscape en Microsoft Internet Explorer hadden (zeer) beperkte mogelijkheden om een webpagina dynamisch te maken. Om dynamische onderdelen in een webpagina in te bouwen werd vooral gebruikgemaakt van java-applets. Daarna werden javascript en flash populair. Het W3C beschrijft DHTML als: Een term die door verschillende (browser-)producenten wordt gebruikt om een combinatie van HTML, stylesheets en scripts te beschrijven die het mogelijk maakt documenten te animeren. HTML5 kan gezien worden als "opvolger" voor DHTML. De HTML5-specificatie, wordt ook vaak de groep van technologieën bedoeld van HTML5, Javascript, CSS3, SVG, XML en JSON. De werking van HTML5 verschilt wezenlijk niets van DHTML; het verschil is alleen dat alle onderliggende technieken een update hebben gekregen. HTML5 komt later uitgebreid aanbod. In de volgende tabel staan verschillende technieken en aandachtspunten voor een goede DHTML (dynamische HyperText Markup Language) Webdesign Opmaak-talen Ontwerp HTML, XML, XHTML, Compact HTML, WML (Wireless Markup Language voor mobiele apparaten), XHTML Basic CSS, XSL-FO en XSLT (format XML) Interactief (talen) Referenties Document Object Model, JavaScript (HTML-scripting + HTML-event), AJAX (HTML-scripting + HTML-event), Dynamic HTML HTML-kleuren, HTML-tags, HTML-entiteiten (speciale karakters), HTML-events (gebeurtenissen/acties in browser met vervolg)

12 Webdesign Details in een webpage Browser sniffing (vaststellen van browser-info en instellingen), Useragent (browser), Cookie (onthouden en vergaren van site-informatie), Metatag (extra informatie in een webpagina), DTD (welke tags in een xml-doc voor mogen komen), Broodkruimelnavigatie (menu-stappen terug en vooruit), Inline image (afbeeldingen in de html-code), Java-applet (verouderd), Adobe Flash (animatie-filmpjes en meer), HTML-formulier (invoervelden en knoppen), Favicon (icoon in adres-balk), Frames (box waarin content wordt weergegeven - vervang voor DIV), SVG (vector afbeeldingen), WAI (Web Accessibility Initiative) Web 2.0 De term Web 2.0 verwijst naar een duidelijk waarneembare trend op het internet. Web 2.0 wordt omschreven als de tweede fase in de ontwikkeling van het World Wide Web. Het gaat over de verandering van een verzameling websites naar een volledig platform voor interactieve webapplicaties voor eindgebruikers op het World Wide Web. Volgens sommigen zullen deze uiteindelijk losstaande lokaal geïnstalleerde software overbodig maken. De techniek voor web 2.0 is vooral een uitbreiding van HTML met daarbij XML, JavaScript en PHP toegevoegd. Gebruikers kunnen alles opvragen via het web en er zelf ook content aan toe voegen, denk hierbij aan YouTube en WikiPedia. Dit heeft nieuwe mogelijkheden geschapen voor online samenwerking zoals Crowdsourcing en collective intelligence. Het wordt echter steeds belangrijker om de informatie te beoordelen op betrouwbaarheid, uit welke bronnen komt deze informatie en waar wordt die informatie voor gebruikt

13 Het document object model Het DOM ofwel het Document Object Model is een verzameling regels en afspraken over hoe een browser een web pagina interpreteert. Het DOM zit ingebakken in een browser en je kunt er niets aan wijzigen. Maar als je weet volgens welke basis regels het DOM werkt kun je er wel gebruik van maken. Je kúnt er niet alleen gebruik van maken, je maakt er gebruik van. Voortdurend. Een hiërarchische structuur Het DOM gaat uit van een hiërarchische structuur van een html pagina en dat komt goed uit, want daar kunnen wij mooi gebruik van maken. Sinds de introductie van het DOM wordt een html pagina niet langer gezien als een lange serie tekens, maar als een verzameling op zichzelf staande elementen (objecten) die onafhankelijk van elkaar kunnen worden benaderd en gemanipuleerd. We noemen het DOM object georiënteerd. Deze elementen kunnen weer hun eigen specifieke eigenschappen hebben: attributen. Ook deze attributen zijn omschreven in het DOM. Ouders en hun kroost De hiërarchische structuur van een html document wordt omschreven in de vorm van parentelementen en child-elementen Bovenaan in deze structuur staat het <html> element. Zeg maar de Padre de Familias, de boss of all bosses. Het <html> element heeft twee directe 'children': <head> en <body>. Vervolgens is bijvoorbeeld <title> weer een 'child' van <head>. Je begrijpt dat <body> niet stil heeft gezeten en stikt van de 'children'. Wanneer je het ene element in het andere plaatst wordt dit geneste element automatisch het 'child' van het bovenliggende element: <div> <p>eigenlijk is de structuur van een html document een grote<strong><em>family</em> business</strong> </p> </div> In bovenstaand voorbeeld is de <p> het 'child' van de <div>, terwijl <p> weer de 'parent' is van <strong> en <em> op zijn beurt weer het 'child' is van <strong> Het is vooral het object georiënteerde JavaScript wat voortdurend en handig gebruik maakt van het DOM. Wij zullen onszelf meer concentreren op de manier waarop je via css de verschillende elementen direct kunt benaderen en manipuleren

14 Een goede website opbouwen Wat zijn belangrijke aandachtspunten bij het ontwerp van een website? Hoe kijken de bezoekers? Waar moeten de labels en knoppen in formulieren staan? Spreekt de website de taal van de doelgroep? Hierbij een overzicht van tien inzichten voor gebruiksvriendelijkheid van een website: 1: Gebruik zoveel mogelijk een standaard indeling Bezoekers van je website zijn gewend aan een min of meer standaard indeling die ze op andere sites tegen komen. Er is een bepaald verwachtingspatroon opgebouwd over hoe websites in elkaar zitten. Dat verwachtingspatroon is gebaseerd op hoe de meeste websites in elkaar zitten. Door hier op in te spelen help je bezoekers sneller te vinden wat zij zoeken. Origineel zijn is leuk, maar mag de bezoeker nooit voor raadsels plaatsen. Probeer je originaliteit niet uit te drukken in de opbouw van je site, maar door de inhoud. Waar aan voldoet een standaard indeling? Logo links boven met een hyperlink naar de homepage Zoekmachine rechtsboven als invulveld met zoekknop er rechts naast. Als het invulveld 27 karakters breed is wordt 90% van de zoekopdrachten gedekt Hyperlink naar pagina met contactgegevens rechtsboven Inloggen / uitloggen rechtsboven Navigatie horizontaal boven of verticaal links Taalkeuze rechtsboven bij voorkeur visueel als vlag Hyperlinks in afwijkende kleur ten opzichte van de normale tekst bij voorkeur blauw en onderstreept 2: Plaats belangrijkste content direct in het zicht Ongeveer 23% van de bezoekers scrolt, dus 77% scrolt niet. Vooral oudere en onervaren hebben soms niet eens in de gaten dat er gescrold kan worden. Veel mensen baseren hun eerste indruk van de website zonder te scrollen. 25% van webpagina s wordt minder dan 4 seconden getoond en 52% minder dan 10 seconden. Dat is kort. Daarom moet de belangrijkst boodschap direct in het zicht staan, dus zonder te scrollen. De meestgebruikte resolutie is nog steeds 1024 bij 768, daarom is het aan te raden om 550 to 600 pixels hoogte aanhouden voor het eerste zicht

15 3: Gebruik geen hoofdletters voor hele woorden of zinnen Hoofdletters lezen niet prettig en bezoekers zijn daarom minder snel geneigd woorden en zinnen in hoofdletters te lezen. Uit onderzoek van Karen Schriver (zie het boek: Dynamics in Document Design) blijkt dat bij gebruik van hoofdletters voor hele woorden of zinnen de leessnelheid met 13% tot 20% afneemt. Gebruik dus niet uitsluitend hoofdletters voor titels, menu s, hyperlinks en knoppen. Kies liever voor vet of een opvallende kleur. 4: Spreek de taal van de bezoeker Gebruik zo min mogelijk jargon en laat de website niet alleen een afspiegeling van het organigram de organisatie zijn. Via Google Analytics of het bijhouden van de ingegeven zoekwoorden op de website kan makkelijk bepaald worden wat de taal van de bezoekers is. Een andere methode is om via Google Trends te bepalen hoe vaak bepaalde zoekwoorden worden gebruikt. 5: Plaats eigen content niet in de vorm van banners Volgens eyetracking onderzoek blijkt dat het overgrote deel van de mensen banners negeren. Niet alleen banners maar ook alles wat op een banner lijkt wordt genegeerd. Rechthoekige blokjes zijn vaak banners die bij aanklikken irritante pop-ups openen. Dat wordt liever voorkomen.plaats eigen content dus niet in de vorm van banners. 6: Gebruik opvallende en betekenisvolle hyperlinks Bezoekers lezen over het algemeen nauwelijks, zij scannen vooral. Ze scannen vooral op koppen, knoppen en hyperlinks. Het is daarom belangrijk dat ze afwijkend worden weergegeven direct opvallen en een betekenisvolle tekst bevatten, zodat iedereen meteen snapt waar het over gaat en men geen aanvullende informatie nodig heeft om de tekst te begrijpen. Betekenisloze hyperlinks als klik hier moeten te worden vermeden. Bezoekers hebben content nodig om deze link te begrijpen en dat kost extra tijd. 7: Plaats knoppen bij formulieren in de leesrichting Formulieren zorgen over het algemeen voor relatief veel afhakers. Mensen houden niet van formulieren, het duurt lang om ze in te vullen en er maar al te vaak voldoende afleiding om ervoor te zorgen dat mensen vroegtijdig afhaken. Denk aan de telefoon die tussendoor gaat of een kind dat om aandacht vraagt. Redenen genoeg voor bezoekers om het formulier misschien maar een ander keertje in te vullen. En zo gaat elke seconde of zelf tiende seconde dat het extra duurt voordat een formulier kan worden verstuurd, ten koste van de conversie. Uit onderzoek blijkt dat het effect van de positie en weergave van knoppen van belang is bij het invullen van formulieren. Onderstaand is te zien welke variaties ze hebben getest en wat het effect was op het kijkgedrag

16 8: Gebruik geen annuleer- en wisknoppen In veel gevallen is het gebruik van een annuleren/cancel of een wisknop af te raden. Want hoe vaak komt het voor dat mensen na de moeite te hebben genomen een heel formulier in te vullen, dit willen wissen in plaats van versturen? Wis-, cancel- en resetknoppen worden over het algemeen voornamelijk door beheerder van websites gebruikt, omdat het handig is bij het testen. En als iets schadelijk is voor je conversie, dan is het bezoekers die per ongeluk op de cancel-knop klikken.. ClientSide Webpages 9: Kies slimme positie van labels bij formulieren Ook de positie van labels ten opzichte van de invulvelden zijn van invloed op de snelheid van invullen. Zij veroorzaken namelijk verschillend kijkgedrag. Eyetracking beelden uit onderzoek van Matteo Penzo illustreren dit. Volg de volgende richtlijnen op om het meest gebruikersvriendelijke formulier in elke verschillende situatie te bouwen. Label positie Een label boven een invoerveld werk beter dan alle ander plekken, omdat de gebruikers niet worden gedwongen om afzonderlijk het etiket en het invoerveld te bekijken. Maak heldere visuele afscheidingen tussen de verschillende combinaties van invoervelden en labels. Uitlijning van labels In de meeste gevallen, wanneer labels links van invoerveld staan, vraagt dit een zware cognitieve werkbelasting aan website bezoeker. Lijn de labels dan rechts uit tegen het invoerveld aan. Het plaatsen van etiketten boven invoervelden is beter. Vette labels Het lezen van gevette etiketten is moeilijker voor gebruikers, het is beter om duidelijke tekstetiketten te gebruiken in een nornaal lettertype. Wil je dit toch gebruiken bewerk dan de randen van de invoervelden zodat ze geen zware randen te hebben. Dropdown boxen Gebruik ze zorvuldig, omdat zij zo opvallend zijn. Of gebruik ze voor belangrijke gegevens. Of wanneer ze worden gebruik voor minder belangrijke gegevens, plaats ze goed onder belangrijkere inputgebieden

17 Labels bij dropdown-boxen Om gebruikers direct bewust te maken van wat je wil met een dropdown-box, plaats het label in de dropdown-box als standaardwaarde. Dit werkt goed bij lange lijsten. De gebruiker weet het doel van de dropdown-box al wanneer de standaard-waarde verdwijnt. 10: Sturend effect van lijnen en vlakken Veel ontwerpen bevatten lijnen en vlakken om de indeling en samenhang te verduidelijken. Vaak lukt dit goed, maar te vaak ook niet. Niet alle designers lijken door te hebben hoe sturend het effect van lijnen en vlakken is op het kijkgedrag. Uit eyetracking onderzoek blijkt dat koppen die niet worden gezien, omdat ze buiten het blok waar ze bij horen worden geplaatst, of lijnen en balken die suggereren dat content niet bij elkaar hoort terwijl dit wel het geval is

18 HTML 5 Voordat we ingaan op wat HTML 5 is en welke ontwikkelingen er op ons afkomen kijken we eerst terug. In 1997 werd HTML 4 door het W3C* geïntroduceerd met richtlijnen en afspraken om het voor ontwikkelaars en gebruikers van het internet overzichtelijk te houden. Dat niet iedereen het even nauw nam met deze richtlijnen was te merken in de browser 'oorlog' van begin Verschillende grote partijen, zoals Microsoft en Netscape hadden hun eigen ideeën over hoe gebruikers het web zouden moeten ervaren. Hierdoor ontstonden browser afhankelijke oplossingen. Soms werd gebruikers zelfs voor het laden van een pagina een advies gegeven als : "Om deze website te kunnen bekijken dient u gebruik te maken van Internet Explorer 5.5 met een beeldscherm resolutie van 800x600. Klik hier om verder te gaan." Later ontstonden ook problemen met het gebruik van video. Dit medium ondervond ook last van de verschillende browser interpretaties. WMV streaming werkte niet op Safari / Firefox en Quicktime gaf problemen binnen Internet Explorer. Flash van Adobe (oorspronkelijk ontwikkeld voor Tablet achtige devices**) bracht uitkomst. Met een huidige marktpenetratie van 98% is Flash nog steeds heel populair en geeft gebruikers van verschillende browsers allemaal dezelfde videobeleving. Quadia maakt in de meeste gevallen ook gebruik van Flash met voor steeds meer klanten het gebruik van de H264 codec. Wat heeft dit allemaal te maken met HTML5? Door te kijken naar het verleden kan men leren hoe dingen zich ontwikkelen in de toekomst. Dit geldt ook voor HTML 5. De verwachting is dat HTML 5 de nieuwe standaard wordt. Daarom heeft W3C de ontwikkeling van XHTML 2 stopgezet (2009). Samen met de WHAT*** werkgroep, die sinds 2006 bezig is met de ontwikkeling van HTML 5, wordt gewerkt aan de HTML 5 standaard. Echter ook nu zijn niet alle betrokken partijen het eens over de invulling. Met name het gebruik van video binnen HTML5 roept veel discussies op. Google (met YouTube) en Apple zijn grote voorstanders van het gebruik van de codec H264. Firefox, principieel in het gebruik van open source, wil het zeker niet mindere alternatief OGG gebruiken. De vraag is hoe zich dit ontwikkelt en of Adobe wellicht weer moet inspringen om compatibiliteitsproblemen op te lossen

19 HTML5: een nieuwe technologie maar hoe relevant voor ons doel? In onze nieuwsbrief van februari werd ingegaan op de nieuwe technologie HTML5. De meest concrete vraag die wij onszelf stellen is: hoe kunnen wij deze techniek zo goed mogelijk aanwenden om onze players nog breder inzetbaar te maken? Enkele van onze afwegingen zetten we hieronder uiteen. Waarom juist nu implementeren? Momenteel is Flash nog steeds de meest gebruikte techniek voor online video. Met de komst van de nieuwe standaard HTML5 wordt een nieuw tijdperk ingeluid. We zien dat de doorvoer van deze standaard op het web op dit moment in een stroomversnelling komt. Een belangrijke reden hiervoor is de media-aandacht die door de invoer van de ipad wordt gegenereerd. Dit device van Apple, maker van de ipod en iphone, ondersteunt geen Flash en beroept zich op het gebied van online video op HTML5. De media-aandacht en verwachte verkoopcijfers van de ipad zorgen ervoor dat veel grote bedrijven hun website geschikt willen maken voor dit device. Dit zorgt ervoor dat er proof of concept -HTML5-players worden gemaakt. Deze players doen in de basis wat van een video player verwacht kan worden: video afspelen. Ze gebruiken HTML5- technieken, maar kunnen desgewenst terugvallen op Flash. Wat ons opvalt is dat deze players nog verre van volwassen zijn. Voor ons dus de schone taak om deze technische concepten goed te beoordelen en daar onze eigen draai aan te geven. Beperkingen Zoals met vele nieuwe technieken het geval is, kleven er zowel voordelen als nadelen aan het gebruik van HTML5 in vergelijking met de technieken die tot nu toe werden gebruikt. Het interessante is dat hier op dit moment nog wel verschuivingen in te zien zijn. Een concreet voorbeeld: met Flash is het zonder problemen mogelijk om video full screen te bekijken. Bij HTML5 kleven er nog wel wat haken en ogen aan deze functie. De verwachting is echter dat de meeste beperkingen na verloop van tijd verholpen zijn en dus geen concreet nadeel meer zijn. Zo zullen voor allerlei andere beperkingen of nadelen ook creatieve oplossingen worden verzonnen. Sommige beperkingen zijn echter niet te verhelpen maar de vraag is hoezeer dit een probleem is. Bijvoorbeeld: het beveiligen van een video tegen downloaden is met HTML5 lastiger dan wanneer alleen Flash wordt gebruikt. Aan de andere kant zijn veel toepassingen te bedenken waarbij het downloaden van video juist wordt gestimuleerd om het virale effect te stimuleren

20 Interactieve mogelijkheden De video-functionaliteit in HTML5 richt zich voornamelijk op het creëren van een mogelijkheid om video af te spelen. Hierbij wordt nauwelijks rekening gehouden met interactieve mogelijkheden in video players, met name overlays met informatie. Deze mogelijkheden vormen een belangrijk deel van de toegevoegde waarde van onze video players. Onze uitdaging is om in HTML5 de functionaliteiten te realiseren die we nu al in onze players gebruiken. Hierbij moeten we rekening houden met de technische mogelijkheden en ook de onmogelijkheden die de verschillende web browsers bieden. Sommige webbrowsers ondersteunen HTML5 in zijn geheel niet en er zijn ook browsers die de standaard slechts gedeeltelijk ondersteunen. In feite moeten we dus diverse video players maken, die allemaal zo optimaal mogelijk werken voor de verschillende browsers. De werknaam voor onze video player is dan ook Hybrid Player. Standaardisatie Bij de ontwikkeling van de Hybrid Player houden we ook rekening met de trend van customization. Er is een groeiende behoefte om zelf invloed te hebben op de vorm en functionaliteit van de videoplayer. Met de Hybrid Player moet de gebruiker meer invloed krijgen en wordt Self Service gestimuleerd. Resultaat Aan de gebruikerskant hebben we uiteindelijk een video player die breed kan worden ingezet. Aan de achterkant hebben we de player die in de basis zo onverschillig is qua technologie, dat deze gemakkelijk in elke willekeurige technologische schil kan worden gezet. Denk hierbij bijvoorbeeld aan Silverlight, implementatie in mobiele applicaties en natuurlijk ook aan technologieën die nu nog niet bestaan. Conclusie Al met al inspireert HTML5 ons om de mogelijkheden van ons online video platform en onze videoplayers vanuit de basis te blijven innoveren. De voortschrijding van de techniek is iets wat ons technische hart doet kloppen. Onze ratio helpt ons echter om goed vast te stellen hoe we onze klanten hun dienstverlening met deze nieuwe technologie kunnen verbeteren

21 Wat gaat HTML5 ons brengen? Zoals gezegd is HTML 5 een nieuwe poging om tot één standaard voor het web te komen. De vraag om een nieuwe standaard komt voort uit de enorme toename van webtoepassingen. Het gebruik van het internet groeit nog steeds explosief mede door de opkomst van Smartphones en nieuwe devices als de ipad. Het verschil tussen een standalone applicatie op een desktop PC en een webbased applicatie wordt hierdoor steeds kleiner. Het verwerken van bankgegevens, mailen, tekstverwerken, steeds meer applicaties verhuizen naar het internet i.p.v. losse applicaties op PC s. De introductie van AJAX (door gmail in 2004 populair geworden) heeft deze ontwikkeling een boost gegeven. HTML 5 zal net als AJAX het gebruik van internet opnieuw flink stimuleren. HTML 5 stelt browsers in staat om steeds meer applicaties te verwerken zonder plugins (zoals Quicktime, RealPlayer of Flash) met als voordelen: Minder zware belasting van de processorkracht en het geheugen van de computer (Web workers) waardoor de applicaties sneller laden en en hogere performance hebben; Efficiëntere caching van data (de caching van browsers kan met HTML 5 worden beheerd); Eenvoudige integratie tussen verschillende elementen binnen een pagina. Denk hierbij bijvoorbeeld aan drag & drop van plaatjes binnen een pagina maar ook het slepen van een spelende video en het tonen van 3d animaties; Verwerken van geografische gegevens binnen een webomgeving. Na toestemming van de eindgebruiker kan op basis van geolocation informatie worden verstrekt. Bijvoorbeeld waar de dichtstbijzijnde pin automaat is (iphone maakt hier reeds gebruik van); Webgraphics++, illustraties maken de stap naar vector. Hierdoor blijven deze voor verschillende devices helder en goed te bekijken. Er zijn nog meer voordelen, maar het belangrijkst is dat HTML 5 de ontwikkeling van een nieuwe generatie webapplicaties zal stimuleren. Wij volgen deze ontwikkelingen nauwgezet voor de ontwikkeling van ons eigen online video platform