linkopingsstadhus.se

Frilansuppdrag gjort för reklambyrån Access i Linköping. Uppdraget innefattade kodning i HTML/CSS av en PSD-fil (Photoshop) och programmering utav ett kontaktformulär för kunden Linköpings Stadhus.

Ett intressant uppdrag och kul att genomföra även om det var mycket trix med att få ihop själva designen kodmässigt. Det svåraste var den stora bakgrundsbilden på själva sida vilket jag löste genom att klippa den i mindra delar och lägga ihop den i css till de olika elementen på sidan.

I det här uppdraget var det även viktigt att sidan skulle anpassas till flera webbläsare och även IE6. Jag hittade verktyget IETester som jag fick stor nytta av när jag skulle testa sidan i IE6 och IE7. Eftersom transparenta png-bilder inte fungerar i IE6 fick jag använda mig utav ett fix DD_belatedPNG, gjort i JavaScript. Men hjälp av detta fick sidan samma utseende som i de senare webbläsarna.

Programmerandet utav kontaktformuläret blev det lite problem med då jag först gjorde det i php. Tyvärr hade inte webbhotellet som sidan ligger på någon support eftersom det var en Windows server. Det blev att hitta ett mindre kontaktformulär i ASP. ASP var något som jag enbart hade tittat på men jag hittade att om man använde sig utav ASP.NET så kunde jag välja att programmera i t ex Visual Basic .NET istället vilket jag gick en kurs i samtidigt. Med hjälp av lite tutorials på nätet fick jag tillslut ihop ett kontaktformulär. Valideringen i kontaktformuläret är gjort med JavaScript.

Jag tackar Access för detta intressanta samarbete!

1. Web Page Analyzer

Web Page Analyzer

För att veta hur bra och framförallt snabb sin webbsida laddar är denna sidan ett måste. På den här sidan får du enkelt upp vad du ska dra ner på och vad du kan optimera. Sidan behandlar allt från bilder, css till skript. Du kan även se hur fort din sida laddar i olika hastigheter och utifrån det se vad du behöver optimera på.

Övrigt på sidan finns det många bra tips på hur du kan enkelt optimera din sida så att den laddar snabbare.

Jag skulle inte kopiera förslagen som ges t ex för optimering av html och CSS för det känns som man kan göra bättre själv och ibland har jag sett att det inte är så stor skillnad i alla fall. CSS optimering gör man enklare genom andra online verktyg.

2. W3C Validator

W3C Validator

Detta är något som alla webbutvecklare både veta vid det här laget att testa sin sida i W3C:s validator. Den här använder jag nästan dagligen när jag utvecklar och kodar sidor. Enkelt är det att hitta sina fel när man även kryssar i Show Source innan man validerar. Då får man upp den genererade koden från sin sida och kan klicka på felet för att komma dit i koden. Bra när man inte har tid att sitta och leta efter radnummer.

Som tips är att titta på raden före som validatorn klagar på. T ex om det är ett fel på rad 8 så kolla på rad 7 ifall det saknas något tecken där.

3. CSS Sprites generator

CSS Sprites Generator

Denna har jag använt mycket på senaste tiden när jag ska skapa en css-sprite. Även om den är begränsad så gillar jag enkelheten och man får snabbt resultatet. Läs mer om CSS Sprites

