Blog RSS feed

Hoe een webbuilder kiezen en wat mag dat kosten?

Thu, 10 May 2012 09:23:50 GMT

Gisteren gaf ik voor de eerste keer, in de hoedanigheid als bestuurslid van onze vakorganisatie FeWeb, een presentatie voor het perterschapsproject "Unizo ondernemerscoach". Het thema van de uiteenzetting was "Hoe kies ik een webbuilder en wat mag dat eigenlijk kosten".

301 redirects, een sterker hulpmiddel dan je denkt!

Wed, 07 Mar 2012 17:07:57 GMT

Iedere website wordt, in verschillende mate, geüpdate en er worden zelfs hele pagina's of domeinnamen toegevoegd en/of verwijderd.

We gaan er even van uit dat uw website volledig vernieuwd is. De bestandsnamen zijn veranderd (bvb van index.html naar home.aspx). Maar wat dan als u af wil van de oude webpagina's zonder je zorgen te moeten maken over mensen die links naar deze (oude) pagina's volgen om vervolgens op een '404' melding terecht te komen?

Een 301 redirect instellen is dan de meest zoekmachine vriendelijke oplossing om een bestaande link te verwijzen naar een nieuwe pagina of volledige website. Door een 301 redirect in te stellen vertel je aan zoekmachines: "De webpagina die je zoekt is vanaf heden definitief verhuisd naar deze nieuwe locatie."

Wanneer een pagina is verhuisd, wilt u dit uiteraard aan uw zoekmachine laten weten. Door een 301 redirect te gebruiken wordt aan de zoekmachine duidelijk gemaakt dat de pagina zich niet langer bevindt op de oude locatie, maar voortaan te vinden is op een nieuwe plaats. Tevens wordt de ranking die uw oude pagina had, behouden op de nieuwe page!

De tijdelijke redirect wordt ook wel een 302 redirect genoemd. We spreken hier over een tijdelijke verwijzing, bijvoorbeeld voor een pagina met een melding dat de website tijdelijk onbereikbaar is voor onderhoud. Ga er vanuit dat voor tijdelijke verwijzingen korter dan 2 maand, je best een 302 redirect gebruikt. In het andere geval gebruik je toch best een 301!

Een 302 redirect kan evenwel zeer verregaande gevolgen hebben voor zoekmachine optimalisatie (SEO). Er bestaan hoegenaamd erg veel voorbeelden van websites en pagina's die onvindbaar waren in de zoekmachines door het gebruik van 302 redirects. De reden hiervan is dat de zoekmachine ziet dat een pagina weliswaar verhuisd is, maar nog niet verwijderd mag worden. Dit resulteert in het feit dat de zoekmachine de oude pagina laat staan, en de nieuwe pagina niet gaat indexeren. An accident waiting to happen!

We raden het met andere woorden aan om gebruik te maken van 301 redirects!

Aan de slag met responsive webdesign

Fri, 03 Feb 2012 01:14:26 GMT

Responsive web design is zonder twijfel momenteel een 'hot subject'. Van mobiele browsers tot netbooks tot tablets, hedendaagse gebruikers bezoeken uw websites via een steeds breder wordend scala aan toestellen. Met responsive webdesign biedt webcontent altijd en op ieder toestel een optimale gebruikservaring. Hoog tijd voor een developer-sprong in het duister!

De meeste mobiele browsers schalen de HTML-pagina's naar een bepaalde breedte zodat de pagina op het mobiele (en kleinere) scherm past. Je kan gebruik maken van de viewport meta tag om dit te resetten. De viewport tag vertelt de browser de breedte te gebruiken van het gebruikte apparaat in plaats van de originele schaal. Dit doe je door de viewport tag in de sectie van je code te plaatsen.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

In dit concrete voorbeeld vertrekken we van een pagina-structuur die bestaat uit een header, sidebar, content en footer. De sidebar heeft een breedte van 250px en de content container is 650px breed.

Het geheime ingrediënt van de chef wat het design 'responsive' maakt, schuilt hem in de CSS3 media queries. Hierin ga je als het ware de voorwaarden neerpennen hoe de pagina zich dient te gedragen aan de hand van de huidige viewport breedte. Op een normaal 17" scherm is het aangewezen dat de sidebar links van de content area staat, maar vanop je iPhone is het toch misschien net iets overzichtelijker indien die sidebar met navigatie erboven staat.

