HTML 5 vs Flash

gepost op Dinsdag 17 mei 2011 door Sam

Allereerst zal ik mezelf even voorstellen. Mijn naam is Sam Van Hulle, en ik ben op dit moment bezig aan mijn laatste maanden als student Grafische en Digitale Media / Multimediaproductie aan de Arteveldehogeschool te Gent. Op 28 april begon mijn stage hier bij Webatvantage. Het is alvast een geheel nieuwe ervaring geweest om vanuit het bewogen studentenleven in een professionele omgeving als deze gegooid te worden, maar ik heb het me nog geen seconde beklaagd.

Wel is het een erg drukke periode. Op schools vlak nadert de deadline van mijn eindwerk met rasse schreden, en gezien Lieven mijn externe promotor is, vroeg hij me hierover een blogpostje te schrijven.

Als onderwerp koos ik de rijzende discussie tussen aanhangers van Adobe Flash enerzijds, en die van HTML 5 anderzijds. HTML 5 wordt aanzien als de zoveelste nieuwe Internetrevolutie, die zoveel spectaculaire nieuwigheden bevat dat plug-ins als Adobe Flash na verloop van tijd hun reden van bestaan zouden verliezen.

Waarom? Plug-ins als Flash worden door velen aanzien als een bedreiging: ze zijn eigendom van één bepaald bedrijf en worden beschermd door patenten, en dat druist regelrecht in tegen de ‘open’ filosofie van het W3C. Verder is het volgens sommigen een lastig iets dat plug-ins geïnstalleerd moeten worden (hoewel 97,9% van de met het Internet verbonden computers wel een versie van Flash Player heeft staan, en HTML 5-compatibele browsers behoorlijk in de minderheid zijn) en zou de performance niet optimaal zijn.

Hoewel dit allemaal geen leugens zijn, kan ik je alvast verklappen dat Flash voorlopig de winnaar is in deze strijd. En de grootste ‘boosdoener’ die daar de schuld in heeft is JavaScript.

HTML 5 en zijn vrolijke bende vertrouwen op JavaScript voor 99,9% van hun nieuwigheden. Het probleem is dat JavaScript geen nieuwigheid is, en dat voel je. Het is een erg archaïsche taal, nog niet eens 100% object-georiënteerd, en het debuggen ervan is een uitdaging. Het verbaast me niet dat JavaScript hier bij Webatvantage zich beperkt tot Google Analytics en de occasionele, op jQuery gebaseerde interface-animatie of AJAX-call.

Bij mijn eindwerk hoort ook een praktische proef. Om HTML 5 te confronteren met Flash, besloot ik de nieuwkomer in te schakelen in een gebied dat voorheen bijna volledig ‘eigendom’ was van Flash: dat van de browserspelletjes.

Het plan was een online action RPG te schrijven, die veel weg had van een Flash-game, maar geschreven was met behulp van de nieuwe HTML 5 Canvas-API. De werkelijkheid is helaas anders uitgedraaid: omwille van het lastige development in JavaScript, de veel te beperkte omvang van Canvas (vergeleken met Flash) en de verschrikkelijke performance, besloot ik eerder af te ronden. Het resultaat zijn drie spelomgevingen, waarin je met een riddertje kan rondlopen.

Om een kennis van me te citeren: “Ook negatieve conclusies zijn conclusies”. HTML 5 is simpelweg nog niet opgewassen tegen Flash. Maar ik beschouw dit niet als een definitieve nederlaag voor het W3C: de HTML 5- en Canvas-standaarden zijn nog volop in ontwikkeling, en ik hoop dat ze nog veel verder worden uitgebreid. Sowieso hebben beide partijen een toekomst naast elkaar, zij het op andere vlakken.

Wel wordt het tijd dat JavaScript een volwaardige OOP-taal wordt. Van vele JS-genieën zal dit een grote aanpassing vergen (zie de heisa rond elke nieuwe versie van ActionScript en eigenlijk zowat elke andere taal) maar uiteindelijk zal dit zowel de populariteit van JavaScript als de hoeveelheid frustratie die ermee gepaard gaat, ten goede komen.

Ik wacht in spanning de toekomst af, maar deze zomer begin ik alvast aan de Flash-versie van mijn spelletje!

Een live demo van dit experiment komt binnenkort!

Met de zomer in aantocht, mag het allemaal een beetje korter...

gepost op Vrijdag 08 april 2011 door Lieven

Zo denken wij er ook over bij Webatvantage. Na gretig gebruikt gemaakt te hebben van bit.ly of tiny.cc, vonden we het tijd om een eigen .be url-shortener in het leven te roepen nl. http://urls.be en deze meteen ook voor iedereen toegankelijk te maken.

Voorlopig is het een heel eenvoudige tool, paste er een lange url in en je krijgt een korte url, met een vaste lengte van steeds 16 karakters terug. Deze korte url is ideaal om te gebruiken in bv. Twitter, Facebook,...

