Hey! Bezoek

Code schonen is soms geen overbodige luxe. Voor Jules Goossens BV ben ik momenteel de bliksem vraagbaak website aan het verbouwen.

De verbouwing speelt zich voor het grootste deel af achter de schermen. Naast een beheersgedeelte om een aantal inhoudelijke zaken makkelijk te kunnen toevoegen en wijzigen richt ik me vooral op een revisie van de huidige pagina's:

Weg met frames
De opzet met frames wordt vervangen door een website op basis van includes

Inline stijlen en deprecated tags
Alle inline stijlbladcode wordt verwijderd. De vormgeving wordt in plaats daarvan geregeld met behulp van opmaakregels uit een extern style sheet. Alle deprecated tags gaan door de shredder.

Tabellen en positinering
Tabellen die niet ingezet worden voor het tonen van tabulaire informatie gaan eruit. Geen tabellen voor positionering meer dus.

Inhoud, vormgeving en actie
Inhoud, vormgeving en actie worden zoveel mogelijk losgekoppeld. Op plaatsen waar javascript gebruikt wordt, zal dit op een unobtrusive manier geïmplementeerd worden. Voor de menu-items bijvoorbeeld wordt gebruik gemaakt van object detectie om aan de mouse over event wat extra javascript behaviour op te hangen. En ohhh, wat zou het toch fijn zijn als de browsermakers de richtlijnen van het W3C zouden volgen en niet hun eigen implementatie van bepaalde functionaliteit zouden inbouwen (addEventListener vs attachEvent).

In principe is dit een redelijk eenvoudig klusje. Maar de voorwaarde dat de huidige look and feel (zoveel mogelijk) in stand moet worden gehouden is eerlijk gezegd wel een complicerende factor. Ik ben nog niet klaar met bliksem.nl, maar de gereviseerde website begint vorm te krijgen.

Check mijn versie van de bliksem vraagbaak

Met enige regelmaat komen bezoekers op nullbeta.net terecht via een Google Image search query. Nogal eens duikt dan gebroken hart op in de zoekstring. Blijkbaar valt mijn gebroken hart icon op in de zoekresultaten. Hopelijk in positieve zin :-)

De meeste ikoontjes (uhh icoontjes) die ik bij mijn blogposts op nullbeta gebruik zijn door mezelf in elkaar geknutselde vectorafbeeldingen. Oké, voor inspiratie shop ik wel eens hier en daar. Maar als het op de realisatie aankomt maak ik liever zelf wat, dan dat ik een bestaand gif- of jpegbestand gebruik. Geregeld gebruik ik wel een foto als uitgangspunt. Om op basis daarvan mijn vector-gebaseerde versie (na) te bouwen.

Waarom al die moeite doen? Ten eerste natuurlijk omdat het leuk is om te doen! En daarnaast is het voorhanden hebben van een vector afbeelding gewoon handig. Een vectorplaatje is zonder kwaliteitsverlies te schalen. Dit in tegenstelling tot bitmap bestanden, die bij het oprekken al snel aan attractiewaarde inboeten.

Momenteel is de website van v.v. Giessen nog gevuld met flash inhoud. Inhoud die op zijn zachtst gezegd niet meer helemaal up to date is. Sommige informatie is inmiddels al een paar jaar over de uiterste houdbaarheidsdatum. Door maatje en verenigingsvoorzitter Jaap ben ik gevraagd om de website onder handen te nemen.

Dus ben ik me alvast aan het beraden over de look and feel van de website van de voetbalvereniging Giessen na de reboot! Met het onderstaande spuugmodelletje als eerste resultaat. Als je geïnteresserd bent: check het live diezijn van de herstarte v.v. Giessen website.

Daarnaast heb ik tussen de bedrijven door stiekem gekeken of en hoe dynamische data (zoals standen en uitslagen) vanaf de KNVB website geplukt kunnen worden. Helaas. Zo 1-2-3 gaat dat volgens mij niet. Want er is geen rss feed ofzo voorhanden. Verder wordt er op de KNVB website met geen woord gerept over het gebruik van de uitslagen, standen en programma's op andere sites. Dus het zal wel zo zijn dat de Bond dit niet wil hebben.

Natuurlijk kan ik gaan konkelen met reguliere expressies om de standen en uitslagen uit de KNVB site te zagen. Maar dan loop ik het risico dat dit niet meer werkt als ze bij de voetbalbond besluiten de website te verbouwen. Dus waarschijnlijk wordt het gewoon simpel een deeplink naar de info, in plaats van de data te schrapen. Een andere optie blijft natuurlijk een tailored stukje achterliggende beheercode. Zodat de standen en uitslagen informatie door de personen van de vereniging zelf kan worden geactualiseerd.

