Blog van Webatvantage

Ons CMS wordt tot Mendeleev (Mendelejev) gedoopt

gepost op Maandag 03 mei 2010 door Lieven

Omdat CMS (Content Management System) een woord is dat niet echt bekt en je een kind altijd best een naam geeft, hebben we besloten om versie 4.0 van ons CMS te dopen met de naam Mendeleev.

Waarom Mendeleev?

Sinds mijn opleiding tot Industrieel Ingenieur Chemie aan het KAHO Sint-Lieven, heb ik voorlopig niks gedaan dat verband houdt met Chemie. Dus tijd om hier eindelijk eens iets aan te doen.

Alle pc's in ons netwerk hebben de naam van een wetenschapper (Faraday, Bohr, Mendeleev, Euclides, Vesalius, Murphy, Einstein ...) of een kunstenaar (Renoir, Monet, ...).
Dmitri Ivanovitsj Mendeleev was een Russisch scheikundige die als de grondlegger van het huidige periodiek systeem wordt gezien. Het periodiek systeem (ook de tabel van Mendeleev genoemd) is een tabel met daarin een systematische weergave van alle scheikundige elementen (atomen), de bouwstenen van zowat alles in ons leven. 

Dit verhaal kunnen we doortrekken naar ons CMS, dit is opgebouwd uit verschillende modules, die de bouwstenen van uw website worden. Zo kan u als klant alle content van uw website zelf beheren. Want anno 2010 is Content immers King en Mendeleev de ideale tool om deze te beheren!

Hebt u nood aan bouwstenen, kom dan gerust eens langs voor een demo. Dan kijken we samen even, wat we u kunnen aanbieden uit onze bouwdoos, aangevuld met eventueel maatwerk.

Aangezien Mendeleev op nogal wat verschillende manieren wordt geschreven, hebben we een reeks domeinnamen vastgelegd: www.mendeleev.be, www.mendeleef.be, www.mendelejev.be en www.mendeleyev.be. Als agent van DNS.be en EURid.eu zitten we immers aan de bron.

Werken met CSS sprites

gepost op Woensdag 07 april 2010 door Pieter

Wat zijn CSS sprites ?

CSS sprites zijn meerdere achtergrondafbeeldingen die herleid worden tot 1 grote afbeelding. Daarna wordt met behulp van de css-eigenschap "background-position" de juiste afbeelding weergegeven op basis van de x en y coördinaten van de achtergrondafbeelding.

Enkele voordelen...

• Het grootste voordeel is het verschil in laadtijd voor uw website. Doordat allerlei kleine afbeeldingen tot 1 afbeelding herleid zijn, worden er minder http-requests gemaakt worden, wat leidt tot een snellere laadtijd van uw site.
• Je hoeft maar één afbeelding te onderhouden in plaats van tientallen kleine aparte afbeeldingen.
• Alles is 100% regelbaar via de CSS.
• Het mouse-over probleem in Internet Explorer wordt hiermee verholpen.

Sprites worden vaak gebruikt in de navigatie van een website. Enkele bekende voorbeelden hiervan zijn de websites van Apple en Google.

Bekijk een voorbeeld van hoe een CSS sprite tot stand komt.

Lazy load en preload

gepost op Donderdag 18 maart 2010 door Thomas

Lazy load is een jquery plugin geschreven in JavaScript. Met deze plugin worden afbeeldingen pas gedownload wanneer je er naar scrollt. Je kan een duidelijk voorbeeld bekijken in onze blog en portfolio. De pagina zal sneller laden omdat de foto's die nog niet zichtbaar zijn niet worden gedownload. Het is dus eigenlijk het tegenovergestelde van preloading van afbeeldingen.

Lazy Load

Het lazy load scriptje is zeer eenvoudig te implementeren. Je kan zelf instellen welke foto's er wel en niet moeten lazy loaden. Het is bijvoorbeeld niet aan te raden om dit op je navigatie of layout afbeeldingen toe te passen. Het kan wel interessant zijn voor lange blogberichten met veel (grote) foto's. Niet enkel de client heeft hier voordeel bij. De server zal ook minder request krijgen.

Preload

