De functie:

De uitleg:

// replace break rules with a linefeed and make sure a paragraph also ends with a new line
Hier gaan we dus -br- tags vervangen door enters. En aangezien paragrafen ook moeten gescheiden worden van elkaar en meerdere paragrafen in de html op 1 regel kunnen staan zorgen we ervoor dat deze al in html vorm op verschillende lijnen staan.

// remove tabs
De tabs die door indentatie in de html-code staan mogen in de plain-text versie ook verwijderd worden.

// remove the head- and style-tags and all their contents
De reden waarom deze functie geschreven is. De strip_tags functie van php zal enkel de start- en eind-tags van deze elementen verwijderen, waardoor alles dat tussen deze tags staat behouden blijft. Door een preg_replace te doen van deze html-tags en hun inhoud is dit probleem opgelost.

// replace links with the inner html of the link with the url between ()
Indien je de parameter $includeAHrefs niet overschrijft met de waarde false zal deze regel de links in de html vervangen door de html die binnen de link staat met daarachter de url tussen haakjes. Dit zorgt ervoor dat links in je html-document niet verloren gaan, wat wel het geval is bij strip_tags.

// replace images with their alternative content
Hetzelfde voor de afbeeldingen. Deze regels zal de afbeelding vervangen door de alt parameter van het img-element.

// strip tags
En nu pas laten we de strip tags functie los op de tekst.

// replace 'line feed' characters with the 'carriage return/line feed' character pair
We vervangen de line feeds of "\n" karakters door het carriage return line feed paar zodat volgende regel kan uitgevoerd worden.

// replace double, triple, ... line feeds to one new line
Deze regel zorgt ervoor dat de overbodige witregels in de tekst vervangen worden door 1 witregel.

// decode html entities
Deze regel zal html entiteiten zoals é vervangen door hun plain text waarden (in dit geval dus é) door middel van de Spoon functie htmlentitiesDecode. Voor meer info over Spoon kan je terecht op spoon-library.be.
Als je niet met Spoon werkt kan je hier natuurlijk ook altijd de standaard php functie html_entity_decode gebruiken.

Een voorbeeld:

Als voorbeeld wou ik de Netlash nieuwsbrief van 21 januari even door deze functie halen.

Bekijk achtereenvolgens eens de originele nieuwsbrief, de plain text inhoud gemaakt met strip_tags en de plain text inhoud gemaakt met getPlainText.

Opmerkingen:

Zodat jullie ze niet meer moeten geven, enkele opmerkingen:

• Niet alle html karakters worden goed vervangen.
• Afhankelijk van de html code zullen er hier en daar toch nog meerdere witregels staan.
• Het beste resultaat wordt natuurlijk nog altijd verkregen als je zelf de plain inhoud van je nieuwsbrief maakt.

Nog opmerkingen zijn uiteraard welkom :-)

(Deze blogpost is geschreven door Netlash webdevelopster Annelies, en verscheen eerst op haar persoonlijke blog.)

HTML naar plain text omvormen geschreven door Annelies in: webdevelopment

Tags: e-mail, email nieuwsbrief, plain text, strip, tags

In dit artikel wil ik deze methodiek met jullie delen, en jullie feedback daarop vragen (want alles kan altijd beter, niet?).

De stappen die we nemen zijn er met een goede reden. Zie het bouwen van een website als het beklimmen van een berg. Ja, je kan zonder zekeringen helemaal naar boven klimmen. Maar toch zal je beter op regelmatige intervallen een haak in de bergwand slaan om je musketon vast te maken. Als je niet gevallen bent, bij het naar boven klimmen, heb je inderdaad een hele hoop extra en overbodig werk gehad met die musketons. Maar als je wel mistrapt en valt, zorgen de borgen ervoor dat je maar een kleine afstand opnieuw moet omhoogklimmen - en niet de dodelijke val over de volledige diepte meemaakt.

Vandaar dit proces. Een aantal van de stappen lijken overbodig, maar ze zorgen wel voor een constante kwaliteitsgarantie over projecten heen.

0. Voorbereiding

Na de eerste prospectiegesprekken wordt de prospect meestal onze klant. We starten met een beetje administratie: zorgen dat de afspraken rond facturatie goed gemaakt zijn, en een duidelijke planning. Op de stappen die hieronder volgen wordt een datum gekleefd, zodat zowel onze klant als wijzelf duidelijk weten wanneer wat van ons verwacht wordt.

Tegelijkertijd sturen we al een eerste vragenlijst door (voer voor een andere blogpost) rond inhoud en vorm.

1. Analyse

De eerste echte stap is heel eenvoudig samen te vatten: 'goed nadenken'.

Mijn vader zei me altijd: "Beter twee keer meten en maar één keer zagen - da's efficiënter". Wel, da's ook zo bij het bouwen van websites.

Dit is vooral praten. Praten met onze klant: hoe zit zijn bedrijf of organisatie in elkaar, wat zijn de doelgroepen, wat is de doelstelling van de site?

Het gaat over het verzamelen van informatie: de transfer van kennis die in het hoofd van onze klant zit, naar onze hoofden - om die dan te bevruchten met onze kennis van wat werkt online en wat niet.

We doen dit in eerste instantie met een echte kick-off meeting. Daarin overlopen we met onze klant nog eens de zaken uit de voorbereidingsfase - en vragen we hem de pieren uit zijn neus over zijn bedrijf of organisatie.

Typisch verzamelen we al die informatie in een mindmap; zo kunnen we onze gedachten op een gestructureerde manier ordenen.

Hier worden ook de functionele vereisten van de website verzameld: wat moet de site doen, op welke manier? Je kan dit gerust een functionele analyse noemen.

2. Informatie-architectuur

Die verzamelde informatie - hoe geordend of chaotisch ook - gaan we structureren, hiërarcheren, labelen. Dit heet informatie-architectuur.

We bouwen al een eerste ruwe versie van de site in html - wat wij een structuurdocument noemen. Dit is een lege versie van de site: zonder layout, zonder functionaliteit, vaak ook zonder afgewerkte teksten.

We zouden dit op papier (of in Powerpoint of in Visio of ...) kunnen doen (en vaak doen we dat ook eerst); maar een klikbare versie legt de flow doorheen de site bloot. Als je effectief van pagina naar pagina kan klikken via werkende links, voel je hoe de site in elkaar zit, en waar de 'kleine haperingskes' zitten.

Je voelt hoe het klikt.

Dit is een iteratief proces: op basis van de informatie die we verzamelden, maken we een eerste voorstel, en zetten dat online voor onze klant. We vragen feedback, sturen bij, leveren een nieuw voorstel op, vragen feedback... tot het goed zit.

Dit is de belangrijkste fase in het hele proces. 

Vergelijk het met het bouwen van een huis: vooraleer je begint te metselen, teken je toch eerst een plan? Dit structuurdocument is het architectuurplan van de website.

Het voorbeeld hierboven is dat van de vernieuwde bSeen website - je vind de twee iteraties van het structuurdocument hier.

3. Design

Na goedkeuring van het structuurdocument starten we met de layout-fase.

We vertrekken hiervoor vanuit de wensen van de klant. In de voorbereidende fase vroegen we hem een like/dislike lijst: een lijst van andere websites die hij visueel goed vind (en waarom) of niet goed vind (en waarom).

Daarnaast gebruiken we ook het aangeleverde huisstijlmateriaal. We hebben al het volledige spectrum meegemaakt: van 'er is helemaal niets, doe maar' tot 'hier is onze 260 pagina's tellende huisstijlgids'.

Onze designers beginnen altijd met schetsen, op papier. Ze baseren zich daarbij op het bovenstaande structuurdocument:

Die eerste ruwe schetsen worden verder verfijnd en uitgewerkt:

Daarna beginnen we aan het eerste ontwerp in Photoshop. We starten daarvoor met een binnenpagina - wat wij het 'werkpaard' noemen. (Het 'werkpaard' is die pagina die zonder extra ondersteuning al het harde werk moet doen: overbrengen van betekenis.)

Deze fase (eerste echte ontwerp in Photoshop) dient om de stijl van de site vast te leggen. Het is niet de bedoeling om hier alle details al vast te leggen. Wel om onze klant een gevoel te geven van hoe de site er zal uitzien. Vertrekkend van dit eerste ontwerp zullen de webdesigners dan extrapoleren naar andere pagina's.

Het gaat dus over de grote layout-lijnen. Vandaar dat we niet met de homepagina starten - de binnenpagina, de inhoudspagina zal veel meer van deze layout-lijnen blootleggen.

(Bovendien is de homepagina al lang niet meer de belangrijkste pagina van een website.)

Ook dit is een iteratief proces: we leveren een eerste voorstel, vragen feedback, sturen bij...

Als die algemene stijl goedgekeurd is, werken we ook de andere pagina's uit: de homepagina, een blogpagina, een contactformulier...

4. Slice

Deze goedgekeurde Photoshop documenten worden uitgewerkt in html/css templates.

Ze worden opgemaakt volgens onze interne normen, en klaargezet om geïntegreerd te worden in ons CMS.

5. Development

Ondertussen zijn de webdevelopers al druk bezig om de functionaliteit die op maat moet geprogrammeerd worden uit te werken. Ze baseren zich daarbij op de functionele analyse uit stap 1 en het structuurdocument uit stap 2.

We hebben al heel veel veelgevraagde functionaliteiten uitgewerkt als standaard modules voor Fork CMS; maar tegelijkertijd geloven we dat elke site maatwerk vraagt.

Die maat-functionaliteit wordt dus uitgewerkt in nieuwe Fork-modules.

6. Integratie

De structuur, het design, en het programmeerwerk worden geïntegreerd in het Content Management Systeem, Fork dus.

Als we ons werk in de vorige stappen goed gedaan hebben, staat hier een werkende website die voor 90% goed zit.

7. Testen

Het spreekt vanzelf dat we dit uitgebreid testen; we leveren ook een testversie op aan onze klant zodat ook hij kan testen.

