De Zweedse grafisch designer Viktor Hertz herwerkte enkele bekende logo’s tot hoe ze er volgens hem zouden moeten uit zien als ze hun ware aard willen tonen aan hun klanten.

Camel

Absolute Wodka

Carlsberg

McDonalds

L’Oreal

MTV

Nintendo

Porsche

Marlboro

Microsoft Windows

Apple

Coca Cola

Myspace

Youtube

Playboy

Starbucks

Wij helpen je op weg: een overzicht van de 11 beste én gratis WordPress Themes van het afgelopen jaar.

Swatch

Swatch is een prachtig gratis business theme met heel wat features. Ideaal als je voor je bedrijf een (nieuwe) website wil opstarten.

Demo | Info & Download

WordPress Anniversary Theme

Dat WordPress een populair blogplatform is, dat weten de makers maar al te goed. En dat willen ze vieren met een prachtigs WordPress Anniversary Theme. Dankjewel WordPress.

Demo | Info & Download

Bright Sky

De makers van Kreative themes leveren een uitgebreide documentatie bij elk theme zodat je het theme zelf naar je hand kan zetten.

Demo | Info & Download

Boldy

Boldy geschikt om een mooie business website op te zetten. Het theme komt met 3 color styles die je kan instellen in de admin options.

Demo | Info & Download

AllTuts

AllTuts is net als Boldy een prachtig theme om snel een mooie blog op te zetten.

Demo | Info & Download

Balita – gratis E-Commerce theme

Goede én gratis webshop themes liggen niet al te dik gezaaid. Balita is een gratis WordPress theme speciaal gericht op winkels die producten voor kinderen willen verkopen. Dit thema werkt perfect met de WordPress E-commerce plugin. Ideaal voor als je je eigen webshop wil opzetten.

Demo | Info & Download

MyCorp

MyCorp is een simpel business/portfolio theme en maakt gebruik van de Nivo Slider. Met behulp van Custom Post Types en de admin opties heb je volledige controle over de homepage.

Demo | Info & Download

Ribbons

Met Ribbons heb je een fris en modern theme in geen tijd geïnstalleerd. Bovenaan kan je makkelijk bepaalde posts in de kijker zetten. Er zijn verschillende slider transitions waaruit je kan kiezen.

Demo | Info & Download

PhotoClick

PhotoClick is een uitstekend 1-kolom WordPress theme en geschikt als fotoblog. Het theme heeft ook een premium versie voor als je nét iets meer wil, maar je zal zeker genoeg hebben met de gratis versie.

Demo | Info & Download

Yoko – HTML5/CSS3 & Responsive layout

Dit WordPress theme heeft een responsive layout en maakt gebruik van Google fonts. Er zijn verschillende instellingen mogelijk in de WordPress admin.

Demo | Info & Download

Ari

Ari is een 3-kolom blog theme. Je kan kiezen uit een lichte of donkere look & feel. Dit theme maakt gebruik van Google fonts en CSS3 Media Queries voor een responsive webdesign.

Demo | Info & Download

We zochten voor jullie 20 creatieve ‘Inspired by nature’ webdesigns uit.

Heb jij ook nog mooie voorbeelden van website designs met een likje of een verfje natuur?
Laat het ons zeker weten.

84 Colors

Aquawoods

The Lounge

Tennessee Trails and Byways

Studio 7 Designs

Story Pixel

Morphix

Terrasse Concept

Delia Explorers

Noupe

Wake Somebody Up

Eastpoint

Johan Reinhold

Transmission

Nordrasill

Julius Mattsson

Web Idea Pond

WebDesignFutures

Protège la forêt

Goin Nutty

Wil je meer weten over het script? Even verderop ga ik dieper in op wat het script juist doet.

function get_param( name )
	{
		name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
		var regexS = "[\\?&]"+name+"=([^&#]*)";
		var regex = new RegExp( regexS );
		var results = regex.exec( window.location.href );
			if( results == null )
			return "";
			else
			return results[1];
	}
var param_name = get_param( 'name' );
var param_difficulty = get_param( 'difficulty' );
document.write(param_name);

1. Wat is een Query string?

Een Query string is een deel van de URL dat gebruikt wordt om de inhoud van variabelen door te geven.
Bekijk even onderstaand voorbeeld, waarbij we een pagina ‘tutorial.html’ op Pixelmountain hebben. De inhoud van deze pagina gaat over een tutorial over CSS en heeft een gemiddelde moeilijkheidsgraad:

http://www.pixelmountain.be/demo/tutorial.html?name=css&difficulty=makkelijk

We kunnen deze link opsplitsen in 2 delen:

1. http://www.pixelmountain.be/demo/tutorial.html is de eigenlijke URL van onze pagina

2. ?name=css&difficulty=moderate is onze Query String.

‘tutorial’ en ‘name’ zijn 2 variabelen die elk een waarde hebben: ‘css’ en ‘makkelijk’.

Note: de eerste variabele in de string moet steeds starten met ‘?’. Alle volgende variabelen moeten starten met ‘&’.

2. Het script ontleed

function get_param( name )
function get_param( name )
	{
		name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
		var regexS = "[\\?&]"+name+"=([^&#]*)";
		var regex = new RegExp( regexS );
		var results = regex.exec( window.location.href );
			if( results == null )
			return "";
			else
			return results[1];
	}

Het script gaat op zoek naar variabelen in de string (a.h.v. ‘? en ‘&’) en plaatst de variabelen en hun inhoud in een array.

var param_name = get_param( 'name' );
var param_difficulty = get_param( 'difficulty' );