(Såg att CSS-tricks.com hade en annan generator för css-sprites. Jag har ännu inte testat denna. Om du har testat den lämna gärna en kommentar om hur den är. http://spritegen.website-performance.org/)

4. XML Sitemaps Generator

XML Sitemaps

När det kommer till att skapa webbkartor så använder jag ytterligare en generator som producerar en webbkarta i olika format. Formaten:

• okomprimerad webbkarta (xml)
• komprimerad webbkarta (xml.gz)
• ROR (xml)
• HTML (html)
• Text format (txt)

Mycket bra när man inte har tid att lägga upp en egen webbkarta. Dock krävs det att man har kvar en copyright på webbkartan men det tycker jag inte är så mycket med tanke på tiden man sparar. Om man ändrar sin sida måste man generera en ny webbkarta.

5. Color Scheme Designer 3

Color Scheme Designer 3

En av de första sidorna jag besöker när jag ska designa en ny webbsida. Här kan man på ett enkelt sätt se vilken kompletteringsfärg grundfärgen som man har bestämt för designen har. Det finns möjlighet att välja följande färgscheman:

• Mono
• Complement
• Triad
• Tetrad
• Analogic
• Accented analogic

Om du inte skulle gilla färgerna som produceras kan du själv justera färgerna, både i mättnad och ljus. Om du inte orkar att justera färgerna kan du välja att slumpa fram ett färgschema.

Du kan förhandsgranska hur färgerna kan se ut på en ljust och mörkt design. Om du ska ska ta hänsyn till färgblindhet kan du även förhandsgranska detta. Det bästa är att du kan exportera färgkoderna som en färgpalett till t ex Photoshop eller GIMP.

6. PX to EM conversion made simple

PXtoEm

Som verktyget heter så är det ett enkelt verktyg för att konvertera pixlar till em. Jag har börjat använda den här mer och mer då jag velat testa att skippa pixlar helt i en design. Ett annat skäl är att em är användarvänligt och inte är lika låst som pixlar.

Du väljer din textstorlek för body på din sida. Sedan konvertera verktyget om det automatiskt till em. För att det här ska fungera ska du sätta din body-size till det procenttal som du valt i första kolumnen. T ex 75% sätter 12px till 1em.

body {
    font-size: 75%;
}

Verktyget erbjuder även att du kan spara resultatet som css, ”All the CSS you need to get started using EMs”.

I tredje kolumnen kan du själv välja ett pixeltal för att konvertera om det till em.

7. Lorem Ipsum – Lipsum generator

Lorem Ipsum

En hel webbsida ägnad åt texten Lorem Ipsum som används för att fylla ut en design med text. På den här sidan har du möjlighet att generera valfritt antal paragrafer, ord, bytes och listor.

Jag tycker den är användbar när jag både designar i Photoshop och kodar i Notepad++.

Det var några utav de verktyg som jag använder vid webbdesign och utveckling. Har du fler tips så lämna en kommentar!

• CSS Sprites: Image Slicing’s Kiss of Death (A List Apart)
• The Mystery Of CSS Sprites: Techniques, Tools And Tutorials (Smashingmagazine)
• CSS Sprites: What They Are, Why They’re Cool, and How To Use Them (CSS-tricks)

Jag tänkte gå igenom vad jag gjorde med CSS-sprites på den här sidan. Men först…

Vad är CSS-sprites?

CSS-sprites är inte nytt utan har funnits ett par år. Jag trodde från början att det hade att göra med JavaScript att göra i och med namnet sprite men det har ingenting att göra med JavaScript utan är bilder ihopbakade till en bild. Anledningen till att man lägger ihop alla bilder till en är att dra ner på laddningstiden av sidan och minska antalet HTTP-requests, dvs. för varje bild så måste webbläsare kontakta servern för att bilden ska kunna visas på webbsidan.

T ex till den här sidan använder jag några ikoner för kategori, kommentar, rss mm.

Alla dessa kan man lägga ihop till en bild och med hjälp av CSS-selektorn background-position kan man flytta bilden och visa endast den önskade ikonen. Med background-position anger man bildens startpunkt.

Under sökningen på Google fick jag även fram ett verktyg som gör automatiskt en CSS-sprite av de bilder man laddar upp, CSS Sprites generator. Dessutom får man varje ikons position i bilden.

CSS Sprites generator

Detta är dock ett väldigt enkelt verktyg och passar bra om man inte har för många bilder. Jag märkte att verktyget la ikonerna ovanpå varandra så om man hade haft 50 st ikoner så skulle bilden blivit en rätt lång bild. Då ska man nog fundera på att göra sina egna CSS-sprites i t ex Photoshop eller GIMP.

CSS-sprite

När man har sin CSS-sprite och vet varje ikons position är det dags att använda sig av bilden och applicera det på sin webbsida. I mitt exempel visar jag hur jag positionerade ut ikonerna vid kategori och kommentar under inläggets rubrik.

Ett litet tips är att kopiera positionerna man får från CSS sprites generator till en .txt-fil och spara den i en mapp på sin dator ifall man råkar glömma bort positionerna eller klicka bort webbsidan.

Utav min CSS-sprite fick jag följande positioner.

CSS sprites generator - Resultat

Men först lägger jag en grundkod som jag kan bygga på.

<dl>
    <dd class="category"><a href="#">Webdesign</a></dd>
    <dd class="comments"><a href="#">Lämna en kommentar</a></dd>
</dl>

Här skapar jag en definition lista. Varje element i listan har jag gett en särskild klass (kan även använda id). Dessa används när jag lägger till ikonerna.

För att detta ska fungera nu måste vi lägga en bakgrundsbild på <dd>-taggen, dvs. den CSS-sprite som vi skapade i generatorn. Så i stilmallen blir koden följande för <dd>

dd {
     background: url(images/css-sprite.png) no-repeat;
}

Härnäst ska vi lägga till första ikonen. För att visa ikonen för kategori tittar vi vilken plats den ligger på i bilden. Därefter går vi och tar samma plats i våran lista över bakgrundspositioner och skriver in de nummer som står där. (I mitt exempel ligger ikonen på 6:e plats)

dd.category {
    background-position: -16px -251px;
}

Med samma metod lägger vi till ikonen för kommentarer.

dd.comments {
    background-position: -16px -204px;
}

Nu återstår det att flytta texten åt höger så att texten inte ligger på ikonen. Det gör vi genom att lägga till padding (utfyllnad) på taggen <dd>.

dd {
   background: url(images/css_sprite.png) no-repeat;
   padding: 2px 0 2px 20px; /* (top, right, bottom, left) */
}

Eftersom ikonerna hade ursprungligen en bredd på 16px så valde jag att ge en vänsterutfyllnad på 20px så att det blir lite mellanrum mellan text och ikon.

För att elementen i listan ska ligga bredvid varandra istället för under så lägger jag till

display: inline;

på taggen <dd>.

Slutkoden blir följande:

dd {
    background: url("images/css_sprite.png") no-repeat;
    padding: 2px 0 2px 20px;
    display: inline;
}
dd.category {
    background-position: -16px -251px;
}
dd.comments {
    background-position: -16px -204px;
}

Resultatet av denna kod blir följande:

Resultat

Jag hoppas att detta har gett dig lite hjälp i att förstå hur CSS Sprites fungerar och hur man gör för att använda sig utav tekniken.

Nu var det ett tag sen jag skrev. Det har varit mycket att göra och jag har inte mått så bra privat så därför har det inte blivit något inlägg.

Idag har jag börjat lite smått att rita på en pirat som jag tänkte lämna in till en Contest på DeviantArt. Jag har upptäckt att jag har rätt svårt för att skissa i Photoshop eller snarare med min wacom. Sedan är min handled inte på topp just nu så jag får lätt ont i den om jag sitter för länge. Men jag ska försöka lära upp mig lite på just att skissa och använda min wacom i Photoshop. Jag har tittat på ett par videos från YouTube för att se hur andra skissar.

Jag håller även på med en annan skiss fast den ska jag inte säga så mycket om.

Det var har väl inte hänt så mycket mer än att jag har haft mycket att göra. Jag har tagit tag i starta eget. Jag var på Skatteverkets informationstillfälle den 18 november och det var verkligen nyttigt. Fast det blev mycket att ta in då det höll på i drygt 2,5 timmar. De berättade allt från de olika företagsformerna till moms och budget. Jag fick också en del information med mig hem som jag ska läsa lite mer på. Informationstillfället är verkligen att rekommendera för er som ska starta eget. Jag fick en bok från min mamma om starta eget så den ska jag också börja beta av när jag hinner.
Jag är ny medlem på sidan driftigt.nu som jag tycker verkar riktigt bra när man ska leta kontakter och om man behöver information om starta eget. Jag kom i kontakt med en kvinna där som jag ska träffa senare i december för att prata mer om om vi ska starta eget ihop. Det tycker jag skulle vara kul att få arbeta tillsammans med någon. Vi får se hur det går.

Inspirationsvideo:

Just det, jag har lagt upp ett nytt designförslag, Sunset Yoga. Jag försökte på mig en annan sorts design vilket gjorde det svårare att koda så jag är väl sådär nöjd med resultatet. Det enda som inte stämmer är footer då jag tänkte att bakgrundsbilden liksom på header skulle gå över hela sidan istället för enbart i mitten. Men jag fick inte det att fungera riktigt. Det var svårt att hitta tutorials om det också då de flesta var enklare designförslag eller så var det enbart hur man designar i photoshop.

Sunset Yoga

Jag försöker även göra om min portfolio till en dynamiska sida med php då jag finner detta enklare vid uppdatering av sidan. Jag funderar även på om jag ska flytta min workshop till arbeten istället. Men än så länge så får den ligga där den ligger.
Jag testade med att lägga upp RSS:en från min blogg till startsidan på portfolion. Det var lite knep och knåp då jag inte fick det att fungerar till en början. Jag hittade scriptet magpie som gör om RSS-koden till enkel HTML. Till en början kunde den inte hitta adressen jag la in. Jag testade med flera olika då det är 3 stycken olika rss adresser som wordpress använder.  Till slut fick jag det att fungera med Atom. Men jag var lite osäker på det och testade igen. Då helt plötsligt började länken till rss2 fungera. Så det är lite ostabligt script men jag har läst att flera använder det och är nöjda. Jag hoppas jag kan göra om sidan snart.

Det är mycket man vill göra men ibland har man varken lust eller tid. Nu måste jag lägga mig då jag ska upp vid 4:00 imorgon och åka till Finspång för lektion i webdesign.

Sov gott allesammans därute!