Implementatie foto-album van wagenpark

In 5 stappen uw foto-album van het wagenpark
naar uw keuze op uw website:


Nadat u van Stravermobility uw gebruikersnaam en wachtwoord heeft ontvangen doorloopt u de volgende vijf onderstaande stappen. Klik op deze stappen voor een nadere toelichting.

Heeft u nog geen gebruikersnaam en wachtwoord?
Neemt u dan contact op met Harco Hagen van Stravermobility via h.hagen@stravermobility.nl.

1. Maak een gebruiker aan in de ContentPublisher van stravermobility.nl

Ga naar de ContentPublisher van stravermobility.nl.
Deze vind je op: http://www.stravermobility.nl/cp
Log in met uw gebruikersnaam en wachtwoord.

Ga vervolgens naar "FOTO'S / ALBUMS - gebruikers"


Hier maakt u een nieuw album aan door te klikken op "Maak nieuw item".


Vervolgens maakt u een gebruiker aan met een unieke toegangscode.
U gebruikersnaam wordt bijvoorbeeld: "mijnalbum"
en uw unieke toegangscode: "mijnalbum1234".
U kunt nu uw album samenstellen. U kunt kiezen uit een aantal vantevoren samengestelde albums.
U selecteert uw album(s) door op het pijltje naast het album te klikken.


U kunt uiteraard ook zelf uw eigen album samenstellen.


Zodra u uw album heeft geselecteerd of samengesteld dient u uw album op te slaan.
Klik op "Item opslaan".


Uw album is opgeslagen en terug te vinden onder "FOTO'S /ALBUMS - gebruikers"


De volgende stap is een HTML-pagina (webpagina) maken die 'linkt' naar dit foto-album.

TERUG NAAR TOP ///// TERUG NAAR TOP STAP 1

2. Maak een eenvoudige html-pagina aan

Open een nieuw document in een eenvoudig tekstverwerkersprogramma zoals bijvoorbeeld Wordpad. Geef uw tekst niet vorm. Pas dus geen stijlen toe e.d. Houd het 'plain text'.

Plaats onderstaande HTML erin. U heeft hierbij de basis gelegd voor een HTML-pagina.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body style="background-color:#FFFFFF;padding:20px;">
</body>

</html>

Vervolgens geeft u deze HTML-pagina de gewenste titel.
U voert uw titel in plaats van 'Untitled Document' (rood gemarkeerd). Bijvoorbeeld 'Mijn foto-album'.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Mijn foto-album</title>
</head>

<body style="background-color:#FFFFFF;padding:20px;">
</body>

</html>
Algemene belangrijke opmerking: pas alleen de rood- en groengemarkeerde teksten aan!
Dit om scriptfouten te voorkomen.


TERUG NAAR TOP ///// TERUG NAAR TOP STAP 2

3. Pas kleine wijzigingen toe in de html-pagina

Door een aantal kleine aanpassingen in de HTML zorgt u ervoor dat de HTML-code verwijst naar het foto-album dat u heeft samengesteld in de ContentPublisher.
U plaatst tussen <head> en </head> en onder <title>Mijn foto-album</title> onderstaande code

<!-- Start Album Code -->
<script
src="http://code.jquery.com/jquery-latest.js"></script>
<script language="JavaScript"
src="http://www.stravermobility.nl/klant_album_javascript.js"
type="text/javascript"></script>
<link href="http://www.stravermobility.nl/klant_album_style.css"
type="text/css" rel="stylesheet"/>
<script>

$(document).ready(function() {
getAlbum("toegangscode_gebruiker","naam_van_plaatsing_album");//toegangscode en naam van div waar album moet komen
})

</script>
<!-- Eind album Code -->

Nu gaat uw volledige HTML er zo uit zien:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Mijn foto-album</title>

<!-- Start Album Code -->
<script
src="http://code.jquery.com/jquery-latest.js"></script>
<script language="JavaScript"
src="http://www.stravermobility.nl/klant_album_javascript.js"
type="text/javascript"></script>
<link href="http://www.stravermobility.nl/klant_album_style.css"
type="text/css" rel="stylesheet"/>
<script>

$(document).ready(function() {
getAlbum("toegangscode_gebruiker","naam_van_plaatsing_album");//toegangscode en naam van div waar album moet komen
})

</script>
<!-- Eind album Code -->

</head>

<body style="background-color:#FFFFFF;padding:20px;">
</body>

</html>

Pas nu in de HTML de groen gemarkeerde teksten aan om uiteindelijk de juiste foto's te tonen.

Ten eerste de toegangscode die u heeft aangemaakt in de Content Publisher bij het aanmaken van uw fotoalbum. Dus 'toegangscode_gebruiker' verandert u in 'mijnalbum1234'.

Hierna geeft u de naam aan van het kader (de zogenaamde DIV) waarin het fotoalbum getoond wordt. U noemt het bijvoorbeeld: 'toonalbum' (geen spaties tussen de woorden).
Dus 'naam_van_plaatsing_album' verandert u in 'toonalbum'.

Zo ziet de volledige HTML er nu uit:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Mijn foto-album</title>

