Faculteit Toegepaste Wetenschappen

Vakgroep Elektronica en Informatiesystemen

Ontwerpen van een professionele website voor de firma Beddeleem

Promotor: Prof. dr. R. Vandewalle Verhandeling voorgelegd aan de Faculteit Toegepaste Wetenschappen voor het verkrijgen van de graad van gediplomeerde in de aanvullende studies van informatica, door Dieter De Loof

Academiejaar 2000-2001

i

Woord vooraf

Om in de lijn te blijven van mijn vorige studies Industrieel Bouwkunde ben ik op zoek gegaan naar een bouwkundige firma die mij een onderwerp voor mijn afstudeerwerk kon bezorgen. Ik heb enkele bouwkundige firma’s gecontacteerd en zo ben ik terecht gekomen bij de firma Beddeleem, die toen nog altijd niet beschikte over een website. Dit leidde tot het feit dat ik het ontwerpen van een site voor een bouwkundige firma als onderwerp voor mijn afstudeerwerk heb gekozen. Bij het lezen van dit verslag is het aan te raden uw computer er bij te nemen en te surfen naar http://messiaen.elis.rug.ac.be/beddeleem of in de toekomst naar www.beddeleem.be , want op deze URL moet de website uiteindelijk komen te staan. Mijn dank gaat uit naar mijn promotor Prof. dr. R. Vandewalle en begeleiders Boris Rogge en Joeri Christiaens voor de steun gedurende de ganse ontwikkeling van mijn scriptie. Natuurlijk wil ik ook de firma Beddeleem bedanken, vooornameljk Peter Beddeleem die zware weken achter de rug heeft om mij te blijven voeden van teksten en fotomateriaal. Ik geef de toestemming tot het beschikbaar-stellen van deze eindverhandeling met het oog op het inkijken en het kopiëren van delen ervan voor persoonlijk gebruik. Elk ander gebruik valt onder de beperkingen van het auteursrecht. mei 2001,

ii

Overzicht

Naam student: Dieter De Loof Titel scriptie: Ontwikkeling website Beddeleem Universiteit : Universiteit Gent Faculteit: Faculteit Toegepaste Wetenschappen Vakgroep: Elektronica en Informatiesystemen(ELIS) Promotor: Prof. dr. R. Vandewalle Begeleiders: Boris Rogge, Joeri Christiaens Academiejaar: 2000-2001 Scriptie ingediend tot het behalen van de academische graad van gediplomeerde in de aanvullende studies van informatica Samenvatting: Dit afstudeerwerk gaat over het ontwikkelen van een professionele website, meer bepaald die van de bouwkundige firma Beddeleem. Er wordt gesproken over de vereisten van een goede website. Ook worden enkele eenvoudige technieken besproken die er voor zorgen dat uw site nog net dat beetje professioneler wordt. In mijn conclusie beoordeel ik de verschillende softwareprogramma’s die ik tijdens mijn afstudeerwerk gebruik hebt. Trefwoorden: website, Beddeleem, bouwkundige firma

iii

Inhoudsopgave

Hoofdstuk 1 Inleiding 1

Hoofdstuk 2 Het maken van een website 3

2.1 Een goede website .......................................................................................... 3 2.2 HTML en Frontpage ...................................................................................... 5

2.2.1 HTML ..................................................................................................... 5 2.2.2 Elementen ............................................................................................... 5 2.2.3 Attributen ................................................................................................ 6 2.2.3 Opbouw HTML-document ..................................................................... 6

2.3 Cascading Style sheets ................................................................................... 8 2.4 Scripting ......................................................................................................... 9 2.5 Active server pages ...................................................................................... 11

2.5.1 Active server pages basics .................................................................... 11 2.5.2 Het maken van een databaseconnectie ................................................. 12 2.5.3 Inlezen van tekstbestanden ................................................................... 13 2.5.3 Voordelen van ASP .............................................................................. 14

2.6 Grafische webpaginas ontwerpen ................................................................ 14

Hoofdstuk 2 Mijn website 15

3.1 Een goede website ........................................................................................ 17 3.2 HTML en Frontpage .................................................................................... 19

3.2.1 Zoek de website .................................................................................... 19 3.2.2 Frames ................................................................................................... 20

3.3 Cascading Style sheets ................................................................................. 22 3.4 Scripting ....................................................................................................... 24

3.2.1 Vorige en print ...................................................................................... 24 3.2.2 Foto's beshermen .................................................................................. 24 3.2.2 Frames ................................................................................................... 25

iv

3.5 Active server pages ...................................................................................... 27 3.6 Grafische aspect website .............................................................................. 31 3.6 Speciale effecten .......................................................................................... 32

Hoofdstuk 4 Besluit 36

Literatuurlijst 38

Boeken, artikels en cusussen .............................................................................. 37 Internetsites ........................................................................................................ 38

1

Hoofdstuk 1 Inleiding

Beddeleem is een afwerkingsbouwbedrijf dat gespecialiseerd is in verplaatsbare en vaste scheidingswanden, valse plafonds en verhoogde vloeren. Het bedrijf is gevestigd in Sint-Denijs Westrem en beschikt over meer dan 50 jaar ervaring. Om het bedrijf meer uitstraling te geven werd beslist om een website te maken. Het is in dit kader dat mijn eindwerk tot stand kwam. Mijn eindwerk bestaat erin een professionele website te ontwerpen van de firma Beddeleem. Het verslag is opgebouwd uit twee grote delen. In hoofdstuk 2 wordt de theorie besproken die in de website gebruikt zal worden. Vervolgens wordt in hoofdstuk 3 deze theorie toegepast op mijn website. Zo ga ik in het eerste punt van hoofdstuk 2 na aan welke factoren een goede website moet voldoen. Duidelijke koppen en korte samenvattingen van de tekst zijn in eerste instantie heel belangrijk. Ook moet de navigatie goed gestructureerd en vooral praktisch zijn voor de gebruiker. En als laatste moet genoeg aandacht geschonken worden aan de structuurelementen en de lay-out van de site. Een tweede punt van de theoretische bespreking is de HTML-taal waarmee documenten op het world wide web kunnen bekeken worden. Hierin wordt de basis van deze taal wat nader besproken. Een volgende punt gaat over Cascading Style Sheets (CSS). Dit is een nieuwe taal die het mogelijk maakt een bepaalde style aan HTML-elementen toe te kennen. Vervolgens wordt in punt 4 uitgelegd hoe men Javascripts eenvoudig in de website kan implementeren.

2

Mijn website moet interactief zijn, zo zal de site een invulformulier bevatten waar de bezoekers terecht kunnen met opmerkingen, vragen… Punt 5 bespreekt de Active Server Pages (ASP) techniek die dit mogelijk maakt. De ingevulde velden van het formulier worden dan in een databank opgeslaan. Deze velden worden vervolgens opgeroepen in de bevestigingspagina (hier kan de surfer z’n input controleren en bevestigen) en de resultatenpagina (deze pagina wordt beveiligd en is enkel zichtbaar voor de firma Beddeleem zodat deze een gepast antwoord kan terugsturen). Een laatste punt heeft het kort over het verwerken van foto’s en het maken van achtergronden aan de hand van een grafisch ontwerpprogramma, in mijn geval was dit Adobe Photoshop 5.5. In het derde hoofdstuk leg ik dan nader uit hoe en waar ik de technieken, besproken in hoofdstuk 2, gebruik in mijn website. Dit gebeurt aan de hand van stukjes code en snapshots uit mijn website. In hoofdstuk vier, mijn conclusie, bespreek ik dan mijn ondervindingen bij het maken van een professionele website. Veel leesgenot.

