Dus jij wilt graag zelf een mooie site gaan maken, maar je weet niet goed waar je moet beginnen? 

We gaan namelijk de komende weken in 8 stappen verschillende aspecten doornemen waar je rekening mee moet houden bij het maken van een goede websitelay-out.

We zullen het volgende behandelen:

1. Een goede voorbereiding betekent het halve werk
2. Met stijl en sfeer kun je je bezoekers raken
3. Maak een verpletterende indruk met vlakverdeling
4. Navigatie maakt je site populair bij je bezoekers
5. Zó kun je afbeeldingen het best gebruiken
6. Met de juiste lettertypen krijgt je site meer uitstraling
7. Laat je bezoekers terugkomen met unieke eigenschappen
8. Voldoet de lay-out van je site aan je wensen? Doe de final check!

Laten we meteen maar beginnen met het belangrijkste:

1. De voorbereiding

Een goed begin is het halve werk, zeggen ze wel eens, en dat is bij het maken van een lay-out niet anders. Om tot een goed resultaat te komen zul je eerst even wat tijd en nadenkwerk moeten investeren. Geen zorgen, dit verdien je DIK terug! ;-)

Zet een goede bak koffie, pak pen en papier en ga er eens goed voor zitten...
Want voordat je je handen uit de mouwen gaat steken zul je je eerst het een en ander moeten afvragen:
Wie is je doelgroep, wat heb je hen te bieden (what's in it for them), wat wil jij bereiken enzovoorts. Schrijf zo een hele lijst met vragen op en beantwoord deze vervolgens één voor één.

Tip 1: Vraag een vriend of vriendin om mee te denken, zo kun je elkaar telkens aanvullen.

Met deze antwoorden ga je nadenken over de inhoud. Wat ga je precies vertellen en op welke manier? Welke keuzes hebben je bezoekers om deze informatie te kunnen zien? Hoeveel tekst ga je gebruiken, en welke afbeeldingen? Welke menuknoppen zullen er zijn? Het lijkt nogal wat om in het begin al te moeten doen, dit kun je immers gaandeweg toch ook wel doen? Dat klopt, maar dit zal je in de meeste gevallen veel meer tijd gaan kosten. Het zal niet de eerste keer zijn dat iemand zijn hele lay-out moet omgooien omdat hij iets "over het hoofd" heeft gezien... Als je van te voren al weet wat er in je lay-out moet komen, kun je daar perfect op inspelen.

Als laatste zul je wat onderzoek moeten doen naar de gebruikspatronen van je doelgroep. Welk formaat monitoren hebben ze, en welke resolutie? Wanneer bezoeken ze je site, is dat als werk of als een vrijetijdsbesteding? Welke andere dingen doen ze als ze je site bezoeken? Wat zijn de interesses van je doelgroep, enzovoort. Deze informatie is van groot belang voor het onderdeel dat we de volgende keer zullen toepassen: stijl en sfeer bepalen!

Tip 2: 57% van de internetgebruikers heeft een beeldscherm met een resolutie van 1024x768 (984x588 ontwerpruimte), maar toch wordt er nog steeds vaak ontworpen voor 800x600 (760x430 ontwerpruimte) zodat de overige procenten ook mee kunnen genieten!

Ik wens je veel succes met het brainstormen en het maken van een goed plan.
Hoe meer je uitwerkt, hoe sneller je aan de gang kunt...

...en kunt blijven... ;-)

Zou het niet handig zijn als je elke tekst die je ergens vandaan haalt zonder ballast zou kunnen verwerken? Je staat er misschien niet altijd bij stil, maar als je bijvoorbeeld een stuk tekst kopieert vanaf een website, is de kans groot dat je méér kopieert dan alleen de tekst. Ik noem de achtergrond, het lettertype, ingesloten afbeeldingen enzovoort. Dit soort ballast is meestal overbodig en soms zelfs hinderlijk. Je HTML kan er bijvoorbeeld 'vervuild' door raken.

