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!

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!

firajul.nu

Ett mindre uppdrag för webbyrån Weramedia som innefattade programmering med PHP och MySQL.

Uppdraget innebar att hämta information om julmarknader ifrån databasen och visa endast den aktuella information som användaren hade klickat på. Var man t ex intresserad av att veta vilka julmarknader som fanns i Blekinges län kunde man klicka på detta i sidomenyn. Då kommer man till en sida för att sortera resultaten ytterligare. Man kunde antingenvälja att visa alla julmarknader i Blekinges län eller klicka in sig på en stads julmarknader t ex Ronneby.

Själva webbsida firajul.nu är byggt på publiceringssystemet Joomla vilket var för mig en ny erfaranhet då jag hade inte testat Joomla tidigare. Det var lite svårt att sätta sig in hur Joomla fungerade då det skiljde sig rätt mycket ifrån WordPress. Men det gick relativt snabbt ändå då jag satte upp en egen testmiljö på min dator med hjälp av XAMPP.

Weramedia blev nöjda med resultatet och jag själv tackar för ett bra samarbete.

Under Construction

Jag håller på att fixa med min webbsida just nu ifall du skulle få problem med att komma in eller att några funktioner inte fungerar så är det därför. Jag kommer eventuellt stänga ner webbsidan när jag håller på med uppdateringen. Dock kanske jag inte alltid kommer ihåg att sätta på denna funktion så ha tålamod så kommer nog webbsidan igång igen.

Arbetet kommer pågå under de närmaste dagarna.

• 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 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?

twitter bird

Yes, nu har jag tagit steget och börjat twittra som resten utav världen. Du hittar mig på följande adress:

http://twitter.com/jotaprojects

Slutar en dator verkligen fungera efter 3 år? Min svar är Ja. Datorn jag köpte begagnade börjar att ramla ihop. Ibland vill den inte alls gå igång och nu senast fungerade inte det trådlösa. Det är säkert något med batteriet också vilket inte gör mig gladare.

Någon som har en bärbar till ett bra pris?

Jag har börjat designa lite på en ny design till min portfolio men har fastnat ganska rejält. Design är inte min starka sida har jag konstaterat. Jag är mer webbutvecklare än webbdesigner. Fast jag tror det har mycket att jag hakar upp mig på en del saker. Jag tycker om att använda mig av tabbar som navigation vilket drar ner valen av design rätt mycket. Jag har läst en del andra blogginlägg om portfolios och en del säger att man inte ska göra den mörk för det ger fel intryck. Men det är ändå många som väljer att ha en mörkare portfolio. Fast det beror på vad man visar i sin portfolio. För fotografier är det rätt bra med en mörkare design för att ta fram fotografierna men för webb kanske det är bättre med en ljusare design. Jag är inne på mitt fjärde försök till en design. Just nu är problemet att den är för ”blå”, vilket kan ge ett sämre intryck.

Nedan är mina försök till en annan design på portfolion. Det jag vill ha med är min ”buddy” som jag skapat i Inkscape. Sen har jag konstaterat att vektor är något som representerar mig eftersom jag inte är så förtjust i pixel. Ge gärna bra kritik på designförsöken.

Nu måste jag göra i ordning mig och åka till Bergskaskolan, Finspång.

 

 

 

 

Nu var det längesen jag skrev här. Jag har haft mycket att göra och har inte hunnit med att uppdatera något.
Jag läser sommarkurser just nu och plugget går på 150% utav min tid. Kurserna är Programmering i C++ och Vektor grafik som går via Högskolan på Gotland. Jag hoppas att detta gör att jag får mera kunskap och kan söka flera jobb.

Första blicken vid C++ är att den känns svår jämfört med Java som jag har läst hela våren. Det är inga föreläsningar på kursen vilket gör det lite svårare men jag ska ändå försöka lära mej. Det finns alltid tutorials på Internet ifall jag inte lyckas få ihop det med kurslitteraturen.

Anledningen till att jag skriver är att jag håller på att designa om min portfolio, jotaprojects.se. Jag fick lite uppvaknande angående de senaste uppdragen jag har sökt att jag ligger lite efter med designbiten. Men för mej är det viktigt att sidan blir användbar och inte krånglig oavsett om man är synskadad eller använder sej enbart av tangentbord. Men jag har gjort några kompromisser också. Jag försöker utforska webbgrafik lite mera och hur man använder sej av bilder till t ex menyn och annat.
Här är det nuvarande jobbet: http://jotaprojects.se/testtabs (kommentera gärna)
Just nu är det bara index.html som jag har designat. Om jag får ihop den sidan så är resten utav sidorna fixade.

En annan tanke är att dela upp sidan och använda mej utav php för att göra sidan bättre och slipper ladda nytt för varje sida. Men än så länge kör jag på XHTML Strict 1.0 och CSS.

Jag ska även försöka få in bloggdesignen i samma design som portfolion så att det känns som man fortfarande är på samma sida. Nu känner jag att man kommer bort från min portfolio om man går in på bloggen.

Ska bara tipsa om andra sidor som en annan utvecklare jobbar på, http://www.minkarta.se/. Om du registrerar dej på minkarta.se så kommer du åt de andra sidorna, badkartan, wifikartan och sushikartan. Sidorna är bra ifall man behöver hitta ställen som rekommenderas av andra. Sidan i sej har många olika funktioner vilket jag tycker är bra och man har allt på ett ställe.