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

Maat: px
Weergave met pagina beginnen:

Download "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

22 Video in HTML5 Nu er steeds meer gewerkt wordt met HTML5 en de videomogelijkheden die deze standaard-inwording beschrijft, is er een nieuwe strijd gaande op het gebied van webtechnologie. Momenteel zijn er namelijk een aantal verschillende technieken die wedijveren om de titel HTML5 video standaard. Wat zijn de verschillen tussen deze technieken? Welke belangen spelen er? En wat wil dit alles zeggen over de toekomst? Ogg Theora De techniek die in eerste instantie in de HTML5 specificatie genoemd is als de techniek die door iedere browser ondersteund zou moeten worden is Ogg Theora. Deze techniek bestaat uit een audiocompressietechniek (meestal het open source Vorbis) en een videocompressietechniek genaamd Theora. Hiervoor wordt een techniek gebruikt die in eerste instantie door On2 is ontwikkeld. Dit bedrijf is ook verantwoordelijk voor VP6, wat een tijd lang in Flash als videostandaard is gebruikt. H.264 In 2003 werd een standaard ontwikkeld die momenteel geaccepteerd wordt als de industriestandaard voor online video en kent daarom ook implementaties in het grootste deel van hard- en software die video afspeelt. De technieken die in deze standaard worden gebruikt gaan gebukt onder patenten waarvoor licentiekosten moeten worden betaald. Voor eindgebruikers is een licentie voor het gebruik van H. 264 bij gratis video's gratis. Dat betekent echter niet direct dat het implementeren ervan gratis is. Apple en Microsoft hoesten zonder aarzelen deze licentiekosten op, maar ontwikkelaars als Mozilla (Firefox) willen of kunnen zulke bedragen simpelweg niet betalen

23 Ronde 1 - Medio 2009 In de eerste helft van 2009 gingen enkele van de grote webbrowsers HTML5 video ondersteunen. Als eerste Apple s Safari, gevolgd door Firefox en daarna Chrome van Google. Apple ondersteunt alleen H niet alleen op de desktop, maar ook op zijn mobiele devices als de iphone. Het argument van Apple is dat H.264 zonder twijfel de beste beeldkwaliteit geeft. Firefox heeft alleen Ogg Theora geïmplementeerd. H.264 is vanwege de licentiekosten geen optie voor Firefox. Chrome biedt ondersteuning voor beide formaten. Hiermee lijkt Google de strijd te laten voor wat hij is en wordt er gekozen voor een zo breed mogelijke inzetbaarheid. In eerste instantie werd in de HTML5 specificatie beschreven dat Ogg Theora in ieder geval door iedere browser ondersteund zou moeten worden. In 2007 is deze tekst vervangen door een placeholder waarin een aantal wensen werd omschreven. Veelal gaan deze wensen over patentkosten en kwaliteit. Gezien de vele discussies rondom dit onderwerp en de vastgelopen situatie omtrent implementatie heeft het W3C een jaar geleden deze tekst verwijderd. De uitkomst van ronde 1: geen winnaar. De gebruiker - om wie het uiteindelijk dient te draaien - is hierbij zelfs de verliezer. WebM Toen bovengenoemde twee honden om het spreekwoordelijke been vochten, werkte Google aan een standaard die van deze twee partijen moest gaan winnen. Google wilde een standaard neerzetten die het beste van beide werelden moest verenigen. Deze techniek moest vrij van royalties zijn, zodat iedereen deze gratis kon gebruiken. Daarnaast moest de beeldkwaliteit veel beter zijn dan Theora en het liefste H.264 van de troon stoten. Afgelopen mei zag deze standaard het levenslicht onder de naam WebM. De videotechniek die in deze standaard wordt gebruikt, genaamd VP8, is net als Theora ontwikkeld door On2. Critici beweren dat er bewust variaties op H.264-technieken worden gebruikt, zodat er dan een goede beeldkwaliteit wordt behaald zonder daadwerkelijk inbreuk te doen op het patentrecht. Anderen spreken dit weer tegen

24 Alhoewel de beeldkwaliteit van WebM nog niet zo goed is als H.264, zal voor de meeste toepassingen het verschil schier onmerkbaar zijn. Het voordeel van de afwezigheid van de licentiekosten is vrij snel zichtbaar geworden: onlangs is er een open source WebM decoder gemaakt die sneller is dan Google s eigen WebM decoder. De kans bestaat dat er in de toekomst in de on-line community meer van dit soort initiatieven ontstaan, waardoor er steeds meer verbeteringen worden doorgevoerd. Vergelijking H.268 en VP8 URL: Compared aspx Ronde 2 Een jaar na het begin van ronde 1 lijken de 3 partijen zich op te maken voor een nieuwe ronde in de strijd om de kroon. Omdat de HTML5 specificatie op dit moment geen eisen stelt aan de te gebruiken videotechniek, wordt de strijd op de 'traditionele' manier beslist: door de markt. Op dit moment is H264 nog steeds de industriestandaard op het web. Maar ook is te merken dat de populariteit van WebM vergroot. Op dit moment, zo n twee maanden na de publicatie van de standaard, is er een indrukwekkende lijst van softwaremakers die de standaard hebben geïmplementeerd of dit op zeer korte termijn willen gaan doen. Dit geeft aan dat er veel professionals het erover eens zijn dat WebM geschikt is voor online toepassingen. WebM supporters: (URL: ) Toekomst Vooralsnog is er nog geen winnaar. Er zijn vele redenen te bedenken, die de komende tijd de loop van de strijd verder zullen gaan bepalen. Niet alleen het volwassen worden van WebM zal een verandering teweeg brengen, ook de verduidelijking over (kosten van) patenten zullen meespelen. Tot die tijd is het dus voor de gebruiker aan te raden om te zorgen voor een combinatie van browsers zodat alle videotechnieken worden ondersteund. Veel webontwikkelaars proberen de problemen van de gebruiker voor te zijn door de video in verschillende vormen aan te bieden. Quadia maakt dit mogelijk door middel van de Hybrid Player (URL: ). Door deze techniek maakt het voor de kijkers van onze video s niet uit welke videotechniek wint; de gebruiker zal uiteindelijk de winnaar zijn

25 CSS3!!! Na de uitleg over HTML5 gaat het nu over de ontwikkeling van de nieuwe CSS standaard: "CSS3". Net als HTML5 wordt ook CSS3 "nog" niet ondersteund door alle grote browsers. Verwacht wordt dat in 2012 de CSS3 standaard breed wordt ondersteund. Op dit moment worden de meeste (maar niet alle) CSS3 functionalisten ondersteund door Firefox, Opera en Safari. Internet Explorer 9 zal het CSS3 gaan ondersteunen bij de lancering. Mobiele telefoons zoals de iphone, Nexus One en andere 'Smart phones in combinatie met de Safari browser kunnen nu al veel CSS3 mogelijkheden gebruiken. Wat is CSS eigenlijk? Cascading Style Sheets (afgekort tot CSS) is een manier om de vormgeving voor een serie webpagina s eenduidig vast te leggen. De informatie over de vormgeving wordt toegevoegd aan de HTML-code van de webpagina s. De belangrijkste reden voor de introductie van CSS is om de vormgeving van webpagina's te standaardiseren en de inhoud van de vormgeving te scheiden. Hierdoor kunnen verschillende webbrowsers een pagina op dezelfde wijze aan de gebruiker tonen. Het World Wide Web Consortium (W3C) heeft daartoe de standaard vastgelegd. Wat gaat CSS3 ons brengen? CSS3 brengt ons een aantal nieuwe mogelijkheden: Meer ondersteuning voor boxes: ronde hoeken en schaduw. Een aantal nieuwe teksteffecten, waaronder een schaduweffect en overflow, de optie om text op meerdere manieren netjes af te kappen in tekstblokken met vaste breedtes. Bijvoorbeeld met... aan het einde als de paragraaf niet afgemaakt kan worden. Attribute selectors: De mogelijkheid voor het selecteren van css elementen op basis van hun attributen: Voordeel is hiervan dat je op meerdere manieren de css kan aanspreken, en de code kan handig en efficienter worden ingedeeld. De optie om "media queries" uit te voeren. Met andere woorden dat er gekeken wordt wat voor een scherm de viewer gebruikt en de style/layout zich daaraan aanpast. Dus geen aparte css bestanden meer voor bijvoorbeeld mobiele versies van een website. En multiple backgrounds, dan is er de mogelijkheid om bijvoorbeeld meerdere background images in één css element te verwerken. Dit geeft de designer meer mogelijkheden wat betreft achtergrond design van de website. Bovenstaande opsomming is niet volledig. Daarnaast is CSS3 nog steeds in ontwikkeling. Op staat een handig overzicht aan met de functies van CSS3 per browser