In het onderstaande voorbeeld bepalen we een aantal regels die in werking treden vanaf wanneer de viewport breedte 950px of minder bedraagt. Je kan hier zoveel regels bepalen als je zelf wil.

Wanneer de viewport breedte 700px of minder bedraagt, treedt een nieuwe set aan regels in werking, en wordt de width van de #content en #sidebar als 'auto' ingesteld, en wordt de float verwijderd. Dit resulteert erin dat de sidebar en content area's op de volledige breedte van het scherm worden getoond, onder mekaar.

Bij een viewport breedte van 460px (smartphone), wordt de hoogte van de header gereset. De font-size van de H1 tags wordt gewijzigd naar 25px en we verbergen de sidebar.

In grote lijnen hebben we nu net onze eerste responsive webpagina gemaak! uiteraard is dit nog maar het topje van de ijsberg en kan er nog véél dieper worden ingegaan op het onderwerp, maar hiermee kom je toch alvast een eind.

Heb jij interesse in responsive webdesign en/of heb je er zelf ervaring mee? Laat het ons weten!

On the job: jQuery mashups.

Fri, 13 Jan 2012 15:41:03 GMT

Voor de uitwerking van een immo-site (http://www.buyens.be) kregen we de vraag om een functionaliteit te voorzien waarin bezoekers de mogelijkheid hebben om te zoeken naar panden op een landkaart. Na een verkenningsronde kwamen we uit bij 2 scripts. Enerzijds vonden we het ImageMapster jQuery script (http://www.outsharked.com/imagemapster) voor de feitelijke visualisatie van het landkaartje. Anders zagen we potentieel in het autocomplete script van James Smith (http://www.loopj.com/jquery-tokeninput) om de zoekopdracht duidelijk te visualiseren.

ImageMapster is een jQuery plugin die HTML-image maps net dat tikkeltje extra geeft. Via dit script kan elke imagemap worden belicht, geselecteerd en gemanipuleerd worden op allerlei manieren. ImageMapster is 100% Javascript en het werkt op elke grote(re) browser, zonder Flash of andere afhankelijkheden (met uitzondering van jQuery), inclusief Internet Explorer 6.

Via het script is het mogelijk om gemeentes met beschikbare panden aanklikbaar te maken (of beter: gemeentes zonder panden niét aanklikbaar). Deze worden in het script ingelezen via een met id's gevulde array. Bezoekers zien in één oogopslag in welke gemeentes panden beschikbaar zijn, en kunnen zo meteen op een visuele manier hun keuze bepalen. Uiteraard verandert het aanbod aan panden dagelijks, en daarom ontwikkelden we een web service die dagelijks een lijst genereert met de beschikbare gemeentes. Deze file wordt dan ingelezen in de jQuery module, om te resulteren in een bijna realtime overzicht.

Aangezien veel bezoekers niet specifiek in 1 gemeente zoeken, zochten we naar een script dat de geselecteerde gemeenten op een duidelijke manier kon weergeven. Hiervoor leek het autocomplete script een goede optie.

Als finale hindernis combineerden we alle scripts en lieten we via jQuery een interactie tot stand komen tussen deze scripts. Aangeklikte gemeentes op het kaartje worden nu ook weergegeven in het zoekformulier.

Bekijk het resultaat op http://www.buyens.be

Wat is uw visie? Laat het zeker weten in de comments. Of heeft u nood aan een gelijkaardige integratie in uw website, neem dan zeker contact met ons op!

Voor de uitwerking van een immo-site (http://www.buyens.be) kregen we de vraag om een functionaliteit te voorzien waarin bezoekers de mogelijkheid hebben om te zoeken naar panden op een landkaart. Na een verkenningsronde kwamen we uit bij 2 scripts. Enerzijds vonden we het ImageMapster jQuery script (http://www.outsharked.com/imagemapster) voor de feitelijke visualisatie van het landkaartje. Anders zagen we potentieel in het autocomplete script van James Smith (http://www.loopj.com/jquery-tokeninput) om de zoekopdracht duidelijk te visualiseren.

Bekijk het resultaat op http://www.buyens.be

Wat is uw visie? Laat het zeker weten in de comments. Of heeft u nood aan een gelijkaardige integratie in uw website, neem dan zeker co

YoxView: jQuery image viewer plugin

Thu, 12 Jan 2012 17:43:26 GMT

Onlangs ontdekte ik een handige jQuery plugin voor oa het bekijken van beeldmateriaal en video's op een website: YoxView!

YoxView biedt de gebruiker content aan via een Lightbox, maar beperkt zich niet enkel tot afbeeldingen, zoals vele andere LightBox scripten. YoxView kletst er nog een hoop aan mogelijkheden bij: denk maar aan tekstmateriaal, video (Youtube, Vimeo, Flash, ...), audio, iframes, pdf documenten, Quicktime of Java applets, enzovoort!

Enkele voordelen van YoxView op een rijtje:

Gratis
Zeer gemakkelijk te integereren
Volledig configureerbaar via verschillende opties
Meertalig: denk hierbij aan tooltips of teksten van knoppen (vb. sluit knop) die je in de popup wilt tonen
Mogelijkheid om afbeeldingen en filmmateriaal (vb. Youtube filmpjes) weer te geven via een slideshow of gallerij.
Gebruik van het toetsenbord wordt ondersteund vb. bladeren doorheen de afbeeldingen via de pijltjes op het toetsenbord.
Zoekmachine vriendelijk: grote afbeeldingen worden geindexeerd.
Cross-browser compatibel
De inhoud van de popup (vb. afbeeldingen, video's) schaalt zich automatisch zodat het perfect past in het browser venster en op optimale grootte wordt weergegeven.
Toevoegen van eigen knoppen aan de YoxView popup vb. Handig als je een download knopje wilt.
Mogelijkheid om een YoxView popup te openen vanaf een tekstuele link.
Voor developers: eventhandlers toevoegen voor specifieke events die zich voordoen in YoxView. vb.) Stel dat je de gallerij wilt sluiten wanneer de gebruiker de laatste afbeelding heeft bereikt in de gallerij, kan je het onClose event gebruiken.
Caching van afbeeldingen: afbeeldingen kunnen reeds geladen worden in de achtergrond, waardoor de gebruiker een betere performantie waarneemt.
Verschillende "skins" mogelijk: wil je de Lightbox in een ander kleedje steken? Geen probleem! Achtergrondkleur, buttons, etc zijn allemaal te stylen.

Hoe te gebruiken?

Als voorbeeldje zal ik tonen hoe je een gallerij opent via YoxView, waarbij de popup zich automatisch sluit, wanneer de gebruiker bij de laatste afbeelding gekomen is:

1) Download de YoxView plugin.

2) Zorg ervoor dat het gedownloade "yoxview" foldertje onder de root van je website terecht komt. Hierin zitten alle images, scripts, css files en dergelijke in die YoxView gebruikt.