Eerst eens even wachten op feedback voordat ik hier verder aandacht aan besteed ...

Af en toe knutsel ik wel eens een website in elkaar.

Laatst bedacht ik me dat ik van tevoren eigenlijk weinig tijd besteed aan zaken als de vindbaarheid en populariteit van de betreffende website. En dan heb ik het niet over het in elkaar timmeren van een technisch solide website, gebouwd op validerende code die snel vriendjes wordt met de indexerende spiders. That's a given en zit wel goed.

Ik doel hier op de bredere scope van het inbouwen van zekerheid dat een website ook goed zal scoren op vindbaarheid en populariteit. Eigenlijk het totale plaatje van SEO. En hoewel ik van mening ben dat het voor het merendeel van mijn projectjes onbelangrijk is dat de vindbaarheid geoptimaliseerd is, kan het geen kwaad om er eens wat aandacht aan te besteden. Tijd voor een probeerseltje dus: ukko.nl (zeg maar null beta lab 101)

update 1:
Ik heb dan wel Engelse Taal- en Letterkunde aan de RUU ** kuch ** gestudeerd; vertalen is een vak apart. Het gaat niet echt vanzelf en het resultaat van mijn geklungel is niet om naar huis te schrijven! Een studievriendinnetje is wel professioneel vertaler, maar die zal ik hier maar niet mee lastigvallen ...

update 2:
Hmmm. Google sitemaps vertelt me dat er nog geen pagina's van ukko.nl geindexeerd zijn. Hoe kan het dan dat er wel resultaten te zien zijn in Google? Dat snap ik eerlijk gezegd niet ...

update 3:
Duhh!! Het loopt gewoon niet helemaal synchroon. We zijn nu een halve dag verder en Google Sitemaps zingt nu een heel ander liedje. Toegang gehad tot pagina's op 19 mei. En dat komt overeen met de SERPs.

[ meer lezen over ukko ]

Drukdrukdruk. Over niet al te lange tijd moet de website van Memo Tours online gaan.

De code van het achterliggende beheersgedeelte is gelukkig al behoorlijk ver af, maar de functionaliteit moet nog wel grondig onder de loep worden genomen voordat ik er het etiket klaar op wil plakken. En de vormgeving gaat nog wel wat tijd vragen. Waar ik zelf blij mee ben, is de functionaliteit die ik heb ingebouwd in de beheerpagina om prijsinfo te updaten. Een combinatie van php, DOM scripting en ajax calls zorgen voor een makkelijke manier van updaten.

Afijn. Nu de achterliggende code voor een groot deel operationeel is, kan ik me gaan richten op de voorkant. Waar nog wel het een en ander aan gesleuteld moet worden. Na een paar dagen van php is het weer lekker om eens ** kuch ** simpel met stijlbladen in de weer te gaan. Qua lay gaat de Memo Tours website gestalte krijgen zoals op onderstaand screenshot te zien is.

Een tijdje geleden kwam ik op een weblog (ben vergeten welk) een voorbeeldje tegen van een truc met fotobewerking: dezelfde persoon was meerdere keren te zien in een kamer. Een bijzonder leuk effect. En omdat ik het idee zo aardig vond, kon ik het niet nalaten om zelf eens te checken wat de moeilijkheidsgraad is van een dergelijke bewerking.

Nou, de complexiteit valt best mee. In mijn probeersel heb ik nauwelijks gelet op de geschiktheid van de achtergrond, de foto's zijn zonder statief gemaakt en ik heb niet al te veel tijd besteed aan het bewerken van de verschillende lagen. En toch is het resultaat al best aardig te noemen. Het (gewillige) slachtoffer dat je aangrijnst is trouwens mijn jongste meisje: Lara.

Windows Vista beta 2 (build 5308) is beschikbaar gesteld. Op de website van PCMag krijg je een aardig beeld van hetgeen het operating system voor je in petto hebt. Check dan die 50+ screen shots.

Zelf vind ik Windows Vista er best slick uitzien. Desondanks krijg ik een beetje een nare nasmaak bij het zien van onderstaand schermpje:

Windows Vista zit niet helemaal lekker in zijn vel en er zijn een paar boosdoeners aangewezen die hiermee te maken hebben. Uhhhh ... beetje sullig dat het stuk voor stuk processen zijn die onderdeel uitmaken van het besturingssysteem zelf.

