Till detta projekt använde jag mig delvis av 960gs, jQuery och jCarousel. Sajten drivs på baksidan av EPiServer.

Koncept, form och programmering (backend) togs fram av BKC STHLM.

Webbtjänsten baseras på EPiServer i grund och botten. Detta kompletteras med en proxy som sköter kommunikationen mellan PRIs databas och klienten (slutanvändaren).

Min uppgift i det hela var att ta fram HTML-mallar, CSS samt en del JavaScript. Vi använde givetvis jQuery som grund och skrev en hel del funktioner på detta gedigna bibliotek.

Utvecklingen har skett med projektmodellen SCRUM, tillsammans med PRIs egna utvecklare som har ansvarat för utvecklingen av tjänsterna som proxyn i sin tur kommunicerar med.

Är du sugen på att pröva på slutresultat så finns det ett demo tillgängligt. Logga in med användarnamnet “exempel” och lösenordet “exempel“.

Jag tog mig tiden att läsa igenom loggen med ändringar. Nedan följer en lista över mina fem favoriter.

1. Smidigare konstruktion av element
   Vid konstruktion av ett nytt element kan du nu skicka med ett objekt innehållandes egenskaper.

2. Enklare attribut manipulation
   Funktioner för att manipulera element så som .css(), .attr(), .val() och .html() kan nu ta en funktion som andra parameter. I funktionen kan du enkelt komma åt det befintliga attributets värde.

3. Unik easing metod per egenskap
   Det är nu möjligt att definiera en easing metod för enskilda egenskaper.

4. Äntligen en riktig delay funktion
   Nu är du inte längre tvungen att “fulhacka” för att skapa en delay effekt.

5. Ajax anrop tar hänsyn till Last-Modified headern
   Tidigare har alla ajax funktioner ignorerat Last-Modified headern. I syfte att ignorera eventuellt cache från webbläsaren. Genom att sätta ifModified till true tvingas jQuery att läsa från webbläsarens cache (förutsagt att något finns).

Om du är sugen på att grotta dig ännu djupare finns en bra redovisning av de nya funktionerna och förbättringarna på kampanjsajten 14 Days of jQuery.

I sedvanlig ordning tillhandahåller Google jQuery 1.4 (minifierad och gzippad) på deras supersnabba CDN.

Bilden tillhörande detta inlägg är lånad ifrån Eric Miraglia.

Idéen till projektet mipi.se spånades redan fram på konferensen Reboot av mig och Morris Packer. Grundidéen var helt enkelt att kunna skapa en frågeställning för att sedan skicka ut den till en så stor publik som möjligt. Med andra ord frågan är fri.

Under mina 24 timmar skapade jag ett webbaserat gränssnitt för att skapa frågor och se resultatet som uppdateras i realtid. Användningsområdena är redan så här initialt många. Tänk t. ex. om du anordnar en konferens och vill ha din deltagares svar på en viss fråga. Skapa frågan och visa resultatet en storskärm medhjälp av en projektor. Deltagarna kommer på så sätt kunna följa utvecklingen i realtid.

Det hela byggdes i ramverket Codeigniter som jag verkligen har fattat tycke för den senaste tiden. Plus en hel del JavaScript med jQuery som grund.

Framtiden för detta projekt ser ljus ut. Appcorn har sedan en tid tillbaka tagit fram en “proof of concept” iPhone applikation som använder sig av Push-protokollet för att skicka ut frågor.

Gillar mipi.se får du gärna rösta på oss. Eller läs mer om bakgrunden till detta projekt.

Beskrivningen på jQuerys officiella hemsida fångar det jag försöker beskriva.

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

Även jag har dragit mitt strå till stacken genom att dela med mig av några små plugins som jag har utvecklat på egenhand.

jContact

En plugin som kan används för att presentera kontaktinfo eller annan viktig information på ett snyggt sätt.

Exempel #1
Exempel #2
Ladda ner jContact

jFields

Låter dig ge textfält (inputs och textareas) standardvärden som beskriver vad fältet ska innehålla. Detta standardvärde försvinner så fort fältet markeras eller blir aktivt. Denna plugin är användbar om du inte vill använda dig av labels p.g.a. platsbrist eller av estetiska skäl.

Exempel #1
Ladda ner jFields

jCountUp

Tillåter dig att räkna upp ett elements värde på ett snyggt sätt. Kan vara användbart när man bygger en årtals-navigation eller liknande. Det finns även gott om inställningar så som t ex. hastighet, värde och en callback.

Exempel #1
Exempel #2
Ladda ner jCountUp

jPreloader

Ersätter submit-knappen med en valfri preloader när en AJAX request utförs. I dagsläget fungerar endast denna plugin med formulär och används tillfördel med jForm.

Exempel #1
Ladda ner jPreloader

SimpleBlock

Till ett kundjobb behövde jag blockera (göra dem “oklickbara“) några element under en bestämd tid. Det finns redan en del plugins som löser detta. Dock kändes de allt för tunga i detta fall. Därav skrev jag ihop SimpleBlock som låter dig blockera ett eller flera element under en given tid.

