Om man bara ska testköra Javascript-kod kan det kännas onödigt att behöva skapa filer, mappar och den HTML-kod som krävs. Det finns snabbare sätt. Ett sätt är att kör JS Bin.

När man skrivit sitt Javascript trycker man bara på ”Output” och scriptet körs. Smidigt! Man kan även spara koden för att sedan dela med sig av den till andra som behöver den. Det kan vara ett utmärkt sätt att hjälpa andra eller få hjälp av andra på.

Uppmana användaren att uppdatera webbläsaren

Att låta webbplatsen visa ett meddelande som uppmanar användaren att uppdatera webbläsaren, är ett sätt att påverka användarna att byta webbläsare, eller version. Det går att lösa genom att varningen bara visas för exempelvis IE6 eller IE7.

Krascha IE6

En annan, kanske mer effektiv metod är att helt enkelt låta webbläsaren krascha om IE6 används. På WP Recepies finns ett exempel på hur man enkelt gör detta med endast 3 rader kod.

Krascha IE7

Inte heller IE7 följer CSS-standarden speciellt bra vilket skapar frustration bland många webbutvecklare. Det finns sätt att även krascha IE7. Hur man gör finns att läsa på Crash IE. Endast en rad kod krävs.

Att bygga tillägg till Firefox är inte så lätt som det skulle kunna vara. Med Jetpack blir det hela betydligt enklare. Här kommer en video som visar hur enkelt det är att bygga extensions med Jetpack.

Redigera bilder direkt i webbläsaren

Ett tillägg som antagligen kodats med Jetpack är Pixlr. Det klarar något som jag aldrig tidigare sett. Man kan redigera bilder i webbläsaren utan att behöva ladda ner dem till hårddisken. Det räcker med att högerklicka på bilden och välja att redigera den. Grymt mycket enklare än att spara ner filen för att sedan starta program som Photoshop och sedan leta upp och ladda in den sparade bilden.

Mer läsning

• IDG – Så enkelt hackar du Firefox
• IDG – Det här kan du göra med Jetpack
• IDG – Så ska Firefox få tio gånger fler utvecklare
• IDG – Nu blir det enklare att utveckla tillägg till Firefox

Uppdaterad: 2010-04-15

Popeye2 tillagd

Introduktion

När man skapar webbplatser och ska visa bilder är det en fördel att använda en bildvisare, eller en sk. ”lightbox”. Det gör att man inte lämnar sidan.

Lightbox / lightboxar

Lightboxarna bygger på olika ramverk och de är sorterade efter det ramverk de är byggda på. Används exempelvis jQuery till allt annat kan det vara en fördel att hitta en bra lightbox för jQuery. Det sparar på laddningstiden.

Använder inget ramverk (så vitt jag vet)

• Clearbox
• iBox
• FancyZoom
• Floatbox
• Greybox
• Highslide
• Leightbox
• Lightbox Plus
• Shadowbox
• Smooth Gallery
• Triptracker
• YUI Lightbox
• WeebBox

jQuery

• Colorbox
• DOM Window
• Facebox
• Fancybox
• FancyZoom jQuery (min favorit)
• TopUp
• PiroBox
• Popeye
• Popeye2
• Slimbox 2

MooTools

• Bumpbox
• Milkbox
• Multibox
• Slimbox

Prototype

• Lightbox 2
• Lightbox Gone Wild
• Lightview
• LightWindow
• ModalBox

Slutord

Om jag saknar någon bra lightbox, lägg en kommentar så kikar jag på den.

Uppdaterad: 2010-01-31

Marcofolio.net tillagd

Introduktion

Här kommer en lista på några av världens bästa RSS-flöden för webbdesigners.

CSS

• CSS3.info (RSS Feed)
• CSS-Tricks (RSS Feed)

WordPress

• Digging into WordPress (RSS Feed)
• WordPress Planet (RSS Feed)
• WpRecepies (RSS Feed)
• WPscoop (RSS Feed)

Webbdesign – Programmering och design

• CatsWhoCode (RSS Feed)
• Design Shack (RSS Feed)
• FavBrowser (RSS Feed)
• Marcofolio.net (RSS Feed)
• PelFusion (RSS Feed)
• Position Absolute (RSS Feed)
• Six Revisions (RSS Feed)
• Smashing Magazine (RSS Feed)
• Think Design (RSS Feed)
• W3Avenue (RSS Feed)
• WeFunction (RSS Feed)

Slutord

Känner du till fler bra RSS-flöden inom samma områden, lämna gärna en kommentar.

Den här artikeln innehåller både information och tjänster för att underlätta bruket av typsnitt, främst i webbmiljö. Har du någon värdefull relevant information som inte tas upp i den här artikeln? Lämna en kommentar.

Typsnitt med stilmallar (CSS)