3

Hoofdstuk 2 Het maken van een website

In dit hoofdstuk bespreek ik eerder de theoretische kant van het maken van een website. Op welke zaken moet je letten? Welke technieken zijn er en hoe implementeert men deze in een website? En tenslotte, hoe stoom je foto’s klaar voor het web en ontwerp je achtergronden?

2.1 Een goede website. Er zijn vier belangrijke factoren waaraan een goede website beantwoordt: Scanbare inhoud Navigatie Structuurelementen Lay-out, huisstijl

Scanbare inhoud

Aanbieders van informatie moeten een mooi evenwicht zien te vinden tussen het vlug en oppervlakkig kunnen scannen enerzijds en het aanbieden van voldoende informatie anderzijds, zodat gebruikers een oordeel kunnen vormen of de topic in kwestie hen al dan niet aanbelangt. Uit onderzoek blijkt dat internet gebruikers eerst naar kopteksten kijken. De reden hiervoor is dat kopteksten ideale middelen zijn om te scannen op interesse en relevantie. Vandaar ook dat gebruikers veel meer duidelijke koppen prefereren boven mysterieuze of grappige koppen. Mysterieuze koppen zijn immers niet bruikbaar bij het scannen naar informatie. De tweede betekenisdragers die het meest ideaal zijn om te scannen na koppen zijn conclusies of korte samenvattingen van de tekst. Conclusies in een korte

4

paragraaf zijn de meest ideale vormen van info aanbieding omdat zij het evenwicht vormen tussen scanbaarheid enerzijds en voldoende informatie anderzijds. Gebruikers scannen met andere woorden eerst de titels. Daarbij komen ze af en toe titels tegen die hen mogelijk kan interesseren. Indien dit het geval is helpt een heel korte samenvatting van de tekst, onmiddellijk onder de gehyperlinkte titel, hen beslissen of ze de informatie dieper willen uitspitten. Meer nog, de korte samenvatting fungeert als de ultieme trigger om door te clicken in de diepte. Dit principe van informatie aanbieden wordt ook de geïnverteerde pyramide genoemd. Een designregel die je vaak hoort is dat een gebruiker niet zou mogen hoeven te scrollen, met de rechter scrollbalk. Een studie hierover spreekt dit echter tegen. Indien de inhoud op zichzelf goed scanbaar is, hebben gebruikers geen problemen met dit scannen over twee of drie schermlengtes.

Navigatie

Op het vlak van navigatie zijn er twee heel belangrijke zaken te onthouden. Enerzijds is er de duidelijkheid en relevantie van de categorieën. Menu’s zijn heel vaak opgebouwd rond de structuur van het bedrijf en niet rond de zoekcriteria van de consument. Naast de duidelijkheid en relevantie van de categorieën is er anderzijds ook de toegankelijkheid van de navigatie-elementen op zich. Vaak gebeurt het dat de navigatie-elementen verdwijnen op verdere pagina’s op de website, of dat ze van plaats veranderen, bvb. bovenaan i.p.v. aan de linkerkant.

Structuurelementen

De structuurelementen op een website zijn die elementen die de identiteit van de pagina binnen het geheel van de website verduidelijken. Aan de hand van deze elementen heeft de lezer een duidelijk beeld waar hij zich bevindt.

Lay-out

De lay-out ten slotte is de huisstijl die aan deze standaardelementen gegeven wordt. Dit is de zogenaamde 20% creatieve speelruimte die er over blijft om van een website met optimale structuur toch een heel eigen stijl mee te geven.

5

2.2 HTML en Frontpage

