Eenvoud

Mon, 22 Nov 2004 18:17 +0100

Webdezign

In de diverse nieuwsgroepen die als topic schrijven en ontwerpen voor het WWW hebben, komen geregeld nieuwe lieden met hun vragen en vraagtekens over hun eigen producten. Vaak zie je een sterke focus op het dezign van de eigen pagina's, liefst bereikt door uitbundig te DTP'en met een zogenaamd WYSI(n)WYG-programma, zoals FrontPage of Dreamweaver.

Op zich is er niet heel veel fout aan die WYSI(n)WYG-programma's¹⁾. Het probleem is dat deze programma's voor een beginnende schrijver/ontwerper erg veel mogelijkheden heeft en maar weinig remmingen en belemmeringen. Hoewel het lijkt of er fraaie effecten worden bereikt, blijkt bij proefdraaien van de pagina's dat geregeld, dat de pagina's in bijvoorbeeld andere browsers dan Internet Explorer niet getoond kunnen worden of slechts met hele wonderlijke en onbedoelde en ongewenste layout effecten.

Dat is dan het moment waarop zo'n webdezigner in één van de nieuwsgroepen opduikt. Een voorbeeld is het lopende draadje over new page... little help please? in de nieuwsgroep alt.html.

Schrijven en ontwerpen voor het internet

Eigenlijk heb ik voor mezelf pas recent de basis voor een goede internetpagina voor het eerst geformuleerd. In het berichtje Re: new page... little help please? van Mon, 22 Nov 2004 10:13:33 +0100 leg ik voor het eerst een ander uit hoe ik nu tegen schrijven en ontwerpen voor het internet aankijk.

Basis

Een schrijver/ontwerper voor het internet kan niet zonder een absoluut en grondig begrip over structuur en semantische markup van zijn of haar pagina's.

Structuur

Met structuur bedoel ik het correcte gebruik van elementen in een pagina. Dat begint met het juist openen en sluiten van de elementen (het juist nesten), eigenlijk zelfs met <html>, <head> en <body> al. Er zijn lieden zat dit elementen in een verkeerd basisblok zetten of zelfs buiten alle basisblokken.

Maar ook de tags van andere elementen kan je niet zonder meer dooreen gebruiken. Block level elements kan je niet laten overlappen. Een volgende constructie is dus onmogelijk:

<h4>Een onmogelijke constructie

<p>Ik verzin 't niet,</h4>

er zijn mensen zat, die niet weten
dat dit een fout is in de
structuur van je pagina.</p>

Voor inline elements geldt een soortgelijke regel. Je kan ze nesten tot je een ons weegt, maar je kan ze met de huidige HTML4.01-spec's niet slechts gedeeltelijk laten overlappen²⁾. Ook de volgende markup bevat dus een fout in de structuur:

<h4>Een onmogelijke constructie</h4>

<p><span class="begin">Hier zijn
de <a
href="glossary.html#block_level_elements"
lang="en">Block level</span> elements</a>
wel goed gestructureerd, maar gaat 't fout met
de <a href="glossary.html#inline_elements"
lang="en">inline elements</a>

<!--
Het eerste <span> element en het
eerste <anchor> element zijn fout genest.
-->

Het eerste dat je als schrijver/ontwerper voor het internet moet leren, is hoe je de verschillende elementen die je nodig hebt (en dat zijn er helemaal niet veel) correct in je pagina's opneemt.

Elementen en Attributen

Na het verkrijgen van het meest basale begrip over de juiste structuur van een html-pagina en de diverse block en inline elementen daarin, komt het leren begrijpen van waar de verschillende html-elementen voor staan. Het willen gebruiken van Hyper Text Markup Language betekent, dat je aan inhoud, content, semantiek meegeeft.

In plaats van voor een stukje tekst aan te geven 'Dit is 16 punten groot', geef je met je markup voor datzelfde stukje tekst aan 'Dit is een tekstkopje'. In plaats van <font size="16pt">, gebruik je <h2>. Je geeft dus in eerste instantie alleen maar aan wat iets is en (nog) niet hoe je wilt dat dat er uitziet in een GUI.

Er is slechts een handjevol elementen nodig om een semantisch juiste pagina te schrijven. In de basis val ik buiten <html>, <head> en <body>, vooral terug op (slechts de start tag weergegeven):