26 Hype? Moeten we nu direct allemaal gebruik gaan maken van CSS3? Het is verstandig om te starten met enkele functies van CSS3. Bijvoorbeeld voor decoratiefuncties. Hierdoor blijft de website toch goed toegankelijk door oudere browsers. CSS3 kan volledig worden ingezet in moderne browsers als Safari, Firefox of Chrome. Webpagina opbouw website opbouwen met frames Dit is de oudste techniek voor de opmaak van een site. Als er een Nederlandse vertaling voor 'Frame' gegeven zou moeten worden, zou deelpagina het meest in de buurt komen. Daar is deze techniek, die onderdeel uitmaakt van de HTML standaard, dan ook op gebaseerd. De hele website bestaat eigenlijk maar uit 1 pagina, die wordt onderverdeeld in een aantal deelpagina's, elk met hun eigen adres (URL) en inhoud.hierbij is het mogelijk om een link vanuit 1 frame te openen in een ander frame. Dit maakt het makkelijk om als de pagina onderverdeeld is in verscheidene frames, een aantal frames (bijvoorbeeld een titel blok, of de menustructuur) hetzelfde te houden en de inhoud in een andere frame te veranderen. Dit leidt tot het grootste voordeel van het gebruik van frames: door deze modulaire opbouw hoeft bijvoorbeeld het menu maar één keer in een frame gezet te worden en bij keuzes uit het menu wordt een ander frame bijgewerkt. Dit leidt ertoe dat aanpassingen aan de menustructuur van de site, maar eenmaal in het menu-frame aangebracht hoeven te worden, en niet dat het menu op alle pagina's aangepast moet worden. Frames zijn dus vriendelijk voor het onderhoud van een site. Toch zitten er ook een aantal grote nadelen aan het gebruik van frames. Ten eerste is er de ontoegankelijkheid van sites met frames voor zoekmachines. Dit uit zich in twee problemen. Ten eerste kunnen zoekmachines vaak niet alle HTML files vinden die in de verschillende frames getoond kunnen worden. Hierdoor zal de site vaak lagen in de zoekmachine resultaten terecht komen dan wenselijk is. Daarnaast zal het vaak gebeuren dat als de pagina al in de zoekresultaten terecht komt, er een link in staat niet naar de hoofdsite, maar naar één van de frames. Dan zal bij het volgen van de link vanuit de zoekmachine alleen dat ene frame als pagina worden getoond. Dan zou het zo maar kunnen zijn dat de bezoeker alleen die pagina ziet, en alle bijbehorende functionaliteit, zoals het menu, mist

27 Een ander nadeel is ook dat het gebruik van frames niet goed samenwerkt met het bewaren van favorieten. Alleen de hoofdpagina kan namelijk als favoriet worden opgeslagen. Dit kan ertoe leiden dat als een bezoeker uiteindelijk op je site de informatie heeft gelokaliseerd op een van de frames, deze niet rechtstreeks als link kan worden opgeslagen. Het is alleen mogelijk om de link naar de hoofdpagina op te slaan en dan weer opnieuw naar het juiste frame te navigeren. Het behoeft waarschijnlijk geen toelichting dat dit niet echt gebruikers vriendelijk is. Deze nadelen worden vaak als zodanig groot ervaren dat deze methode enigszins uit de mode is geraakt. Toch zou het voor het bijhouden van bijvoorbeeld een verenigingssite, waar je informatie deelt met een beperkte groep mensen die toch meestal direct naar de site toe gaan, in plaats van via een zoekmachine te moeten zoeken, wel een goede oplossing kunnen zijn. Het is in ieder geval redelijk makkelijk in het onderhoud. Website opbouwen met DIV s en CSS Cascading Style Sheets of kortweg CSS is de meest aanbevolen methode voor het vormgeven van uw website. In principe wordt de website verdeelt in een aantal vormgevingselementen, allemaal met een eigen 'naam'. In de zogenaamde 'Style sheet' kan per element aangeven worden hoe deze eruit moet zien: kleur, lettertype, plaats op de pagina, achtergrond, etc. Dit kan dan vervolgens ook in een apart bestand opgeslagen worden. Dit bestand kan dan ook aan al uw andere pagina's gekoppeld worden, waardoor daar makkelijk dezelfde elementen met dezelfde vormgeving gebruikt kunnen worden. In principe worden op deze manier vormgeving en inhoud van de site gescheiden. Dit maakt het onderhoud erg makkelijk. Belangrijk aspect is nog de overerving tussen de elementen die bij deze methode een rol speelt ('Cascading'). Dit betekent dat als een element binnen een ander element geplaats wordt in principe een aantal eigenschappen van het omringende element worden overgenomen (erven). Tenzij uitdrukkelijk andere waardes aan deze eigenschappen voor het element zijn toegekend. De zogenaamde 'Div's' zijn de elementen die de vormgeving van uw site bepalen. CSS is een standaard die is opgezet door de World Wide Web Consortium (W3C) met als doel het standaardiseren van de vormgeving van websites: alle webbrowsers zouden pagina's die volgens deze standaard zijn opgezet op dezelfde manier moeten weergeven. Helaas is dat doel nog niet bereikt, want er zitten nog al wat verschillen in de manieren waarop de verschillende browsers de style sheets interpreteren. Dus dat probleem blijft helaas bestaan

28 Deze methode is zeer zoekmachine vriendelijk (net omdat de inhoud duidelijk van de vormgeving is gescheiden) en zorgt ook voor een snel opbouwende website. Ook is het redelijk onderhoudsvriendelijk omdat dezelfde style-sheets aan al uw webpagina's kunt koppelen. Alleen de inhoud (content) moet dan voor iedere pagina apart worden opgezet (ook de terugkerende inhoud). Wat wel als nadeel zou kunnen gelden (vooral voor de beginnende website bouwer), is dat er wel iets meer kennis van HTML en ook CSS nodig is om het goed toe te kunnen passen. Layout van websites Websites worden op verschillende manieren opgebouwd. De verschillende vlakken kunnen naar eigen inzicht menu s, site-titel, content, banners, advertenties en widgeds worden geplaatst. De keuze van een lay-out en de invulleng van de verschillende vlakken is bepalend hoe bezoekers de site ervaren. Een rustige en overzichtelijke site met de juiste informatie en functionaliteiten zorgt ervoor dat de bezoeker vaker terug keert. Maak hierin dus een bewuste keuze! Hieronder worden verschillende website lay-outs met elkaar vergeleken en van opmerkingen voorzien. Meer CSS-layouts zijn te vinden op : Veel index-bestanden hebben een soort wrapper of container waarin de rest van de website wordt geplaatst. Verschillen in schermresolutie van eindgebruikers worden hiermee opgevangen Twee kolommen layout Vaak worden er twee kolommen gebruikt, naast een header (kop) en een footer (voet). In de eerste twee voorbeelden is er om de eigenlijke site een loze ruimte. Het menu, of andere inhoud, kan links of rechts worden geplaatst. In het laatste voorbeeld wordt de inhoudt van de site over de volledige breedte van het scherm weergegeven