Met preloading worden je afbeeldingen al ingeladen voor je naar de bewuste pagina hebt gesurft. Dit kan handig zijn bij fotogallerijen. Zo kan de bezoeker zeer snel alle foto's in een hoge resolutie bekijken. Maar er zal uiteraard nog altijd moeten gedownload worden. Je kan het preloaden dan bijvoorbeeld starten als je de thumb afbeeldingen van je gallerij weergeeft.

Download pagina lazy load

Flash vs JavaScript

gepost op Maandag 08 maart 2010 door Thomas

Met flash kan je interactieve multimedia sites bouwen. Flash is uitermate sterk voor multimedia en flashy websites. Maar er zijn ook een aantal sterke nadelen waarom wij flash proberen te beperken tot het minimum. Je kan bovendien vergelijkbare effecten en animaties bekomen met JavaScript.

Nadelen met flash

Toegankelijkheid
Een flash website wordt door je webbrowser als één object beschouwd. De functionaliteiten die webbrowsers aanbieden worden hierdoor drastisch beperkt. Deze beperkingen kunnen gedeeltelijk door de flash programmeur worden opgevangen. Maar dit zal extra tijd in beslag nemen omdat dit niet standaard voorzien is. Enkele voorbeelden:

• De vorige en volgende knop kan je niet gebruiken binnen de flash site.
• De url (of webadres) is op elke pagina van je flash site hetzelfde. Je kan dus geen bookmark leggen naar een bepaalde pagina.
• Je kan tekst of afbeeldingen binnen de site niet selecteren.
• Screen readers of screen translaters kunnen je pagina niet lezen. Mensen met visuele of motorische beperkingen zijn er dus aan voor de moeite.
  
• De keyboard navigatie is beperkt.

SEO
De toegankelijkheid beperkingen die jij en je browser ervaren gelden ook voor zoekmachines. Het is zeer moeilijk voor zoekmachines om de content van een flash website te indexeren. Je kan dit als webmaster opvangen door extra content toe te voegen in je broncode. Maar dan doe je dus dubbel werk. En bovendien zal je nooit hetzelfde effect van een goede html website kunnen bekomen. Het is dus ook geen toeval dat je via een zoekmachine zelden op een flash website terecht zal komen.

Hoge productiekost
Onze projecten zijn allemaal voorzien van een CMS. Zo kan je gemakkelijk de inhoud van je website aanpassen. De inhoud op je website wordt dan dynamisch aangepast. Dit kan je uiteraard ook met een flash website bekomen. Maar dit is bij flash wel veel complexer! De productiekost zal bij een flash website dan ook veel hoger oplopen.

Je flash-player moet up-to-date zijn.
Er zijn besturings systemen die geen flash ondersteunen (vb bij smarthones) Sommige versies zijn dan weer niet compatibel. Het kan ook zijn dat je als clients de it-beheerder moet inschakelen omdat je onvoldoende rechten hebt om iets te installeren enz.

JavaScript?

Dankzij JavaScript Libraries als jquery, prototype, script.aculo.us kan je zeer toffe animiaties creëren. Een eenvoudig voorbeeld vind je terug in de blauwe balk bovenaan op deze pagina.

Het grote voordeel is dat deze animatie telkens een extra is. Voor bezoekers waar de JavaScript is uitgeschakeld (vb. zoekmachines, smartphones, ...) zal de animatie niet worden weergeven. Maar er zal wel een alternatieve inhoud zijn.

Waarom flash gebruiken?

Flash heeft uiteraard ook een aantal zeer grote troeven. Op multimedia gebied kan html en JavaScript niet tippen aan Flash. Op thefwa.com kan je enkele flash sites bekijken die zeer spectaculair zijn. (De kostprijs bovendien ook). Maar je website moet niet uitsluitend uit flash bestaan. Je kan de voordelen van flash en html combineren. Een mooi voorbeeld hiervan is YouTube. Bij webatvantage proberen we het gebruik van flash te beperken, maar we maken er soms ook handig gebruik van. Zo kan je in onze CMS zeer gebruiksvriendelijk uploaden via flash. Of met behulp van flash kick ass grafieken maken.

Het is dus een kwestie om de juiste technologieën voor de juiste doeleinden te gebruiken. En deze technologieën op de voet te volgen.