Archief Prof. Dr. Web - Hoe bouw ik een website?

De Boeken | De Talen | De Editors | De Style Sheets | De Frames vs De Tabellen
Het Opleuken | De Site-Automatisering | Het Jatten | Het FTP-en | De Providers
De Tips | De Link

In dit stuk geef ik een globaal overzicht van wat nodig is voor het bouwen van een website. Het is niet de bedoeling hier zoveel te vertellen dat je ook direct kunt gaan bouwen, maar meer om je de weg te wijzen naar de informatie die je nodig hebt. Zie daartoe vooral ook 'De Link', onderaan de pagina.

De Boeken - top
Er zijn ontzettend veel boeken over het maken van websites op de markt. De beste daarvan (maar Engelstalig) zijn van de hand van Laura Lemay, Uitgeverij Sams. Daarnaast bestaan er ettelijke sites op het web die over niets anders gaan.

De Talen - top
Websites worden gebouwd in HTML, DHTML of Flash.

  • HTML lijkt op de zetcodes die worden gebruikt om, in tekst, voor een drukker aan te geven welke stukken er vetgedrukt of in een andere puntsgrootte moeten worden weergegeven. HTML is dan ook geen programmeertaal, dus makkelijker te leren. Goed HTML-en is niettemin even moeilijk als goed programmeren. Daarover hieronder meer. Hoe HTML eruitziet kun je bekijken als je de broncode van deze pagina opvraagt door in de menubalk van je browser voor 'Beeld/Bron Weergeven...' te kiezen.

  • DHTML staat voor Dynamic HTML. Het komt erop neer dat je in DHTML zowel HTML-code als andere programmeertalen naar keuze kunt gebruiken. Het is dus opgeleukte HTML. Veel moeilijker om te schrijven, maar doorgaans doe je dat nauwelijks. DHTML maak je in een drag-and-drop applicatie, met de muis dus.

    Het voordeel van DHTML boven HTML is dat je meer kunt, zoals bijvoorbeeld 'layeren' (het in de layout over elkaar heen plaatsen van elementen). Het nadeel is dat je minder in de hand hebt hoe de code eruitziet. Dat kan aanzienlijk tragere pagina's opleveren. Daarnaast is DHTML voor Netscape anders dan voor de Microsoft Internet Explorer en is DHTML alleen bruikbaar in de laatste browsertypen.

    Of je van dat laatste een probleem moet maken hangt uiteraard af van de users: als niemand van hen met Netscape naar je site kijkt hoef je er ook geen rekening mee te houden. Maar als je je direct al beperkt tot een bepaald browsertype kan het ook zijn dat je juist daardoor alleen maar users trekt met dat browsertype.

  • Flash lijkt helemaal niet op HTML. Flash bouw je op dezelfde manier als DHTML, maar in een specifiek programma (Flash) voor een specifiek programma (de Flash-plugin). De browser van de user moet namelijk, om Flash te kunnen bekijken, uitgerust zijn met de plugin. In de nieuwste browservarianten is die standaard ingebouwd. Flash stelt je in staat bewegende beelden te gebruiken. Eigenlijk is het een animatie-programma voor het Web.

    Het nadeel aan Flash is dat het relatief traag werkt naar de user toe: die moet veel downloaden. Dat is niet erg als je site bijvoorbeeld een fansite is, want dan zal een user graag twee uur op zeldzame info over zijn idool wachten. Voor zo'n site werkt Flash bevrijdend bij het ontwerpen. Je kunt er werkelijk hele mooie dingen mee doen. Maar als je een nieuwssite hebt is Flash een onzalig plan.

    Daar komt bij dat Flash slecht vindbaar is. Zoekmachines nemen het doorgaans niet op. Dat kost dus een hoop bezoek, op je website. En dat is één van de belangrijkste factoren in het succes van een website.


In het onderstaande concentreren we ons verder op HTML, omdat Flash zichzelf uitlegt als je het koopt, en je DHTML alleen wilt weten als je goed genoeg bent in website-bouwen om je vraag niet gesteld te hebben.

De Editors - top
HTML maak je in een veredelde tekstverwerker. Van die editors zijn er meerdere duizenden gratis verkrijgbaar op het net. Ze bestaan in drie soorten:

  1. bijna pure tekstverwerkers, met een paar mogelijkheden om veel voorkomende HTML-tags in het bestand te plaatsen, zonder dat je ze moet typen

  2. editors die daarnaast standaard-plugins (Java, JavaScript of allebei) en/of de mogelijkheid tot maken en gebruik van stylesheets bevatten en

  3. editors waarin je met de muis de elementen plaatst, die de code voor je aanmaken.


