Website maken
1/7
Zo maak je een website! © Copyright: Roel Grit, auteur Wolters-Noordhoff en Unieboek Dit document mag gratis gebruikt worden bij de volgende boeken van Roel Grit: Informatiemanagement Zo maak je een ondernemingsplan! Zo organiseer je een event! (met Marco Gerritsma) Om deze boeken - uitgegeven door Wolters-Noordhoff - niet te 'dik' en daarmee te duur te maken, is ervoor gekozen dit onderwerp als PDF-bestand beschikbaar te stellen. Meer informatie is te vinden via de website www.roelgrit.wolters.nl
Inhoud 1 Verschillende soorten websites........................................................................................ 2 2 Stappenplan ontwikkelen van een website ...................................................................... 2 Stap 1 Zorg voor een goede voorbereiding................................................................ 2 Stap 2 Maak een ontwerp van de website ................................................................. 3 Stap 3 Bouw de site................................................................................................... 4 Stap 4 Plaats de website op internet.......................................................................... 4 Stap 5 Afhandeling.................................................................................................... 5 3 Vormgeving ..................................................................................................................... 5 4 Gebruik van frames.......................................................................................................... 6 Opdrachten.......................................................................................................................... 7 Dit document is zo opgezet dat het zowel informatie bevat voor iemand die tips wil om een eenvoudige website te maken voor zijn tennisclub als voor een iemand die moet beslissen of zijn bedrijf ‘op internet moet’. Het verdient aanbeveling eerst de paragrafen over internet in hoofdstuk 4 van het boek Informatiemanagement door te lezen. In paragraaf 1 wordt besproken welke soorten websites er zijn. Vervolgens wordt in paragraaf 2 een stappenplan behandeld om te komen tot een internetsite. Verder krijg je tips voor onder andere de vormgeving (paragraaf 3) en tot slot komt het gebruik van frames op een website aan de orde (paragraaf 4).
©Roel Grit
www.roelgrit.nl
Wolters-Noordhoff
Website maken
2/7
1 Verschillende soorten websites Een website bestaat uit een samenhangend aantal webpagina’s met onderlinge verwijzingen, ook wel (hyper)links genoemd. Er zijn verschillende soorten websites met een toenemende ingewikkeldheid. informatieverstrekking aan de klant; interactie met de klant: je hebt via de website contact met je klant; transacties door de klant: de klant bestelt via internet; integratie van de website met de overige informatiesystemen van het eigen bedrijf. Een nadere uitleg over deze punten vind je in paragraaf 3.5.7. Als je nog geen ervaring hebt met het opzetten van een internetsite, begin je met een niet te ingewikkelde website: de hiervoor genoemde punten a of b.
2 Stappenplan ontwikkelen van een website Je hebt vastgesteld dat je een website wilt. Een website is opgebouwd uit webpagina’s die gemaakt zijn met de opmaaktaal HTML (Hypertext Mark-up Language). Om een website minder statisch te maken, kun je HTML eventueel aanvullen met programmeertalen, zoals Java. Als je vanuit de website gegevens wilt raadplegen of wilt opslaan in een database dan heb je ook nog hulpmiddelen nodig als ASP, PHP, SQL of XML. In dit boek wordt verder niet op deze hulpmiddelen ingegaan. Op internet zijn allerlei handleidingen te vinden over deze onderwerpen. Om een website maken kun je de volgende stappen nemen .
Stap 1
Zorg voor een goede voorbereiding
Als je een internetsite wilt opzetten, moet je vooraf bedenken aan welke eisen je site moet voldoen en welke consequenties dat voor je organisatie heeft: Bepaal de doelstelling van de site. Wat wil je met de site bereiken? Wil je iets verkopen of wil je informatie verstrekken? Bepaal de doelgroep. Welke bezoekers wil je proberen te lokken naar je site? Zijn dit kinderen, volwassenen, zakenlieden of een andere specifieke doelgroep? Bepaal de soort website die je wilt ontwikkelen (zie paragraaf 1). Begin niet te ‘groot’. Wie is de opdrachtgever? Wie laat de site maken en wie gaat de ontwikkeling van de site betalen? En wie beoordeelt de kwaliteit van de site als deze klaar is? Registreer zo snel mogelijk een passende domeinnaam voor je site. De domeinnaam – zoals www.mijndomein.nl – kan ook voor een ander interessant zijn. Vroegtijdig registreren is daarom belangrijk. Kies een domeinnaam die bij je past: ze zal immers een onderdeel van je andere reclameactiviteiten vormen. Ook moet je alvast nadenken je nieuwe website binnen de organisatie gebruikt gaat worden: Hoe ga je het beheer regelen van de website? Moeilijk gezegd: wie gaat de content – de inhoud – up-to-date houden? Een website ontwikkelen kan lastig zijn, een website actueel en up-to-date houden is veel moeilijker. Voor het beheren van een grote is het nodig een webmaster als verantwoordelijke te benoemen. Hoe ga je de promotie van de website regelen? Dus: hoe trek je bezoekers naar je website? Welke koppelingen zijn nodig met andere informatiesystemen (bijvoorbeeld je het relatiemanagement informatiesysteem)? Kunnen deze koppelingen wel gemaakt worden? Heb je een interactieve site waar bezoekers kunnen reageren? Wat ga je doen met reacties die binnenkomen? Maak een schatting van het aantal reacties. Stel eens voor dat je honderden
©Roel Grit
www.roelgrit.nl
Wolters-Noordhoff
Website maken
3/7
mailtjes van bezoekers per dag ontvangt! Wie gaat die beantwoorden? Hoe ga je dat organiseren? Als je klant moet kunnen bestellen via de website moet je goed na te denken over de manier van afhandeling van de bestellingen. Als je via de website producten te koop aanbiedt, moet je ervoor zorgen dat betaling door de klant zeker wordt gesteld. Dus hoe weet je zeker dat je je geld ook ontvangt.
Stap 2
Maak een ontwerp van de website
Voordat de site gebouwd gaat worden, moet eerst een ontwerp gemaakt worden. In het volgende worden de belangrijkste aandachtspunten voor dit ontwerp genoemd: Bedenk de stijl en vormgeving. Deze moeten aansluiten bij de gekozen doelgroep of aansluiten bij de huisstijl van je bedrijf. Interview eventueel de doelgroep en kijk op websites van de concurrenten. Laat de opdrachtgever de stijl en vormgeving goedkeuren. In paragraaf 3 wordt verder ingegaan op de vormgeving van een site. Bepaal welke informatie er op de site moet komen en verzamel of schrijf het materiaal dat als inhoud op de site moet worden geplaatst. Bedenk dat bestaand materiaal meestal moet worden aangepast om geschikt te zijn voor internet. Meestal wordt een website ontwikkeld op een pc of een werkstation van een lokaal netwerk en later gekopieerd naar de website. Maak vervolgens een schematisch ontwerp van de website op papier. Voor een eenvoudig voorbeeld hiervan zie figuur 1. Bepaal de wijze van navigatie door de website, dus hoe komt een bezoeker bij elke pagina. In figuur 1 geven de pijltjes (de hyperlinks) de koppelingen tussen de diverse pagina’s aan. De bezoeker moet op een logische wijze bij de informatie kunnen komen die hij wenst. Vaak wordt gebruikgemaakt van frames tezamen met menu’s om door de site te navigeren. In paragraaf 4 wordt het gebruik van frames uitgelegd. Laat de navigatiestructuur door de opdrachtgever goedkeuren. Stel ten slotte vast met welk hulpmiddel de site moet worden gemaakt. Er is een aantal hulpmiddelen beschikbaar, zoals Frontpage en Flash, of zelfs het Windows Kladblok om HTML ‘handmatig’ te programmeren. Sommige HTML-editors zijn gratis van internet te downloaden. Ook zijn er zogenoemde content managementsystemen beschikbaar. Een content managementsysteem (CMS) is een computertoepassing waarmee de inhoud van een website met je browser op een gebruikersvriendelijke manier kan worden beheerd. De gebruiker van een CMS-systeem hoeft geen kennis van HTML te bezitten. Ook hoeft hij zich niet druk te maken over de lay-out van de webpagina’s. Het enige dat moet worden gedaan, is de inhoud (de content) intoetsen. Het CMS genereert automatisch via een voorgedefinieerde lay-out de webpagina’s.
©Roel Grit
www.roelgrit.nl
Wolters-Noordhoff
Website maken
4/7 figuur 1 Structuur van de site
index.html
Homepagina
link naar 1 link naar 2 link naar 3
pagina_1.html
pagina_2.html
pagina_3.html
link naar home
www.extern.nl
link naar het www
link naar 4 link naar 5
Het World Wide Web pagina_4.html
pagina_5.html
link naar home
www.extern.nl
link naar het www
Eigen website
Stap 3
Bouw de site
Na het ontwerp volgt het maken en testen van de site. Je kunt de site het best ontwikkelen op de harde schrijf van een computer. Later kun je de site op internet plaatsen. Laat de volledige site uiteindelijk testen door de opdrachtgever. Vergeet niet een internetprovider te zoeken die je site ‘host’, dat wil zeggen een bedrijf dat je schijfruimte verstrekt en je website via internet bereikbaar maakt. Je kunt dit zelf doen maar dit vereist wel veel technische kennis over onder andere beveiliging.
Stap 4
Plaats de website op internet
Als de site op je harde schijf is gemaakt, kunt je de site kopiëren naar internet en is ze gereed om bezoekers te ontvangen. Hierna volgen nog een paar tips. • Op internet zijn websites bereikbaar via zogenoemde IP-adressen. Je komt ze wel eens tegen als je op internet surft, bijvoorbeeld 121.12.145.232. Aangezien deze nummers voor mensen moeilijk te onthouden zijn, maakt men gebruik van de eerdergenoemde domeinnamen. Op internet zijn tabellen aanwezig waar je domeinnaam wordt vertaald in het juiste IP-adres. Dit gebeurt op een zogenoemde Dynamic Name Server (DNS). Om op internet bereikbaar te zijn, moet je website zijn aangemeld bij een DNS. Meestal kan je provider dat voor je regelen. • Kopieer de website naar internet. Om de webpagina’s met de plaatjes ‘op internet te zetten’, moeten ze als bestand (file) worden gekopieerd naar de echte website. Men noemt dit uploaden. Er zijn speciale programma’s die dit voor je kunnen doen, de zogenaamde FTPprogramma’s. FTP staat voor File Transfer Protocol.
©Roel Grit
www.roelgrit.nl
Wolters-Noordhoff
Website maken
Stap 5
5/7
Afhandeling
Als je site eenmaal op internet aanwezig is, denk dan nog aan het volgende. • Om je site ‘vindbaar’ te maken voor anderen moet je deze aanmelden bij zoekrobots zoals Ilse, Google en Altavista. Om de site sneller door een zoekrobot te laten vinden, kun je zogenoemde metatags in de pagina’s opnemen. Deze zijn onzichtbaar in de browser, maar kunnen zoekrobots helpen je webpagina’s te indexeren. • Zorg ook voor de opleiding van de medewerker die als 'informatieleveranciers' gaan optreden en die de website actueel moeten houden. Het best is het om dat te doen alvorens de website online is.
3 Vormgeving Sommige websites zijn mooi en prettig om te bezoeken, andere zul je ronduit lelijk vinden. Wat de één lelijk vindt, kan een ander juist mooi vinden. Over smaak valt niet te twisten. Hierna toch een aantal tips over vormgeving: Pas de vormgeving aan op je doelgroep. Zet gebruikte hyperlinks op de webpagina’s niet in hoofdsletter, maar in kleine letters. Maak de interne hyperlinks – dus binnen je eigen website – relatief. Dus geen de absolute link zoals http://www.mijnwebsite.nl/pagina.htm gebruiken, maar alleen de verwijzing pagina.htm. De site moet aantrekkelijk en informatief zijn: gebruik bijvoorbeeld plaatjes, geluid en zelfs filmpjes. Deze elementen mogen overigens niet uit een te groot aantal bytes bestaan, anders wordt de downloadtijd op de computer van je bezoeker te groot. Internetgebruikers zijn vaak erg ongeduldig en als je ze laat wachten, zijn ze snel van je site vertrokken. Voorkom te ‘zware pagina’s: de pagina’s mogen niet te veel informatie bevatten. Het mooiste is als informatie op één scherm past. Internetgebruikers klikken grote lappen tekst snel weg. Deel daarom een grote pagina die van het scherm scrollt op in een aantal subpagina’s die bereikbaar zijn via hyperlinks. Zet de belangrijkste informatie boven aan de pagina. Verberg belangrijke links niet onderaan. Bij lange pagina’s: maak onderaan een link naar het begin van de pagina. Zorg voor een eenheid van stijl en een uniforme lay-out van de pagina’s, maak er geen rommeltje van. Zorg voor een duidelijke navigatiestructuur met een menu. Op elke pagina moet je terug kunnen keren naar de homepagina: maak op elke pagina een link naar 'home'. Bijkomend voordeel is dat iemand via een zoekmachine een subpagina vindt, hij éénvoudig naar je homepagina kan klikken. Maak eventueel gebruik van frames: hierbij wordt het beeldscherm van de site in delen gesplitst, die elk een eigen functie hebben (zie paragraaf 4). Verder geven we je de volgende tips: Op internet is veel informatie te vinden over websites. Kijk eens op htm.pagina.nl, internet.pagina.nl, java.pagina.nl, xml.pagina.nl of asp.pagina.nl. Om een goede lay-out te krijgen, kun je heel goed tabellen gebruiken. Als je teksten onder elkaar of naast elkaar wilt plaatsen, kunt je dit het beste doen met een tabel waarbij de ‘dikte’ van de randen van de tabel de waarde 0 heeft (ze zijn dan niet zichtbaar). Met een tabel van één rij en twee kolommen, kun je eenvoudig een plaatje naaste een tekst plaatsen. Geef de datum van de laatste aanpassing op de pagina. Kijk tijdgevoelige informatie en links eens in de twee weken na.
©Roel Grit
www.roelgrit.nl
Wolters-Noordhoff
Website maken
6/7
4 Gebruik van frames Op internet worden vaak frames gebruikt: het beeldscherm van je browser wordt in delen gesplitst – de frames – met elk een eigen functie (zie figuur 2). In deze figuur zie je drie frames: 1. Het bannerframe, dit is de vaste kop voor de website. 2. Het menuframe met hyperlinks naar diverse inhoudelijke pagina’s. 3. Het inhoudframe met de informatieve tekst.
Homepagina (index.html) Bannerframe (banner.html)
Menuframe (menu.html)
Inhoudframe (startframe.html)
Figuur 2
Voorbeeld van frames
Om de drie frames te kunnen tonen, is een vierde pagina nodig. Deze extra pagina – dit is vaak de homepagina met meestal de naam index.html – definieert hoe de drie frames op het scherm worden getoond (de indeling van het scherm) en welke drie pagina’s het eerst moeten worden ingeladen bij het oproepen van de homepagina. Hij wordt in dit geval ook wel ‘frames page’ genoemd: Door op hyperlinks in het menuframe te klikken, worden telkens andere pagina’s in de inhoud geplaatst.
©Roel Grit
www.roelgrit.nl
Wolters-Noordhoff
Website maken
7/7
Opdrachten 1. Zoek op internet een internetwinkel op, overleg eventueel met je docent of begeleider welke winkel je kiest. Je kunt deze opdracht in kleine groepjes uitvoeren en per groepje een presentatie houden. De resultaten van de verschillende internetwinkels kunnen worden vergeleken. a Welke producten worden aangeboden op de site? b Geef een beschrijving van de doelgroep van de site. c Niet alle artikelen zijn geschikt om te verkopen via internet. Waarom kunnen de aangeboden producten wel via internet worden aangeschaft? d Past de stijl en de lay-out van de site bij deze doelgroep? Waarom vindt je dit? e Kunt je vaststellen of de site up-to-date is? Waaruit blijkt dit? f Hoe probeert de homepagina je te verlokken iets te kopen waar je niet naar op zoek was? g Zijn de prijzen van de producten vergelijkbaar met de prijzen in een normale winkel? Licht dit toe. h Wat vindt je van de navigatiestructuur van de site? i Op welke manier kun je een product opzoeken? j Op welke manier informeert de site je over de producten? Verstrekt de site – naast productinformatie – ook achtergrondinformatie die niet direct met het product te maken heeft? k Probeer via een zoekrobot uit te vinden of de internetwinkel op andere sites adverteert of bekend is via andere sites. l Hoe is de procedure van bestellen? Hoe gaat dit als je verschillende artikelen gelijktijdig wilt bestellen? m Hoe kan er betaald worden? Welke beveiligingen zijn genomen? n Kan de status (hoe staat het met de uitlevering) van het bestelde product worden gevolgd? Zo ja, hoe werkt dit? o Wat is de levertijd van de goederen? p Hoe worden de goederen afgeleverd? q Vergelijk de onderzochte site met een site van een concurrent. 2. Maak een internetsite over een onderwerp dat je aanspreekt. Overleg het onderwerp met je trainer of docent. Eisen die worden gesteld aan de site zijn: · gebruik frames zoals in figuur 2 is geschetst; · minimaal vijf inhoudelijke pagina’s met onderlinge verwijzingen; · per pagina minimaal één plaatje; · gebruik een HTML-editor om de pagina’s te maken. Verzamel informatie die op de site moet worden gepresenteerd: a Maak een schematisch ontwerp van je te bouwen site volgens figuur 1. b Bedenk de lay-out en vormgeving. c Maak de site op de harde schijf van je computer. d Kopieer de site naar een USB-stick en controleer op een andere computer of de site nog werkt; hiermee test je of je site foute hyperlinks bevat. Een veelgemaakte fout is dat er absolute hyperlinks zijn gebruikt voor pagina's op de eigen website (zie paragraaf 3). e Plaats je website op internet; er zijn veel providers die gratis ruimte aanbieden om een website te plaatsen. Als je deze opdracht als student moet doen, kun je de website wellicht via het account van je opleiding op internet plaatsen. Informeer hiernaar.
©Roel Grit
www.roelgrit.nl
Wolters-Noordhoff
