Cursus: maak uw eigen website (5)

Een plaatje zegt meer dan duizend woorden. In dit vijfde deel van deze webcursus gaan we daarom in op het gebruik van beeld en animaties in uw website. Plaatjes geven uw website niet alleen een aantrekkelijk uiterlijk. Ze helpen, als het goed is, hem overzichtelijker te maken.

Er zijn verschillende manieren om plaatjes op een website te gebruiken. Ze kunnen van pas komen als illustratie van uw verhaal, als logo boven uw website of in de vorm van knoppen. Kijkt u maar eens op de homepage van Computer Idee: daar ziet u prominent in het midden twee plaatjes bij de onderdelen Sneltip en Workshop. U kunt erop klikken om naar de sneltips en workshops te gaan.

Als u wel eens een digitale foto per e-mail hebt verstuurd, weet u dat die plaatjes enorme afmetingen kunnen hebben. Wellicht moest u de bestandsgrootte zelfs eerst aanpassen, voordat u het bestand überhaupt kon versturen. Hoewel de meeste bezoekers van uw website een breedbandaansluiting zullen hebben (in juli 2007 was dat 33,1 procent van de Nederlandse huishoudens), betekent dat niet dat u maar uw gang kunt gaan met afbeeldingen. Hoe langer het duurt om uw website te laden, hoe groter de kans dat iemand wordt afgeleid, ondertussen iets anders gaat doen en er uiteindelijk er maar vanaf ziet om naar uw website te gaan.

Er zijn verschillende manieren om afbeeldingen te verkleinen. Een ervan is door de fysieke afmetingen te verkleinen: het aantal pixels in de lengte en de breedte. Ook kunt u de resolutie (gemeten in dots per inch of dpi) verlagen: voor drukwerk hebt u 200 of 300 dpi nodig, voor het web is 72 dpi voldoende. Tot slot kunt u de foto opslaan in een compactere indeling, wat soms tot kwaliteitsverlies leidt. Wat u zoekt is de beste balans tussen kwaliteit en bestandsgrootte. De meeste fotobewerkingsprogramma's, waaronder Adobe Photoshop (Elements) en Paint Shop Pro bevatten een menuoptie waarmee u foto's eenvoudig optimaliseert voor het web. U kunt daarbij meestal in een venster het origineel en het eindresultaat naast elkaar bekijken; zo ziet u meteen het effect van verschillende compressie-instellingen. Vergeet ook niet uw afbeelding bij te snijden. Foto's bevatten vaak oninteressante randen, die afleiden van het eigenlijke onderwerp. Ook zit u bij foto's op het web niet vast aan de verhouding 4:3. Vierkanten en heel smalle stroken waarbij u inzoomt op een detail, maken de foto spannender.

Er zijn twee soorten afbeeldingsbestanden: raster en vector. Ze verschillen vooral in de manier waarop ze informatie opbergen. Rasterplaatjes, ook wel bitmaps genoemd, bevatten informatie over elke pixel in een afbeelding. Verandert u de afmetingen van een rasterplaatje, dan zullen er pixels wegvallen of moeten er extra pixels bij worden 'verzonnen'. Dat is niet het geval bij vectorplaatjes: zij beschrijven de afbeelding in een wiskundige vergelijking. Als u de afmetingen verandert, wordt het plaatje opnieuw getekend zonder enig kwaliteitsverlies. Op websites worden eigenlijk alleen rasterplaatjes gebruikt.

In een eerdere aflevering van deze webcursus stelden we Nvu aan u voor, als betaalbaar alternatief voor Adobe Dreamweaver. Een lezer wees ons er terecht op dat ook KompoZer verkrijgbaar is, een webeditor die van Nvu is afgeleid. Het is niet de opvolger van Nvu, maar kan worden gezien als een onofficiële variant waarin een aantal bugs zijn opgelost, om de periode tot een update van Nvu te overbruggen. Helaas is er sinds 2005 geen nieuwe versie van Nvu meer uitgebracht. Downloaden kan hier.

