Webdesign

Je eigen website maken...

Er kunnen heel wat redenen zijn om met een eigen website het wereldwijde web te betreden. Al is het maar om familie te laten genieten van je vakantiekiekjes of de reeksen foto's van je kind. Anderen presenteren hun verzameling pijpenkoppen, postzegels of bierviltjes, terwijl het voor muzikanten en beeldend kunstenaars natuurlijk dë manier is om hun werk te openbaren. De drempel is laag genoeg met de harde schijfruimte die je meestal al gratis krijgt aangeboden bij je provider en zelfs een eigen domeinnaam kost je bepaald niet de kop (10-15 euro per jaar).

Veel providers en hosting-services bieden de mogelijkheid om online of via een te downloaden programma op eenvoudige wijze een website op te zetten. Dat volstaat voor de beginner die er verder niet veel meer aan wenst te knutselen, maar juist dat laatste kan tot een boeiende hobby uitgroeien. Vooral omdat de expressiemogelijkheden sinds het begin van het internet zo enorm zijn gegroeid. Ging het aanvankelijk immers vooral om het openbaarmaken van tekstboodschappen, nu zijn juist de grafische mogelijkheden nagenoeg ongelimiteerd. The sky is the limit? Ja, feitelijk wel...

Eenvoudig HTML leren (en de rest...)

Op het internet zijn heel wat tutorials over het zelf bouwen van websites met verwante zaken als stylesheets, formulieren, tabellen, frames enzovoort te vinden. Voor veel mensen gaat hetgeen op de meer gespecialiseerde sites aan informatie wordt aangeboden echter al gauw te ver. Bovendien, wanneer ergens het gezegde 'al doende leert men' opgaat dan is het wel op dit gebied. Waar dus vooral behoefte aan bestaat is een eenvoudige introductie met duidelijke voorbeelden.

Eerst de hoofdzaken, maar dan wel met steeds de nodige voorbeelden die overgenomen en nagevolgd kunnen worden. Een dergelijke tutorial (of eigenlijk meer een hele serie van tutorials) is te vinden op Bravenet. Zelfs voor mensen die de gemakkelijkste weg kiezen en met een grafische webeditor aan de gang gaan is een zekere kennis van de basisprincipes belangrijk, dus ga zeker een kijkje op de site nemen.

De sprookjeswereld van 'stylesheets'

Ofschoon je met een handjevol HTML-tags een heel eind kunt komen wordt het op den duur knap vermoeiend om steeds weer die voor letterfonts en -kleuren te moeten intypen of aanklikken. Wil je naderhand bijvoorbeeld de grootte van de letter wijzigen dan moet je dus ook al die tags weer langslopen. Veel eenvoudiger is het om de inhoud van een website strikt te scheiden van de aanwijzingen voor de vormgeving. En dit is mogelijk door toepassing van een zogenaamde 'stylesheet' of opmaakmodel waarin éénmaal al deze kenmerken zijn vervat.

l e e s v e r d e r

Firefox: de andere browser

Een website maken is één ding, maar hij dient natuurlijk ook bekeken te worden en daarvoor dient dus een 'browser' en het tijdperk van het internet zoals we dat nu kennen begon omstreeks 1994 met de Mosaic-browser van Jim Clark en Marc Andreessen. Als Netscape zou deze in een jaar tijd het internet domineren. Een rol die echter een paar jaar later zou worden overgenomen door Internet Explorer van Microsoft die vanaf Windows 98 een vast bestanddeel van het besturingssysteem ging uitmaken. Gedwongen winkelnering dus...

Het aandeel van Netscape zakte vooral daardoor steeds lager totdat men tenslotte de technologie erachter (die inmiddels wel verder was ontwikkeld) als open-source in het publieke domein bracht. Hierna werden er door verschillende groeperingen op basis van deze 'engine' eigen, aangepaste browserversies ontwikkeld. Hieronder dus Firefox, dat zich heeft onderscheiden als een krachtig programma met vooral die eigenschappen die uit de wensen van de gebruikers voortkwamen. Ook al door het prettige interface zonder onnodige toets en bellen werd het in korte tijd razend populair.

Thema's en extensies

Gezien de bijzondere eigenschappen is dat ook alleszins begrijpelijk, naast het feit dat Firefox zeer compact is en optimaal afgestemd op veilig internetten. Buitengewoon handig voor actieve internetters is het werken met tabs om zo meerdere sites tegelijk open te hebben. Het interface is daarbij zeer overzichtelijk vormgegeven en door toepassing van thema's bovendien eenvoudig naar eigen smaak aan te passen. Zeer krachtige uitbreidingen zijn verder mogelijk met het systeem van extensies.

Een fraai ogend voorbeeld van het eerste is het thema 'Noia 2.0 - Extreme' (zie de illustratie). Met kleurige, cartoon-achtige buttons ziet het er echter niet alleen plezierig uit, maar verhoogt het ook de functionaliteit. Een extensie die echt door iedereen die zich maar met webdesign bezighoudt omarmd zal worden is de 'Web Developer Toolbar'. Hiermee krijg je met een enkele knopdruk de beschikking over een groot aantal (snel onmisbare) informatiegereedschappen.