Onze klant moet uiteraard niet testen of het werkt (dat is onze job) - wel of alles er in zit, of alles op de juiste plaats zit, of we alles goed begrepen hebben...

Maar zoals gezegd, door de stapsgewijze aanpak waarbij de klant op elk moment mee stuurt, zal dit een quasi afgewerkte site zijn.

8. Content

Als alles aan beide kanten uitvoerig getest is, leveren we de site op.

Dat is het moment waarop onze klant inhoud in het CMS kan plaatsen. Ik 'eis' meestal van mijn klanten dat ze effectief zelf in het CMS werken - zo leren ze het kennen, en als er nog vragen of kleine wijzigingen opduiken dan kan dit nu, en niet als de site live is en de ganse wereld zit mee te kijken.

Op dat moment kan de klant niet alleen de teksten aanpassen, maar ook de beelden.

De website wordt op de definitieve server geplaatst (en nog eens getest, om verrassingen te voorkomen), maar voorlopig onder een niet-definitieve URL.

9. Live

Als alle inhoud geplaatst is, kan de website live gaan. We koppelen dan de definitieve URL aan de server.

Vanaf dat moment kan de klant die site volledig zelf beheren. Om het met een overdrijving te zeggen: na afloop van het proces wil ik die klant niet meer zien. Dit is uiteraard niet waar; maar voor dagelijkse aanpassingen moeten onze klanten volledig zelfstandig met het Content Management Systeem kunnen werken. (Als voor elke dt-fout een klant naar zijn webbureau terug moet, creëert dit alleen maar frustratie. Het webbureau moet dit inplannen, de klant wil dit onmiddellijk; het webbureau moet dit factureren, de klant wil dat gratis... Vandaar is een flexibel en uitgebreid CMS levensnoodzakelijk.)

Uiteraard ondersteunen we op elk moment onze klant; en staan we klaar voor functionele wijzigingen of uitbreidingen van de site - dan start dit proces opnieuw.

Het eindresultaat van de bovenstaande staooeb voor de bSeen website kan je online bekijken.

10. Support

We volgen elk project op met een support-periode: een aantal weken na oplevering dat we die site met de loep mee volgen - zodat we snel kunnen ingrijpen mochten er bugs opduiken of als er kleine wijzigingen nodig zouden zijn.

Als onze klant dat wil (meestal enkel bij grotere projecten), bouwen we dit structureel in met een onderhoudscontract.

Dit zijn dus de stappen die we volgen bij het uitbouwen van onze websites. Nogmaals in een grafiek gegoten:

De verschillende stappen na elkaar in een slideshow tonen het onstaansproces van zo'n site:

We hebben ondertussen geleerd dat de stappen in dit proces nodig zijn. Als we er één overslaan, betekent dit heel vaak problemen of frustratie verder op de lijn.

Dit betekent niet dat we een maand afgezonderd in een hokje gaan zitten met een koude pizza en een fles cola - onze klant stuurt op elk moment mee. We spelen als het ware ping-pong met hem.

Het gevolg is dat we net zo veeleisend zijn voor onze klanten als we zijn voor onszelf. Maar dat is de enige manier om tot een goed eindresultaat te komen.

Zo, da's de korte samenvatting van ons webdesign proces. Hebben jullie feedback? Hoe verloopt het bij jullie? Hoe zouden jullie dit proces verbeteren?

Webdesign proces bij Netlash geschreven door Bart in: webdesign

Tags: kwaliteit, proces, webdesign

Queries optimaliseren, veel developers zien het als een straf. Het kan nochtans eenvoudig zijn, maar zoals bij alles moet je eerst begrijpen wat er gebeurt vooraleer je kan gaan ingrijpen.

Om te begrijpen hoe MySQL een query behandelt kan je het EXPLAIN-statement gebruiken. Met behulp van dit statement kom je heel wat te weten.

Een voorbeeld:

EXPLAIN SELECT d.id, d.profile_id, ...
FROM designs AS d
INNER JOIN templates AS t ON d.template_id = t.id
INNER JOIN profiles AS p ON d.profile_id = p.id 
WHERE d.active = 'Y' AND d.offline = 'N' AND d.template_id > 0 AND (d.date_expire IS NULL OR d.date_expire > NOW());

Als resultaat krijg je iets zoals hieronder:

In deze tabel zijn er verschillende kolommen met elk hun eigen betekenis, hieronder bespreken we de relevante kolommen. Meer informatie over alle kolommen kan je terugvinden op dev.mysql.com.

select_type

Het gebruikte SELECT-type. Mogelijke waardes zijn:

• SIMPLE

  Zoals het woord als zegt: een eenvoudige SELECT.

• PRIMARY

  Omringende SELECT-query.

• UNION

  Tweede of laatste SELECT in een query die gebruik maakt van UNION.

• DEPENDANT UNION

  Tweede of laatste SELECT in een query die gebruikt maakt van UNION en afhankelijk is van de omringende query.

• UNION RESULT

  Resultaat van de UNION.

• SUBQUERY

  Eerste SELECT in de subquery.

• DEPENDANT SUBQUERY

  Eerste SELECT in de subquery en afhankelijk van de omringende query.

• DERIVED

  Afgeleide tabel (maw: er staat een subquery in de FROM-clause).

• UNCACHEABLE SUBQUERY

  Subquery waarvan iedere rij moet worden geherevalueerd.

• UNCACHEABLE UNION

  Tweede of laatste SELECT in een query die gebruikt maakt van een UNION in de subquery.

table

De gebruikte tabel.

type

Het type van JOIN, er zijn verschillende waardes mogelijk.

De verschillende types worden hieronder aflopend gesorteerd. De volgorde van de MySQL manual wordt gerespecteerd, en deze omschrijft de volgorde als 'gesorteerd van het beste type naar het slechtste'. In de praktijk is deze volgorde niet van 'snel naar traag', gezien dit alles afhangt van wat je exact verwacht van je query.

• system

  Indien de tabel maar 1 rij bevat.

• const

  Je vergelijkt met een constante en is daarom snel.

  SELECT * FROM table WHERE id = 1;

• eq_ref

  Er is maar 1 rij uit deze tabel die past bij (de combinatie van) de vorige rijen. Hier gaat het dus om een PRIMARY KEY of UNIQUE index in de tabel die wordt gejoined.

  SELECT t1.*, t2.* FROM table1 AS t1 INNER JOIN table2 AS t2 ON t2.id = t1.fk;

• ref

  Bij (de combinatie van) de vorige rijen kunnen meerdere rijen van deze kolom matchen omdat de kolom waarop de tabellen gejoind worden geen unieke waarden bevat.

  SELECT * FROM table1 AS t1 INNER JOIN table2 AS t2 ON t2.not_unique = t1.fk;

• fulltext

  In tegenstelling tot bovenstaande query-types wordt hier niet gezocht op een exacte waarde in je dataset, maar wordt een match gedaan op de volledige inhoud van je rij om te bekijken of de waarde voorkomt en hoe vaak deze voorkomt.

  Hierbij worden intern ook enkele speciale handelingen uitgevoerd: zo worden bijvoorbeeld zoekwoorden die in meer dan 50% van de rijen voorkomen of taal-specifieke stopwoorden (zoals some, then, …) niet meegerekend.

  Met 'IN NATURAL LANGUAGE MODE' zal het nodig zijn een FULLTEXT index aan te maken op de columns die je wenst te doorzoeken.
  Bij 'IN BOOLEAN MODE' is dit niet nodig (opzoeken zal hierdoor wel trager gaan), en kunnen ook speciale operators meegegeven worden om heel specifiek te gaan zoeken. Deze zal uiteraard om deze reden ook nog trager zijn dan de NATURAL LANGUAGE MODE omdat dit een veel complexere operatie kan worden.

  SELECT * FROM table WHERE MATCH(column) AGAINST('search');

• ref_or_null

  Idem als 'ref', maar hier wordt ook gecontroleerd op null-waarden.

  SELECT * FROM table1 AS t1 LEFT OUTER JOIN table2 AS t2 ON t2.not_unique = t1.fk;

• index_merge

  Dit type geldt voor queries waarbij het resultaat de uitkomst is van meerdere verschillende selecties (typisch bij OR). Intern worden deze verschillende selecties apart uitgevoerd en de resultaten hiervan worden gecombineerd weergegeven als omvattende resultset die voldoet aan de volledige expressie.

  SELECT * FROM table WHERE column1 = X OR column2 = Y;

• unique_subquery

  De kolommen die gematcht worden zijn het resultaat van een subquery die unieke kolommen geeft.

  SELECT * FROM table1 WHERE column IN (SELECT id FROM table2);

• index_subquery

  Dit type is gelijk aan unique_subquery, behalve dat in plaats van een subquery met unieke waarden, deze werkt met niet-unieke kolommen.

  SELECT * FROM table1 WHERE column IN (SELECT not_unique FROM table2);

• range

  Enkel rijen binnen een bepaalde range van een index moeten worden onderzocht, de gebruikte index kan je terugvinden in de key-kolom.

  SELECT * FROM table WHERE id BETWEEN 10 AND 20;
  SELECT * FROM table WHERE id IN (10, 11, 12);

• index

  Idem als ALL (zie onder), maar enkel de index moet onderzocht worden.

  SELECT * FROM table WHERE id = 1;

• ALL

  De volledige tabel moet onderzocht worden. Indien dit voorvalt los je dit best op.

possible_keys

Een oplijsting van de indexen die MySQL kan gebruiken. Dit wil niet zeggen dat er één zal gebruikt worden.

Indien deze kolom leeg is, dan zijn er geen bruikbare indexen gevonden. Het kan dan nuttig zijn om op basis van de WHERE-clause een toepasselijke index te maken.

key

Hier kan je zien welke key (index) gebruikt is.

ref

Hier kan je zien welke kolom vergeleken werd met de gebruikte index.

rows

Het (geschatte) aantal rijen dat MySQL zal onderzoeken.