2.2.1. HTML HTML is de taal waarmee je documenten (ofwel homepages of webpagina's) maakt, die bekeken kunnen worden op het World Wide Web. HTML staat voor HyperText Markup Language: Hypertext is de techniek waarmee een verbinding (een link) wordt gelegd

naar bijvoorbeeld een ander document, een afbeelding, of een geluidsopname.

Markup is het gebruik van code om de browser, een programma waarmee HTML-documenten bekeken kunnen worden, te vertellen hoe de inhoud van het document weergegeven moet worden en naar welke bestemming de hyperlinks moeten leiden.

HTML-code is opgebouwd uit elementen en attributen.

2.2.2. Elementen Elementen bestaan meestal uit tweetallen: een deel dat het element activeert en een deel dat de activering weer opheft. Zowel de activering (ook wel start tag genoemd) als de opheffing (end tag) beginnen met het teken < en eindigen met het teken >. Tussen deze tekens staat de naam van het element. De activering en de opheffing zijn hetzelfde, met uitzondering van de slash (/) voor de naam van het element in de opheffing. Tussen de activering en opheffing staat de inhoud, waarop het element betrekking heeft. <P>Deze tekst vormt een paragraaf.</P> Een aantal elementen heeft geen inhoud. Voor deze lege elementen is het gebruik van de opheffing verboden. Een voorbeeld is het HR element, waarmee horizontale lijnen opgenomen kunnen worden: <HR> Van sommige elementen mag de opheffing worden weggelaten en in een heel enkel geval ook de activering. Voor de eenduidigheid wordt echter geadviseerd van deze mogelijkheid geen gebruik te maken. De namen van de elementen zijn altijd case-insensitive, dat wil zeggen dat het niet uitmaakt of hoofdletters of kleine letters worden gebruikt.

6

2.2.3. Attributen Attributen zijn nadere specificaties van de elementen. De attributen worden opgenomen in de activering, voor het >-teken. Indien meerdere attributen aan het element worden toegevoegd, worden deze gescheiden door een spatie. In veel gevallen moet voor een attribuut een waarde worden opgegeven. Als voorbeeld wordt aan het eerder genoemde P element het ALIGN attribuut toegevoegd. <P ALIGN="right">Deze paragraaf wordt rechts uitgelijnd.</P> Ook aan lege elementen kunnen attributen worden toegevoegd. In het volgende voorbeeld gebeurt dat voor het HR element met de attributen SIZE en NOSHADE, waarbij NOSHADE een voorbeeld is van een attribuut dat geen waarde kent. <HR SIZE="5" NOSHADE> De naam van een attribuut is altijd case-insensitive. Meestal geldt dat ook voor de waarde, maar er zijn enkele uitzonderingen. De waarde van een attribuut wordt geplaatst tussen dubbele of enkele aanhalingstekens. Wanneer de waarde alleen bestaat uit letters (A-Z of a-z), cijfers (0-9), verbindingsstreepjes (-) en punten (.), zijn aanhalingstekens niet strikt noodzakelijk. Vanwege de uniformiteit wordt echter geadviseerd ook in die gevallen aanhalingstekens te gebruiken. De namen van elementen en attributen worden altijd in hoofdletters weergegeven, de waarden (tenzij anders vereist) altijd in kleine letters.

2.2.4. Opbouw HTML-document Een HTML-document bestaat uit twee delen: de head en de body. De head wordt gedefinieerd met het HEAD element en bevat informatie, die betrekking heeft op het document, maar niet in het documentvenster wordt weergegeven. De informatie kan bijvoorbeeld instructies aan de browser bevatten over hoe het document verwerkt of weergegeven moet worden. In de head van elk document moet in ieder geval het TITLE element worden opgenomen. Hiermee wordt een titel vastgelegd, welke in de meeste browsers te zien is in de titelbalk van het venster. De body wordt gedefinieerd met het BODY element en bevat de eigenlijke inhoud van het document.

7

Het HTML element markeert het begin en einde van een HTML-document en geeft aan dat het document HTML-code bevat. Met de genoemde elementen heeft het HTML-document de volgende opbouw: <HTML> <HEAD> <TITLE>Dit is mijn eerste homepage</TITLE> </HEAD> <BODY> </BODY> </HTML> Binnen het BODY element kun je ondermeer koppen, paragrafen, horizontale lijnen, afbeeldingen en hyperlinks opnemen. Koppen maak je met het Hx element. De "x" vervang je door een getal tussen 1 en 6. Hoe lager het getal, hoe groter de kop. Voor de belangrijkste kop gebruik je dus H1: <H1>De belangrijkste kop</H1> Gewone tekst neem je op met het P element. Voor een horizontale lijn gebruik je het HR element. De elementen Hx, P en HR zijn elementen, die ervoor bedoeld zijn de inhoud van een document op een voor een bezoeker begrijpelijke wijze te structureren. Dit soort elementen wordt altijd voorafgegaan en gevolgd door de overgang naar een nieuwe regel en vaak ook door een blanco regel. Als je een afbeelding wilt opnemen, maak je gebruik van het IMG element. Aan het IMG element voeg je minimaal de attributen SRC en ALT toe. Het SRC attribuut bepaalt welke afbeelding moet worden geladen. Met het ALT attribuut geef je als alternatief een omschrijving op, voor als de browser geen afbeeldingen weergeeft. Het is verstandig ook altijd de attributen WIDTH en HEIGHT te gebruiken om de afmetingen van de afbeelding vast te leggen. <P><IMG SRC="face.gif" WIDTH="105" HEIGHT="125" ALT="Gezicht"></P> Een hyperlink is een verbinding met een ander document, of een ander type bestand. Je maakt een hyperlink met het A element. Het HREF attribuut definieert op welke locatie het document of bestand zich bevindt. Een hyperlink naar een document in dezelfde directory op dezelfde server ziet er als volgt uit: <P>Een <A HREF="index.htm">hyperlink</A> is ...</P>

8

Een hyperlink naar een site op een andere server heeft bijvoorbeeld de volgende opbouw: <P>Bezoek de <A HREF="http://www.beddeleem.be">website van de firma Beddeleem</A></P> Met de attributen van het BODY element kun je de basisweergave van een document bepalen. Met het BGCOLOR attribuut definieer je welke achtergrondkleur er voor het document gebruikt moet worden, met het TEXT attribuut doe je hetzelfde voor de kleur van de tekst. Met de attributen LINK, VLINK en ALINK bepaal je de kleur van achtereenvolgens een link die nog niet bezocht is, een link die al wel bezocht is en een link op het moment dat deze wordt geselecteerd door de gebruiker. Het BACKGROUND attribuut tenslotte kun je gebruiken om aan te geven, dat een afbeelding als achtergrond voor het document gebruikt moet worden. <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#FF0000" ALINK="#FF0000"> </BODY> Plaatselijk kun je de weergave van stukjes tekst binnen bijvoorbeeld een kop of paragraaf bepalen met de elementen voor tekstopmaak, zoals B voor vet en I voor cursief. Ze worden beschreven in het onderdeel Weergave tekst. <P>Tekst kun je ook in <B>vet</B> of <I>cursief</I> weergeven.</P>

2.3 Cascading Style Sheets (CSS) Cascading style Sheets, of kortweg CSS, is ontstaan uit onvrede over de beperktheid van HTML om pagina’s te kunnen vormgeven.

Wat zijn Style Sheets?

Cascading Style Sheets is niets anders dan een nieuwe taal waarmee het mogelijk wordt om een bepaalde style toe te kennen aan HTML-elementen. Een style kan van alles zijn: de grootte van een lettertype, het lettertype zelf, de grootte van de marges, de kleuren en de meest in het oog springende vernieuwing: het pixelnauwkeurig kunnen positioneren van elementen op een pagina. Dit positioneren van elementen kan door het aangeven van x - en y- coördinaten (horizontaal en verticaal) maar ook over de a-z index, waardoor het mogelijk wordt om elementen te laten overlappen. Alle elementdefinities worden

9

vastgelegd in een template of style sheet. Een verandering in een style sheet heeft dan ook direct gevolgen voor de hele pagina of website. Het heeft in die zin veel weg van templates zoals wij die kennen in gangbare softwarepakketten. Een belangrijke eigenschap van CSS is dat verschillende style sheets de presentatie van één document kunnen beïnvloeden. Deze eigenschap staat bekend als ‘cascading’. In de praktijk zijn er altijd twee, maar meestal drie verschillende style sheets. Allereerst heeft iedere browser een standaard (default) style sheet, die aangeeft hoe een document moet worden afgebeeld. Ten tweede krijgt u te maken met de style sheet van de ontwerper van een site. De laatste mogelijkheid is dat u zelf als gebruiker een style sheet heeft gemaakt. Om te voorkomen dat verschillende style sheets conflicteren zijn er bepaalde afspraken gemaakt. De style sheet van de ontwerper geldt als uitgangspunt. Als de gebruiker er zelf ook één heeft gemaakt dan gelden de daarin vastgelegde styles als belangrijker. Als laatste kan ook de browser bepaalde styles opgeven. De browser bepaalt uiteindelijk hoe de verschillende style sheets met elkaar om moeten gaan. Een toepassing van cascading is dat het nu mogelijk is om binnen een bedrijf verschillende afdelingen tegelijk te laten werken aan een site, waarbij iedere afdeling zijn eigen style sheet kan gebruiken.

2.4 Scripting In tegenstelling tot bijvoorbeeld Java, wordt JavaScript direct opgenomen in uw HTML-pagina. De code wordt na het inladen direct door de browser geïnterpreteerd en uitgevoerd. Het voordeel hiervan is dat er minder communicatie met de server nodig is. Dit levert aanzienlijke tijdwinst op als u veel interactie heeft met de bezoeker van uw pagina. JavaScript code kan je opnemen in uw HTML-pagina met een gewone HTML- of teksteditor.

Een browser is pas in staat een script te herkennen, als aan het HTML-document de tags <SCRIPT> en </SCRIPT> zijn toegevoegd. Omdat er verschillende soorten scripts bestaan, wordt de begin-tag veranderd in : <SCRIPT LANGUAGE=”Java Script”> Op die manier weet de browser dat het om JavaScript gaat. De script-tags kunnen zowel in de ‘header’ als in de ‘body’ van het HTML-document worden geplaatst.

10

De meeste JavaScripters geven er de voorkeur aan de script-tags in de header te plaatsen. Volgende code toont hoe je een script in de HTML-code implementeert: <HTML> <HEAD> <TITLE>De basis</TITLE> <SCRIPT LANGUAGE=”JavaScript”> < !--Verberg Hier wordt de JavaScript-code geplaatst // Stop verbergen -- > </SCRIPT> </HEAD> <BODY> Uw document </BODY> </HTML> < !-- Verberg en // Stop verbergen -- > Tussen deze twee regels wordt de JavaScript code geplaatst. De twee bovenvermelde regels staan tussen de HTML commentaar-tags. Hierdoor wordt de tekst niet afgebeeld in browsers die geen JavaScript herkennen. Omdat JavaScript de tweede regel na de commentaar-tag als code leest, moet ook hier worden aangegeven dat het om commentaar gaat. Binnen JavaScript wordt één regel commentaar aangegeven door de zin te laten beginnen met twee slashes (//). De voornaamste functionaliteiten van Scripts aan de clientzijde zijn: Interactie met eindgebruiker Presentatie van data aan de eindgebruiker Toevoegen van dynamische effecten aan de website (bv. Menu’s,

eenvoudige animatie,…) Veranderen van een doel-URL horend bij een anker (Eng. anchor), zoals

