Inleiding

Bij het bouwen van de html-pagina’s hebben we ons afgevraagd welke html-standaard we het beste kunnen gebruiken. Allereerst hebben we gekeken naar html of xhtml. We hebben uiteindelijk voor html 4.01 strict gekozen, omdat deze de beste compatibiteit biedt. Html 4.01 strict bevat alle elementen die ook in xhtml 1.0 zit. Het enige verschil is dat de ‘tags’ in een xml jasje gestopt zijn. In xhtml moeten bovendien ook alle tags correct afgesloten worden; ook de tags zonder afsluit-tag, zoals de <br>, <link/>. Een correct xhtml-document moet de juiste media type meekrijgen: “application/xhtml+xml”. De meest populaire browser op dit moment: IE6 ondersteunt dit helaas niet. Pagina’s met de juiste media type worden niet getoond door IE6 en pagina’s zonder media type aanduiding worden als html pagina’s gerenderd.

HTML

De keuze is gevallen in het voordeel voor html, gezien het feit dat deze op dit moment de beste compatibiteit biedt van de moderne browsers. Van html zijn er ook weer verschillende varianten waar uit gekozen kan worden, namelijk:

• Html 4.01 Frameset
  Gebruik geen frames op Wosi sites.
• Html 4.01 Transitional
  Gebruik alleen de Transitional variant als het gebruik van de Strict variant onmogelijk of onwenselijk is.
• Html 4.01 Strict
  Gebruik de Strict variant wanneer mogelijk
  

Html 4.01 Frameset

Deze variant van html is van toepassing op pagina’s die framesets bevatten.
Vanwege de grote nadelen van frames, wat betreft bruikbaarheid en toegankelijkheid, wordt het gebruik ervan ten zeerste afgeraden. Handhaving van frames op Wosi-webpagina’s vormen een bedreiging voor de bereikbaarheid en duurzaamheid van de informatie op deze sites.

Html 4.01 Transitional

De Transitional variant is de eenvoudige versie van HTML 4.01 en leent zich uitstekend voor het aanpassen van en toevoegen aan bestaande websites. Deze versie biedt de webontwikkelaar veel vrijheden en beperkt hem niet in bepaalde ontwerpprincipes.
Daarmee lijkt het volgen van de Transitional variant een aantrekkelijke keuze, maar het gebruik ervan wordt ontmoedigd om de volgende redenen.

• De Transitional variant is minder structureel dan de Strict variant
• De Transitional variant staat constructies toe waarvan het gebruik ontmoedigd wordt. Voorbeelden zijn het openen van nieuwe vensters door middel van het target attribuut en het gebruik van frames en iframes
• De Transitional variant is letterlijk een ‘overgangsversie’: een overgang van een chaotische naar een meer gestructureerde manier van websites bouwen.
  

Html 4.01 Strict

De Strict variant wordt aangeraden, met name voor nieuwe Wosi webpagina’s. Er volgen enkele voordelen van het gebruik van deze variant.

• Strict is meer structureel; webontwikkelaars dienen met de markup specifieker te zijn in wat de inhoud precies is.
• Omdat de markup meer specifiek is, heeft een webontwikkelaar meer houvast voor het vormgeven van pagina-elementen via CSS.
• De Strict variant is grotendeels ontdaan van markup die alleen voor visuele effecten dient. Webontwikkelaars worden hierdoor gestimuleerd om CSS te gebruiken voor visuele effecten. Zie ook Stylesheets.
• De Strict variant is grotendeels ontdaan van markup die schadelijk kan zijn voor de bruikbaarheid en toegankelijkheid van een site. Zo is bijvoorbeeld markup voor frames, iframes en nieuwe vensters verdwenen uit Strict.

Stylesheets

Moderne websites scheiden hun webpagina’s tussen structuur en vormgeving. Dit zorgt voor duurzame en toegankelijke sites.

HTML

De inhoud van een webpagina wordt in de opmaaktaal HTML beschreven. Goed gestructureerd HTML is zelfbeschrijvend; de inhoud en de functie ervan is duidelijk door alleen al naar de HTML-opmaak te kijken.

CSS

Hoe een pagina qua uiterlijk eruit ziet wordt apart beschreven in stylesheets (CSS). Stylesheets kunnen gekoppeld worden aan individuele pagina’s, maar tonen hun waarde echt wanneer meerdere pagina’s dezelfde structuur en uiterlijk delen. Pagina’s worden sneller geladen omdat de css na een keer ophalen lokaal in de browser van de client wordt gecached. Boven laden pagina’s sneller doordat pagina’s kleiner geworden zijn nu de opmaak gescheiden is van de inhoud.

Stylesheet

Css coding conventies

Css includes uitleg

• Op elke pagina worden de volgende css bestanden geinclude:

<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/components.css">

• reset.css zorgt ervoor dat alle elementen op verschillende browsers dezelfde styling hebben, gezien sommige browsers een afwijkende interne css hebben.
  

• base.css bevat de opmaak voor de basis structuur van een pagina met de styling ervan.
  
• component.css bevat de structuuropmaak en de styling voor grafische componenten.

Terminologie

selector {
    property: value;
}

Witregels

Tussen elke style wordt een witregel geplaatst tenzij de stylen bijelkaar horen. (zie componenten)

Gebruik een witregel om binnen een style de structuur-property te scheiden van opmaak-property.