UX (User Experience) Magazine heeft een layout die mij persoonlijk heel erg aanstaat. Op basis van de schermresolutie bepalen een stijlblad en een javascript hoe de inhoud gepresenteerd gaat worden. Om zodoende zo optimaal mogelijk gebruik te maken van de beschikbare ruimte op het beeldscherm.

En voor de webbouwvakkert hebben ze nog goed te verteren content ook.

UX Mag checken

Oke dan. Dit ziet er toch wel triple-hip uit. Ik had hier en daar al wat berichten gehoord over de hardware aanbevelingen om Vista te draaien. Maar glurend naar o.a. dit screenshot van de december 2005 build van Vista kan ik begrijpen dat Windows Vista enige eisen gaat stellen aan de grafische capaciteiten van de computer. De zweep erover moeten om Aero tot zijn recht te laten komen.


Mijn blingbling kant zegt: kewl! Hebbehebbehebbe. Ik ook! Schuif die doos maar naar binnen. Aan de andere kant: heb ik dit nou echt nodig om een briefje te kunnen schrijven, een e-mailtje te versturen of wat javascript code te kloppen? Uhhhhh ....


Meer Vista screenshots bekijk je hierzo.

Kewl! Niks geen gammel Ikea burootje, lawaaierige pc, 15 inch monitor en meters kabels die spontaan tot een onontwarbare kluwen muteren. Microsoft versmelt de functionaliteit van een kantoormeubel met die van computer en beeldscherm in de response desk.

Mooi ontwerp. Maar ik plaats alvast de volgende kanttekeningen: schaf je dit ding aan zonder tweede hypotheek? Denk aan je rug: kies bij de aanschaf vooral NIET voor het 1 jaar carry-in supportcontract. Is de reponse desk kwetsbaar voor DDoS aanvallen?

[ via forgetfoo ]

Resident Evil (de film) is überkewl. Ik weet het. Moeilijk te geloven. En bijkans onmogelijk voor een film gebaseerd op een computerspel. Want meestal is het ruk in het kwadraat. Neem Tombraider bijvoorbeeld. Of het bijkans randdebiele Doom dat dit najaar uitkwam. Maar Resident Evil is (mijns inziens althans) de uitzondering die de regel bevestigt. Strak. Spannend. Aardig goeie special fx. Ik kon het daarom ook niet nalaten om uit een paar VLC screencaptures van Resident Evil wat beta banners te bakken. O.a. afkomstig uit de scene dat het Umbrella Corp commandoteam het huis binnenvalt dat de toegangspoort tot de Hive vormt. Pretty sharp huh?.

Er zijn plenty websites die zich bezighouden met het showcasen en bespreken van stijlbladontwerpen. Eén van de eerste die ikzelf tegenkwam en waarvan ik behoorlijk onder de druk raakte, was CSS Zen Garden van Mezzoblue's Dave Shea. Van tijd tot tijd reis ik even af naar de Zen Garden om te kijken of er nog nieuwe goodies zijn toegevoegd. Het was alweer enige tijd geleden (langer dan normaal als je het mij vraagt), maar er zijn weer een paar lekkere ontwerpen te bewonderen. Van de updateronde in november is Organica Creativa mijn favoriet. Waarom? De gebruikte kleurencombinatie en de ronde vormen (chromosoomachtige structuren?) spreken me wel aan. Hoewel ik me afvraag of de lijvige achtergrondafbeelding (in de kop) ook bij dynamische pagina's bruikbaar blijft. Bijvoorbeeld bij een pagina met weinig inhoud.

Oké, dit is wat ik als een überhip ontworpen website beschouw: snook.ca Extreem rustig en eenvoudig in zijn uitstraling. En hoewel het vaak denigrerend gebruikt wordt als iemand het over een eenvoudige site heeft, ik bedoel het hier als een compliment. Het geheel is buitengewoon origineel te noemen. Bijvoorbeeld voor wat betreft de manier waarop de maker met de vormgeving van de comments is omgegaan.Over layout gesproken: de 4-koloms stijlblad-gebaseerde opmaak is op zijn minst onalledaags te noemen. En wat dacht je van de wijze waarop het invoegen van commentaar wordt afgehandeld? Naar mijn mening erg charmant.
Jonathan, de webdevver die dit juweeltje onderhoudt, gebruikt een combinatie van XHTML, stijlbladen en DOM manipulerende javascripts om je browser naar zijn hand te zetten.