Hoe een Test site bouwen.

Terug naar de inhoudstafel

Doelstelling van deze Steples

• De stappen tonen die nodig zijn om van de website een versie te maken die volledig kan worden bekeken en uitgeprobeerd zonder deze online ter beschikking te moeten stellen van de gebruikers of bezoekers.
• Met andere woorden: de mogelijkheid beschrijven om de site volledig en integraal te kunnen ontwikkelen en uittesten vooraleer deze online wordt geplaatst.

Steplessen die best gevolgd zijn vooraleer deze Steples te starten

Voorkennis

Logische vervolg

• .

Waarom een testsite maken ?

Sitestepper heeft verschillende handigheden om een website gemakkelijk en snel te kunnen onderhouden of aan te maken.

Toch vergt de aanpassing van een website verschillende handelingen die dienen te gebeuren vooraleer deze klaar is om aan de buitenwereld te worden getoond.

Zo zullen er, allicht, verschillende bronteksten moeten worden aangepast of moeten worden geschreven.

Allicht zullen er afbeeldingen toegevoegd moeten worden aan de site.

Hebt u wijzigingen aangebracht aan de stylesheets.

Of worden er nieuwe pagina's geschreven die dan weer moeten worden opgenomen in een menu achtige structuur op de site.

Test de site uit door middel van een testsite !

In feite is de ontwikkeling van een website een handeling die op één belangrijk punt kan worden gelijkgesteld met het ontwikkelen van programma's (zoals Sitestepper zelf), de ontwikkeling van macro's (in bijvoorbeeld Micorosft Excel) of de ontwikkeling van databasemodules in Microsoft Access: de site dient het best volledig uitgetest te worden vooraleer deze af te leveren aan gebruikers – in website termen: vooraleer de site online worden geplaatst en dus kan worden bekeken door de bezoekers.

Sitestepper is dan ook vanaf het begin ontwikkeld met de mogelijkheid om een site door middel van, bij wijze van spreken, de druk op één knop volledig en integraal te genereren op een plaats die niet noodzakelijk dezelfde is als de plaats waar de site uiteindelijk online wordt geplaatst.

Stappen om een testsite aan te maken

Aanmaken van een nieuwe build target

Door het aanmaken van een nieuwe Sitestepper Build Target kan zeer snel een site worden aangemaakt die functioneel een exacte copie is van de 'echte' site. Met 'echte' site wordt bedoeld de site die uiteindelijk aan de bezoekers zal gepresenteerd worden en dewelke online zal worden geplaatst via een URL of webadres die de bezoekers kennen.

De websiteparameters zijn immers afhankelijk van de gekozen build target en kunnen derhalve waardes krijgen die veranderen van build target tot build target.

Bij het genereren van de website zullen de websiteparameters worden ingevuld in de gegenereerde webpagina's (door het vervangen van stepvars), en dus zal de gegenereerde test-website volledig gelijk zijn aan 'echte' website, met uitzondering van de verwijzingen naar afbeeldingen, stylesheets, javascripts en linken naar andere pagina's.

Start Sitestepper (of verlaat StepGen zodanig dat het Sitestepperprogramma terug op het scherm wordt getoond).

Selecteer de build target waarvan een testversie dient te worden aangemaakt.

Kies de menu-optie: 'Dupliceer Build-Target' uit de menu 'Build-target' of het kontekstmenu (door rechts te klikken op de geselecteerde build target) gebruik de sneltoets Ctrl-D.

Geef de naam in van de nieuwe build target (kies bij voorkeur een naam die duidelijk maakt dat het over een testversie gaat), en klik 'Ok'.

De nieuwe build target zal worden bijgevoegd in de lijst onder het geselecteerde Sitestepperproject.

Door het kiezen van 'Build Target – Start' kan Stepgen worden opgestart met de testsite als actieve build target.

Zowel de titelbalk als de tekst op de eerste tab van de websiteparameters zal aanduiden dat de testsite geladen is.

Merk op dat de projectboom identiek dezelfde is als de projectboom van de andere site. Sterker nog: elke verandering aan een projectboom in hetzelfde Sitestepper-project zal automatisch worden gebruikt door elke build target die actief zijn in het project. Want uiteindelijk is dit de bedoeling!

Visueel aanduiden dat we in een testversie aan het werken zijn

Een eerste (kleine) visuele wijziging die we kunnen uitvoeren om duidelijk te maken dat we in een andere build target aan het werken zijn, is het veranderen van de kleur van de niet-actieve velden.

