WEBAPPLICATIES. Toegankelijke gebruikersinterfaces bouwen voor het web KRIS MERCKX

Maat: px
Weergave met pagina beginnen:

Download "WEBAPPLICATIES. Toegankelijke gebruikersinterfaces bouwen voor het web KRIS MERCKX"

Transcriptie

1 WEBAPPLICATIES Toegankelijke gebruikersinterfaces bouwen voor het web KRIS MERCKX

2 Webapplicaties Kris Merckx

3 Meer informatie over deze en andere uitgaven kunt u verkrijgen bij: Sdu Klantenservice Postbus EA Den Haag tel.: fax: web: Omslagontwerp: Bureau MMX, Bergambacht Druk- en bindwerk: drukkerij Bariet, Ruinen Vormgeving binnenwerk en zetwerk: Fritschy opmaak & redactie ISBN: NUR: 980 Kris Merkckx / Sdu Uitgevers bv, Den Haag, 2011 Alle rechten voorbehouden. Behalve de door de Auteurswet gestelde uitzonderingen, mag niets uit deze uitgave worden verveelvoudigd (waaronder begrepen het opslaan in een geautomatiseerd gegevensbestand) en/of openbaar gemaakt door middel van druk, fotokopie, microfilm of op welke andere wijze dan ook, zonder voorafgaande schriftelijke toestemming van de uitgever. De bij toepassing van art. 16b en 17 Auteurswet wettelijk verschuldigde vergoedingen wegens kopiëren dienen te worden voldaan aan de Stichting Reprorecht, Postbus 3060, 2130 KB Hoofddorp, tel.: (023) Voor het overnemen van een gedeelte van deze uitgave in bloemlezingen, readers en andere compilatiewerken op grond van art. 16 Auteurswet 1912 dient men zich te wenden tot de stichting PRO, Postbus 3060, 2130 KB Hoofddorp, tel.: (023) Voor het overnemen van een gedeelte van deze uitgave ten behoeve van commerciële doeleinden dient men zich te wenden tot de uitgever. Hoewel aan de totstandkoming van deze uitgave de uiterste zorg is besteed, kan voor de afwezigheid van eventuele (druk)fouten en onvolledigheden niet worden ingestaan en aanvaarden auteur(s), redacteur(en) en uitgever deswege geen aansprakelijkheid voor de gevolgen van eventueel voorkomende fouten en onvolledigheden. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system of any nature, or transmitted in any form or by any means, electronic, mechanical, photocopying, recording or otherwise, without the prior written permission of the publisher. While every effort has been made to ensure the reliability of the information presented in this publication, Sdu Uitgevers neither guarantees the accuracy of the data contained herein nor accepts responsibility for errors or omissions or their consequences.

4 Inhoud Voorwoord 9 1 De basisingrediënten van een online GUI Voordelen van een webapplicatie Applicaties en webapplicaties Programma s bouwen Werking van een webapplicatie HTML als GUI-taal Invoerformulieren in HTML Nieuwe elementen in HTML DOM Browsers en hun kuren Modernizr Frameworks brengen browsers dichter bij elkaar Elementen selecteren met jquery Javascript User Interfaces Interactiviteit en UI Management Mobiele interfaces in de lift XUL in elke browser met Ample SDK Een bos van libraries Voorbeelden 41 2 Kantoorapplicaties en bestandsbeheer Tekst manipuleren en tekstverwerking Rekenbladen Presenteren Bestandsbeheer Voorbeelden 65 3 Audio en video Flash Video De HTML5 video-tag Online video-editing Webcambeelden met Flash 79

5 6 inhoud 3.5 Audio Voorbeelden 81 4 De browser als tekentafel Tekenen in XML met Scalable Vector Graphics Schilderen op virtueel canvas Canvas of SVG? CSS Lettertypes D in de browser Voorbeelden Animaties in de browser Animeren met jquery Gevanceerde animaties met jquery Animatiebibliotheken CSS 3-transitions en -animations SVG-animaties Canvasanimaties Canvasanimatie voor Flash-adepten Processing.js Een GUI voor een animatie-webapp Software voor HTML5-animaties Een huiseigen animatieframework Voorbeelden Games en 3D in HTML Een potje fysica Een tile-based speelbord Een speler op het speelveld Toetsenbordbediening Collision detection Pseudo-3D en raycasting HTML5 game libraries GameQuery voor jquery-adepten Voorbeelden Geolokalisatie en kaarten De geolocation-api in HTML5 173

6 inhoud Browser-ondersteuning Libraries voor lokalisatie Google Maps en aanverwanten Kaarten in de browser Voorbeelden 179 Register 185

7 Voorwoord HTML ontstond ooit als een opmaaktaal voor het uitwisselen van wetenschappelijke informatie. Later ontwikkelde het zich tot een digitaal presentatiekaartje voor bedrijven en organisaties of een middel om via internet geld te verdienen. Intussen is het web enorm veranderd. Vele miljoenen gebruikers brengen het grootste deel van hun computertijd door op het internet. Webmail, sociale netwerksites, zoekmachines, ze zijn vaak beter ingeburgerd dan klassieke desktopprogramma s. De leercurve is minder hoog en de interfaces zijn gebruiksvriendelijk. Computerprogramma s verhuizen stilaan naar webservers waarop gebruikers inloggen en hun informatie delen en uitwisselen. Het klassieke HTML en zijn opvolger XHTML voldeden niet meer aan de eisen die een moderne webapplicatie stelt. Ook javascript, dat lange tijd enkel werd gebruikt voor rollovereffecten bij afbeeldingen of eenvoudige formuliervalidaties, voldeed niet meer aan de wensen van webontwikkelaars. Naast het W3C (het world wide web consortium) dat al jaren de ontwikkeling van webgerichte talen als HTML en CSS leidt, ontstond het WHATWG (Web Hypertext Application Technology Working Group). Onder hun impuls verscheen HTML5, eigenlijk een verzamelnaam voor een uitbreiding op de (X)HTML-standaard, CSS en nieuwe API s voor en versies van javascript. HTML5 moet het ontwikkelen van webapplicaties vereenvoudigen en brengt de webapp veel dichter bij het klassieke computerprogramma. Het succes van mobiele apparaten zoals de iphone, ipod touch, ipad en Android-gebaseerde toestellen gaf een boost aan HTML5. De hegemonie van de Microsoft-browser Internet Explorer werd doorbroken door een nieuwe generatie snelle en vernieuwende browsers zoals Firefox, (Mobile)Safari en Chrome die de nieuwigheden met open armen omsluiten. De nieuwste versie van Internet Explorer kon op dit vlak niet achter blijven. Het resultaat is een explosief groeiend aantal verbazingwekkende webapplicaties die vaak niet meer te onderscheiden zijn van hun desktop-tegenhangers. HTML5, CSS3 en javascript en de webbrowsers bevinden zich voortaan in een chronisch betastadium, en dat is maar goed ook. Nieuwe ontwikkelingen en voorstellen zetten een constante druk op de browserontwikkelaars en de concurrentie leidt tot de snellere integratie van nieuwe technologieën. Webontwikkelaars kunnen meer dan ooit terugvallen op fantastische open source frameworks zoals jquery, Ample SDK, RaphaëlJS, Three.js enz. die verschillen tussen browsers en platformen nivelleren en de webapp-ontwikkeling versnellen. In dit boek geven we een overzicht van de belangrijkste en interessantste frameworks en libraries voor het ontwikkelen van webapplicaties. We focussen vooral op de nieuwe

8 10 voorwoord technologieën en hoe we die ook backwards-compatible kunnen maken. De codevoorbeelden zijn als basis te gebruiken voor je eigen webapplicaties en websites en naar wens uit te breiden en aan te vullen. De voorbeelden, links, extra informatie en frameworks vind je ook op de website bij dit boek:

9 1 De basisingrediënten van een online GUI Nog niet zo heel lang geleden installeerde een computergebruiker voor elke taak een apart programma. Dit kan uiteraard nog steeds. Door de opkomst van de snelle internetverbindingen en nieuwe technieken zoals AJAX en HTML5 is het doordeweekse computergebruik echter enorm veranderd. Heel wat taken kunnen we nu rechtstreeks in de browser afhandelen via een webapplicatie. Een webapplicatie is een programma dat op een webserver draait en via een webbrowser gebruikt kan worden. Webapplicaties zijn er in allerlei soorten en maten. Via online bankieren kunnen we onze financiële rompslomp van thuis uit regelen. We nemen contact op met vrienden en kennissen via Facebook, een film van een verjaardagsfeest uploaden we naar YouTube. Op de werkvloer staat geen klassieke radio meer, maar luisteren we uiterst persoonlijk naar ons favoriete muziekstation via internet radio of een Last FM-account. In Wikipedia maak je naar wens je eigen encyclopedie en je kunt hem drukklaar downloaden in PDF-formaat. Webmailapplicaties zoals Gmail zijn voorzien van een ingebouwde virusscanner, een file viewer enzovoort. Je kunt het niet bedenken of er bestaat wel een of andere (vaak gratis) webapplicatie voor. De opkomst van het mobiele internet en het succes van de iphone en mobiele apparaten met Google Android, vergroten het succes van webapplicaties. 1.1 Voordelen van een webapplicatie Een webapplicatie is zeker niet zonder gevaren, maar toch biedt het tal van voordelen in vergelijking met een klassiek computerprogramma. De online encyclopedie Wikipedia ziet als belangrijkste voordelen: 1 Webapplicaties vereisen geen ingewikkelde installatieprocedure bij het uitrollen in een grote organisatie. Alleen een webbrowser is vereist. 2 Webapplicaties hebben geen schijfruimte op de clientcomputer nodig. 3 Voor een update in de webapplicatie hoeven er geen wijzigingen op de werkplek gedaan te worden. 4 Webapplicaties zijn makkelijk te integreren met andere websites of webservices. 5 Webapplicaties zijn in de basis platformonafhankelijk (Windows, Mac, Linux, enz.) doordat ze in een webbrowser draaien. 1.2 Applicaties en webapplicaties Een webapplicatie doet in wezen niets anders dan een klassiek desktopprogramma. Het kan bestanden maken, openen, bewerken en weer opslaan. Om bestanden te maken of te

10 12 hoofdstuk 1 bewerken beschikt de gebruiker over een aantal bedieningselementen vaak in de vorm van knoppen of menu s. Een van de belangrijkste verschilpunten is dat de webapplicatie een lijst moet bijhouden van alle gebruikers en hun respectievelijke bestanden. 1.3 Programma s bouwen Niet alleen voor doordeweekse computergebruikers, maar ook voor webdesigners en webontwikkelaars hangt er een zweem van geheimzinnigheid rond programmeren. Klassieke desktopprogramma bestaan vaak uit duizenden, zo niet honderdduizenden regels code. Voordat die code door een computer kan uitgevoerd worden, moet ze gecompileerd worden. Dit wil zeggen dat de code door een stuk software (de compiler) in machinetaal wordt omgezet. De gecompileerde code kan rechtstreeks door de processor worden uitgevoerd. Het zal je ongetwijfeld al zijn opgevallen dat de meeste programma s die je gebruikt, dezelfde dialoogvensters en gelijkaardige knoppenbalken bevatten. Programmeurs maken namelijk gebruik van de API s die het besturingssysteem biedt. Een API of Application Programming Interface maakt het mogelijk om op eenvoudige wijze systeemtaken (bestanden openen, opslaan, afdrukken) uit te voeren. De programmeur schrijft bijvoorbeeld een stuk code dat het print-dialoogvenster van Windows opent. Omdat niet alleen de processor, maar ook het besturingssysteem en de corresponderende API s verschillen, is het hierdoor niet zonder meer mogelijk om een Windowsprogramma op pakweg een Mac OS X- of Linuxmachine te installeren en omgekeerd. Weinig programmeurs werken puur in code. Over het algemeen gebruiken ze een visuele IDE (Integrated Development Environment). Daarin kunnen ze grafisch aan de slag volgens het WYSIWYG-principe. In zo n omgeving kan de ontwikkelaar bedieningselementen zoals vensters, knoppen, menubalken enz. naar zijn ontwerpvenster slepen en de nodige functionaliteit programmeren. Naast de GUI (Graphical User Interface) moet de ontwikkelaar er ook voor zorgen dat de bedieningselementen samenwerken met achterliggende verwerkings- en opslagfuncties. Een programma leest gegevens uit een databank of bestand in en kan nieuwe gegevens opslaan. Voor Windows en Mac OS X bestaan IDE s die standaard voorzien zijn van toegang tot de API-functies van het besturingssysteem en de standaard GUI-elementen (knoppen, vensters, menu s). Een programmeur kan ook gebruikmaken van een platformonhankelijke IDE zoals bijvoorbeeld Qt (zie figuur 1), waarin hij code kan schrijven voor meerdere besturingssystemen. De IDE neemt in dat geval de vertaalslag voor de verschillende systemen voor zijn eigen rekening. Daarnaast kan een ontwikkelaar zich ook bedienen van een widget toolkit, een widget library of GUI toolkit. Zo n toolkit is een stuk software dat de programmeur eveneens voorziet van de mogelijkheid om vensters, menubalken, knoppen en andere GUI-elementen in zijn code op te nemen. Sommige van deze toolkits (bijvoorbeeld GTK) hebben huiseigen dialoogvensters voor de gecompileerde programma s.

11 de basisingrediënten van een online gui Werking van een webapplicatie Een webapplicatie werkt op een webserver. De door de gebruikers aangemaakte bestanden of ingevoerde informatie wordt in een databank op de server opgeslagen. In principe kan een webapplicatie in om het even welke programmeertaal worden geschreven. De programmeurs kunnen een eigen clientprogramma schrijven dat verbinding maakt met de webserver en daarmee gegevens uitwisselt. Steeds meer maakt men echter gebruik van een website/webpagina om verbinding te maken met de applicatie. Het grote voordeel is dat de gebruiker geen apart programma hoeft te installeren. Hij moet in zijn browser enkel nog de juiste URL invoeren. Voor het bouwen van een webapplicatie ben je dus niets met platformgebonden GUIelementen. De bediening gebeurt volledig via een webbrowser. Daarom moet de ontwikkelaar zich bijscholen in de werking van HTML, CSS en javascript. Een webapplicatie slaat zijn gegevens op in een centrale databank of als meerdere losse bestanden op de webserver. De meeste programmeertalen beschikken over functionaliteit om die informatie om te zetten in webpagina s voor een webbrowser. Omdat de stap van het ontwikkelen van een eenvoudige website naar het programmeren toch wel erg groot is, zijn er allerlei relatief eenvoudig te leren scriptingtalen ontwikkeld waarmee een webontwikkelaar/designer bestanden in een databank kan aanspreken. Zonder twijfel heb je al gehoord van ASP, PHP of JSP. Voor klassieke programmeurs is de drempel verlaagd door in de IDE s ook de ontwikkeling van webapplicaties mogelijk te maken. Server databank, bestanden <> middleware <> output naar HTML+ bedieningslementen (HTML, CSS, javascript) 1.5 HTML als GUI-taal De computergebruiker bedient een webapplicatie via een browservenster. Dit betekent dat de ontwikkelaar zich moet bedienen van de talen die een webbrowser begrijpt. Elk programma-onderdeel dient omgezet te worden in HTML, CSS en javascript. In vergelijking met klassieke programmeertalen en API s zijn de mogelijkheden van HTML voor het bouwen van een GUI erg beperkt. HTML, CSS en javascript vormen de heilige drievuldigheid van webdesign: 1 (X)HTML: een taal die de tekstinhoud van webpagina s kan structureren en documenten aan elkaar kan linken. 2 CSS: de taal die beschrijft hoe elk onderdeel van een webpagina er moet uitzien. 3 javascript (of een javascript-bibliotheek zoals Dojo of jquery): hiermee kun je interactiviteit, effecten, animaties enz. aan je webpagina s toevoegen. Daarnaast zal je al snel in aanraking komen met verwante talen zoals XML, JSON, SVG, XUL enz.