3) Voeg volgende script regel toe aan het bestand waarin je YoxView gaat oproepen:

<script type="text/javascript" src="../yoxview/yoxview-init.js"></script>
<script type="text/javascript">

    $(document).ready(function(){
       $(".yoxview").yoxview({ 
            loopPlay: false, 
            onEnd: function(){ $.yoxview.close(); }
        });
    });
</script>

Het "yoxview-init.js" bestand zal ervoor zorgen dat alles geinitialiseerd zodat YoxView weet waar hij zijn script files en css files en dergelijke moet halen. Het tweede stukje script voert de "yoxview" methode uit op een element met css klasse = yoxview (zie: .yoxview). Wanneer de gebruiker het einde van de gallerij bereikt heeft wordt het YoxView venster gesloten via de instructie:

onEnd: function(){ $.yoxview.close();

4) Last but not least: de gallerij met afbeeldingen natuurlijk
Voeg een div toe met css klasse "thumbnails yoxview" aan het bestand (vb. .html, .aspx, ...) waar je YoxView in gaat oproepen en steek hierin de afbeeldingen:

<div class="thumbnails yoxview">
<a href="images/large/01.jpg"><img src="images/thumbnails/01.jpg" alt="First" title="The first image" /></a>
<a href="images/large/02.jpg"><img src="images/thumbnails/02.jpg" alt="First" title="The SECOND image" /></a>
<a href="images/large/03.jpg"><img src="images/thumbnails/03.jpg" alt="First" title="The THIRD image" /></a>
</div>

5) Zo, dat is alles! Bekijk bovenstaand voorbeeldje of bekijk andere demo's om YoxView onder de knie te krijgen!

Heb je iets moois in YoxView gemaakt of weet je nog leuke Lightbox scripts? Laat het ons weten via de comments!