Page 1

webbstudio

SKAPA Nyheter, tips och tricks för dig som bygger själv

6 bra Firefoxtillägg för ILLUSTRATION JONAS ENGLUND

webbutvecklare BYGG UT DIN WEBBLÄSARE till en fullfjädrad webb-

utvecklingscentral. Med olika extensions, eller tillägg, till webbläsaren Mozilla Firefox får du den att göra saker du inte trodde var möjliga. HAR DU NÅGONSIN velat att på ett enkelt sätt kunna ta reda på vilken färg en bild har, eller exakt var på skärmen dina div-taggar ligger? Eller har du velat att med ett klick köra en hemsida genom ett trettiotal inspektionstjänster på en gång? Dessa funktioner är bara toppen på isberget av alla intressanta saker du kan göra med Firefox extensions. Dessa tillägg till webbläsaren Firefox är gratis att ladda ner och installera, och kommer garanterat att hjälpa dig med mycket som hör webbutveckling till. Här berättar vi om sex sådana tillägg: Colorzilla, View Source With, Lorem Ipsum Generator, Checky och Google

Pagerank Status, Web Developer Toolbar. Webbläsaren är ditt viktigaste redskap som webbutvecklare. Det kan låta uppenbart, men tänk en stund på det. Innan kodandet börjar surfar du runt och skaffar dig inspiration, under kodandets gång använder du webbläsaren för att kolla att koden du skriver fungerar, och efter produktionen för att felsöka och testa hemsidorna, samt för att regelbundet besöka dem och kolla så att allt står rätt till. I slutändan blir detta en rejäl massa surfande, och då är det bra att ha en webbläsare som är skräddarsydd för just dina behov. Här kom-

mer Mozilla Firefox och dess tilllägg in i bilden. Mozilla Firefox är många webbutvecklares älskling. Det finns många skäl till det. Säkerhet och korrekt visning av webbstandarder är välkända – men lite mindre kända är Firefox så kallade extensions eller tillägg. En extension är ett tilllägg till programmet som gör något utöver webbläsarens vanliga funktioner. Det finns extensions i alla möjliga former och smaker – för alla typer av surfare, inte bara webbutvecklare. De installeras med ett par klick, och på ett nafs har du fyllt din webbläsare med massor av nyttiga funktioner. Alla

extensions är fri mjukvara, vilket gör dem gratis att använda. Extensions laddar du enklast hem från respektive skapares sajter, eller från Mozillas centralsida för extensions, addons.update.mozilla.org/extensions/. Firefox varnar innan du laddar ner extensions, och kräver att du tillåter installering. Detta är en säkerhetsmekanism som resulterar i ett fält överst på sidan som informerar om detta. I det fältet finns en knapp som du kan klicka på för att lägga till sidan bland ”pålitliga källor”, och så är det bara att ladda ner tillägget.

Klicka på Tillåt och därefter OK. Efter detta måste du klicka på länken igen för att fortsätta installationen.

En varningsruta upplyser dig om att något installeras och ber om en sista bekräftelse. När installationen är klar måste du starta om Firefox för att tillägget ska synas i webbläsaren.

SERGEJ KOTLIAR, WEBBUTVECKLARE PÅ HYSTRIX WEBDESIGN

Så här installerar du extensions

Gå in på en sajt som har den extension du är intresserad av. Välj Installera för Firefox.

76

INTERNETWORLD NR 6 2005

Ett gult fält överst på sidan talar om att Firefox av säkerhetsskäl har stoppat installationen. Klicka på Redigera inställningar för att installationen nästa gång ska tillåtas.


Skicka dina tips och synpunkter till Johanna Gisslén, johanna.gisslen@idg.se

COLORZILLA

1 Slipp hålla färgkoderna i huvudet Pipettverktyget från bildbehandlingsprogram som Photoshop har flyttat in i webbläsaren. Med denna extension kan du busenkelt snappa upp färger överallt i webb-

läsarfönstret. Zoom-verktyg finns också för perfekt pixelprecision. Storlek: 81 kB Pris: Gratis

KLICKA PÅ PIPETTIKONEN i nedre vänstra hörnet av webbläsarfönstret för att aktivera Colorzilla.

MUSEN HAR NU FÖRVANDLATS till ett korshår, pipettikonen får den färg som pixeln musen pekar på, och statusfältet visar färgkoden både hexadecimalt och i vanligt RGB-format. Klicka en gång och färgen kopieras automatiskt till din urklippshanterare, färdig att klistras in där den behövs.

www.iosart.com/firefox/colorzilla/

CHECKY EXTENSION

4 Kontrollerar din sida åt dig När du är klar med din hemsida är det bra att testa den. Exempelvis så kan du kontrollera hur optimerad sajten är för besökare med olika typer av funktionshinder, hur bra den fungerar i mindre vanliga webbläsare, hur snabbt den kan laddas ner via modem och så vidare. Det finns många olika ”testningstjänster” på nätet som gör jobbet åt dig. Checky är ett tillägg som låter dig köra flera sådana tester på en gång. Det är ett enkelt och smidigt sätt för dig att hålla reda

