Logboek WT2. Grenspark de Zoom de Kalmthoutse Heide

Logboek WT2 Grenspark de Zoom – de Kalmthoutse Heide.

Kris Van Wallendael – 1 MCT – B6

Index 1. Onderwerpvoorstel 1.1. Algemeen 1.2. Dé Mission statement 1.3. Dé gebruikers 2. Projectvoorstel 2.1. Informatiestructuur 2.2. Juridisch in orde zijn 2.3. Meer informatie… 3. Taken verdelen 4. Maken van prototypes 4.1. De eerste prototypes 4.2. Nog meer kiekjes… 5. Finaal ontwerp uitwerken – problemen 5.1. Eindelijk xHTML! 5.2. Problemen! 6. Webpagina’s afwerken en XML 7. Afwerking en details 8. Testing 8.1. Testing door mezelf 8.2. Testing door anderen 9. Conclusie 9.1. Werken in een team 9.2. Ik, de volharder en perfectionist 9.3. De leerkrachten 9.4. De website zelf

WT2 eindopdracht (pag. 2 van 9) PIH 2004 - 2005


1. Onderwerpvoorstel 1.1 Algemeen. Na het kennismaken met de opdracht voor WT2 heb ik direct naar Chris gemaild om samen het project te maken. Ik ken Chris al meerdere jaren en weet dat hij mooie werkjes kan maken. Het zoeken van een onderwerp voor deze opdracht was niet zo voor de hand liggend voor ons. We hadden meerdere onderwerpen verzonnen, maar moesten rekening houden met het feit dat we het op een zo multimediaal mogelijke manier wilden inlepelen bij de gebruiker én dat we in totaal minstens 10 pagina’s moesten opstellen. Wat niet zo weinig is… Na wat verschillende onderwerpen op te sommen, gingen we meer en meer toe naar ons huidige onderwerp, namelijk de Kalmthoutse Heide. Eerst dachten we dat het onderwerp niet zou aanslaan… maar uiteindelijk vonden we het wel leuk om er een leuke interface rond te ontwerpen en de ideeën begonnen te komen. Wat we een groot voordeel vonden bij dit onderwerp is het feit dat het natuurgebied voor ons beiden dicht in de buurt ligt. We zijn er allebei al wel eens gaan wandelen of gaan crossen met onze mountainbikes. Naast dit voordeel zag ik er ook een leuke kans in om zelf allerhande foto’s te nemen van het natuurgebied om zo m’n amateuristische hobby verder te zetten en tegelijk ook weer het multimediale deel van de website op te krikken. Na wat zoeken met Google zijn we snel tot de conclusie gekomen dat er slechts één grote website bestaat over het natuurgebied en – niet rond de pot draaiend – die is naar mijn mening een tamelijk grote misser als het aankomt op het volgen van de aangeleerde regeltjes bij WOM en de algemene lay-out regels. “Dit kunnen wij veel beter”. 1.2 Dé Mission statement. Algemeen is onze bedoeling de gebruiker te informeren met informatie over het natuurgebied. Dit willen we – zoals we hierboven al zeiden – op een zo multimediale manier inlepelen, doch ook niet de gebruiker overstelpen met animaties en andere dingen die uiteindelijk de boel te druk zouden maken. We gaan uit van een mooie lay-out, een kleine animatie zodat de website toch ook niet statisch wordt. Verder geven we voldoende hoofdinformatie over het natuurgebied, maar ook weer niet te veel opdat het niet aangenaam zou worden voor de gebruiker om alles te lezen... Een mooie lay-out is één van de dingen die we als middel willen gebruiken om de gebruiker naar onze website te lokken, anderzijds zullen we maandelijkse updates gebruiken als echt lokmiddel. Dit zijn dan extra foto’s die zogezegd wekelijks / maandelijks worden bijgepost op de website. Dit is dan tevens ook een van de dingen die we dynamisch zullen maken zodat deze makkelijk uitbreidbaar zijn. Ook kunnen eventueel extra fietsen wandelroutes van het park worden toegevoegd én natuurlijk ook andere, nieuw ontdekte vitale informatie over het park. De website is voor ons succesvol wanneer de gebruiker al die informatie makkelijk kan vinden én dat op een leuke manier. WT2 eindopdracht (pag. 3 van 9) PIH 2004 - 2005