12 14 hoofdstuk 1 HTML beschrijft de onderdelen die in een webpagina worden opgenomen. Dit gebeurt op een compleet andere manier dan in een programmeertaal. Hoe HTML precies werkt, valt buiten het bestek van dit boek. Op internet en in de boekhandel vind je tal van handleidingen waarmee je de taal in een oogwenk onder de knie hebt. Hieronder vind je toch een snelle en korte gids. Ken je HTML reeds voldoende, dan kun je deze paragraaf gerust overslaan. HTML staat voor hypertext markup language. HTML is geen programmeertaal, maar beschrijft enkel de tekststructuur. Het duidt titels, alinea s, lijsten enz. aan in een tekst. HTML is gedefinieerd met SGML (Stardard Generalized Markup Language) waarvoor de omschrijving is bepaald door de ISO-norm SGML is veel uitgebreider dan HTML, maar dient net als HTML voor het structureren van tekstuele informatie. In een webpagina staat in de eerste plaats tekst. Die tekst heeft een bepaalde structuur en kan een of meerdere van de volgende onderdelen bevatten: titels of koppen alinea s citaten tabellen lijsten verwijzingen of referenties (links, hyperlinks) naar andere webpagina s of websites (verwijzingen naar) afbeeldingen Mensen onderscheiden meteen een titel of een alinea. Een computerprogramma daarentegen is dom. Je moet het op een of andere manier vertellen waar de verschillende onderdelen staan. Dit kun je enkel door aan het programma letterlijk te vertellen waar elk onderdeel begint en eindigt. HTML markeert een titel of alinea zoals je dat zelf misschien al eens in een cursus deed met een markeerstift. Met een HTML-markering duid je het begin en het einde van een tekstonderdeel of tekstelement aan. <h1>mijn titel</h1> <ul> <li>eerste opsommingspunt</li> <li>tweede opsommingspunt</li> <li>derde opsommingspunt</li> </ul> Verklaring van de afkortingen in HTML: h = head ul = unordered list (niet-genummerde lijst) li = list item

13 de basisingrediënten van een online gui 15 Webbrowsers lezen de HTML- markeringen uit en zetten de HTML-structuur om in een voor mensen leesbare weergave. Dit proces noemen we renderen of parsen. Door aan te duiden waar een bepaald tekstonderdeel begint en eindigt, herkent de webbrowser (Internet Explorer, Firefox, Safari) de verschillende tekstonderdelen. HTML kan hypertekst bevatten: een document kan verwijzingen bevatten naar andere documenten. Dit kunnen verwijzingen zijn naar documenten als foto s en teksten die zich op dezelfde computer of medium bevinden, maar ook naar documenten die ergens op de wereldwijde locatie van het internet opgeslagen zijn. De gebruiker zal hiervan niets merken. Wanneer we HTML als GUI-taal voor een webapplicatie gaan toepassen, stuiten we al snel op een aantal grondige beperkingen. HTML (tot en met versie 4) en XHTML hebben: weinig of geen interactieve mogelijkheden geen opslag- of verwerkingsfuncties een heel beperkte set aan invoermogelijkheden en interface-elementen. Figuur 1 De visuele IDE van Qt maakt het ontwikkelen van desktopapplicaties eenvoudiger. In een klassiek programma kan een ontwikkelaar gebruik maken van knoppen, menubalken, dialoogvensters, kalenders, selectiegereedschappen, grids enz. De meeste IDE s beschikken over een ruime voorraad aan bedieningselementen die naar believen naar het werkvenster kunnen worden gesleept. HTML is oorspronkelijk niet ontwikkeld om het te gaan gebruiken voor de ontwikkeling van programma s. Toch biedt het enige mogelijkheden voor het opbouwen van invulformulieren.

14 16 hoofdstuk Invoerformulieren in HTML Een invulformulier neem je als volgt op in het <body>-element van een webpagina: <form> </form> Als je de webpagina opvraagt in de browser, zul je nog steeds niets zien veranderen. We hebben immers nog geen knoppen, invulvelden of dergelijke voorzien. We moeten er een goede gewoonte van maken om elk onderdeel van een formulier te benoemen. Dat doen we door de attributen name en id op te nemen in de HTML-tags voor de formulier elementen. Wanneer het formulier wordt verzonden, kan een script op de server de ingevoerde gegevens opvragen op basis van het id van een element. Hoe dit precies in zijn werk gaat, hangt af van de gebruikte scripting- of programmeertaal op de server. We moeten het formulier ook vertellen waar het de ingevulde informatie naartoe moet sturen. <form name="form" id="form" action="bewaar.php"> </form> Vervolgens beslissen we ook welke verzendmethode we hiervoor zullen gebruiken. We kunnen kiezen tussen GET en POST. GET: als we informatie willen opvragen, bijvoorbeeld gegevens uit een bestaande databank POST: informatie verzenden om te bewaren, bijvoorbeeld , toevoegen aan een databank, gastenboek en dergelijke. <form name="form" id="form" action="bewaar.php" method="post"> </form> In moderne webapplicaties is het standaard submitten of verzenden van een formulier vaak vervangen door een javascript-functie die het controleren van de invoer en het verzenden voor zijn rekening neemt. In een volgende stap voegen we de diverse formulierelementen toe. We kunnen kiezen uit: tekstvelden tekstvakken bestandsvelden keuzelijsten keuzerondjes aankruisvakjes verborgen velden knoppen allerlei: tabindex, sneltoetsen etc.

15 de basisingrediënten van een online gui 17 In het formulier plaatsen we de verschillende elementen tussen de begin- en de eindmarkering "form": <form name="form" id="form" action="bewaar.php" method="post"> HIER KOMEN DE FORMULIERELEMENTEN </form> Tekstvelden In een tekstveld kan de gebruiker tekstinformatie invullen. Een tekstveld bestaat uit één regel. Er bestaan twee types tekstvelden: tekst wachtwoord: hierbij verschijnt de ingevoerde informatie als sterretjes of bolletjes. Met het attribuut "value" kun je ook een vooraf gedefinieerde inhoud in het tekstveld plaatsen. <input name="username" id="username" type="text" maxlength="50" value="voer hier je gebruikersnaam in" > In een tekstveld kunnen we uitgebreidere tekstinformatie opnemen. We maken een tekstveld door de tag "textarea" in het formulier in te sluiten. <textarea name="bericht" id="bericht"> </textarea> Tekstvakken In tegenstelling tot een gewoon tekstveld kan een tekstvak meerdere regels weergeven. Het aantal regels stellen we in met het attribuut "rows". Ook kunnen we instellen hoeveel tekens in een regel kunnen weergegeven worden met het attribuut "cols" (=kolommen). Beter is echter de grootte van het tekstvak in te stellen met CSS. Ook bij een tekstvak kunnen we een vooraf gedefinieerde inhoud in het tekstvak opnemen. Dit kunnen we door tekst te typen tussen de begin- en te eindmarkering (=tag) van het element "textarea". <textarea name="bericht" id="bericht" > Tik hier je tekst. </textarea> Bestandsvelden In webmailprogramma s zit vaak een mogelijkheid om via een browse/blader -knop ook een bestand toe te voegen aan je mail. Als je een bestand hebt gekozen, wordt het ge üpload