på hur välgjord din sajt egentligen är. Antalet testningstjänster som finns i Checky är väldigt många. Så många att det blir svårt att hålla reda på dem. Vissa fungerar bättre än andra, vissa gör allt automatiskt, medan andra kräver att du matar in hemsidans adress igen. Det senare är lite av ett minus, men kompenseras av att Checky är så omfattande. Storlek: 83 kB Pris: Gratis checky.sourceforge.net

VIEW SOURCE WITH

2 Visar källan där du vill ha den Visst är det jobbigt att webbläsaren väljer vilket program den ska visa källa i? I Internet Explorer är det Notepad, i Firefox är det något slags specialfönster, men inget öppnar källkoden i just din favoriteditor – förrän nu. Med View Source With-tillägget kan du ställa in vilket program du vill läsa källkoden i, och ditt val dyker upp som ett alternativ bredvid Visa källa. Storlek: 29 kB Pris: Gratis dafizilla.sourceforge.net/viewsourcewith/

LOREM IPSUM GENERATOR

3 Så du slipper skriva “bla bla bla” När man designar en sida, och vill kolla hur den ser ut med lite innehåll brukar många webbutvecklare enligt en gammal typografisk tradition fylla sidan med en text på latin som kalllas Lorem Ipsum. Med denna extension kan du enkelt generera sådaGENERERA ENKELT SNYGGA och professionella Lona texter, bestämda ef- rem Ipsum-texter med detta verktyg. ter antal tecken, ord eller Storlek: 9 kB hela stycken. Kanske inte den vikPris: Gratis tigaste av funktioner, men absolut mozmonkey.com/loremipsum/ en kul grej att ha till hands!

I INSTÄLLNINGSRUTAN som du hittar i Firefox-menyn under Verktyg-CheckyPreferences kan du välja och vraka bland de många tjänster du kan köra din sida mot.

STARTA TESTNINGEN genom att välja Verktyg-Checky-Start Agent. De olika tjänsterna öppnas då som flikar i ditt webbläsarfönster.

GOOGLE PAGERANK STATUS

5 Hur högt rankas sajten i sökmotorerna? Google ger alla sidor en ranking, på en skala från 1-10. Denna ranking kallas Pagerank. Ju högre ranking en sida har – desto bättre placeringar får den bland sökresultaten. Om du får länkar till din hemsida från sidor med hög Pagerank är det väldigt bra, för då får i sin tur din hemsida högre Pagerank. De andra sökmotorerna har snarlika ranking-system, så detta tillägg ger ett bra hum om hur bra en viss sida rankas i alla sökmotorer. Denna extension visar just vilken Pagerank en sida du besöker har. Den ligger smidigt i nedre högra hörnet, lätt synlig, men utan att för den skull störa ditt surfande. Ett otroligt smidigt och enkelt

HÅLL KOLL PÅ hur bra dina och andras sidor rankas i sökmotorer. Google PageRank Status ger dig, med hjälp av en siffra från 1 till 10, enkelt hum om hur sökmotoroptimerade sidorna är.

sätt för dig att hålla reda på hur bra dina sidor rankas i sökmotorerna, och har du den igång under en längre tid kanske du till och med lär dig se vilka sidor som är sökmotoroptimerade. Storlek: 18 kB Pris: Gratis www.tapouillo.com/ firefox_extension/

> INTERNETWORLD NR 6 2005

77


webbstudio

SKAPA

WEB DEVELOPER TOOLBAR

6 Verktygsfältet som gör grovjobbet åt dig Jättemånga småfunktioner, den ena mer användbar än den andra, förpackade i ett lätthanterligt verktygsfält som du har var du än surfar – det är Web Developer Toolbar. Aldrig mer behöver du läsa igenom långa stycken html-kod för att ta reda på hur en funktion fungerar, eller vilken css som används för ett visst objekt. Mängden funktioner kan vara överväldigande vid första åsynen. De

VERKTYGSFÄLTET Web Developer Toolbar som det ser ut när det är installerat.

Hämta information ur sidor på ett smidigt sätt

FÖR ATT SE ALLA COOKIES en sida sparar på din dator behöver du bara gå in på Information - View Cookie Information.

Om du vill se vilka cookies en sida sparar på din dator, eller vilka httpheaders den skickar, ut kan du få sammanställda tabeller på detta via Information - View Cookie Information respektive Information - View Response Headers. Lika lätt får du sidans javascript sammanfattad på ett enda ställe med hjälp av funktionen Information - View Javascript. Med hjälp av detta behöver du aldrig mer leta ihjäl dig i olika inkluderade fi-