1.3 Dé gebruikers. Algemeen is de website in ieder geval bedoeld voor iedereen van jong en oud. Meer specifieker zal vooral een educatieve en sportieve groep worden aangetrokken. Natuurlijke zullen ook natuurliefhebbers en –wetenschappers hun muiskliks op onze website achter laten.

2. Projectvoorstel 2.1 Informatiestructuur. Na wat brainstormen kwamen we snel tot de conclusie dat we genoeg inhoud kunnen voorzien om 10 webpagina’s mee te vullen. Eveneens voor de JavaScriptjes zagen we veel mogelijkheden: -

Het stitchen van meerdere foto’s tot één grote panorama foto en deze adh van clipping op de site laten scrollen;

-

Een center script voor de lay-out;

-

Een script voor het veranderen van de lay-out (kleur) – nutteloos vonden we achteraf (en hoogstwaarschijnlijk lelijk ook);

-

XML;

-

Een plan met routes en adh v. mouseOvers extra toelichtingen tonen;

-

…

Over de volgende zaken wilden we informatie voorzien op de website en dit was tevens onze eerste navigatiestructuur (links): Home Geschiedenis: o Ontstaan o Bosbranden Natuur: o Fauna o Flora o Natuurbescherming o Feiten Park: o Personeel o Routes & Plannen o Activiteiten en Educatief Bijenmuseum o Algemene informatie o Foto’s

Home Geschiedenis: o Ontstaan o Bosbranden • • Natuur: o Fauna o Flora o Bescherming o Feiten • • Park: o Organisatie o Routes & Plannen • Activiteiten • o De Vroente o Bijenteeltmuseum • Feedback • Contact • About • Copyright Na een gesprek met dhr. Kools hebben we deze structuur wat aangepast (rechts) om de verschillende aspecten relevanter bij elkaar te plaatsen. • •

• •



27 februari 2005 – Na het opstellen van bovenstaand schema zijn we dan zelf maar eens naar het natuurgebied gegaan om er wat informatie te verzamelen. Eens daar aangekomen in de Vroente (natuureducatief centrum), en na wat vraag naar informatie kregen we direct onze handen vol met folders en krantjes over allerlei verschillende aspecten van het natuurgebied. We kregen direct contact informatie van enkele belangrijke personen daar. Één daarvan was Kools Dries, directeur van De Vroente (Vlaamse Gemeenschap). Zeer vriendelijke mensen. 2.2 Juridisch in orde zijn Alles goed en wel maar uiteindelijk waren we nog niets met al die foldertjes. We hadden het recht niet om nog maar één zin of afbeelding te kopiëren. 1 maart 2005 – Ik ben begonnen met het opstellen van een email met de vraag om een afspraak te maken met dhr. Kools van het natuureducatief centrum – De Vroente. Na 2 of 3 mails sturen was de datum vastgelegd op zaterdag, 5 maart. Ik begin onmiddellijk met het schrijven van een brief die inhoud dat we alle informatie op welke manier dan ook mogen kopiëren, wijzigen enz… 5 maart 2005: door het barre weer toen – het sneeuwde en ijzelde – is Chris alleen naar onze afspraak moeten gaan met dé brief. Achteraf vertelde Chris me dat het een zeer vlot gesprek was en dat de directeur het een interessant project vond. De directeur tekende voor al onze copyright noden. Wij waren blij en konden dan pas echt aan ons project werken. 2.3 Meer informatie… Zondag 6 maart: het was maart en de temperatuur lag onder nul. Hierin zag ik een unieke kans om enkele mooie bevroren foto’s te nemen in het park. Met m’n zus, haar vriend en Pacha – de hond – zijn we naar het natuurgebied gegaan en heb ik er enkele mooie kiekjes genomen van veel bevroren en besneeuwde panorama’s. Er zijn veel foto’s genomen toen en de inhoud voor de fauna webpagina groeide ook aan. De informatie bleef maar komen want ook dhr. Kools mailde ons later nog enkele digitale Word documentjes van folders ea. Dit was natuurlijk zeer handig.