bij het gebruik van formulieren: afhankelijk van de keuze uit een lijst van mogelijkheden wordt de eindgebruiker doorverwezen naar een andere webpagina.

11

Validatie van gebruikersinvoer en weergave van foutmeldingen wanneer de eindgebruiker incorrecte data heeft ingevoerd.

Uitvoeren van berekeningen die lokaal (d.w.z., aan de clientzijde) kunnen uitgevoerd worden.

2.5 Active Server Pages In het vorig hoofdstuk werden scripts die uitgevoerd werden aan de clientzijde besproken. Het is ook mogelijk om scripts uit te voeren aan de serverzijde. Een van die technologieën die dit mogelijk maken is het gebruik van ASP’s.

2.5.1. Active server pages basics. ASP is geen programmeertaal, ASP is een Microsoft technologie wat de mogelijkheden van de (web)server uitbreidt middels enkele objecten. ASP biedt de mogelijkheid om web-pagina's dynamisch te genereren. Om ASP te kunnen gebruiken dient Microsoft's Internet Information Service op de server te draaien. ASP biedt objecten voor het opslaan van variabelen, het verkrijgen van informatie van gebruikers en servers en om HTML bestanden te genereren. Verder biedt het database objecten om ODBC databases mee te benaderen. Een en ander wordt gerealiseerd aan de hand van ActiveX Data Objects. (ADO) Middels VBScript en JavaScript kunnen de ASP objecten benaderd worden. ASP code bevindt zich simpelweg tussen de oude vertrouwde HTML code, wat de mogelijkheid biedt om een mix te maken van statische en dynamische HTML pages. ASP code wordt altijd gemarkeerd tussen '<%' en '%>'. In dit voorbeeld zien we een stukje statische html en ASP : <html> <head><title>Een stukje ASP</title></head> <% response.write("Welkom op de site van Beddeleem :") response.write Now( )

12

%> </html>

Response.write schrijft als het ware de output naar HTML formaat. Wanneer de gebruiker de bron van de HTML code opvraagt ziet hij slechts de uitvoer zijde, dus niet de ASP code. Op zich kan bovenstaand voorbeeld ook via HTML gemaakt worden, het wordt echter pas interessant wanneer ASP gebruikt wordt in combinatie met een database. Aan de hand van ASP kunnen de gegevens ( van bijvoorbeeld een artikel, of internetpagina ) uit de database gelezen worden, en aan de gebruiker getoond worden. Er onstaan dan dynamische HTML pages die interactief gecreëerd worden op basis van wat de gebruiker wil. Elke keer als een gebruiker een ASP gegenereerde site bezoekt wordt er een unieke sessie(session) geopend. In het Session object kunnen variabelen bewaard worden die tijdens de gehele session geldig zijn. Ook al wordt er tussen verschillende pagina's geswitched. Een praktisch voorbeeld van een session is de taal waarin de gebruiker een multilanguage site mee bekijkt. Op de default pagina van de site kan de gebruiker de taal kiezen welke in het Session object wordt bewaard : <% Session("Taal") = "Nederlands" 'Of bijv. Session("Taal") = "N" De N kan als veld indicatie van de taal in de Database fungeren %> Tussen verschillende pagina's kunnen parameters doorgestuurd worden, dit gebeurt op de volgende manier : <% ArtikelId = Request.QueryString("Artikel") %>

2.5.2. Het maken van een database connectie Het volgende stukje code maakt een database connectie, en zet de gegevens uit een tabel in een html tabel :

13

<% ' Maak de ODBC connectie en open deze Set Conn = Server.CreateObject ("ADODB.Connection") Conn.Open "TestDatabase" ' Creeer een SQL-string en execute de ResultSet RS SQL = "SELECT * FROM Artikelen WHERE Artikelnr > 1000" Set RS = Conn.Execute (SQL) ' Maak de html table (gewoon html) en zet in de eerste kolom het artikelnr en in de tweede de omschrijving response.write("<table border=1 width=100% bgcolor = white>") RS.Movefirst Do While not RS.EOF response.write("<tr><td width='50%' align = 'left'>") response.write(RS("Artikelnr")) response.write("</td>") response.write("<td width='50%' align = 'left'>") response.write(RS("Omschrijving")) response.write("</td>")

2.5.3. Het inlezen van tekst bestanden Naast het uitlezen van een database kunnen m.b.v. ASP 'simpele' tekstbestanden op eenvoudige wijze naar HTML gelezen worden. Onderstaande code is daar een voorbeeld van, deze leest het bestand "Pagina.txt" regel voor regel in : <% Set FileObject = Server.CreateObject("Scripting.FileSystemObject") Set File = FileObject.OpenTextFile(Server.MapPath ("/TekstDir/Tekst") + "Pagina.txt", 1, False, False) '1 = alleen lezen, 2 = schrijven Do While notFile.AtEndOfStream Resonse.write(file.ReadLine + "<br>") Loop file.Close( )

14

Set FileObject = nothing Set File = nothing %>

2.5.4. De voordelen van ASP De voordelen van ASP zijn : 1. Verkleining van het aantal HTML bestanden als gevolg van het genereren van HTML pagina's uit een database en tekstbestanden. 2. Sites beter, en gemakkelijker te onderhouden. 3. Sites te onderhouden zonder specifieke HTML kennis. (Gewoon de database vullen en/of de tekstbestanden)

2.6 Grafische webpagina’s maken Om afbeeldingen te maken die speciaal geschikt zijn om online te bekijken, heb je een programma zoals photoshop, coreldraw of iets dergelijks nodig. Die programma’s kunnen zware afbeeldingen omzetten naar een gif of jpeg. GIF(Graphics Interchange Format) is een van de meest gebruikte bestandsformaten op het world wide web. GIF-bestanden kunnen afhankelijk van de inhoud sterk worden gecomprimeerd, ze kunnen transparante delen bevatten en ze kunnen worden gebruikt voor het maken van animaties. Hoewel GIF-bestanden maximaal 256 kleuren hebben, is dat vaak voldoende voor veel grafische toepassingen, waardoor dit bestandsformaat zeer geschikt is voor afbeeldingen met effen kleuren en voor banners. JPEG-afbeeldingen ondersteunen 24-bits kleur en zijn een uitstekende keuze bij het weergeven van continuous tone afbeeldingen of foto’s op het web. JPEG (Joint Photographers Experts Group) is zowel een bestandsformaat als een compressieschema waarmee de bestandsgrootte van een afbeelding wordt verkleint door beeldgegevens te verwijderen. Hogere compressie-instellingen leveren kleinere bestanden op, maar kunnen artefacten veroorzaken in de afbeelding.

