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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Introductie testtooling Wink

Introductie testtooling Wink Introductie testtooling Wink SYSQA B.V. Almere Datum : 10-04-2013 Status : 1.0 Opgesteld door : Organisatie SYSQA B.V. Pagina 2 van 16 Inhoudsopgave 1 Inleiding... 3 1.1 Opbouw... 3 2 Wink... 4 2.1 Wat

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

Analyse Programmeertalen

Analyse Programmeertalen Analyse Programmeertalen De keuze van een programmeertaal mag niet onderschat worden. Het is dankzij deze taal dat de gebruiker interactie heeft met het complete systeem. Het is dus vanzelfsprekend dat

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

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

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

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

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

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

icafe Een digitaal bestelsysteem voor de horeca Joeri Verdeyen Stefaan De Spiegeleer Naim Ben Tanfous

icafe Een digitaal bestelsysteem voor de horeca Joeri Verdeyen Stefaan De Spiegeleer Naim Ben Tanfous icafe Een digitaal bestelsysteem voor de horeca Joeri Verdeyen Stefaan De Spiegeleer Naim Ben Tanfous 2006-2007 Voorwoord 1 Inhoudsopgave 2 Hoofdstuk 1 Inleiding 3 Hoofdstuk 2 icafe 2.1 Het idee 2.2 Mogelijkheden

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

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

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

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

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

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

Over PHP. PHP en MySQL. 1.1 Inleiding. In dit hoofdstuk maak je kennis met PHP. Hoe werkt deze

Over PHP. PHP en MySQL. 1.1 Inleiding. In dit hoofdstuk maak je kennis met PHP. Hoe werkt deze Over PHP 1.1 Inleiding In dit hoofdstuk maak je kennis met PHP. Hoe werkt deze programmeertaal? En hoe is het ontstaan? Ook leer je welke editors je kunt gebruiken om PHP-scripts te maken en hoe je eenvoudig

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

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

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

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

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

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

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

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

1.Noem de vijf categorieën waarin programmeertalen kunnen worden ingedeeld en geef van elke categorie één voorbeeld.

1.Noem de vijf categorieën waarin programmeertalen kunnen worden ingedeeld en geef van elke categorie één voorbeeld. Module 4 programmeren 1.Noem de vijf categorieën waarin programmeertalen kunnen worden ingedeeld en geef van elke categorie één voorbeeld. Machinecode Assembleertalen: assembly Hogere programmeertalen:

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

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

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

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

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

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

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

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

Three Ships Silverpoint

Three Ships Silverpoint Three Ships F e a t u r e o v e r z i c h t is een zeer flexibele, uitgebreide en eenvoudig te bedienen auteurstool, waarmee u in een handomdraai de mooiste digitale content maakt. Naast de standaard aanwezige

Nadere informatie

SYSTEEMVEREISTEN TRACK VERZUIM 4

SYSTEEMVEREISTEN TRACK VERZUIM 4 SYSTEEMVEREISTEN TRACK VERZUIM 4 Copyright Tredin B.V. te Lelystad Niets uit deze uitgave mag verveelvoudigd en/of openbaar worden gemaakt (voor willekeurig welke doeleinden) door middel van druk, fotokopie,

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

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

NVU work shop. Kees Moerman http://www.keesmoerman.nl November 2006. 1. Overzicht van een web site. Wat is een web site HTML files

NVU work shop. Kees Moerman http://www.keesmoerman.nl November 2006. 1. Overzicht van een web site. Wat is een web site HTML files NVU work shop Moerman http://www.keesmoerman.nl November 2006 1 1 Overzicht 1. Overzicht van een web site Wat is een web site HTML files 2. NVU: Een HTML editor Overzicht Een eerste pagina Configuratie

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

ALL-CRM Installatie handleiding

ALL-CRM Installatie handleiding ALL-CRM Installatie handleiding Auteur: Shams Hadi Datum: 05-06-2014 Version: v1.2 2014, All-CRM 1 Inhoudsopgave 1 Inhoudsopgave 2 2 Systeem vereisten 3 2.1 Cliënt (Desktop applicaties) 3 2.2 Cliënt (Internet

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

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

PrePare Paper. www.partnerincontent.nl

PrePare Paper. www.partnerincontent.nl PrePare Paper Een seo copywriter inhuren zonder een goede voorbereiding aan je website is weggegooid geld Hoe haal je meer rendement uit een seo tekstschrijver? Google is nog steeds één van de belangrijkste

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

Inhoudsopgave Disclaimer... 3 Voorwoord... 4 Inleiding... 5 Het downloaden van XAMPP... 7 Het installeren van XAMPP... 8 Joomla installeren op

Inhoudsopgave Disclaimer... 3 Voorwoord... 4 Inleiding... 5 Het downloaden van XAMPP... 7 Het installeren van XAMPP... 8 Joomla installeren op 1 Inhoudsopgave Disclaimer... 3 Voorwoord... 4 Inleiding... 5 Het downloaden van XAMPP... 7 Het installeren van XAMPP.... 8 Joomla installeren op XAMPP... 15 Handige links... 16 2 Disclaimer Bij de samenstelling

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

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

FUMAGGO WEB SOLUTIONS

FUMAGGO WEB SOLUTIONS FUMAGGO WEB SOLUTIONS Aanpassen design stemexamen.nl Offerte voor ProDemos Den Haag Fumaggo Web Solutions Lammenschansweg 93, 2313 DK Leiden KvK Rijnland 52202992 Leiden, 19 juni 2012 2 1 Introductie ProDemos

Nadere informatie

De mogelijkheden van XML voor de langdurige bewaring van digitale documenten. DAVID studiedag 30 nov 2000

De mogelijkheden van XML voor de langdurige bewaring van digitale documenten. DAVID studiedag 30 nov 2000 De mogelijkheden van XML voor de langdurige bewaring van digitale documenten DAVID studiedag 30 nov 2000 Prof. Jan Engelen, Steven Depuydt K.U.Leuven - ESAT Onderzoeksgroep Document Architecturen Waarom

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

WordPress in het Kort

WordPress in het Kort WordPress in het Kort Een website maken met Wordpress. In minder dan één uur online! Inclusief installatie van een thema en plugins Alle rechten 2013, Rudy Brinkman, BrinkhostDotCom, http://www.brinkhost.nl

Nadere informatie

Handleiding. Inhoudsopgave 25-02-2014

Handleiding. Inhoudsopgave 25-02-2014 Inhoudsopgave Beheerders Dashboard...2 Kalender beheerders...3 Activiteiten beheren...3 Herhalende activiteiten...4 Wijk coördinatoren...5 Kalenders beheren...5 Kalenders exporteren...6 Gebruikers beheren...7

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

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

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

Optimaliseer de performance van uw dienst

Optimaliseer de performance van uw dienst Whitepaper Optimaliseer de performance van uw dienst Succes van uw online applicatie hangt mede af van de performance. Wat kunt u doen om de beste performance te behalen? INHOUD» Offline sites versus trage

Nadere informatie