Na het kopiëren van de originele built target worden deze inactieve velden getoond in dezelfde inactieve kleur als de build target die werd gekopieerd.

Deze inactieve kleur is echter gebonden aan de build target. Door elke build target een andere kleur te geven, kan dan ook visueel worden duidelijk gemaakt in welke build target u aan het werken bent.

Veranderen van de inactieve kleur van groen naar geel

In het huidige voorbeeld is de kleur van de niet-actieve velden groen.

Kies de menu-optie: 'Project – project parameters' om deze te veranderen.

Het volgende scherm wordt getoond:

Bovenaan het scherm wordt de actieve build target getoond.

Door op de -knop te klikken rechts naast het veld 'Inactieve kleur' kan een andere kleur worden geselecteerd. De rechthoek rechts naast dit veld toont steeds de op dat moment geselecteerde kleur (behalve indien nog geen kleur werd geselecteerd voor de huidige build target – in dat geval wordt deze rechtshoek zwart gekleurd en is de waarde van het 'Inactieve kleur'-veld leeg)

Kies 'Opslaan' om terug te keren naar het Stepgen programma. De inactieve kleur (die groen was) zal worden veranderd in de nieuwe kleur (hier geel).⁹

Aanpassen van de websiteparameters

Zowel de waardes onder de tab 'Lokale folders' als de waardes 'Web site folders' dienen te worden aangepast omdat deze waardes speciaal gebruikt worden om de fysische en logische locatie van de website aan te duiden.

Pas de lokale folder aan

Kies de menu-optie: 'Project – editeer projectinstellingen' om de velden van de websiteparameters actief te maken (zodanig dat de waardes kunnen worden veranderd).

Als alternatief kan de -knop worden gebruikt.

Klik de 'Lokale folders'-tab aan.

In het veld 'website-folder' wordt de folder ingevoerd waar de website wordt weggeschreven.

Dit is een folder die bereikbaar moet zijn vanaf de PC waar Sitestepper op draait. Het is deze folder die door de webserver zal worden gebruikt om de pagina's in te lezen vooraleer om deze terug te geven aan het internetprogramma.

De testsite zal worden aangemaakt in een subfolder van de bestaande website.

We dienen dan ook hier een subfolder te selecteren.

Klik de '...'-knop rechts naast het veld.

Een volgend scherm zal worden getoond:

We dienen een nieuwe folder aan te maken, maar vermits er geen knop voorzien is om een nieuwe folder aan te maken, dienen we deze in te voeren achteraan de reeds bestaande folder:

Opgelet: vergeet niet het '\'-karakter tussen de reeds bestaande folder en de nieuwe folder.

Sitestepper zal een vraag stellen ter confirmatie dat de nieuwe folder mag worden aangemaakt¹⁰.

Klik 'Yes' of 'Ja'. De 'website folder zal de nieuwe folder tonen.

Pas de website folder aan

Nu dat een andere folder ingevoerd is waar de website zal worden geschreven, dienen we ook de effectieve URL's (of web-adressen) aan te passen, zodanig dat alle verwijzingen in de gegenereerde site wel degelijk naar de testversie wijzen.

Klik de 'Web site folders' tab aan in de websiteparameters (zie Afbeelding 48: Dupliceer build target op pagina 87).

De drie velden dienen een verwijzing te krijgen naar de testversie van de website.

Vermits we een subfolder hebben gebruikt voor de testversie, dienen we ook deze zelfde naam bij te voegen bij de drie bestaande URL-waardes.

Kies de menu-optie: 'Project – Bewaar projectinstellingen' of klik op de -knop om de waardes te bewaren. De websiteparameters zullen terug inactief worden (en dus worden gekleurd in de gekozen gele kleur).

Test de testversie uit !

Genereer de testversie van de website

Als we nu de stappen volgen die ook zijn beschreven bij het aanmaken van de eerste site in 10 minuten – zie De 4 stappen op de eerste site 'online' te brengen op pagina 27 - dan hebben we een volledige testversie van de website online.

Kies de volgende 4 stappen:

1. Build de website via de menu-optie: 'Project – Build all'.
2. Kopiëer de afbeeldingen naar de testsite via de menu-optie: 'Project – Copieer afbeeldingen naar de site'.
3. Kopiëer de style sheets naar de testsite via de menu-optie: 'Project – Build stylesheets naar de site'.
4. Genereer de javascripts naar de testsite via de menu-optie: 'Genereer - 'Build Javascripts'.

Bekijken van de testveTer rsie van de website