16 18 hoofdstuk 1 naar de server. HTML voorziet hiervoor een bestandsveld, maar kan zelf geen bestanden uploaden. Immers, HTML is een opmaaktaal, voor het uploaden heb je een programma nodig op de server. In dit voorbeeld wordt het formulier verzonden naar het programma bewaar.php. Dit script zal het uploaden van het bestand voor zijn rekening moeten nemen. Browsers laten uit veiligheidsoverwegingen niet toe dat je hier een voorgedefinieerde waarde ingeeft via het attribuut "value". Als je hier het attribuut "maxlength" opneemt, inter preteert de browser dit als de maximale hoeveelheid bytes die doorgestuurd mogen worden. Via het attribuut "accept" kun je instellen welke mimetypes (bestandstypes) mogen worden geüpload. Ook het jokerteken "*" is toegelaten om subtypes toe te laten. Neem je het attribuut "accept" niet op, dan is het uploaden van alle bestandstypes toegelaten. <input name="file" id="file" type="file" maxlength="100000" accept="text/*"> Als je gebruik wilt maken van een bestandsveld, moet je de "form"-tag uitbreiden met het volgende attribuut: <form name="form" id="form" action="bewaar.php" method="post" enctype="multipart/formdata" > <input name="file" type="file" maxlength="100000" accept="text/*"> </form> Met behulp van het attribuut "readonly" kun je instellen of de gebruiker de inhoud van het tekstveld mag wijzigen of niet. Dit attribuut kun je ook voor de tekstvelden en tekstvakken gebruiken. <input name="file" type="file" maxlength="100000" accept="text/*" readonly="readonly"> In hoofdstuk 2 lees je hoe je het eenvoudige file-veld kunt upgraden naar een uploadveld met drag- en dropmogelijkheden. Keuzelijsten Je kunt een keuzelijst aanbieden waaruit de bezoeker een of meerdere items kan selecteren. Hiervoor maken we gebruik van het formulierelement "select". De diverse items in onze lijst komen tussen de tags "option" te staan. <select name="selectproduct"> <option>hp-scanner</option> <option>kodak-scanner</option> <option>canon-scanner</option> </select>

17 de basisingrediënten van een online gui 19 In het bovenstaande geval is er in de keuzelijst slechts één item te zien. Om de rest te zien moet je het menu openklappen. Je kunt het aantal zichtbare items instellen met behulp van het attribuut "size". Standaard kan er slechts één item geselecteerd worden. Willen we de gebruikers de mogelijkheid bieden om een meervoudige selectie te maken, dan voegen we het volgende attribuut "multiple" toe. <select name="selectproduct" size="3" multiple="multiple">... </select> We kunnen vooraf ook één item selecteren. Dat doen we op de volgende manier: <option selected="selected">agfa-scanner</option> Toch ontbreekt er nog iets essentieels in onze keuzelijst: met het bovenstaande voorbeeld is het onmogelijk om de verzonden gegevens in een andere webpagina (= de bestemming van het formulier) weer op te vragen. We moeten elk item nog een waarde toekennen. De inhoud van de items is op dit moment enkel bedoeld voor de bezoekers. We voegen bij elk item het attribuut "value" toe. <select name="selectproduct" size="3"> <option value="hp">hp-scanner</option> <option value="kodak">kodak-scanner</option> <option value="canon">canon-scanner</option> </select> Je kunt items ook per thema groeperen door de markering "optgroup" op te nemen tussen de "select"-markering. <select name="selectproduct" size="9"> <optgroup label="scanners"> <option value="hp">hp</option> <option value="agfa">agfa</option> <option value="kodak">kodak</option> <option value="canon">canon</option> <option value="trust">trust</option> </optgroup> <optgroup label="printers"> <option value="canonprinter">canon</option> <option value="brother">brother</option> </optgroup> </select>

18 20 hoofdstuk 1 Keuzerondjes Keuzerondjes zijn een reeks ronde aanstipbare knopjes met bijschrift waarvan de bezoeker er één kan selecteren.we nemen steeds de volgende attributen op: type = radio name = vrije keuze (maar alle keuzerondjes moeten dezelfde naam hebben als ze bij dezelfde groep horen) value = per keuzerondje een andere waarde toekennen <label for="vrouw">vrouw</label> <input type="radio" id="vrouw" name="sex" value="vrouw"/> <label for="man">man</label> <input type="radio" id="man" name="sex" value="man"/> <label for="onzijdig">onzijdig</label> <input type="radio" id="onzijdig" name="sex" value="onzijdig"/> De gebruiker kan slechts één van die keuzerondjes selecteren. Bij het laden van de formulierpagina is echter geen enkel rondje geselecteerd. We kunnen vooraf selecteren met behulp van het attribuut "checked". <label for="sex">onzijdig</label> <input type="radio" name="sex" id="sex" value="onzijdig" checked="checked"> Aankruisvakjes Aankruisvakjes zijn een groep vierkantjes met bijschrift waarvan de bezoeker er geen, één of meerdere kan aanvinken. We nemen steeds de volgende attributen op: type: checkbox name: vrije keuze (maar alle keuzerondjes moeten dezelfde naam hebben als ze bij dezelfde groep horen) value: per keuzerondje een andere waarde toekennen <label for="curryworst">curryworst</label> <input type="checkbox" id="curryworst name="friet" value="curryworst"/> <label for="gehaktbal">gehaktbal</label> <input type="checkbox" id="gehaktbal" name="friet" value="gehaktbal"/> <label for="mayonaise">mayonaise</label> <input type="checkbox" id="mayonaise" name="friet" value="mayonaise"/> <label for="ketchup">ketchup</label> <input type="checkbox" id="ketchup" name="friet" value="ketchup"/> <label for="tartaar">tartaart</label> <input type="checkbox" id="tartaar" name="friet" value="tartaar"/>

19 de basisingrediënten van een online gui 21 Verborgen velden Met behulp van een verborgen formulierveld kun je onzichtbaar informatie in velden opslaan. Onzichtbaar is niet helemaal juist, want de informatie is nog steeds te lezen als we de bron van de pagina bekijken. De browser verbergt het veld enkel bij de definitieve weergave van de pagina in het browservenster. In tegenstelling tot wat je misschien denkt, zijn verborgen velden zeer interessant om informatie weg te schrijven zonder dat de bezoeker de inhoud van de velden kan wijzigen. <input type="hidden" name="taal" value="nl"/> Knoppen Om de informatie van het formulier te verzenden, hebben we een knop nodig. Wanneer we op die knop klikken, wordt de informatie gepost. <input type="submit" name="save" value="bewaar"/> of <button type="submit" name="save">ok</button> bewaar Naast een submit-knop kunnen we ook een reset-knop opnemen om het formulier leeg te maken. <input type="reset" name="reset" value="opnieuw"> of <button type="reset" name="reset">opnieuw</button> Uiteraard kunnen we met HTML ook gewone knoppen schrijven. <button type="button" id="text">test</button> Om aan een HTML-knop een zekere functie te koppelen moeten we onze toevlucht nemen tot javascript. Fieldset Met de markering "fieldset" kun je bepaalde onderdelen van het formulier groeperen. De markering "legend" geeft de "fieldset" een opschrift.