29 Drie kolommen layout Drie kolommen worden vaak gebruikt als er naast een kop en voet meer moet worden weergegeven dan alleen een menu. De derde kolom ka dan worden gevuld met advertenties, widgets, ed. In het eerste twee voorbeelden staat de inhoud weer in het midden met aan weerskanten een loze ruimte. De tweede en derde kolom kunnen aan weerskanten worden geplaatst, maar ook beide links of rechts, zoals in het tweede voorbeeld. Alle varianten met de tweede en derde kolom kunnen ook over het volledige scherm gezet worden. Fixed of Liqued Een andere keuze die gemaakt moet worden is de wijze van scrollen door de content. In het witte vlak met name worden grote hoeveelheden informatie, tekst, afbeeldingen, players, etc, weergegeven. Wanneer dit niet past binnen de maten van het vlak, dit is ook schermresolutie afhankelijk, scrolt dan de gehele site, of alleen die content? Dit scrollen kan natuurlijk ook bij de vlakken met menu s en advertenties, wat de site minder overzichtelijk maakt. Web technologieën Webtechnologieen zijn in twee hoofdgroepen te verdelen, namelijk: clientside- en webservertechnieken. Er zijn ook een aantal andere manieren om webpagina's te voorzien van dynamische elementen. Deze vereisen over het algemeen dat er een plugin wordt geïnstalleerd in de browser. Clientside-technieken worden uitgevoerd op het systeem van de eindgebruiker (browser). Dit heeft is ideaal voor animaties voor het opleuken van de website. Gegevens die privacy gevoelig zijn kan men beter niet met clientside-technieken uitvoeren. De client (eindgebruiker) kan de uit te voeren code inzien, waardoor er problemen met de veiligheid kunnen ontstaan. Aan de serverside worden gegevens opgeslagen in databases, processen en berekeningen uit gevoerd die niet inzichtelijk (hoeven) mogen zijn voor eindgebruikers. Er volgen hieronder algemene richtlijnen van enkele bekende web-technologieën die binnen de standaarden van W3C web-sites

30 Client-Side Technologies XHTML XHTML is een markup language ontwerpen om informatie te structuren voor weergave op het web. In tegen stelling tot het gebruik van WYSIWYG programma s (zoals DreamWeaver), schrijf alle XHTML-code met de hand, dit zorgt ervoor dat alles clean is, alle code is echt nodig en van de hoogste standaard. Dit betekend dat de webpagina s sneller downloaden, in alle browsers te bekijken zijn, search engine vriendelijk en forward compatibel zijn. Cascading Style Sheets Cascading Style Sheets stuurt hoe web pagina s worden weergegeven in een browser en maakt het mogelijk om presentatie (lay-out) en de structuur en content te scheiden. CSS maakt het mogelijk om web pagaina s weer te geven in een acceptabele manier voor alle bezoekers met een wijde keuze van media. JavaScript/ECMA Script JavaScript is een programmeertaal die veel gebruikt wordt om webpagina's interactief te maken en webapplicaties te ontwikkelen. Het wordt vaak toegepast bij pop-ups en interactieve menu s. De syntaxis van JavaScript vertoont overeenkomsten met de programmeertaal Java. Omdat beide talen het meest zichtbaar zijn op en rond de browser, maar vooral door de naamgeving, worden ze vaak met elkaar verward. De gelijkenis houdt daar echter op, want JavaScript heeft inhoudelijk meer gemeen met functionele programmeertalen, het biedt prototype-gebaseerde overerving en niet, zoals Java en de meeste objectgeoriënteerde talen, klasse-gebaseerde overerving. Net als bij andere scripttalen is er een interpreter nodig om de geprogrammeerde opdrachten uit te voeren. De meeste moderne browsers beschikken over een eigen interpreter voor JavaScript. JavaScript kan ook gebruikt worden voor server-side scripting. Ook de webserver van Microsoft, IIS, ondersteunt JavaScript in Active Server Pages en ASP.NET. De laatste jaren maakt node.js een grote opgang. Desondanks kunnen veel interactieve webonderdelen ook met css en html worden gemaakt. <script type="text/javascript"> // code </script>

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

Inleiding! 6. Webbrowser! 7. Webserver! 9. Web Standaarden! 10. Het document object model! 13. Een goede website opbouwen! 14 ClientSide Wepages 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

Nadere informatie

Frontend ontwikkeling

Frontend ontwikkeling Frontend ontwikkeling Mark Jansen Edwin Vlieg PHPFreakz ledendag 10 november 2007 Frontend ontwikkeling De interface is je product richting de eindgebruiker Goede PHP code met een slechte interface geeft

Nadere informatie

Bestaat er serieus onderwijs in het maken van websites?

Bestaat er serieus onderwijs in het maken van websites? Bestaat er serieus onderwijs in het maken van websites? InGrUnDes, onderzoek naar InformationGridUnitDesign door Hans Frederik 12 april 2006 www.alexisbv.nl Agenda Vraagstelling Kaders Onderzoek Kwalificatieprofielen

Nadere informatie

Zicht - Content Management Systeem een algemene beschrijving

Zicht - Content Management Systeem een algemene beschrijving Zicht - Content Management Systeem een algemene beschrijving Versie april/2008 Zicht nieuwe media ontwerpers 2008 1 Inleiding Een Content Management Systeem (CMS) is een webapplicatie waarmee je zonder

Nadere informatie

HTML. Media. Hans Roeyen V 3.0

HTML. Media. Hans Roeyen V 3.0 Media Hans Roeyen V 3.0 12 maart 2015 Inhoud 1. (Multi)Media op websites... 3 2. Flash en Websites... 4 3. Video op je website... 4 3.1. YouTube insluiten op de pagina... 4 3.2. Video zonder YouTube...

Nadere informatie

Grafisch ontwerp. Referenties. https://developers.google.com/webmasters/mobile-sites/ http://www.bluetrainmobile.com/mobile-showcase

Grafisch ontwerp. Referenties. https://developers.google.com/webmasters/mobile-sites/ http://www.bluetrainmobile.com/mobile-showcase Mobiel Datanose Op dit moment is mobiel datanose niet goed gedaan; je krijgt gewoon de site te zien zoals je het te zien krijgt op pc's of laptops. Maar vaak heb je het probleem dat je op je mobiel moet

Nadere informatie

Whitepaper. E-mail design best practices

Whitepaper. E-mail design best practices Whitepaper E-mail design best practices 14 tips voor het design van je e-mail Versterk de boodschap van je uiting Best practices voor je e-mail design Het design speelt een grote rol in de eerste indruk

Nadere informatie

Handleiding Lay-outs bewerken voor LogiVert 5

Handleiding Lay-outs bewerken voor LogiVert 5 Hoofdstuk: Inleiding Handleiding Lay-outs bewerken voor LogiVert 5 Copyrights : 20 LogiVert BV Website : www.logivert.com V.0.3 5-5-2009 Toevoegingen aan stap voor stap V.0.2 9-4-2009 Tweede opzet V. 0.

Nadere informatie