Als je gebruik maakt van JOINS dan moet je de resultaten in deze kolom met elkaar vermeningvuldigen, zo bekom je het totale aantal rijen. Het spreekt vanzelf dat een lager totaal een snellere query oplevert.

extra

In deze kolom kan je informatie vinden over hoe MySQL de query oplost. Mogelijke waardes zijn:
(enkel relevante waardes zijn vermeld, meer op: http://dev.mysql.com/doc/refman/5.1/en/using-explain.html)

• Distinct

  MySQL zoekt naar unieke waardes.

• Impossible WHERE noticed after reading const tables

  Indien de WHERE-clause altijd false oplevert.

• No tables

  Indien de query geen FROM-clause heeft.

• Using filesort

  Om de rijen correct te sorteren moet MySQL de gevonden resultaten opnieuw overlopen.

• Using index

  Er is een enkel een index gebruikt om de rijen te selecteren.

• Using temporary

  Om de query op te lossen moet een tijdelijke tabel gemaakt worden. Dit valt meestal voor indien je GROUP BY of ORDER BY gebruikt.

• Using where

  Om de query op te lossen is de WHERE-clause gebruikt. Indien dit niet voorkomt is er ofwel iets mis met je query of onderzoek je bewust alle rijen van de tabel.
  Let wel: dit kan een vertraging aanduiden als er veel data is.

Zoals je kan afleiden uit bovenstaande lijst vermijd je best 'Using filesort' en 'Using temporary', dit zijn de twee gevallen die een query traag maken.

Wat is een index?

Om een query te optimaliseren moeten we natuurlijk begrijpen wat een index is.

Zie een index als een inhoudsopgave van een boek. Door een inhoudsopgave kan je snel naar een bepaald onderwerp in het boek gaan zonder alle pagina's te moeten lezen.

MySQL gebruikt de index in een aantal situaties:

• zoeken van rijen
• elimineren van niet-relevante rijen, indien er meerdere mogelijke indexen zijn zal MySQL deze nemen met de minste rijen
• om verschillende tabellen te JOINEN
• minimum- en maximumwaardes ophalen
• sorteren van resultaten

Zonder indexen moet MySQL de volledige tabel gaan overlopen om resultaten te vinden, met een index hoeft MySQL enkel het relevante stuk te doorlopen.

Je kan nu denken dat je op iedere kolom en op elke mogelijke combinatie een index kan leggen. Dit is echter geen goed idee - en ook niet mogelijk - want een index wordt bij iedere INSERT, UPDATE, DELETE herberekend, waardoor deze statements dan weer trager worden. Hoe meer indexen hoe trager het geheel, hou dit dus ook in het achterhoofd bij het optimaliseren van een query.

Bij het maken van een index kan een type meegeven. Iedere type heeft zijn eigen eigenschappen.

• PRIMARY KEY

  De combinatie van velden is uniek doorheen de tabel, per tabel kan er maximaal 1 PRIMARY KEY zijn.

• UNIQUE

  De combinatie van velden is uniek doorheen de tabel.

• INDEX

  In tegenstelling tot een UNIQUE index hoeft de combinatie van velden niet uniek te zijn.

• FULLTEXT

  Een speciaal type van index dat gebruikt word voor full-text-searches. (enkel beschikbaar voor MyISAM-tabellen)

Je kan een index aanmaken met volgende MySQL-statement:

ALTER TABLE table1 ADD [type] (column, column);

Hoe kies je nu een juiste index?

Vooraleer je indexen begint aan te brengen moet je nadenken of het wel nut heeft. Is het een tabel met weinig data, dan kan het zijn dat de query sneller is als alle rijen worden overlopen. Is het een query die weinig gebruikt wordt? Dan kan je je beter concentreren op queries die veel worden uitgevoerd (bijvoorbeeld bij iedere klik).

Een klein rekenvoorbeeld: je hebt een query die 1 maal per dag word uitgevoerd en 10 seconden duurt, door middel van indexes kan je die terugbrengen naar 2 seconden, dan heb je 8seconden gewonnen.

Stel nu dat er een query is die 1000 keer per dag wordt uitgevoerd en die 1 seconden duurt en je kan optimaliseren tot 200ms dan win je 1000 x 800ms en dus in totaal 8000 seconden.

Opmerking: Dit is een theoretisch voorbeeld.

Een goede index zorgt ervoor dat MySQL de WHERE-clause zo snel mogelijk kan oplossen. Als je bijvoorbeeld e.active = 'Y' AND e.hidden = 'N' in je query hebt staan dan is het slim om een index op active en hidden te leggen.

Je kan eigenlijk volgende leidraad gebruiken: eerst de kolommen in de WHERE-clause, dan de kolommen in de SELECT-clause.

Opmerking: Dit is een leidraad, geen vaststaand feit.

Als we een aantal indexen leggen en onze eerste query terug uitvoeren komen we op volgend resultaat:

Andere voorbeelden om queries te optimaliseren

STRAIGHT_JOIN

Bij het uitvoeren van een query met JOINS over verschillende tabellen, maakt MySQL zelf een query plan. Dit bepaalt in welke volgorde de tabellen worden geprocessed en gejoined.

Dit zal more often than not de meest effeciënte manier van joinen zijn, echter niet altijd. Het kan natuurlijk altijd voorkomen dat juist die ene vaak gebruikte query doorheen een grote dataset door MySQL net niet goed genoeg geïnterpreteerd wordt, met een groot prestatieverlies als gevolg. Dit kan je oplossen met STRAIGHT_JOIN.

Door middel van SRAIGHT JOIN kan je zelf bepalen in welke volgorde je tabellen zullen worden gejoined, of eerder: MySQL zal je tabellen van links naar rechts joinen in plaats van zelf de volgorde te beslissen. Met dan zorgvuldig zelf de tabellen in de juiste volgorde neer te poten, kan je sommige queries efficiënter maken.

SELECT STRAIGHT_JOIN *
FROM table1 AS t1
INNER JOIN table2 AS t2 ON t1.col = t2.col;

Werken met DATETIME

In veel CMS-en is er de mogelijkheid om een publicatie-datum van een artikel aan te geven. Dit is een potientieel risico voor trage queries.

Omdat een tijdstip iedere seconde anders is, kan de query maximaal 1 seconde gecached worden.

SELECT e.*, m.*
FROM blog_entries AS e
INNER JOIN meta AS m ON e.meta_id = m.id
WHERE e.active = 'Y' AND e.hidden = 'N' AND e.date_publish < NOW()
ORDER BY e.date_publish DESC;

Het is overbodig om de gebruiker tot op de seconde te laten specifieren wanneer een een artikel moet getoond worden. Je kan er dus beter voor zorgen dat bij het opslaan de seconden op 00 staan. En je query herschrijven als volgt (uiteraard met het correcte tijdstip):

SELECT e.*, m.*
FROM blog_entries AS e
INNER JOIN meta AS m ON e.meta_id = m.id
WHERE e.active = 'Y' AND e.hidden = 'N' AND e.date_publish < "2009-11-03 13:37:00"
ORDER BY e.date_publish DESC;

Hierdoor kan je query maximaal 1 minuut gecached worden. Je zou natuurlijke en stap verder kunnen gaan en enkel kwartieren kunnen toelaten.

ORDER BY RAND()

Als we onze server-admins mogen geloven dan sterft er iedere keer je ORDER BY RAND() gebruikt een klein schattig konijntje. ORDER BY RAND() is een heel intensieve operatie bij grote tabellen.

Je kan dit beter oplossen in je code, bijvoorbeeld met de PHP-functie shuffle.

Heb je echter een slechts een kleine result-set nodig die random moet gegenereerd worden uit een grote hoeveelheid data, dan biedt shuffle natuurlijk ook geen goed resultaat, omdat je dan die grote hoeveelheid data (even) in het geheugen zal moeten dulden, terwijl je slechts een kleine hoeveelheid data hiervan nodig hebt. Hoe kan je dit beter?

// get the maximum ID
$max = 'SELECT MAX(id) FROM table;';
// do n queries, where n is the number of rows to retrieve
// this should be more effective then one ORDER BY RAND()-query
for ($i = 0; $ < [totaal-aantal-benodigde-random-rijen]; $i++) {
	get random row
	$results[$i] = 'SELECT  * FROM table LIMIT '. rand(0, $max) .', 1;';
}

Waarom is dit nu efficienter dan ORDER BY RAND()? Wel, voor iedere rij in de tabel moet bij ORDER BY RAND() een willekeurig getal worden gegenereerd, hierna moet er op al deze willekeurige getallen ook nog gesorteerd worden.

Disclaimer: zie deze blogpost niet als de heilige graal om je website met tienduizende bezoekers te gaan optimaliseren. Voor zo'n situaties kan je beroep doen op DB-admins, deze kunnen op basis van je applicatie en logs gaan kijken wat er specifiek moet geoptimaliseerd worden.

Bronnen: MySQL, Openminds, PHPhulp, #netlash, Learning MySQL, Web Database Application with PHP & MySQL.

MySQL EXPLAIN als hulp geschreven door Tijs, Matthias, Annelies, Davy, Dave in: webdevelopment

Tags: explain, mysql, performance, tips

Ik heb een bankverleden.

Vooraleer ik de ondernemers-sprong waagde en webwerker werd, was ik in loondienst bij een Grote Belgische Bank.

Ik werkte een tijd in een kantoor in Landegem, een klein dorpje ten zuiden van Gent. Eén van de eigenschappen van dat dorpje is dat er zowel een beschutte werkplaats, een MPI, als een aantal tehuizen voor mensen met een handicap gevestigd zijn.

Toegankelijkheid en mijn bankverleden

In dat bankkantoor leerde ik dagelijks omgaan met mensen met een functiebeperking; laat me zeggen dat de uitdaging om het online banking pakket toegankelijk te krijgen eind jaren negentig aanzienlijk waren.

Het maakte me bewust van de vragen en noden van die specifieke bevolkingsgroep - maar vooral: het deed me inzien dat je bij alles wat je doet inclusief moet werken en denken, en niet noodzakelijk vanuit je eigen wereldbeeld moet vertrekken.

Anysurfer en Netlash

Vandaar dat het verhaal van Anysurfer onmiddellijk bij me aansloeg. Voor veel mensen met een functiebeperking is het internet dé manier om makkelijk deel te nemen aan de alledaagse dingen uit ons leven (dingen als online shoppen, banksoftware gebruiken of de uurroosters van De Lijn raadplegen). Websites maken met aandacht voor de richtlijnen van Anysurfer strookte met mijn visie rond duurzaam ondernemen.

Het kwam uiteraard goed uit dat een toegankelijke website vaak tegelijkertijd ook een SEO-geoptimaliseerde en gebruiksvriendelijke website is.

Vandaar dat we besloten om zoveel mogelijk de regels van Anysurfer te volgen bij het bouwen van onze sites. Vandaar ook dat we ook met onze eigen Netlash website expliciet het Anysurfer label wilden halen.

Anysurfer en ABconcerts.be

We waren dan ook blij te horen dat onze partner en klant Ancienne Belgique ook nadenkt over toegankelijkheid voor bezoekers met een handicap. Meer nog, ruim 300 personen met een handicap genieten op donderdag 21 januari 2010 van een exclusief en gratis concert van Channel Zero in de AB in Brussel.

De AB wil met dit concert beklemtonen dat ook bezoekers met een handicap meer dan welkom zijn op hun evenementen. Niet enkel voor dit concert dus, maar een heel jaar door. Daarom heeft het AB-team samen met Team Netlash de nodige inspanningen gedaan hebben om de website ook in een nog toegankelijker versie uit te werken.

Naast de AB Website werkt AB ook volop aan de toegankelijkheid van de ticketingspagina's (tickets.abconcerts.be) voor personen met een functiebeperking. Door de technische complexiteit van dit gedeelte van de site zullen de pagina's in de loop van het voorjaar (2010) gewijzigd worden, conform de richtlijnen van Anysurfer.

Je kan de vernieuwde toegankelijke versie nu al bekijken (zie de link bovenaan links op de site), samen met de toegankelijkheidsverklaring.

Jullie feedback is uiteraard, zoals steeds, meer dan welkom.

Anysurfer geschreven door Bart in: webdesign

Tags: ab, accessibility, anysurfer, toegankelijk

Vorig jaar vroeg ik daarbovenop aan twintig experts wat hun voorspellingen voor 2009 waren. Dit jaar gingen we nog een stap verder: we vroegen openlijk aan iedereen die zich geroepen voelde om een bijdrage te leveren.

Een trendrapport dat gecrowdsourced wordt? Is zoiets mogelijk?

Ik wou het alleszins proberen.

60 verschillende stemmen, zo divers als mogelijk: van student tot internetmarketeer, van founder van een startup tot CEO van een gevestigd reclamebureau, van academicus tot minister. Met de nodige duwtjes hier en daar kreeg ik evenveel voorspellingen over online in 2010 binnen.

Het eindresultaat is iets minder voorspellend geworden, als wel een document over 'wat houdt de Vlaamse digirati op dit moment bezig'.

Voor wie de samenvatting wil:

De meesten zijn er van overtuigd dat in 2010 mobiel internet (16 vermeldingen) definitief mainstream wordt. Er zijn ook hoge verwachtingen over augmented reality (13 vermeldingen).

Terwijl velen zien dat sociale netwerken (9 vermeldingen) in het weefsel van onze maatschappij doordringen, en bedrijven massaal met sociale media aan de slag gaan (9 vermeldingen), zijn er toch heel wat bedenkingen over veiligheid en privacy (9 vermeldingen). Ondertussen moeten die sociale media geld beginnen opbrengen, en ligt de focus op ROI en conversie (7 vermeldingen). Sommigen zien alweer een social media fatigue (5 vermeldingen) optreden; anderen zien email vervangen worden door sociale media (5 vermeldingen).

De tablets en e-books (9 vermeldingen) worden een hype; zou dit met de aandacht voor 'groen' (9 vermeldingen) te maken hebben?

Nog drie buzzwords: alles moet real time (9 vermeldingen) zijn, liefst nog location based (6 vermeldingen) en in de cloud (5 vermeldingen).

Je kan het trendrapport hier downloaden in pdf-formaat: Online Trendrapport 2010 (.pdf, 16.3 Mb).

Maar je kan het hier ook rustig doorbladeren:

Voldoende inspiratie?

Volgend jaar verwacht ik alleszins jullie voorspellingen in mijn mailbox!

Online trendrapport 2010 : de voorspellingen geschreven door Bart in: trend

Tags: online, trend, trendrapport, trends, trendwatching, voorspellingen, web

Ik pretendeer zeker niet te weten waar media naar toe gaan, en hoe dat moet gebeuren. 

Toch probeerde ik om de grote trends weer te geven, en zo de discussie op gang te trekken. (Vergelijk het met de workshop 'Trends in e-business' die ik in 2004 voor Partena gaf.)

Hieronder vind je mijn presentatie:

Er zitten 5 hoofdstukjes in:

1. Content: Gaat het over kwaliteit of kwantiteit? En hoe krijgen beide begrippen een invulling online?
2. Distributie: Is dit nog steeds de controlerende factor online? En hoe is dit anders dan offline?
3. Informatie: Online hoef je je niet te beperken tot het format tekst+foto, maar kan je gebruik maken van de interactiviteit van internet.
4. Nieuws: De Nu-Nu-Nu generatie heeft andere verwachtingen van nieuws.
5. Community: Media kunnen waarde creëren door een stem, een filter, een kader te bieden in de overvloed aan informatie.

Geen wereldschokkende bevindingen uiteraard; en voor wie met internet dagelijks omgaat zelfs evidenties.

Edit: De Werktitel maakte een samenvatting van de presentatie.

Oude media versus nieuwe media geschreven door Bart in: marketing

Tags: media, visie

1. Inge Wiame, Business Development Manager Benelux - Netlog
   Presentation of the renewed Netlog platform
2. Tom Remans, Marketing Manager - Luon
   Client-case Solo : social media as part of an integrated marketing approach
3. Nico Henderijckx, Online Marketing Manager - Sony VAIO of Europe
   Client-case Sony VAIO: “VAIO of Europe - Social media approach
4. Charles Crouch, Lecturer Boston University
   Planning a social media campaign
5. Clo Willaerts, Marketing manager sanoma magazines
   How to make money with Social Media
6. Genevieve Tissot, Managing director BlueKiwi
   Client case social media platform
7. Kim Leunen, Account Manager S²Media
   Why you should join / Define your goals / How to Measurements & tools / Case - tips & tricks
8. Evan Van Lissum, Managing partner The Parking Lot
   Social branding : New kids on the blog
9. Bart de Waele, Co-founder Talking Heads
   Nike Running & Social Media
10. Didier Ongena, Director Microsoft Advertising

Meer info op www.socialmediaforum.be.

Ik zal er alleszins zijn - jullie ook?

Social Media Forum geschreven door Bart in: opleiding

Tags: event, forum, opleiding, social media

1. Begin met een goede briefing

Begin door een duidelijke beschrijvende briefing aan de klant te vragen. Stel eventueel zelf een vragenlijst op die de klant kan invullen. Probeer zoveel mogelijk concrete zaken te verzamelen. Wanneer de klant een vaag buikgevoel beschrijft, kan je vragen of hij dit kan illustreren met voorbeelden van andere sites, logo’s en stijlen.

Wanneer je voelt dat je weet welke richting de klant uit wil, kan het handig zijn zelf een kleine verzameling elementen bij elkaar te zoeken. Deze verzameling kan je gebruiken om later terug de stijl op te roepen die de klant voor ogen heeft.

2. Evalueer bestaande stijlelementen

Zorg dat de klant je al zijn oud materiaal stuurt en evalueer of zijn logo en kleuren passen bij de eerder beschreven stijl. Vraag zeker ook na of de klant goed fotomateriaal heeft. Unieke professionele foto’s kunnen vaak het verschil maken bij een ontwerp.

Kijk alle elementen na en controleer of alles bruikbaar is. Open alle vector bestanden om na te gaan of ze daadwerkelijk vector zijn. Bekijk de resolutie van eventuele foto’s en kijk de kleurprofielen na.

3. Visualiseer de inhoud en bepaal het doel

Bekijk de structuur die de informatie architect met de klant heeft gemaakt en overloop wat het doel is van elke pagina en element. Bepaal wat moet opvallen en wat minder moet opvallen vanuit het oogpunt van de bezoeker.

Het is de taak van de designer om ervoor te zorgen dat hij de bezoeker doorheen de pagina gidst, en alles ziet wat hij hoort te zien. Wanneer te veel elementen om aandacht vechten zal de bezoeker zijn weg doorheen de pagina niet vinden.

4. Maak minstens 4 voorstudies

Eens je het doel en de klemtonen van alle elementen weet, maak je best enkele schetsen. Het schetsen is een cruciale stap bij het ontwerpen. Het stimuleert de creativiteit en spaart veel tijd uit. Een viertal schetsen uitwerken per pagina is het absolute minimum.

Ontwerpen van 3 verschillende Netlash ontwerpers.

Stop echter niet te veel tijd in een schets. Schets eerder alles neer wat je te geest komt en visualiseer wat er zal werken en wat niet. Werk de beste schetsen uit in fijnere voorstudies om zo je idee bij te schaven.

5. Werk een eerste voorstel uit

Open je favoriete webdesign programma om je ontwerp vorm te geven en ga aan de slag om je visie om te zetten in pixels. Laat je ontwerp evolueren en laat je zeker niet limiteren door je schetsen.

Hou rekening met de beperkingen van browsers en schermresoluties en maak je ontwerp altijd op ware grootte. Probeer de inhoud zo realistisch mogelijk te houden, indien mogelijk zelfs de definitieve copy. Wanneer je die laatste knop en pixel juist geplaatst hebt, is het tijd om het document te sluiten. Neem een korte pauze of werk even iets anders af.

6. Knijp die ogen eens half dicht

Open nu je document en kijk wat je eerste indruk is. Vallen de elementen die moeten opvallen (zie stap 3) op? Neem wat afstand van je scherm en knijp je ogen dicht tot alles wat troebel is.

Zo kun je makkelijk evalueren of je ontwerp in balans is. Eventueel vraag je aan iemand om even je ontwerp te bekijken. Zorg wel dat je open staat voor hun kritiek! Het is soms niet prettig om negatieve kritiek te horen op een ontwerp waar je net enkele uren aan hebt gewerkt.

• Voldoet je ontwerp niet aan de verwachtigen en doelstellingen? Ga terug naar stap 1, passeer langs start en neem een Nalu.
• Voldoet je ontwerp wel aan de verwachtingen en doelstellingen? Ga dan naar stap 7.

7. Geniet van je rockstar moment

Proficiat! Je bent voor heel even een webdesign rockstar! Spring even op je bureau en doe een luchtgitaarsolo. Blijf echter niet te lang in je roes, je ontwerp moet nog gesliced en geïntegreerd worden zodat de hele wereld ervan kan genieten.

Het grafisch proces geschreven door Yoni in: webdesign

Tags: proces, vormgeving, webdesign

Dieter Rams was veertig jaar hoofd van het designteam van elektronicaproducent Braun. Hij was verantwoordelijk voor een belangrijke stroming in het industriële design van vorige eeuw.

Meer nog, hij beïnvloedde rechtstreeks één van de huidige iconografische designers, namelijk Jonathan Ive, hoofddesigner van Apple.

Hoe groot zijn invloed is kan je in onderstaande fotomontage zien (bovenaan werk van Rams, onderaan werk van Ive):

Dieter Rams is één van de mensen die ons hier bij Netlash richting geven.

Beschouw bijvoorbeeld volgende quote van hem:

“Good designers must always be avant-gardists, always one step ahead of the times. They should – and must – question everything generally thought to be obvious. They must have an intuition for people’s changing attitudes. For the reality in which they live, for their dreams, their desires, their worries, their needs, their living habits. They must also be able to assess realistically the opportunities and bounds of technology.”

Dit komt uit een speech uit 1980 die Rams aan de Braun advisory board gaf. Hierin geeft hij aan dat de mens, de gebruiker centraal moet staan - tegelijkertijd rekening houdend met de mogelijkheden en beperkingen van de technologie.

Hij formuleerde ook de 10 principes waaraan goed design volgens hem voldoet:

1. Good design is innovative.
2. Good design makes a product useful.
3. Good design is aesthetic.
4. Good design makes a product understandable.
5. Good design is unobtrusive.
6. Good design is honest.
7. Good design is long-lasting.
8. Good design is thorough down to the last detail.
9. Good design is environmentally friendly.
10. Good design is as little design as possible.
    

Het zijn principes die we hier ook in onze websites proberen te stoppen. Ik vertaal het even naar onze sector:

1. De concepten en ontwerpen van onze sites moeten voorlopen. We proberen trendsetters te zijn, in plaats van trendvolgers.
2. Bruikbaarheid is een obsessie.
3. Ook schoonheid maakt een integraal onderdeel uit van ons werk - er moet een goed evenwicht zijn tussen technologie, design en usability.
4. Een website legt de onderliggende eigenschappen van het bedrijf en het product bloot - en is geen 'opsmukken' of 'mooi maken'.
5. Design van een website mag niet in de weg zitten en moet vooral de inhoud ondersteunen.
6. Een goede site legt de inhoud bloot - en probeert geen valse verwachtingen te creëren.
7. Een goede site is duurzaam; hij wordt gebouwd met flexibele content in gedachten. Het CMS ondersteunt een veranderende omgeving en een veranderende site.
8. Consequentie is essentiëel bij een gebruiksvriendelijke website. Knoppen zijn knoppen, acties hebben dezelfde kleur, links zijn onderlijnd.
9. Milieuvriendelijkheid start met groene hosting.
10. Design ondersteunt de inhoud, is liefst zelfs 'nul-design'. Less is more.

Als afsluiter nog een video-interview met Dieter Rams:

Dieter Rams geschreven door Bart in: webdesign

Tags: design, usability, visie

Naast het intensievere werk voor de MySQL-server kan dit ook een vertraging op de site opleveren. De data moet namelijk opgehaald worden, verwerkt worden en getoond worden aan de bezoeker.

Bij wijze van voorbeeld: Stel je voor dat je een array hebt met daarin de ID's van de vrienden van de huidige ingelogde gebruiker. Wat de meeste developers nu doen is een loopje starten en in deze loop de waardes ophalen per friend-ID.

 // loop friends
foreach($friendIds as $id)
{
  // get friend data
  $friendData = $this->db->getRecord('SELECT p.nick, p.avatar, ...
                                      FROM profiles AS p
                                      WHERE p.id = '. $id .';');

  // code to generate output
  ...
}
?>
  

In het bovenstaande voorbeeld hebben we dus een groot aantal queries (lees n+1), namelijk:

• 1 om de ID's van de vrienden op te halen
• 1 per vriend om zijn specifieke data op te halen

Met behulp van de MySQL-functie IN()  kunnen we dit terug brengen naar 2 queries.

 // get all profiledata at once
$profileData = $this->db->retrieve('SELECT p.nick, p.avatar, ...
                                    FROM profiles AS p
                                    WHERE p.id IN ('. implode(',', $friendIds) .');');

// loop profiles
foreach($profileData as $friend)
{
  // code to generate output
  ...
}
?>
  

Zoals je nu kan zien hebben we 2 queries:

• 1 om de ID's van de vrienden op te halen
• 1 om de data voor al deze vrienden in één keer op te halen

Opmerking: Ik wil er wel de nadruk op leggen dat dit een fictief voorbeeld is. De code is dus ook niet terug te vinden in de vernoemde websites. In dit voorbeeld zou het nog nuttiger zijn om niet alleen de ID's op te halen maar meteen de data, maar dit terzijde.

Queries uitsparen met behulp van IN() geschreven door Tijs in: webdevelopment

Tags: mysql, optimalisatie, php, tips

Daaruit kozen zij de meest gebruiksvriendelijke non-profit en de meest gebruiksvriendelijke commerciële website. Het publiek mocht ook stemmen.

Nadat de website van Ancienne Belgique al de Site van het Jaar won, én beloond werd als beste Web 2.0 site bij de CMS Awards, verkoos de jury van de Usability Awards de AB website tot meest gebruiksvriendelijke commerciële website van België.

Mijn artikel van vorige week over de ROI van een website en deze award zijn geen toeval.

Usability is een obsessie bij Netlash. We zijn er van overtuigd dat de bruikbaarheid van een website rechtstreekse impact heeft op de businessdoelstellingen van een bedrijf of organisatie.

Elke site moet een gezond evenwicht vinden tussen design, technologie en usability. We geloven dat op het kruispunt tussen die drie de 'business' van Netlash zit, en we zijn er zeker van dat daar ook de 'business' van onze klanten zit.

Een goed evenwicht tussen de drie factoren zorgt voor een goede website.

En dat betekent dat géén van de twee andere (technologie of design) belangrijker mag zijn dan bruikbaarheid.

Een bruikbare site leidt daarna ook onvermijdelijk naar een rendabele website, met een hoge ROI.

Gebruiksvriendelijke website geschreven door Bart in: usability

Tags: ab, awards, gebruiksvriendelijk, usability

Nu is het tijd om terug te blikken, en af te rekenen: werkt de site, haalt die de doelstellingen, en vooral: draagt die bij tot de bottom line van AB?

David Zegers, Directeur Communicatie en Ontwikkeling van Ancienne Belgique, presenteerde onlangs op Muziek Digitaal de afrekening.

Zijn presentatie vind je hieronder:

Ik zal er een aantal cijfers uitlichten:

• er kwamen 24.010 geregistreerde profielen op één jaar tijd
• gemiddeld 1581 profielen loggen in per week
• gemiddeld 5.955 unieke bezoekers/dag (vroeger: 4.185)
• die bezoekers blijven langer on site en genereren meer paginaviews

De binnenkomende trafiek via verwijzende sites is met 58% gestegen; trafiek via zoekmachines steeg met 67% (van 281.137 naar 445.076 bezoekers).

Opvallend: in 2008 was Facebook de 16e verwijzende site; in 2009 staat Facebook op een duidelijke 1e plaats (met 3x meer bezoekers dan de tweede verwijzer, stubru.be).

De algemene conclusie van David na 1 jaar nieuwe website: een verhoogde kwantiteit en kwaliteit:

• AB bereikt meer publiek dan vorig jaar omwille van verhoogde online aanwezigheid (via community sites en zoekrobots)
• er is meer interactie met en tussen het publiek
• AB biedt meer inhoud dan vorig jaar
  

Dit verhoogde verkoopspotentieel zorgde voor een duidelijk hogere verkoop: in oktober 2009 waren er al meer tickets verkocht dan in totaal 2008 (207.000 tickets in 2008, 212.000 tickets tot en met oktober 2009).

Even kort door de bocht: dit is een (geëxtrapoleerde) meerverkoop van 22%.

Voor AB was de vernieuwing van de website dan ook een zinvolle en succesvolle operatie.

Het succes van de website is in mijn ogen overduidelijk het gevolg van een enthousiast AB-team dat de tools die we in de website inbouwden op een doordachte en consequente manier gebruikte.

We zijn blij dat we AB konden helpen met deze duidelijke Return on Investment van hun website.

ROI van een website geschreven door Bart in: community

Tags: ab, cijfers, community, conclusie

Elke webbouwer kreeg ongetwijfeld al eens de vraag of drang om een slideshow te voorzien. Daar dit in de meeste gevallen een relatief kleine, echter alomtegenwoordige feature is, kan al snel even gegoogled worden naar een kant en klaar stukje Javascript. In de bijna 10 miljoen resultaten zal je echter nooit dat script vinden dat exact doet wat je verwacht, op de manier waarop je het wenst.

Omdat we bij Netlash graag volledige controle hebben over onze software, schreven we dan ook zelf een kleine JQuery plugin die heel eenvoudig aan onze meeste noden voldoet. Omdat we het web ook elke dag een beetje beter proberen te maken, delen we deze uiteraard.

• Download het script
• Bekijk een demo

Demo

• VolgendeVorigeSlideshow met vorige/volgende, met links per image

  

• Versnelde slideshow in random volgorde

  

Hoe installeer je het script?

1. Download JQuery op jquery.com en include deze in je document:
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
2. Download deze plugin en include deze in je document, na het includen van JQuery:
   <script type="text/javascript" src="http://www.netlash.com/path/to/downloaded/jquery.slideshow.js"></script>

Hoe gebruikt je het script?

1. Plaats een image op de plaats waar je de slideshow wenst te tonen:
   <img src="http://www.netlash.com/path/to/1st/image.jpg" class="slideshow" />
   de class die ik hier op plaatste dient om deze makkelijk te kunnen selecteren via JQuery
2. Geef in het rel-attribuut van je image alle paden van de files mee, comma-seperated:
   <img class="slideshow" rel="/path/to/1st/image.jpg,/path/to/2nd/image.jpg,/path/to/last/image.jpg" src="http://www.netlash.com/path/to/1st/image.jpg" />
3. Inititiëer de slideshow:
   <script type="text/javascript"> $('.slideshow').slideshow();</script>

Meer?

Omdat we graag voorzien zijn op "ietsje meer", kan via enkele extra parameters je slideshow wat aangepast/uitgebreid worden.

Beschikbare parameters zijn:

1. images, als array: geef de paths van je afbeeldingen op als parameter in plaats van als rel-attribuut in de HTML.
2. links, als array: de mogelijkheid om aan elke afbeelding en link te koppelen waarnaar bij een klik wordt genavigeerd.
3. fadeTime: de tijd (in milliseconden) tussen het in/uit-faden van de afbeeldingen.
4. fadeSpeed: de tijd (in milliseconden) dat de fade-animatie duurt.
5. hookPrevious: de JQuery selector die hier wordt doorgegeven wordt gebruikt voor manuele navigatie doorheen de slideshow in omgekeerde volgorde (vorige).
6. hookNext: de JQuery selector die hier wordt doorgegeven wordt gebruikt voor manuele navigatie doorheen de slideshow in normale volgorde (volgende).
7. random: geef aan of de afbeeldingen in de slideshow in willekeurige volgorde dienen verschijnen
8. preload: hoeveel images moeten gepreload worden voor de huidige getoonde afbeelding

Voordelen?

1. Indien de bezoeker geen Javascript enabled heeft zal nog steeds de standaard-afbeelding zichtbaar zijn.
2. De slideshow kan makkelijk gepositioneerd worden zoals gewenst.
3. Een eenvoudige slideshow kan snel opgezet worden.
4. De code is eenvoudig en makkelijk uitbreidbaar.
5. Makkelijk meerdere slideshows op 1 pagina, elk afzonderlijk of samen configureerbaar.

Javascript slideshow geschreven door Matthias in: webdevelopment

Tags: javascript, jquery, slideshow

The slow query log consists of all SQL statements that took more than long_query_time seconds to execute and required at least min_examined_row_limit rows to be examined.

Maar omdat alle trage queries hierin terechtkomen is het niet altijd makkelijk om uit te maken welke nu juist de queries zijn die je best aanpakt.

Via de mensen van Openminds had ik vernomen dat er een script was die deze log gaat parsen en je kan vertellen welke queries juist aandacht vragen.

Het script analyseert de log door te gaan kijken welke queries er meerdere keren voorkomen. Daarbij vervangen ze de variabele data zodat je een goed beeld krijgt.

Hoe installeer je het script:

• Download het script
• Open een terminal en verplaats het script naar /usr/bin met onderstaand commando:
  sudo mv path/to/download /usr/bin/mysql_slow_log_parser
• Maak het script uitvoerbaar met onderstaand commando:
  sudo chmod +x /usr/bin/mysql_slow_log_parser
• Gebruik het script:
  mysql_slow_log_parser path/to/slow_query.log

Kleine disclaimer: Wil je je database en queries tot in de puntjes optimaliseren? Neem dan een specialist onder de arm, zij kunnen je bijstaan met raad en daad. Een database-specialist weet beter dan welke tool ook hoe je database of queries kan optimaliseren

MySQL Slow Log Parser geschreven door Tijs in: webdevelopment

Tags: mysql, optimalisatie, slow query log, tips, tools

Uiteraard zijn er veel overeenkomsten, en zijn beide gebaseerd op dezelfde beginselen (typografie, gebruik van ritme, spatiëring, witruimte...).
Maar: het fundamentele verschil zit hem in de drager - papier is an sich statisch, en web is an sich dynamisch.

Dit verschil zorgt er voor dat je in mijn ogen een duidelijk andere aanpak moet hebben voor beide media.

Aangezien papier op zichzelf niet dynamisch is, moet je de dynamiek in de layout van de inhoud stoppen. De layout van een affiche, poster, flyer moet in volle hevigheid van het papier spatten.
Bij web is dat niet zo. Daar zit de dynamiek in het medium al ingebouwd: je kan klikken, je hebt mouse-over effecten, er zijn eventueel bewegende stukken (video, animatie, jQuery-effecten) ...
Als je dan ook in het design van je webpagina heel veel dynamiek zal steken, zal dit clashen met de intrinsieke interactiviteit van het web. Die layout zal 'in competitie' gaan met de webdynamiek - en dat eindigt in een wedstrijdje 'om ter luidst'.

Het web wordt door gebruikers voornamelijk en liefst gebruikt als informatie-, transactie- en interactiemedium (lean-forward t.o.v. lean-back). Een website of webapplicatie heeft dan ook als taak om zijn informatie (onder welke vorm ook) zoveel mogelijk te ondersteunen en naar voor te laten komen. Opnieuw een reden om de layout niet te 'luid' te laten zijn: grafiek voor het web moet vooral functionele grafiek zijn, en gemaakt zijn om de inhoud zo goed mogelijk weer te geven en te ondersteunen.

Websites en webapplicaties zijn ook 'multiple use' - als je wilt inspelen op de informatie-,  transactie- en interactiezucht van de eindgebruikers, maak je sites die meermaals kunnen gebruikt worden, en waar mensen ook geneigd zijn om die meermaals te gebruiken ('verslavende websites').
Een site met een groot 'visueel wow-effect' zal de eerste keer misschien aanspreken - maar bij vaker gebruik zal dit saai worden, en zelfs in de weg komen te staan van het effectieve gebruik (consumeren van informatie, transacties uitvoeren, interactie aangaan).

Door de nadruk te veel te gaan leggen op dat visuele wow-effect, creëer je eigenlijk een tijdelijke website, met een beperkte levensduur. En websites moeten in mijn ogen toch minstens 3 jaar kunnen meegaan...

Daarom ben ik er van overtuigd dat bij het maken van sites je vooral moet denken aan een 'nul-design', een design dat ondersteunend en in de achtergrond werkt - en wel om volgende redenen:

• dynamiek moet in de interactiviteit van het web zitten, en niet vechten met de dynamiek van het ontwerp
• goeie websites zijn informatie- of transactiewebsites, waar het design deze informatie of transactie ondersteund, en niet de overhand heeft
• bij meermalig gebruik wordt een visueel overweldigende site saai en zelfs storend
• er zijn weinig tijdloze sites met een 'visueel wow-effect'; deze voelen vrij snel gedateerd aan.

Wat met campagnesites, die vooral bedoeld zijn om éénmalig het wow-effect op te wekken? Dat is het soort sites dat wij niét bouwen - vooral omdat we niet geloven dat deze duurzaam bijdragen tot de businessdoelstellingen van bedrijven op het web.

Wat denken jullie?

Het visuele wow-effect in webdesign geschreven door Bart in: webdesign

Tags: conversie, webdesign

Zoals ieder goed webbureau maken we bij Netlash gebruik van een version-control systeem. In ons geval is dit SVN.

Subversion (SVN) is een versiebeheersysteem en in 2000 opgezet door CollabNet Inc. Subversion is de opvolger van CVS, een alternatief versiebeheersysteem. Subversion is uitgebracht onder de Apache License, waardoor het open broncode programmatuur (opensourcesoftware) is.

Als je dit combineert met grote projecten dan krijg je een solide basis om wijzigingen vlot bij te houden en te releasen. Het live zetten van grote wijzigingen kan soms een pak tijd in beslag nemen als je bijvoorbeeld geen SSH-acces hebt en dus alle files manueel moet uploaden. Een oplossing is om alles te gaan overschrijven. Dit heeft als nadeel dat dit even kan duren.

Daarom is het handiger om enkel de gewijzigde files te gaan uploaden. Maar dan moet je zelf een lijst gaan bijhouden van de gewijzigde files, of een lijst compileren aan de hand van je SVN-logs. Om dit proces te versnellen heb ik een Apple-script geschreven dat enkel de gewijzigde files gaat exporteren (met behoud van de folder-structuur).

Omdat we deze oplossing natuurlijk niet enkel voor onszelf willen houden kan je hier het script downloaden.

Download het script

Hoe installeer je het script?

1. Download het script.
2. Verplaats het script naar de Userscripts-map (/Users//Library/Scripts).
3. Activeer het Script-menu indien nodig door /System/Library/CoreServices/Menu Extras/Script Menu.menu te openen.

Hoe gebruik je het script

1. Update die lokale repository.
2. Start het script door in die Script-menu "SVN Export changed files" te kiezen.
3. Selecteer de folder die je SVN-repository bevat.
4. Geef de start-revision op. (de revision die op dat moment live staat)
5. Geef de eind-revision op. (in de meeste geval de laatste revision)
6. Selecteer een map waar de gewijzigde files moeten komen.
7. Upload de files.

Opmerking: het script bevat geen error afhandeling en is een alpha. Feedback is dus steeds welkom.

SVN Export gewijzigde files geschreven door Tijs in: webdevelopment

Tags: applescript, export, gewijzigde files, svn, tools

Topspreker en mede-organisator was BJ Fogg. Hij doceert aan Stanford, en is de auteur van het boek Persuasive Technology.

Daarnaast waren er nog een hele resem aan inspirerende sprekers.

Ikzelf had de eer om tussen die groten der aarde te kunnen staan met een korte presentatie over verslavende websites.

Ik citeer collega Thomas vanop zijn blog:

De basisgedachte van verslavende websites zijn de onmiskenbare maar vaak onzichtbare drijfveren eigen aan de mens. Door zich hiervan bewust te zijn is het mogelijk om uitgekiende strategieën te ontwikkelen om het gedrag van websitebezoekers te begeleiden naar gewenste acties. De lijst is nog niet volledig, maar vijf mogelijke drijfveren zijn:

Collecting: Het is van oudsher ingebakken in de mens, maar de drang om waardevolle zaken te verzamelen kan gebruikt worden om websitebezoekers ertoe aan te zetten om bijvoorbeeld een hogere reputatie in communities op te bouwen.

Social Validation: Interactie wordt beïnvloed door het gedrag van de andere consumenten. Wanneer een consument merkt dat andere consumenten een bepaald gedrag stellen, stijgt de individuele voorkeur van deze consument voor om zich op dezelfde manier te gedragen.

Reciprocity Commitment: Wanneer gebruikers zich engageren, dan zijn deze geneigd om blijvende engagement te tonen en dit rationaliseren.

Discovery: In iedereen schuilt een ontdekkingsreiziger. Door in te spelen op de drang om iets nieuws te leren, kunnen we het gedrag van bezoekers beïnvloeden.

Hieronder de bijhorende slides van de presentatie:

Ik ben van plan deze gedachten in de toekomst verder uit te werken en te documenteren op dit blog.

Verslavende websites geschreven door Bart in: conversie

Tags: conferentie, conversie, design for persuasion

Laat ik daar eens wat duidelijkheid in scheppen voor mezelf, dacht ik. Laat ik dat eens visueel proberen weergeven. Dat leverde onderstaand infografiekje op.

Elk vlak in de grafiek heeft de grootte van een schermresolutie uit de lijst en een kleurtint gelijk aan het percentage van bezoekers met die schermresolutie. Ik heb ook een PDF versie op ware grootte.

Het maakt volgens mij één punt heel duidelijk: ontwerp voor een schermafmeting van 1024 x 768 px. Niet meer, niet minder. Je browsercanvas is dus ongeveer 960 x 570 px groot.

Waar het ook duidelijk tijd voor wordt is experimenteren met grotere schermresoluties. De groep surfers die minimum een schermbreedte van 1280px hebben verantwoordt dat wel.

En mobiel? Daar ben ik nog niet helemaal uit. Een site zoals de onze volledig aanbieden voor een mobiel platform heeft weinig zin. Bepaalde onderdelen beschikbaar stellen - zoals een contactpagina of een kaart met onze locatie - hebben wel zin. Iemand die op weg is naar ons kantoor kan daar wel nut aan hebben.

(Foto door Eyeliam - Creative Commons Attribution - Bron)

Schermresolutie & webdesign geschreven door Dirk Sabbe in: webdesign

Tags: browsercanvas, schermresolutie, webdesign

1. Systematisch

De eerste manier om door een site te gaan is systematisch. De surfer bekijkt de boomstructuur van de website, en gaat die systematisch tak voor tak af: klikken op het eerste item in de menustructuur, scannen, klikken op het eerste subitem, scannen, 'back'-toets naar de vorige pagina, klikken op het tweede subitem... Systematisch scant deze bezoeker de site, en gaat pagina voor pagina bekijken of hij de informatie kan vinden die hij zoekt.

Deze surfer vertoont het typische 'pogostick' gedrag: hij springt naar een dieper menu-item, scant, vindt niet wat hij zoekt, en springt terug een niveau hoger.

Dit soort bezoekers vertrouwt vooral op een strak georganiseerde menu-structuur, en op een sitemap indien aanwezig.

2. Zoeken

Sommige mensen gaan recht op hun doel af: ze weten wat ze willen vinden, en duiken rechtstreeks in de zoekbox van een website. Ze hebben een bepaald woord of een bepaalde zinsnede in gedachten, en willen niet door gans de site surfen om dat te vinden.

Deze surfers verwachten een duidelijk zichtbare zoekbox al vanop de homepagina (liefst op de standaard plaats, rechtsboven, zie ook hier).

3. Serendipity

Een derde manier van door een site gaan is vertrouwen op serendipiteit. Bezoekers die op deze manier surfen gaan van link naar link: ze scannen een pagina, zien een link die hen interesseert, klikken daar op, scannen, klikken op de eerstvolgende link...

Ze gebruiken met veel enthousiasme de links die (duidelijk aangeduid) in de lopende tekst staan, beelden die klikbaar zijn, knoppen en andere call-to-actions...

Het ergste wat je deze mensen kan voorschotelen is een doodlopende pagina - een pagina waar geen enkele link op staat.

4. Social surfer

De 'sociale surfer' wil vooral zaken bekijken die anderen bekeken of aangeraden hebben; hij wil ook nieuwe mensen leren kennen. Deze surfer wordt vooral getriggerd door frases als "mensen die dit kochten, kochten ook ..." of "populaire artikelen". Ze klikken door op profielfoto's en commentaren van andere mensen.

Uiteraard is niets ooit volledig zwart-wit. Ieder van ons heeft wel aspecten van de vier soorten surfers in zich; en ons gedrag hangt zeker ook af van de context en situatie waarin we ons bevinden.

Maar meestal hebben mensen een duidelijke voorkeur voor een bepaalde manier van surfen. Meer zelfs, bij veel mensen met wie ik praat leeft vaak de overtuiging dat (bijna) iedereen surft op dezelfde manier als henzelf. Een systematische surfer zal met stelligheid beweren dat iedereen zo surft, en dat een zoekbox overbodig is; een zoek-gebruiker zal lachen bij het idee van een sitemap.

Het is de taak van een goede webbouwer (en dan vooral de informatie-architect) om alle vier de types te faciliteren. Voorzie in je site de verschillende manieren om doorheen de informatie te gaan (een goede zoekbox, een strakke menu-structuur, voldoende in-text links, sociale features).

Kijk ondertussen ook eens naar je eigen surfgedrag. Welk soort surfer ben jij?

4 soorten surfers geschreven door Bart in: webdesign

Tags: informatie-architectuur, inzicht, navigatie, surfen, webdesign

Hij schreef er nog één, deze keer voor TinyURL.com. 

TinyURL is een webdienst die lange webadressen voor jou omzet naar een zeer korte URL. Er is een API beschikbaar om dit in te bouwen in je eigen webapplicatie.

Met de PHP TinyURL class heb je nu een makkelijk integreerbaar pakketje.

Meer info op het blog van Tijs, en downloadbaar hier.

Update: Tijs gooit er, omdat het solden is, nog gratis en voor niets een PHP bit.ly wrapper class tegenaan: http://classes.verkoyen.eu/bitly/ .

PHP TinyURL class geschreven door Bart in: webdevelopment

Tags: class, php, tinyurl

Er gaat dan ook meestal heel veel energie en focus naar die homepagina.

Dit is terecht: de homepagina is een belangrijke pagina in een website. Maar die speelt al lang niet meer dezelfde rol als vroeger.

De traditionele visie op de homepage is deze:

Bezoekers komen binnen op de homepagina, gebruiken het menu om in de boomstructuur van de website af te dalen, en bereiken dan de juiste pagina.

Dit is m.i. een achterhaalde visie. De homepagina is al lang niet meer de voordeur waarlangs alle bezoekers binnenkomen - de bezoekers komen voor het grootste deel binnen via de achterdeur, het raam, het balkon en het hondeluikje.

Ik blijf het herhalen: een goedgemaakte website trekt meer dan de helft van zijn bezoekers aan via zoekmachines, meer bepaald Google.
(Een bijkomend fenomeen van de laatste 6 maanden: meer en meer sites hebben als tweede grootste bron van trafiek Facebook.)

De eigenschap van die binnenkomende bezoekers is net dat ze binnenkomen via inhoudspagina's (de pagina's die in bovenstaande grafiek onderaan staan), en niet via de homepagina.

Een meer correcte visie is dan ook:

Bezoekers komen binnen via diepere pagina's, en gebruiken de homepagina als 'ankerpunt' om te navigeren binnen de site.

Dit betekent dat de homepagina zich niet meer (hoofdzakelijk) mag gedragen als 'binnenkomer', als 'visitekaartje', maar wel als een soort van wegwijzer doorheen de site.

Een even belangrijke functie, maar wel een totaal andere invulling.

Vervult jouw homepagina die functie?

De homepagina van een website geschreven door Bart in: webdesign

Tags: homepagina, informatie-architectuur, visie

Dit is niet zomaar een losse gedachte waarmee we willen zeggen dat je een site een grondige technische optimalisatie voor Google moet meegeven. We trekken dit veel verder door, onder andere in de opbouw van ons Content Management Systeem Fork.

Ik geef een voorbeeld, vertrekkend van onze eigen Netlash website.

Zoek bijvoorbeeld op de term 'logo' in Google.be: http://www.google.be/search?hl=nl&q=logo.

Je ziet in de resultaten een artikel van het Netlash blog over logo design opduiken:

Klik door vanuit Google, en je komt op de blogpost terecht. We hebben Fork CMS zo opgebouwd dat binnenkomende bezoekers intelligent opgevangen worden. Er wordt gedetecteerd of bezoekers rechtstreeks binnenkomen, of via een zoekmachine - en indien het tweede met welk zoekwoord.

Hieronder zie je links wat een bezoeker ziet die binnenkomt via Google met het zoekwoord 'logo'. Rechts zie je wat een bezoeker ziet die op een andere manier op die pagina terechtkomt.

Je ziet het, de Google-bezoekers krijgen een extra kader met een duidelijke call-to-action.

Fork CMS laat toe om zoekwoorden waarmee mensen binnenkomen te detecteren, en daarvoor specifieke teksten en links te creëren.

Dit is één van de functionaliteiten van Fork om binnenkomende bezoekers van de website op een elegante en intuïtieve manier te begeleiden langs het door ons vooropgestelde conversiepad.

Het kadert in onze visie dat een website niet zomaar een stuk spielerei is of enkel als 'branding' vehikel werkt - een website moet bijdragen tot de bottom line van een bedrijf. Conversie - het converteren van bezoekers naar een bepaald doel (kopen in een webshop, actief lid worden van een community website, genereren van gekwalificeerde leads) - is het hoofddoel van elke website.

(Meer weten over Fork CMS? Klik door naar de website van dit krachtige Content Management Systeem.)

Google bezoekers en maximale conversie geschreven door Bart in: actualiteit

Tags: cms, content management systeem, fork, google, seo, zoekmachine optimalisatie

Het onderwerp van deze elfde editie is: 'tips voor ondernemers'.

Ik wil daaraan mijn steentje bijdragen met twee presentaties die ik onlangs nog gaf.

De eerste presentatie heet: 'Internet is de petrischaal van de maatschappij'. Daarin beschrijf ik een aantal trends die ik de voorbije jaren op het internet zag, en waarop ik me baseerde om mijn onderneming te modelleren:

De tweede presentatie bevat 10 tips voor startende ondernemers. Daarin vertel ik mijn (bescheiden) advies voor al wie wil starten met ondernemen:

Veel plezier. Bekijk op 7 juli zeker ook de andere ondernemer blogposts!

Online marketing blogkermis 11 geschreven door Bart in: marketing

Tags: blogkermis, ondernemen, online marketing

Meer nog, ik neem samen met een 20-tal andere webdevelopers van over de hele wereld deel aan een rondetafelgesprek met Microsofts CEO Steve Ballmer.

Het onderwerp: "to engage in a rich discussion on topics that are top of mind with him, such as standards in Web browsers, building Web apps, what is happening in the market, understanding your challenges and how Microsoft can help, and what the future holds from your perspective."

Ik zou daar eigenlijk graag wat voorbereid aan die tafel komen, en een aantal pertinente vragen klaar hebben.

Daarom vraag ik het aan jullie: welke vragen moet ik stellen aan het hoofd van Microsoft over webdevelopment?

Laat jullie gedachten na in het commentaarvak hieronder.

(Oh, en graag constructieve vragen. Opmerkingen als "wanneer gaat MS deftige browsers maken" en "welke stoel heeft hij liefst" klinken misschien grappig in jullie hoofd, maar zullen een beetje lullig zijn als ik ze effectief moet maken.)

Web development vragen voor Steve Ballmer geschreven door Bart in: webdesign

Tags: ballmer, microsoft, webdevelopment

Geef mensen een gemakkelijke manier om iets te doen en het wordt gedaan. Eén van de mooiste eigenschappen van het web is dat alles gemakkelijker wordt.

Video was vroeger moeilijk: met tapes sleuren, de tapes digitaliseren, proberen te bewerken op een (veel) te trage computer. En dan de familie bijeen krijgen om naar een communievideo van 2 uur te kijken. Nu steek je je Flip in de USB-poort, gooi je de video op YouTube en hij is meteen klaar om te delen met de wereld.

Ook in het ontwerp van websites is faciliteren een belangrijk item om in het achterhoofd te houden. Het moet zo makkelijk mogelijk zijn om een formulier in te vullen, om je in te schrijven, om een actie uit te voeren op een website.

Een mooi voorbeeld van de “faciliteer”-strategie is Instapaper. Als je registreert voor Instapaper is het enige dat je nodig hebt een e-mailadres. Je kan een wachtwoord instellen, maar dat hoeft niet. Aangezien Instapaper een tool is die alleen jijzelf gebruikt, is het overbodig om dit te beveiligen. Wie gaat er nu ook kijken naar iemand anders zijn “te lezen artikels”-lijst?

Een gelijkaardige applicatie, Laterloop, doet het ook op een goede manier: je kan inloggen met je Google account en je bent vertrokken.

En onderaan deze blogpost? Daar kan je inloggen met Facebook Connect. Je browser vult de gegevens in en het enige dat nog rest is een reactie achter laten. Geen gedoe.

Drempels verlagen met een goede interface geschreven door Johan in: webdesign

Tags: facebook connect, faciliteren, instapaper, interface, laterloop

Deze conferentie wil de visie van inspirerende trendwatchers op de toekomst presenteren:

• Hoe de consument zich de volgende jaren zal gedragen
• Hoe bedrijven inspelen op een veranderende wereld
• En wat de gevolgen zullen zijn voor media en marketing

Mijn presentatie heeft als titel 'Internet is de petrischaal van de maatschappij', met als ondertitel: How I've modelled my company on internet hypes and got away with it.

De slides hiervan vind je hieronder:

Internet is de petrischaal van de maatschappij geschreven door Bart in: webdesign

Tags: future summit, presentatie, trend

Er zal alleszins ook een Netlash delegatie aanwezig zijn.

Komen jullie ook?

Dagconferentie voor webcreatieven: Twiist geschreven door Bart in: webdesign

Tags: conferentie, twiist, web

Maar we zijn géén SEO-bedrijf.

Netlash is een webbouwer; we leggen de nadruk op een goede bruikbaarheid en interface van websites.

En dat is exact waarom we zoveel aandacht besteden aan SEO, en met name vindbaarheid in Google: Google is een deel van de interface van je website.

Het is onmiskenbaar, op dit moment is de toegangspoort van het internet de facto Google. Mensen gebruiken de zoekmachine niet alleen om dingen op te zoeken of vragen te beantwoorden - ze gebruiken het als spellingscontrole en zelfs als een manier om de URL's die ze ingeven te controleren. Veel doorsneegebruikers tikken het adres van de website waar ze naar toe willen niet in de adresbalk in, maar in de zoekbox van Google.

Een goed gemaakte website zal dan ook 50 tot 60% van zijn bezoekers zien binnenkomen via Google.

Dit maakt Google eigenlijk tot een deel van de gebruikservaring van jouw website.

Vandaar dat het belangrijk is om aandacht te besteden aan SEO, zoekmachine optimalisatie, van je website. Niet alleen om trafiek te trekken naar jouw website - maar ook omdat die pagina met zoekresultaten effectief deel uitmaakt van de user experience van jouw site.

Aandacht dus voor mooie, leesbare URL's waarin het onderwerp van die pagina staat, voor goed omschreven meta-description die opduikt in de zoekmachine, voor duidelijke en niet-misleidende meta-keywords... Zelfs de manier waarop jouw site eruit ziet in thumbnails (voor diegenen die met een image preview werken) speelt een rol.

Ik predik al een tijdje dat de grens tussen verschillende websites aan het vervagen is, dat een website geen op zichzelf staand geheel is - maar ingebed in de rest van het internet. (Zie ook: mashups, integratie van externe diensten via API's, verspreiding van content via RSS.)

Wie bezig is met interaction design van websites, zou dus eigenlijk een basis begrip moeten hebben van hoe Google websites indexeert, en dit meenemen in het ontwerp van die sites.

Google is deel van de interface geschreven door Bart in: SEO

Tags: interaction design, search engine optimization, seo, webdesign

In 2008 nam het aantal bestellingen per persoon met 17% toe, naar een gemiddelde van 5,3 bestellingen per persoon. Het gemiddeld besteed bedrag per online shopper stijgt daarmee naar 618 euro.

De populairste sectoren om online te kopen zijn zoals verwacht de reissector en die van de consumentenelektronica.

Dit is de jaarlijkse gemeten webwinkel omzet op de Nederlandse markt:

Voor 2009 wordt ondanks de economische uitdagingen nog steeds een groei verwacht, tot 6 miljard euro.

Meer details over de studie vind je op de site van Thuiswinkel.

Webwinkel omzet 4,85 miljard in 2008 geschreven door Bart in: e-commerce

Tags: cijfers, e-commerce, webshop, webwinkel

't Was het laatste ontbrekende stuk van de inrichting: de plaats waar we 's middags samen een broodje kunnen eten en ondertussen kunnen bijpraten.

De tafel, die ik samen met Christian van Gillinox ontworpen heb, bestaat uit 6 kleinere tafels, die los van elkaar bv. gebruikt kunnen worden om bv. een receptie te organiseren. Het is een hoge tafel waar je met een barkruk moet aan zitten maar waar je bv. ook rechtstaand kunt tegen leunen.

De inrichting van het kantoor is erop gericht om idereen een zijn eigen vaste stek te geven, maar er zijn ook voldoende aparte hoekjes voorzien zodat iedereen zich kan afzonderen om een telefoontje te plegen, om even te overleggen of om even ongestoord te kunnen werken.

Zelf ben ik overtuigd gebruiker van onze love-seats om de status van de lopende projecten door te nemen.

De vormgeving is behoorlijk strak maar niet klinisch — er wordt in deze ruimte ook geleefd — en weerspiegelt de identiteit van het bedrijf én idereen die er werkt.

Eigenlijk moet het allemaal menselijk blijven en daar, denk ik, zijn we goed in geslaagd.

Inspirerende werkomgeving geschreven door Dirk Sabbe in: webdesign

Tags: inrichting, inspiratie, kantoor