Structuur-properties: width, height, margin, padding, float, etc. opmaak-property: background..., color..., text-align, border... etc.

Witregels

Gebruik een spatie tussen property en value:

width:200px;

width: 200px;

Inspringen

Tabs: Als tab nemen we de lengte van 4 spaties. Dit is in vrijwel iedere ontwikkelomgeving in te stellen. Properties: Binnen de style springen properties 1 tab in.

selector {
property: value;
}

selector {
    property: value;
}

Componenten.css

Spring in met tabs bij het opmaken van een componenten zoals ook de html ervan worden genest. Voorbeelden zijn te vinden in componenten.css

Naamgeving

.rood {	
    background-color: red;
}

.warning {
    background-color: red;
}

Font size

Als basis font-grootte is gekozen voor 11px. Alle andere font-grootte moeten relatief aan de grootte worden vergroot door gebruik te maken van percentages in plaats van absolute groottes. Op deze manier kan de fontgrootte van de hele applicatie aangepast worden door alleen de font-size in de body tag in de css-bestand aan te passen.

Bracket

selector {
    property: value;
}

Comments

/**
 * Meta styling
 **/

padding-right: 16px;	/* leave space for sort icon */

Class of Id?

Aan Html-elementen kun je classes of id's meegeven en die identifiers vervolgens gebruiken om de opmaak te stylen.
Gebruik 'id' alleen voor html-elementen die over de hele applicatie uniek zijn.
Over het algemeen aangeraden wordt het gebruik van 'classes' aangeraden omdat bij dubbel voorkomen geen conflicten veroorzaakt worden. Er moet wel gezorgd worden dat bij het stylen de volgorde/nesting uniek is.

HTML stylen

Wanneer een html-element gestyled moet gaan worden voor een component. Zorg ervoor dat je html via een container stylet, i.e. de html-element niet direct stylen, dit heeft invloed op andere componenten die dezelfde html-elementen.

form { background-color: blue; }

.formContainer form { background-color: blue; }

Kleurgebruik

Kleurenpalette

• Dit is het kleurenpalette dat in de Wosi webapplicatie gebruikt zal worden.
• Naast de hexadecimale waarde van de kleuren is ook de Pantone kleurcode vermeld. Deze kun je in Adobe Photoshop in Color Picker onder het knopje "Color libraries" terug vinden.
  
  

Wosi kleuren (PANTONE STPC)

Meta kleuren (PANTONE process uncoated)

Aluminium (PANTONE proces uncoated)

HvA kleuren palette

Ter demonstratie is een HvA kleurenpalette gemaakt.
Door consistentie in het gebruik van kleuren zoals die aangegeven zijn in de palettes, kun je zeer snel ‘look’ veranderen door simpelweg te ‘zoeken en vervangen’.

In Firefox is dit te zien via “view" > “page style” > “HvA”

Meta css klassen

• Meta classes voorzien de gebruiker van extra informatie door de aandacht te trekken van de gebruiker.
• Voeg de volgende klasses toe aan elk willekeurig element en deze zal dan de kleur krijgen van de meta-styling.
• Bij zorgvuldig gebruik zal dit de gebruiker begeleiden.

Componenten

Componenten; hiermee worden de verschillende functionele onderdelen op een website mee bedoelt, ie, breadcrumbs, menu, tabellen en form.
In de volgende paragrafen worden beschreven hoe deze opgebouwd zijn en gebruikt moeten worden.

Voor voorbeelden met code kun je het best naar de meegeleverde .zip bestand kijken waarin html + css + psd bestanden zitten.

Navigationbar

De navigationbar bevindt zich net onder de header en strekt zich over de hele horizontale vlak van de pagina. Binnen navigationbar bevinden zicht twee subcomponenten: breadcrumb en usernav.

Menus

De menus zitten in een container “#menus”
In de container kunnen meerdere “.menus” zitten.
Een “.menu” heeft een titel “<h3>” met daaronder de feitelijke menu wat als een unordered list opgemaakt moet worden.

Tabellen

Voor “wosi”-opgemaakte tabellen moet je de betreffende tabel in een div.tableData en de tabel zal dan automatisch de opmaak krijgen.

Formulieren

Net tabellen worden formulieren automatisch opgemaakt als zij in de container div.form worden geplaatst.

Voor een uitgebreide uitleg refereer ik je naar component-forms.html in de meegeleverde .zip.

Belangrijk, ter bevordering van usability (ook voor minder validen):

• Gebruik een fieldset/legend tag in je formulier om gegevens te groeperen en gebruik de legend om je formulier een titel te geven.
• Gebruik tables om de form elementen te structureren op het schermen. Tabellen zijn gekozen om het developer-friendly te maken. Ook wanneer ingewikkeldere formulieropmaak nodig is.
• Lees de paper: 0057.pdf^{[1] [2]} in de meegeleverde .zip voor de beste manier om formulieren op te maken.
• Plaats ten slotte onderaan^[3] in div.formButtons de knoppen van de formulier.

Bronbestanden

Hierin zitten de html bestanden met de bijbehorende stylesheets. Daarnaast zit in het archief-bestand ook de Photoshop bestanden waarmee de achtergrondplaatjes gemaakt.

wosi-fase4-algemeen-20080129-stylegids.rar

Referenties

1. ↑ Paper - Name and Address Forms on the Web: Research into Usability
2. ↑ Onderzoek naar het plaatsen van label in forms
3. ↑ Positionering formulier knoppen