Documentatie WD32. Christine van Woensel M32

Documentatie WD32. Christine van Woensel M32 Documentatie WD32 Christine van Woensel M32 Ontwerpkeuzes per device resolutie Desktop (1025 1600px & 769 1024px): Tablet (481 768px): Smartphone (321 480px & tot 320px): Algemeen: Alle ontwerpen voor

Nadere informatie

WEBSITE USABILITY. white-paper

WEBSITE USABILITY. white-paper WEBSITE USABILITY white-paper Alle rechten voorbehouden Het is niet toegestaan deze white-paper aan derden te verstrekken of te verkopen. Het is niet toegestaan de inhoud van deze white-paper elders te

Nadere informatie

WHITEPAPER. Wat is een. Responsive website? Voordelen van een. Responsive website? Hoe start je met een. Responsive website? RESPONSIVE WEBSITES

WHITEPAPER. Wat is een. Responsive website? Voordelen van een. Responsive website? Hoe start je met een. Responsive website? RESPONSIVE WEBSITES WHITEPAPER RESPONSIVE WEBSITES Wat is een Responsive website? Voordelen van een Responsive website? Hoe start je met een Responsive website? INTRODUCTIE Met het downloaden van deze whitepaper kunnen we

Nadere informatie

Globale kennismaking

Globale kennismaking Globale kennismaking Kennismaking Tesla CMS 1. Dashboard 2. pagina beheer - pagina aanmaken - pagina aanpassen - pagina verwijderen - pagina seo opties - zichtbaarheid pagina 3. subpagina beheer - subpagina

Nadere informatie

icafe Project Joeri Verdeyen Stefaan De Spiegeleer Ben Naim Tanfous

icafe Project Joeri Verdeyen Stefaan De Spiegeleer Ben Naim Tanfous icafe Project Joeri Verdeyen Stefaan De Spiegeleer Ben Naim Tanfous 2006-2007 Inhoudsopgave 1 2 1.1 Programmeertaal PHP5..................... 2 1.2 MySQL database......................... 3 1.3 Adobe Flash...........................

Nadere informatie

Websites maken met HTML, CSS en Dreamweaver en zonder JAVA, of JAVA-script of Flash

Websites maken met HTML, CSS en Dreamweaver en zonder JAVA, of JAVA-script of Flash Websites maken met HTML, CSS en Dreamweaver en zonder JAVA, of JAVA-script of Flash INHOUDSOPGAVE Inleiding DEEL I: THEORIE Hoofdstuk 1: Richtlijnen Webstandaarden Voordelen Hoofdstuk 2: HTML De geschiedenis

Nadere informatie

Release notes Argo 7. Interactieve LMS interface. Nieuwe interface voor lesmodules

Release notes Argo 7. Interactieve LMS interface. Nieuwe interface voor lesmodules Release notes Argo 7 Argo 7 heeft een interactief web design. Het is optimaal afgestemd op de grote diversiteit aan computerbeeldschermen, van grootbeeld desktops en notebooks tot tablets en smart phones.

Nadere informatie

INFORMATIE VOOR COMMUNICATIEMANAGERS EN WEBMASTERS

INFORMATIE VOOR COMMUNICATIEMANAGERS EN WEBMASTERS INFORMATIE VOOR COMMUNICATIEMANAGERS EN WEBMASTERS BrowseAloud Plus: dé voorleestool op websites! 1 INHOUD Informatie voor communicatiemanagers en webmasters... 1 BrowseAloud Plus: dé voorleestool op websites!

Nadere informatie

HTML en CSS. Je website bestaat uit HTML. Dat is een taal die browsers (Internet explorer, Chrome, Safari) kunnen lezen.

HTML en CSS. Je website bestaat uit HTML. Dat is een taal die browsers (Internet explorer, Chrome, Safari) kunnen lezen. Terminologie HTML en CSS HTML: Hyper Markup language Je website bestaat uit HTML. Dat is een taal die browsers (Internet explorer, Chrome, Safari) kunnen lezen. CSS: Cascading StyleSheet stylesheet for

Nadere informatie

OPDRACHTKAART. Thema: Multimedia. Het internet 3. Het World Wide Web MM-05-03-01. Voorkennis: Geen.

OPDRACHTKAART. Thema: Multimedia. Het internet 3. Het World Wide Web MM-05-03-01. Voorkennis: Geen. OPDRACHTKAART MM-05-03-01 Het World Wide Web Voorkennis: Geen. Intro: Deze opdracht gaat over de belangrijkste mogelijkheid van het internet: het surfen op het World Wide Web. Deze opdracht beschrijft

Nadere informatie

HANDLEIDING DOIT BEHEER SYSTEEM

HANDLEIDING DOIT BEHEER SYSTEEM HANDLEIDING DOIT BEHEER SYSTEEM ALGEMENE INFORMATIE Het Doit beheer systeem is een modulair opgebouwd systeem waarin modules makkelijk kunnen worden toegevoegd of aangepast, niet iedere gebruiker zal dezelfde

Nadere informatie

WEBSITE SCAN Vrijblijvend advies

WEBSITE SCAN Vrijblijvend advies WEBSITE SCAN Vrijblijvend advies IBAN: NL57ABNA0479025207 Inleiding: Wij hebben uw website op diverse facetten geanalyseerd en hier een bondig rapport voor geschreven. Door het uitvoeren van onderstaande

Nadere informatie

Werken met afbeeldingen in webpagina's

Werken met afbeeldingen in webpagina's Werken met afbeeldingen in webpagina's In webpagina's komen heel vaak afbeeldingen voor. Toch gaan webpagina's helemaal anders om met afbeeldingen dan bijvoorbeeld een PowerPoint-presentatie of een Word-document.

Nadere informatie

Handleiding Website Laatste update: april 2014

Handleiding Website Laatste update: april 2014 Laatste update: april 2014 1. Google Search Tijdens de ontwikkeling van uw website werd er veel aandacht besteed aan optimalisatie voor zoekmachines zoals Google. Dit onder andere door de broncode technisch

Nadere informatie

HTML Graphics. Hans Roeyen V 3.0

HTML Graphics. Hans Roeyen V 3.0 HTML Graphics Hans Roeyen V 3.0 19 maart 2015 Inhoud 1. HTML5 Canvas... 3 1.1. Het Canvas element... 3 2. SVG Element... 9 2.1. SVG vergeleken met Canvas... 9 2.2. Een cirkel tekenen met SVG... 10 2.2.1.

Nadere informatie

Opdracht Dynamische Webapplicaties: HTML5

Opdracht Dynamische Webapplicaties: HTML5 INLEIDING HTML5 is sinds kort de nieuwe standaard voor het maken van webpagina s. Deze nieuwe versie van de welgekende HTML (HyperText Markup Language) biedt voor het eerst de mogelijkheid om video en

Nadere informatie

Handleiding Templates bewerken voor LogiVert 6

Handleiding Templates bewerken voor LogiVert 6 Hoofdstuk: Inleiding Handleiding Templates bewerken voor LogiVert 6 Copyrights : 203 LogiVert BV Website : www.logivert.com V. 0. 30-7-203 Eerste versie Hoofdstuk: Inleiding Inhoud Inleiding... 4 Introductie...

Nadere informatie

HTML5 VIDEO. Een stand van zaken Jeroen Wijering, LongTail Video

HTML5 VIDEO. Een stand van zaken Jeroen Wijering, LongTail Video HTML5 VIDEO Een stand van zaken Jeroen Wijering, LongTail Video WHOIS JW? Auteur van de JW Player (2005) Open-source Flash video speler voor embedden in websites. Gebruikt door YouTube in 1e jaar Helaas,