De derde soort werkt uiteraard het gemakkelijkst. Maar er zit een stevige adder onder het gras. Drag-and-drop editors zijn makkelijk bij de eerste bouw. Maar als in een later stadium stukken van een site moeten worden aangepast kan dat grote hoofdpijn opleveren.

Daarnaast is de controle over hoe de code eruitziet veel minder groot. Dat betekent dat er een hoop overbodige code instaat, zoals bijvoorbeeld de naam van het gebruikte programma. En dat betekent dat je bestand nodeloos trager wordt naar de user toe, bij grote bestanden soms heel veel.

Bovendien maken kleine beetjes een boel als het gaat om grote sites, waarbij betaald wordt voor de hoeveelheid data die van de site wordt opgevraagd, zoals bij veel bedrijfssites het geval is. Het is daarom altijd goed te streven naar zo klein mogelijke HTML-bestanden. Je kunt achteraf de bestanden die je in een drag-and-drop editor maakt weer bij-editen, maar waarom zou je het programma dan überhaupt gebruiken?

Pas verder op bij gebruik van Microsoft Frontpage. Daar zitten namelijk een aantal fratsen in die alleen werken als op de webserver waarop je site gaat draaien de Microsoft Frontpage-Extensies zijn geïnstalleerd. Iets dat veel providers niet doen vanwege de veiligheidsrisico's die daaraan voor de provider kleven.

De tweede soort editors heeft als nadeel dat de plugins snel vervelen en herkenbaar maken welke editor is gebruikt, voor de oplettende kijker.

Het nadeel van de eerste soort is dat je alles met de hand moet doen, al kun je grote delen copy-pasten (knippen of kopiëren, en plakken). De wereld is niet perfect.

De Style Sheets - top
Met behulp van stylesheets (speciale kleine stukjes code) kun je voor grote groepen pagina's standaardlayout definiëren. Die hoef je dan maar op 1 plek te veranderen als je de look van zo'n groep pagina's wilt wijzigen. Gebruik van stylesheets is relatief eenvoudig. Er is veel informatie in boeken en op het web over te vinden. Het is echter ook eenvoudig dezelfde beheersbaarheid zonder stylesheets te bereiken, door goed gebruik van codeerconventies en een goed zoek- en vervang-beleid. Voordeel aan stylesheets is zeker dat je broncode over het geheel van de bestanden gezien er kleiner van wordt.

Leuk aan stylesheets is dat je er heel veel mee kunt dat je in HTML niet kunt. Nadeel (Stevig) is dat niet alle browsers dat ondersteunen.

De Frames vs De Tabellen - top
Om in HTML vlakken in een pagina te maken kun je gebruik maken van twee methodes: frames en tabellen. Het verschil is dat het met frames mogelijk is alleen bepaalde vlakken in een pagina te verversen als de user op een link binnen de site klikt. Bij tabellen moet altijd de hele pagina herladen worden.

Het nadeel aan frames is dat de site onoverzichtelijker is in beheer. Bovendien wordt de plaatsing van de scheidslijnen door de verschillende browsers verschillend geïnterpreteerd. Daardoor heb je minder controle over het aanzien van je layout. Je kunt een eind komen met JavaScript-browserherkenning, maar het nadeel daaraan is dat het de pagina vertraagt, en zelfs met die browserherkenning hou je in veel layouts verschillen tussen de verschillende weergaves.

Het nadeel aan tabellen is dat ze veel moeilijker zijn om de eerste keer te maken. Maar als dat eenmaal gebeurd is valt het beheer ervan mee (dat komt dan voornamelijk neer op goed copy-pasten) en bieden tabellen een veel grotere controle over de layout. Daarnaast zijn ze minder rekenwerk voor de browser en dus sneller dan frames. Er wordt vaak beweerd dat dat niet zo is, maar dat wordt vaak gezegd bij pagina's met een ingewikkelde layout en dus veel tabellen. Zo'n layout kun je helemaal niet maken met alleen frames. Meer dan zes vlakverdelingen in een pagina met frames maken de pagina onaanvaardbaar traag.

Het Opleuken - top
Pagina's met alleen tekst zijn saai, dus leuken we ze op met al dan niet bewegende plaatjes, filmpjes en andere vrolijkheid. Die andere vrolijkheid is meestal Java of JavaScript. Er is een wereld van verschil tussen de twee.

Java houdt in dat je een (niet altijd klein) programma naar de user stuurt, dat vervolgens op diens machine wordt uitgevoerd. Het voordeel daaraan is dat de internet-verbinding op dat moment niet meer door het programma belast wordt. Het nadeel is dat het programma voor oude computers onevenredig zwaar kan zijn, en dat de user bij trage verbindingen soms lang moet wachten voordat het binnen is. Java is bovendien een programmeertaal en dus niet makkelijk om te leren. Java is vaak jatbaar, maar dat verveelt door de herkenbaarheid.

