Wallmander.net

När jag en gång i tiden började med webbutveckling var det förutom HTML och CSS var det en teknik som jag uppskattade, det var Adobe Flash. Med Flash kunde man, till skillnad mot CSS och HTML, göra allt från roliga animeringar till spel och mycket mer. På min hemsida hade jag en hel sektion med bara spel som man kunde spela och som bara var gjorda i Flash. Detta lockade en hel del besökare. Enligt ett statistik-script som jag hade var det i genomsnitt 50 unika besökare om dagen, vilket då var helt okej för en liten hemsida. På den tiden fanns det till och med hemsidor helt gjorda i Flash och som dessutom var riktigt snygga och väl designade med massor av effekter som vilken 10-åring som helst skulle kunna bli imponerad av. Det jag inte tänkte på då men jag som utvecklare idag tänker på är att Flash har en akilleshäl, eller kanske snarare flera. Några är dem är:

• Finns inte Flash Player installerat hos slutanvändaren, då är det kört. Speciellt en hemsidas viktiga mekanismer (ex. navigering, innehåll, kontakt formulär)  är helt eller delvis beroende av Flash. Hur ska en användare kunna navigera på en hemsida utan något att ha någon navigation?
• Kräver mycket CPU. Sätt igång en Youtube 1080p-hd videoklipp på en netbook, och jämför det med vanlig 1080p klipp med valfri fil-format förstår ni precis vad jag pratar om.  Även för den minst kräsna video-tittaren märker att en bild spelas i 25 bilder per sekund mot 1-2 bilder per sekund eller kanske 3-4 om man har tur. (För en film ska flyta på bra krävs minst 25 bilder per sekund i uppspelning).
• Ej SEO-vänligt. Google kan inte ta tillvara på innehållet i Flash-animation eller Flash-applikation.
• Bandbreddskrävande. Gå in på Aftonbladet eller annan webbplats med mycket Flash-reklam på en seg uppkoppling förstår nog de flesta vad jag pratar om.

Men varför används så mycket Flash om det har så många svagheter? Helt enkelt för att det inte har funnits någon värdig ersättare till tekniken. Men nu är någonting på gång och som många kanske redan vet är det HTML5 och CSS3 som jag talar om. Förutom att Youtube kör tester med HTML5 finns det en del andra som håller på med att leka med den ännu inte helt utvecklade tekniken CSS3. Några exempel:

Klicka på bilderna för att se demo.

Notering: Många av exemplen kräver i skrivande en webkit-webbläsare (ex. Google Chrome och Safari) för att fungera fullt ut. I vissa exempel fungerar Firefox och/eller Opera, dock är det bara att glömma Internet Explorer då det inte ens har ordentligt standardiserat stöd för CSS 2.1. Har du Internet Explorer, byt webbläsare.

CSS3 Spotlight

CSS3 Rocket

CSS3 AT-AT

Webbaserat Quake II med bla. HTML5 och WebGL

Nedan är ett klipp av ett datorspel som spelas direkt i webbläsaren. Man kan säga att den är en avancerad ”hemsida”.

(Projektets hemsida)

Apple iAd

Apple använder HTML5 (och CSS3?) för att visa annonser för deras kommande annonsnätverk Iad.

(Den intressanta biten kommer först ca 4 min och 25 sec in i klippet)

Även om HTML5 och CSS3 inte är moget ännu samt det är få webbläsare som än så länge stödjer teknikerna någorlunda ser man redan nu potentialen. Med funktioner så som att spela musik och video direkt i webbläsaren utan codecs eller mediaspelare, samt kunna använda användarens dator för att spara information i databas är i sig bara en bråkdel av nyheterna i teknikerna som kan revolutionera hur vi ser på webben. Äntligen har vi något fullgott alternativ som kan ersätta och utrota Flash en gång för alla!

Var kan jag läsa mer om HTML5 och CSS3?

För den som inte orkar googla har jag tagit fram några matnyttiga länkar.

HTML5

Engelska Wikipedia HTML5 – Mycket matnyttig information om bakgrund m.m.
Svenska Wikipeida HTML5 –  Svensk formation om HTML5, dock inte lika mycket information som den engelska versionen.
Drive Into HTML5 – Mycket bra gratis online book som lär dig om HTML5

CSS3

10 tips till sidor som lär dig CSS3