Sajten blev också väldigt smal eftersom jag inte bara hade de fullstora datorernas skärmar i åtanke, utan ville presentera innehållet så rent som möjligt även på telefoner och multimediaplattor. Sajten renderas perfekt och ser helt underbar ut i Google Chrome och strax efter kommer (hör och häpna!) Internet Explorer 9. De övriga läsarna har lite svårt att rendera typsnitten så där perfekt mjuka som jag vill ha dom, men det är egentligen en petitess.

Det är fortfarande en del saker som ska göras och kommentarerna är i stort sett oförändrad jämfört med tidigare version. Där har jag även planer på att byta ut WordPress standardkommentarer mot någon annan tjänst. Där har ni nog bättre koll än mig så jag tänkte höra med er vilken ni tycker jag ska använda. Vilken är enklast att implementera och mest användarvänlig?

Annars så tycker jag själv om det nya temat och administrationen har fått sig en rejäl uppfräschning som gör det enklare för mig att skriva inlägg vilket jag hoppas kommer att resultera i en ökad skrivlust. Jag tar gärna emot all typ av feedback.

Ja just det, den klassiska före/efter bilden serveras här.

Skuggor

En funktion som används flitigt redan idag och även här på bloggen är skuggor. Man kan använda skuggor på texter och på boxar, det är två olika definitioner och dom ser ut såhär:

Rundade hörn

En annan funktion som också används väldigt mycket är möjligheten att runda hörnen på blockelement. I dagsläget stödjer inte Internet Explorer eller Opera funktionen men det enda som händer i de webbläsarna är att hörnen blir fyrkantiga vilket inte ställer till det alltför mycket. Så här ser korthandsdefinitionen ut:

Notera att det krävs -moz och -webkit för att det ska renderas korrekt i webbläsarna. Den ursprungliga implementationen ska dock vara border-radius. I dagsläget är det ingen webbläsare som stödjer det, men det kommer i och med Opera 10.50 och troligtvis även i Internet Explorer 9. För att styra varje hörn individuellt skiljer det sig lite på Firefox och Webkit implementationen:

RGBA

RGBA är något som kan bli användbart då man kan styra opaciteten på ett element direkt i färgdefinitionen. Smidigt och enkelt blir det och så här definierar du det:

Övertoningar

För webkit baserade webbläsare (läs Safari och Google Chrome) kan man nu också göra övertoningar direkt i CSS. Definitionen ser ut såhär:

Multipla bakgrundsbilder

Det här är en funktion som jag själv har saknat väldigt mycket. Såhär ser det ut när man använder sig av flera bakgrundsbilder i samma element. Observera att detta för tillfället endast fungerar i webkit baserade webbläsare.

Det var en del av de nya funktioner som har kommit med CSS3 men det finns en hel uppsjö med fler smarta saker som i framtiden kommer att underlätta webbutvecklandet. Bland annat en massa nya smarta selektorer som gör det enklare att plocka ut de element man vill ha. Det har också tillkommit animationsteknik direkt i CSS:en. Finns det intresse så skriver jag givetvis ihop artiklar om dessa också.

Design

Det är väl rätt uppenbart att när man ska göra en webbsida så måste man ha en design. Hur ska det se ut, och hur ska jag placera ut mina element? Börja med att skissa ner dina tankar och ideér på ett papper och när du har hyfsad koll på ungefär hur det ska se ut så börjar du designa i ett grafiskt behandlingsprogram. Det finns en mängd program att använda och en del av dom som du kan använda är Photoshop, Gimp, Fireworks eller Illustrator.

HTML – strukturera innehållet

HTML (Hypertext Markup Language) är ett uppmärkningsspråk där man strukturerar och märker upp sitt innehåll. Jämför med när du skriver ett dokument i Word. Där markerar du en text och säger att det ska vara en rubrik, eller du kanske vill ha en punktlista utav några rader text. Då markerar du texten och trycker på knappen för att göra en punktlista i Word. Likadant är det med HTML, fast du måste själv skriva vad som ska vara vad.

I HTML använder man något som heter taggar eller element och det är via dessa som man märker upp informationen. Tex har jag texten ”Introduktion” som jag skulle vilja märka upp som en huvudrubrik, då skriver jag så här:

<h1>Introduktion</h1>

Med hjälp utav h1-taggen som står för header 1 markerar jag att all text som står innanför h1 taggarna ska vara en rubrik, svårare än så är det inte.

CSS – presentera innehållet

Med hjälp utav CSS (Cascading Stylesheet) bestämmer du färg och form på texter, listor, rubriker och allt annat som du har märkt upp med HTML. CSS:en har ingenting med innehållet att göra utan styr bara hur innehållet ska se ut och presenteras. Det är med hjälp utav den här tekniken som du får din webbsida att se ut som den design du utformat tidigare. Tex om jag skulle vilja göra rubriken som jag gjorde förut i röd färg kan jag skriva såhär:

h1 { color: red; }

Javascript – interagera med innehållet

Javascript brukar kallas för beteende lagret i en webbsida. Med hjälp utav Javacript kan du alltså få innehållet att bete sig på olika sätt när interaktivitet sker mot användaren. Tex när användaren klickar på en knapp på en webbsida så kan man via Javacript få någonting att hända med knappen eller ett annat element på sajten. Vi skulle kunna skriva såhär för att generera ett meddelande som visas för användaren:

alert("Det här meddelandet är genererat av Javacript");

Var observant på att det här var en mycket grundläggande artikel för dig som precis vill sätta igång och bygga webbsidor. Framöver tänkte jag gå igenom dessa tekniker lite djupare och mer detaljerat men till dess får du nöja dig med följande resurser:

Webbresurser för att börja bygga webbsidor:

• Webdesignskolan
• W3 Schools

Ifall html-koden ser ut såhär:

<div style="font-weight: bold;">
    Innehållet i den här diven kommer att vara fetmarkerat.
</div>

Så kan man fixa detta genom att i sin CSS skriva såhär:

div[style] {
   font-weight: normal !important;
}

Var dock uppmärksam på att detta inte stöds av IE6.