<h#> voor kopjes³⁾
<p> voor paragrafen
<ul> voor ongenummerde en <ol> voor genummerde lijsten met <li> voor de lijstitems
<img> voor afbeeldingen
<a> voor het anchor element
<table>, voor datatabellen met <colgroup>, <col>, <thead>, <tfoot>, <tbody>, <tr>, <th> en <td> om datatabellen correcte structuur mee te kunnen geven
<div> en <span> voor respectievelijk blokelementen en inlineelementen die zich onderscheiden van de directe context waar ze zich in bevinden, maar waar geen ander semantisch correct element met bijbehorende markup voor voorhanden is.
een incidenteel <iframe> voor het kunnen opnemen van brokken content in meerdere pagina's tegelijk

Een aantal inline-elementen die wat minder semantisch zijn, maar die ik toch ook nog wel gebruik, zijn <em> voor nadruk, <strong> voor sterke nadruk en bijvoorbeeld <sup> voor superschrift.

Bij al deze elementen gebruikt de schrijver/ontwerper ook de [attributen] van de verschillende semantische elementen op een doordachte manier.
Een attribuut als [lang] vergroot de toegankelijkheid van talige inhoud van een pagina op meta-niveau. Attributen als [title] bij plaatjes, hyperlinks, afkortingen, jargon et cetera, voegen betekenis toe aan de basisinhoud van een pagina. Het vergroot de toegankelijkheid van de inhoud op begripsniveau. Een attribuut als [alt] bij een afbeelding bijvoorbeeld geeft alternatieve inhoud in het geval de primaire inhoud (het plaatje) niet kan worden ontsloten door een bezoeker. Dat attribuut vergroot de toegankelijkheid van de content an sich.

Een goede html-pagina heeft semantische elementen met hun inhoud in een foutloze technisch juiste structuur gevat.

Inhoud en Vorm

Inhoud

De alinea's over structuur, elementen en attributen gaan er van uit, dat een pagina inhoud bevat. Inhoud is veelal talig en tekstueel van aard. Een muziekbestand of een Flash movie is in heel veel situaties geen inhoud, maar vorm⁴⁾. Een omschrijving van de muziek of van het filmpje is dan weer wel inhoud.
In het extreme doorgetrokken kan je zelfs beargumenteren dat de gebruikte taal om een boodschap over te brengen ook slechts vorm is.

Tekstuele inhoud heb je in no time in een html-pagina in een goede structuur met semantisch juiste markup ondergebracht.
Dan komt toch de vorm op enig moment aandacht vragen.

Vorm, de basis: het uiterlijk van de elementen

Feit is, als je niets doet om het uiterlijk van een semantisch juist gestelde en goed gestructureerde pagina te beïnvloeden, de pagina altijd correct en begrijpelijk zal worden weergegeven. Het uiterlijk van je pagina lijkt dan in een grafische browser waarschijnlijk op onderstaand beeld:

Het is het beeld dat je krijgt in een tekstverwerker als je in een tekstbestand kopjes en tussenkopjes toepast en opsommingen of lijsten opneemt. Saai, maar niet verkeerd. Je kan je tekstuele inhoud eigenlijk niet duidelijker presenteren dan op die manier.

Maar dat is wel dodelijk saai.

Dus ga je aan de slag met vormgeving.

Je begint de vormgeving van je pagina's het beste met het vormgeven van wat er toch al is: de elementen (eventueel tot op attribuutniveau) die je in je pagina's gebruikt. Voor het lijstje met elementen dat ik hierboven gaf inclusief <html> en <body, kan je veel stijlen definiëren, waaronder⁵⁾:

display:$style;
background:$color ('$uri') $y-position $x-position $repeat $scroll;
color:$rgb;
padding:$top $right $bottom $left;
border:$width $style $color;
margin:$top $right $bottom $left;
font-family:"$name", $generic_variant;
font-size:$relative_size;
font-style:$style;
font-weight:$weight;
text-decoration:$decoration;

Door de aanwezige elementen specifieke stijlen te geven, gaat de pagina al meer en meer een uiterlijk krijgen waar vorm en inhoud op elkaar afgestemd raken en het uitstraalt wat de schrijver/ontwerper wil.
Echter, veel meer dan leuk opgemaakte tekst krijg je er niet mee.

Vorm voor gevorderden: de layout van een gehele pagina

Als een schrijver/ontwerper de basisstructuur van een html-pagina eenmaal goed begrijpt, de markup van de html-elementen met hun attributen correct (dat is semantisch correct) kan toepassen en het uiterlijk van de gebruikte elementen probleemloos weet vorm te geven met cascading style sheets voor de elementen zelf, kan de volgende stap worden gezet:

De layout van de gehele pagina.