Nadere informatie

DOCENTENHANDLEIDING JET-NET WEBCAST

DOCENTENHANDLEIDING JET-NET WEBCAST DOCENTENHANDLEIDING JET-NET WEBCAST Inhoudsopgave Inloggen... 3 Layout... 5 Interactie... 6 Benodigdheden... 8 Praktische tips... 8 Bijlage I : HELP... 9 2 Inloggen Om deel te nemen aan de webcast, moet

Nadere informatie

Algemene WordPress Handleiding uitleg basics Karin de Wit Design

Algemene WordPress Handleiding uitleg basics Karin de Wit Design Inhoudsopgave Inhoudsopgave... 2 Algemene informatie... 3 Introductie... 4 Inloggen bij WordPress... 5 Introductie in het dashboard... 6 Berichten en pagina's... 8 Bericht Categorieën... 8 Nieuw Bericht...

Nadere informatie

Handleiding CMS Online Identity Webontwikkeling. Handleiding CMS

Handleiding CMS Online Identity Webontwikkeling. Handleiding CMS Handleiding CMS 1 Inhoudsopgave 1. Inloggen... 3 2. Het CMS... 3 3. Websitecontent... 4 3.1 Een nieuwe pagina toevoegen... 4 3.2 Een pagina wijzigen... 4 3.3 Een pagina verwijderen... 5 4. De WYSIWYG editor...

Nadere informatie

Drempelvrij samenwerken

Drempelvrij samenwerken Drempelvrij samenwerken Start ook met drempelvrij samenwerken. Door kennis en informatie te delen op een platform dat aan de webrichtlijnen voldoet kun je met heel Nederland samenwerken. In deze whitepaper

Nadere informatie

WordPress Handleiding

WordPress Handleiding Algemene Informatie Disclaimer: Bij het samenstellen van dit boek is de grootst mogelijke zorg besteed aan de juistheid van de opgenomen informatie. Wij kunnen echter niet verantwoordelijk gesteld worden

Nadere informatie

Handleiding. Beheeromgeving

Handleiding. Beheeromgeving Handleiding Beheeromgeving Kant en Klare Site Veluwelaan 80 8443 AH Heerenveen www.kantenklaresite.nl - info@kantenklaresite.nl - fax: 084-8368243 KvK 01134248 Inhoud Inloggen op de beheeromgeving...3

Nadere informatie

Een website omzetten naar WordPress

Een website omzetten naar WordPress 1 Een website omzetten naar WordPress Er zijn talloze programma s beschikbaar om websites te maken. In de titels Basisgids Websites maken met WordPress en Websites maken met WordPress voor senioren wordt

Nadere informatie

Publishing & Printing Company B.V.

Publishing & Printing Company B.V. STAPPENPLAN WEBSITE Versie 1.3 Publishing & Printing Company B.V. Weth. Sangersstraat 38 (0)46-437 73 11 KVK 140.41959 6191 NA Beek web@pp-company.nl BTW NL 0085.52.861.B01 Algemene voorwaarden www.pp-company.nl

Nadere informatie

Versie 0.4. Documentatie Onsweb Club plugin voor KNKV verenigingen. Laatste wijziging: 19 juli 2012 Auteurs: Marien Dongstra, Sebastian Huisman

Versie 0.4. Documentatie Onsweb Club plugin voor KNKV verenigingen. Laatste wijziging: 19 juli 2012 Auteurs: Marien Dongstra, Sebastian Huisman Documentatie Onsweb Club plugin voor KNKV verenigingen Versie 0.4 Laatste wijziging: 19 juli 2012 Auteurs: Marien Dongstra, Sebastian Huisman Alle rechten in dit document zijn voorbehouden. www.onsweb.nl,

Nadere informatie

Web building basis: HTML. Karel Nijs 2008/09

Web building basis: HTML. Karel Nijs 2008/09 Web building basis: HTML Karel Nijs 2008/09 Web building basis eerste les HTML intro Browsers HTML elementen HTML basis tags HTML attributen HTML kleuren HTML formattering Extra: HTML entities Web building

Nadere informatie

VMBO-ICT-Route examen 2009 Naam: Marc Schattorie Datum: 06-03-09

VMBO-ICT-Route examen 2009 Naam: Marc Schattorie Datum: 06-03-09 VERSLAG BICS INSTRUCTIIEFIILMPJES VMBO-ICT-Route examen 2009 Naam: Marc Schattorie Datum: 06-03-09 Inhoudsopgave Gebruik BICS..blz. 3 Onderzoek naar korte instructiefilms...blz. 3 Onderzoek naar screenrecorders.blz.

Nadere informatie

PRESTATIESITE WEBPAKKET

PRESTATIESITE WEBPAKKET PRESTATIESITE WEBPAKKET PRESTATIESITE Wij hebben al onze ervaring gebruikt om een gestandaardiseerd webpakket te ontwikkelen met een lay-out welke de focus heeft op leads en new business. Op deze wijze

Nadere informatie

De Kleine WordPress Handleiding

De Kleine WordPress Handleiding Introductie Dit is geen uitgebreide handleiding om een WordPress website of blog mee te bouwen. Het is ook geen overzicht van alle aspecten die een WordPress website zo bijzonder maken en geen verhandeling

Nadere informatie

Een webpagina maken. Een website bouwen met HTML en CSS practicum 1

Een webpagina maken. Een website bouwen met HTML en CSS practicum 1 Een webpagina maken De komende periode wordt in 8 practica een aantal technieken behandeld, die je nodig hebt om een (eenvoudige) website te kunnen bouwen. Nadat je deze 8 practica hebt doorgewerkt, moet

Nadere informatie

SELECTEER EEN PAGINA TEMPLATE EN HOOFD VOOR DE PAGINA: Selecteer, in de PAGINA ATTRIBUTEN module rechts naast

SELECTEER EEN PAGINA TEMPLATE EN HOOFD VOOR DE PAGINA: Selecteer, in de PAGINA ATTRIBUTEN module rechts naast OPMAKEN VAN BERICHTEN EN PAGINA S ONE PAGER Berichten en pagina s worden op dezelfde wijze opgemaakt. Voor het opmaken van een bericht ga je in het navigatiemenu (afbeelding rechts) naar BERICHTEN > NIEUW

Nadere informatie

Het Wepsysteem. Het Wepsysteem wordt op maat gebouwd, gekoppeld aan de gewenste functionaliteiten en lay-out van de site. Versie september 2010

Het Wepsysteem. Het Wepsysteem wordt op maat gebouwd, gekoppeld aan de gewenste functionaliteiten en lay-out van de site. Versie september 2010 Het Wepsysteem Het Wepsysteem is een content management systeem, een systeem om zonder veel kennis van html of andere internettalen een website te onderhouden en uit te breiden. Met het Content Management

Nadere informatie

Websitecheck. Taak en Tekst voor websites die werken. www.jouwsite.nl

Websitecheck. Taak en Tekst voor websites die werken. www.jouwsite.nl Taak en Tekst voor websites die werken www.jouwsite.nl Websitecheck Taak en Tekst, www.taakentekst.nl Buijs Ballotstraat 27A, 2563 ZH Den Haag 06-13935470 1 Websitecheck Website: Eigenaar: Datum: www.jouwsite.nl

Nadere informatie

Web Presence Builder. Inhoud

Web Presence Builder. Inhoud Web Presence Builder Inhoud Inhoud... 1 Wat is Web Presence Builder?... 2 Het categoriescherm... 2 De eerste stappen naar een eigen website... 3 Onderwerp selecteren en website naam aanpassen... 3 Vooraf

Nadere informatie