Indien de site nu wordt bekeken (en deze kan worden gestart via de menu-optie: View – View root' (F8), dan zal de testversie van de website worden getoond.

Alle verwijzingen of URL's op de volledige site zullen verwijzen naar deze testversie, zodanig dat de testversie volledig kan worden uitgetest.

Vermits de bezoekers van uw site, deze nieuwe folder niet kennen (zij hebben immers geen enkele reden om 'http://www.uwsite.be/testversie' in te voeren in het internetprogramma), zal niemand de testversie bezoeken of zien, behalve diegene die weten dat de subfolder bestaat.

Met andere woorden: een zeer gemakkelijke manier om de volledige site in test online te brengen, met alle functionaliteiten, volledig zoals de finale versie er uit zal zien, maar zonder dat andere personen buiten u zelf de site in test kunnen zien.

Elke URL (of web-adres) in de volledige site zal nu verwijzen naar de testversie van de site ! Als de cursor over één van de linken o p de site wordt bewogen, zien we in de adresbalk (onderaan het scherm in Internet Explorere) dat deze link wel degelijk verwijst naar 'http://www.sitestepper.dev/eerste website/nl/testversie/fotos.htm'.

En dit geldt eveneens voor alle afbeeldingen, alle style sheets en alle javascripts.

De testsite is ok – welke stappen om de echte stappen online te brengen ?

Na het uitvoeren en uittesten van de noodzakelijke veranderingen aan de site in de testversie van de site, komt het moment dat deze klaar is en dat, bijgevolg, de echte site online mag worden geplaatst.

Voer de volgende stappen uit:

1. Verlaat het Stepgen programma's
2. Selecteer in het Sitestepperpgrogramma de built-target die verwijst naar de echte website.
3. Kies de menu-optie: 'Build Target – Start' (dubbelklikken op de naam van de build-target kan ook).

5. Build de website via de menu-optie: 'Project – Build all' (enkel nodig indien pagina's veranderd werden – maar dit is natuurlijk wel heel waarschijnlijk).
6. Kopiëer de afbeeldingen naar de testsite via de menu-optie: 'Project – Copieer afbeeldingen naar de site' (enkel nodig indien afbeeldingen werden bijgevoegd of werden veranderd).
7. Kopiëer de style sheets naar de testsite via de menu-optie: 'Project – Build stylesheets naar de site' (enkel nodig indien u iets veranderd hebt aan de stylesheets).
8. Genereer de javascripts naar de testsite via de menu-optie: 'Genereer - 'Build Javascripts' (enkel nodig indien er iets veranderd werd aan de javascripts).

Indien de echte site nu wordt bekeken, zijn alle veranderingen (dewelke zijn uitgetest in een testomgeving) nu ook zichtbaar voor alle bezoekers !

Praktijkvoorbeeld

Ter illustratie volgt hier een praktijkvoorbeeld die wordt gebruikt voor de ontwikkeling van de Sitestepper-website.

Deze site wordt zowel onderhouden op kantoor als thuis.

Op kantoor wordt de site onmiddellijk aangemaakt op de webserver (dewelke de letter W: kreeg toegewezen). Deze versie zal dus toegankelijk zijn door iedere bezoeker van het internet via de url: www.sitestepper.be. Met andere woorden, elke verandering die wordt uitgevoerd is onmiddellijk zichtbaar voor het ganse internet..

Thuis wordt de site onderhouden (via Windows/Xp Professional) op de locale pc (via het zogenaamde localhost-adres).

Indien grote veranderingen worden aangebracht is een testversie van de Sitestepper-site aangemaakt dewelke is geplaatst in een folder die niet te raden is door de bezoekers van de site. Deze folder heet: 'niefste'.

De volgende tabel geeft de waardes weer van de locale folders en de website folders.

Ontwikkeling op kantoor
De 'echte' online website
Locale website folder	W:\inetpub\sitestepper
Webroot	http:\\www.sitestepper.be11
De 'test' online website
Locale website folder	W:\inetpub\sitestepper\niefste
Webroot	http:\\www.sitestepper.be\niefste 12
Ontwikkeling thuis
Locale website folder	C:\inetpub\sitestepper
Webroot	http:\\www.sitestepper.dev

Tabel 6: Praktijkvoorbeeld foldernamen voor websites

Ter info: de instellingen zoals deze in voorgaande tabel worden getoond voor de ontwikkeling thuis zijn eveneens in gebruik op de laptop (teneinde demo's te kunnen geven van Sitestepper).

Terug naar de inhoudstafel