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.
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.
Som tur så finns det en hyffsad lösning på båda problemen. Google web fonts erbjuder nästan 200 typsnitt som vem som helst får använda fritt, och som dessutom fungerar i de flesta webbläsarna:
Det fungerar dessutom fint i de modernare mobiloperativsystemen som iOS 4.2+ och Android 2.2+.
<link href='http://fonts.googleapis.com/css?family=Loved+by+the+ King&v2' rel='stylesheet' type='text/css'>
h1 { font-family: 'Loved by the King'; }
Så, nu är det fritt fram för nya typsnittet
).font-family: 'Loved by the King', Arial, Verdana;
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:
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 kommer att innebära ett stort framsteg för webben i stort och dessutom göra livet som webbdesigner mycket trevligare.
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).
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?
Ett blogginlägg blir så mycket trevligare med en snygg och talande bild i anslutning, och en hemsida blir så mycket fräschare med snygga ikoner och grafik. Internet är fullt av material, men för att stå på rätt sida av lagen kan du inte bara ta första bästa bild och återanvända på din sajt.
På sidor som Istockphoto.com hittar du proffsiga bilder, illustrationer, filmsnuttar, ljud och flash-animationer till riktigt bra priser. Men vill du komma ännu billigare undan – t o m helt gratis – finns det ytterligare alternativ som ofta håller lika hög kvalitet som betalalternativen.
Här kommer två användbara tips:
Var noga på att hålla koll vilka regler som gäller för respektive bild/ikon. I vissa fall är de fritt fram att använda för kommersiellt bruk i andra fall bara i sammanhang där det inte finns något vinstsyfte.
Har du fler tips för den som vill förgylla sin blogg eller webbsida? Dela med dig i kommentarerna.
Att hamna högt upp på sökmotorernas listor är otroligt viktigt då en väldig stor del av all trafik på internet drivs den vägen (hur många gånger om dagen “googlar” du själv på något?).
Sökmotoroptimering är en hel vetenskap, men här kommer i alla fall några enkla tips att börja sin klättring upp för sökmotorlistorna med:
Det finns såklart otroligt mycket information på nätet om sökmotoroptimering, eller SEO (Search Engine Optimization) som begreppet kallas på engelska, men ska man tipsa om något så är det väl om den största av de storas tips om det hela. Här kan du hitta Googles riktilinjer för webbansvariga.
Dessutom finns det massor för företag som inriktar sig på att hjälpa kunder med sökmotoroptimering, men istället för att jag ska tipsa om några så tycker jag du ska göra en sökning efter dem. De som hamnar högst upp i din sökning lär ju vara duktiga på sitt jobb
Att skriva HTML-formaterade e-postmeddelanden för e-postutskick och liknande kan vara något av ett gissel. Stödet för HTML i e-postklienterna är nämligen högst varierande och ens meddelande kan således se helt olika ut i olika e-postklienter om man inte tänker till.
Men – är detta viktigt och varför ska jag bry mig? Läs vidare 
Webbläsaren Firefox är hemsidebyggarens bästa vän. Med sin närmast oändliga mängd insticksprogram finns det en hel del godbitar du bör känna till. Nedan listar jag mina absoluta favoriter – ett gäng “must haves” för alla som vill effektivisera sitt arbete, eller bara få en djupare förståelse av hur en hemsida är uppbyggd.
För att din hemsida skall fungera problemfritt i både dagens och framtidens webbläsare så måste den validera – dvs följa W3Cs standarder, varav en av de viktigaste är HTML. Ett enkelt sätt att kontrollera detta är med insticksprogrammet HTML Validator. Varje gång du besöker en sida så kontrollerar den huruvida koden är korrekt och visar dig resultatet med en liten ikon i webbläsarens nedre högra hörn. Dubbelklicka på ikonen för att få fram källkoden och markeringar om eventuella fel.
Insticksprogrammet Web Developer erbjuder dig en hel flora med smarta funktioner för att undersöka hur hemsidor är uppbyggda och hur de beter sig. Bland annat låter den dig validera JavaScript, ändra webbläsarens fönsterstorlek till vanliga skärmupplösningar, markera ut HTML-objekt när du för muspekaren över dem, visa sidan utan CSS, utan bilder eller utan JavaScript, stänga av cookies och mycket, mycket mer.
Firebug låter dig inspektera och i realtid editera din HTML-kod, CSS-kod och JavaScript direkt genom webbläsaren. Bland annat kan föra muspekaren över en hemsidas element och direkt få fram den del i HTML-koden som byggt upp det elementet, med tillhörande CSS-inställningar. Gillar du inte vad du ser kan du ändra koden och direkt se resultatet. Felsökning deluxe och ren magi.
Loopia är en del av Vismakoncernen · Prisbelönade ekonomistyrning- och CRM-system.
Copyright © Loopia AB 1999 - 2012 · Org.nr: 556633-9304
