Verktygen som hjälper dig animera med HTML5

HTML5 omtalas ofta som Flash-dödaren, och även om det kanske är att hoppas på för mycket så kommer HTML5 alldeles säkert ersätta mycket av det som Flash används för idag.

Men för att du som webbkreatör ska ha möjlighet att börja jobba på allvar med den nya standarden så krävs att det kommer bra verktyg som gör arbetet hanterbart.

Adobe själva har såklart insett att det inte finns någon poäng med att krampaktigt hålla fast vid Flash som enda alternativ, utan istället anpassa sig till framtiden och fortsätta tjäna pengar även efter Flash eventuella död . De har därför redan presenterat prototyper av två verktyg som ska hjälpa dig att skapa HTML5-upplevelser på ett enkelt sätt:

• Flash till HTML-konverteraren är ett verktyg för att konvertera befintliga Flash-animationer till HTML5 helt automatiskt.
• Med Edge ska du kunna skapa animeringar, övergångar och viss logik med hjälp av ett enkelt gränssnitt. Allt sparas sedan i snygg HTML-kod.

Självklart är inte Adobe ensamma om att vilja vinna din gunst när det gäller att bygga HTML5-animationer. Uppstickaren Sencha var troligtvis först ut med en skarp produkt när de för ett par veckor sedan släppte Sencha Animator – men fler lär komma.

I dagsläget fungerar HTML5 endast i de webbläsare som är baserade på Webkit, det vill säga Safari, Chrome, Android-telefoner och iOS-enheter (iPhone, iPad, iPod Touch). Men de kommande versionerna av Firefox och Internet Explorer är inte så långt borta, och då är alla stora webbläsare med på HTML5-tåget.

Läs mer om HTML5 och CSS3 i tidigare blogginlägg

* Begreppet HTML5 inte är helt korrekt använt ovan då det snarare är en samling av tekniker och standarder som gör ovanstående möjligt. Men i det här inlägget får det för enkelhetens skull agera som ett gemensamt namn för rubbet.

CSS3 och HTML5 – webbframtiden är ljuv

CSS3 och HTML5 kommer att innebära ett stort framsteg för webben i stort och dessutom göra livet som webbdesigner mycket trevligare.

Några av de många nyheterna i HTML5:

• Data kan lagras lokalt i en databas, vilket gör att du även utan uppkoppling kan komma åt och redigera t ex Google Docs-dokument (Google har en egen lösning för detta redan Google Gears).
• Videouppspelning direkt i webbläsaren utan plugins som Flash, Silverlight eller annat.
• Formatera text (t ex fetstil, kursiv, färg) utan tunga javascriptlösningar som idag krävs för att skapa textredigering i stil med den som används när du t ex redigerar inlägg i WordPress.
• Canvas-element gör det möjligt att skapa avancerade gränssnitt utan t ex Flash eller Silverlight.

Som du kan se kommer många av de saker som idag kräver tunga och plattformsberoende plugins finnas direkt i alla webbläsare.

Nyheterna i CSS3 gör att ännu större del av formen kan placeras direkt i CSS istället för i bilder. Det blir på så sätt mindre data att ladda och mycket enklare att anpassa sidan för olika kanaler (storlekar på datorskärmar, mobiltelefoner, utskrift mm).

Några av nyheterna i CSS3:

• Skuggor. Det går fint att lägga till skuggor på text eller andra objekt direkt i koden.
• Rundade hörn. Det krävs inte längre ett gäng bilder för att göra en ruta med rundade hörn.
• Opacitet. Äntligen en enhetlig standard för att göra färger och objekt halvtransparanta.
• Övertoningar. Tona från en färg till en annan utan att blanda in Photoshop.
• Fler bakgrundsbilder. Varje objekt kan innehålla fler än en bakgrundsbild.
• Kolumner. Webbläsaren klarar automatiskt av att hantera kolumner, inget mer manuellt brytande av flödande text.

Trots att standarderna inte är spikade än så har de stora webbläsarna börjat implementera många av komponenterna i både CSS3 och HTML5. Undantaget är (som vanligt?) Microsoft Internet Explorer som har väldigt svagt stöd på båda fronterna i version 8. Som tur är är Explorer 9 på god väg och där lovar Microsoft att istället ligga i framkant (kolla in betan här).

Eftersom det fortfarande är många webbläsare som inte stödjer en stor del av de nya standarderna så kan det vara bra att använda dem med måtta. Använder du rundade hörn och skuggor på vissa objekt på din webbsida får du leva med att de blir kantiga och skugglösa för en ganska stor del av besökarna än så länge.

Det finns massor av roliga och bra exempel på nätet vad de nya standarderna kan prestera. Här följer ett par (många av dessa kräver Apple Safari eller Google Chrome för att fungera i dagsläget – ett perfekt läge att prova en ny webbläsare om den du kör idag inte har hängt med i utvecklingen  ):

• Jeff Batterton har “ritat” en Iphone med hjälp av CSS3, helt utan bilder.
• Apple har i sin kamp för HTML5 tagit fram ett antal exempel på hur öppna webbstandarder kan ersätta t ex Flash.
• Spelbar demo av det klassiska spelet Wolfenstein 3D.
• Fallande löv
• Tweets flyger omkring som bollar (kan inte förklara, klicka på dem för att förstå ).
• Sketchpad knäcker MS Paint vilken dag som helst.

Hur mycket använder du dig av HTML5 och/eller CSS3 idag, och till vad?

Bli osårbar!

Rubriken är tyvärr omöjlig att leva upp till, men man kan ju göra sitt bästa i alla fall. Det finns gott om rövare runt om i världen som gärna vill komma åt uppgifter på din dator, använda din hårddisk, processorkraft eller bandbredd för sin egen vinning, eller helt enkelt bara för att förstöra.

Det lättaste sättet för dessa laglösa att göra det är att utnyttja kända säkerhetshål i program och plugins på din dator som snackar med internet. Senast nu i veckan har det (igen) upptäckts säkerhetshål i Flash. Ett grymt läge för de illvilliga eftersom Flash finns installerat på mer eller mindre varenda internetansluten dator. Så det första du bör göra när du läst klart detta inlägg är att se till att du har senaste versionen av Flash installerad (när du ändå är inne på Adobes sida kan du kontrollera att du även har senaste Adobe Reader, eftersom det också har kända säkerhetsproblem).

Se alltså alltid till att ha rustningen på dig genom att hålla ditt operativsystem, dina program och plugins uppdaterade. (Anti-virusprogram och brandvägg nämner jag inte ens, eftersom det är  självklart att du redan har det installerat )

Till sist så vill vår driftavdelning tipsa om ett rss-flöde där det rapporteras om aktuella sårbarheter som upptäcks:

• http://www.securityfocus.com/rss/vulnerabilities.xml

Ha det gott och surfa säkert!