JavaScript is net als HTML geen programmeertaal. Het is een scripting-language die de browser in staat stelt simpele taken uit te voeren op grond van relatief eenvoudige code, die echter wel veel meer op programmeercode lijkt dan op HTML. Het grote voordeel aan JavaScript is dat het weinig tijd kost het over te sturen en meestal snel wordt uitgevoerd door de browser (omdat het geen zware taken kan uitvoeren). Het nadeel is dat de mogelijkheden ervan relatief beperkt zijn en dat de user JavaScript kan uitzetten in de browser. Dat laatste is meer theoretisch dan praktijk.

Over JavaScript zijn weer veel boeken beschikbaar. En er zijn heel veel sites waar je het niet alleen kunt leren, maar ook veel stukken bestaand JavaScript kunt jatten.

De Site-Automatisering - top
Bezint eer ge begint. Databases zijn handig voor grote sites met veel info maar overkill voor alle andere sites. Daarnaast is de toepassing ervan vaak duur en ingewikkeld. Dat geldt ook voor robot-toepassingen: cgi-scripts en andere automatische verwerkingseenheden. Soms kan een provider je hiermee vergaand helpen (kijk zeker naar de mogelijkheden die je provider biedt); maar vaker moet je naar een duur bedrijf om het voor je te laten regelen. Weeg in alle gevallen het nut tegen de rompslomp en kosten af.

Het Jatten - top
Iedereen kan de broncode van in HTML gebouwde webpagina's bekijken. Het nadeel daaraan is dat je nauwelijks kunt voorkomen dat er van jou gejat wordt. Het grote voordeel is dat je het zelf ook kunt doen. Dat maakt het makkelijk om te leren hoe je dingen doet die je bij anderen ziet. En beter goed gejat dan slecht verzonnen.

Het FTP-en - top
Als je klaar bent met bouwen, moet je je HTML-bestanden, plaatjes, filmpjes en plugins 'uploaden': neerzetten op de webserver zodat de buitenwereld ze daarvandaan kan opvragen. Dat doe je met behulp van het File Transfer Protocol, dat de verbinding tot stand brengt tussen jouw computer en de server. Er zijn vele gratis programma's voor beschikbaar op het net, maar het hangt van je provider af welk programma je kunt gebruiken.

De overeenkomst tussen die programma's is dat je twee vensters ziet en bestanden met de muis sleept van het ene venster (jouw computer) naar het andere (de server). Om een FTP-programma te kunnen gebruiken moet je uiteraard beschikken over een login-combinatie (userID en wachtwoord) voor de webserver.

De Providers - top
Ruimte op webservers kun je halen bij een veelheid aan providers. Bij sommige kost het geld, andere opereren gratis. Maar die verdienen hun geld dan met reclame die ze in of aan je pagina hangen. Dat is natuurlijk storend. Bovendien opereren de gratis providers meestal via het web en dat werkt trager dan via FTP. Omdat ze gratis zijn, tenslotte, zijn hun webservers vaak trager dan die van de betaalde providers: ze hebben het veel drukker. Een betaalde provider heeft bovendien meestal een helpdesk die je lastig kunt vallen met de meest bizarre vragen.

