Till en början ett litet tips att lägga till alla sidor som man ska anävnda i menyn innan man börjar skapa själva menyn. Nu till själva manualen.

1. Du hittar menyverktyget under Utseende och länken Menyer.

2. Till höger skapar du en ny meny genom att skriva in ett namn och sedan klickar på Skapa meny.

3. Menyn är nu skapad och du kan börja lägga till länkar och sidor.

4. För att lägga till en sida eller flera sidor går du till boxen Sidor. Där kryssar du i de sidor som du vill lägga till i menyn och klickar på Lägg till i meny. De ska då hamna i din meny till höger.

5. Om du vill ändra ordningen klickar du och håller inne musknappen för att dra menyalternativet till önskad plats. Du ser en markering där du kan släppa menyalternativet.

6. För att skapa en undermeny klickar du och håller inne musknappen på önskat menyalternativ och drar sedan lite till höger om ett annat menyalternativ. Du ska då se att markeringen för där du kan släppa menyalternativet hamnar lite till höger om huvudalternativet.

7. För att lägga till en anpassad länk och inte en sida använder du dig utav boxen Anpassade länkar. Där skriver du in URL:n och namnet på menyalternativet. Klicka sedan på Lägg till i meny och din anpassade länk ska nu ha hamnat i din meny.

8. Om ett tema stödjer menyer kan du se det genom boxen Temaposition. Om den inte är gråmarkerad kan du välja i rullistan den meny du vill använda och klickar sedan på spara så ska menyn ha hamnat på den platsen som temat bestämt.

Now I release my plugin, courseManagement (CM), for course management to the public.

With the plugin you can create courses that your visitors can register to via a special registrationform created by the plugin. You handle both the courses and the participants via WordPress admin and CM.

With CM you can add/edit/remove course and decide if you want to show them in the registrationform. For displaying the course overview on a wordpresspage add the following code

<!--CMOVERVIEW-->

and the courses will be displayed in a table on your wordpresspage.

Within CM you can also handle the participants of the courses. Every time a registration is made from the registrationform it’s saved in the database and it’s displayed in the participant overview. You can also decide if the admin should get a email when a registration is made under settings.
To display the registrationform on a wordpresspage add the code

<!--CMFORM-->

in code view of the editor and save the page.

If you want captcha with the registrationform download the plugin Really Simple Captcha and activate. Then the registrationform gets a new field with the captcha image and inputfield.

For uninstalling the CM. On the Settings page mark the Yes radiobutton at Uninstall and click the save button. Go to ‘Plugin’ menu in WordPress and deactivate CM and then delete the plugin.

This plugin has been tested on WordPress 3.0 and 3.0.1
Stable version is 0.4.

Installation

1. Download the plugin from the address http://www.mediafire.com/?i3raaht7m4jym or http://wordpress.org/extend/plugins/coursemanagement-cm/
2. Unzip the plugin to the ‘/wp-content/plugins/’ directory
3. Activate the plugin through the ‘Plugins’ menu in WordPress
4. Read the manual that follows for more information how you’re using the plugin.

Changelog

0.1

• Added CAPTCHA validation to registration form. Requires the plugin Really Simple Captcha.

0.2

• Added validation to the registration form and add/edit course and participant.

0.3

• Moved the registration date from the table cm_courseparticipant to cm_participants.
• Added a settingspage with uninstall, to remove the tables and settings from database.
• Allowed edit the participantDate
• Added option add new participant
• Added so that the admin can get an email when a registration is submitted in the form.

0.4

• Saved the settings in array instead of multiple options in wp_options table.
• Added Number of Free Places to course. If all courses in the system are full then a error message is displayed where the registrationform is.
• Disabled edit places of a course if a course has participants.

Screenshots

Requests

• Limit number of participant based on number of places in a course. If full registration is not possible anymore. (Added in version 0.4)

Bugs

No bugs reported…

Feel free to post a comment if you have a request or you’ve found a bug!

Jag använder mig här på bloggen utav TweetMeme för att göra det enkelt för mina besökare att sprida ett inlägg till twitter. Tydligen har TweetMeme och Twitter valt att jobba tillsammans därav Twitters egna tweetknapp. Dessutom kommer TweetMeme fortsätta med Twitters tweetknapp istället för sin egna.

Förhoppningsvis kommer det ett plugin för detta till WordPress men det verkar vara rätt enkelt att lägga till knappen på sin sida genom att gå till http://twitter.com/tweetbutton och därifrån skapa sin knapp och få en kod att klistra in på sin sida.

Koden för min knapp ser ut som följer:

<a href="http://twitter.com/share" data-count="horizontal" data-via="jotaprojects">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Tweet