Är du nybörjare och vill lära dig allt om typsnitt med CSS, läs på W3Schools.

Alla egenskaper på en och samma rad

Man kan skriva in en ny rad för varje egenskap men man kan spara både tid och plats genom att skriva in allt på en och samma rad.

h1 {
   font: bold 14px/18px Arial;
}

Ovan visas h1-taggen med fet stil, 14 pixlar hög,  ett radavstånd på 18 pixlar samt att den tillhör Arial-familjen.

Standard-typsnitt

Som webbdesigner kan man ibland bli frustrerad över begränsningen som finns i HTML / CSS när det gäller valet av fonter. Det går att använda vilka typsnitt som helst, men de valda typsnitten visas bara om typsnittet finns installerat på användarens datorn. Därför kan det vara bra att veta vilka typsnitt som folk i allmänhet har installerade på sin dator för att få webbplatsen att se likadan ut på alla datorer.

Windows XP standard-typsnitt

De flesta använder idag Windows och har man många typsnitt installerade kan det vara svårt att veta vilka som var installerade från början.

wpdfd.com har gjort en utmärkt lista över de typsnitt som finns förinstallerade på Windows XP. Eftersom listan är skapad som en bild kan man se hur dessa typsnitt ser ut även om man inte skulle ha dessa installerade.

Vanliga typsnitt på Windows och OSX

Om man inte är nöjd med tjänsten ovan så kan man prova Ampsoft – Common Fonts istället. I mitten på sidan finns de vanligaste typsnitten listade, både i normal och fet stil. Dessa står som text och vill man som Windows-användare se hur typsnitten ser ut i OSX så finns det skärmdumpar längre ner på sidan för olika operativsystem med olika konfigurationer.

Ersätt typsnittet med Flash

sIFR

sIFR är en metod för skapa texter och rubriker för webbplatser, i andra typsnitt än de som följer med datorn.

En fördel med metoden är att om Javascript eller Flash saknas så visas de standard-typsnitt som finns på datorn. Det innebär att metoden är helt sökmotorvänlig.

Nackdelen är att sIFR kräver att både Javascript och Flash är installerat på surfarens dator för att det ska fungera.

WP sIFR – WordPress plugin

Använder du WordPress kan du prova WP sIFR plugin, vilket gör det hela betydligt enklare. Det är bara att installera och sedan aktivera den sIFR-font som ska användas.

Inga programmerings-kunskaper krävs men det kan vara bra att ha använt stilmallar (CSS) tidigare.

sIFR med Font Burner

För att förenkla skapandet av kod för sIFR finns Font Burner. Det hela sker i tre steg:

1. Hitta ett typsnitt.
2. Kopiera den inbäddade koden.
3. Klistra in koden på din webbplats.

Font Burner finns också som plugin till WordPress och heter Font Burner Control Panel.

Fonter / typsnitt till sIFR

• Isare – sIFR Flash Fonts Library
• sIFRvault

Ersätt typsnittet med Javascript och PHP

Typsnitten som finns på datorn laddas in från början och sedan ersätts de med hjälp av Javascript. Det gör att om Javascript inte är aktiverat visas de lokalt installerade typsnitten istället. Även sökmotorer och textläsare kommer då utan problem kunna läsa dem.

Facelift

Facelift är ett populärt skript som har många exempel, utförlig dokumentation och ett forum. De har också en blogg där man kan följa utvecklingen.

Använder du WordPress så kan du istället använda ett plugin som kallas för Facelift Image Replacment.

Andra metoder

• Typeface
• TTFTitles WordPress Plugin

Förhandsgranska texten i realtid

CSS Type Set

Det kan vara smidigt att ha något verktyg för att testa olika text-attribut och hur de påverkar helheten. CSS Type Set har ett både enkelt, effektivt och snyggt verktyg.

Man skriver in den text man vill använda. I mitt fall har jag använt en dummy-generator för att skapa texten, som också beskrivs i den här artikeln. Man behöver inte klicka på ”Generera” som på många andra tjänster, utan texten förändrar sig direkt när man ändrar på någonting.

Andra tjänster

• CSS Type
• Type Tester
• Font Tester
• CSS TXT

Bläddra bland typsnitt

På webben

My Fontbook

Det finns många program för att lista fonterna som ligger på hårddisken. Att visa typsnitten direkt i webbläsaren kan vara smidigt. Man slipper då installera ett program för det. My Fontbook har just en sådan tjänst.

Tjänsten är enkel att använda och ser ut att ha tagit inspiration från OSX, men tjänsten fungerar lika bra i Windows.

Font Shaker

Ett annat sätt att visa typsnitten som ligger på hårddisken är att köra Font Shaker. Likt My Fontbook får man upp alla typsnitt som är installerade. Skillanden är att den här tjänsten är byggd i Flash och visar upp typsnitten i 3D.

