Etikettarkiv: html5

Vilka delar av HTML5 och CSS3 vågar du använda?

Det finns mycket härliga och efterlängtade funktioner i HTML5 och CSS3, men även om stödet i de flesta moderna webbläsarna är stort så är det långt ifrån hundraprocentigt. Dessutom vill du troligtvis att sajten ska se ok ut även i något äldre webbläsare.

I många fall räcker det att vara medveten om hur sajten ser ut i en äldre webbläsare (det kanske inte är hela världen om knapparna inte har runda hörn för vissa besökare).

För att du snabbt och enkelt ska se vilka webbläsare som har stöd för vad finns det några riktigt bra webbtjänster:

En av alla webbtjänster som hjälper dig att välja vilka delar av HTML5 och CSS3 som du vågar använda.

  • When Can I use… har kompabilitetstabeller för CSS, HTML, SVG med mera, även för mobila webbläsare.
  • HTML5 Please hjälper dig även att implementera alternativ och reservlösningar för de webbläsare som ej har stöd.


Vilka delar av HTML5 och CSS3 vågar du använda när du designar sajter, dela gärna med dig i kommentarerna?

Dela: Facebooktwittergoogle_pluslinkedinmail

Muse och Edge – webbdesignerns bästa vänner?

En formgivare och en utvecklare är inte ofta samma person… eller ja, tyvärr ÄR det alldeles för ofta samma person på webben. Som det ser ut idag måste webbdesignern lära sig åtminstone HTML och CSS för att hanka sig fram. Men det är något som Adobe vill råda bot på med programmet “Muse”. Till skillnad från t ex Dreamweaver ska du som formgivare inte behöva bry dig om en enda rad kod, och det som kommer ut ska vara kompatibelt med alla vanliga webbläsare, och samtidigt utnyttja CSS3 och HTML5 där det är möjligt.

Det låter ju bra så långt, tyvärr känns risken stor att det kommer med för stora kompromisser, men det återstår att se. Muse finns redan idag i en gratis beta-version, så du kan provköra kostnadsfritt ända fram till den skarpa versionen släpps (tidigt 2012 lovar Adobe).

Under den korta tid vi har hunnit prova Muse så har vi fått uppfattningen att gränssnittet är trevlig att arbeta med, och är du van att arbeta med Adobes designprogram för print, Indesign, så går det ganska snabbt att komma in i arbetsflödet. Du kan förutom alla “vanliga” verktyg t ex arbeta med sidmallar och formatmallar på ett sätt som liknar Indesign. Helt utan inlärningskurva är det dock inte eftersom mycket trots allt är webbspecifikt, och därmed inte finns i Indesign.

Ett nytt grepp med Muse är prissättningen, istället för att du köper en licens, betalar du en löpande kostand på $15/månad eller $180/år så länge du vill använda programmet.

Edge – Adobes egna Flash-dödare

Utöver Muse så håller Adobe också på att utveckla verktyget Edge, som kan sägas vara lite en “Flash-dödare” (även om de själva säger att Flash och Edge kompletterar varandra). Målet är att kunna producera webbsidor, webbspel, webbannonser på ett sätt som liknar Flash, men som istället bygger på HTML5, CSS3 och Javascript. Även Edge går att ladda ner och prova gratis.

Har du provat Muse och/eller Edge? Kommentera gärna och berätta vad du tycker.

Dela: Facebooktwittergoogle_pluslinkedinmail

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.

Dela: Facebooktwittergoogle_pluslinkedinmail

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  😉 ):

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

Dela: Facebooktwittergoogle_pluslinkedinmail