We declareren de variabele param_name en de inhoud hiervan is de waarde van de parameter ‘name’. De waarde van deze parameter zal verschijnenen als we de variabele in het laatste deeltje oproepen:

document.write(param_name);

Met behulp van bovenstaand script kunnen we de twee waarden op onze pagina tutorial.html weergeven.

Demo

Hieronder een lijstje met 20 kleurrijke webdesigns die aantonen hoe het correct gebruik van een kleurenpallet kan bijdragen tot pareltjes van webdesigns.

Voorlopig werkt de +1 button enkel op de Engelstalige versie van de zoekmachine (Google dus). Maar het kan zeker geen kwaad om de Google  +1 button nu al op je website te plaatsen. En dat is heel eenvoudig trouwens.

Hieronder leggen we in 3 stappen uit hoe je de +1 button op jouw website plaatst.

1. De Google +1 button generator

Net als bij de Facebook Like button of de Tweet-button van Twitter kan je op deze pagina een keuze maken uit verschillende opties om jouw button te genereren: de grootte van de button, de taal, een teller en eventueel de url die je wil laten waarderen. Dit laatste is optioneel. Je hoeft geen url te specifieren. Standaard zal de Google +1 button de pagina laten waarderen waar de button op geplaatst is.

Op de opties ‘Parse’ en ‘JS Callback function’ gaan we in deze tutorial niet verder in. Je vindt meer documentatie op de +1 button API pagina.

2. Een beetje Javascript

Een héél klein beetje. Het enige wat je moet doen is het eerste stuk van de code die gegenereerd werd in je pagina plaatsen. Nét boven de afsluitende body tag onderaan in je document.

Dit stukje javascript zal de server op Google aanspreken en er voor zorgen dat alle nodige scripts uitgevoerd worden om de button te tonen en de kliks van bezoekers te verwerken.

Je mag die code ook in de head van je pagina steken, maar het is aan te raden om javascript onderaan je pagina te zetten.

3. En nu, de kers op de taart

Het laatste wat je nu moet doen is de +1 button nog een plaatsje op je pagina geven. Dat doe je met deze code:

<g:plusone></g:plusone>

Het maakt niet uit of je de Google +1 button een of tien keer op je website plaatst. Plaats hem tussen je andere social buttons, of zet hem naast de titel van je artikel.

En voila, je bezoekers kunnen nu jouw artikels waarderen. Oh ja. Vond je deze quick tip nuttig? Geef em dan een +1!

Leer meer over de Google +1 button

Wil je meer weten over de Google +1 button? Hieronder vind je enkele interessante artikels:
• De officiële Google +1 site
• Google komt met +1 button, het antwoord op de Facebook Like
• SEO-effect van de Google +1 knop onderzocht

HTML5 is de nieuwste HTML-standaard. En ‘HTML5 is cool’, ‘HTML5 is een merk’. Dat is ook wat ze bij de hele webcommunity willen uitstralen.

Het logo moet de kracht en de vooruitstrevendheid van webdesigners uitdragen.

Op de officiële HTML5-logo website kan je ook ‘badges’ downloaden. De badge betekent niet dat jouw website conform de webstandaards zoals we (vroeger) zagen bij de ‘Valid W3C HTML’ badges. Het is eerder een manier om aan te geven dat jouw site gebruik maakt van de nieuwste technologiën die HTML5 met zich meebrengt zoals CSS3, SVG, Semantics, geo-location,…

Bron: www.w3.org/html/logo/

Ook populaire netwerksites als Facebook, Twitter en YouTube plukken de vruchten van het alsmaar drukker wordende internetverkeer.

Maar hoe groot is dit wereldwijde web dan wel?

Webmonitordienst Pingdom ging de uitdaging aan en komt naar eigen zeggen met een vrij accuraat resultaat op de proppen. Ze verzamelden de cijfers van verschillende bronnen, en plaatsen deze in één groot overzicht.

Het volledige rapport kan je hier terugvinden

Het internet anno 2010 in cijfers.

Worldwide web
• 1.97 miljard internetgebruikers, een stijging van 14% t.o.v. 2009
• 255 miljoen websites online
• 21,4 miljoen websites zagen het daglicht in 2010

Twitter
• 175 miljoen Twitteraars
• goed voor 25 miljard tweets in 2010
• 7,7 miljoen volgen de tweets van @ladygaga (record)

Facebook
• 600 miljoen profielen op Facebook
• 250 miljoen nieuwe Facebookprofielen in 2010

Mails
• 107 triljoen mails werden verstuurd via het internet.
• Hiervan was 89,1% spam (!)

Youtube
• elke dag worden er 2 miljoen video’s op YouTube bekeken
• elke minuut wordt er 35 uur beeldmateriaal geupload

Het volledige rapport kan je hier terugvinden

Deze cijfers mogen dan al verbluffend zijn, maar het staat vast deze in 2011 enkel nog de hoogte in zullen gaan.

Voor wie alles liever in een grafisch kleedje ziet: The Next Web maakte deze infografiek:

Een cheat sheet bevat kleine stukjes code/tekst/referenties die elke webdesigner of webdeveloper regelmatig nodig heeft. De meeste mensen printen deze cheat sheets uit en geven ze een plaatsje op hun bureau. Je kan ze natuurlijk ook op je bureaublad van je computer plaatsen.

Hieronder vind je 5 handige cheat sheet wallpapers voor op je bureaublad:

Want al zullen de gratis WordPress themes in 2011 nog steeds hoge toppen scheren, er verschenen vorig jaar toch heel wat sublieme themes voor de WordPress gebruiker.

Een overzichtje van de 50 beste WordPress themes van 2010 volgens WPBeginner.