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!

HTML5

gepost op Vrijdag 25 juni 2010 door Thomas

HTML5 (HyperText Markup Language 5) is de nieuwste, nog onafgewerkte versie van html standaard. HTML5 verbetert de kleine foutjes van zijn voorganger (html) en levert extra en betere ondersteuning voor webapplicaties, webdesign. Enkele voorbeelden:

Structuur elementen

Er zijn een aantal nieuwe elementen (tags) bijgekomen om de structuur en inhoud van de pagina te verduidelijken vb. header, nav, article, footer, time enz. Deze tags zullen ongetwijfeld nog een rol spelen voor smartphones, zoekmachines, screenreaders enz.

Video/audio element

Dankzij de audio en video-tag is er de mogelijkheid om media af te spelen zonder gebuik te maken van plugins zoals bijvoorbeeld een flash-player-plugin. De bediening van het filmpje, zoals bijvoorbeeld: play, pause en fast forward zijn via JavaScript aanspreekbaar. Op die manier kan je dus een player volledig via css, html en javascript opmaken en instellen. De enige vereiste is dat je browser het bestand formaat van de media ondersteund (vb mp4, ogg, avi, ...). De ideale situatie zou zijn dat er een codec (formaat) is die alle browsers implementeren. Maar daarvoor zijn de makers (Microsoft, Apple, Google, Mozilla) te koppig.  

Canvas element

Deze tag is ongetwijfeld de spectaculairste vernieuwing. Het geeft webdevelopers de mogelijkheid om met behulp van JavaScript afbeeldingen te creeëren. De mogelijkheden hiervan spreken tot de verbeelding. Dankzij deze tag kan je bijvoorbeeld tekeningen en grafieken maken, foto's bewerken, (eenvoudige) animaties voortbrengen, enz.

Extra functionaliteiten

De mogelijkheiden voor de webdeveloper zijn er in het algemeen sterk op vooruit gegaan. Vb Betere aanspreekbaarheid van "Document Object Model " (DOM), vereenvoudiging Drag 'n drop, lokaal opslaan van data,  snellere laadtijden, Web Workers, extra attributen, nieuwe form fields, font-face (lettertype ondersteuning), enz.

Waar wachten we nog op?

Helaas ondersteunen nog niet alle browsers HTML 5. FindMeByIP zette de browsermogelijkheden eens op een rijtje. De meeste functionaliteiten zijn beschikbaar via Chrome en Safari. Firefox komt nog iets te kort op het gebied van CSS3.  Internet Explorer 8 (en <) heeft de trein helemaal gemist. IE ondersteund bijna geen enkel nieuwe feature van HTML5. Maar daar komt met IE 9 (volgens Microsoft) verandering in. Helaas surfen de meeste gebruikers nog altijd met Internet Explorer (zie blog bericht: Browser mogelijkheden). We zullen nog even moeten wachten om HTML5 in de praktijk te gebruiken.

Van zodra de browsers dit ondersteunen zullen webdesign trendsetters, fora en JavaScript libraries zoals JQuery en Prototype zich hier ook meer op concentreren. Dit zal het implementeren van nieuwe features vereenvoudigen. Met als logisch gevolg dat er een snelle boost zal volgen van HTML5.

Ik heb zelf eens geëxperimenteerd met enkele basis html5 mogelijkheden. Je kan zonder veel moeite vernieuwende features maken. Er zijn ook al tal van voorbeelden online te vinden. Enkele voorbeelden:

• http://www.webatvantage.be/Tutorials/html5/
• Door middel van de cavas tag kan je een 3-D tetris game maken
• Nee dit is geen flash, maar javascript!
• Safari heeft enkele spectaculaire applicaties gemaakt om HTML5 (en Safari) te promoten.

Heb je zelf een HTML5 applicatie gemaakt? Of heb je een spectaculair voorbeeld online gevonden? Deel ze dan zeker met ons via een reactie!

Hoe schat je de overlevingskansen van flash in eenmaal html5 geïntegreerd is?

Vanaf wanneer zou jij HTML5 integreren op je website?

jQuery Quicksand

gepost op Donderdag 24 juni 2010 door Inge

Hier bij Webatvantage werken we graag met jQuery voor het verzorgen van animaties op een website.
Een jQuery applicatie kan net dat ietsje extra toevoegen aan webdesign. Het oogt mooi en zorgt doorgaans voor een verhoogde functionaliteit (en dus gebruiksvriendelijkheid) van een website. jQuery plugins waar we vaak mee werken zijn:

• FancyBox (Bekijk een voorbeeld op de website van Rogge Juweliers.)
  FancyBox is een hulpmiddel voor het weergeven van afbeeldingen, html-inhoud en multi-media in een Mac-stijl 'lightbox' dat verschijnt over de inhoud van je website.
• jSuggest (Bekijk een voorbeeld op de website van Interza.)
  jSuggest is een geadvanceerde auto-complete functie voor een input field.
• Nivo Slider (Bekijk een voorbeeld op de website van Bovo Zwembaden.)
  Nivo Slider is een coole image slideshow met vorige en volgende buttons en met meerdere knappe transitiemogelijkheden.
• jCarousel Lite (Bekijk een voorbeeld op de website van Dama.)
  jCarousel Lite is een afbeeldingen carousel. Voor tekst én afbeeldingen gebruik ik meestal de jFlow slider.
• Lazy Load (Bekijk een voorbeeld op onze portfolio pagina.)
  Met deze plugin worden afbeeldingen pas gedownload wanneer je er naar scrollt. De pagina zal sneller laden omdat de foto's die nog niet zichtbaar zijn niet worden gedownload.

Voor de webshop van Scarpo, een winkel die gespecialiseerd is in de verkoop van allerhande lederwaren, ben ik eens gaan spelen met het relatief recent ontwikkelde Quicksand script.

Functionality meets beauty!

Quicksand filtert en ordent items met mooie shuffelende bewegingen. Op de webshop van Scarpo kun je zoeken op merk of artikel. De integratie van de Quicksand applicatie zorgt ervoor dat je de producten in de desbetreffende categorie dan ook nog eens kunt filteren op de rubrieken dames, heren, uniseks, topper en nieuw. Ook kun je de producten gaan rangschikken op naam en prijs.

Kortom kan de bezoeker van de webshop zo gemakkelijk zelf bepalen welke content hij te zien krijgt.

Credits gaan naar Jacek Galanciak alias Razorjack.
Neem een kijkje op de webshop van Scarpo voor een voorbeeld van de Quicksand applicatie.
Meer informatie over Quicksand en enkele demo's vind je hierzo.

Lazy load en preload

gepost op Donderdag 18 maart 2010 door Thomas

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

Lazy Load

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

Preload

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

Download pagina lazy load