Exempel #1
Ladda ner SimpleBlock

Alla plugins finns tillgängliga på GitHub och är koden är helt och hållet fri. Vilket i praktiken innebär att du har tillåtelse att använda dem och modifiera dem bäst du vill. Har du hittat en bugg eller sitter på lite feedback? Lämna då gärna en kommentar.

Om du själv är sugen på att börja skriva riktiga plugins till jQuery rekommenderar jag denna guide från Nettuts och en från SitePoint.

Till både inga löjliga bilresor och place brand har jag använt denna metod som beskrivs nedan. Visst kan man istället använda sig av t ex, TDO Mini Forms men jag gillar att ha full kontroll över processen.

Jag är övertygad över att fler än jag har valt WordPress som verktyg till kampanjsajter, t ex. Nokia Tube music och Telefonjack? Nej tack. Hjälp mig gärna med att fylla på listan!

Principen är ganska enkel. Vad vi vill åstadkomma är att gemene besökare ska kunna posta ett inlägg (eller tävlingsbidrag) utan att behöva logga in. Detta inlägg ska sedan sparas ned som ett helt vanligt inlägg plus information om användaren. Inlägget sparas som ett utkast per automatik så att administratörerna kan granska det innan publicering. På detta vill vi gärna ha ett skydd emot elak spam och någon form av validering av datan. Så här kan flödet beskrivas.

1. Användaren skickar in sitt bidrag.
Utifrån formuläret vi har skapat skickar användaren in sitt bidrag för granskning.

2. Bidraget körs via Akismet.
All data vi får in ifrån användaren körs via Akismet för att avgöra om det är spam eller ej. Om det visar sig vara spam avfärdar vi helt enkelt användaren. Om inte går vi vidare till nästa steg.

3. Spara ned bidrag som ett utkast.
Allt verkar stå rätt till och vi sparar slutligen ner bidraget i vår databas på servern.

4. Meddela användaren att bidraget har tagits emot.
Meddela användaren att bidraget har tagits emot på ett eller annat sätt. Detta kan man göra på flera sätt, ett simpel meddelande som presenteras för användaren eller per e-post.

Nu när vi har en bra överbild över vad vi vill åstadkomma är det dags att skrida till verket.

Vad vi först behöver är ett formulär som användaren kan använda för att posta sitt bidrag. Vi behöver en titel och motivering plus lite information om användaren, som t ex. namn, e-post och telefonnummer. Formuläret nedan innehåller allt vi behöver. Tyvärr så strippar WordPress bort indenteringen.

<form action="" method="post">
 <fieldset>
 <p>
 <legend>Ditt bidrag</legend>
 </p>
 <p>
 <label for="campaign-post_title">Titel</label>
 <input type="text" name="campaign[post_title]" id="campaign-post_title" />
 </p>
 <p>
 <label for="campaign-post_content">Motivering</label>
 <textarea name="campaign[post_content]" id="campaign-post_content" rows="8" cols="40"></textarea>
 </p>
 </fieldset>
 <fieldset>
 <p>
 <legend>Om dig</legend>
 </p>
 <p>
 <label for="campaign-post_author_name">Namn</label>
 <input type="text" name="campaign[post_author_name]" id="campaign-post_author_name" />
 </p>
 <p>
 <label for="campaign-post_author_email">Email</label>
 <input type="text" name="campaign[post_author_email]" id="campaign-post_author_email" />
 </p>
 <p>
 <label for="campaign-post_author_phone">Telefon</label>
 <input type="text" name="campaign[post_author_phone]" id="campaign-post_author_phone" />
 </p>
 </fieldset>
 <p>
 <input type="submit" name="campaign[submit]" value="Posta" id="campaign-submit" />
 </p>
</form>

Postdatan som skickas när användaren klickar på “Posta” måste behandlas av en funktion eller dylikt. I detta fall använder vi oss av en funktion. Personligen föredrar jag att placera denna funktion i functions.php tillhörande temat. Vad funktionen gör är att kolla av om någon har fyllt i formuläret och skickat in uppgifterna. Denna kontroll utförs vid varje pageload med hjälp av WordPress egna funktion add_action som gör det möjligt att binda en funktion till en viss händelse (en s.k. hook). I detta fall binder vi funktionen till “init” som står för initialisering (pageload). Det första funktionen gör är att stämma av om postdatan vi söker verkligen har skickats eller inte. Om inte avbryter vi operationen omgående.

<?php
function mytheme_add_post() {
    global $micro_akismet;

    if (!isset($_POST['campaign']['submit'])) {
        return;
    }
}
add_action('init', 'mytheme_add_post');
?>

Om man vill kontrollera vissa uppgifter som t ex. att den ifyllda e-postadressen verkligen är en riktig e-postadress ska det ske nu. Förutsagt att man inte gör det innan formuläret skickas med hjälp av JavaScript.