3. Taken verdelen Dan kwam er een tijd dat het project eventjes stil lag… veel werk en toch leek het of er niets gedaan werd. Het probleem was het opkomend Q3 tussenexamen en het achteraf bijkomende uitblazen. Tussen al dat door kwamen we – zoals gewoonlijk – op maandag namiddag, na de lesuren, samen om de verzamelde informatie te structureren. Hierbij beslisten we eveneens ook wie welke informatie ging verwerken. Verwerken hield eigenlijk het digitaliseren van informatie in aangezien we vooral folders ed als bron hadden voor teksten. Buiten dit hadden we eveneens het recht om informatie van de officiële website van het Grenspark – de Kalmthoutse Heide te kopiëren. Hiervan heb ik uiteindelijk slechts enkele afbeeldingen van gekopieerd voor de fauna webpagina.



De Q3 examens passeerden en het was ondertussen Paasverlof…

4. Maken van prototypes 4.1 De eerste prototypes Na het digitaliseren en structureren van de informatie ben ik begonnen aan een eerste prototype design voor de website. Zo is er uiteindelijk een maand gepasseerd en leek het of er niets was gebeurt. De content was ondertussen wel finaal afgewerkt en gestructureerd maar we zaten nog steeds in Photoshop. Het was ondertussen al midden april. Midden april 2005: start van een 2de prototype. Kwa design wou ik de website zeker in orde hebben. Het design van een website bepaald de sfeer en betekend dus zeer veel. Het eerste prototype ben ik van afgestapt. Ik vond het gewoonweg niet mooi (meer). Eind april 2005: Het 2de prototype werd – naar mijn gevoel – steeds beter. Op de opendeurdag op het PIH was ik met volle moed aan dat design aan het werken. De dag erop vond ik het design maar niets meer. Misschien kwam het door de aanrijding van m’n trein met een koe van de dag ervoor. Leuke ervaring, lekker veel tijd verliezen… :/ 4.2 Nog meer kiekjes… 24 april 2005: ik neem m’n mountainbike, ik ga naar het natuurgebied en rij er de grensparkroute af die rondom – door het park gaat tot in Nederland en weer terug. Dit voor de sport en foto’s. Het was goed weer die dag en tegelijkertijd had ik terug de kans om enkele mooie foto’s te maken. Zo heb ik dan ook enkele foto’s genomen vanaf dezelfde plek als de vorige keer om zo een mooi verschil op de website te tonen tussen een winterlandschap (foto’s van in begin maart!) en een toch wat zonnigere periode.

5. Finaal ontwerp uitwerken - problemen 5.1 Eindelijk xHTML! Ik startte aan het 3de en laatste prototype en werkte het af in Photoshop. Deze keer was ik tevreden met m’n resultaat. Ik en Chris overlegden over welk prototype we uiteindelijk zullen gebruiken. Dat van Chris was modern en oogde wel mooi. Wat me afschrikte aan zijn prototype was een overlading van de kleur groen-geel en dat leek me wel iets dat sommige mensen zou kunnen afweren van onze website. Uiteindelijk hebben we gekozen voor mijn prototype. 5 mei 2005: hemelvaartsdag: bij Chris thuis werken we tezamen verder aan het project. Ik start met het slicen van het design in Photoshop. 5.2 Problemen! Na het slicen begin ik met xHTML en kom ik uiteindelijk tot de constatatie dat het ontwerp er netjes uitziet in Internet Explorer maar niet om aan te zien in Firefox en Netscape. Leuk… De stress lijkt op te komen. Uiteindelijk een halve WT2 eindopdracht (pag. 6 van 9) PIH 2004 - 2005


