Sectie

Sectie

Sectie 3.3 - Ontwerp uitgangspunten

Trefwoorden: GIF kleurreductie, Netscape 216 kleuren palet, Photoshop, CorelDRAW, CGM en PostScript conversie.

Noot (1999-11-11): tegenwoordig heeft PNG de voorkeur vanwege patentproblemen met GIF (Unisys).

Zoals impliciet uit de paragraaf HTML standaard RGD (2.3) volgt, zijn er een aantal duidelijke ontwerp uitgangspunten geweest bij het opzetten van de RGD WWW server. Deze zijn het gevolg van de doelstelling van de site en verder enerzijds het gegeven dat de RGD beperkte middelen heeft (in tijd, geld en mensen) en anderzijds de snelle ontwikkelingen op het Web (HTML is bv. zeer in beweging).

Het doel van de RGD site is een site die in eerste instantie informatief en voor iedereen bereikbaar is (ook voor mensen met bv. beperkte lijncapaciteit, zoals in Oost-Europa of ontwikkelingslanden). Pas in tweede instantie dient de site attractief vormgegeven te zijn, maar altijd binnen de randvoorwaarden van gebruikersvriendelijke en efficiente presentatie van de informatie.

Dit heeft geleid tot de volgende ontwerp uitgangspunten:

• Duidelijke ontwerp- en beheersprocedures, zoveel mogelijk refererend aan bestaande en algemeen geaccepteerde standaarden en literatuur, zodat de pagina's:
  • redelijk toekomstvast zijn (niet afhankelijk van dubieuze, vaak browser-afhankelijke, html extensies)
  • makkelijk onderhoudbaar, uitbreidbaar en niet persoonsgebonden (webmaster of webdesigner) zijn
  • eenvoudig nieuw aan te maken zijn volgens een vast stramien
  • gebruikersvriendelijk en efficient zijn: vanwege een consistente opzet kan steeds op een eenduidige manier genavigeerd worden en is de document presentatie altijd herkenbaar
• Bestellingen, informatie opvraging en feedback zijn mogelijk via gebruikersvriendelijke e-mail formulieren.
• Overzichten van het bezoek aan de server tbv. marketing.
• Syntactische juistheid van de HTML pagina's en meta-info tbv. onderhoud en indices.
• Onderhoudbare en intuïtieve opzet van de directory structuur waar de HTML documenten, vaak in Engels en Nederlands, en images staan.
• Geregistreerd gebruik van zgn. symbolic links waarmee lange url's worden voorkomen en bondige, veelzeggende url's mogelijk zijn voor vermelding op publicaties e.d.
• Gebruikersvriendelijke en foutongevoelige namen van hyperlinked documenten (altijd lower-case bv.)
• Expliciete multi-browser support, inclusief Lynx tbv. karakter georiënteerde systemen c.q. lage bandbreedte clients.
• Doordacht gebruik van grafische elementen (images) die mbv. geavanceerde grafische software en technieken zo klein mogelijk gemaakt zijn om lange download tijden te voorkomen.

Bewerken van grafische files.
De commerciele programma's CorelDRAW en Photoshop worden vnl. gebruikt om plaatjes resp. te maken en te bewerken. Het public domain programma giftool [9] wordt gebruikt om images in het GIF formaat transparant en interlaced te maken en palet info op te vragen.

Soms is een conversie nodig van een plaatje, voordat deze in Photoshop bewerkt kan worden. Dit treedt op bij CGM en PostScript files, zoals bv. afkomstig uit ARC/INFO.
CorelDRAW (versie 5) heeft met beide problemen, hoewel deze er wel filters voor heeft. Daarom worden deze eerst als volgt geconverteerd:

RAL-CGM

Met dit vrij verkrijgbaar tool wordt de CGM file eerst naar PostScript vertaald. Voorbeeld:

  ralcgm -dps afile.cgm

Dit levert een PostScript file afile.ps op.

Ghostscript, Ghostview en GSview

Met deze vrij verkrijgbare tools kunnen PostScript files geconverteerd worden naar 8-bit (256 kleuren) bitmapped files (bv. Windows BMP), die vervolgens in Photoshop bewerkt kunnen worden tot GIF file.

Hier volgt het recept dat gebruikt wordt om in Photoshop (3.0) een plaatje te converteren naar een transparante GIF file, dat een minimale grootte heeft en het Netscape 216 kleurpalet. Dit palet wordt overigens gehanteerd omdat het een goede manier is om platform onafhankelijke (kleur-)presentatie te bereiken (nl. minder kans op dithering) en niet zozeer om Netscape!
Noot (1999-11-11): vanwege de patent problemen met GIF (Unisys), is het beter om in PNG formaat te bewaren.

1. Open een nieuwe file in Photoshop, danwel bestaande file die eventueel eerst geconverteerd was naar een formaat dat Photoshop aankan (zie boven).
2. Zet eerst om naar bitmapped "CMYK kleuren", via het Modus commando en dan naar "RGB-kleuren". Meteen naar RGB kan in een aantal gevallen een slechter resultaat geven.
3. Zet vervolgens om naar "Geïndexeerde kleuren":
   1. Kies "Palet eigen" en "Dither geen" en dan OK.
   2. Kies "Laad" en laad het Netscape 216 kleuren palet als ACT file en dan OK.
   3. Kies weer "RGB-kleuren" en dan "Geïndexeerde kleuren", maar nu met "Resolutie anders". Deze laatste stap zorgt voor een verdere reductie van de palet info in de komende GIF file.
   4. Pas eventueel verdere kleurreducties toe indien meer dan 32 kleuren (5 bits is streefgetal, maximaal 216 kleuren).
4. Bewaar de file in GIF formaat. File naam is bv. "afile.gif".
5. Bepaal de RGB waarde van de achtergrond kleur (meestal zal men wit nemen) en wat de kleurindex is van dat RGB tupel, met giftool ("$ " is de Unix prompt):
   
     $ giftool -p afile.gif
   
   De output ziet er typisch als volgt uit:
   
     GIF Image afile.gif (129x31)
  Image Colormap
   1: 255 255 255 (0xff 0xff 0xff) white
   2: 16 16 16 (0x10 0x10 0x10)
   3: 33 33 33 (0x21 0x21 0x21) gray13
   ...
   
   De kleurindex van (bv.) wit is dus 1.
6. Wit (1) wordt transparant gemaakt als volgt (de "-B" optie van giftool schrijft in de file zelf):
   
     giftool -B -1 afile.gif
   
   Interlacing kan als volgt worden toegevoegd:
   
     giftool -B -i afile.gif
   
   
7. Maak van grote plaatjes een thumbnail door dit naar 50 x 50 te herdimensioneren en als aparte file te bewaren. Neem in HTML documenten deze thumbnail op, waarvan selectie resulteert in het laten zien van het eigenlijke (niet verkleinde) gif plaatje.

Zoeken in dit handboek

Sectie

Sectie