GoogleMapsGoogleMapsGoogleMaps GoogleMapsGoogleMapsGoogleMaps GoogleMapsGoogleMapsGoogleMaps
|
|
|
- Erika Koning
- 9 jaren geleden
- Aantal bezoeken:
Transcriptie
1 Google Maps
2 INHOUDSOPGAVE Inleiding.. 3 Een Google Map maken.. 4 Een eigen adres opgeven 7 Inzoomen op je eigenkaart. 8 Satellietbeeld op je eigenkaart. 10 Markers plaatsen. 13 Tekstballon plaatsen.. 15 Meerdere markers plaatsen.. 18 Een XML bestand inladen. 19 Meerdere tekstballonnen plaatsen. 20 Bronnen.. 20 Werken met Google Maps Pagina 2
3 Inleiding Google Maps wordt steeds populairder. Met deze dienst van Google kan je landkaarten gebruiken en voorzien van eigen informatie. Google stelt de software van Google Maps gratis ter beschikking. De software is zo gemaakt dat je het door toevoeging van eigen gegevens naar je hand kunt zetten. Dit wordt gedaan doormiddel van een API (een Application Programming Interface). In dit document zullen we kijken naar de opties van Google Maps en zullen we kijken hoe we de opties kunnen toepassen op je eigen website. We zullen doormiddel van HTML en JavaScript kijken hoe je snel een interactieve kaart in je webpagina kunt opnemen die functionaliteit bevat zoals: in- en uitzoomen, markeringen plaatsen en tekstballonnen plaatsen. Werken met Google Maps Pagina 3
4 Een Google Map maken Om een Google Map toe te voegen op je website moet er het volgende gebeuren. Om de Google Maps API te kunnen gebruiken moet een sleutel hebben waarmee je jezelf als unieke gebruiker identificeert. Dit heet een API-key. Die kun je gratis aanvragen bij Google. Ga op deze pagina akkoord met de voorwaarden,vul het adres van je site in en klik op Generate API key. Google genereert nu een unieke key voor je die goed is voor je eigen website (domein). Ook geeft Google de nodige code om te starten! Die kan er als volgt uit zien: Voorbeeld van een API- Key: ABQIAAAAdEYsXI1V4dPLmI0l5_GIqhSWFzE4E7BWMOMx4jvDgkY64bOkeBSoNByXRShPb7YyvhI1vUh6onn A9P JavaScript Maps API voorbeeld:... <script src=" &key=abqiaaaadeysxi1v4dplmi0l5_giqhswfze4e7bwmomx4jvdgky64bokebsonbyxrshpb7yyvh I1vUh6onnA9P" type="text/javascript"> </script>... Werken met Google Maps Pagina 4
5 In HMTL ziet het er als volgt uit: <html> <head> <title>google Maps Voorbeeld</title> <script src=" hele lange key...]" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ map.setcenter(new GLatLng( , ), 13); //]]> </script> </head> <body onload="load()" onunload="gunload()"> <div id="map" style="width: 500px; height: 300px"></div> </body> </html> De opbouw van de Google Map code De code bestaat uit vier onderdelen: 1) Het algemene javascript dat je van Google krijgt (met je API key). 2) Een specifiek stukje javascript dat een locatie op de wereld aangeeft - de functie load() met daarin de GLatLng functie. Let op: Google Maps vraagt eerst de breedtegraad, daarna de lengtegraad. map.setcenter(new GLatLng( , ), 13); 3) Twee aanwijzingen in de body tag (het startpunt van de inhoud van je webpagina): op het moment dat je webpagina inlaadt in de browser start de load() functie en als deze pagina wordt gesloten start de GUnload() functie. <body onload="load()" onunload="gunload()"> 4) Een plek in je pagina waar de kaart getoond gaat worden. <div id="map" style="width: 500px; height: 300px"></div> Werken met Google Maps Pagina 5
![313685), 13); //]]> </script> </head> <body onload="load()" onunload="gunload()"> <div id="map" style="width: 500px; height: 300px"></div> </body> </html> De opbouw van de Google Map code De code](/docs-images/52/16011928/images/page_5.jpg "bestaat uit vier onderdelen: 1) Het algemene javascript dat je van Google krijgt (met je API key).")
6 Het resultaat Als je het bovenstaande voorbeeld zou gebruiken zie je het volgende: Werken met Google Maps Pagina 6
7 Een eigen adres opgeven Doe hiervoor het volgende: 1) Zoek de breedtegraad en lengtegraad van je adres op; dit kan bijvoorbeeld met Google Earth. Stel dat je adres Damrak 277, 1012 ZJ Amsterdam is (dit is het adres van de Beurs van Berlage). Een zeer handige website hiervoor is (van TeleAtlas). Op deze manier vinden we dat de coördinaten van de Beurs van Berlage N Â E zijn. Je kan dit natuurlijk ook met een eigen GPS doen. Op de site wordt ook Google Maps gebruikt, maar ik werk voor nu zelf door aan het voorbeeld. In de load() functie vervang je nu de waarden: <script type="text/javascript"> //<![CDATA[ map.setcenter(new GLatLng( , ), 13); //]]> </script> Het effect is nu: Werken met Google Maps Pagina 7
8 Inzoomen op je eigenkaart Nu we een eigenkaart hebben, gaan we eens kijken hoe je kunt Inzoomen. Inzoomen Je kunt op twee manieren inzoomen op een kaart: Door middel van een inzoom-element (dan bepaalt de bezoeker dat hij wil inzoomen) of door zelf van te voren aan te geven hoe ver erop de kaart ingezoomd wordt. inzoom-element Voeg voor een inzoom-element 1 regel toe aan de load() functie van je kaart: map.addcontrol(new GSmallMapControl()); De functie wordt nu: <script type="text/javascript"> //<![CDATA[ map.addcontrol(new GSmallMapControl()); map.setcenter(new GLatLng( , ), 13); //]]> </script> De regel map.addcontrol(new GSmallMapControl()); zorgt ervoor dat de kaart een inzoom-element bevat. Als een bezoeker inzoomt komt hij steeds dichter bij de Beurs van Berlage. Het effect is nu: Werken met Google Maps Pagina 8
9 Zelf inzoomen Dit doe je door het getal 13 uit map.setcenter() in de code door een hoger getal te vervangen. Dit getal heet de z-waarde van de kaart. Ik heb er nu 14 van gemaakt. De functie wordt nu: <script type="text/javascript"> //<![CDATA[ map.addcontrol(new GSmallMapControl()); map.setcenter(new GLatLng( , ), 14); //]]> </script> Het effect is nu: Er is ook een mogelijkheid om beide mogelijkheden te combineren. Werken met Google Maps Pagina 9
10 Satellietbeeld op je eigenkaart We gaan nu kijken hoe je een satellietbeeld kunt toevoegen aan je kaart. Satellietbeelden als mogelijkheid toevoegen aan een Google Map Google biedt de mogelijkheid om niet alleen kaart informatie te laten zien, maar ook satellietkaarten van de werkelijkheid. Ook hiervoor geldt dat je dit op twee manieren kunt doen. Optie 1 is dat de bezoeker het zelf instelt en optie 2 is dat de kaart standaard satellietbeelden laten zien. Satellietbeelden als optie Voeg voor een keuze-element 1 regel toe aan de load() functie uit het vorige artikel: map.addcontrol(new GMapTypeControl()); De functie wordt nu: <script type="text/javascript"> //<![CDATA[ map.addcontrol(new GMapTypeControl()); map.setcenter(new GLatLng( , ), 14); //]]> </script> De regel map.addcontrol(new GMapTypeControl()); zorgt ervoor dat de kaart toevoegd met een satellietkaart element. Als een bezoeker klikt op Satelliet ziet hij de Satellietkaart, bij Beide ziet hij de twee kaarten door elkaar heen. Werken met Google Maps Pagina 10
11 Het effect is nu: Satellietbeelden standaard instellen Als je direct wilt starten met een beide beelden door elkaar heen (dit heet hybride), voeg dan een extra variabele toe aan de methode map.setcenter(), nl. G_HYBRID_MAP: <script type="text/javascript"> //<![CDATA[ map.setcenter(new GLatLng( , ), 14, G_HYBRID_MAP); //]]> </script> Werken met Google Maps Pagina 11
12 Het effect is nu: Er zijn hier hierin 3 mogelijkheden: A) G_NORMAL_MAP - de standaardkaart (als je geen variabele meegeeft, is dit de standaardkaart) B) G_SATELLITE_MAP - de satellietkaart C) G_HYBRID_MAP - de hybride kaart Combineren Ook hier geldt dat je deze twee dingen natuurlijk kunt combineren! Zo start je dan met de hybride kaart en kan de bezoeker een andere optie kiezen. <script type="text/javascript"> //<![CDATA[ map.addcontrol(new GMapTypeControl()); map.setcenter(new GLatLng( , ), 14, G_HYBRID_MAP); //]]> </script> Werken met Google Maps Pagina 12
13 Marker plaatsen We gaan nu verder kijken hoe je een marker. Het doel is dat we een plek op de kaart aanwijzen die we extra van belang vinden. Een marker op je Google Map zetten Om een marker op de kaart te zetten moet je een klein stukje code toevoegen aan het script dat we al hadden: map.addcontrol(new GMapTypeControl()); map.setcenter(new GLatLng( , ), 14); var marker = new GMarker(new GLatLng( , )); map.addoverlay(marker); Zoals je kunt zien hebben we twee nieuwe regels aan het eind: Eerst vertellen we wat de coördinaten zijn van de marker (dezelfde als de Beurs van Berlage) Daarna voegen we die met de functie addoverlay() toe aan de kaart. Het effect is nu: Werken met Google Maps Pagina 13
14 Het load() script vereenvoudigen Het script dat we hebben kan echter beter. We hebben nu namelijk twee keer de coördinaten ingeprogrammeerd. Dat is niet de bedoeling. Dit vervangen we door een nieuwe variabele: point. Deze vullen we 1x en gebruiken we daarna op de plaatsen waar het nodig is. Het effect blijft hetzelfde. var point = new GLatLng( , ); map.addcontrol(new GMapTypeControl()); map.setcenter(point, 14); var marker = new GMarker(point); map.addoverlay(marker); Eigenschappen van de marker Het bijzondere aan de marker is dat het automatisch een element wordt dat de bezoeker kan aanklikken. Werken met Google Maps Pagina 14
15 Tekstballon plaatsen Nu we weten hoe je een marker op je map maakt, is de basis er om een tekstballon toe te voegen aan die plek. Deze tekstballon verschijnt als een bezoeker met zijn muis over de marker gaat en kan gevuld worden met inhoud (tekst en afbeeldingen). Een tekstballon op je Google Map zetten Google noemt een tekstballon een InfoWindow. We voegen deze toe met een nieuwe regel code aan het eind van het script: var point = new GLatLng( , ); map.addcontrol(new GMapTypeControl()); map.setcenter(point, 14); var marker = new GMarker(point); map.addoverlay(marker); marker.openinfowindowhtml("beurs van Berlage"); Het effect is nu: Werken met Google Maps Pagina 15
16 Een tekstballon / InfoWindow tonen bij het aanklikken van de marker Als je wilt dat een tekstballon pas verschijnt op je kaart als een bezoeker de marker aanklikt. Dan kun je het volgende doen door het aanroepen van de ballon pas te laten gebeuren, nadat je bezoeker op de marker heeft geklikt. Sluit daarvoor de openinfowindowhtml() in een methode die 'luistert' of er op de marker geklikt wordt. Dit wordt een eventlistener genoemd: var point = new GLatLng( , ); map.addcontrol(new GMapTypeControl()); map.setcenter(point, 14); var marker = new GMarker(point); map.addoverlay(marker); GEvent.addListener(marker, "click", function() { marker.openinfowindowhtml("beurs van Berlage"); ); Extra eigenschap van de tekstballon / InfoWindow: maximize Het is mogelijk om je tekstballon te voorzien van een 'maximize' adres. Hierdoor verschijnt een maximize icoon. Als je bezoeker hierop klikt ziet hij deze extra pagina. Hiervoor kan je een gewone html pagina maken en deze aan de openinfowindowhtml() functie toevoegen zoals hieronder: var point = new GLatLng( , ); map.addcontrol(new GMapTypeControl()); map.setcenter(point, 14); var marker = new GMarker(point); map.addoverlay(marker); GEvent.addListener(marker, "click", function() { marker.openinfowindowhtml("beurs van Berlage",{maxUrl:"details.html"); ); Werken met Google Maps Pagina 16
17 Het effect is nu: Werken met Google Maps Pagina 17
18 Meerdere markers plaatsen Nu we weten hoe je een marker op je map maakt. We gaan nu kijken hoe je meerdere markers op een kaart kunt plaatsen. Meerdere markers toevoegen aan je Google Map In het voorbeeld hieronder zie je twee markers: 1 bij de Beurs en 1 bij het Anne Frank Huis. Werken met Google Maps Pagina 18
19 Een XML bestand inladen Er zijn verschillende manieren om coördinaten in te laden, maar ik heb ervoor gekozen dit met een xml bestand te doen. Het voordeel daarvan is dat je de inhoud van je kaart kunt scheiden van de code waarmee je de kaart opbouwt. Hierdoor is het beheer van je kaart eenvoudiger. De aanpassing van de code is als volgt: map.addcontrol(new GMapTypeControl()); GDownloadUrl("xml/13/data.xml", function(data, responsecode) { var xml = GXml.parse(data); var markers = xml.documentelement.getelementsbytagname("marker"); for (var i = 0; i < markers.length; i++) { var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parsefloat(markers[i].getattribute("lng"))); map.setcenter(point, 14); var marker = new GMarker(point); map.addoverlay(marker); ); GDownloadUrl() toevoegen Om een xml bestand in te laden moet je de functie GDownloadUrl() gebruiken. In dit voorbeeld laad ik xml/13/data.xml in. Dit bestand ziet er alsvolgt uit: <?xml version="1.0" encoding="utf-8"?> <markers> <marker lat=" " lng=" " /> <marker lat=" " lng=" " /> </markers> Vul per regel een locatie in. De coördinaten van het Anne Frank huis heb ik opgezocht Loop over de markers Wat nieuw is, is dat je de waardes voor de point variabele uit het XML document haalt en deze eerst in een array bewaart: var markers. var markers = xml.documentelement.getelementsbytagname("marker"); Daarna loop je over dit array (met de for loop) op de manier zoals boven beschreven. Je kunt zien dat je zo de attributen "lat" en "lng" gebruikt uit het XML bestand en toewijst aan nieuwe markers. Door het laatste element in je XML document de Beurs van Berlage te laten zijn wordt er voor gezorgd dat je kaart daarop centreert. Werken met Google Maps Pagina 19
20 Meerdere tekstballonnen plaatsen We hebben meerdere markers op de kaart gemaakt. We gaan nu kijken hoe je meerdere tekstballonnen op een kaart kunt plaatsen. Om de code overzichtelijker te maken zal ik deze eerst wat anders indelen. De Javascript code scheiden van de HTML pagina In de eerste plaats scheid je de Javascript code van de webpagina. Dit heeft het voordeel dat je het apart kunt bewerken en kan je de code eenvoudiger controleren op fouten. Maak voor de code een apart bestand, en roep dit aan in de header: <script src="scripts/17/maps.js"type="text/javascript"></script> De load() functie van je Google Map opdelen De load() functie is nu nog één grote functie. Deze deel je op in twee functies. Uit de load() functie haal je de code die nodig is voor het aanmaken van een marker, met de click eventlistener voor het InfoWindow. Deze plaats je in een nieuwe functie: createmarker(). //Create marker and set up event window function createmarker(point,html){ var marker = new GMarker(point); GEvent.addListener(marker, "click", function() { marker.openinfowindowhtml(html); ); return marker; Het XML document voorzien van informatie voor de tekstballonnen Het XML document verrijk je nu met de informatie voor je tekstballon. Dit doen we voorlopig met een extra attribuut: html. Hierin staat de inhoud van de tekstballon. Je XML bestand ziet er nu alvolgt uit: <?xml version="1.0" encoding="utf-8"?> <markers> <marker lat=" " lng=" " html="anne Frank Huis"/> <marker lat=" " lng=" " html="beurs van Berlage"/> </markers> Je zult merken dat bij het aanroepen van dit xml bestand met GDownloadUrl() je browser het bestand cachet. Hierdoor worden wijzigingen niet meegenomen. Hiervoor is een eenvoudige oplossing: voeg bij het aanroepen een extra parameter toe met een willekeurig nummer. Dit kan je op de volgende manier in je Javascript bestand doen: //create randomnumber and retrieve xml file var randomnumber=math.floor(math.random()*11111) GDownloadUrl("xml/17/data.xml?random="+randomnumber, function(data, responsecode) { Werken met Google Maps Pagina 20
21 De tekstballonnen aanroepen Wijzig de load functie nu zo dat je de HTML informatie aanroept en dit doorgeeft aan de nieuwe functie. map.addcontrol(new GMapTypeControl()); //create randomnumber and retrieve xml file var randomnumber=math.floor(math.random()*11111) GDownloadUrl("xml/17/data.xml?random="+randomnumber, function(data, responsecode) { var xml = GXml.parse(data); //store markers in markers array var markers = xml.documentelement.getelementsbytagname("marker"); //loop over the markers array for (var i = 0; i < markers.length; i++) { var lat = parsefloat(markers[i].getattribute("lat")); var lng = parsefloat(markers[i].getattribute("lng")); var point = new GLatLng(lat,lng); var html = markers[i].getattribute("html"); map.setcenter(point, 14); var marker = createmarker(point,html); map.addoverlay(marker); //close for loop ); //close GDownloadUrl //close GBrowserIsCompatible //close load Zoals je kunt zien plaats je elke element dat van belang is binnen de for loop eerst in een variabele en geef je die daarna door aan twee onderdelen: 1) je point en 2) de nieuwe createmarker functie. Hierna zet je alles op de kaart met de map.addoverlay(marker) functie. Het eindresultaat Het eindresultaat is klaar: een Google Map met meerdere tekstballonnen geladen vanuit een XML bestand. Werken met Google Maps Pagina 21
22 Bronnen Verwijzing naar boeken Google Maps Applications Development (boek) Verwijzing naar Internet bronnen. Werken met Google Maps Pagina 22
Web building gevorderden: CSS & JavaScript. Karel Nijs 2008/11
Web building gevorderden: CSS & JavaScript Karel Nijs 2008/11 Webbuilding gevorderden les 3 JavaScript intro JavaScript invoegen JavaScript statements JavaScript popup berichten JavaScript functies JavaScript
Jarno Verhoogt 21 mei 2014 Stud. Nr. 500684953 Docent: Joost Faber. Deeltoets 2: Hoe maak je met javascript een eenvoudige slideshow?
Jarno Verhoogt 21 mei 2014 Stud. Nr. 500684953 Docent: Joost Faber Deeltoets 2: Hoe maak je met javascript een eenvoudige slideshow? Inleiding Dit is een eenvoudige handleiding om in javascript een simpele
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.
Lab Webdesign: Javascript 11 februari 2008
H2: BASISBEGRIPPEN In dit hoofdstuk zullen er enkele basisbegrippen worden behandelt PLAATSING VAN JAVASCRIPT-CODE DE SCRIPT-TAG De script-tag geeft aan dat er gebruik zal worden gemaakt van een scripttaal.
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
Een quiz plaatsen op je website
Een quiz plaatsen op je website Om de deelnemers een beetje na te laten denken kan je een quiz toevoegen op je site. Dat doe je op de volgende manier: a. Een quiz aanmaken Ga naar je eigen pagina en klik
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
Stappenplan voor de leerkracht bij: Opdrachten maken in Google Earth
Stappenplan voor de leerkracht bij: Opdrachten maken in Google Earth Het gebruik van Google Earth krijgt nog veel meer waarde als de leerlingen concrete opdrachten gaan uitvoeren. Deze opdrachten kunnen
Voordelen: Nadelen: Benodigdheden: Programma s: Google Web Designer. Photoshop. Sublime (HTML-editor) Websites: Tinypng.com
Google Web Designer Voordelen: Sneller en makkelijker. Banners kunnen worden afgespeeld op telefoons (flash kan dit niet). Het vervangen van plaatjes kan zonder het programma op te starten. Meer FPS dan
Inhoud. Handleiding Dododent. Beste tandarts of praktijkmanager,
Handleiding Dododent Beste tandarts of praktijkmanager, Hartelijk dank voor de aanschaf van een website bij Dodoworks. Hieronder volgt een uitgebreide handleiding van het Dododent systeem waarmee de website
JavaScript. 0 - Wat is JavaScript? JavaScript toevoegen
0 - Wat is JavaScript? JavaScript is hele andere koek dan Scratch. Het wordt ook door professionele programmeurs gebruikt. Doordat er veel mensen gebruik maken van JavaScript is er veel informatie over
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
Iedereen online, van 9 tot 99 jaar. Les 3 ... Google: zoeken op het internet. Deze iconen tonen aan voor wie het document is
3... Google: zoeken op het internet Deze iconen tonen aan voor wie het document is Leerkrachten WebExperts Senioren Leerlingen 3, Hoe moet je zoeken op Google? Deze handleiding toont je hoe dit moet. Als
Javascript oefenblad 1
Leer de basis van Javascript. Javascript oefenblad 1 Niels van Velzen Javascript oefenblad 1 Pagina 2 Inleiding Javascript is niet altijd even makkelijk. Vooral aan het begin is het even wennen hoe de
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...
Een checklist invoegen in je pagina
Een checklist invoegen in je pagina Een checklist bestaat uit 2 onderdelen, een tabel en een checkbox. Als eerste moet er een tabel gemaakt worden zodat de checkbox in de tabel kan worden ingevoegd. Ook
Inleiding release notes
Toelichting release notes 3 juli 2014 1 2 Release notes - 3 juli 2014 Inleiding release notes Het wordt een goede gewoonte, de release notes met meer tekst en uitleg over opvallende nieuwigheden en functionaliteiten
Dynamiek met VO-Script
Dynamiek met VO-Script Door Bert Dingemans DLA Ontwerp & Software [email protected] Inleiding Op de SDGN nieuwsgroep voor Visual Objects ontstond laatst een draad van berichten over de nieuwe libraries
Handleiding wordpress
Handleiding wordpress Wordpress versie 3.0.4 Handleiding versie 1.1 Auteur Website Geert Hoekzema www.geerthoekzema.nl www.geerthoekzema.nl [email protected] 1 Inhoudsopgave Inleiding... 3 Beginnen
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...
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
Uitleg CMS Utrecht Your Way Button 1. Inloggen
Uitleg CMS Utrecht Your Way Button 1. Inloggen Met jouw login gegevens kun je inloggen via http://button.utrechtyourway.nl/cms 2. Dashboard Na inloggen wordt het dashboard van het CMS zichtbaar. Of te
HTML en CSS gevorderd
HTML en CSS gevorderd Inhoudsopgave Inleiding! 3 Opbouw webpage en css! 4 DIVʼs of iframes?! 8 Eigen icoon in de adresbalk van de browser! 8 Web-editors! 8 Koppelen van css-bestanden! 9 Browser afhankelijke
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...
Gebruikershandleiding Typo3
Gebruikershandleiding Typo3 Inhoudsopgave: 1. Inhoudsopgave 2. Inloggen op de backend 3. Tekst aanpassen 4. Afbeeldingen toevoegen. a. Een afbeelding toevoegen in de teksteditor. b. Een afbeelding toevoegen
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
DrICTVoip.dll v 2.1 Informatie en handleiding
DrICTVoip.dll v 2.1 Informatie en handleiding Nieuw in deze versie : Koppeling voor web gebaseerde toepassingen (DrICTVoIPwebClient.exe) (zie hoofdstuk 8) 1. Inleiding Met de DrICTVoIP.DLL maakt u uw software
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
Sick Beard installeren en configureren voor gebruik in combinatie met SABnzbd+...
pagina 1 van 6 Sick Beard installeren en configureren voor gebruik in combinatie met SABnzbd+ (Windows) Introductie Sick Beard is een stukje software wat heel wat werk uit handen kan nemen. Het weet welke
I. Vorming 4-5 (3&10/05/2012)
I. Vorming 4-5 (3&10/05/2012) 1. Windows Live Photo Gallery Om de foto s op onze computer te beheren, hebben we voor de vorming gekozen om met Windows Live Photo Gallery te werken. Photo Gallery biedt
En hoe gaan ze dit allemaal terugvinden?
En hoe gaan ze dit allemaal terugvinden? Taak 1.2.10 Thomas Muller Paul van der Linden MT1A Tutor: van Griensven Docent: van den Biggelaar Gemaakt door Thomas Muller en Paul van der Linden Pagina 1 van
Ik zal je nu stap voor stap laten zien hoe je je product op je website als betaalde download kunt aanbieden.
Inleiding Als je producten op je website wilt verkopen maar je wilt niet meteen een hele webshop optuigen, dan kan dit ook eenvoudiger. Er is een manier om snel en gemakkelijk producten op je website te
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
Zelf een eenvoudige website opzetten. Jorrit Groenevelt & Arjan Kraak Juni 2013
Zelf een eenvoudige website opzetten Jorrit Groenevelt & Arjan Kraak Juni 2013 1 Inleiding/Doel Een onmisbaar onderdeel van het starten van een bedrijf is het opzetten van een website. Een onderneming
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.
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
van PSD naar JavaScript
2015 van PSD naar JavaScript F. Vonk versie 2 19-9-2015 inhoudsopgave 1. inleiding... - 2-2. ontwikkelomgeving... - 3-3. programmeerconcepten... - 4 - statement... - 4 - sequentie... - 4 - variabele en
Onderdeel: Opdracht Uitleg + Opdracht
Programma: HTML / Website Onderdeel: Opdracht Uitleg + Opdracht Inhoudsopgave Een website bouwen... pag. 2 Opdracht... pag. 2 Opslaan van het werk... pag. 2 Aan het werk.... pag. 3 Speciale knoppen...
4. Bij de eerste inlogsessie, wordt je gevraagd om de Google gebruiksvoorwaarden te accepteren. Klik op "Ik ga akkoord. Ga door naar mijn account.
De allereerste keer inloggen bij Google apps for education 1. Log in via de knop rechtsboven in je browser. a. Zie je de knop niet? Surf dan eerst naar www.google.be b. Ben je al ingelogd onder een andere
Wilt u zelf vector kaarten maken voor uw garmin kijk dan op GPS-info.nl/custom_maps.php.
SOFTWARE > GARMIN CUSTOM MAPS Met de laatste Firmware van de Garmin Colorado, oregon en dakota kunt uzelf jpg kaarten laden in de gps. De eerste informatie stond al op GPS-info.nl/nieuws, toch heb ik een
Instellen en werken met Templates
Instellen en werken met Templates Pagina 2 van 8 Nationaal Golfpakket F Inhoudsopgave D Instellingen in het golfpakket...5 Aanmaken Templates... 5 Instellen van de templates in het golfpakket... 6 Links
BrowseAloud Plus: dé voorleestool op websites! 1
BrowseAloud Plus: dé voorleestool op websites! 1 INFORMATIE VOOR COMMUNICATIEMANAGERS EN WEBMASTERS INHOUD Informatie voor communicatiemanagers en webmasters... 2 BrowseAloud Plus: dé voorleestool op websites!
Handleiding voor het maken van GPS routes met behulp van Mapy.cz
Handleiding voor het maken van GPS routes met behulp van Mapy.cz Versie: 0.1 Datum: 1 juni 2011 Orginele document is te vinden op www.wilsoft.cz Pagina 1 1.Inleiding Deze handleiding beschrijft stapsgewijs
Handleiding Facebook Pergamano International Augustus 2012
Handleiding Facebook Pergamano International Augustus 2012 Inhoudsopgave 1 Wat is Facebook? 2 Registreren bij Facebook en een account aanmaken 3 Foto s toevoegen in een album 4 Een omslag foto toevoegen
Umbraco Gebruikershandleiding
Umbraco Gebruikershandleiding Aan de slag gaan met Umbraco 1.1 Aanmelden Umbraco is een web publishing systeem dat gemakkelijk te gebruiken is door de gebruikers en heeft geen hoge hard- en software vereisten.
Websitecursus deel 3 JavaScript
Websitecursus deel 3 JavaScript A Eskwadraat WebCie [email protected] 12 oktober 2015 Introductie Twee weken geleden HTML Vorige week CSS Deze week JavaScript Javascript JavaScript (ook wel JS) is een
Handleiding website. Inloggen Start uw internet browser en ga naar http://www.rbaoreven.nl/. Laatst bijgewerkt: 17 mei 2008
Handleiding website Laatst bijgewerkt: 17 mei 2008 In deze handleiding staat alles wat u nodig heeft om een bericht op de website van de Reddingsbrigade Aoreven Heythuysen te plaatsen. Alles wordt in woord
Achtergrond en lettertype Opmaak Achtergrond Opmaak Achtergrond Afbeelding in achtergrond
Frontpage Express is het meest eenvoudige programma voor het maken van je homepage. Is het programma niet geïnstalleerd op je PC, dan is het te downloaden en daarna te installeren. We zullen nu een aantal
Handmatig Onderzoekmelding invoeren Archis III
Handmatig Onderzoekmelding invoeren Archis III Voor het indienen van een onderzoekmelding in Archis III ga je naar Melden nieuw onderzoek Daar moeten 3 schermen doorlopen/ingevoerd worden. Eerste scherm:
Handleiding Site to Edit Module Kaart
THAR Design Kipboomweg 15 7636 RC AGELO E-mail: [email protected] Website: www.thar.nl KvK nummer: 08165396 BTW nummer: NL8186.22.416.B01 Rekeningnummer: 45.09.80.59 Handleiding Site to Edit Module Kaart Aanvulling
Legal Eagle Agenda handleiding versie 2.8 december 2007
Legal Eagle Agenda handleiding versie 2.8 december 2007 Algemeen... 2 Afspraken... 6 Synchroniseren... 6 Synchroniseren... 7 Export... 8 Filters... 9 * Er kan niet met Outlook Express gesynchroniseerd
Hoe moet je een prachtige presentatie maken?
Hoe moet je een prachtige presentatie maken? www.meestermichael.nl Geef de presentatie een titel. Klik dit vak aan om jouw presentatie een ondertitel te geven. Hier kun je je presentatie een titel geven
Automatisering voor Financiële Dienstverleners. Werken met Queries en Merge Documenten. For more information visit our website at www.pyrrho.
Automatisering voor Financiële Dienstverleners Werken met Queries en Merge Documenten For more information visit our website at www.pyrrho.com Date: Document Nr: 30 maart, 2007 UBizzMerge, Versie 4.0 Status:
Werken met een digitaal leer-/werkboek in Edu Bieb
Werken met een digitaal leer-/werkboek in Edu Bieb Inhoud 1. Edu Bieb... 3 2. Werken in een digitaal leer-/werkboek... 4 2.1 De knoppen... 4 2.2 Aantekeningen maken... 5 2.3 Aantekening delen met je docent...
Beschrijving webmail Enterprise Hosting
Beschrijving webmail Enterprise Hosting In dit document is beschreven hoe e-mail accounts te beheren zijn via Enterprise Hosting webmail. Webmail is een manier om gebruik te maken van e-mail functionaliteit
Aan de slag met Twitter
Aan de slag met Twitter Registreren De URL (het adres op het internet) om te registreren is: https://twitter.com/signup In dit voorbeeld is er een Twitter 1 account aangemaakt voor een woning die te koop
Inhoud van de website invoeren met de ContentPublisher
Inhoud van de website invoeren met de ContentPublisher De inhoud van Muismedia websites wordt ingevoerd en gewijzigd met behulp van een zogenaamd Content Management Systeem (CMS): de ContentPublisher.
Modular Development. Een App in Facebook. Dennis van der Oost CMD2D 0822118. Module: CMDDEV01-7 Docent: Eric Mahieu. Eindverslag v.1.
Modular Development Een App in Facebook Dennis van der Oost CMD2D 0822118 Module: CMDDEV01-7 Docent: Eric Mahieu Eindverslag v.1.0 Inhoudsopgave - Inleiding - Concept omschrijving - Technisch onderzoek
Route Een programma bestaat uit verschillende routes (deelparcoursen). Elke route heeft een eigen instelling voor
Trainingen Via de functieknop Trainingen creëer en bewerk je routes en trainingen van de verschillende trainingstypes: Catalyst, Video, GPS Rides en Virtual Reality. Nieuwe training Hier stel je een nieuwe
Titel: flashvars.html
Data uitwisselen met Flash: the easiest way Kris Merckx www.ardeco.be Macromedia Flash-bestanden kunnen opgenomen worden in HTML. Een Flashfilm (*.swf) kan tekst, afbeeldingen, film, geluid en vectorbeelden
2. Wanneer moet ik een afbeelding verkleinen?
Appendix B. Beeldmateriaal en Blackboard 1. Inleiding...1 2. Wanneer moet ik een afbeelding verkleinen?...1 3. Het formaat van een afbeelding wijzigen...2 4. Een afbeelding comprimeren...4 5. Een uitsnede
Practicum Interactieve Video 18 januari 2008 - Beta Dag Vrije Universiteit Amsterdam door Winoe Bhikharie. Deel 1: Spelen met Interactieve Video
Practicum Interactieve Video 18 januari 2008 - Beta Dag Vrije Universiteit Amsterdam door Winoe Bhikharie In dit practicum krijg je een introductie over interactieve video. Met interactieve video wordt
TRAINERSSITE.NL VOETBALCLUB2000.NL HANDLEIDING
TRAINERSSITE.NL VOETBALCLUB2000.NL HANDLEIDING Website Opmaak Laatste update: 14 augustus 2013 Welkom Welkom bij de handleiding voor het opmaken van uw clubomgeving/website. Toegang tot de sites Voordat
Handleiding WordPress Bakkeveen.nl
Handleiding WordPress Bakkeveen.nl Inleiding: Hartelijk welkom als correspondent van Bakkeveen.nl In deze handleiding vind je de instructie hoe je zelf informatie op de site van Bakkeveen kunt plaatsen.
Meehelpen met de ontwikkeling van nieuwe of verbetering van bestaande spellen. Pag. 1 www.edubas.nl
Meehelpen met de ontwikkeling van nieuwe of verbetering van bestaande spellen. Pag. 1 Versie 1.0 februari 2015 Start-versie Over dit document In dit document probeer is duidelijk te maken hoe de spellen
Quick Guide VivianCMS
Quick Guide VivianCMS Contactformulier creëren Versie: 1.0 Startdatum: 24 juli 2006 Datum laatste wijziging: 24 juli 2006 Opmerking: Gepubliceerd op http://www.viviancms.nl Inhoud 1 Inleiding...3 1.1 Contactformulier
REDACTEUREN HANDLEIDING
V1.2 8/5/2009 Vertaling: John Sim 2 Inhoudsopgave De inhoud van een document bewerken... 11 Een nieuwe document aanmaken... 12 Het aanmaken van een nieuwe document gaat als volgt:... 12 Een pagina publiceren...
Dit is een artikel uit de Peter van Olmen serie: Handleidingen Voor Iedereen AUDACITY HANDLEIDING. Voor audacity versie 1.2.6
AUDACITY HANDLEIDING Voor audacity versie 1.2.6 Inhoudsopgave 1.1: Installatie 1.2: Mp3 bestanden mogelijk maken 2.1: Een bestand openen 2.2: Uitleg knoppen 2.3: Een deel selecteren 2.4: Verwijderen 2.5:
Aanmaken gebruikersaccount voor lessen bij Skeelerschool Leeuwarden.
Aanmaken gebruikersaccount voor lessen bij Skeelerschool Leeuwarden. Ga naar de website van de IJshal Leeuwarden (www.ijshalleeuwarden.nl) en kies voor de button: Skeelerschool Klik vervolgens op de oranje
Inloggen. In samenwerking met Stijn Berben.
Inloggen Ga naar www.hetjongleren.eu. Heb je al een gebruikersnaam en wachtwoord, log dan in op deze pagina (klik op deze link ): Vul hier je gebruikersnaam en wachtwoord in en klik op Inloggen. Bij succesvolle
design ook items uitsnijden
(fig1) Hulplijnen zetten Om het ontwerp netjes uit te snijden is het handig om eerst hulplijnen te zetten. (fig1) Nu is het zaak om eerst voor je zelf te bepalen wat is layout en wat is design. Al het
HEEMKUNDE RIPS. Project Initiatie Document. Datum voltooid: 9-11-2011. Versie: 1.0. Document ID: 1 Bestandsnaam: Project initiatie document
HEEMKUNDE RIPS Project Initiatie Document Projectcode: P201101 Datum voltooid: 9-11-2011 Auteur: Paul Oostenrijk Versie: 1.0 Status: Concept Bestandsnaam: Project initiatie document Documenthistorie Revisies
SEO advies plan. Tim Pieters M41T
SEO advies plan Tim Pieters M41T Inhoudsopgave -Inleiding -Stand van zaken -Optimalisatie -Resultaten -Toekomstige aanbevelingen Inleiding De website die zal worden behandeld in dit SEO plan is www.tp-media.design.
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
Mei. Handleiding - Publisher Tool 1
Mei 15 Handleiding - Publisher Tool 1 Inhoudsopgave 1. Welkom... 3 1.1 Inloggen... 3 1.2 Dashboard... 4 2. Boeken... 5 2.1 Boeken aanmaken... 5 2.2 Het bewerken van boekinformatie.... 7 3. Verrijkingen...
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
Publiceren met WordPress
Publiceren met WordPress Peter Osterop Tweede herziene editie 1. Installatie van WordPress 2. Configuratie van WordPress 3. Het uiterlijk van WordPress 4. Pagina s en berichten maken in WordPress 1 Installatie
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
Handleiding. Content Management Systeem (C.M.S.)
Handleiding Content Management Systeem (C.M.S.) www.wecaremedia.nl [email protected] 0162-223 161 Inhoudsopgave Inloggen... 3 Dashboard... 4 Bestanden... 4 Map aanmaken... 4 Bestanden toevoegen... 5
Comic Life: Maak een fotostrip in de klas
Comic Life: Maak een fotostrip in de klas Wat ga je doen? Je gaat een fotostrip maken met het programma Comic Life. Hiermee kun je gemakkelijk je eigen verhaal construeren. In het programma kun je per
Handleiding Joomla 3.x
Handleiding Joomla 3.x Hoe voeg ik een plaatje toe aan mijn artikel? Geschreven: Sandra van der Heijden (2015) AdviesMies Introductie Wanneer je dit document voor je hebt, betekent dit dat je een Joomla
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
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
Website maker. Bezoek je domein om de Website maker in te stellen. De volgende melding zal zichtbaar zijn.
Aan de slag met de Bezoek je domein om de in te stellen. De volgende melding zal zichtbaar zijn. Volg de url 'administratie paneel' om in te loggen en de vervolgens in te stellen. Als eerst krijg je de
Les 3: Het maken van pagina s, het menu en het schrijven van een blogpost Pagina s
Les 3: Het maken van pagina s, het menu en het schrijven van een blogpost Bij het maken van een blog is het belangrijk dat je er inhoud op plaatst. Dit noemen we content. Alles wat je openbaar op je blog
In dit voorbeeld gaan we een nieuw artikel maken. Klik dus op de knop [Item toevoegen].
![In dit voorbeeld gaan we een nieuw artikel maken. Klik dus op de knop [Item toevoegen].](/thumbs/33/16206900.jpg "In dit voorbeeld gaan we een nieuw artikel maken. Klik dus op de knop [Item toevoegen].")
Ga naar de site http://www.moerseboys.nl Beweeg de muis over de menukeuze Inloggen en geef je inloggegevens in. Klik vervolgens op Inloggen. Ga nu naar het menu Extra Kies nu voor Mijn Artikelen uit het
Werkomgeving. Android Studio. Android - werkomgeving 1/6
Android - werkomgeving 1/6 Werkomgeving Android Studio Installatie Ga naar de volgende URL: http://developer.android.com/sdk/index.html Klik op de knop "Download Android Studio for Windows" om het programma
Versturen van email vanuit een Delphi VCL toepassing
Versturen van email vanuit een Delphi VCL toepassing Voor Delphi bestaan uiteraard verschillende libraries om emails te versturen, maar in dit voorbeeld wordt een C# Dotnet library gebruikt en aangesproken
Handleiding Google Tagmanager (GTM)
Handleiding Google Tagmanager (GTM) Inhoudsopgave Basisbeginselen... 2 Google Tagmanager in de praktijk... 3 Meerdere domeinen doormeten met Google Tagmanager... 8 Meerdere domeinen doormeten met Universal
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) [email protected]
Quick Guide VivianCMS
Quick Guide VivianCMS Gastenboek creëren Versie: 1.0 Startdatum: 24 juli 2006 Datum laatste wijziging: 24 juli 2006 Opmerking: Gepubliceerd op http://www.viviancms.nl Inhoud 1 Inleiding...3 1.1 Contactformulier