15

Naast afbeeldingen comprimeren, is een programma als photoshop ook handig om achtergronden en logo’s te maken.

16

Hoofdstuk 3 Mijn website

In dit hoofdstuk begin ik met wat uileg te geven over wat de firma Beddeleem precies van mij verwacht. Vervolgens bespreek ik hoe en waar de technieken, die in vorig hoofdstuk zijn aangehaald, in mijn website zijn toegepast.

Inleiding: Beddeleem en zijn site Beddeleem is een afwerkingsbouwbedrijf dat gespecialiseerd is in verplaatsbare en vaste scheidingswanden, valse plafonds en verhoogde vloeren. Het bedrijf heeft al meer dan 50 jaar ervaring en beschikt over een 120–tal personeelsleden. Het bedrijf is gevestigd in St-Denijs Westrem, vlak aan afrit 14. In een eerste kennismakingsvergadering waar de Algemeen Directeur de heer Peter Beddeleem, de Project leider Jo Van Mulders en Yves De Visscher aanwezig waren, werden de huidige websites van de firma Beddeleem voorgesteld en werd er een algemeen kort overzicht gegeven van wat de nieuwe website moet bevatten. Momenteel is de huidige Belgische site al enkele maanden`under construction`.

Figuur 1: www. beddeleem. be, under construction

17

De buitenlandse site daarentegen is reeds operationeel maar is weinig dynamisch en voor verbetering vatbaar. De lay-out van deze site moet niet naar analogie van www.Partex.com.

Figuur 2: www.jbpartex.com, de internationale site

Dhr Beddeleem legde enkele algemene vereisten op voor de website namelijk.: De site moet algemene informatie bevatten over de firma zoals referenties,

partners etc. Ook de verschillende producten van de firma moeten op de site te bezichtigen zijn.

De site moet in het Nederlands zijn van bij de start. Later zal ook een Franse en Engelse versie toegevoegd worden. De Nederlandse teksten zullen dan vertaald worden in een vertaalbureau.