Handleiding NBVA-Webformulesite 2.0

Handleiding NBVA-Webformulesite 2.0 Handleiding NBVA-Webformulesite 2.0 Inhoud 1. Algemeen 2. Structuur beheeromgeving 2a Posities 2b Inhoud 2c Extra 3. Hoe werkt de WYSIWYG-editor? 3a Wijzigen van teksten 3b Nieuwsberichten plaatsen 3c

Nadere informatie

Beschrijving functioneel en technisch design van de website

Beschrijving functioneel en technisch design van de website Bespreking Punten: Beschrijving functioneel en technisch design van de website Nr. Punt 1 Student 2 Bedrijf 3 Algemene lay out 4 Technologieën 5 Webruimte en datatrafiek 1. Student Registratie Bij de registratie

Nadere informatie

Responsive & Adaptive

Responsive & Adaptive Responsive & Adaptive webdesign door online regisseur Snakeware versie 1.0 woensdag, 17 oktober 2012 Uitgebracht door: Auteurs: Snakeware Martiniplein 15e 8601 EG Sneek Dhr. Gerben Kuipers gerben@snakeware.nl

Nadere informatie

Meer over het Windows browser-keuzescherm

Meer over het Windows browser-keuzescherm Meer over het Windows browser-keuzescherm Binnen nu en een aantal weken krijgt het merendeel van u het Windows browser-keuzescherm voorgeschoteld. Het keuzescherm is in overleg met de Europese Commissie

Nadere informatie

Content Management Systeem Specifieke modules van het Steenstra CMS 2011

Content Management Systeem Specifieke modules van het Steenstra CMS 2011 Content Management Systeem Specifieke modules van het Steenstra CMS 2011 2. Overzicht en specificering van additionele modules Naast de basis implementatie is het Steenstra CMS systeem uit te breiden met

Nadere informatie

WEB DESIGN. 2012 Excel With Business

WEB DESIGN. 2012 Excel With Business 1.0 Introductie Websites zijn een integraal onderdeel geworden van ons dagelijks leven. Velen van ons bekijken bepaalde sites voordat we het bed uitkomen. Wellicht om te zien welke impact het weer op onze

Nadere informatie

Haal meer boekingen uit uw website! Meer bezoekers, meer boekingen, meer gasten Tommy Bookingsupport & TenZer

Haal meer boekingen uit uw website! Meer bezoekers, meer boekingen, meer gasten Tommy Bookingsupport & TenZer Haal meer boekingen uit uw website! Meer bezoekers, meer boekingen, meer gasten Tommy Bookingsupport & TenZer Wat gaan we doen. Online trends Website ontwikkeling Online boeken Zoekmachine optimalisatie

Nadere informatie

U krijgt de melding dat uw browser geen cookies aanvaardt? Volg dan onderstaande weg om ze wel te accepteren.

U krijgt de melding dat uw browser geen cookies aanvaardt? Volg dan onderstaande weg om ze wel te accepteren. HELP BIJ HET RAADPLEGEN VAN HET PORTAAL HDP Hoe internet-cookies aanvaarden? U krijgt de melding dat uw browser geen cookies aanvaardt? Volg dan onderstaande weg om ze wel te accepteren. Internet Explorer

Nadere informatie

Handleiding Website beheersysteem

Handleiding Website beheersysteem Handleiding Website beheersysteem Inhoudsopgave 1. Inleiding...3 2. Inloggen...4 3. De startpagina...5 3.1. Startpagina menu...5 3.2. Bovenbalk...6 4. Menu en Pagina's...7 4.1. Een nieuwe pagina toevoegen...8

Nadere informatie

VERENIGINGSWIJZER.NL FINAL DOCUMENT

VERENIGINGSWIJZER.NL FINAL DOCUMENT Vrije Universiteit Amsterdam Faculteit der Exacte Wetenschappen Project Multimedia Peter van Ulden Studentnr. 1494759 VERENIGINGSWIJZER.NL FINAL DOCUMENT INHOUDSOPGAVE 1 Inleiding...3 2 Aanpak & Techniek...4

Nadere informatie

Jouw bedrijf in 3 stappen bovenin Google Whitepaper online vindbaarheid versie augustus 2012

Jouw bedrijf in 3 stappen bovenin Google Whitepaper online vindbaarheid versie augustus 2012 Jouw bedrijf in 3 stappen bovenin Google Whitepaper online vindbaarheid versie augustus 2012 Whitepaper Online vindbaarheid Allebedrijvenin augustus 2012 Pagina 1 Een woord vooraf Je hebt een prachtige

Nadere informatie

SMART- Leerdoel Mathijs de Bok Emotion - RMM42

SMART- Leerdoel Mathijs de Bok Emotion - RMM42 SMART- Leerdoel Mathijs de Bok Emotion - RMM42 Inhoudsopgave 1.0 Inhoudsopgave 1 1.0 Inleiding 2 1.1 Algemeen 2 1.2 Mijn leerdoelen 2 2.0 Beschrijving leerdoel 2 3 2.1 Responsive 3 2.2 Up- to- date HTML&CSS

Nadere informatie

6. Indexatie: Zijn de verschillende pagina s binnen de site geïndexeerd door Google?

6. Indexatie: Zijn de verschillende pagina s binnen de site geïndexeerd door Google? PIMPTER WEBSHOP http://www.nailsprinter.com http://www.pimpter.com/ http://www.salonique.com/nail-printers.html http://www.nagelstudiocenc.nl/shop.php http://www.yournail.nl/webwinkel-category-1127889/nagelprinter.html

Nadere informatie

Handleiding teksteditor

Handleiding teksteditor In deze handleiding leggen we de werking van de teksteditor uit. De teksteditor wordt gebruikt voor het bewerken van tekst. Uw tekstpagina s bewerkt u met deze editor, maar u vindt m op vele plekken terug.

Nadere informatie

Handleiding Wordpress

Handleiding Wordpress Handleiding Wordpress Inhoudsopgave 1. Inloggen 2. Berichten en Pagina s 3. Afbeeldingen en video s 4. Weblinks 1. Inloggen 1.1 Inloggen bij Wordpress We starten met het inloggen op je WordPress gebaseerde

Nadere informatie

Welkom in de wondere wereld van websites met WordPress.

Welkom in de wondere wereld van websites met WordPress. Welkom in de wondere wereld van websites met WordPress. Alsjeblieft, dit kleine WordPress woordenboekje is voor jou. Want als je voor het eerst een website met WordPress gaat maken kom je misschien woorden

Nadere informatie

Websitecursus deel 1 HTML

Websitecursus deel 1 HTML Websitecursus deel 1 HTML WebCie A Eskwadraat www@a-eskwadraat.nl 8 april 2015 Inleiding Website cursus in drie delen: HTML CSS Javascript We gaan uit van geen voorkennis. Als je vragen hebt, stel ze!

Nadere informatie

PvdA websites Quick Start voor het werken met het Hippo CMS

PvdA websites Quick Start voor het werken met het Hippo CMS PvdA websites Quick Start voor het werken met het Hippo CMS Versie 2.0 Amsterdam, 16 maart 2009 2 Inhoudsopgave 1. Beginnen 5 1.1 Het CMS opstarten en afsluiten 5 1.2 De preview website bekijken 5 1.3

Nadere informatie

iprova Suite Systeemeisen iprova 5 Hosting

iprova Suite Systeemeisen iprova 5 Hosting iprova Suite Systeemeisen iprova 5 Hosting Let op Dit document bevat de systeemeisen voor versie 5.0 van de iprova Suite. Door nieuwe ontwikkelingen kunnen de systeemeisen voor iprova wijzigen. Controleer

