Woord vooraf Het bouwen van een website lijkt een eenvoudige klus. U maakt een paar HTML-pagina s, zet deze online en u hebt een website. Ja, u hebt een website, maar de vraag is of u dan een succesvolle website hebt. Een website die beantwoordt aan zowel de verwachtingen van de opdrachtgever als van de doelgroep. Vaak is dit niet het geval. Meestal is dit te wijten aan het van tevoren niet goed nadenken over een website. Hoe we een tot een doelgerichte, aantrekkelijke en functioneel website komen wordt hier uitgelegd.
TITELBLAD VOORWOORD 1. INLEIDING 1.1 Wat is webdesign? p4 1.2 Geschiedenis internet. p4 1.3 Ontwikkeling van webdesign. p4 1.4 Soorten websites. p5-6 2. De 8 stappen in websiteontwikkeling. 2.1 Een analyse van het project. p7 2.2 Het bepalen van de doelgroep. p7 2.3 Het ordenen van de informatie. p7 2.4 Het functioneel ontwerp. p10 2.5 Het grafisch ontwerp. p11 2.6 Het technisch ontwerp. p11 2.7 Het opstellen van het onderhoudsplan. p12 2.8 De promotie van de website. p12 3.De standaarden. 3.1 Webtalen en de verschillen. p13 3.2 Databases. p14 3.3 Domeinnamen. p14 4.In de praktijk. 4.1 Irritaties van websitebezoekers. p15 4.2 Wat gaat er vaak verkeerd? p15 4.3 Usability. p16 SLOT BRONNENLIJST p17 p18
1. Inleiding 1.1 Wat is webdesign? Webdesign is een verzamelnaam voor alles wat met het onwikkelen van websites te maken heeft. Met webdesign wordt vaak zowel het ontwerpen van een site bedoeld als het realiseren ervan. Voor de meeste mensen is de term webdesigner dan ook onduidelijk. Is dat iemand die een site ontwerpt of iemand die een website opbouwt of beide? Wij gebruiken de term webdesigner het liefst voor iemand die de site ontwerpt, de term webdeveloper of ontwikkelaar voor degene die de site realiseert en de term webprogrammeur voor iemand die het programmeerwerk voor zijn rekening neemt. 1.2 Geschiedenis internet De naam internet is afgeleid van interconnected networks. Dit betekent gekoppelde netwerken of netwerk van netwerken. De basis voor het huidige internet is gelegd in de Verenigde Staten ten tijde van de Koude Oorlog. In het jaar 1982 werd de term internet voor het eerst gebruikt. In 1989 vond Tim Berners-Lee het word wide web uit. Als mensen over het internet praten, bedoelen ze vaak het world wide web. Het internet is namelijk een verzameling van diensten zoals het www, e-mail, nieuwsgroepen, ftp, chat, enzovoort. 1.3 Ontwikkeling van webdesign De vormgeving van websites is in de loop van de jaren flink veranderd. De eerste sites waren vooral gericht op het bieden van directe informatie en niet zozeer op het verkopen van iets. In het begin was er technisch gezien ook niet zoveel mogelijk. Hoe ging het er vroeger of beter vijftien jaar geleden eigenlijk aan toe? De eerste websites van bedrijven werden meestal door automatisering ontwikkeld. Daar zat wel iemand die wat HTML kende en even een site in elkaar knutselde. Dit is niet slecht bedoeld maar over het algemeen zagen de sites er niet uit en commercieel gezien was de site niets waard. Later gingen ook reclamebureaus websites maken. Het gevolg was dat sites er misschien beter uitzagen maar technisch klopte er niets van. Soms bestond de site enkel uit grote afbeeldingen en was zelfs de tekst een afbeelding. Ze probeerden de volledige controle over een website te bewaren zoals ze dit konden met drukwerk. Ze wisten echter niet dat websites platformafhankelijk zijn en browserafhankelijk. In die begintijd van het bouwen van een website gebeurde het regelmatig dat brochures van bedrijven bijna letterlijk naar het internet gekopieerd werden, de zogenaamde digitale brochure. De meeste bedrijven werken gelukkig niet meer op deze manier. Ze beseffen het belang van het internet en reserveren hiervoor een budget. Men moet dit goed voorbereid aanpakken en doordacht te werk gaan. Internet is zo n snel medium dat bezoeker direct weg zijn als ze het niet bevalt. Sven De Bruyne - Gioacchino Brucato - Toon Van Rossum p.4
1.4 Verschillende soorten websites Er zijn natuurlijk veel verschillende soorten websites. We kunnen een onderverdeling maken van een tiental soorten. Bedrijfspresentie Nieuws Portaal Zoekmachine Sven De Bruyne - Gioacchino Brucato - Toon Van Rossum p.5
1.4 Verschillende soorten websites Community Educatief Webwinkels Entertainment Intranet en extranet Particulaire homepages Sven De Bruyne - Gioacchino Brucato - Toon Van Rossum p.6
2. De 8 stappen in websiteontwikkeling Als webdesigner komt het er op neer aan de wensen van je klanten te voldoen. Dit vraagt om een grondige aanpak en vooral om goede communicatie. Om een zo goed mogelijk beeld te krijgen van de behoeftes van de klant kunnen we een 8 stappenplan volgen. 2.1 Een analyse van het project Hiervoor kan je vertrekken van een eventueel bestaande site van de klant. Probeer een lijst samen te stellen met sterke en zwakke punten van de huidige site. Let op zaken als navigatie, inhoud, communicatie, interactie, snelheid, ontwerp en uitstraling van de site. Onderzoek ook sites van gelijkaardige projecten, concurrenten of branchegenoten. Bij de analyse hoort ook een verdere uitdieping van het project, het is namelijk belangrijk inzicht te krijgen in het project zelf. Vraag daarom zoveel mogelijk informatie aan de klant over het project. Verder kan er ook een doordachte vragenlijst worden opgesteld die de klant moet invullen. Dit kunnen algemene vragen zijn : Wat zijn de primaire doelstellingen?. Maar ook specifieke zoals: Vind u dat de bezoeker moet kunnen zoeken binnen de website?. Gaat het over een bedrijf dan kan de vragenlijst door meerdere medewerkers ingevuld worden om een algemener beeld te krijgen. Na een analyse van al de verkregen informatie kan er een algemene omschrijving van het project gemaakt worden, dit liefst zo kort mogelijk. Deze kan met de klant besproken worden en geëvalueerd. 2.2 Het bepalen van de doelgroep De doelgroep is de toekomstige gebruikers van de website. Het is belangrijk de doelgroep door en door te kennen. De basis bij dit onderzoek bestaat uit twee eenvoudige vragen : Wie is het? en : Wat komt hij doen?. Deze vragen moeten zo uitgebreid mogelijk beantwoord worden. Achteraf moet een bezoekersprofiel worden opgesteld. Een bezoekersprofiel kan heel specifiek zijn en gaat verder dan de leeftijd en de intresses van de surfers. 2.3 Het ordenen van de informatie Het is die informatie die naar de doelgroep moet worden overgebracht. Zorg ervoor dat al de informatie te vinden is binnen een logische en duidelijke structuur. Er bestaan verschillende manieren om informatie te organiseren. Er is een heel boek geschreven over het organiseren van informatie voor het web. information Architecture for the World Wide Web van Peter Morville. Over het algemeen kan de volgende manieren onderscheiden: Sven De Bruyne - Gioacchino Brucato - Toon Van Rossum p.7
Alfabetisch bij grote hoeveelheden informatie Chronologich op de hompage, nieuwsberichten,... Geografisch bij internationale bedrijven Onderwerp op doelgroep in gespeeld Taak bij nood aan verscheidene taken Doelgroep bij meerdere doelgroepen Sven De Bruyne - Gioacchino Brucato - Toon Van Rossum p.8
Metafoor beelden die spreken Gemengd bij een uitgebreide site Daarna kan er een bepaalde structuur aangebracht worden in de informatie, zo brengt u diepte aan in de informatie.er ontstaat een hiëarchi. Hierdoor krijgt de bezoeker het gevoel dat hij de site begrijpt en dat hij er eenvoudig de weg in kan vinden. Het mag niet zo zijn dat hij zich steeds afvraagt waar welke informatie staat. Als de bezoeker van de site vragen gaat stellen (aan zichzelf) betekent dit dat er niet voldoende is nagedacht over de structuur van de website. Het kan handig zijn om hierbij een schema van de structuur te maken, belangrijk hierbij is dat de structuur niet te breed en niet te diep gaat.als hij te breed is, krijgt de bezoeker geen goed overzicht en moet hij een keuze maken uit te veel onderwerpen als hij te diep gaat moet hij te veel klikken. Te breed Te diep Sven De Bruyne - Gioacchino Brucato - Toon Van Rossum p.9
Nu moet de informatie nog uitgeschreven worden. Een tekst voor het web verschilt van een uitgeprinte tekst. Beeldscherm leest 25% langzamer. Surfers scannen tekst. Surfers hebben minder geduld. Internet is een actief medium. Hieruit volgt dat bijvoorbeeld een uitgebreide welkomstekst op de home pagina niet nodig is. Er kan veel beter gebruikt gemaakt worden van de ruimte door er voor de doelgroep nuttige informatie op te zetten. Vermijd dus overbodige informatie. Zorg voor correcte informatie. Minimaliseer en structureer teksten. Gebruik opsommingen en benadruk belangrijke woorden. Gebruik een juiste schrijfstijl. 2.4 Het functioneel ontwerp Dit alles moet in een functioneel ontwerp gegoten worden. Hierbij hoort een manier van navigeren tussen de verschillende onderdelen die de verschilende teksten bevatten. De belangrijkste navigatiemiddelen zijn menu s zoeken breadcrumps sitemap Een hulpmiddel bij het ontwerpen van een functioneel plan is de pagina opdelen in meerdere gebieden. Dit kan eerst op een grove manier gevolgd door een fijnere versie. Een ander hulpmiddel bij het ontwerpen zijn stroomdiagrammen en storyboards. Opdelen in gebieden Grof Fijn Sven De Bruyne - Gioacchino Brucato - Toon Van Rossum p.10
Stroomdiagram 2.5 Het grafisch ontwerp Het ontwerp is een belangrijk onderdeel,maar de andere stappen mogen zeker niet overgeslagen worden. Een grafisch mooie site waar de informatie moeilijk op te vinden is zal een gebruiker minder lang interesseren dan een grafisch minder mooie site, waar de informatie op een gemakkelijke manier te vinden is. Aan de andere kant bepaald het grafisch ontwerp de sfeer en de indruk van de website. Gelijkaardige bedrijven met een ander imago zullen om een andere sfeer vragen op hun website. Richtlijnen voor gebruiksvriendelijk ontwerpen. Vertrek weer van de doelgroep. Luister naar de gebruiker en overtuig de klant. Usability-test bij verschillende mensen. Laat de techniek ondergeschikt zijn aan de gebruikservaring. Grijp regelmatig terug naar pen, papier en kleurpotloden. Maak regelmatig prototypes tijdens het ontwerpen. 2.6 Het technisch ontwerp Dit bestaat uit de technische keuzes die u moet maken. Het juiste formaat kiezen voor de verschillende afbeeldingen, de keuze van webtalen, het gebruik van animatie en hoe deze te maken. Bij het gebruik van muziekfragmenten en videofilmpjes moet je er wel op letten dat de gebuiker er zelf voor moet kunnen kiezen om ze te starten en stoppen. Hij mag zich niet verplicht voelen om ze te beluisteren te bekijken. De technische beslissingen zijn meestal logisch en vloeien voort uit eerder genomen grafische of functionele beslissingen. Sven De Bruyne - Gioacchino Brucato - Toon Van Rossum p.11
2.7 Het opstellen van een onderhoudsplan Hier wordt een manier gezocht waarop de site onderhouden gaat worden. Eerst en vooral moet er gekozen worden wie het onderhoud gaat doen. Meestal word het onderhouden uitbesteed aan de ontwerper. De voordelen zijn dat er profesioneel onderhoud gedaan word. De nadelen dat de klant zich minder betrokken gaat voelen bij zijn website. Als de klant het onderhouden uitbesteed aan de webdesigner moet er een plan opgesteld worden, niet alle pagina s moeten met de zelfde regelmaar aangepast worden. Bespreek met welke frequentie welke pagina s worden onderhouden en met welke regelmaat de hele site wordt doorlopen. Gaat de klant het zelf doen moet er een keuze gemaakt worden tussen HTML kent de klant voldoende html? HTML-editor Het aankopen van een visueel opmaak programma. CMS Content Management Systeem. Dit is een manier om op eenvoudige wijze de inhoud van een website te wijzigen 2.8 De promotie van de website Bij websitepromotie maken we onderscheid tussen traditionele promotiemiddelen en internetpromotiemiddelen. Bij de eerste soort horen naamkaartjesen,brochures, relatiegeschenken en briefpapier denk bij de 2de soort aan een goed internetadres, het aanmelden bij zoekmachines en het hyperlinks leggen van en naar de site. Sven De Bruyne - Gioacchino Brucato - Toon Van Rossum p.12
3. Standaarden 3.1 Webtalen en verschillen. Webtalen zijn er in alle soorten en vormen. Je hebt webtalen voor statische of dynamische websites, opmaaktalen, noem maar op. Statische websites zijn websites waarbij de gebruiker een bepaalde hoeveelheid informatie aangeboden krijgt, maar zelf geen informatie kan versturen. Er is geen vorm van interactiviteit. Dynamische websites zijn vaak gekoppeld aan een database waardoor de gebruiker veel specifieker gegevens kan opvragen of gegevens naar de database versturen. We bespreken kort de vier meest aanwezige webtalen van vandaag. HTML is de meest voorkomende taal om websites te maken. De html taal heeft sinds 1990 een gigantische evolutie doorgemaakt. Het is een relatief eenvoudige opmaaktaal. De code kan in een basis tekstverwerker getypt worden en opgeslaan worden als een html bestand. De laatste jaren wordt html meer en meer ondersteund door CSS, een webtaal speciaal bedoeld om de opmaak van html pagina s te verzorgen. Volgens de huidige webstandaarden moet alle opmaak van websites via CSS gebeuren. Op die manier zijn websites veel compatibeler op andere platformen of in andere browsers, en het maakt het de ontwikkelaar ook een pak eenvoudiger. Wanneer je bijvoorbeeld de achtergrondkleur van je website wil aanpassen moet je dit slechts éénmalig aanpassen in het css bestand (in plaats van op elke html pagina apart). Javascript is een scripttaal die is ontwikkeld door Netscape en wordt gebruikt om webpagina s interactiever, dynamischer en intelligenter te maken. Veel websites maken tegenwoordig gebruik van Javascript. Een taal die speciaal ontwikkeld is voor het gebruik in dynamische websites is PHP. PHP staat voor Hypertext Preprocessor. Het is een serverside scriptingtaal waarmee krachtige webtoepassingen gemaakt kunnen worden zoals webwinkeld, forums, gastenboeken, Omdat PHP uiteindelijk gewone html code produceert heeft de bezoeker geen extra software nodig dan voor een gewone html website. Sven De Bruyne - Gioacchino Brucato - Toon Van Rossum p.13
3.2 Databases Heel veel websites zijn tegenwoordig gelinkt aan een database. Op deze manier kan informatie uit de database getoond worden op de website of kan informatie die de bezoeker invult opgeslaan worden in de database. Deze soorten websites worden ook wel dynamische websites genoemd, in tegenstelling tot statische websites die enkel gebruik maken van html en css. Enkele vaak voorkomende database talen: Acces, SQL Server, MySQL, Oracle, Wanneer heb je een database nodig? Als de info die je op je website wil plaatsen al ergens in een database staat, is het en logische stap om deze info te houden en ze beschikbaar te maken via een databasekoppeling. Als je op je website vaak herhalende informatie hebt die op verschillende paginas kan terugkomen, hoef je enkel de database aan te passen om de info over de gehele website up-to-date te houden. Informatie die regelmatig verandert, kan je ook beter in een database stoppen. Als je meer dynamiek in je website wil door niet steeds hetzelfde te tonen, kan je door middel van een database bijvoorbeeld elke keer een andere afbeelding tevoorschijn laten komen. 3.3 Domeinnamen Elke website heeft zijn eigen adres, ook wel URL genoemd. Zo n adres is steeds gekoppeld aan een uniek ip-adres. Door het Domain Name System (DNS) kan aan elk ip-adres een URL gekoppeld worden en hoef je dus niet de hele reeks nummers in voeren om op een website terecht te komen. Voorbeeld: http://www.arteveldehs.be http:// is de verwijzing naar het Hypertext Transfer Protocol, dat duidelijk maakt dat het om een website gaat. De laatste jaren mag je in zowat alle browsers de http:// eigenlijk laten vallen, gezien de browser er automatisch vanuit gaat dat het om een website gaat. www staat voor world wide web en wijst eigenlijk door naar de naam van de server waar de website zich op bevindt. Arteveldehs is de deomainnaam die je laat registeren om te koppelen aan een bepaald ip adres. Be is het Top Level Domain, dit wijst meestal op de landscode. Sven De Bruyne - Gioacchino Brucato - Toon Van Rossum p.14
4. In de praktijk 4.1 Irritaties van websitebezoekers Te lang moeten wachten vooraleer de website geladen is is nooit goed. Onderzoek heeft uitgewezen dat het grootste deel van de internetgebruikers maximum 7 seconden wacht alvorens weg te klikken. Er moet dus steeds voor gezorgd worden dat de website zo efficient mogelijk ontworpen en gecodeerd is. Zeer vervelend voor bezoekers zijn websites waar de vensters fullscreen geopend worden. Dit wil zeggen dat het browservenster automatisch de volledige grootte van het scherm in beslag neemt. Een gouden regel is: moei je nooit met de instellingen van de gebruiker. Overbodige popupvensters moeten kost wat kost vermeden worden. De gebruiker wil zelf bepalen wanneer hij iets in een nieuw venster wil openen of niet. Indien je er niet omheen kan, is het best de gebruiker te waarschuwen dat er bij het klikken een popup tevoorschijn gaat komen. Hyperlinks die niet werken zijn zeer vervelend. Niet alleen wanneer de site naar waar de link verwijst niet meer bestaat, maar ook links waar niets gebeurt bij het aanklikken kunnen door een foute codering voorkomen. Een grondige testfase van de website kan veel van deze fouten voorkomen. Nog steeds worden de bezoekers op sommige websites verplichtingen opgelegd zoals deze website dient bekeken te worden in Internet Explorer +6.0. De bezoeker gebruikt zijn voorkeursbrowser en dus moet er voor gezorgd worden dat websites zo goed mogelijk browseronafhankelijk zijn. 4.2 Wat gaat er vaak verkeerd? De website wordt gebruikt als digitale folder, onder het mom van als we onze papieren brochure inscannen en online zetten hebben we ook een website. Internet is echter een heel ander medium dan drukwerk. Het motto beter iets dan niets gaan voor internet zeker niet op. De bedrijfsstructuur kan niet gebruikt worden om een website te structureren. Voor de medewerkers van het bedrijf is dit allemaal zeer logisch, maar een buitenstaander weet helemaal niet hoe het bedrijf opgebouwd is, en zal dus niet wegwijs geraken op de website. Binnen een bedrijf dienen ook steeds alle medewerkers op de hoogte te zijn van het bestaan van de website. Sven De Bruyne - Gioacchino Brucato - Toon Van Rossum p.15
Er wordt veel te veel of veel te weinig geld uitgegeven aan de website. Om tot een goed eindresultaat te komen moet vooraf goed worden nagedacht over wat de mogelijkheden en de technische specificaties van de website moeten zijn. Er wordt vergeten dat het hebben en updaten van een site ook tijd en moeite vergt. Men moet hier actief mee bezig blijven. Een website is nooit af De website wordt gemaakt zonder voorafgaand plan te hebben bedacht. Over de uitwerking van zo n plan gaan we niet uitweiden, maar het speelt zeker een grote rol als je wil dat de bezoekers je website positief ervaren. 4.3 Usability Usability is tegenwoordig een veelbesproken begrip. Usability wil zeggen dat de bezoeker een bepaalde taak kan volbrengen op een voor hem aangename manier. Deze taak kan bijvoorbeeld een aankoop via internet of een online reisboeking zijn. Onder een aangename manier verstaan we dan dat de bezoeker binnen een korte tijdsspanne zijn doel kan bereiken en dat hij niet geirriteerd of gefrustreerd raakt. Zowel grafisch als technisch moet hiermee rekening gehouden worden. Sven De Bruyne - Gioacchino Brucato - Toon Van Rossum p.16
Slot Het is dus duidelijk dat een goed werkende website op een professionele manier moet worden uitgewerkt. Iedereen kan achter de computer gaan zitten en aan een website beginnen knutselen maar dit zal niet tot een professioneel, goed werkende website leiden. Het is pas als iemand met de nodige kennis aan het project begint, dit ook in een goed eindproduct resulteert. Sven De Bruyne - Gioacchino Brucato - Toon Van Rossum p.16
Bronnenlijst Artikels NET,De 10 belangrijkste HTML-geboden, jaargang,1995,nr.12, pag.40-43, NET, Dynamic HTML : binnen twee uur je eigen Webpagina,jaargang 5,nr1, pag46-51, MUL, HTML 3.0, een nieuwe Internet-standaard, jaargang 1996, nr 1, pag 29-30, INS, HTML : verleden en toekomst, jaargang 1998 ;nr 13, pag 66-70, UITGEVER Eindwerken en scripties C. Opsomer,Eindwerk : Vernieuwingen in Html : vergeleken in Netscape en internet Explorer 4,Arteveldehs,1997-1998 S. Martelmans,Scriptie: De evolutie van internet tot multimedia-instrument, Artevelde hs,1995-1996 Boeken J. Pence, How to do everything with HTML & XHTML.Osborne: MCGRAW- HILL,2003. L. Aronson, HTML 3 MANUAL OF STYLE. INDIANAPOLIS : MACMILLAN COM- PUTER PUBLISHING USA,1995 P. Kassenaar, Modern redesign met XHTML, CSS en XML. Den Haag : ACA- DEMIC SERVICE, 2004 P. Kentie, Webdesign in de praktijk: inclusief uitgebreide informatie over Flash, CSS, JavaScript, XML, PHP, DHTML en online advertising. Reading, Massachusetts : ADDISON WESLEY, 2002 L. Arry Aronson, HTML MAnual of Style :clear, concise reference for html Bookshelf Category, 1994 H. van den Elzen, Webdesign : van concept tot realisatie.design ;academic service,2003 Sven De Bruyne - Gioacchino Brucato - Toon Van Rossum p.17