Javascripts, sitemap, fotoalbum, gastenboeken, tellers, meta-tags, sitemap en feedbackformulieren

1 LESDOELSTELLINGEN

In deze les leer je gebruik te maken van Javascript en hoe je met meta-tags je positie op zoekmachines kunt verbeteren. Je leert ook wat een sitemap nu precies is en hoe je een gratis feedbackformulier aan je site kunt toevoegen. In de laatste les geef ook kort wat uitleg over de ideale structuur voor jullie site. Al deze zaken zul je moeten toepassen op je eigen jaarprojectsite.



2 JAVASCRIPTS

Met Javascripts kun je scripts of special effects laten uitvoeren door de browser. Zulke scripts zijn zeer leuk, maar gebruik ze enkel indien ze echt gepast zijn en zeker niet voor een hele site op elke pagina.

2.1 Werkmateriaal

Download de volgende bestanden voordat je met Javascript begint te experimenteren:

http://www.projectx2002.org/download/valentine.jpg

http://www.projectx2002.org/download/zon.jpg

http://www.projectx2002.org/download/plaatje01.jpg

http://www.projectx2002.org/download/plaatje02.jpg

http://www.projectx2002.org/download/plaatje03.jpg

http://www.projectx2002.org/download/plaatje04.jpg

http://www.projectx2002.org/download/plaatje05.jpg


Sla ze ook al deze bestanden binnen eenzelfde map op!

 

2.2 Tijd voor liefde

Maak in Expression Web een webpagina die je valentijn.html noemt. Het is tijd om daar hartjes te laten neerdwarrelen. Ga hiervoor naar
http://www.leejoo.nl/index.html. Ga daar eerst naar Java-scripts in de linkermenublok en zoek daarna image effects.

Je vindt daar een heleboel kant en klare scripts die je kunt invoegen en gemakkelijk kunt aanpassen. Vergeet ook niet de afbeelding van het hartje te downloaden. Upload alles op je persoonlijke webruimte.

 

2.3 Tijd om te spelen

Test de volgende scripts uit:
- Maak in Expression Web een webpagina met de naam klok.html. Installeer op deze webpagina een klok. Kies er zelf één. Upload deze webpagina op je persoonlijke webruimte.
- Maak een bestand aan in Expression Web met de naam vakantie.html. Zet op deze webpagina een teller die aftelt totdat de grote vakantie begint. Upload dit bestand op je eigen persoonlijke webruimte.
- Maak in Expression Web een bestand aan met de naam plaatjes.html. Installeer nu zelf een script om op een vlotte manier plaatjes (de vijf plaatjes die je net gedownload hebt) te zien op je site. Kies hiervoor een gepast script van
http://users.skynet.be/javascript/images/afbeeldingen.htm.
Plaats alles op je persoonlijke webruimte.
- Probeer een van de volgende menuscripts uit op:
http://users.skynet.be/javascript/menus/navigatie.htm.

Laat als je klaar bent, al je opdrachten aan mij zien.

 

3 ZOEKROBOTS EN METATAGS

Met metatags kun je zoekrobots (software dat sites opspoort en registreert voor grote zoekmachines zoals Google) laten weten waarover je site gaat en wie de auteurs van een site zijn. Metatags bevinden zich altijd tussen <HEAD> en </HEAD>. Met metatags maak je dus sneller kans om in zoekmachines zoals Google, Altavista, Ilse enzovoort terecht te komen.

Ga naar
http://home.12move.nl/~sh365555/htmlcursus_publiceren.html
om te achterhalen hoe zo'n metatag eruit ziet. Maak zo'n metatag voor de indexpagina van jullie projectwebsite (wees correct met keywords voor jullie site). Post deze metatag hier voor jullie eigen projectwerksite hier.

 

4 STRUCTUUR VAN EEN SITE

Zo lang een site nog klein is, is die vrij overzichtelijk en gemakkelijk te beheren. Zodra je site veel bestanden bevat, kan een duidelijke structuur je helpen om die snel en efficiënt te onderhouden.