Nadere informatie

WEBANALYSE. WEBPAGINA: http://www.joy-ce.com/ April 2013. Vervaardigd door:

WEBANALYSE. WEBPAGINA: http://www.joy-ce.com/ April 2013. Vervaardigd door: WEBANALYSE WEBPAGINA: http://www.joy-ce.com/ April 2013 Vervaardigd door: Inhoudsopgave Inhoud.2 Introductie 3 Social Media 4 Mobiel 5 SEO..6 Basis. Inhoud. Links.. Keywords. Autoriteit. Linkuitwisseling...

Nadere informatie

M I K E R U B I O K E R N T A A K

M I K E R U B I O K E R N T A A K M I K E R U B I O E X A M E N 2 0 1 4 K E R N T A A K 2 1 Inhoudsopgave Inventarislijst...03 Begeleidt Uitbestedingen...05 Logboek Back-ups...07 Protocol & Bestaden...09 Testplan...11 Website...15 Applicatie...18

Nadere informatie

11. Website controleren

11. Website controleren 11. Website controleren 11.1 Website controleren op verschillende browsers Het blijkt nog altijd nodig te zijn een website te controleren. De website zoals deze er in Kompozer uit ziet, ziet er op internet

Nadere informatie

Mach3Framework 5.0 / Website

Mach3Framework 5.0 / Website Mach3Framework 5.0 / Website Handleiding Mach3Builders Inhoudsopgave 1 Inloggen...5 1.1 Ingelogd blijven...6 1.2 Wachtwoord vergeten...7 2 Applicatie keuzescherm...8 2.1 De beheeromgeving openen...9 3

Nadere informatie

Iedereen online, van 9 tot 99 jaar. Les 1 ... De webbrowser, onze surfplank door het wereldwijde web. Deze iconen tonen aan voor wie het document is

Iedereen online, van 9 tot 99 jaar. Les 1 ... De webbrowser, onze surfplank door het wereldwijde web. Deze iconen tonen aan voor wie het document is Les 1... De webbrowser, onze surfplank door het wereldwijde web. Deze iconen tonen aan voor wie het document is Leerkrachten WebExperts Senioren Leerlingen Achtergrondinformatie Achtergrondinformatie voor

Nadere informatie

Project plan. Erwin Hannaart Sander Tegelaar 61849 62407

Project plan. Erwin Hannaart Sander Tegelaar 61849 62407 Project plan Erwin Hannaart Sander Tegelaar 61849 62407 I4C2 I4C1 1 Inhoudsopgave Doel en doelgroep van het project... 3 Beschrijving van het project... 4 Benodigde materialen... 5 Te verwachten resultaten,

Nadere informatie

Naam stagiair: Nick Swaerdens. Klas: 3IV2. Praktijkopleider: Jordy Pouw. Stagebegeleider: Ron Spitse. Stage periode tweede verslag:

Naam stagiair: Nick Swaerdens. Klas: 3IV2. Praktijkopleider: Jordy Pouw. Stagebegeleider: Ron Spitse. Stage periode tweede verslag: Nick Swaerdens 3IV2 10 / 06 / 2015 Naam stagiair: Nick Swaerdens Klas: 3IV2 Praktijkopleider: Jordy Pouw Stagebegeleider: Ron Spitse Stage periode tweede verslag: 2 april 2015 10 juni 2015 Inlever datum:

Nadere informatie

Handleiding Mijneigenweb.nl

Handleiding Mijneigenweb.nl Handleiding Mijneigenweb.nl Inhoud 1 Inloggen 2 Kleurenschema en lettertype 2.1 Kies een standaard kleurenschema 2.2 Kleurenschema en lettertypes aanpassen/ zelf samenstellen 3 Logo 4 Visual 4.1 Eigen

Nadere informatie

EBUILDER HANDLEIDING. De Ebuilder is een product van EXED internet www.exed.nl. info@exed.nl EXED CMS UITLEG

EBUILDER HANDLEIDING. De Ebuilder is een product van EXED internet www.exed.nl. info@exed.nl EXED CMS UITLEG EBUILDER HANDLEIDING De Ebuilder is een product van EXED internet www.exed.nl info@exed.nl 1 INHOUDSOPGAVE Inleiding Een korte introductie over het Ebuilder» Navigatie» Snelnavigatie Pagina s Hier vind

Nadere informatie

Systeemvereisten Track Verzuim

Systeemvereisten Track Verzuim Systeemvereisten Track Verzuim Versie 2.1.0 Datum 26 maart 2009 Doel: Het doel van dit document is uit te leggen wat de minimale specificaties zijn om Track Verzuim te kunnen gebruiken. Vereisten om Track

Nadere informatie

Via methodewebsite www w.emma.eisma.nl of de ELO van de school

Via methodewebsite www w.emma.eisma.nl of de ELO van de school Via methodewebsite www.emma.eisma.nl of de ELO van de school Veelgestelde vragen rondom de online leerlingomgeving Veelgestelde vragen rondom de online leerlingomgeving (Station, Library en Route 2F) servicedesk@eisma.nl

Nadere informatie

Algemene regels. Stappenplan webdesign

Algemene regels. Stappenplan webdesign Algemene regels Stappenplan webdesign Kleurengebruik Denk bij het maken van een website aan je kleurencombinaties. Gebruik niet meer dan 4 kleuren; Achtergrond; Heading/ Subheading; Platte tekst; Links.

Nadere informatie

01/05. Websites Nederland over. Mobile marketing. Whitepaper #03/2013. Mabelie Samuels internet marketeer

01/05. Websites Nederland over. Mobile marketing. Whitepaper #03/2013. Mabelie Samuels internet marketeer 01/05 Websites Nederland over Mobile marketing Mabelie Samuels internet marketeer 02/05 Mobile marketing Kunt u zich uw eerste mobiele telefoon nog herinneren? Die van mij was een Motorola, versie onbekend,

Nadere informatie

Handleiding: Whitelabel Customersite

Handleiding: Whitelabel Customersite ARGEWEB B.V. Handleiding: Whitelabel Customersite Controlportal.nl Argeweb Support 8-1-2009 Handleiding voor het gebruik maken van de Whitelabel Customersite op controlportal.nl, door Resellers van Argeweb.

Nadere informatie

MICROSOFT EDGE INTERNET

MICROSOFT EDGE INTERNET MICROSOFT EDGE INTERNET 2015 Computertraining voor 50-plussers PC50plus computertrainingen Eikbosserweg 52 1214AK Hilversum tel: 035 6213701 info@pc50plus.nl www.pc50plus.nl Microsoft Edge Internet COMPUTERTRAINING

Nadere informatie

1. ONTWIKKEL EEN MOBIELE VERSIE

1. ONTWIKKEL EEN MOBIELE VERSIE 1. ONTWIKKEL EEN MOBIELE VERSIE Het is een misvatting om te denken dat een webshop die ontwikkeld is als desktopsite, ook goed werkt voor mobiele gebruikers. Integendeel, je moet de website optimaliseren

Nadere informatie

Handleiding Concrete5 website. Outbound Media

Handleiding Concrete5 website. Outbound Media Handleiding Concrete5 website Outbound Media In deze handleiding behandelen we de basis benodigdheden om uw website up-to-date te kunnen houden. We behandelen: Inloggen editen (bewerken) van tekst een

Nadere informatie

Mixed Emotions Digitaal Functioneel ontwerp Datum: 3 april 2014 - Onze referentie: MEO.001-01 - Versie: v1.0