Voor wie nog meer wil!...

Een nog ingrijpender mogelijkheid is om Firefox als het ware te 'hacken'... Enige voorzichtigheid is hierbij wel geboden, maar dan is ook bijna alles te veranderen. Wie er iets van wil proeven kan in het adresvenster 'about:config' ingeven om de schier eindeloze lijst aan instellingen te aanschouwen. Op de site van Linux Journal (Firefox is immers een multi-platform browser) wordt het een en ander in 'Ten Mysteries of about:config' uit de doeken gedaan. Nog uitgebreider en overzichtelijker is de zeer uitgebreide Firefox Tweak Guide.

Geld verdienen met Firefox

'Spread Firefox' is een website die is gewijd aan het propageren van Firefox. Sinds kort heeft men wat dit betreft een sterke bondgenoot gevonden in de zoekgigant Google. Deze heeft haar programm AdSense - waarmee websites door het plaatsen van kleine advertenties geld konden verdienen - nu uitgebreid met 'AdSense Referrals'. Hiermee kan een bepaald product - Firefox samen met de Google Toolbar - onder de ogen van bezoekers worden gebracht en verdient men een bepaald bedrag (tot maar liefst $1) wanneer deze inderdaad wordt geÏnstalleerd.

Informatie over webdesign

Een goede beginnerssite en een introductie in HTML, XHTML en Stylesheets zijn de drie afleveringen op Informit.com. En een goed leesbaar overzicht van de beschikbare 'tags' is te vinden op 'The Bare Bones Guide to HTML'. Van dezelfde auteur is er daarnaast 'The WWW Help Page' die zeer overzichtelijk een groot aantal gespecialiseerde sites vermeld. Veel voorkomende vragen vind je verder ook op zijn FAQ-site.

Voor wie zich al enigszins gevorderd weet op het pad naar effectieve websites is HTML Goodies een waar luilekkerland, boordevol prettig leesbare tutorials, en informatie over de toepassingen van JavaScript, Perl, frames, databases en stijlbladen. Verder is er een forum en kun je je abonneren op de gratis nieuwsbrief 'Goodies to Go'. Hierin worden niet alleen algemene problemen behandeld, maar kun je ook zelf technische vragen voorleggen.

Nog zo'n website die alleszins de moeite waard blijkt te zijn is die van het Australische Sitepoint dat naast tutorials en forums ook een hele serie voortreffelijke boeken uitgeeft. Onder andere over toepassingen als MySQL, PHP, Flash en stylesheets. Ter kennismaking kunnen hoofdstukken gratis worden gedownload. Men behandelt daarbij niet alleen de technische kant van website-ontwerp, maar tevens de marketing-aspecten, die voor commerciële sites natuurlijk van even groot belang zijn.

Mooie kleurenschema's

De aantrekkelijkheid van een website wordt voor een flink deel bepaald door het toegepaste kleurenschema, maar het valt niet altijd mee om goed bij elkaar passende kleuren uit te zoeken. Met het oog hierop zijn op de mooie en praktisch vormgegeven site The Return of Design een groot aantal aantrekkelijke en deels ook boeiende kleurenschema's bij elkaar gebracht. Daarbij kun je ook nog linken naar de vaak erg mooie sites die de inspiratiebron vormden.

Webdesign: Tips & trucs

Er zijn heel wat dikke boeken geschreven over de verschillende aspecten van 'webdesign', zowel wat de meer technische kant betreft als de esthetische. Daarnaast is er ook - niet onbelangrijk - het aanmelden bij zoekmachines of, wat meer in het algemeen, alles wat maar valt onder het bekend maken ervan. Nu kom je op het internet vaak van die handige tips tegen die niet zozeer in een precies omschreven categorie vallen en die toch de moeite van het onthouden en doorgeven waard zijn. Die gaan we dus verzamelen onder de titel 'Tips & trucs'...

l e e s v e r d e r . . .

Gereedschappen voor webdesign

Een vrij principiële keuze is die tussen een tekst-gebaseerde of een grafische editor. Een spartaans voorbeeld van de eerste categorie is het aloude Notepad dat in Windows zit ingebakken. Een voorbeeld van de laatste is het eveneens van Microsoft afkomstige Frontpage. Het verschil zit in het feit dat je in het eerste geval exact moet weten wat je doet en in het tweede geval eigenlijk uitsluitend wat met tekst en afbeeldingen aan het schuiven bent.

Wat je ziet is wat je (mogelijk) krijgt

Dat laatste lijkt erg aantrekkelijk, totdat een site wat omvangrijker wordt en je iets speciaals wilt realiseren. Dan blijkt de gegenereerde code voor een normaal mens nagenoeg onleesbaar te zijn, dus laat staan ook nog te begrijpen. Veel betere en logischer code levert Dreamweaver van Macromedia, dat ook in professionele kringen de nodige aanhang heeft en voorzien is van geavanceerde gereedschappen voor het structureren van de site, voor stylesheets, foto-albums en andere essenties.