Nästa steg är att kontrollera att uppgifterna vi har fått inte är spam. Detta görs enklast med hjälp av Akismet. Som du säkert redan vet finns det från start ett inbyggt stöd för Akismet när det gäller kommentarerna i WordPress. Dock har jag kommit fram till det är enklare att använda sig Gaby Vanhegans MicroAkismet klass. Jag har själv modifierat klassen lite för att göra det enklare att använda sig av den i WordPress. Denna plugin finns tillgänglig för nedladdning på GitHub. Observera att denna plugin kräver att du har Akismet pluginen aktiverad och konfigurerad. Efter att både Akismet och MicroAkismet pluggarna är aktiverade och klara kan vi äntligen göra en bedömning om uppgifterna vi fått är spam eller ej.

$post_data = $_POST['campaign'];
$vars = array(
    'comment_content' => $post_data['post_content'],
    'comment_author' => $post_data['post_author_name'],
    'comment_author_email' => $post_data['post_author_email']
);

if ($micro_akismet->is_spam($vars)) {
    // We caught a spammer.
} else {
    // Everything's alright.
}

Om allt är frid och fröjd (ingen spam) kan vi spara ned uppgifterna som ett inlägg med hjälp av funktionen wp_insert_post. Denna funktion tar en array innehållandes en massa argument som första och enda parameter. Vi vill spara inlägget men inte publicera det på direkten för att ge administratörerna en chans att bedöma om inlägget ska publiceras eller inte. Värt att notera är att  vi inte behöver escape:a den inkommande datan eftersom wp_insert_post gör det i syfte att skydda mot SQL-injektioner och annat otyg.

$new_post = array(
    'post_title' => $post_data['post_title'],
    'post_content' => $post_data['post_content'],
    'post_status' => 'pending',
    'post_author' => 2,
    'post_category' => array(10)
);

if ($post_id = (int)wp_insert_post($new_post)) {
    // Post inserted successfully.
} else {
    // Something went wrong.
}

Det kan vara bra att sätta upp ett användarkonto som får agera skribent åt alla bidrag. Byt ut post_author värde mot användarens id-nummer. Detsamma gäller även kategorier. Man vill med stor sannolikhet tilldela inlägget kategorin Tävling eller liknande. Notera att post_category argumentet alltid måste vara en array, även fast det bara handlar om en kategori. Byt ut post_category’s värde mot id-numret på din eller dina kategorier. För en fullständig dokumentation över alla tillgängliga argument rekommenderar jag dig att läsa igenom dokumentation för funktionen hos WordPress.

Nu när inlägget är har sparats vill vi också spara ner uppgifterna om skribenten. Detta gör vi enklast med hjälp av WordPress egna custom fields. På så sätt försäkrar vi oss om att uppgifterna endast tillhör vårt nyligen sparade inlägg.

<?php
$post_author = array(
    'post_author_name' => $post_data['post_author_name'],
    'post_author_email' => $post_data['post_author_email'],
    'post_author_phone' => $post_data['post_author_phone']
);

foreach ($post_author as $key => $val) {
    add_post_meta($post_id, $key, $val);
}
?>

Om du sedan i ditt tema vill visa upp t ex. skribentens namn kan du använda dig av funktionen get_post_meta. Notera denna funktion måste användas innanför post-loopen.

<?php echo get_post_meta($post->ID, 'post_author_name', TRUE); ?>

Då var det (nästan) klart! Personligen föredrar jag att “ajax:ifera” mina formulär för att skapa en trevligare upplevelse. Detta görs enklast med hjälp av jQuery och jForm. Om du bestämmer dig för att använda Ajax är det bra att skicka tillbaka en respons lätt kan tolkas med JavaScript. JSON är rätt det rätta valet för detta jobb. Så här kan en respons se ut i vår funktion.

<?php
$response = array(
    'status' => 1,
    'message' => 'Your post has been submitted!'
);

die(print(json_encode($response)));
?>

Jag har satt ihop ett demo med all kod ovan, baserat på WordPress default tema. Glöm inte heller att installera MicroAkismet pluginen innan.

Ladda ner demot här

Det här är min första renodlade guide. Därav uppskattas all form av feedback och konstruktiv kritik. Gör gärna din röst hörd bland kommentarerna om du har synpunkter eller frågor.

Thumbnailen tillhörande detta inlägg är lånad ifrån jmaclynn.

Personligen föredrar jag att använda mig JavaScript-biblioteket jQuery.

Principen är den att varje gång någon för musen över en länk som har attributen rel=external (d.v.s en utgående länk) läggs onClick-attributen på så att den kan spåras via Google Analytics. OBS Google Analytics koden måste komma före alla utgående länkar, annars kommer inga klick registreras. Förslagsvis lägger du Google Analytics koden precis innan body:n avslutas.

$(document).ready(function() {
    $('a[rel=external]').hover(function() {
        var href = $(this).attr('href');
        $(this).attr('onClick', 'javascript: pageTracker._trackPageview(\'/outgoing/' + href + '\');');

        return false;
    },function() {
    return false;
    });
});

Notera att det kan upp till 24-48 timmar innan dina utgående länkar dyker upp i Google Analytics. De utgående länkarna kommer du sedan hitta under Content > Top Content. T ex. kommer länken www.example.com listas som /outgoing/www.example.com i Google Analytics. Läs mer om utgående länkar hos Google.