Andra Tjänster

• Font Picker
• Flipping Typical

I ett vanligt program

Trivs man bättre med att lista fonterna genom ett installerat program listar jag här några stycken som fungerar bra (i Windows).

• AMP Font Viewer
• The Font Thing
  

Portaler med typsnitt

Dafont

En av världens mest populära webbplatser för typsnitt är Dafont. Det är en mycket lättnavigerad webbplats och det kommer hela tiden in nya typsnitt. Det finns möjlighet att testa sin egen text med de typsnitten som finns.

Vill man förlita sig på den stora massan så finns det en topp 100-lista. För att hitta ett specifikt typsnitt kan man använda deras sökfunktion.

Urbanfonts

En uppstickare som kommer starkt är Urbanfonts. En av de stora skillnaderna mot Dafont är att Urbanfonts använder sig av Ajax i stor utsträckning. Det gör att sidan inte behöver laddas om igen ifall man ändrar några inställningar. Även här finns möjligheten testa sin egen text med valt typsnitt.

Andra portaler

• Font Squirrel

Generera dummy-text

Som webbdesigner så finns det situationer då man behöver text för att testa hur den kommer bete sig tillsammans med exempelvis en stilmall. Att skriva ihop en tillfällig text om ingenting är ofta slöseri med tid.

Lorem Ipsum

Lorem Ipsum är en bra metod för att generera en dummy-text. Här är ett exempel på hur texten kan se ut:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius nisl eu ligula. Sed tincidunt, arcu in pellentesque euismod, arcu odio tincidunt neque, ut imperdiet eros arcu a velit. Proin magna. Nam nibh.

Dummy Lipsum – Firefox tillägg

Använder du Firefox kan du istället installera  Dummy Lipsum. Den genererar dummy-text på samma sätt som

Lorem Ipsum, men det går snabbare att komma åt, då den läggs till i navigeringsfältet.

Andra dummytext-generatorer

• Lorem Ipsum
• Malevole

Konvertera pixlar till em

Många webbdesigners använder sig av pixlar när de sätter storlek på typsnitten i stilmallen. Många vet hur stor en pixel är och av den anledningen är det lätt att göra det till en vana. Vissa webbläsare kan inte skala om storleken på texten om den angetts i pixlar så därför är det rekommenderat att den skrivs till formatet ”em”.

Em Calculator och PXtoEM

En bra tjänst för att konvertera pixlar till em är Em Calculator. En annan tjänst är PXtoEM. De är väldigt olika så det kan finnas fördelar att prova båda.

Övrigt

Lek med texter i Wordle

En spännande tjänst är Wordle. Man skriver in den text man vill använda och klickar på en knapp.

Beroende på vilka inställningar man använder får man olika effekter.

Efter lite testande fick jag fram den här vackra skapelsen (till höger).

Slutord

Självklart finns det både mer information och fler tjänster därute. Saknar du någonting? Skriv en kommentar så kikar jag på det.

Jag kommer att hålla liv i den här artikeln och uppdatera den när jag får fatt i fler bra tjänster eller information.

• Download: WP ShowHide Elements
• Last updated: 2008-01-31
• Version: 0.1
• Tested with: 2.3.1

Install

1. Upload the FOLDER ‘wp-showhide-elements’ to the /wp-content/plugins/
2. Activate the plugin ‘WP ShowHide Elements’ through the ‘Plugins’ menu in admin

Usage

1. Create a div to show / hide. Add an ID and name it whatever you want.
2. Create a anchor and add the ID of your div into wp_show() function.

<p id="mytest">my text</p>
<a href="javascript:void(0);" onclick="wp_showhide('mytest')">my link</a>

Possible future upgrades

• Support for multiple elements to be closed in one click
• Choice on what specific pages to include the Javascript

Bug report

If you have found a bug I want to know about it so I can fix it.

• Tell me your version number, WordPress version and what browser you use.
• If you suspect a collision with another plugin, tell me what plugin you suspect, or send me a list with suspected plugins
• Have you tested this plugin on another WordPress-version and can confirm that it works? Let me know!

Known bugs

• No bugs reported so far

Contribute / Feedback

The best way to contribute today is to spread the word, link to this page, blog about WP ShowHide Elements or give me feedback. All kinds of feedback are helpful to me. Suggestions and bug report are also welcome.

Vilket är den bästa editorn för att koda hemsidor i? Vilket är det bästa FTP-programmet? Personligen tycker jag det smidigaste är om man kan kombinera dessa olika program för att slippa växla fönster. Här tar jag upp några program i jämförelse och mina erfarenheter av dem.

Visual Studio – För Microsoft-användare som har datorkraft och pengar