Een voorbeeld: deze url http://www.webatvantage.be/Portfolio/leirovins-101 kan je makkelijk inkorten tot http://urls.be/SecSzT.

In de komende maanden zullen nog extra functionaliteiten worden toegevoegd, zoals een QR-code bij elke verkorte URL, de mogelijkheid om een account aan te maken om statistieken en extra features te kunnen raadplegen, ... Dus plaats deze site zeker in je bookmarks.

Heb je suggesties of ideeën, mail of tweet ze ons gerust.

Usability tips voor webdesigners

gepost op Dinsdag 14 september 2010 door Inge

Mensen surfen op het internet omdat ze iets zoeken. De taak van een webdesigner is om deze zoektocht zo 'luxueus' mogelijk te maken.
Kortom moeten we ervoor zorgen dat de surfer efficiënt vindt wat hij zoekt én dat deze zoektocht een aangename ervaring is.

Enkele eenvoudige usability tips:

• Het gebruik van breadcrumbs. Als Hans en Grietje gebruik hadden gemaakt van broodkruimels, hadden ze hun weg naar 'Home' wel gevonden. Breadcrumbs worden vooral gebruikt wanneer pagina's bestaan uit meerdere subpagina's. Het zorgt voor een transparante structuur van een website.
  
• Vergroot (indien mogelijk) het aanklikbaar veld van een link. Maak bijvoorbeeld van een link in een lijstje een block-element (display:block;).
  
• Gebruik genoeg contrast op de website en zorg ervoor dat de lettertypes groot genoeg zijn. Om een aangename leeservaring te bieden, kan je gebruik maken van de line-height. Een paragraaf leest veel vlotter als de lijnen niet tegen elkaar gedrukt staan.
  
• Zorg voor een duidelijke navigatie & structuur op de website.
  
• Het gebruik van genoeg ruimte tussen de elementen op een pagina zorgt ervoor dat de structuur gezien wordt.
  
• Geef elke gebruiker gemakkelijk toegang tot de website. Maak gebruik van de webstandaarden.
  
• Geef zinvolle feedback op wat de surfer doet. Vult de bezoeker bijvoorbeeld een veld in een formulier fout in, geef dan aan wat wel verwacht wordt.
  
• Dat goede copyrighting de gebruiksvriendelijkheid van een website verhoogt, is een understatement.
  
• Maak van het bedrijfslogo, een link naar de homepage.
  
• Zorg ervoor dat alles werkt. Niets zo frustrerend voor een bezoeker als iets dat niet lijkt te werken.
  

En zo zou ik nog wel even kunnen doorgaan. Maar misschien dat de tip der usability tips wel deze is: wees een user!
Leef je in als bezoeker van de website en ontdek zo wat beter kan.

Een succesvol webdesign project

gepost op Woensdag 04 augustus 2010 door Inge

Een goed project is er één waarbij de klant tevreden is en waarbij wij hier bij Webatvantage ook tevreden zijn. Die tevredenheid vloeit voort uit verschillende factoren:

• haalt de website zijn vooropgestelde doelstellingen (het aantal verwachte bezoekers, aantal verwachte aankopen, de verwachte doelgroep ...)
• is de communicatie vlot verlopen tussen ons en de klant
• is de klant en zijn ook wij trots op het design van de website
• zijn we beiden tevreden met de gekozen structuur van de content
• is de deadline tijdig bereikt
• etc.

Om die tevredenheid te bereiken, zijn er enkele zaken die belangrijk zijn om in achting te nemen bij de start van een project.

Denk na!

Wat wil de klant met zijn website beögen? Door goed na te denken over het design en de structuur van een website, komen we tijdens het ontwikkelingsproces voor weinig verrassingen te staan. De klant kan gedurende het ganse proces feedback geven maar het spreekt voor zich dat grote aanpassingen tijdens het proces een project vaker niet dan wel ten goede komen.

Een realistische deadline!

Een website ontwerpen en bouwen vraagt tijd. Ook het toevoegen van alle content in het CMS mag niet onderschat worden. Door genoeg tijd te voorzien voor alle stappen, moet er niet overhaast te werk gegaan worden en kunnen we kwaliteit afleveren.

User focus!

Een website maak je voor de klanten van je klant. Bij webdesign en webdevelopment moet het standpunt van de gebruiker steeds in gedachten gehouden worden. Wat zoekt de surfer en op welke manieren kan hij deze informatie het gemakkelijst terug vinden?

Goede communicatie!

De projecten die het vlotst verlopen, zijn uit mijn ervaring, diegene waarbij de klant goed weet wat hij wil. Hoe beter gecommuniceerd wordt wat de wens is, hoe beter wij deze kunnen invullen. Ook tussen de makers van de website, is het belangrijk dat er zich een voortdurende input en feedback afspeelt.

Debug!

Een website debuggen betekent zoveel als alle foutjes uit een website halen. Hier en daar het design finetunen en zorgen dat alles technisch goed werkt. Een aangename user experience vloeit voort uit een optimale werking van een website.