De website zelf moet snel en gebruiksvriendelijk zijn. Er moet een eenvoudige en duidelijke navigatie doorheen de pagina`s mogelijk zijn.

De startpagina moet zodanig zijn opgebouwd dat hij kan fungeren als uithangbord van de firma.

Het ISO9002 logo en het VCA-logo mogen op elke pagina aanwezig zijn. De mogelijkheid om de site te updaten of aan te passen moet eenvoudig en snel zijn. Ofwel gebeurt dit indien mogelijk door een interne persoon, ofwel door de maker van de site tegen een vooropgestelde vaste prijs. De site moet gevonden worden door verschillende zoekrobots zoals bijvoorbeeld yahoo, google, altavista… Naar de toekomst toe zou de site links naar leveranciers en partners moeten bevatten. Het is ook de bedoeling dat de medewerkers en partners, weliswaar via een login, gegevens kunnen uitwisselen met het bedrijf. Zo zou bedrijfseigen informatie kunnen verspreid worden. Een kleine bijkomende opdracht van de firma is het maken van een logo die dan in de gouden gids geplaatst wordt.

18

3.1 Een goede website

Scanbare inhoud

Figuur 3:algemene layout site Beddeleem

In de website heb ik er naar gestreeft om de menu’s zoveel mogelijk rond de zoekcriteria van de consument op te bouwen en niet rond de criteria van het bedrijf.

Opbouw firma: Wanden Vloeren Plafonds Afbouw

Opbouw website: About us Produkten Nieuws Projecten Contact Info/feedback Site-map

Bewegend logo en naam

Terug naar homepagina

Home andere talen

Inhoudsframe

Naar siteoverzicht

Duidelijk menuframe

19

Navigatie

Mijn website beschikt over een goede navigatie. De navigatie-elementen worden nooit van plaats verwisseld! Ze bevinden zich altijd in het linker frame. Er is ook altijd de mogelijkheid om terug te keren naar de vorige pagina, naar de top van de pagina, alsook naar de home-pagina. De bezoeker zal dus zeker nooit het gevoel krijgen dat hij vast gelopen is. Op elke pagina kan je terug springen naar de indexpagina in een andere taal, die voorlopig nog under construction staat. Het inhoudsframe kan je ook altijd apart afdrukken, indien de bezoeker daarin interesse zou hebben. Linker- en topframe worden niet mee afgedrukt, waardoor er meer plaats is op het blad voor het inhoudsframe. De site beschikt over een sitemap, een recente techniek die veel wordt toegepast op grote websites. Uitwegen genoeg dus!

Structuurelementen

In mijn website wordt er consistent gebruik gemaakt van frames. In de topframe, die op elke pagina blijft staan, zit een bewegend logo en de naam Beddeleem verwerkt. Het linkerframe is het menuframe.

Lay-out

De lay-out is vooral gebaseerd op de achtergrond voor linker- en topframe, die samen een soort band vorm, die als het ware boven de rest van de pagina zweeft. Een eerste maal gedownload blijft die achtergrond er altijd staan. Het gebruik van frames voorkomt het storend effect dat de achtergrond telkens een fractie van een seconde verdwijnt. Een ander speciaal effect is het bewegend logo links boven, dat zorgt voor leven in de pagina!

20

3.2 HTML

3.2.1. Zoek de website. Drie van de vier Belgische websites zijn onvindbaar voor de zoekrobots op het internet. Dat becijferde het onderzoeksbureau Novesco. Novesco onderzocht 338 Belgische websites op het gebruik van metatags. Dat is een onderdeeltje van de HTML-code waardoor de automatische zoekrobots zoals Google, Lycos of Altavista de site kunnen herkennen. Slechts één op drie maakt gebruik van metatags. Het meta element is een niet verplicht HTML-document dat kan worden opgenomen in de header van het document. Het wordt veelal gebruikt om extra informatie te geven over het document. Veel HTML-editors genereren automatisch een <META> tag waarin wordt aangegeven dat het document met een bepaald programma is gemaakt. Omdat de indexpagina van mijn site zou gevonden worden door de zoekrobots zijn er volgende metatags toegevoegd aan de header. <meta NAME="classification" content="afwerkingsbouwbedrijf ,bouw ,wanden, plafonds, vloeren, vacature"> <meta NAME="description" content="Afwerkingsbouwbedrijf- Beddeleem NV/SA – Entreprise de parachèvement"> <meta NAME="keywords" content="beddeleem, bedeleem, JB, wanden, verplaatsbare, vaste, JB-wanden, jbwanden, plafonds, valse, verlaagde, koelplafonds, vloeren, verhoogde, afwerking, afbouw, totale, Europa, Belgie, Vlaanderen, Oost-Vlaanderen, Gent, St, Denijs, Westrem, St.-Denijs, poortakkerstraat, Peter, Jo, Marc, Jos, bedrijf, bouwkunde, gebouw, bouwen, bouwbedrijf, bouwfirma, bouwprojecten, bouwonderneming, wonen, verbouwen, renovatie, restauratie, kantoren, kantoorgebouw, , ikz, integrale kwaliteitszorg, kwaliteit, iso, 9002, vca, vca**,Bewap, kwaliteitssysteem, certificaat, gecertifieerd, veiligheids, ">

Zoals u ziet gebruikt het META element twee attributen, ‘name’ en ‘content’. Dit naam-waarde paar komt u dan ook vaak tegen. Met name geeft u een naam aan een eigenschap, terwijl u met content een waarde toekent aan die eigenschap. ‘Keywords’ zijn de trefwoorden waarmee de website kan gevonden worden. ‘Description’ zorgt voor een omschrijving van de website. De zoekmachines Alta Vista, HotBot en de Nederlandse Vindex geven deze omschrijving weer in de zoekresultaten in plaats van de eerste regels van het document.

21

3.2.2. Frames. Met behulp van framing kan een venster onderverdeeld worden in meerdere frames of sub-vensters. In elk frame kan een document geopend worden. De frames werken onafhankelijk van elkaar, een document in het ene frame kan vooral een statische weergave hebben (bijvoorbeeld een titelbalk of een inhoudsopgave), terwijl in een ander frame door opeenvolgende documenten heen gelopen wordt. Vanuit elk document kunnen hyperlinks nieuwe documenten openen in hetzelfde of in een ander frame.

Frames worden gemaakt door de elementen FRAMESET en FRAME in de HTML-code, meer bepaald in de body in te voegen. Het FRAMESET element verdeelt een venster in subvensters, in horizontale richting met het COLS attribuut, in verticale richting met het ROWS attribuut. Meestal bevat een FRAMESET element alleen het COLS of alleen het ROWS attribuut, maar het is ook mogelijk beide attributen tegelijk te gebruiken. In mijn site heb ik een topframe aangemaakt van 120 pixels hoog en een linkerframe van 170 pixles breed met volgende HTML-code: <frameset rows="120,*" framespacing="0" border="0" frameborder="0"> <frame name="vaandel" scrolling="no" noresize target="inhoud" src="../hoofdding.htm"> <frameset cols="170,*"> <frame name="inhoud" target="hoofd" src="../inhoud.htm" scrolling="no" noresize>

Topframe (120 pixels h ) Linkerfram

e (170 pixels b)

inhoudsframe Normaal Venster

22

<frame name="hoofd" src="../about_us/about_us.htm" target="_self" scrolling="auto" noresize> </frameset> Het FRAME element definieert een frame. Met het SRC attribuut wordt bepaald welk document in het frame geopend moet worden. De FRAME elementen worden geplaatst binnen het FRAMESET element. In plaats van een FRAME element kan ook een nieuw (genest) FRAMESET element worden opgenomen, dat op zijn beurt weer een aantal FRAME elementen bevat. Aan een frame wordt met het NAME attribuut van het FRAME element een naam gegeven. Door in een hyperlink het TARGET attribuut te gebruiken met de naam van een frame, wordt het betreffende document in het frame met die naam geopend. Standaard worden de randen tussen de frames in 3-D uitgevoerd. Met het FRAMEBORDER attribuut kan aangegeven worden dat de randen niet in 3-D randen, maar vlak moeten worden weergegeven. Het NOFRAMES element wordt gebruikt om inhoud op te nemen, welke alleen moet worden weergegeven indien de browser geen frames ondersteunt, of indien het gebruik van frames is uitgeschakeld. <noframes> <body> <p> <BLOCKQUOTE> <TABLE BORDER=0> <TR><TD WIDTH=500> <font size="+2" color="#000080">Welkom op de website van de firma Beddeleem</font><P><font color="#000080">Uw webbrowser ondersteunt geen frames. Om de website te kunnen bekijken moet jegebruik maken van de browsers van <A HREF = http://www.netscape.com >Netscape</A> of <A HREF="http://www.microsoft.com">Microsoft</A>, die frames en javascript ondersteunen.</font> </TABLE> </BLOCKQUOTE> </body> </noframes> </frameset>

23

3.3. Cascading Style Sheets Cascading Style Sheets worden aan een HTML document toegevoegd en maken het ons gemakkelijker om de look en de stijl van onze pagina te controleren en aan te passen. Het wordt aangeraden om Style Sheets in HTML documenten te gebruiken omdat ze verouderde HTML tags vervangen. Maar het mooist van al is dat Style Sheets het maken van HTML pagina's veel flexibeler maakt en ons bovendien toelaat effecten te creëren die met gewone HTML tags niet haalbaar zijn. CSS is gebaseerd op rules en style sheets. Een rule is een defenitie van een stilistisch aspect van één of meerdere elementen, bijvoorbeeld de kleur groen toekennen aan <H2> tag. Een style sheet bevat op zijn beurt weer één of meerdere rules. In het volgende voorbeeld ziet u de simpelste vorm van een style sheet , namelijk die met één rule. De rule geeft aan dat alle headings van het type <H2> groen gekleurd zijn. H2 {color: green} Deze rule bestaat uit twee onderdelen: een selector (alles voor de openingsaccolade) en een value (waarde). In dit voorbeeld is color de property en green de value. Eigenschap en waarde worden gescheiden door een dubbele punt. Kent u meerdere eigenschappen toe aan een selector dan worden deze gescheiden door een puntkomma. Om aan elke pagina dezelfde layout te geven zijn er in het begin van elke pagina volgende stylesheets gedefinieerd: <style> <!-- H1 { font-size: 14pt; font-family: Arial, Helvetica, sans-serif; color: #800000; margin-top: 3; margin-bottom: 3 } p { font-size: 10pt; font-family: Arial; color: #000080; margin-top: 20; margin-bottom: 20 ; marginwidth:10 ; marginheight:10; align:justify} --> a:link { color: #000080; font-family: arial, helvetica, sans-serif; text-decoration: None } a:active { color: #000080; font-family: arial, helvetica, sans-serif; text-decoration: None } a:visited { color: #000080; font-family: arial, helvetica, sans-serif;

24

text-decoration: None } a:hover { color: #800000; font-family: arial, helvetica, sans-serif; text-decoration: underline } </style> Als u in de body van het document heeft staan <H1>Korte historiek</H1> dan zal de hele regel in het bordeaux ,14 pt. weergegeven worden. Als u mijn site bekijkt, dan zijn alle titels en gewone tekst met dezelfde opmaak gemaakt, dezelfde stylesheets. Soms kan de ruimte tussen de alinea’s verschillen. Ook wordt de opmaak voor de hyperlinks vastgelegd. Als je met de muis over een hyperlink gaat kleurt ze bordeaux (color: #800000).

25

3.4. Scripting. Ikzelf heb een beperkte kennis van Javascript en toch heb ik enkele javascripts kunnen implementeren in mijn site. Trouwens, op het net stelt men enorm veel scripts ter beschikking, zoals bijvoorbeeld op de site www.thuisbasis.be.

3.4.1. Vorige en print.

Op elke pagina heb je onderaan het inhoudsframe de kans om terug te keren naar de vorige pagina uit de history-list of om het inhoudsframe af te

drukken. Dit gebeurt aan de hand van twee simpele scripts: <a href="javascript:history.go(-1)"><font size="1">vorige</font></a> <a href="javascript:window.print()"><font size="1">print</font></a>

3.4.2. Uw foto’s en achtergronden beschermen.

Ik heb ook een script aan de website toegevoegd die er voor zorgt dat ze de foto’s en achtergronden niet kunnen opslaan. Dit heb ik gedaan door een boodschap te laten verschijnen wanneer ze op de rechtermuisknop klikken. <script LANGUAGE="JavaScript1.1"> <!-- Begin function right(e) { if (navigator.appName == 'Netscape' && (e.which == 3 || e.which == 2)) return false; else if (navigator.appName == 'Microsoft Internet Explorer' && (event.button == 2 || event.button == 3)) { alert("Welkom op de site van Beddeleem"); return false; } return true; } document.onmousedown=right; document.onmouseup=right; if (document.layers) window.captureEvents(Event.MOUSEDOWN);

26

if (document.layers) window.captureEvents(Event.MOUSEUP); window.onmousedown=right; window.onmouseup=right; // End --> </script>

3.4.3.Homepagina

Figuur 4:Homepagina site Beddeleem

De acht foto’s die je ziet zijn de hoofdonderverdeling van de website. Als je met de muis over één van de foto’s beweegt verschijnt er een layer, met uitleg geeft over waar de hyperlink u zal brengen. Dit wordt bekomen door volgend script: <script language="JavaScript"> <!-- function MM_findObj(n, d) { var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

8 hoofdonderdelen site Beddeleem

Layer die verschijnt als men over hyperlink beweegt

27

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x; } function MM_showHideLayers() { var i,p,v,obj,args=MM_showHideLayers.arguments; for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2]; if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; } obj.visibility=v; } } //--> </script> De functies worden dan opgeroepen door volgende regel: <a href="standaard/standaard_about_us.htm" onMouseOver = "MM_showHideLayers ('Layer1','','show')" onMouseOut="MM_showHideLayers ('Layer1','','hide')"> <img border="0" src="images/index_about_us.jpg" align="right" width="90" height="75"></a> Als men dus met de muis over de hyperlink van about_us.htm beweegt, verschijnt layer1. Layer1 is als een DIV-element als volgt gedefinieerd: <div id="Layer1" style="position:absolute; width:300px; height:150px; z-index:10; left: 20px; top: 225px; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 0 px none #FFFFFF; visibility: hidden"> <H1 align="left">About us </H1> <p align="justify">Korte historiek en huidige positie van de groep Beddeleem.</p></div> Voor elke hyperlink is er dus een andere layer gedefinieerd.

28

3.5. Active Server Pages

Invulformulier : info.asp

In mijn website bevind zich een invulformulier, waar bezoekers terecht kunnen met opmerkingen, vragen, prijsaanvragen,… Daarvoor heb ik gebruik gemaakt van Active Server Pages, door de ingevulde velden in een databank te steken en die velden op te roepen in het bevestigings- en resultatenpagina(beveiligd).

Figuur 5: Invulformulier

De gebruikte databank is info.mdb met als velden: id, naam, foornaam, functie, bedrijf, tijdstempel. Elk veld van een record krijgt dan een waarde toegekent op de volgende manier: <input type="text" name="voornaam" size="40"> In deze record krijgt het veld ‘voornaam’ de waarde Dieter.

29

Bevestiginspagina:bevestiginsveld.asp

Figuur 6: bevestigingspagina

In het bevestigingsblad krijgt de bezoeker de kans om zijn gegevens nog eens te controleren. Indien ze niet correct zijn kan de bezoeker terug gaan en zijn gegevens opnieuw invullen. In het bevestigingsveld worden de waarden van de velden als volgt opgeropen: <%=Request.form ("voornaam")%> In het bevestigingsveld wordt de waarde van de velden in de databank opgeslagen. De connectie met de databank info.mdb gebeurt als volgt: <% connStr = "Driver={Microsoft Access Driver (*.mdb)};" connStr = connSTr & "DBQ=" & server.mappath("../fpdb/info.mdb") set conn = server.createobject("adodb.connection") conn.open connStr set rs = Server.CreateObject("ADODB.Recordset") ' connectie string rs.Open "SELECT * FROM Resultaten", conn, adOpenDynamic, adLockOptimistic Het effectief opslaan van de waarden in de verschillende velden gebeurt door de volgende regels: rs.AddNew rs("naam") = CStr(Request.Form("naam")) rs("voornaam") = CStr(Request.Form("voornaam")) rs("bedrijf") = CStr(Request.Form("bedrijf"))

30

rs("functie") = CStr(Request.Form("functie")) rs("straat") = CStr(Request.Form("straat")) rs("nummer") = CStr(Request.Form("nummer")) rs("postcode") = CStr(Request.Form("postcode")) rs("gemeente") = CStr(Request.Form("gemeente")) rs("email") = CStr(Request.Form("email")) rs("type_boodschap") = CStr(Request.Form("type_boodschap")) rs("boodschap") = CStr(Request.Form("boodschap")) rs("tijdstempel") = now() rs.Update rs.Requery rs.MoveLast conn.close %> Er werd ook nog een extra veld "tijdstempel" toegevoegd die het tijdstip opslaat wanneer de bezoeker het invulformulier heeft ingevuld.

Resultatenpagina:databank.asp

In databank.asp worden alle records die opgeslagen zitten in de databank getoond. Het is de bedoeling dat deze pagina uiteindelijk wordt beveiligd en enkel toegankelijk wordt gemaakt voor bevoegden, mensen van Beddeleem dus. De connectie met de databank gebeurt op zelfde manier als bij het bevestigingsveld. Het oproepen van alle velden van alle records gebeurt door deze code: response.write "<table border = 1>" do while not rs.eof response.write "<tr><td><ul><li>" response.write "<b>id: </b>" response.write rs("id") response.write "</li><li>" response.write "<b>naam: </b>" response.write rs("voornaam") response.write " " response.write rs("naam") response.write "</li><li>"

31

response.write "<b>bedrijf: </b>" response.write rs("bedrijf") response.write "</li><li>" response.write "<b>functie: </b>" response.write rs("functie") response.write "</li><li>" response.write "<b>adres: </b>" response.write rs("straat") response.write " " response.write rs("nummer") response.write "&nbsp;&nbsp;&nbsp;" response.write rs("postcode") response.write " " response.write rs("gemeente") response.write "</li><li>" response.write "<b>E-mail: </b>" response.write rs("email") response.write "</li><li>" response.write "<b>Type boodschap: </b>" response.write rs("type_boodschap") response.write "</li><li>" response.write "<b>Boodschap: </b>" response.write rs("boodschap") response.write "</li>" response.write "</td></tr>" rs.movenext response.write "</ul>" loop response.write "</table>" conn.close %>

32

3.6. Grafisch aspect website Voor mijn foto’s klaar te stomen voor mijn site heb ik gebruik gemaakt van Adobe Photoshop 5.5. Geen eenvoudig programma om aan te leren, maar het loont zeker de moeite. Hiermee heb ik foto’s omgezet naar gif of jpeg of ingescande foto’s verwerkt. Ook heb ik de achtergronden voor linker- en topframe gemaakt met Photoshop. Hoe krachtig en wat de mogelijkheden zijn met Photoshop wil ik tonen aan de hand van deze advertentie voor de gouden gids (www.goudengids.be), die ik gemaakt heb.

Figuur 7: achtergrond top- en linkerframe

Figuur 8: advertentie voor goudengids.be

33

3.7. Speciale effecten.

3.7.1. Favorites Icon Een leuke toevoeging aan een website is favicon. Wanneer een bezoeker mijn site toevoegt aan de favorieten in Internet Explorer, dan verschijnt normaal het “e”-icoontje van IE in de favorietenlijst. Door middel van een kleine favicon.ico-bestandje kunt u ervoor zorgen dat het jb-logo in die lijst komt te staan.

Figuur 9:illustratie favicon in favorieten Internet explorer.

Dit kan eenvoudig gedaan worden door volgende regel toe te voegen aan uw HTML-header: <LINK REL="SHORTCUT ICON" href="http://messiaen.elis.rug.ac.be/beddeleem/favicon.ico"> Een volledige uitleg en een online tool waarmee u uw favicon kunt maken vindt u op www.favicon.com.

JB-logo als favicon.ico

34

3.7.2. Nedstat. Zolang mijn website niet voor commerciële doeleinden wordt gebruikt kan ik nog gebruik maken van de nedstat-statistieken. Om gebruik te maken van nedstat moest ik volgende code toevoegen: <script language="JavaScript"> <!-- nedstatbasic("AA4Tfw4nXieeSzXO11gt148jnKug", 0); // --> </script> <noscript> <a target=_blank href= "http://v1.nedstatbasic.net/stats?AA4Tfw4nXieeSzXO11gt148jnKug" > <img src="http://m1.nedstatbasic.net/n?id=AA4Tfw4nXieeSzXO11gt148jnKug" border=0 nosave width=18 height=18 align="left"></a> </noscript> <!-- End Nedstat Basic code -->

35

Figuur 10: illustratie Nedstat voor index.htm

Daar kun je zien wanneer, waarmee, uit welke werelddelen de indexpagina werd bezocht en vooral via welke links. Dit is handig om te kijken of mijn pagina’s worden bezocht door links via Yahoo, Belgacom. Ik heb vaststellen dat mijn metatags effect hadden, doordat iemand mijn website had gevonden via Belgacom-skynet. Die persoon had mijn websites gevonden met de trefwoorden ‘valse plafonds’ Jammer geoneg mag je Nedstat niet gebruiken voor commerciele doeleinden en zal van zodra de website op de URL www.beddeleem.be komt te staan uit de code moeten verdwijnen.

36

Hoofdstuk 4 Besluit

Dit eindwerk was voor mij een interessant project om verschillende redenen. Aan de hand van dit eindwerk heb ik de kennis opgedaan om een professionele website te ontwikkelen. Zo heb ik geleerd op welke punten men moet letten om een website te maken die voldoet aan de hedendaagse normen van het internet. Daarnaast heb ik kunnen vaststellen dat bepaalde technieken heel eenvoudig te implementeren zijn. Een basiskennis van Java en Javascript blijkt voldoende te zijn om scripts aan een website toe te voegen. Het gebruik van Style Sheets zou ik elke webdesigner willen aanraden. Dit vereenvoudigt enorm het controleren van de opmaak van uw pagina. In websites wordt ook dikwijls gebruik gemaakt van Active Server Pages. Het is wel zo dat de code van de dynammische pagina’s niet te zien zijn in de broncode van een pagina. Een goede handleiding of een ervaren leermeester komt goed van pas. Zo moet je een connectie kunnen maken met een databank en er gegevens uithalen of in opslaan. Deze techniek wordt vooral toegepast voor het maken van invulformulieren, wat in mijn website het geval was. Bij het ontwikkelen van mijn site heb ik veelvuldig het programma Adobe Photoshop 5.5 gebuikt, die eenmaal aangeleerd een enorm krachtig programma blijkt te zijn. Je hebt wel enige tijd nodig om het onder de knie te krijgen. Daarentegen ben ik wel teleurgesteld in Frontpage 2000. Het maakt de HTML-code veel onoverzichtelijker dan nodig en het is veel te ‘Microsoft– minded’. Persoonlijk vind ik dat je er eerst moet in slagen om volledig pagina’s te ontwikkelen in de HTML-viewer en dan pas gebruik te maken van de vereenvoudigde Frontpage-tools.

37

Een leuke toevoeging aan een website is het verschijnen van een favicon - icoon, wanneer een bezoeker de pagina toevoegt aan zijn favorietenlijst in Internet Explorer. Indien men de site niet voor commerciële doeleinden ontwikkelt, is het gebruik van de Nedstat-statistieken een absolute aanrader. Dit is eenvoudig te implementeren en bovendien volledig gratis. Vanzelfsprekend kwam het voor mij ook goed uit dat ik een site van een bouwkundige firma kon ontwikkelen. Zo kwam er geen stof op de kennis van mijn vorige studies!

38

Literatuurlijst

Boeken, cursussen en artikels Elizabeth Castro, Snel op weg, HTML4 voor het world wide web, Peachpitt Press, 2000.

Ed Bott en Woody Leonhard, Het complete handboek Microsoft Office 2000, Krips bv, Meppel ,2000.

Rinie Hooijer, HTML 4.0 in de praktijk, Addison Wesley Longman Nederland bv, Amsterdam, 1998.

Rinie Hooijer, Instant Scripts in de praktijk, Addison Wesley Longman Nederland bv, Amsterdam, 1998.

Van de Walle, Rik, Internetoepassingen, (Cursus RUG), 2000-2001.

“Uw homepage professioneler”, in Tips & Advies, 2 mei 2001, p. 10.

Michael Lennox, Adobe Photoshop 5.5. kort en bondig, Krips bv, Meppel , 2000.

“Sites op zijn belgisch”, in Tips & Advies, 2 mei 2001, p. 2.

Dhoedt, Bart, Softwareonwikkeling, (Cursus RUG), 2000-2001.

Philips, Wilfired,, Kantoorautomatiserng, (Cursus RUG), 2000-2001.

39

Internetsites www.thuisbasis.be , ontwerpen, updaten en beheren van een website

www.memori.be , onderzoeks- en consultinggroep van de Katholieke Hogeschool Mechelen

www.useit.com/alertbox , Alertbox Jakob Nielsen

www.animfactory.com , gifs,achtergronden,…

www.favicon.com , Favorites Icon

http://www.ikonal.net/htmlcursus , HTML cursus

http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html , html

http://www.pcaktief.be/j00.htm , Nederlandstalige cursus Javascript

http://www.pageresourece.com/jscript , Beginning JavaScript Tutorials

rummelplatz.unimannheim.de/~skoch/js/script.htm , Introduction to Javascript

http://www.dynamic.deezign.com/cssucur , CSS2 cursus

http://www.w3schools.com/css , CSS Tutorials