In een html-pagina zijn meestal een aantal onderscheidenlijk gebieden te identificeren:

Een paginakop
De ruimte waarin de content wordt getoond
Een kader met daarin het hoofdnavigatiemenu
Eventueel andere kaders, met daarin paginanavigatie of een 'kantlijntekst' met een verklaring over de pagina of over de schrijver of een toelichting
Eventueel nog een soort voettekst helemaal onder aan de pagina

Het is heel eenvoudig om met markup deze gedeeltes van een html-pagina te identificeren:

<html>

  <head>
    <title>Paginatitel</title>
    <link rel="stylesheet" type="text/css"
     href="foo/bar.css">
  </head>

  <body>
    <div id="paginakop">
      <div>Sitenaam</div>
      <h1>Paginatitel</h1>
    </div>

    <div id="content">
      <h2>Ondertitel</h2>

      <p>Inhoudelijke paragraaf</p>
      <p>En nog één.</p>

      <h2>Volgende tussenkopje</h2>

      <p>Dit is het gebied waar je de content
      van je pagina instopt. Hier plaats je je
      paragrafen, afbeeldingen, what ever, die
      je je bezoeker biedt en waar je bezoeker
      (bijvoorbeeld via een zoekmachine) ook
      zelf bewust op is afgekomen.</p>
    </div>

    <div id="navigatiemenu">
      <ul>
        <li>Page 1</li>
        <li>Page 2</li>
        <li>Page 3</li>
        <li>Contact</li>
      </ul>
    </div>

    <div id="voettekst">
      <p>Ik wijs u op de <a
      href="foo/bar/copyright.html"
      title="Copyrightverklaring"><em lang="en">
      copyright</em>verklaring</a> en de
      <a href="foo/bar/disclaimer.html"
      title="Disclaimer"><em lang="en">
      disclaimer</em></a> zoals die voor deze
      pagina gelden</p>
    </div>

  </body>

</html>

Vervolgens kan je echt goochelen met deze gebieden. Niet alleen kan je ze in grafische browsers vrij nauwkeurig op het scherm van je bezoeker plaatsen, onafhankelijk van elkaar, ook kan je per afgescheiden gebied de vormgeving van de elementen bepalen.
Als je in bovenstaand voorbeeld de teksten in het hoofdgebied van de inhoud paars wilt hebben en in het menu roze, is het volgende voldoende:

#content { color:purple }
#navigatiemenu { color:pink }

Het plaatsen van de verschillende blokken vergt kennis over de verschillende manieren van positioneren van elementen met het kenmerk display:block. Het eerste feit van belang, is dat position:fixed door Internet Explorer niet wordt uitgevoerd. Dat maakt die waarde voor position: praktisch onbruikbaar.
Wat wel zeer bruikbaar is is de volgende constructie (in volgorde):

Bepaal hoe hoog de ruimte is die je wilt benutten voor de kop van de pagina;
Bepaal hoe breed de ruimte is die je wilt benutten voor je sitemenu;
Bepaal eventueel de breedte voor een andere side column en de hoogte voor een voettekst;
Stel nu voor de body de volgende waarden in, in een extern stijlblad:
1. padding:$hoogte_paginakop $breedte_rechter_sidebar $hoogte_voettekst $breedte_navigatiemenu
2. margin:0;
3. border:0;
Stel nu voor de div#content de marges in die de tekst moet hebben ten opzichte van de omringende elementen of de viewport; stel geen breedte in maar wel eventueel height:100% voor Internet Explorer (en dan height:auto voor alle andere browsers);
Geef nog de volgende waarden op:
- voor de paginakop:
  1. position:absolute;
  2. top:0;left:0;
  3. width:100%;height:$height
- voor het menu:
  1. position:absolute;
  2. top:$calculated;left:0
  3. width:$width
- en zo voort voor andere gebieden in de rand van de pagina.

In de basis is de layout van je pagina nu al klaar. Je kan behalve de plaats van de verschillende gebieden immers nu ook volop aan de slag met het uiterlijk er van.

Resumé

Het eerste concept dat je zal moeten begrijpen, wil je voor het World Wide Web pagina's kunnen schrijven in Hyper Text Markup Language, betreft het principe achter het nesten van elementen, block level en inline elementen beide.

Het tweede concept, en verreweg het belangrijkste, betreft het begrip over semantisch werken. De inhoud van pagina's opknippen in elementen en vervolgens met markup aangeven wat een element is, betekenisvol.