Gelukkig is er software ontwikkeld die het gekopieerde terugbrengt tot pure tekst. Programma's die dat voor je doen noemen we teksteditors.

Wat hierboven beschreven is, is slechts één van de mogelijkheden van een teksteditor. Scripts aanpassen en HTML-documenten bewerken zijn features waarvoor je de meeste van deze software ook kunt gebruiken.

Een voorbeeld van een teksteditor is Kladblok (Notepad); dit zit standaard op je PC in Windows XP (Programma's>Bureau-accessoires). Een prima programma, maar er zijn nog meer teksteditors verkrijgbaar, zoals:

NoteTab Light,
Crimson Editor,
UltraEdit

Zelf werken wij graag met dit laatste pakket, vanwege de mogelijkheden met betrekking tot HTML, Perl, PHP en Java. Als er bijvoorbeeld een foutmelding in PHP is, geeft Context aan op welke regel zich de fout bevindt. Daarnaast is het pakket heel eenvoudig te installeren en overschrijft het Kladblok/Notepad als standaard teksteditor.
Last but not least: het is gewoon gratis!

Bron: mijnhomepage.nl

Wanneer je in je browser een URL intypt en erachter komt dat je browser je uit laat komen bij een compleet andere URL nadat je op enter hebt gedrukt, dan ben je "doorgelinkt" naar een andere pagina. Dit is een redirect. Het valt dus direct op dat je bent doorgelinkt vanwege de URL die verandert in de adresbalk van je browserwindow. Soms word je doorgestuurd naar een andere website zonder dat de URL in de adresbalk verandert. In dat geval spreken we over een frame redirect.

Heb jij informatie op je website staan die niet iedereen zou mogen inzien? Of ben je van plan om bestanden en/of mappen op je site te plaatsen die alleen met een wachtwoord toegankelijk zijn? Dan raad ik je aan om dit artikel goed te lezen.

Alphamega biedt de mogelijkheid om je website te beveiligen. Je kunt ervoor kiezen om de gehele site of een gedeelte van je site (een bepaalde map) te beveiligen. Je kunt dit doen in het Technisch Control Panel. Je logt eerst in op het normale Control Panel en daar heb je de mogelijkheid om naar het Technisch Control Panel te gaan. Vervolgens klik je op "Directories" en daarna op "Add". Geef achter "Protected directory" de exacte naam in van de directory (map) die je wilt beveiligen. Bij "New user" vul je een gebruikersnaam in die je zelf hebt bedacht en daarna klik je op "Add". Dan bedenk je een wachtwoord (dat je dan 2 keer moet invullen, om er zo zeker van te zijn dat je geen fout hebt gemaakt bij het intypen van het wachtwoord) en klik je op "Update".

Na het beveiligen van een directory zal deze slechts enkel toegankelijk zijn voor een beperkte groep bezoekers, namelijk alleen voor de bezoekers die jij wilt toelaten. Als een bezoeker vervolgens naar een URL surft van een beveiligde directory, dan verschijnt er een loginscherm waarin gevraagd wordt om een gebruikersnaam en wachtwoord op te geven om zo toegang te krijgen tot de betreffende directory. Wordt er een verkeerde gebruikersnaam of wachtwoord ingevoerd, dan zal de webserver de toegang tot de directory weigeren.

Natuurlijk is er ook een andere manier, namelijk met behulp van .htaccess- en .htpasswd-bestanden. Let op: Dit werkt alleen op Apache webservers! In dit artikel kom je te weten hoe je met behulp van .htaccess- en .htpasswd-bestanden een directory kunt beveiligen.

Stap 1: Het .htpasswd-bestand:

In het .htpasswd-bestand worden de gebruikersnamen en de wachtwoorden in gecodeerde vorm opgeslagen. Voor het coderen van wachtwoorden zijn op het internet vele handige tools te vinden. Een voorbeeld hiervan kun je vinden door op Password generator te klikken. Mocht deze link niet meer werken dan kun je bijvoorbeeld in Google zoeken op "htpasswd generator" om een andere te vinden. Voer hier een gebruikersnaam (bijv. test) en 2 maal een wachtwoord (bv: abc123) in en klik vervolgens op calculate. Er verschijnt een nieuw venster met daarin de gebruikersnaam en het gecodeerde wachtwoord in de vorm van "gebruikersnaam:wachtwoord" ( test:ruOAVfZ7qD6eQ ). Selecteer en kopieer deze regel. Open een simpele teksteditor zoals Kladblok of Context en maak een nieuw bestand aan. Plak de gekopieerde regel in het bestand. Zo kun je dus voor iedere gebruiker een nieuwe regel aanmaken met de gebruikersnaam en het gecodeerde wachtwoord, gescheiden door een dubbele punt. Sla ten slotte het bestandje op als ".htpasswd" (vergeet de punt en de aanhalingstekens niet).

Stap 2: Het .htaccess-bestand:

Open een simpele teksteditor zoals Kladblok of Context en maak een nieuw bestand. Kopieer en plak vervolgens onderstaande code in het bestand.

AuthUserFile /exacte/path/naar/.htpasswd
AuthGroupFile /dev/null
AuthName 'Beveiligde pagina'
AuthType Basic
<Limit GET POST>
require valid-user
</Limit>

Pas het pad achter AuthUserFile aan naar het pad waar jij het .htpasswd-bestand gaat plaatsen. Je hebt hiervoor eerst het exacte pad naar jouw webruimte nodig. Dit verschilt per hostingprovider. Voor Alphamega is dit /home/httpd/vhosts/jouwdomein.ext/httpdocs. Heb je een andere hostingprovider dan zul je dus eerst moeten achterhalen wat het exacte pad is. Dit doe je als volgt: maak een PHP-bestandje met de naam phpinfo.php en upload deze naar de webserver. Het phpinfo.php-bestand bevat slechts de volgende code:

<?php
phpinfo()
?>

Open het bestandje in een browser (http://www.jouwdomein.ext/phpinfo.php) en je krijgt de PHP-instellingen van de webserver te zien. Zoek vervolgens naar de instelling DOCUMENT_ROOT om het exacte pad naar jouw webruimte te vinden. Kopieer en plak dit pad achter AuthUserFile. Nu is dit alleen nog maar het pad naar je webruimte. Heb je daar bv. je .htpasswd-bestand staan, dan ziet het volledige pad er als volgt uit: /home/httpd/vhosts/jouwdomein.ext/httpdocs/.htpasswd. Staat het .htpasswd-bestand in een andere directory, dan zul je dit pad dus nog moeten uitbreiden.

AuthName bevat de tekst die in het loginscherm boven de invoervelden 'gebruikersnaam' en 'wachtwoord' komt te staan (in het voorbeeld is dit "Beveiligde pagina"). Je mag natuurlijk ook iets anders verzinnen.

AuthGroupFile en AuthType: hier zal ik verder niet op ingaan en deze instellingen kun je ongewijzigd overnemen. Dit geldt ook voor het deel tussen <Limit> en </Limit>.

Sla ten slotte het bestandje op als ".htaccess" (vergeet de punt en de aanhalingstekens niet).

Stap 3: Het .htaccess en .htpasswd-bestand uploaden:

Start een FTP-programma zoals Smart FTP en upload vervolgens het .htpasswd-bestand naar de locatie die je hebt aangeven in het .htaccess-bestand en het .htaccess-bestand in de map die je wilt beveiligen. Ziezo, de map is beveiligd. Je kunt dit testen door nu naar de URL te gaan van de beveiligde map en als alles goed is gegaan krijg je nu een loginscherm te zien.

Veel succes met het beveiligen van je website