Jag kommer nog vänta tills det finns plugin för WordPress innan jag byter from TweetMeme till Tweetbutton. Hur är det med dig? Ska du byta direkt?

gettyimages.com

gettyimages

Denna sida är grym att leta på när man behöver bilder på framför allt människor. I deras sökfunktion kan man bl a välja mellan 1 eller flera personer på bilden, en specifik ålder, hur/vad gör personen på bilden mm.

En favorit hos mig är att du kan välja från vilken vinkel du vill ha personen ifrån, t ex 3/4 vinkel, fram- eller bakifrån.

Så behöver man bilder på personer så är gettyimages sidan som man surfar in på först.

iStockphoto

istockphoto

Den här sidan upptäckte jag för ett tag sen. Jag som tycker om vektorstil söker ofta på den här sidan för att hitta referensbilder när jag ska skapar egna vektorbilder. Då är deras sökfunktioner riktigt bra ha ta till.

Jag behöver bara kryssa i ‘Illustrations’ för att enbart få vektorbilder. Jag har tidigare försökt söka efter vektor på Google men har ofta suttit en längre tid för att hitta bra bilder. iStockphoto tar ner tiden avsevärt när jag letar efter vektor.

Med inspiration från en utav artisterna på iStockphoto skapade jag min buddy som du ser i headern.

Stock.XCHNG

stock.xchng

Bland de första stocksidorna som jag använde. Stock.xchng har en blandad kompott i bilder men jag söker oftast efter allmänna fotografier t ex landskap eller föremål. Deras sökfunktioner är lite fattiga och det kan vara svårt att få ett bra resultat.

De som lägger upp sina bilder verkar vara positiva till att man får använda deras bilder för icke kommersiellt bruk. Det går enkelt att kolla detta genom att klicka in sig på en utav bilderna och läsa under vilken licens bilder ligger under. Licensen talar om hur man får använda bilden.

Som avslutning två extra tips på sidor som man kan hitta bra ikoner och ikonpaket. Dessa är iconfinder och icondock.

iconfinder_icondock

Om du enbart behöver enstaka ikoner så rekommenderar jag iconfinder. Med hjälp utav sökfunktionerna kan du enkelt ställa in sökresultatet efter önskad storlek på ikon, se hur ikoner ser ut på en vit eller svart bakgrund samt hur många ikoner du vill se på varje söksida. Du har även möjlighet via iconfinder att hitta ikoner i ett och samma paket genom att klicka INFO och sedan Show all icons in this icon set.

Icondock är mer för dig som behöver hela paket av ikoner till t ex en webbapplikation eller nya ikoner till datorn. Icondock erbjuder även olika gratispaket med ikoner som jag tycker håller hög kvalité.

Jag hoppas att dessa tips hjälper dig i ditt letande efter stockimages. Du kanske använder andra sidor och vill tipsa om dem? Lämna då en kommentar!

Något som jag har ställt mig frågan på sistone är om man ska erbjuda RSS för kommentarer. Jag sitter i valet och kvalet om jag ska ta bort det eller inte från min blogg. Men samtidigt har jag läst på andra sidor att det är många som faktiskt prenumererar på kommentarer. Jag själv är inte det den som väljer just RSS utan jag vill gärna hellre ha ett mail om när det kommit ett svar på min kommentar.

RSS för kommentarer är kanske något som är mer användbart om man har en populär blogg där det förekommer mycket diskussioner via just kommentarerna.

För en tid sen valde jag att installera tillägget ‘Subscribe to comments‘ där man enkelt kryssar i en ruta för att få ett mail om uppdateringar angående kommentarerna. Detta tycker jag verkar ett bättre sätt att erbjuda läsaren att följa upp. Vad tycker ni?

Jag har fått äran att läsa Antonio Riveras e-bok ‘Att bli en grym webbdesigner’. Jag kan bara säga att den är grym och hoppas på en fortsättning.

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

24hbc-logo

Just det, 24 hour business camp drar igång idag. De började med presentation idag kl 09:15. Nu sitter jag och följer detta online på mindpark.se. Kul att man får se det online och kan följa med.

Klockan 12:00 ska startskottet gå för campet. Då har deltagarna 24 timmar på sig att skapa en tjänst som många har behov av. De får tillgång till olika API, just nu visar Blocket sitt API som deltagarna kan använda sig av. Andra som erbjuder ett API är GleSYS, Headweb och Svenska Dagbladet mm.

Det ska bli otroligt intressant att se vad som kommer upp.

Följ 24 Hour business camp på

www.24hbc.com

mindpark.se/24hbc/

Följ det live också på adressen:

http://bambuser.com/channel/bjornfalkevik

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.