<!-- Start Album Code -->
<script
src="http://code.jquery.com/jquery-latest.js"></script>
<script language="JavaScript"
src="http://www.stravermobility.nl/klant_album_javascript.js"
type="text/javascript"></script>
<link href="http://www.stravermobility.nl/klant_album_style.css"
type="text/css" rel="stylesheet"/>
<script>

$(document).ready(function() {
getAlbum("mijnalbum1234","toonalbum");//toegangscode en naam van div waar album moet komen
})

</script>
<!-- Eind album Code -->

</head>

<body style="background-color:#FFFFFF;padding:20px;">
</body>

</html>

Algemene belangrijke opmerking: pas alleen de rood- en groengemarkeerde teksten aan!
Dit om scriptfouten te voorkomen.


TERUG NAAR TOP ///// TERUG NAAR TOP STAP 3

4. Plaats uw fotoalbum in uw html-pagina

Als laatste voegt u nog een klein stukje HTML aan uw pagina.
Hiermee zorgt u ervoor dat het fotoalbum zich toont in de webpagina.
Deze code moet u plaatsen tussen <body> en </body> in de HTML-code.

<!-- Start Album Code waar albums komen-->
<div id="naam_van_plaatsing_album" style="width:500px; height:400px; overflow-y:scroll; overflow-x:hidden"></div>
<!-- Eind album Code waar albums komen-->


U verandert ook hier 'naam_van_plaatsing_album' in 'toonalbum'.

<!-- Start Album Code waar albums komen-->
<div id="toonalbum" style="width:500px; height:400px;
overflow-y:scroll; overflow-x:hidden"></div>
<!-- Eind album Code waar albums komen-->


U kunt verder zelf nog de breedte en de hoogte van het fotoalbum aanpassen door de rood gemarkeerde getallen aan te passen. U wilt bijvoorbeeld een breedte van 650 pixels en een hoogte van 550 pixels, omdat dat beter bij uw website past.
U verandert dan '500' in '650' en '400' in '550'.

<!-- Start Album Code waar albums komen-->
<div id="toonalbum" style="width:650px; height:550px;
overflow-y:scroll; overflow-x:hidden"></div>
<!-- Eind album Code waar albums komen-->


Vervolgens plaats u nog een laatste stuk code in uw HTML. Hiermee kunt u zelf tekst(en) toevoegen, zowel boven het foto-album als eronder. De tekst die u boven het foto-album wilt hebben zet u boven de "Start album"-code. De tekst die u eronder wilt hebben zet u onder de "Start album"-code.
Deze code - uw teksten zijn hier rood gemarkeerd - ziet er dan als volgt uit.

Uw eigen tekst hier.<br>
Bekijk de albums:<br>
<!-- Start Album Code waar albums komen-->
<div id="toonalbum" style="width:650px; height:550px;
overflow-y:scroll; overflow-x:hidden"></div>
<!-- Eind album Code waar albums komen-->
<br>Uw afsluitende tekst hier.


De volledige HTML-code ziet er dan uit als volgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Mijn foto-album</title>

<!-- Start Album Code -->
<script
src="http://code.jquery.com/jquery-latest.js"></script>
<script language="JavaScript"
src="http://www.stravermobility.nl/klant_album_javascript.js"
type="text/javascript"></script>
<link href="http://www.stravermobility.nl/klant_album_style.css"
type="text/css" rel="stylesheet"/>
<script>

$(document).ready(function() {
getAlbum("mijnalbum1234","toonalbum");//toegangscode en naam van div waar album moet komen
})

</script>
<!-- Eind album Code -->

</head>

<body style="background-color:#FFFFFF;padding:20px;">

Uw eigen tekst hier.<br>
Bekijk de albums:<br>
<!-- Start Album Code waar albums komen-->
<div id="toonalbum" style="width:650px; height:550px;
overflow-y:scroll; overflow-x:hidden"></div>
<!-- Eind album Code waar albums komen-->
<br>Uw afsluitende tekst hier.

</body>

</html>

Uw kunt nu uw document bewaren.
Bewaar uw document als plain text en geef het een naam.
Zorg ervoor dat uw document eindigt op ".html".
Bijvoorbeeld: u bewaart uw document als "wagenpark_trouwen".
De volledige documentnaam luidt dan: "wagenpark-trouwen.html"

U heeft nu een webpagina aangemaakt.
De laatste stap is het uploaden van deze pagina naar uw webserver.

Algemene belangrijke opmerking: pas alleen de rood- en groengemarkeerde teksten aan!
Dit om scriptfouten te voorkomen.


TERUG NAAR TOP ///// TERUG NAAR TOP STAP 4

5. html-pagina en klant-loader.php uploaden naar uw webserver

Uw website is ondergebracht bij een hosting-partij.
U heeft van deze hosting-partij de zogenaamde FTP-inloggegevens nodig.
Met behulp van een FTP-programma kunt dan inloggen op uw domein en bestand "wagenpark-trouwen.html" uploaden. Deze dient u in de map "HTTP-docs" of "WWW" te zetten.
Uw kunt nu via uw internet-browser (Internet Explorer bijvoorbeeld) uw pagina oproepen. De link is dan: "htttp://www.uwdomeinnaam.nl/wagenpark-trouwen.html"

Heeft u geen ervaring met FTP-programma's. Vraag dan uw website-beheerder of uw hostingpartij om technische ondersteuning bij deze laatste stap.

TERUG NAAR TOP