Hier zijn een aantal basisprincipes:
1.) Het eerste bestand dat een site opstart, is index.html.

2.) Plaats alle afbeeldingen in eenzelfde map op de root die je images, pics of afbeelding noemt. Zorg er wel voor dat je verwijzingen dan nog kloppen.

Code:
<img src="afbeelding.jpg"> wordt dan bijvoorbeeld <img src="images/afbeelding.jpg">



3.) Zorg ervoor dat je op je computer een map hebt, die exact weerspiegelt wat er op de root staat. Op die manier weet je precies wat er aan de hand is wanneer je problemen moet oplossen. Wis dus steeds oude of foutieve bestanden (bewaar die desnoods ergens anders op je pc in een map archief_site). Begin dus niets met index01.html, index3.htm, enz. wat uiteindelijk weet je totaal niet meer welke nu nog het juiste bestand is.

 

5 SITEMAP

Met een sitemap krijgt een bezoeker direct een handig overzicht van wat er een op een site staat. Door een degelijke sitemap zal je site ook sneller door zoekmachines zoals Google opgepikt worden. De sitemap van een site is een webpagina waarop alle bestanden van een site gelinkt met hun titel staan. Bij grote sites staan deze links dan nog eens gegroepeerd in rubrieken zoals de suntitels van een boek in hoofdstukken. Je kunt een sitemap vergelijken met de inhoudsopgave van een boek.

Ga naar de volgende site om te zien wat een sitemap is.
http://pages.benl.ebay.be/sitemap.html?_trksid=m38


Op jullie eigen site (zie de Lijst van de technische vereisten) moet op de homepage ook een link staan naar zo'n sitemap die jullie voor jullie eigen site moeten maken.

 

6 FEEDBACKFORMULIEREN

Het kan interessant zijn om te weten te komen wat bezoekers van je site vinden. Vele sites hebben daarom een feedbackformulier. Als een bezoeker die invult, komen de gegevens netjes aan in de mailbox van de webmaster. Het voordeel is dat de gegevens netjes gegroepeerd staan en dat je mailadres in de code staat en niet rechtstreeks op het internet.

Je zou natuurlijk ook gewoon een Contacteer ons op je site kunnen zetten met je mailadres erin, maar dan loop je het gevaar dat je mailbox na verloop van tijd overspoeld zal worden door spamberichten. Zoek op het net een paar gratis aanbieders van feedbackformulieren. Vergelijk er drie en post hier welke provider je de beste lijkt en waarom.


7 GASTENBOEKEN

Een gastenboek is een plaats op je site waar bezoekers via een formulier een boodschap kunnen achterlaten. Je kunt zo’n gastenboek zelf schrijven maar ook krijgen bij een gratis aanbieder van gastenboeken in ruil voor wat reclame.

Tik “gratis gastenboek” in op Google. Een goede aanbieder is anders freegb.nl.


8 FOTOALBUM

Voor een leuk fotoalbum zou je kunnen werken met een Javascript. Zie lager voor de uitleg over Javascripts. Zeer gebruiksvriendelijke software is Web Album Generator. Bovendien is die gratis. Met deze software kun je automatisch de foto’s verkleinen en automatisch HTML-pagina’s laten aanmaken. Tune dan wel het CSS-bestandje zodat de lay-out past bij de rest van de site.

Ga naar http://www.ornj.net/webalbum/ om deze software te downloaden.
Je kunt ook met Simple Viewer werken. Dat oogt mooier, maar deze software is wel moeilijker om mee te werken.

Ga naar http://simpleviewer.net/simpleviewer/ om deze software te downloaden.

9 TELLER VOOR EEN SITE

Het is handig om te weten hoeveel bezoek je krijgt op je site. Je kunt dat registreren met een teller. Met sommige tellers kun je zelfs zien welke webpagina’s het populairste zijn en waar je bezoekers vandaan komen.
Tik “gratis teller” in op Google.


Last update 15.05.2014