Mixed Emotions Digitaal Functioneel ontwerp Datum: 3 april 2014 - Onze referentie: MEO.001-01 - Versie: v1.0 Mixed Emotions Digitaal Functioneel ontwerp Datum: 3 april 2014 - Onze referentie: MEO.001-01 - Versie: v1.0 Inhoudsopgave Inhoudsopgave Inleiding 2 3 1. Achtergrond 4 2. Structuur 5 3. Inhoud Mixed Emotions

Nadere informatie

C o n t e n t M a n a g e m e n t S y s t e e m. G e b r u i k s a a n w i j z i n g - 2 0 1 2

C o n t e n t M a n a g e m e n t S y s t e e m. G e b r u i k s a a n w i j z i n g - 2 0 1 2 C o n t e n t M a n a g e m e n t S y s t e e m G e b r u i k s a a n w i j z i n g - 2 0 1 2 Zelf pagina's bewerken met het Content Management Systeem Met het Content Management Systeem (CMS) heeft u

Nadere informatie

Omzeil het gebruik van mappen en bestanden over Wiki s en het werken in de 21 e eeuw

Omzeil het gebruik van mappen en bestanden over Wiki s en het werken in de 21 e eeuw Omzeil het gebruik van mappen en bestanden over Wiki s en het werken in de 21 e eeuw In de whitepaper waarom u eigen documenten niet langer nodig heeft schreven we dat het rondmailen van documenten geen

Nadere informatie

Handleiding wordpress

Handleiding wordpress Handleiding wordpress Wordpress versie 3.0.4 Handleiding versie 1.1 Auteur Website Geert Hoekzema www.geerthoekzema.nl www.geerthoekzema.nl geert@geerthoekzema.nl 1 Inhoudsopgave Inleiding... 3 Beginnen

Nadere informatie

Kompozer Webdesign www.acc.dds.nl/lesonline/kompozer/

Kompozer Webdesign www.acc.dds.nl/lesonline/kompozer/ Hier vind je de cursus op het internet: www.acc.dds.nl/acconline/ Kompozer Webdesign www.acc.dds.nl/lesonline/kompozer/ Een bestaande website met kompozer www.acc.dds.nl/lesonline/kompozer/website/ Bestanden

Nadere informatie

Dit artikel is gepubliceerd in DZone Magazine, januari 2004, pagina 61-63

Dit artikel is gepubliceerd in DZone Magazine, januari 2004, pagina 61-63 Streaming Media Deel 2 Door dr.ir. Al-Noor Ladhani, Forward Thinking BV Januari 2004 Dit artikel is gepubliceerd in DZone Magazine, januari 2004, pagina 61-63 Dzone Magazine is het vaktijdschrift voor

Nadere informatie

De 9lives Webdesign informatie sticky

De 9lives Webdesign informatie sticky De 9lives Webdesign informatie sticky Hoe maak ik een eigen website? Een eigen site maken kan op verschillende manieren, de ene al wat beter dan de andere. Veel gebruikers beginnen met een WYSIWYG-editor,

Nadere informatie

IMPACTS SITES BEZOOM V2.1 GEBRUIKSAANWIJZING

IMPACTS SITES BEZOOM V2.1 GEBRUIKSAANWIJZING INHOUD I. LOGIN IMPACTS SITES BEZOOM V2.1 GEBRUIKSAANWIJZING II. BEHEER UW WEBSITE 1. ONDERWERP A. Informatie B. Contactpersoon C. Links D. Footer E. Favicon 2. CMS A. Toevoegen (een pagina) B. SEO 3.

Nadere informatie

02. Responsive Design

02. Responsive Design WHITEPAPER IN 5 MINUTEN J U L I 2 0 1 2 02. Responsive Design Introductie De wereld van schermen waarop je website wordt getoond, raakt in rap tempo versnipperd. Voorheen was het makkelijk: websites werden

Nadere informatie

CMS Made Simple eenvoudig uitgelegd CMS MADE SIMPLE- Eenvoudig uitgelegd

CMS Made Simple eenvoudig uitgelegd CMS MADE SIMPLE- Eenvoudig uitgelegd CMS Made Simple eenvoudig uitgelegd CMS MADE SIMPLE- Eenvoudig uitgelegd Introductie Deze handleiding heeft tot doel een eenvoudige stap voor stap handleiding te zijn voor eindgebruikers van CMS Made Simple

Nadere informatie

Door onze website te gebruiken gaat u akkoord met het gebruik van cookies zoals beschreven in dit cookiebeleid.

Door onze website te gebruiken gaat u akkoord met het gebruik van cookies zoals beschreven in dit cookiebeleid. 3V cookiebeleid. Een cookie is een klein tekstbestand dat naar uw internetbrowser wordt gestuurd. Voorbeelden van internetbrowsers zijn Internet Explorer, Safari, Google Chrome en Mozilla. De cookie wordt

Nadere informatie

In deze PDF zal er vanuit worden gegaan dat je weet wat HTML is en dat je weet hoe je een website aan moet passen in de code.

In deze PDF zal er vanuit worden gegaan dat je weet wat HTML is en dat je weet hoe je een website aan moet passen in de code. Bedankt! Als eerste bedankt voor het aanschaffen van deze PDF waarin ik je handige tips en trucs zal geven voor de optimalisatie van jouw website. Deze PDF staat vol met informatie om de website te kunnen

Nadere informatie

slashdotfox Toelichting functioneel ontwerp

slashdotfox Toelichting functioneel ontwerp Toelichting functioneel ontwerp Een functioneel ontwerp wordt gebruikt door ontwerpers en ontwikkelaars om overzicht te bieden aan de uit te voeren werkzaamheden. Op basis van het functioneel ontwerp is

Nadere informatie

Klik&Steen Dashboard. Wat zijn nou interessante statistieken bij websites?

Klik&Steen Dashboard. Wat zijn nou interessante statistieken bij websites? Klik&Steen Dashboard Wat zijn nou interessante statistieken bij websites? Inleiding Dit document dient als onderzoek naar de statistieken die interessant zijn om te laten zien in het dashboard van Klik&Steen.

Nadere informatie

Handleiding CMS Made Simple

Handleiding CMS Made Simple Handleiding CMS Made Simple Versie 3 Mei 2013 Inhoudsopgave 1. Inleiding... 3 2. Inloggen en uitloggen... 4 Inloggen... 4 Uitloggen... 5 3. Plaatsen van teksten op pagina s... 6 Menubalk... 6 Tekst plaatsen

Nadere informatie

Inleiding webdesign. Websites zijn er niet zomaar. Iemand heeft ze bedacht en gemaakt en er moeten ook mensen zijn die het willen gebruiken.

Inleiding webdesign. Websites zijn er niet zomaar. Iemand heeft ze bedacht en gemaakt en er moeten ook mensen zijn die het willen gebruiken. Inleiding Webdesign Inleiding webdesign Dit is een algemene inleiding over het maken van websites en wat daarbij allemaal komt kijken. De onderwerpen worden kort aangestipt omdat deze inleiding is gebaseerd

Nadere informatie

ailexpert Tips & Tricks Email design

ailexpert Tips & Tricks Email design ailexpert Tips & Tricks Email design 1 Inleiding E-mail marketing is een vorm van direct marketing waarmee een bedrijf in contact kan komen te staan met haar klanten. De markt van E-mail marketing is de

Nadere informatie

Handleiding Leveranciersportaal

Handleiding Leveranciersportaal ArcelorMittal Belgium Handleiding Leveranciersportaal 1. INHOUDSTAFEL 1. Inhoudstafel... 1 2. Benodigde instellingen voor gebruik portaal... 1 2.1. JavaScript... 1 2.2. Silverlight... 2 2.3. Browser...

Nadere informatie