20 22 hoofdstuk 1 <fieldset> <legend>gebruiker:</legend><br/> <label for="naam">naam</label>input type="text" name="naam" id="naam"><br/> <label for="tel">telefoon</label><input type="text" name="tel" id="tel"> </fieldset> Labels Net zoals in visuele IDE s van klassieke programmeertalen, kun je bij invoervelden een label ingeven. Met het attribuut "for" kun je een label koppelen aan een bepaald element. De waarde bij "for" verwijst naar het "id" van het corresponderende element. Het gebruik van labels voor invoervelden maakt je webpagina s veel toegankelijker voor schermlezers (voor blinden en slechtzienden). Vermits HTML-code niet gecompileerd wordt, is die code immers uit te lezen. Velden uitschakelen, sneltoetsen en tabs U kunt een veld of formulierelement deactiveren door er het attribuut "disabled" aan toe te kennen. De tekst in het invoerveld wordt lichtgrijs weergegeven en je kunt de inhoud niet wijzigen. De inhoud van dit veld wordt niet mee verstuurd als het formulier gepost wordt. Het heeft dus een andere functie dan het attribuut "readonly". <input type="text" name="website" value="mijn website" disabled="disabled"> Als je de tabtoets gebruikt, verspring je van formulierelement tot formulierelement. Met het attribuut "tabindex" kun je instellen in welke volgorde de diverse elementen bereikbaar moeten zijn. Met sneltoetsen (toetsenbord) kun je de gebruiker naar welbepaalde formulierelementen laten gaan. We kunnen sneltoetsen instellen met het attribuut "accesskey". <input type="text" name="website" id="website" value="mijn website" tabindex="1" accesskey="w"> <input type="text" name=" " id=" " value="mijn adres" tabindex="2" accesskey="e"> In hoofdstuk 6 lees je hoe je sneltoetsen aan bepaalde functies kunt verbinden. We kunnen formulieren opmaken met stijlbladen (CSS). Een volledige uitleg van wat stijlbladen nu eigenlijk zijn, valt buiten het bestek van dit boek. In een stijlblad definieer je hoe elk element van een webpagina er moet uitzien (bijvoorbeeld lettertype, lettergrootte, kleur). Ook formulierelementen zoals knoppen of tekstvelden kunnen op die manier opgemaakt worden zodat hun stijl conform de vormgeving van de hele website loopt. We kunnen een algemene stijl definiëren voor bvijvoorbeeld een tekstveld. Alle tekstvelden zullen er dan gelijkaardig uitzien. Een voorbeeld:

HTML. Formulieren. Hans Roeyen V 3.0

HTML. Formulieren. Hans Roeyen V 3.0 Formulieren Hans Roeyen V 3.0 26 februari 2015 Inhoud 1. Formulieren... 3 1.1. De form tag... 3 1.1.1. Het action attribute... 4 1.1.2. Het method attribute... 4 1.2. De input tag... 4 1.3. Soorten input

Nadere informatie

<input type=text name=veldnaam size=20 maxlength=30 value=inhoud veld> Les 9: Formulieren. Proficiat, U hebt het al tot de laatste oefening gebracht. In deze les komen formulieren aan bod, U hebt ze zeker al eens gezien op een site, en indien niet neem dan eens vlug een kijke

Nadere informatie

De categorie Forms in het paneel Insert

De categorie Forms in het paneel Insert Formulieren Invulformulieren bieden u de mogelijkheid om te communiceren met de bezoekers van uw website. Ze geven de bezoeker de mogelijkheid om feedback te geven, informatie door te spelen, informatie

Nadere informatie

Formulieren maken met Dreamweaver CS 4/CS 5

Formulieren maken met Dreamweaver CS 4/CS 5 Formulieren maken met Dreamweaver CS 4/CS 5 In deze handleiding leer je om een formulier en elementen die je binnen een formulier kunt gebruiken, te ontwerpen met Dreamweaver. Het uitgangspunt is dat dit

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

Foutcontrole met Javascript

Foutcontrole met Javascript Foutcontrole met Javascript Pol Van Dingenen Yannick Van Hauwe INLEIDING Het controleren van de gegevens die ingevuld zijn in formulieren is heel erg belangrijk. In de praktijk is enkel en alleen controle

Nadere informatie

Auteur boek: Vera Lukassen Titel boek: Word Gevorderd 2010. 2011, Serasta Uitgegeven in eigen beheer info@serasta.nl Eerste druk: augustus 2012

Auteur boek: Vera Lukassen Titel boek: Word Gevorderd 2010. 2011, Serasta Uitgegeven in eigen beheer info@serasta.nl Eerste druk: augustus 2012 Auteur boek: Vera Lukassen Titel boek: Word Gevorderd 2010 2011, Serasta Uitgegeven in eigen beheer info@serasta.nl Eerste druk: augustus 2012 ISBN: 978-90-817910-7-6 Dit boek is gedrukt op een papiersoort

Nadere informatie

6. De sitemap of stamboom van uw website

6. De sitemap of stamboom van uw website 6. De sitemap of stamboom van uw website Dynamisch of statisch? CMS of Dreamweaver? Een databankgestuurde website en CMS Grotere websites hebben nood aan een eenvoudiger manier om informatie toe te voegen,

Nadere informatie

Les 9: formulier controle met javascript.

Les 9: formulier controle met javascript. Les 9: formulier controle met javascript. Javascript is erg veel gebruikt bij internet toepassingen. In tegenstelling tot PHP, wat een server side scripting is, is java client side scripting. Dwz, niet

Nadere informatie

Lab Webdesign: Javascript 7 april 2008

Lab Webdesign: Javascript 7 april 2008 H8: FORMULIEREN In dit hoofdstuk komt het "form"-object aan de orde: we zullen zien hoe we JavaScript kunnen gebruiken voor het manipuleren en valideren van de gegevens die een eindgebruiker invult in

Nadere informatie

WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B

WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B WEBSITE-DESIGN INHOUD COLLEGE Afronding vak JQuery, mail(formulieren) en social media Testen Website-design 5-1-2015 2 AFRONDING VAK

Nadere informatie

Beheren van middelen in Web- Planboard

Beheren van middelen in Web- Planboard Handleiding Beheren van middelen in Web- Planboard versie juni 2010 Ambachtsweg 16 2641 KS Pijnacker Tel: +31.(0)15.3613497 Fax: +31.(0)15.3610029 E-mail: info@bitbybit-is.nl Web: www.bitbybit-is.nl Wijzigingsbladen

Nadere informatie

Selenium IDE Webdriver. Introductie

Selenium IDE Webdriver. Introductie Selenium IDE Webdriver Het Wielsem 10, 5231 BW s- Hertogenbosch, telefoon 073-6409311 e- mail info@testwork.nl internet http://www.testwork.nl 1 Inhoudsopgave 1 Inhoudsopgave... 2 2 Selenium IDE... 3 3

Nadere informatie

Formulieren maken met Dreamweaver CS 4

Formulieren maken met Dreamweaver CS 4 Formulieren maken met Dreamweaver CS 4 In deze handleiding leer je om een formulier en elementen die je binnen een formulier kunt gebruiken, te ontwerpen met Dreamweaver. Het uitgangspunt is dat dit zoveel

Nadere informatie

Handleiding CMS-systeem website

Handleiding CMS-systeem website Handleiding CMS-systeem website Algemeen!Belangrijk! Wijzigingen die gedaan worden in het systeem kunnen niet zomaar ongedaan worden gemaakt. Eenmaal een pagina of iets anders verwijderd, zal deze niet

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

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

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

WEBDESIGN. html tags. Neem de grondbeginselen van html door via de online cursus op de informaticasite of via instruct-online

WEBDESIGN. html tags. Neem de grondbeginselen van html door via de online cursus op de informaticasite of via instruct-online WEBDESIGN html tags HTML is de taal waarop internetsites gebaseerd zijn. Bij het onderdeel webdesign maken we gebruik van een van de bovenstaande webeditors die ons helpen bij het (automatisch) creëren

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

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

