Etikettarkiv: HTML

Full koll på CSS-koden med Espresso för Mac

Som webbdesigner är det viktigt med ett bra verktyg för att redigera och hantera CSS-kod. Det finns oändligt med alternativ men en favorit som jag använt under lång tid är CSS Edit för Mac, numera inbakad i den mer kompletta kod-editorn Espresso.


Det fina med Espresso är, framför allt om du har två skärmar, att du ser ändringarna på sajten direkt medan du grejar i CSS-koden. Du kan också hitta vilka stilregler som påverkar ett speciellt objekt på sidan genom att klicka på det. Lite som webbläsarpluginet Firebug fast med fördelen att du kan spara dina ändringar direkt.

Några schyssta features i Espresso:

  • Se dina CSS- och HTML-ändringar på webbsidan samtidigt som du gör dem
  • Visuella verktyg för att ange CSS-kod (även CSS3 som skuggor, toningar etc)
  • Synka och publicera filer mot ditt FTP-konto automatiskt (om du önskar)
  • Smidigt att växla mellan olika filer som berör webbsidan medan du redigerar
  • Färgkodning, automatisk komplettering för HTML5, CSS3, Javascript, PHP, Python mm.

Programmet kostar $79 (ca 500 kr), men du kan ladda ner och prova programmet gratis i 15 dagar.

Vilket är ditt favoritverktyg för CSS-kodning (gärna tips för Windows och Linux)?

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

En arbetsvecka med Safari 4 Beta

I början av förra veckan släpptes beta-versionen av Safari 4, Apples egna webbläsare. Som alla vet är Apple synonymt med design och marknadsföring. Följaktligen meddelade man att de största nyheterna med Safari 4 är att man nu får en 3D-vy över ens mest välbesökta webbplatser när man öppnar en ny flik, samt att man kan bläddra bland sina bokmärken i Cover Flow, precis som på ens iPod, iPhone, iTunes, [insert any product name that starts with an ”i” here].

Cover Flow

Detta är ju trevligt, men det är också funktioner som är kul att se en, två gånger, sen stänger man av dem och börjar surfa. Så vad finns det för verkliga nyheter i Safari som man faktiskt har praktisk nytta av? Detta är min högst subjektiva lista från de fem första dagarna med Safari 4 Beta som standardläsare.

FlikarPrecis som i Google Chrome har webbsidesflikarna flyttats till fönstrets översida och namnlisten på programmet tagits bort. Detta gör att ytterligare skärmyta frigjorts till förmån för hemsidesinnehåll, mycket trevligt på ett datorsystem som inte anammat konceptet fullskärmsläge.

Inbyggd Google-sökning med automatisk föreslagning av sökord.

Bättre sökning i adressfältet. Borta är dropdown-listen, nu får man istället riktigt rapp hjälp med potentiella adresser när man börjar skriva in önskad URL.

Som gammal Firefox-användare är det skönt att man nu kan hoppa mellan tabbar med Ctrl-Tab istället för Kommando-Shift-Pil.

För oss som designar webbsidor och lagt till Develop-menyn (aktiveras under Advanced-fliken i inställningarna) så finns nu massor av uppdaterade godbitar i Safaris Web Inspector, något som jag direkt hade nytta av när vi felsökte lite JavaScript i bloggen och då enkelt kunde exekvera JavaScript-funktioner direkt från Web Inspectorns kommandotolk. Dessutom finns det finfina verktyg för debugging och profiling av JavaScript och inspektion av element i ens HTML-kod (ungefär som en vackert designad version av Firebug för Firefox).

Web Inspector

För de som gillar webbstandarder (och vem gör inte det?) så är det kul att äntligen se en officiell version av en webbläsare som helt och hållet klarar av Acid3-testet (vad är det?). Nedan (från vänster till höger) ser vi som jämförelse Firefox 3.0.6, Google Chrome, Internet Explorer 8 Beta och Opera 9.63 och så sist men inte minst Safari 4 Beta.

Acid3 i andra webbläsare

Acid3 i Safari 4 BetaPrecis som Firefox 3 har Safari nu full page zoom, dvs om du zoomar in eller ut på en sida så är det inte bara texten som påverkas, utan hela sidan zoomas korrekt utan att den trasas sönder av ”felaktig” storlek på text. Precis som det ska vara med andra ord.

Enligt Apple exekverar Safari 4 Beta JavaScript sex gånger snabbare än IE8 och fyra gånger snabbare än Firefox 3.1 och det märks att den är riktigt rapp – skönt.

Finns det då något som jag inte gillar med den nya versionen av Safari? Ja, av någon anledning pajjar kontrollpanelen i WordPress (2.7.1) när man ska lägga till en länk i sitt inlägg, något som funkade utmärkt i gamla versionen av Safari, men jag förväntar mig en fix när som helst. 🙂

Har du provat 4:an? Något du tycker jag glömt tagit upp här ovanför eller har du andra synpunkter på Safari? Dela med dig bland kommentarerna.

Dela: Facebooktwittergoogle_pluslinkedinmail

Design av HTML-brev

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 mer

Dela: Facebooktwittergoogle_pluslinkedinmail

XML – vad är det?

XML, eller eXtensible Markup Language, är en specifikation för att specialdesigna så kallade märkspråk, som du sedan kan använda till att spara och dela data på ett strukturerat och välformaterat sätt.

Vi har tidigare berört XML i artikeln HTML vs XHTML. Men varför har det blivit så populärt och hur kan du använda det? Läs mer

Dela: Facebooktwittergoogle_pluslinkedinmail

Anpassa din hemsida för skrivaren

Alla som byggt en hemsida från grunden vet att själva formgivningen görs med CSS medan själva innehållet hanteras av HTML (eller XHTML). Det många inte tänker på är att CSS inte är bundet till formgivning just för skärmen, utan låter dig formge även för andra media.

Ett av dessa är skrivaren, något som kan vara mycket intressant för just hemsidesskapare. Läs mer

Dela: Facebooktwittergoogle_pluslinkedinmail

Firefox-plugins för utvecklare

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.

HTML Validator

Ladda hem.

002-html-01.pngFö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.

Web Developer

Ladda hem.

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

Ladda hem.

002-firebug-01.pngFirebug 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.

Dela: Facebooktwittergoogle_pluslinkedinmail