De Tips - top
  • Teken je site goed uit op papier, voordat je begint. Weet wat je gaat bouwen voordat je begint met bouwen, dat scheelt je heel veel hoofdpijn.

  • Hanteer een duidelijke folderstructuur. Scheidt plaatjes en andere elementen van HTML-bestanden. Dat maakt het beheer ervan makkelijker, want het geheel wordt overzichtelijker.

  • Pas die structuur ook toe in de naamgeving van bestanden. Laat de naam van zowel het HTML-bestand als het opleuk-element weergeven wat de inhoud ervan is, maar ook wat de plaats ervan is binnen het bestandssysteem van de site. Dat voorkomt grotendeels het per ongeluk in verkeerde folders terechtkomen van onderdelen van de site, want bevordert weer de overzichtelijkheid.

  • Maak actief misbruik van de mogelijkheid om lange bestandsnamen te gebruiken. Een naam als 'nieuws_formule1_05072000_sillyseason_villeneuve.jpg' lijkt op het eerste gezicht onzinnig lang. Maar webservers kunnen er prima mee overweg en het maakt het bestandsbeheer uitermate overzichtelijk. Weliswaar levert het meer code op in de verwijzingen naar die bestandsnamen, maar dat nadeel weegt absoluut niet op tegen de voordelen in het beheer. Ooit geprobeerd om achteraf die mooie foto van Villeneuve te zoeken tussen bestanden die namen hebben als x89vrl.jpg en z_2m3.jpg?

  • Haal de winst op het gebied van het kleinhouden van je code uit het structureel weglaten van overbodige elementen in de HTML. Vaak kun je aanhalingstekens om parameters als kleurcoderingen weglaten, bijvoorbeeld. Experimenteer met de veiligheid van dat soort structurele codeverkleiningen in verschillende browsers. Als je in een team werkt, maak er dan onderling afspraken over.

  • Laat de titel van je pagina corresponderen met de bestandsnaam en de namen van de bestanden die erin worden aangeroepen. Dat beheert makkelijker, en het is bovendien effectiever richting zoekmachines. Die worden er blij van.

  • Vergeet nooit de ALT-codes bij de verwijzingen naar de plaatjes. Die worden weergegeven als de browser het plaatje niet aankan (veel mensen vergeten dat met name de financiële en medische wereld vaak naar het web kijken in tekstmode-browsers met het oog op de tijdwinst; daarnaast kan iedereen die dat wil weergave van plaatjes uitzetten in de instellingen van de browser - en tenslotte wordt, als er géén ALT-code staat, door 'talking browsers' iedere keer 'IMAGE' geroepen tegen de visueel gehandicapte), en als een plaatje geen ALT-code heeft komt er heel groot 'IMAGE' te staan. Vooral lelijk als je pagina 16 plaatjes bevat.

    Toegegeven, op zich komt een situatie waarin de ALT-code zichtbaar is weinig voor, maar er vanaf het begin af aan rekening mee houden is een koud kunstje. Kleine moeite voor een stukje professionele winst. Als een plaatje geen ALT-code hoeft te hebben (als de pagina al een grote kop 'stoelen' heeft is het onzin om, bij de foto van de stoelen, 'stoelen' als ALT-code op te geven, omdat het er dan twee keer zou staan) zet je gewoon niks tussen de aanhalingstekens en ziet de user-met-de-tekstmode-browser dus ook niets op die plek. Heel elegant.

  • Laat inspringen achterwege in de code. Inspringen is heel handig voor de overzichtelijkheid van programmeercode en dus wat iedere programmeur wordt aangeleerd, maar in HTML is iedere spatie een byte die overgestuurd moet worden. De onoverzichtelijkheid die ontstaat door het weglaten ervan is op te vangen door het gebruik van codeerconventies.

  • Als je ervoor zorgt dat je code er altijd hetzelfde uitziet (in een team maak je dus afspraken over wanneer je in de code naar een volgende regel springt en wanneer niet) is het heel makkelijk om in grote aantallen bestanden tegelijk aan patroonherkenning te doen. Zo signaleer je snel fouten, zorg je ervoor dat in een team iedereen elkaars code begrijpt en dus meer uitwisselbaar is, versnel je de werkzaamheden en boek je terreinwinst qua bestandsgrootte.

  • Kies met het oog op het bovenstaande voor een editor die je in staat stelt op een gemakkelijke manier met grote hoeveelheden bestanden te werken.

  • Bewaak ook visueel naar de user toe je site-structuur. Zie niet iedere pagina als een vorm te geven eenheid op zich, maar zorg voor consequentie door de hele site heen. Dat geeft een rustiger beeld en zorgt ervoor dat de user je site beter begrijpt en er makkelijker doorheen manouvreert. Streef in je layout sowieso naar die rust: kerstbomen zijn koel-met-kerstmis, maar de rest van het jaar hoofdpijnverwekkend.

  • Als je een site met vaststaande afdelingen hebt, hanteer dan binnen zo'n afdeling een vaststaande breedte of hoogte voor de afbeeldingen. Dat zorgt voor een rustig beeld en brengt de logica van je indeling-in-afdelingen dichterbij de user.

  • Denk klein in het visuele. Niet alleen qua aantal KB, maar ook wat visuele omvang betreft. Kleine elementen staan op een webpage professioneler en gladder dan grote.

  • Denk 'minder is meer'.

  • Gebruik geen Times New Roman als font. Dat is uit.

  • Vermijd de mededeling 'under construction'. Een goede site is altijd under construction.

  • Laat je site voordat je 'm wereldkundig maakt testen door nul-users. Je oudoom, je achtertante, als ze maar geen ervaring met Internet hebben. Er is geen snellere methode om de onduidelijkheden te lokaliseren.

  • Meld je site goed aan bij zoekmachines als-ie af is. Hoe je dat doet vertel ik je een andere keer, want dat is een verhaal apart.


De Link - top
Html.Pagina.nl



Back | Home | Mail