ler efter det lilla javascriptet du vill kika på. Om du vill veta mer om dina bilder kan du med alternativet Images exempelvis ställa in så att storlekarna för bilderna visas bredvid respektive bild. Samma sak kan göras med filnamn och filstorlek. Du kan även med ett lätt klick markera de bilder som inte har några alt-attribut, det vill säga text som beskriver bilden för alla som av olika anledningar inte kan se bilden.

sträcker sig mellan allt ifrån att ge olika former av information om en hemsidas delar, till att tillfälligt ändra webbläsarens inställningar för att se vilken skillnad de gör på en sida. Du kan kolla hur sidan skulle se ut om den besöktes med en mobiltelefon, och testa hur den ser ut i 640x480 gångers upplösning. Du kan även redigera sidans css och se hur den uppdateras i takt med att du skriver, och mycket mycket mer. Redan efter en veckas användning kommer du undra hur du någonsin klarade dig tidigare! Nedan ger vi fem exempel på funktioner som finns i verktygsfältet. Storlek: 112 kB Pris: Gratis www.chrispederick.com/work/firefox/webdeveloper/

Markera objekt En av de mest användbara funktionerna i Web Developer Toolbar är att du kan märka ut olika element på sidan. Tänk dig att du försöker anpassa storleken på en div-tagg så att den precis passar in på ett visst ställe på sidan. Ett enkelt trick brukar vara att du tillfälligt sätter en färgglad kant runt den, för att lättare se exakt hur stor den är. Med funktionen Outline kan du med några klick ha satt kanter runt just de objekt du vill se, utan att göra några ändringar i koden. Otroligt smidigt, och hjälper verkligen när du ska få fram en bra css till sidan.

ANGE VILKA TAGGAR eller objekt du vill märka upp, och välj vilken färg deras kanter ska få. Genom att gå in på Outline - Outline Custom Elements får du upp denna ruta.

Stäng av funktioner för att testa I menyn Disable har du möjlighet att stänga av delar av din webbläsare. Varför? Jo, genom att stänga av till exempel cookies kan du testa hur din hemsida fungerar för en användare med cookies avstängda. Genom att stänga av stilmallar kan du se hur din hemsida ser ut i en jättegammal webbläsare, eller hur den presente-

78

INTERNETWORLD NR 6 2005

ras för synskadade. Finns all information med? Bra! Finns den inte med? Mindre bra. Vidare kan du snabbt stänga av javascript för att kolla om sidan fortfarande fungerar – alla sidor bör fungera utan javascript, det behövs för sökmotorer, synskadade och folk som helt enkelt stängt av det.

SÅ HÄR SER DET UT efter att du klickat OK. Alla bilder på sidan har fått röd kant och alla länkar har fått grön kant.


Se sidan uppdateras samtidigt som du kodar

MED HJÄLP AV EDIT CSS som du hittar under CSS - Edit CSS kan du redigera en sidas css och se hur sidan förändras samtidigt som du skriver. Du behöver aldrig mer göra proceduren Skriva kod - Spara - Uppdatera i webbläsaren. Du kan skriva koden, se hur det ser ut, och när du är nöjd klistra in i din riktiga css-fil. På skärmdumpen har vi ändrat länkfärgen till grön för att se hur det skulle se ut.

I menyn CSS kan du logiskt nog styra sådant som har med sidans css att göra. Du kan välja att visa sidans stilmallar som om sidan vore en skärm, utskrift eller mobil enhet. Om du till exempel vill se hur en hemsidas skapare gjort de där snygga övergångarna i menyn,

eller något annat häftigt kan du välja CSS, sen View Style Information och därefter bara peka på den del av hemsidan du är nyfiken på. All css som rör den delen kommer då presenteras för dig i en snygg sammanfattning.

Hur ser fönstret ut i 800x600? Att man ska testa hur hemsidan ser ut i olika upplösningar har vi alla fått lära oss. Nu finns en genväg även till den delen av produktionen. Du går helt enkelt in i menyn Resize och väljer där enkelt vilken storlek du vill att skärmen ska ha. Med ett klick har Firefox-fönstret blivit 800x600 stort, och med ytterligare två klick har du även kollat sidan i 640x480 och 1024x768. Nu behöver du inte längre ändra datorns upplösning, eller sitta och pilla dig fram till det rätta värdet genom att dra kanten på fönstret åt olika håll.

Läs mer på webben Firefox hemsida http://www.mozilla. org/products/firefox/

Samlingssida för extensions https://addons.update. mozilla.org/extensions/

Extension s

Hör gärna av di g till Internetworld om du ha r kommentarer angående de extensions som tas upp, oc h tipsa gärna om egna favorit extensions till sigge @hystrix.se

INTERNETWORLD NR 6 2005

79

Webb  

Webb it internet

Read more
Read more
Similar to
Popular now
Just for you