dag verloren aan prutswerk om de lay-out adh van een tabel toch maar goed te krijgen - tevergeefs. 6 mei 2005: nu werk ik met Chris bij mij thuis aan het project. Ik besluit om de boel dan maar absoluut te positioneren via CSS. Ondertussen maak ik ook een template aan waarvan we allebei kunnen starten als we een nieuwe webpagina willen aanmaken. Dit gaat vlotter voor beiden en zo vermijden we achteraf inconsistentie tussen onze ontworpen webpagina’s. Dan wou ik m’n center script te maken. Ik had vroeger al eens en voorbeeldje hiervan gezien om het body object te centreren – wat slechts enkele lijnen lang was. Uiteindelijk is dit script pas na 2 dagen pas helemaal op punt gekomen en is ’t rond de 100 lijnen code groot. Ik wou het werkend hebben in verschillende browsers en de code wou ik zodanig opstellen dat het makkelijk uit te breiden was als er nieuwe elementen op de website komen te staan. Daarna kwamen de problemen bij het testen. Als het browser venster werd gerisized stond natuurlijk de lay-out niet meer goed en een check of het object wel bestond was ook nodig… Na een week af en toe wat prutsen was het script finaal in orde en ik tevreden. Een week passeerde.

6. Webpagina’s afwerken en XML 21 – 22 mei 2005: de laatste webpagina’s van het onderdeel activiteiten werk ik volledig af. Ondertussen bekijk ik de theorie en labo’s van de eerste tem 5de week van JavaScript om uiteindelijk de XML vlot te kunnen integreren in fauna en flora. Mijn bedoeling was om adh van één simpel XML documentje dynamisch de inhoud van fauna en flora te laten vullen met een lijst van de beschikbare afbeeldingen. Dit dus ook met het oog op uitbreiding – als we afbeeldingen toe willen voegen is dit dus slechts het XML documentje miniem aanpassen en een afbeelding uploaden. 23 – 24 mei 2005: ik start met het exporteren van de verschillende fauna en flora afbeeldingen uit Photoshop en maak daarvoor een XML documentje met geïntegreerde DTD. Daarna begin ik met de code te schrijven voor Internet Explorer wat buiten één klein probleempje zo goed als probleemloos ging. De code zorgt voor een lijst die rechts in de lay-out dynamisch wordt aangemaakt met als bron - namen uit de XML. Daarbij zit in de XML een bron voorzien van de afbeeldingen en een beschrijving. Die 2 worden links van het scherm weergegeven na het klikken op een titel rechts. Het probleem hierbij was het onclick event bij Internet Explorer. Dit probleem was echter snel opgelost na een kort gesprek met Johan V., onze labo leerkracht. Later op de avond volgde de code voor andere browsers. Ik wou de boel dus cross browser hebben natuurlijk, wat me uiteindelijk ook gelukt is.

7. Afwerking en details De website was voor mij af, Chris moest slechts nog één script schrijven voor het clipping op de ‘routes’ webpagina. Uiteindelijk was hem dit niet zo goed gelukt en hebben we samen even gezocht achter het probleem. Het probleem was dat Internet Explorer en andere browsers de clip syntax anders bekijken. WT2 eindopdracht (pag. 7 van 9) PIH 2004 - 2005


Daarna heb ik voor hem de basis code geschreven zodat hij verder kon… de tijd begon te dringen – nog slechts 5 dagen voor de deadline. 30 mei 2005: ik voer een volledige controle uit van al m’n eigen ontworpen webpagina’s op juiste werking, mooie en relevante afbeeldingen en ook of er enige spelfouten in de teksten zitten. 31 mei 2005: ik en Chris spreken af om tegen de avond de boel op Chris’ webspace te publiceren en zo tegelijkertijd ook van elks de afgewerkte webpagina’s samen te gieten tot één geheel. ’s Avonds was volgens Chris het clipping script klaar, toch was het niet volledig voor mij – ik als perfectionist. De clipping werkte wel degelijk, maar de 4 knoppen om in de map naar links – rechts – boven – onder te bewegen werden niet gedisabled als de map ten einde was. Hiervoor heb ik het script nog 2 uurtjes onder handen genomen en tot een goed einde gebracht.