Dan pas kom je toe aan het uiterlijk van je pagina's. Beginnend met de opmaak van de elementen die je toch al gebruikt. Daarmee oefen je al een grote invloed uit op het totale beeld van je pagina's.

Pas helemaal aan het eind ga je de globale layout van je pagina vormgeven door containing <div>'s af te bakenen in je markup en deze op het scherm te plaatsen en ieder een eigen uiterlijk mee te geven.

Belangrijk is ook te onthouden dat van een pagina met juiste structuur en semantisch juiste markup zonder verder veel franje, de inhoud door alles en iedereen ontsloten kan worden. Hoe complexer je alles maakt, hoe groter het risico dat je (groepen) bezoekers uitsluit.

¹⁾ Behalve dan het feit dat ze claimen What You See Is What You Get te zijn. Een absurde claim, gezien de enorme variatie in browsers die wereldwijd in gebruik zijn. Lang niet iedere browser is een GUI voor het net bijvoorbeeld. Plain text browsers zijn er genoeg. Ook braille- en spraakbrowsers worden gebruikt door de slechtzienden bijvoorbeeld.
En dan nog, de verschillen in weergave door allerlei varianten van grafische browsers is groot. Zelfs beperkt tot de grafische omgevingen is WYSIWYG een onhoudbare claim.

²⁾ Ik ben het niet noodzakelijkerwijs altijd eens met de keuzes die zijn gemaakt door het W3C. Ik zie bijvoorbeeld geen noodzaak om het slechts gedeeltelijk overlappen van inline elements technisch uit te sluiten. Volgens mij moet dat prima kunnen.
Enfin, de spec's zeggend vooralsnog dat het niet mag.

³⁾ Het # staat voor een waarde 1 tot en met 6, waarvoor geldt, dat hoe hoger de waarde is, hoe dieper het tekstkopje in de structuur van de inhoud is vertakt, hoe lager in de hiërarchie het kopje voorkomt.

⁴⁾ Op veel hedendaagse PC's met een breedband internetaansluiting zal de gebruiker/surfer er voor gekozen hebben om muziekbestanden streaming tot zich te nemen en om Flash movies op het scherm te laten afspelen zonder eerst daarom te vragen.
Maar er zijn nog duizenden en duizenden mensen met een inbelverbinding. Buitendat zijn er talloze mensen die helemaal geen moderne grafische browser hebben, maar die veeleer afhankelijk zijn van de teksten op een site (tekstbrowsers, aural browsers, braillebrowsers). Tot slot kan het gros van de zoekmachines niets met niet-tekstuele content, Google voorop.

⁵⁾ Ik ga er eigenlijk zonder verder voorbehoud voetstoots vanuit dat het uiterlijk van een pagina en de elementen in een pagina geheel wordt opgegeven in een extern stijlblad. Zo blijven de inhoud in correcte markup vervat en de opmaak van die inhoud geheel gescheiden, waar iedereen baat bij heeft.
Het is batig voor de bezoeker van een site, omdat de stijlen maar één keer hoeven te worden geladen en de inhoudelijke pagina's klein blijven en veel vlugger laden, dan als opmaak in de individuele inhoudelijke pagina's is opgenomen en zich steeds herhaalt. Het is batig voor een webmaster die slechts één bestandje voor de vormgeving van zijn of haar site hoeft te onderhouden om een gehele site up to date te houden, of die nou tien vijftig of drieduizend inhoudelijke pagina's bevat.

site navigatie, [Alt]+
Accesskeys
Index	Quick scan	Vrije tijd	Tekenen	Zweefvliegen	Werk	Dagboek	WebOntwerp	Mark-up	Css	Pastletters	Links	Reageer

disclaimer
auteur

November 2004

RSS Feed

Disclaimer

blogarchief
per maand

recente links

Eenvoud

Mon, 22 Nov 2004 18:17 +0100

Webdezign

Schrijven en ontwerpen voor het internet

Basis

Structuur

Elementen en Attributen

Inhoud en Vorm

Inhoud

Vorm, de basis: het uiterlijk van de elementen

Vorm voor gevorderden: de layout van een gehele pagina

Resumé

November 2004

RSS Feed

Disclaimer

blogarchief per maand

recente links

Eenvoud

Mon, 22 Nov 2004 18:17 +0100

Webdezign

Schrijven en ontwerpen voor het internet

Basis

Structuur

Elementen en Attributen

Inhoud en Vorm

Inhoud

Vorm, de basis: het uiterlijk van de elementen

Vorm voor gevorderden: de layout van een gehele pagina

Resumé

blogarchief
per maand