registreren | inloggen
Gebruikersnaam Wachtwoord

Het nieuwe smoel van DSE

'mockup' van Mathijs

'mockup' van Mathijs

Het is gelukt, de homepage van DSE is om. En omdat DSE er ook is om te leren hoe je zoiets bouwt zal ik hieronder wat meer vertellen over de techniek erachter.

De DSE-site is niet langer meer een passieve pagina maar wordt nu opgebouwd vanuit een database. De gekozen engine achter de site is Drupal, een Open Source Content Management Systeem. Drupal is erg geschikt voor zeer drukke sites vanwege de mogelijkheid tot caching. Het is ook in staat om tienduizenden gebruikers in een database te beheren. Allebei belangrijke eigenschappen. Omdat het bovendien Open Source is kon het verder worden uitgebouwd om aan de overige wensen van DSE te voldoen.

Drupal is modulair opgebouwd en ook het uiterlijk is gemakkelijk aan te passen. Dat is gebeurd middels een template en stylesheet. Uitgangspunt bij het design is een idee van Mathijs, met een paar frisse Eindhovense foto's. Hierboven is zijn 'mockup' te zien, gemaakt in Photoshop. De template is opgebouwd met XHTML en CSS. Het gebruik van XHTML is belangrijk als je ervoor wilt zorgen dat de pagina's niet uitsluitend op de meestgebruikte browser leesbaar zijn maar ook kunnen worden gebruikt op andere apparaten zoals bijvoorbeeld smartphones of apparatuur voor blinden en slechtzienden.

Het web-design is een zogenaamd liquid design waarbij de breedte van de browser mag variëren. Zo blijft het zelfs op een pocket-pc goed bruikbaar. Maar daarnaast willen we het design ook toepassen op alle DSE-applicaties zoals o.a. de webmail. Ook dan is het belangrijk om niet aan een vaste breedte vast te zitten.

De meeste liquid designs gebruiken een vaste (solid) kleur in de header zodat de breedte gemakkelijk kan variëren. Bij de 'mockup' van Mathijs was dat moeilijk te realiseren zonder het design geweld aan te doen. Foto's uitrekken is wat lastig... Uiteindelijk is ervoor gekozen om de foto's enigszins mee te laten schuiven bij het variëren van de breedte. De middelste foto is bovendien aan de randen half-transparant. Zo schuift de hele collage op de kleinere schermpjes mooi in elkaar en blijft het karakter redelijk behouden.

"Half-transparante foto's?" denk je misschien. "Die heb ik nooit eerder gezien op web-pagina's." Dat kan kloppen. Het wordt vrijwel niet gebruikt omdat de meestgebruikte browser, Internet Exporer, het niet goed ondersteunt. Maar gelukkig zijn er manieren om het toch voor elkaar te krijgen. De meest elegante oplossing vond ik bij A List Apart toen ik op zoek was naar mooie dropshadows voor de foto's van Rien. Bij IE wordt nu heel selectief een grafisch filter aangezet voor de transparante foto.

Oh ja, de foto's van Rien. Schitterend zijn ze. Maar ze maken een liquid design wel heel lastig. Meestal zijn ze zo groot dat je het beetje tekst van een nieuwsbericht er nooit mooi omheen kunt laten vloeien. Daarom staat tekst er nu gewoon altijd onder, ook als de browser breed gemaakt wordt. En als maximum breedte voor een foto geldt 500 pixels zodat die nog net zichtbaar is op de meestgebruikte resolutie van 1024x768.

En alsof we nog niet genoeg uitdagingen hadden werd er halverwege het traject ook nog een nieuw logo bedacht. Met een transparante achtergrond en een zeer hoge kleurdiepte. Totaal ongeschikt om als eenvoudig plaatje op te nemen in het design. Hier is dus ook de IE-hack op toegepast om het als halftransparante PNG in de header op te nemen. Niet ideaal maar een echt goede oplossing vergt een nieuw logo.

Tenslotte is in het design ook rekening gehouden met het aanlog-systeem van DSE. Afhankelijk van al dan niet ingelogd zijn wordt de xhtml-code anders opgebouwd. In de foto's is rekening gehouden met de leesbaarheid van de login-informatie op verschillende browserbreedtes.

Dan nog het weer, nu al een van de populairste pagina's van de nieuwe site! Voor het actuele weerrapport draait er een apart programma: PHP Weather. Uiteraard ook weer Open Source en aangepast aan onze wensen. Het rapport is gebaseerd op het METAR-report van Eindhoven. De weervooruitzichten zijn afkomstig van WeatherNews.

Enjoy!

Vrijwel allemaal...

Ja, vrijwel alle Open Source CMS-en zijn onder de loep genomen en Drupal was een duidelijke winnaar. De extra's en de uitstekende features van Drupal maakten dat de rest afviel.