8. Testing 8.1 Testing door mezelf: Vervolgens herlees ik nogmaals alles teksten en controleer ze op spelfouten. Daarna controleer ik nog eens alle webpagina’s op strikte validatie. Tenslotte test ik alle scripting op juiste werking en weergave van de website in Firefox 1.4, Internet Explorer 6, Netscape 7.2 en Netscape 8.0. De website wordt helemaal identiek weergegeven in de 3 verschillende browsers en dat was voor mij een succes. 8.2 Testing door anderen: Pieter: één van m’n goede vrienden op kot en tevens een MCT’er in z’n 2de jaar, heeft onze website volledig doorzocht en heeft ook m’n center script uitvoerig getest op juiste werk. Ook het feedback script had hij getest, maar doordat ik het script nog niet had gekregen van Chris kon hij dit niet testen. Zijn conclusie: mooi design en goede scripts (buiten de feedback tot dan toe). Het enige minpuntje dat nog aanwezig was op de website waren enkele slecht geoptimaliseerde afbeeldingen. 1 juni 2005: Chris verbeterd de slecht geoptimaliseerde afbeeldingen en we maken beiden ons logboek af om uiteindelijk alles op de avond te uploaden naar de server – dit nog een dag voor de uiteindelijke deadline. Uiteindelijk heb ik mijn ouders ook de website laten testen aangezien zij zeer graag wandelen, fietsen en het natuurgebied ook al wel meerdere malen hebben bezocht. Enkel m’n vader bezoekt regelmatig websites, m’n moeder is niet zo bekend met het internet. Hun feedback was positief, elke pagina was snel door ze gevonden en het was duidelijk voor ze, waar ze zich bevonden op de website. Hun opinie was dan ook zeer positief.



9. Conclusie 9.1 Werken in een team Het werken in teamverband vereist sowieso een duidelijke planning en dat is bij ons niet echt een probleem geweest meestal, we zijn tamelijk vroeg begonnen met alles voor te bereiden en het verdelen, structureren en verzamelen van informatie voor de website enz… maar dan lag ’t project eventjes stil, waar ik me na een tijdje zorgen over begon te maken. Dan uit stress begon ik hard te werken en kreeg ik eerst de indruk dat Chris niet veel deed – die indruk verdween echter snel. Over onze samenwerking kan ik uiteindelijk niet echt klagen, Chris heeft z’n deel tot een mooi einde gebracht én uiteindelijk zijn we allebei wel min of meer hetzelfde ingesteld qua willen en doen over de website. 9.2 Ik, de volharder en perfectionist Wat ik van mezelf weet is dat ik niet makkelijk af te brengen ben van m’n doel. Wil ik iets in de website, dan zal het er staan ook – niet dat ik niet flexibel ben, maar aangezien we in onze voorbereiding zeiden van het zo en zo te doen, werk ik dat ook zo uit. Dat en m’n perfectie gericht naar de lay-out heeft denk ik af en toe wel voor een lichte frustratie bij Chris gezorgd ☺. 9.4 De leerkrachten Over de leerkrachten van het WT2 team – te PIH – heb ik niets op te merken. Bij enig probleem ivm de website heb ik altijd goede feedback gekregen om verder te kunnen. 9.3 De website zelf Het grafische van de lay-out is wat meer naar de sobere – neutrale kant, maar oogt mooi en de scriptjes die er achter zitten werken in alle browsers. De navigatie is naar mijn mening duidelijk en er wordt duidelijk aangegeven waar men zich bevindt. Wat ik ook belangrijk vind, is dat hij identiek wordt weergegeven in meerdere browsers. Kortom – het is een project dat ik met tevredenheid kan indienen voor evaluatie.


Logboek WT2. Grenspark de Zoom de Kalmthoutse Heide

Recommend Documents