jenst.se» HTML

Centrera vertikalt med CSS – på olika 5 sätt

admin — Thu, 15 Apr 2010 17:33:14 +0000

Att centrera innehåll vertikalt i en tabell är ganska enkelt. Att centrera innehåll vertikalt med CSS är lite värre. Det finns egentligen inget riktigt bra sätt att göra det på. Däremot finns det en hel del ”workarounds”. En webbplats som listat 5 olika sätt att centrera innehåll på är ”Lost in the Woods”.

Lost in the woods – vertical centering with CSS

Testa Javascript live online med JS Bin

admin — Mon, 01 Mar 2010 20:32:36 +0000

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å.

Krascha webbläsaren för IE6-användare

admin — Mon, 07 Dec 2009 20:49:24 +0000

Eftersom de flesta webbplatser fortfarande byggs för att fungera med IE6 används den webbläsaren fortfarande. Många webbutvecklare lägger ner ett enormt extra arbete för att få webbplatsen att fungera i IE6. Det beror på att webbläsaren inte fungerar väl med gällande CSS-standard.

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.

Lightbox / bildvisare – hela listan!

admin — Sat, 07 Nov 2009 17:39:27 +0000

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)

jQuery

MooTools

Prototype

Slutord

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

RSS-flöden för webbdesigners – hela listan!

admin — Sun, 01 Nov 2009 17:25:08 +0000

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

Webbdesign – Programmering och design

Slutord

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

Allt om typsnitt / fonter på webben

admin — Mon, 09 Mar 2009 20:28:21 +0000

Introduktion

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.

Text-egenskaper

Font-egenskaper

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:

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

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

Fonter / typsnitt till sIFR

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

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

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

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).

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

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.

Gratis Notepad++ Nu med FTP-stöd

admin — Fri, 18 Jan 2008 12:31:04 +0000

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.

IE8 följer standarden!

admin — Mon, 31 Dec 2007 12:13:47 +0000

Om du inte utvecklar för webben så kan du sluta läsa nu. I annat fall har jag en riktigt trevlig nyhet att dela med mig av.

En av de största irritationerna vid utvecklandet av webbplatser är att webbläsarna inte läser koden lika. Safari, Opera och Firefox brukar alla klara uppgiften väl men Internet Explorer har länge plågat oss webbutvecklare. Det beror bland annat på att boxmodellen inte tolkas enligt de standarder som finns uppsatta i IE.

Internet Explorer 8 klarar ACID2-testet

ACID2-testet är ingen standard men är ett test för att kunna se hur pass väl en webbläsare klarar att följa de standarder som finns. Prova din webbläsare!

Första länken går till testet, den andra till hur resultatet helst ska se ut. Jag har provat testet i Internet Explorer 6 och det var en total katastrof. Nästan lika stor katastrof var det i Internet Explorer 7.

Firefox 3, Safari 3 och Opera 9 klarar däremot testet utan fel. Enligt IEBlog ska alltså Microsoft slitit det senaste året med att få Internet Explorer 8 att klara testet. Efter mycket lång väntan verkar det äntligen som att Microsoft förstår vad vi webbutvecklare vill ha. Internet Explorer 8 väntas släppas som beta-version under första halvan av nästa år.

The Pinball Effect – Hover multiple elements

admin — Sun, 19 Aug 2007 19:51:02 +0000

This article is in english. A hover is often made by hovering only a text, or an image. What if you want to change multiple texts and images and the div container background by hovering, without getting errors when validating the code?

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.

Validera din hemsida

admin — Thu, 02 Aug 2007 18:51:55 +0000

För att inte hemsidan man skapar ska bära sig konstigt åt i olika webbläsare bör man validera den. Det är också en bra förebyggande åtgärd för att inte få problem i framtiden.

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.