Inventis

In mijn vorige blogpost “Design meets code” schreef ik dat de worldexplorer designs die ik afgewerkt had klaar stonden om onder handen genomen te worden door een slicing expert. Aangezien David, de geknipte persoon voor de job, met andere projecten bezig was kon hij hier niet erg veel tijd voor maken. Dit resulteerde in een grondige bespreking tijdens één van de scrum meetings met Dennis, Wim, Philippe en mezelf. Uiteindelijk nam ik de beslissing mijn eigen project wat verder uit te stellen en nam ik de slicing taak voor mijn rekening. Ik kreeg de verantwoordelijkheid om de 14 pagina’s tot een goed einde te brengen. Niet zo simpel als je weet dat sommige browsers erg moeilijk kunnen doen.

IE6 & Transparantie

Aangezien Internet Explorer 6.0 geen ondersteuning biedt aan transparante png’s diende er een pngfix toegepast te worden. Ik maakte gebruik van de dillerdesign pngfix. Op deze manier blijven de templates goede vriendjes met de gebruikers van outdated browsers en heb je geen last meer van lelijke blauwe vlakken op de plaats waar de transparantie hoort te zijn. Ik blij, IE6 blij, eindgebruiker blij, wat moet je nog meer hebben?

Non-websafe fonts

Naast het gebruik van xHTML,CSS en een PNGfix werd er onder andere ook gebruik gemaakt van Cufon. Cufon is een font-rendering engine welke het mogelijk maakt om fonts te gebruiken die de bezoeker zelf niet op de computer heeft staan. Normaal gezien werk je best met websafe fonts. Met het gebruik van Cufon is dit niet meer nodig. Maar er zijn uiteraard ook enkele nadelen: Om het font in zijn volle glorie te kunnen bewonderen moet javascript enabled zijn. Ook het selecteren van de tekst kan wel eens moeilijk worden, Cufon zet je font (TTF, OTF, PFB, PostScript) immers om naar een SVG font. Uit deze SVG font worden VML Paths gehaald en in een javascript file gezet. Deze javascript file wordt dan omgezet naar images door middel van de cufon engine (Javascript/JSON). Omwille van die redenen beperk je het gebruik van Cufon dus best tot hoofding-elementen.

Slice & dice

Tick liegt er niet om, een snelle slicer ben ik niet. Het slicen op zich gaat uiteraard wel snel maar het cross-browser compatibel maken is andere koek. Als je je niet bewust bent van al de mogelijke misinterpretaties die oudere browsers zoals IE6 kunnen maken kom je al snel aan een lange buglijst. Gelukkig bestaan er hulpplugins zoals Firebug en Web Developer Toolbar om het leven van een developer (in dit geval een designer die aan beroepsmisvorming doet) wat aangenamer te maken. Zo wordt bijvoorbeeld uitzoeken hoe breed een blok-element is kinderspel met de outline functie.

Check, doublecheck

Natuurlijk heb ik in de tussentijd ook aan mijn eigen project gewerkt. Zo heb ik net als worldexplorer het vindlastminute project volledig bugvrij gekregen. IE6, IE7, Safari, FireFox, Opera & Chrome zijn voortaan geen stoute browsers meer. Voorlopig is dat uiteraard nog niet voldoende voor een kus van de juf en een bank vooruit. Een groot stuk van de frontend moet immers nog verzorgd worden. Object oriented programming, waar ik met de database import al kennis mee heb gemaakt, is de volgende uitdaging. Hopelijk mag ik na mijn bewezen diensten aan Philippe af en toe wat zeuren voor wat nuttige tips.

<?php

$building = “Inventis office”;

if ( $weekend = true; ) {
exit(“Gert has left the $building”);
}

?>