Een formulier ontwerpen Een formulier ontwerpen Op iedere professionele website is tegenwoordig wel een formulier te vinden, dat door de bezoeker van de website kan worden ingevuld. Formulieren op websites worden voor verschillende

Nadere informatie

Auteur boek: Vera Lukassen Titel boek: Excel Gevorderden 2013. 2011, Serasta Uitgegeven in eigen beheer info@serasta.nl Eerste druk: December 2013

Auteur boek: Vera Lukassen Titel boek: Excel Gevorderden 2013. 2011, Serasta Uitgegeven in eigen beheer info@serasta.nl Eerste druk: December 2013 Auteur boek: Vera Lukassen Titel boek: Excel Gevorderden 2013 2011, Serasta Uitgegeven in eigen beheer info@serasta.nl Eerste druk: December 2013 ISBN: 978-90-820856-9-3 Dit boek is gedrukt op een papiersoort

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

Handleiding e-mail. Aan de slag. in beroep en bedrijf. Handleiding e-mail

Handleiding e-mail. Aan de slag. in beroep en bedrijf. Handleiding e-mail Aan de slag in beroep en bedrijf Branche Uitgevers 1 Alle rechten voorbehouden. Niets uit deze uitgave mag worden verveelvoudigd, opgeslagen in een geautomatiseerd gegevensbestand dan wel openbaar gemaakt

Nadere informatie

RESULTAATGERELATEERDE

RESULTAATGERELATEERDE erde OVER NO CURE NO PAY RESULTAATGERELATEERDE BELONING Resultaatgerelateerde beloning Over no cure no pay OVER NO CURE NO PAY RESULT AATGERELATEERDE BELONING RESULTAATGERELATEERDE BELONING 02 Resultaatgerelateerde

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

Inhoudsopgave. Inhoudsopgave... 2. 1. Inleiding... 3. 2. Het begin... 4. 3. Opmaak... 6. 5. Formulieren... 16. 6. Editors... 23. 7. Webbrowsers...

Inhoudsopgave. Inhoudsopgave... 2. 1. Inleiding... 3. 2. Het begin... 4. 3. Opmaak... 6. 5. Formulieren... 16. 6. Editors... 23. 7. Webbrowsers... 1 Inhoudsopgave Inhoudsopgave... 2 1. Inleiding... 3 2. Het begin.... 4 3. Opmaak... 6 5. Formulieren... 16 6. Editors... 23 7. Webbrowsers... 24 8. Webhosting... 25 9. Website uploaden... 27 10. Website

Nadere informatie

Studio Visual Steps Een formulier maken

Studio Visual Steps Een formulier maken Studio Visual Steps Een formulier maken Aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy Een formulier maken 2 Een formulier maken Een bijzonder onderdeel van een website is het formulier.

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

Handleiding WIS TM Live-editing Live editing is een WIS TM module

Handleiding WIS TM Live-editing Live editing is een WIS TM module Handleiding WIS TM Live-editing Live editing is een WIS TM module Live-edit 1. Inleiding De nieuwe versie van WIS tm beschikt over een aantal nieuwe functionaliteiten, waarvan vooral liveediting als nieuwe

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

In het CMS is het mogelijk om formulieren aan te maken. Voorafgaand een belangrijke tip:

In het CMS is het mogelijk om formulieren aan te maken. Voorafgaand een belangrijke tip: FORMULIEREN In het CMS is het mogelijk om formulieren aan te maken. Voorafgaand een belangrijke tip: belangrijk Importeer formulierdata uit een CSV-bestand precies zoals verderop beschreven. 1. Gedrag

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

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

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

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

Ga naar http://www.domeinnaam.nl/wp-admin en log in met de gebruikersnaam en wachtwoord verkregen via mail.

Ga naar http://www.domeinnaam.nl/wp-admin en log in met de gebruikersnaam en wachtwoord verkregen via mail. INLOGGEN Ga naar http://www.domeinnaam.nl/wp-admin en log in met de gebruikersnaam en wachtwoord verkregen via mail. Vul hier je gebruikersnaam en wachtwoord in en klik op Inloggen. Bij succesvolle login

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

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

Handleiding ZorgMail Secure e-mail - Webmail

Handleiding ZorgMail Secure e-mail - Webmail Handleiding ZorgMail Secure e-mail - Webmail 2014 ENOVATION B.V. Alle rechten voorbehouden. Niets uit deze uitgave mag worden openbaar gemaakt of verveelvoudigd, opgeslagen in een data verwerkend systeem

Nadere informatie

Snel aan de slag met BasisOnline en InstapInternet

