Bloggarkivet listar alla poster som skrevs i mars, 2012. Övriga poster hittar du i vår blogg. Vill du läsa mer om oss på Webbgaraget så rekommenderar vi startsidan.
Jag tänkte tipsa om ett bra tillägg till WordPress som kan vara till stor hjälp vid hantering av bilder på din webbsida, nämligen Multiple Post Thumbnails. Som namnet antyder gör tillägget att du kan hantera flera utvalda bilder för ett inlägg.
Utvalda bilder?
Utvalda bilder (mer kända som ”Featured Images”) låter dig välja en särskild bild som ska representera en post. Detta kan t.ex. vara användbart om du vill publicera utdraget av ett inlägg tillsammans med en särskild bild. Den utvalda bilden kan sedan hämtas ut med funktionen the_post_thumbnail(), var man vill på sidan. Mer om detta går att läsa här.
Att använda utvalda bilder är särskilt intressant när man producerar webbsidor och inte vill låta kunder eller användare röra om för mycket i designen, genom att hantera bilder i WordPress inbyggda redigerare. Om designen innehåller flera sådana bilder kommer Multiple Post Thumbnails väl till hands.
Hur gör man?
Låt oss säga att du vill presentera produkter på ett enhetligt sätt med produktbild, logotyp och en beskrivande text. Genom att att använda två utvalda bilder kan du positionera din produktbild och logotyp var du vill på sidan. I detta fallet kan produktbilden vara den utvalda bilden som beskrivs i tidigare stycke. För den andra bilden använder vi Multiple Post Thumbnails. Den bilden, som vi kallar ”logotype” registreras i functions.php genom följande funktion.
if (class_exists('MultiPostThumbnails'))
{
new MultiPostThumbnails(array(
'label' => 'Product logotype',
'id' => 'logotype',
'post_type' => 'products'
)
);
}
I exempelet har vi registrerat bilden till posttypen ”products”. Logotypen kan sedan hämtas ut på följande sätt:
if (class_exists('MultiplePostThumbnails') &&
MultiPostThumbnails::has_post_thumbnail('products', 'logotype'))
{
MultiPostThumbnails::the_post_thumbnail('products', 'logotype');
}
Detta är ett bra och smidigt sätt att kontrollera utseendet hos poster i WordPress. Vi har bland annat använt det vid utvecklingen av webbsidan för Stockholm-Uppsala Life Science.
Precis som med vanliga utvalda bilder kan man definiera vilken storlek bilderna ska ha och det går i princip att ange hur många extra bilder du vill.
För att hålla reda på vad som behöver göras i ett projekt, dela upp uppgifter, logga tid, samla idéer och så vidare behövs ett bra projekthanteringssystem. När vår verksamhet var i sin linda skötte vi ärendehanteringen med en todolista i ett mail som vi skickade fram och tillbaka till varandra. Det var, som ni förstår, inte så hållbart i längden. Vi började leta efter ett passande system och beslutade oss för Redmine eftersom vi kunde hosta det själva och det var gratis och Open Source.
I Redmine kan vi enkelt hantera våra projekt. När vi startar upp ett projekt väljer vi vilka moduler i systemet som ska användas. Exempel på tillgängliga moduler är ärendehantering, filarkiv, kalender, wiki med mera. Sedan väljer vi vilka användare som är delaktiga och vilka roller de har, samt skapar en koppling till en Git-repository där kod för projektet samlas.
Teman och plugins gör Redmine till vårt
Redmine passar oss alldeles utmärkt, mycket tack vare möjligheten att tweaka det efter egna behov. Man kan installera både tredjepartsteman och -plugins (eller skriva sina egna). På hemsidan finns en bra katalog med mer eller mindre komplexa plugins som användare slängt ihop. Det som är så bra är att många plugins skrivits av personer som arbetar på liknande sätt som vi gör och som själva velat förändra systemet för att passa deras arbetsflöde.
Temat vi använder heter Modula Martini, skrivet av en webbyrå i Finland. Det är ett tema vi trivs med då det är väldigt stilrent och luftigt.
Skärmbild som visar ärendelistan för vårt senaste projekt (mer om det senare)
Vi har lyckats hitta ett gäng plugins som hjälper oss i vårt arbete. Här kommer några som vi använder dagligen:
Time Tracker – Klocka som håller koll på tiden vi lägger ner i projekten. Redmine har tidsrapportering inbyggt, men det här pluginet ger oss ett tidtagarur som vi kan starta och stoppa när vi jobbar med ett ärende och länkar oss sedan direkt till tidsrapporteringsvyn med spenderad tid redan ifylld.
Favourite Projects – Möjlighet för varje användare att välja sina favoritprojekt. Ger oss kortare väg till de projekt vi själva deltar i så att ledtiderna kortas ner.
iCal – Genererar en iCal-länk för planerade ärenden i ett projekt. Bra då vi ibland vill prenumerera på projektplanerna i vår Google Calendar.
Knowledgebase – En kunskapsdatabas där vi samlar projekterfarenheter, användbara kodsnuttar och sådant som är bra att komma ihåg från projekt till projekt.
Är du eller ditt företag ute efter ett projekthanteringssystem att ha på egen server, ge Redmine en chans!
Nu fortsätter vi med lite hastighetsoptimering här i bloggen. Tidigare har jag bland annat skrivit om minifiering av JavaScript- och CSS-filer. Nu är det dags att lära sig hur man styr webbserverns direktiv om cache och komprimering. Här finns det mycket bandbredd att spara. Alla exempel är för webbservern Apache. Den är ju uteslutande den mest använda webbservern på nätet.
Spara innehållet i cachen
Många av de statiska filerna som dina besökare laddar är väldigt sällan förändrade. Därför är det lämpligt att inte behöva ladda dem på nytt vid varje besök. Istället vill vi låta webbläsaren spara dem i sin cache och därför hämta dem från hårddisken istället för webbservern. Det här sparar både bandbredd och minskar laddningstiden. En ytterligare bonus är att din webbserver blir mindre belastad och kan därför hantera flera besökare.
Det är väldigt enkelt att konfiguera cache i Apache. Det enda som behövs är egentligen följande rader i sitens konfigurationsfil. Om du använder ett webbhotell är du nog hänvisad till .htaccess-filen som ligger i hemsidans rot. Om du har en egen webbserver igång har du tillgång till konfigurationen på annan plats. Det viktiga är att du har tillägget mod_expires installerat i Apache.
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 1 week"
ExpiresByType image/gif "access plus 1 week"
ExpiresByType image/jpeg "access plus 1 week"
ExpiresByType image/png "access plus 1 week"
ExpiresByType text/css "access plus 1 week"
ExpiresByType text/javascript "access plus 1 week"
ExpiresByType application/javascript "access plus 1 week"
ExpiresByType application/json "access plus 1 week"
ExpiresByType text/xml "access plus 60 minutes"
</IfModule>
I exemplet här instruerar webbservern webbläsaren att spara vissa filtyper i en vecka efter nedladdningen. Undantaget är XML-filen. RSS-flöden är i XML-format och uppdateras förmodligen oftare en än gång per vecka.
Komprimera allt innehåll
Alla nya webbläsare klarar av att ladda hem innehåll i komprimerad form. Det innebär att webbservern kan komprimera filerna innan de förs över till klienten. Här kan vi då minska mängden överförd data och snabba upp sidladdningen. För detta krävs ytterligare en modul, nämligen mod_deflate.
I regel brukar det vara mer tacksamt att komprimera textbaserade filer än binära (exempelvis bilder). Det beror på att de binära filer man använder oftast redan är väldigt hårt reducerade i filstorlek. Därför väljer vi att bara komprimera HTML, CSS, Javascript och XML. På samma sätt som du lade till cache-direktiven i konfigurationen så kan du lägga till följande direktiv för komprimering.
Notera här första raden där man anger hur hårt filerna ska komprimeras. Här är 9 högsta nivån och kräver mest av serverns CPU vid komprimeringen. Med dagens datorer är det dock ingen större skillnad i hastighet för såna här små filer. Därför kan du köra med högsta nivån. Skulle du märka negativa prestandaskillnader är det bara att justera den.
Märk skillnaden
För att testa komprimeringen kan du använda HTTP Compression Test som låter dig testa och se om den är aktiv. Det enda du behöver göra är att ange adressen till din hemsida och du får sen ett utlåtande om statusen.
Ett enkelt sätt att se hur laddningstiden snabbas upp är att du laddar sidan i din favoritwebbläsare en gång och sedan en gång till. Vid andra tillfället ska skillnaden vara märkbar. Dessutom kan du kika i webbserverns log-fil och se hur mycket färre filer som förs över vid andra tillfället.
Vill du veta mer om vad experterna tycker om komprimering och cache kan du läsa vidare om vad Google skriver. Där finns både information om komprimering och cache.
Att arbeta med molnbaserade tjänster blir allt vanligare, från ordbehandlare till kalendrar. Det brukar sällan beskrivas som ett problem att ha sina dokment på nätet istället för lokalt i datorn. Dock finns det ett område som fler borde utforska; presentationer på webben. Jag tänkte presentera ett verktyg där man med enkel HTML-markup kan bygga snygga presentationer för webben, nämligen deck.js.
Interaktivt innehåll
Vanligtvis använder man Powerpoint eller Keynote och de är två kompetenta program, men det finns en del fördelar med att lyfta ut sin presentation online.
De flesta presentationer bygger på att man presenterar en rad fakta. Man plockar fram statistik från någon ofärsk källa och stolpar upp staplar och siffror. Tänk om man istället kunde hämta innehållet samtidigt som man utför presentationen. Många tjänster har idag öppna APIer där man kan hämta information, tex om någon produkt, eller vad en viss person skrev på Facebook. Färskare än så skulle det inte bli.
Eftersom presentationen är byggd i HTML finns det väldigt få begränsningar för vad man kan inkludera. Som webbutvecklare kan du t.ex. presentera dina case live istället för infogade bilder. Om du leder en debatt eller ett seminarie kan du inkludera ett Twitter-flöde i realtid, i din presentation.
På deck.js hemsida demonstrerar man hur man kan infoga ett klipp från Vimeo
Bygg med enkel HTML
Presentationerna skapas med relativt enkel HTML. Exemplet nedan visar en enkel markup för hur en enkel slide kan se ut. Principen är att man tilldelar klassen ”slide” till de element som ska visas i följd. Här har vi gjort en slide med tre punkter.
<div class="deck-container">
<!-- Slide 1 -->
<section class="slide">
<h1>Dagens agenda</h1>
<p>Presentation av deck.js</p>
<ul>
<li class="slide">Några fördelar</li>
<li class="slide">Ett videoexempel</li>
</ul>
</section>
<!-- Slide 2 -->
<section class="slide">
<h1>Några fördelar</h1>
<p>Varför använda deck.js?</p>
<ul>
<li class="slide">Lätt att styla med CSS</li>
<li class="slide">Enkel HTML</li>
<li class="slide">Du kan hämta in dagsfärsk information</li>
</ul>
</section>
<!-- Slide 3 -->
<section class="slide">
<h1>Ett videoexempel</h1>
<p>Här kommer ett klipp från YouTube</p>
<iframe width="420" height="315" src="http://www.youtube.com/embed/ZeJ_Dx_UMpc" frameborder="0"></iframe>
</section>
</div>
Varje slide består helt enkelt av en sektion, där principen är att de element som ska animeras har tilldelats klassen ”slide”. Kolla här för att se hur koden presenteras med deck.js. Navigera med piltangenterna. Precis som med vanliga webbsidor kan utseendet bestämmas med CSS.
Verkar detta spännande kan jag rekommendera ett besök på grundaren Calebs hemsida. Där finns mer information och en blogg om hans projekt.
Förutom webbutveckling tar vi även åt oss uppdrag som handlar om utveckling för iPhone och Android. Vid de tillfällena är det jag som är CAndO medan Erik är iCO. (Vad de betyder? Det får ni räkna ut själva.) Det är verkligen kul med variationen, även om jag ibland saknar mitt TextMate när jag är som mest ingrottad i Eclipse:s jämförelsevis stela editor.
Just nu håller vi på med en applikation som pratar med en webbtjänst för att utbyta information i JSON-format. En viktig grej att tänka på när man kommunicerar med en webbtjänst är att göra HTTP-anropen asynkront, dvs i en annan tråd än UI-tråden, så att appen inte låser sig för användaren. Android har bra hjälpmedel inbyggt för att utföra uppgifter i egna trådar, exempelvis med AsyncTask, men det är ändå ganska omständigt att göra HTTP-anrop så. För det syftet har vi hittat ett Open Source-bibliotek som gör livet lättare för oss. Enter Android Asynchronous Http Client.
I biblioteket medföljer en klient som man anropar för att enkelt göra POST- eller GET-anrop i egna trådar. Till klienten skickar man med en handler för att ta hand om resultatet och för att utföra uppdateringar i UI-tråden när anropet är klart.
String url = "http://www.webbgaraget.se";
new AsyncHttpClient().get(url, new AsyncHttpResponseHandler() {
@Override
public void onSuccess(String response) {
Log.d("HTTP GET", response);
}
});
Fel som uppstår vid anropen kan hanteras genom att implementera metoden onFailure() i sin AsyncHttpResponseHandler. Det fina med det här biblioteket är att det kommer laddat med ResponseHandlers speciellt anpassade för JSON-data också, vilket ju för den här appen passade oss utmärkt.
Ibland kan det bli väldigt långa dagar framför skärmen. Speciellt när vi är uppe i en produktionstopp, som för tillfället, är det mer regel än undantag att den enda gången man reser sig är när man ska till fikarummet. Med undantag för några möten sitter vi och hamrar på tangentborden tills fingrarna nästan blöder. Känner du igen dig?
Några problem det här brukar medföra är taskig ergonomi, som i sin tur leder till musarm. Ja, det är inget nytt fenomen, men ett ganska vanligt problem hos folk som sitter fel. För att råda bot på detta fenomen (som på engelska kallas repetitive strain injury) använder vi ett gratisprogram som heter AntiRSI. Med en mycket enkel princip om att då och då ta mikropauser, samt längre pauser emellanåt, är det här programmet nageln i ditt öga. När man som minst anar dyker en liten dialogruta upp om att det är dags att ta paus.
Programmet kan konfigureras för mikropauser på 0-30s och längre pauser på 1-20 min. Själv har jag ställt in mikropauserna på att återkomma varje kvart och de längre var 50:e minut. Det finns ingen vetenskaplig forskning bakom dessa intervall, utan det är mest en smaksak.
Om man skulle välja att fortsätta att arbeta under rasten, börjar timern om med nedräkningen. Programmet känner nämligen av musrörelser och tangentbordsnedslag. På så vis blir nageln i ögat påtalande och den här rasten på 13s blir oundviklig. Den korta pausen kan kännas som ett nödvändigt ont. Dock är den oerhört skön och välkommen så fort man sträcker ut sig och faktiskt stänger ögonen en liten stund.
Till och med v 2.1 har AntiRSI varit gratis. Sedan v 3.0.1 är det tillgängligt för nedladdning via App Store och kostar pengar. Dock finns den äldre versionen fortfarande kvar på tillverkarens hemsida.