Nu kost Dreamweaver wel zo'n 480 euro en dat is een hoop geld om je website mee te bouwen. Gelukkig zijn er goedkopere oplossingen te vinden en een mooie combinatie is een teksteditor met WYSIWYG-mogelijkheden welke is te vinden als CoffeeCup HTML Editor 2005 die voor een redelijke 50 dollar te bestellen is. Het programma levert een overvloed aan illustraties, scripts en honderden 'templates' mee. Een uitstekende gratis webeditor is WebDwarf van Virtual Mechanics, terwijl de overtreffende trap wordt gevormd door het open-source programma Nvu

Tekstgebaseerde editors

Met handcoderen weet je exact waar je mee bezig bent, maar hoe goed je HTML en verwante talen ook beheerst, een foutje is zo gemaakt. Om dat zo goed mogelijk te voorkomen bestaan er programma's als Homesite, dat een uitstekende hulp biedt voor de enigszins ter zake kundige webontwerper. Dit Macromedia-product is stabiel en buitengewoon degelijk en wordt door het gros van de professionals toegepast - het is dan ook de meegeleverde teksteditor voor Dreamweaver. De prijs voor het losse programma ligt ergens rond de 120 euro.

Wie goedkoper terecht wil doet een voortreffelijke keus met het innoverende programma 1stPage 2000 dat zelfs geheel gratis is en daarbij vergezeld gaat van bijna 500 nuttige scripts voor een heleboel extra functionaliteit. Een absolute aanrader!!! En degene die het niet zo op Windows heeft begrepen moet beslist een kijkje nemen op de filosofisch getinte site van Arachnophilia, voor een uitstekend onder Java draaiende - en daarom platformonafhankelijke - editor. Lees ook zeker het artikel over CareWare...

De simpele werkwijze van NoteTab

NoteTab Light is een bescheiden ogende (gratis) text-editor uit Zwitserland met een heleboel verborgen kunstjes. Het geheim zit in de ingebouwde programmeertaal waarmee allerlei additionele functionaliteit kan worden toegevoegd. Deze 'libraries' werken als een soort plugin en kunnen met een enkele muisklik worden opgeroepen. Er worden standaard al een flink aantal met de editor meegeleverd en op de website zijn er nog veel meer te downloaden. Eén van deze libraries nu maakt het mogelijk om door middel van een interactief venster een complete - zij het enigszins rudimentaire - website in HTML op te zetten

Deze kan in hetzelfde programma natuurlijk naar believen worden uitgebreid. Tevens zijn er o.a. libraries voor het opzetten van een stylesheet en een ftp-server. Voor het schrijven van teksten bezit het programma de unieke functie om een groot aantal documenten tegelijk klaar te hebben staan en door middel van eenvoudige 'tabs' razendsnel in het venster zichtbaar te maken. Hiermee heb ik zelf drie boeken geschreven, waarbij steeds alle hoofdstukken tegelijk beschikbaar waren. Een krachtige en flexibele zoek-en-vervang functie is vanzelfsprekend ook aanwezig.

Het testen van webpagina's

Natuurlijk is het zaak om een nieuwe website op verschillende browsers uit te proberen, maar ook loont het de moeite de site te testen aan de standaarden zoals die door het World Wide Webconsotium werden opgestelt. Voor wat betreft de HTML-code kan dat online gebeuren op validator.w3.org/, terwijl stylesheets op de zustersite jigsaw.w3.org/css-validator/ aan de tand gevoeld kunnen worden.

Een andere site waar je een pagina online kunt laten beoordelen op kwaliteit, toegankelijkheid en privacy-bescherming is Watchfire� WebXACT. Het volstaat om de url van de betreffende pagina in het ondergaande veld in te geven...

Het testen van links

Het internet is een dynamische omgeving waar de dingen per dag kunnen veranderen. Het mag dan ook geen verwondering wekken wanneer een link ineens niet meer blijkt te werken... misschien omdat de betreffende site opgehouden heeft te bestaan of gewoon een andere naam heeft gekregen. Het is dan ook zaak om ze min of meer regelmatig te testen. Een vervelend werkje wanneer dit met de hand moet gebeuren, maar een peuleschil met Xenu's Link Sleuth.

Kleurenblindheid en webpagina's

Kleur speelt een belangrijke rol bij webpagina's, maar denk bij het opzetten van een kleurige site toch ook aan het feit dat zo'n 5% van de bezoekers waarschijnlijk lijdt aan een of andere vorm van kleurenblindheid. Dan kan het zijn dat die mooie navigatie bijvoorbeeld helemaal aan hen voorbijgaat of dat hele kopregels verdwijnen. Wonderlijk is dat voor dit probleem erg weinig aandacht blijkt te zijn.

Nu kun je natuurlijk allerlei lijstjes met kwetsbare kleuren gaan doornemen, maar zoiets ga je in het computertijdperk vanzelfsprekend automatiseren. Op colorfilter.wickline.org vind je een script waarbij je door het invullen van een URL een website onder een hele serie verschillende vormen van kleurenblindheid kunt testen. Overigens is in de onvolprezen Wikipedia een uitgebreide uitleg te vinden over het verschijnsel.