Snel aan de slag met BasisOnline en InstapInternet Snel aan de slag met BasisOnline en InstapInternet Inloggen Surf naar www.instapinternet.nl of www.basisonline.nl. Vervolgens klikt u op de button Login links bovenin en vervolgens op Member Login. (Figuur

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

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

Auteur boek: Vera Lukassen Titel boek: Excel Beginners 2013. 2011, Serasta Uitgegeven in eigen beheer info@serasta.nl Eerste druk: mei 2013

Auteur boek: Vera Lukassen Titel boek: Excel Beginners 2013. 2011, Serasta Uitgegeven in eigen beheer info@serasta.nl Eerste druk: mei 2013 Auteur boek: Vera Lukassen Titel boek: Excel Beginners 2013 2011, Serasta Uitgegeven in eigen beheer info@serasta.nl Eerste druk: mei 2013 ISBN: 978-90-817910-8-3 Dit boek is gedrukt op een papiersoort

Nadere informatie

HTML krijgt een standaard opmaak van de browser

HTML krijgt een standaard opmaak van de browser 1 HTML krijgt een standaard opmaak van de browser Een link in HTML In HTML maakt u een link met de HTML-markering (HTML-tag) . Een a-tag (anchor, anker) heeft een attribuutwaarde nodig om de link te

Nadere informatie

Een eerste applicatie

Een eerste applicatie Een eerste applicatie 2.1 Inleiding Programmeren in Visual Basic.NET doe je niet alleen door regels met code te schrijven. Je begint met het ontwerpen van een venster in de design mode met allerlei controls,

Nadere informatie

www.dubbelklik.nu Handleiding Access 2010

www.dubbelklik.nu Handleiding Access 2010 www.dubbelklik.nu Handleiding Access 2010 Deze handleiding is onderdeel van Dubbelklik, een lesmethode Technologie, ICT/ Loopbaanoriëntatie en Intersectoraal Alle rechten voorbehouden. Niets uit deze uitgave

Nadere informatie

Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com

Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com Welkom bij mijn website tutorial (Deel 7) Ik ga uit van Microsoft XP voor de duidelijkheid. Ik heb dus geen idee of de programma s die ik gebruik ook op Vista werken. Notepad++ werkt zowieso op xp en Vista.

Nadere informatie

Release notes UNIT4 Multivers Online 8.0

Release notes UNIT4 Multivers Online 8.0 Release notes UNIT4 Multivers Online 8.0 UNIT4 Multivers is een product van: UNIT4 Software B.V. Telefoon 0184 444444 Postbus 102 Telefax 0184 444445 3360 AC Sliedrecht Supportlijn 0184 444555 Supportfax

Nadere informatie

HTML Editor: de eerste stappen

HTML Editor: de eerste stappen LES 18 HTML Editor: de eerste stappen In deze les leert u werken met HTML Editor. Daarbij geven we tevens een inleiding tot HTML. Hoewel op dit moment HTML versie 4.01 in gebruik is, maakt de HTML Editor

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

Interactieve formulieren met gedragingen en Spry

Interactieve formulieren met gedragingen en Spry 14 Interactieve formulieren met gedragingen en Spry De belangrijkste punten van hoofdstuk 14 Kennismaken met Gedragingen (Behaviors). Webeffecten leren aanmaken. De verschillende soorten Gedragingen gebruiken.

Nadere informatie

Handleiding. Opslag Online voor Windows Phone 8. Versie augustus 2014

Handleiding. Opslag Online voor Windows Phone 8. Versie augustus 2014 Handleiding Opslag Online voor Windows Phone 8 Versie augustus 2014 Inhoudsopgave Hoofdstuk 1. Inleiding 3 Hoofdstuk 2. Installatie 4 2.1 Downloaden van KPN Opslag Online QR Code 4 2.2 Downloaden van KPN

Nadere informatie

Handleiding voor Zotero versie 2.0

Handleiding voor Zotero versie 2.0 Handleiding voor Zotero versie 2.0 Michiel Wolda De handleiding voor Zetero is geschreven voor de lezers van het boek Deskresearch: Informatie selecteren, beoordelen en verwerken: tweede editie (Van Veen

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

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

Handleiding Wordpress CMS 4-5-2015

Handleiding Wordpress CMS 4-5-2015 Handleiding Wordpress CMS 4-5-2015 Inhoud 1. Het dashboard.... 3 2. Een pagina of bericht aanpassen.... 5 3. Een nieuw bericht toevoegen... 6 4. Een pagina maken... 7 5. Website met sitebuilder... 8 6.

Nadere informatie

formulieren met gedragingen en

formulieren met gedragingen en 14 Interactieve formulieren met gedragingen en SPRY De belangrijkste punten van hoofdstuk 14 Kennismaken met behaviors. Webeffecten leren aanmaken. De verschillende soorten behaviors gebruiken. Wat leert

Nadere informatie

Handleiding om uw website/webshop aan te passen

Handleiding om uw website/webshop aan te passen Handleiding om uw website/webshop aan te passen ONDERWERP PAGINA 1. Hoe moet ik inloggen in het beheer? 2 2. Hoe pas ik een bestaande pagina aan? 2 3. Hoe plaats ik een afbeelding? 3 4. Hoe maak ik een

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

DRUKPORTAL HANDLEIDING VERSIE 1 - JAN.2014. Korte instructie2.indd 1 17-3-2014 13:16:36

DRUKPORTAL HANDLEIDING VERSIE 1 - JAN.2014. Korte instructie2.indd 1 17-3-2014 13:16:36 Korte instructie2.indd 1 17-3-2014 13:16:36 INHOUD 1 E-mail: Account is aangemaakt 4 2 Uw gebruikersnaam eventueel aanpassen 5 3 Controleer je systeem 7 3.1 Klik in het inlogscherm op de link Controleer

Nadere informatie

SportCTM 2.0 Startscherm trainer

SportCTM 2.0 Startscherm trainer SportCTM 2.0 Startscherm trainer Inloggen Webapplicatie Via inlog.dotcomsport.com kun je in inloggen op de webapplicatie van het SportCTM. Wij adviseren onderstaande browsers Windows: Internet Explorer,

Nadere informatie

DRUKPORTAL HANDLEIDING VERSIE 3 - SEP.2014

DRUKPORTAL HANDLEIDING VERSIE 3 - SEP.2014 INHOUD 1 E-mail: Account is aangemaakt 4 2 Uw gebruikersnaam eventueel aanpassen 5 3 Controleer je systeem 7 3.1 Klik in het inlogscherm op de link Controleer mijn systeem 7 3.2 Resultaat systeem check

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

Versie 0.2. Documentatie Onsweb Club plugin voor NHV verenigingen. Laatste wijziging: 10 mei 2013 Auteurs: Marien Dongstra, Sebastian Huisman

Versie 0.2. Documentatie Onsweb Club plugin voor NHV verenigingen. Laatste wijziging: 10 mei 2013 Auteurs: Marien Dongstra, Sebastian Huisman Documentatie Onsweb Club plugin voor NHV verenigingen Versie 0.2 Laatste wijziging: 10 mei 2013 Auteurs: Marien Dongstra, Sebastian Huisman Alle rechten in dit document zijn voorbehouden. www.onsweb.nl,

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

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

Auteur boek: Vera Lukassen Titel boek: Visio 2010. 2011, Serasta Uitgegeven in eigen beheer info@serasta.nl Eerste druk: maart 2012

Auteur boek: Vera Lukassen Titel boek: Visio 2010. 2011, Serasta Uitgegeven in eigen beheer info@serasta.nl Eerste druk: maart 2012 Auteur boek: Vera Lukassen Titel boek: Visio 2010 2011, Serasta Uitgegeven in eigen beheer info@serasta.nl Eerste druk: maart 2012 ISBN: 978-90-817910-1-4 Dit boek is gedrukt op een papiersoort die niet

Nadere informatie

Docenten handboek NSS

Docenten handboek NSS Docenten handboek NSS Naslagwerk voor docenten Uitgegeven door: LCS Systemen BV Polakweg 15 C 2288 GG Rijswijk LCS Systemen, Rijswijk 2013 Alle rechten voorbehouden. Zonder schriftelijke toestemming van

Nadere informatie

JCI Tielt. Website JCI-Tielt. Handleiding website

JCI Tielt. Website JCI-Tielt. Handleiding website JCI Tielt Website JCI-Tielt Handleiding website tomputor 1-5-2015 Inhoud Intro... 3 Browsers... 3 Algemeen... 4 1. Wijzigen pagina... 4 Aanmelden... 4 Beveiligingsniveaus... 4 Website als bezoeker... 5

Nadere informatie

RTE. Handleiding. Publiceren Documenten

RTE. Handleiding. Publiceren Documenten RTE Handleiding Publiceren Documenten Datum: December 2015 Inhoudsopgave 1. Introductie 2 2. Aan de slag 3 2.1. Het opstarten van de applicatie 3 2.2. WebHare Applicaties 3 2.3. De RTE applicatie 3 3.

Nadere informatie

Handleiding Joomla CMS

Handleiding Joomla CMS Handleiding Joomla CMS Inhoudsopgave Inloggen bij de beheeromgeving 3 Artikelen 4 Prullenbak bekijken 4 Nieuw artikel maken / bewerken 5 Afbeelding toevoegen aan artikel 6 Link in een artikel plaatsen

Nadere informatie

Manual e-mail. Aan de slag. in beroep en bedrijf. Manual e-mail

Manual e-mail. Aan de slag. in beroep en bedrijf. Manual e-mail Aan de slag in beroep en bedrijf Branche Uitgevers 1 Alle rechten voorbehouden. Niets uit deze uitgave mag worden verveelvoudigd, opgeslagen in een geautomatiseerd gegevensbestand dan wel openbaar gemaakt

Nadere informatie

Auteurs boek: Vera Lukassen en René Valster Titel boek: Basis Computergebruik Versies: Windows 7 & Windows 8

Auteurs boek: Vera Lukassen en René Valster Titel boek: Basis Computergebruik Versies: Windows 7 & Windows 8 Auteurs boek: Vera Lukassen en René Valster Titel boek: Basis Computergebruik Versies: Windows 7 & Windows 8 2014, Serasta Uitgegeven in eigen beheer info@serasta.nl Eerste druk: Augustus 2014 ISBN: 978-94-91998-03-4

Nadere informatie

Aan de slag. Handleiding Voorraadbeheer

Aan de slag. Handleiding Voorraadbeheer Aan de slag in beroep en bedrijf Handleiding Voorraadbeheer februari 2007 Branche Uitgevers 1 Alle rechten voorbehouden. Niets uit deze uitgave mag worden verveelvoudigd, opgeslagen in een geautomatiseerd

Nadere informatie

Auteur boek: Vera Lukassen Titel boek: Word Beginners 2007. 2011, Serasta Uitgegeven in eigen beheer info@serasta.nl Eerste druk: augustus 2012

Auteur boek: Vera Lukassen Titel boek: Word Beginners 2007. 2011, Serasta Uitgegeven in eigen beheer info@serasta.nl Eerste druk: augustus 2012 Auteur boek: Vera Lukassen Titel boek: Word Beginners 2007 2011, Serasta Uitgegeven in eigen beheer info@serasta.nl Eerste druk: augustus 2012 ISBN: 978-90-817910-3-8 Dit boek is gedrukt op een papiersoort

Nadere informatie

Central Station. CS website

Central Station. CS website Central Station CS website Versie 1.0 18-05-2007 Inhoud Inleiding...3 1 De website...4 2 Het content management systeem...5 2.1 Inloggen in het CMS... 5 2.2 Boomstructuur... 5 2.3 Maptypen... 6 2.4 Aanmaken

Nadere informatie

HANDLEIDING WEBHARE 1

HANDLEIDING WEBHARE 1 HANDLEIDING WEBHARE 1 2 INHOUDSOPGAVE HANDLEIDING WEBHARE... 1 Introductie... 4 Inloggen... 5 Publisher... 7 De knoppenbalk... 7 Context Menu... 8 Rotary Word sjabloon... 9 Basis WebHare beheer... 11 Nieuwe

Nadere informatie

The Nanny Personeel. Lokaal inloggen

The Nanny Personeel. Lokaal inloggen The Nanny Personeel Lokaal inloggen Inleiding Binnen uw organisatie wordt gebruik gemaakt van The Nanny Personeel. The Nanny Personeel is een webapplicatie. Echter, in tegenstelling tot de meeste websites,

Nadere informatie

Handleiding NarrowCasting

Handleiding NarrowCasting Handleiding NarrowCasting http://portal.vebe-narrowcasting.nl september 2013 1 Inhoud Inloggen 3 Dia overzicht 4 Nieuwe dia toevoegen 5 Dia bewerken 9 Dia exporteren naar toonbankkaart 11 Presentatie exporteren

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

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

Cursus Onderwijs en ICT. bloggen met Wordpress

Cursus Onderwijs en ICT. bloggen met Wordpress Cursus Onderwijs en ICT Deel 21 (versie 1.0 NL 27-04-2011) bloggen met Wordpress door Serge de Beer Inleiding Zelf ben ik niet zo n blogger. Niet dat ik het niet heb geprobeerd trouwens. Al regelmatig

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

Inhoudsopgave. 3. Werken met thema s 89 3.1 Het standaard thema bekijken... 90 3.2 Een thema zoeken... 91 3.3 Een thema installeren...

Inhoudsopgave. 3. Werken met thema s 89 3.1 Het standaard thema bekijken... 90 3.2 Een thema zoeken... 91 3.3 Een thema installeren... Inhoudsopgave Voorwoord... 5 Nieuwsbrief... 5 Introductie Visual Steps... 6 Wat heeft u nodig?... 6 De website bij het boek... 7 Hoe werkt u met dit boek?... 7 Uw voorkennis... 8 Toets uw kennis... 8 Voor

Nadere informatie

Colofon. Apps, Alles over uitgeven op mobiel en tablet. Dirkjan van Ittersum ISBN: 978-90-79055-10-4

Colofon. Apps, Alles over uitgeven op mobiel en tablet. Dirkjan van Ittersum ISBN: 978-90-79055-10-4 Colofon Titel Apps, Alles over uitgeven op mobiel en tablet Auteur Dirkjan van Ittersum ISBN: 978-90-79055-10-4 Uitgever InCT Postbus 33028 3005 EA Rotterdam www.inct.nl uitgever@inct.nl Vormgeving en

Nadere informatie

Gebruikershandleiding websitebeheer m.b.v. Wordpress incl. Woo-Commerce

Gebruikershandleiding websitebeheer m.b.v. Wordpress incl. Woo-Commerce Gebruikershandleiding websitebeheer m.b.v. Wordpress incl. Woo-Commerce Saft Websites Gebruikershandleiding Wordpress icm Woocommerce pag. 1 Inhoudsopgave Inhoudsopgave Inhoudsopgave Inleiding Liever persoonlijke

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

Web app Spaans voor kinderen

Web app Spaans voor kinderen Web app Spaans voor kinderen Naam: Yanette Wong Lozano Inhoudsopgave Inleiding... 3 Beschrijving applicatie... 4 Doelgroep... 4 Omgeving... 4 Technologische middelen... 4 User stories... 4 Site map...

Nadere informatie

IcarOS maakt het mogelijk op een veilige manier bestanden en informatie online uit te wisselen. IcarOS biedt een eenvoudige en gebruiksvriendelijke

IcarOS maakt het mogelijk op een veilige manier bestanden en informatie online uit te wisselen. IcarOS biedt een eenvoudige en gebruiksvriendelijke IcarOS maakt het mogelijk op een veilige manier bestanden en informatie online uit te wisselen. IcarOS biedt een eenvoudige en gebruiksvriendelijke interface waarmee u meteen aan de slag kan. Zonder enige

Nadere informatie

Inleiding Administratieve Organisatie. Opgavenboek

Inleiding Administratieve Organisatie. Opgavenboek Inleiding Administratieve Organisatie Opgavenboek Inleiding Administratieve Organisatie Opgavenboek drs. J.P.M. van der Hoeven Vierde druk Stenfert Kroese, Groningen/Houten Wolters-Noordhoff bv voert

Nadere informatie

SportCTM 2.0 Sporter

SportCTM 2.0 Sporter SportCTM 2.0 Sporter APP Inloggen Dotcomsport heeft ter ondersteuning van de dagelijkse praktijk ook een APP ontwikkeld, om data invoer te vereenvoudigen. Deze APP ondersteunt de onderdelen; Agenda (invoer

Nadere informatie

Snel aan de slag met Novell Vibe Mobile

Snel aan de slag met Novell Vibe Mobile Snel aan de slag met Novell Vibe Mobile Maart 2015 Aan de slag Mobiele toegang tot de Novell Vibe-site kan door uw Vibe-beheerder worden gedeactiveerd. Raadpleeg uw Vibe-beheerder als u geen toegang kunt

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

Portfolio Handleiding / faq

Portfolio Handleiding / faq Portfolio Handleiding / faq Wat is een portfolio? Waar vind ik het portfolio? Wat vind ik allemaal op mijn portfoliopagina? Hoe pas ik mijn introductietekst aan? Wat zijn portfoliomappen en portfolio-items?

Nadere informatie

Om in te loggen in het CMS (Content Management Systeem) gaat u naar http://domeinnaam.nl/admin Hier ziet u het inlogscherm:

Om in te loggen in het CMS (Content Management Systeem) gaat u naar http://domeinnaam.nl/admin Hier ziet u het inlogscherm: CMS Handleiding Inhoudsopgave Inloggen in het CMS... 3 Pagina s toevoegen... 4 Pagina s bewerken... 7 Een link toevoegen... 8 Een afbeelding toevoegen... 10 Foto s plaatsen op de fotopagina... 12 Media...

Nadere informatie

Gebruikershandleiding websitebeheer m.b.v. Wordpress

Gebruikershandleiding websitebeheer m.b.v. Wordpress Gebruikershandleiding websitebeheer m.b.v. Wordpress Saft Websites Gebruikershandleiding Wordpress pag. 1 Inhoudsopgave Inhoudsopgave Inhoudsopgave Inleiding Inloggen in administratorgedeelte Informatie

Nadere informatie