För de som programmerar ASP eller ASPX är Visual Studio antagligen en arbetsmiljö man troligen knappt kan klara sig utan. Den största fördelen jag finner med Visual Studio är att man kan skriva en punkt och den ger sedan förslag på vad man kan skriva. Nackdelen är att det kostar pengar om man ska ha hela miljön och drar en del av datorns resurser.

Dream Weaver – Bra tanke men känns lite väl omständigt ibland, kostar pengar

Jag har tidigare provat på Dream Weaver och tyckt att tanken varit bra. Det går att växla mellan kod-läge och design-läge. Det finns även inbyggt så att man kan skicka filerna till ett FTP-konto. Den delen blev jag dock aldrig helt klok på, onödigt krångligt. Programmet tar ett litet tag att ladda in och kostar dessutom pengar.

Notepad++ – Gratis, enkelt och nu med inbyggt FTP-program

Den senaste tiden har jag övergivit det ena programmet efter det andra som har kostat pengar, bytt ut dessa mot gratisprogram istället. För den som tycker gratis är gott är Notepad++ riktigt lysande. Det laddas in blixtsnabbt och man arbetar väldigt snabbt i det, delvis på grund av ett enkelt interface men framför allt för att man har flikar att växla mellan.

En nyhet som jag blivit mycket glatt överraskad över är att det nu finns inbyggd FTP. Det påminner därför lite om Dream Weaver som också har det stödet. Jag suckade innan jag skulle testa hur det fungerade, på grund av dåliga erfarenheter, men jag kunde inte bli nöjdare. Det var bara att mata in FTP-uppgifterna för att skapa sin FTP-profil och koppla upp. Det som händer är att man får upp ett träd, liknande utforskaren. För att ladda en fil kan man dubbelklicka på den och trycker man CTRL + S (spara) så sparas filen direkt till FTP-servern, helt utan att den behöver mellanlagras på hårddisken. Givetvis kan man spara på hårddisk också om man önskar.

Nackdelar då? Jodå, det finns några. En av dem är att Notepad++ saknar en bra funktionskomplettering vid punktnotation som jag tidigare nämnt att Visual Studio har. Det finns en sådan funktion även i Notepad++ men den är inte i närheten så bra och enligt mig inte ens användbar. En annan nackdel har länge varit att programmet inte har så snygg design, men detta har på senare tid blivit bättre. Deras hemsida är dock en total katastrof.

The answer is The Pinball effect and I use it in my blog. The method is made in Javascript, but it works without it which makes it completely SEO-friendly. You might need some basic XHTML / CSS skills to use it.

The image below is an image to demonstrate the effect. The first image is when the mouse pointer is not over the div tag element. I choose a blue title text, a grey button and a grey background image.

The second image is when I hold the mouse over the div tag element. The title text, the image border, the button and the background image is now changed to different magenta colors.

To easy implement the code you might need a simple code example. You can find the complete instruction at Digital Web Magazine.

W3C – standarden för XHTML och CSS

W3C har satt upp en standard, ett regelverk för hur hemsidor ska skrivas för att fungera korrekt. För att provköra koden används W3C Validator. Där skriver man in adressen till hemsidan och klickar på ”Check”. Därefter får man en lista på de fel man har och finns inga fel så får man en grön bock.

HTML Validator – Ett Firefox tillägg

Är man Firefox-användare finns det smidigare metoder. Det jag använder är ett tillägg som heter HTML Validator. Under tiden man surfar visar det om sidan man besökt innehåller fel eller ej, grön, gul eller röd beroende på hur allvarligt fel det är. Så länge bocken är grön håller man sig på banan, mycket smidigt. För att vara helt säker, bör man ändå använda W3C Validator då HTML Validator inte alltid hittar alla fel.

WebXACT – Går på djupet

Vill man testköra sidan för andra typer av fel, t ex felaktiga länkar så är WebXACT att rekommendera. Den går verkligen på djupet och hittar väldigt mycket.

Testkör för alla webbläsare

Det viktigaste är kanske ändå att testköra hemsidan i de olika webbläsare som finns. Har man PC så kan man ladda ner Opera, Safari, Firefox och Internet Explorer. Internet Explorer är det som brukar ställa till mest problem eftersom Microsoft envisas med att inte följa standarden, men det mesta brukar gå att lösa.

IE NetRenderer – Webbplats som ritar hemsidan i IE5.5, IE6 och IE7

Sitter man med Internet Explorer 7 och samtidigt vill testköra sidan i Internet Explorer 6 kan det bli svårt. Då är det tur att IE NetRenderer finns. Den ritar upp hur hemsidan ser ut i IE5.5, IE6 eller IE7.

Standarden följs dåligt

De flesta hemsidor på internet följer inte standarden, inte alla webbläsare heller, även om det blir bättre. Efter denna artikel hoppas jag att det blir ännu bättre.