Gabbes Dansskola

Ett mindre frilansuppdrag med fokus på WordPress där jag fick utveckla mina kunskaper i temabyggning och att skapa plugin i WordPress.

Uppdraget innebar framförallt att översätta deras nuvarande design till ett tema för WordPress. De frågade också efter möjligheten att få ihop en kursanmälning inom WordPress och därför tillverkade jag pluginet courseManagement (CM). Med detta plugin fick de möjlighet att hantera sina kurser i administrationen och samtidigt hantera de anmälningar som kommer in via ett specialbyggt registreringsformulär.

Jag lärde mig mycket av det här uppdraget plus att arbeta med WordPress är alltid kul. Utvecklingen av pluginet courseManagement håller jag fortfarande på med och jag ser att man kan lägga till flera funktioner.

I boken står det inget om hur man kodar en hemsida utan den tar upp t ex var du hittar utbildning för att bli webbdesigner, vad du behöver kunna för

att klara av branschen samt hur du kan jobba/lön. Den är utmärkt att ha som uppslagsverk och bra att kunna gå tillbaka till om man känner att man har tappat fokus.

Så om ditt drömyrke är webbdesigner så kolla in denna e-bok. Köp den på följande adress, bli en grym webbdesigner. Priset är endast 59:- och väl värt investeringen.

Läs också Antonios egna inlägg om boken och hans historia om vägen till dit han är idag. Rekommenderar också att prenumenera på hans blogg (RSS)

• E-bok: Bli en grym webbdesigner
• Min e-bok 1 månad senare
• Min väg till en frilanskarriär

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!

Nu väntar jag bara på hur Google ska indexera den. Jag har nämligen valt att använd mig av pluginet Google XML Sitemap som ska indexera alla inlägg.

Vad tycks?

preview of the theme grey box

I did so the navigation is center in a div. Only tested in Firefox 3.5 and Internet Explorer 8. Let me know if it works in older browsers.

You can see the result at the bottom of this blog.

If you like it you can download my theme at the following address:

• http://www.mediafire.com/file/nildnrmmuuj/grey_box.rar

Download the plugin from the following addresses:

• http://www.jenst.se/2008/03/29/wp-page-numbers/
• http://wordpress.org/extend/plugins/wp-page-numbers/

Massa goda tips om hur man designer användargränssnitt. Några utav länkar har jag lite svårt att förstå men de flesta var riktigt nyttiga och något som jag kommer använda när jag designar t ex ett CMS.

Lyssna och titta på föredrag om Windows 7. Jag sitter nu och tittar på det. Det verkar intressant och jag har funderat lite på Windows 7. Nu pratar de om en inspelningstjänst där man kan spela in från skrivbordet. Det verkar nyttigt då jag funderar på att skapa lite mindre tutorials.

09:00 Inledning
Magnus Aschan, Onlineansvarig, TechWorld

09:05 Så säkert blir Windows 7
Marcus Murray, Security Team Manager, TrueSec

09:45 Windows 7 på företaget
Mikael Nyström, Senior Executive Consultan, TrueSec

10:25 Windows 7 vs Windows Vista & XP
Michael Anderberg, Senior Executive Consultan, TrueSec

11:05 Utrullning och kompatibilitet
Michael Anderberg, TrueSec

11:35 Summering och chatt
Alla ovanstående plus Michael Bohlin från Microsoft

Om du inte hann se avsnitten så kommer de lägga ut webinaret på techworld.se

Satt återigen en stund med designen på min portfolio och jag lyckas inte riktigt få ihop den. Jag tror det är färgerna som ställer till det samt min logotyp. Jag har en bra idé till en header men resten tycks inte bli bra alls. Senaste tanken jag hade var att göra allt vit och svart för att ha en väldigt enkel design. Kanske bättre? Eftersom webbsidor är i grunden enbart text och det finns snygga designförslag som är enbart vita med svart text. Ska se om jag inte kan skissa lite mera innan jag sätter mig i något designprogram.

Imorgon är det sista lektionen på Bergskaskolan i Finspång. Det känns lite vemodigt för det har varit kul och lärorikt att komma dit. Eleverna har varit duktiga och jag hoppas att de har lärt sig  något som de kan ta med sig efter gymnasiet. Jag hade tänkt baka lite men eftersom jag har varit så stressad så har jag inte hunnit. Jag får se om jag hinner fixa det innan jag åker imorgon, annars får eleverna vara nöjda ändå. Men som sagt, lite vemodigt att det är sista lektionen. :-/

Skolmusikkaren.se (Skapad av Jakob och David, 2 elever från min grupp)

En verkligen intressant artikel om hur Chris Coyier arbetar. Han nämner många användbara tips som jag ska titta på vid ett senare tillfälle. Hoppas att jag kan lägga upp min dag på ett liknande sätt.

Perfekt inlägg som kommer rätt i tiden då jag sitter och försöker lära mig mera om bakgrunder och design i Photoshop. Det var många bra tips från Smashing Magazine som alltid. Jag har länge letat efter något som förklarar hur man skapar snygga och framförallt stilrena bakgrunder.

De nämner också om att det finns två olika bakgrunder. Det finns body-bakgrunden och själva innehållets bakgrund. När jag designar så försöker jag alltid separera dessa två eftersom jag tycker det skapar mera synlighet för innehållet. Sedan kan jag ibland tycka att en enfärgad bakgrund kan bli lite platt men det finns många webbsidor som lyckas med det också. Det handlar ju lite om hur man lägger upp innehållet på sidan.