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.

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.

If you like to style the registrationform you can use the css-class

cm_tbl_regform

The class is set on the table that includes the registrationform.

cm_tbl_courseoverview

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.5.

Installation

1. Download the plugin from the address 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.

0.5

• Added a Sort by function to Courses and Participants.
• Added Course description, startdate and enddate to course
• Change the view of course overview from
  Course Name Day Time Price Places to
  Course Description Date Day Time Price Places
• Added classes to the tables registrationform and course overview when they are displayed on a wppage. CSS-classes are
  • cm_tbl_regform
  • cm_tbl_courseoverview
• Updated the manual

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)
• Start and End date for a course (Added in version 0.5)
• More fields on the registrationform. (Will be in a future Pro-version)
• Description on a course (Added in version 0.5)

Bugs

There have been reports that the version 0.5 has a couple of bugs. I will be looking into this as soon as possible when I got the time. (Updated 2010-11-25)

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?

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.

Det är riktigt skönt att ta en avkoppling från elektroniken som vi idag är beroende utav. Förra året under Earth Hour tände jag värmeljus och la mig i sängen, samt skrev ett lite inlägg på bloggen. Jag tipsade då om Jens tjänst som räknar ner till Earth Hour och låter dig släcka lampan på webben. Sitt och räkna ner med den och släck sedan ned ljusen!

EH_Banner_2010

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?

[twtpoll id="8t6gcb"]

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