Voor afbeeldingen op een webpagina zijn drie bestandstypen van belang: jpg, png en gif. Welke van de drie is het meest geschikt? Kort gezegd: bij foto's kiest u jpg en bij logo's, diagrammen en andere illustraties kiest u gif. In onze voorbeeldwebsite hebben we voor de foto van de tomaten een jpg gebruikt, terwijl de achtergrondafbeelding (het 'behang') bestaat uit een steeds herhalende illustratie in gif.

Jpg ondersteunt een kleurendiepte van 24 bits en instelbare compressie, die hoog kan oplopen. Daardoor is dit het bestandstype bij uitstek voor foto's en kleurverlopen. Jpg kent 'lossy' compressie: hoe sterker de compressie, des te kleiner wordt het bestand. Maar bij sterkere compressie gaan ook meer details verloren.

Gif slaat data op met 'lossless' compressie. Hier gaat dus geen details verloren, maar gif heeft als nadeel dat het alleen 8-bits afbeeldingen ondersteunt. Dit betekent dat u maximaal 256 kleuren kunt gebruiken in een gifbestand. Daarom is gif niet geschikt voor foto's, maar alleen voor diagrammen, logo's, tekeningen en andere grafische afbeeldingen. Een andere toepassing is tekst: in tegenstelling tot jpg kunt u met een gif een tekst scherp weergeven. Als u een logo met daarin tekst hebt, pas die dan op de site toe als gif.

Er zijn nog twee gebieden waarop gif uitblinkt: animatie en transparantie. Met een 'animated gif' kunt u een klein, bewegend plaatje in uw website opnemen. Transparantie houdt in dat u één kleur als doorzichtig kunt aanmerken. Wanneer uw website een afwijkende achtergrondkleur of -patroon heeft, kunt u zorgen dat er geen storend wit vlak rondom de afbeelding aanwezig is. Met transparantie wordt de afbeelding naadloos in uw website opgenomen, want de achtergrondkleur schijnt er doorheen.

Png combineert een aantal eigenschappen van jpg en gif. Png heeft een kleurendiepte van 24 bits, zodat het geschikt is voor foto's. Door de lossless compressie zijn de bestanden echter groter dan bij jpg. Vergeleken met gif biedt png een sterkere compressie en meer mogelijkheden voor transparantie. Er staat echter ook een bezwaar tegenover: omdat niet alle browsers de mogelijkheden van png ondersteunen zult u eerst grondig moeten testen.

Twee bestandsformaten die u op het web nooit moet gebruiken zijn tif en bmp, omdat ze bestanden opleveren die te groot zijn.

De meest eenvoudige manier om een adreskaartje op uw website weer te geven is een schermafbeelding van uw browser. Ga naar maps.google.com, zoek uw adres op en maak een screenshot. Dat kunt u net als elk ander plaatje op uw website plaatsen. Het wordt lastiger wanneer u een aangepast kaartje wilt, bijvoorbeeld een kaart met alle locaties van uw winkelimperium. Een goed startpunt om ideeën te krijgen is Google Maps Mania. Op Programmable Web vindt u een enorme lijst mashups die met Google Maps zijn gemaakt. Hierbij zijn gegevens uit meerdere bronnen met elkaar gecombineerd. Wilt u zelf zo'n mashup maken, dan zult u een gratis developer key voor Google Maps moeten aanvragen. U kunt dit hier doen.

Op internet vindt u afbeeldingen die u vrij mag gebruiken. U hoeft maar in Google Afbeeldingen een zoekterm in te tikken en u wordt overspoeld. Maar pas op met auteursrecht! Het is niet voldoende om bij een foto simpelweg 'Copyright' en de naam van de fotograaf te zetten. Voor alle afbeeldingen die u gebruikt en die niet door uzelf zijn gemaakt, zult u toestemming moeten vragen. Er zijn een twee mogelijkheden om problemen te voorkomen:

Tip 1: Gebruik foto's die onder de Creative Commons-licentie zijn uitgebracht. Bij veel foto's op Flickr.com is dat het geval. Afhankelijk van de gekozen licentie mag u de foto's al dan niet op commerciële websites gebruiken, als u de originele maker maar wel de 'credits' geeft. Kijk op flickr.com/creativecommons/ en op http://www.creativecommons.nl

Tip 2: Koop uw foto's. Kopen? Jazeker! Voor een foto bij een nieuwsberichtje zult u niet zo snel geld uitgeven, maar voor die ene blikvanger op uw homepage hebt u vast wel een klein bedrag over. Bij websites als iStockphoto koopt u foto's vanaf één dollar per stuk. Het zijn prachtige, professionele foto's zonder het risico dat u tegen copyrightproblemen aanloopt.

In uw website hebt u niet altijd de ruimte om foto's in volledige grootte te tonen. Uw bezoekers kunnen op een foto klikken om een grotere versie te zien; meestal opent daarbij een tweede browservenster of de bezoeker wordt doorgestuurd naar een andere webpagina. Een veel mooiere oplossing die de laatste tijd veel wordt gebruikt, is de zogeheten lightbox. Daarbij wordt uw webpagina tijdelijk gedimd en verschijnt er een extra laag met de foto, bovenop de pagina. De gebruiker komt na het bekijken van de foto op dezelfde webpagina terug. Een lightbox lijkt op een popup, maar geeft door het animeren bij het laden een veel mooier effect. Een lightbox maakt gebruik van eenvoudige JavaScript. Op www.huddletogether.com/projects/lightbox vindt u de benodigde code. Sla de bestanden lightbox.css en lightbox.js op in de submap waarin u ook uw andere css-bestanden bewaart. De bestanden overlay.png en loading.gif slaat u op in de map met afbeeldingen (meestal /images).

Daarna doet u het volgende:

1. Maak een html-bestand met daarin een thumbnail oftewel miniatuurfoto van uw foto('s).

2. Neem in de header van het html-bestand (dus tussen <head> en </head>) de volgende code op, zodat de pagina weet waar de stylesheet voor de lightbox zich bevindt:

<link rel="stylesheet" rev="stylesheet" href="css/lightbox.css" type="text/css" media="screen" charset="utf-8">

3. Zorg in de header van uw html-bestand ook voor een verwijzing naar het JavaScript-bestand lightbox.js.

<script src="css/lightbox.js" type="text/javascript" language="Javascript1.2" charset="utf-8"></script>

4. Blader in het html-bestand naar uw thumbnail. Voor afbeeldingen gebruikt u een img-element waarop de bezoeker kan klikken. In het a-element neemt u het hieronder aangegeven rel-attribuut op.

<a href="images/plaatje.jpg" rel="lightbox" title="Dit is het bijschrift"><img src="images/plaatje_klein.jpg" mce_src="images/plaatje_klein.jpg"></a>

5. Sla uw html-bestand op en test het.

De maker van dit script heeft inmiddels een verbeterde versie gemaakt met nog mooiere animaties. Dit kunt u vinden op www.huddletogether.com/projects/lightbox2/.

Er zijn allerlei variaties op deze stijlwisselaar mogelijk. Zo kunt u ervoor kiezen om een alternatieve stylesheet te maken met grote letters en hoog contrast, speciaal voor slechtzienden. Laten we eens kijken hoe een website zoals SeniorwebSeniorweb.nl dat heeft gedaan. Links bovenin de website ziet u drie letters A in verschillende grootte. Ook ziet u de mogelijkheid om de website in zwart-wit te tonen. In werkelijkheid gaat het hier om een versie in grijstinten, met meer contrast dan de standaardversie.

Gaat u met uw muis over de drie letters A, dan ziet u onderin uw browservenster dat er drie stylesheets zijn gebruikt: Normal, Medium en Large. Als u in de html-code van de website gaat speuren (in Internet Explorer doet u dit via Beeld, Bron) zult u ontdekken dat de stylesheet voor extra grote letters op de volgende locatie te vinden is: www.seniorweb.nl/style/fontsize_large.css. Opent u deze url in uw browser, dan zult u zien dat de webmaster iets slims heeft gedaan: hij heeft geen drie uitgebreide stylesheets gemaakt, maar de stylesheet fontsize_large.css pakt gewoon de complete inhoud van de standaard stylesheet default.css en maakt met de opdracht font-size: xx-large alleen de letters iets groter.

In de vorige aflevering hebben we uitgelegd hoe u JavaScript gebruikt. U kunt vanuit uw webpagina verwijzen naar een los JavaScript-bestand (waarvan de naam eindigt op .js). Met behulp van een stijlwisselaar geeft u heel gemakkelijk uw website meerdere achtergrondkleuren of stijlen. De bezoeker kan zelf kiezen welke kleur hem of haar het best bevalt. Doorloop daarvoor de stappen die hieronder beschreven staan.

1. Download het bestand stijlwisselaar.js via deze website, en wel hier.

2. Zorg ervoor dat tussen <head> en </head> in uw html-pagina de volgende coderegel is opgenomen:

<script type="text/javascript" src="stijlwisselaar.js" </script>

3. Maak verschillende stylesheets. Dit houdt in dat u uw css-bestand meermalen kopieert, waarbij u in elk ervan de kleuren en/of het lettertype aanpast.

4. Verwijs op de gebruikelijke manier naar uw standaard-stylesheet. Dit houdt in dat tussen <head> en </head> in uw html-pagina de volgende regel code is opgenomen:

<link rel="stylesheet" type="text/css" href="style.css"  title="standaard">

Hierbij gaan we er vanuit dat u uw standaard stylesheet de naam style.css hebt gegeven. Nu moet u nog aangeven dat u een aantal alternatieve stylesheets hebt. Voor elke stylesheet neemt u achter de zojuist toegevoegde code de volgende regel op:

<link rel="alternate stylesheet" type="text/css" href="style-groen.css"  title="groen">

We gaan er hierbij vanuit dat u uw groene stylesheet de naam style-groen.css hebt gegeven.

5. De laatste stap is dat u in uw html-pagina linkjes maakt waarop een bezoeker kan klikken om een andere kleur of een ander thema in te stellen. Dit doet u als volgt:

<a href="/" onclick="setActiveStyleSheet(’groen’); return false;">Groen</a>

In plaats van 'groen' vult u natuurlijk de titel in die u eerder hebt gedefinieerd. De tekst van het linkje zelf (in dit geval: Groen) is natuurlijk ook afhankelijk van uw gekozen kleur. Geef uw bezoeker ook altijd de mogelijkheid om weer terug te keren naar de standaard-stylesheet:

<a href="/" onclick="setActiveStyleSheet(’standaard’); return false;">Standaard</a>

Dit werkt uiteraard alleen als u uw standaard stylesheet in stap 4 de titel 'standaard' hebt gegeven.

In deel 6 gaan we het hebben over het trekken van bezoekers. Een mooie site is leuk, maar er moeten natuurlijk wel mensen komen kijken. Met onze tips moet dat lukken!

Klik hier om naar deel 1 van deze cursus te gaan.

Klik hier om naar deel 2 van deze cursus te gaan.

Klik hier om naar deel 3 van deze cursus te gaan.

Klik hier om naar deel 4 van deze cursus te gaan.

Bestel dan nu de workshopgids Zelf Websites Bouwen & Onderhouden. Deze gids bevat talloze tips, verrassende ideeën en stap-voor-stap workshops voor iedereen die voor het eerst een website bouwt en voor iedereen die na eerdere pogingen de draad weer op wil pakken. Ook besteedt de gids uitgebreid aandacht aan de promotie en mogelijkheden om met uw site geld te verdienen. Bestellen? Klik dan hier.