Ämnen under ‘Webbutveckling‘

Trello: Organisera projekt skitenkelt med andra

Då jag arbetar med flera olika medier har jag svårt att hålla allt i huvudet och behöver ett verktyg som hjälper mig. Post it-lappar på väggen gillar jag, men omgivningen blir inte så vacker då. Dessutom kan jag inte ta dem med mig. Det är här Trello kommer in i bilden.

Trello kan närmast beskrivas som att göra-listor som fästs direkt på webbplatsen likt post it-lappar. Hela gränssnittet är intuitivt och för mig var det därför ingen inlärningskurva alls, utan jag kunde börja arbeta i det direkt, vilket jag gillar väldigt mycket.

Så här ser min arbetsyta ut för tillfället:

Som synes i bilden samlar jag olika typer av projekt där, i nuläget arbetar jag med en bok, en kortfilm och ett par webbplatser. Jag organiserar alltså allt mitt arbete i Trello (i stora drag) och använder sedan specifika verktyg för delmomenten i varje projekt.

En vanlig kalender, på papper, är något jag inte heller klarar mig utan. Jag har aldrig gillat digitala kalendrar trots att jag är en webbnörd som dessutom utvecklat kalenderapplikationer.

Även om jag för tillfället använder Trello ensam så fungerar det ypperligt i team. Eller rättare sagt, det är gjort för att användas i team. Kolla på videon så fattar du galoppen:

Trello is a collaboration tool that organizes your projects into boards. In one glance, Trello tells you what’s being worked on, who’s working on what, and where something is in a process.

Kort och gott, om du vill ha ett verktyg som bara fungerar utan att du behöver lära dig något, och dessutom arbetar i ett team, är Trello något du bör titta närmare på. Det fungerar ju som synes utmärkt även för oss som inte arbetar i team. Och ja, det är gratis.

Mina verktyg för att utveckla webbplatser

Trello använder jag för en överblick över alla mina pågående projekt. Jag gillar att man ser allt på en enda skärm, och en stor monitor förenklar det.

För webbutveckling använder jag vanligtvis scrum-influerade metoder. När jag säger influerad innebär det att jag inte följer den fullt ut, utan använder en slags iterativ process där jag gör saker i små steg och utvärderar – inte helt olikt scrum. Att jobba ensam med scrum är dock meningslöst, därav förenklingen.

Till det har jag testat en betaversion av PangoScrum ett tag, men tycker det är något invecklat (gränssnittet är inte intuitivt). Därutöver har jag använt BaseCamp i flera år för att hantera att göra-listor för enskilda projekt och iterationer i dessa projekt. Det fixar biffen utan besvär.

Jag använder också HighRise för att hantera kontakter. Jag är tillräckligt paranoid för att undvika Gmail för det. De har redan tillräckligt med data om mig. I övrigt använder jag också Remember The Milk som att göra-lista för rent personliga uppgifter (av typen ”tvätta bilen” och ”släng grejer på tippen”).

Det är några av de webbapplikationer jag använder för att organisera mitt arbete. Vad använder du själv?

Tekniken bakom Twitter: MySQL och memcached (typ)

Twitter behöver förmodligen ingen presentation. Men en sak jag däremot alltid undrat över är hur i allsin dar de lyckats skicka och ta emot så många textmeddelanden – i realtid dessutom.

Presentationen nedan visar, om än väldigt tekniskt, hur de lyckats skala upp Twitter och MySQL/memcached för att hantera det enorma antalet textmeddelanden som skrivs varje sekund. Det korta svaret är att de lagrar så mycket som möjligt i minnet.

Såvitt jag förstår har de bytt (eller ska byta) plattform. Men presentationen kan ändå ge några fingervisningar för hur all data ska struktureras för att göras snabbt åtkomlig.

(Via Jonas Lejon)

Dagens webbläsare mer och mer lika varandra

Webbläsarna börjar bli allt mer lika varandra. Från det att flikar började användas har det nu blivit standard. Och sedan Google Chrome introducerades har gränssnittet reducerats ordentligt – till det bättre. Nya Internet Explorer 9 ser också väldigt lovande ut.

Nedan finner du en jämförelse mellan de vanligaste webbläsarna just nu.

Google Chrome 10:

Microsoft Internet Explorer 9:

Mozilla Firefox 4:

Opera 11:

Apple Safari 5:

Kundcase: Webbplats åt frilansfotograf

Det är inte så ofta jag tar mig an att bygga webbplatser åt kunder. Men när en vän ber mig om hjälp försöker jag hjälpa till. Resultatet blev Eggtown.se för min vän Nils som är frilansfotograf.

Eggtown kundcase

Det ni ser ovan är den färdiglevererade produkten.

Tanken var att lägga all fokus på bilderna, även om inte alla bilder finns ute ännu. Framöver ska man kunna klicka sig vidare på porträttfoto och komma till ett litet galleri med exempel på porträttbilder. (Ingen vill ju köpa grisen i säcken.)

Färgtemat går i rosa och cyan, varav cyan är den ordinarie färgen för temat som jag tyckte passade utmärkt som primärfärg. För att inte primärfärgen ska få för mycket övervikt lades loggan i en rosa box som motvikt (tre färger är en bra grundregel att satsa på).

Texterna har jag däremot inte skrivit själv förutom någon enstaka sida samt mikrotexterna (slogan, länktexter, sidfot och så vidare). Jag väljer i detta fall att redigera de texterna som finns, och komma med synpunkter på deras innehåll än att göra all research som vanligtvis behövs.

Som ni säkert märkt är stilrenhet något av mitt kännetecken. Att lägga bilderna ”svävande” med mycket vit yta runtomkring gör att all fokus hamnar på dem och ingenting annat.

På serversidan är det som så ofta en WordPress-installation. Temat som används heter AutoFocus+ och jag har inte gjort så många ändringar förutom att ta bort störande element samt förbättra läsbarheten på texten. När det gäller tillägg är det bara W3 Total Cache och WordPress SEO. Det är för cache respektive sökmotoroptimering.

Tidigare har jag använt WP Super Cache respektive All in one SEO Pack, men de har fått abdikera som mitt ”weapon of choice”. De har helt enkelt inte lika många inställningsmöjligheter. Är man seriös med sin sökmotoroptimering är WordPress SEO något som man bör titta närmare på – den kan även generera sitemaps!

För den som undrar vad Eggtown betyder så fanns det tydligen ett avsnitt av tv-serien Lost som hette just Eggtown.

GetSimple smart och ultrasnabbt publiceringsverktyg

WordPress i all ära, men att bygga riktigt små webbplatser gör att den gamle trotjänaren snabbt blir tungrodd. Jag vill ha något enkelt. Och det jag vill ha är GetSimple.

GetSimple är ett riktigt bra publiceringsverktyg som passar små webbplatser, och givetvis är det gratis. GetSimple beskriver sig själv som ett publiceringsverktyg som har allt som ett cms behöver, men ingenting som det inte behöver. En bra sammanfattning.

Har du bara tio sidor som ska upp på nätet är den perfekt. Du kan hantera allt i systemet och dessutom ladda upp filer, ändra teman och bygga ut det med plugins. Och man slipper strulet med databaser, eftersom all data sparas i xml-filer. Det gör också att webbsidorna svarar otroligt snabbt i jämförelse med WordPress. Den smarta uppbyggnaden av systemet (med så kallade komponenter som kan infogas var man vill) gör att det blir väldigt flexibelt trots sin enkelhet.

Men vad ska man egentligen ha GetSimple till? Jag kan ta två exempel jag själv gjort.

För det första har jag nyligen lagt in den på min visitkortssida, peterdahlgren.com, där jag samlar allt som berör mig som person. Innan var det bara en handkodad html-fil som jag var tvungen att ändra för hand och ladda upp via ftp, vilket är en tråkig och onödigt komplicerad uppgift. Dessutom svarar sidorna lika snabbt som om de vore html-sidor, vilket är ett stort plus. Jag har märkt att det tar märkbar tid att ladda en sida med WordPress, så jag undviker det om det är möjligt (och innan ni säger något, jag använder redan en cache-plugin).

För det andra har jag installerat GetSimple på naturalism.se som är en liten portal för en filosofisk åskådning med samma namn. Det är en liten portal om just detta snäva ämne, främst med texter från Wikipedia till en början.

Än så länge är det lite skralt med både teman och med plugins. Men jag hoppas vi kan ändra på detta. Det tar verkligen inte lång tid att sätta sig in i hur systemet fungerar. Det är för övrigt byggt i php.

Hur en webbläsare fungerar

Gullig berättelse på ett grått, tekniskt problem, eller hur? :)

Så mycket kostar Amazon S3

Amazon har en datalagringstjänst som kallas Amazon S3 – kort för Simple Storage Service. Tanken är väldigt enkel. Du kan lagra filer och du betalar bara några få ören för bandbredden och lagringen. Men om man behöver mycket bandbredd, vad blir egentligen ”några ören” då?

Jag har som bekant börjat producera en podcast och då behövs ju av naturliga skäl mycket bandbredd. Hur mycket visste jag inte till en början, så Amazon S3 verkade vara en god investering med tanke på att man betalar för det man använder, och ingenting annat.

Efter tre månaders användning och tolv avsnitt av poddpradioprogrammet har jag ganska goda föreställningar om hur mycket bandbredd som behövs. I synnerhet när lyssnarna nästan ökat exponentiellt från första avsnittet…

Diagrammet nedan visar hur många kronor det kostar för varje nedladdad gigabyte. Som du kan utläsa så kostar alltså 500 GB bandbredd ungefär 750 kronor i månaden.

I diagrammet har jag använt dollarkursen 7,9. Till detta gör Amazon ett momspålägg om sedvanliga 25 procent, vilket också framgår av diagrammet (varför jag råkat räkna med moms är en bra fråga, men räknar du med baklängesmoms om 20 procent får du fram priset utan moms).

De kostnader som jag räknat med är endast nedladdningar, men i sin helhet är kostnaderna för Amazon S3 följande:

Nedladdningar: 0,15 dollar per GB
Uppladdningar: 0,01 dollar per GB
Lagring: 0,15 dollar per GB

Jag räknar med uppladdningar och lagring som halvfasta kostnader därför att de endast förändras varefter som nya avsnitt produceras, ungefär tre till fyra gånger per vecka, och är därför förhållandevis konstanta. Bandbredden blir av naturliga skäl dyrare ju fler som laddar ned avsnitten, varför jag anser det är en viktigare variabel att räkna med.

Jag har sedan jämfört dessa siffror med Libsyn, en tjänst som lagrar just ljudfiler för poddradio. Skillnaden blir minst sagt signifikant eftersom man bara betalar för lagringen per månad, vilket är en fast kostnad, och ingenting extra för bandbredden.

Så jag hoppas att denna lilla kostnadsberäkning kan hjälpa dig att fatta ett bra beslut om Amazon S3 är värt pengarna eller inte. För mig lutar det att inom kort börja använda Libsyn i stället.

Så skapar du en privat wiki med MediaWiki

MediaWiki

I första delen har vi gått igenom fördelarna med att sätta upp en personlig wiki där du samlar dina tankar, idéer och projektanteckningar. Nu är det dags att visa hur du praktiskt går tillväga.

MediaWiki är mjukvaran Wikipedia använder. Det är open source och du är förmodligen redan expert på att använda det. Det är också väldigt enkelt att använda.

Installera MediaWiki för privat bruk

  1. Ladda ned. Börja med att ladda ned MediaWiki. Du behöver PHP och MySQL på ditt webbhotell eller server för att det ska fungera.
  2. Installera. Följ instruktionerna för att installera wikin. I princip handlar det om att ladda upp filerna till webbservern och peka webbläsaren dit. MediaWiki rekommenderar att du lägger alla filer i katalogen /w som du sedan använder mod_rewrite för att få rätt utseende på adresserna.
  3. Gör privat. Sedan det viktigaste steget. Gör wikin privat så att bara du och (eventuellt) några medarbetare kan komma åt den. Det går att ställa in så att vissa delar är privata och vissa är publika, vilket är fördelaktigt om du vill att kunder ska komma åt sidan. Jag gjorde så att wikin bara släpper igenom min ip-adress, vilket också skyddar sidan från spamrobotar.
  4. Snyggare adresser. Se till att du även konfigurerar wikin för uppladdning av filer och korta webbadresser. Det senare är valfritt men det blir enklare om webbadressen är example.com/wiki/Fakturor än example.com/index.php?page=Fakturor.

Skapa din första sida

Sedan ska du börja lägga till informationen så att den blir meningsfull och enkel att hitta. Har du ingen idé ska jag ge några riktlinjer nedan som du kan arbeta vidare från. Men först hur du gör.

  1. Först av allt vill du säkert skapa en huvudsida, men vi väntar lite med det. Det är nämligen smidigast att lägga genvägar där som går till sidor du behöver tillgång till ofta
  2. Skapa en sida för det projekt du arbetar med för tillfället. Sätt markören i sökrutan och skriv in projektnamnet och klicka ”Gå till” och välj att skapa sidan.
  3. Den grundläggande wikiformatering är väldigt enkel:
    ==Rubrik nivå 2==
    Länka till [[Kundens namn]] på wikin eller
    ''fetmarkera text'' så att den syns bättre.

    Det är det viktigaste du behöver kunna för att snabbt komma igång. Du kan lära dig mer senare.

  4. Längst ned i dokumentet lägger du till en kategori genom att skriva [[Kategori:Projekt]] eller [[Kategori:Ekonomi]]. På det viset får du en lista över alla dina projekt och det som berör ekonomi. Det gör det enkelt att hitta.

Tips på hur du kan organisera informationen

Som vi läste i första delen beskrev vi användningsområdena för wikin. Du kan exempelvis samla anteckningar, kodsnuttar eller information om kunder.

  • En sida per kund. Du kan ha en sida för varje kund eller klient. Använd exempelvis kategorin “Kunder”. Länka också en kontaktperson (som får en egen sida) till varje kund. Du kan kalla kontaktpersonens sida för /Apple/Steve Jobs.
  • Post-it-lappar. På förstasidan kan du samla anteckningar i stil med post-it-lappar med kort information som du bara behöver för tillfället. Även att göra-listor går fint att lägga där, liksom länkar till sidor du använder ofta.

Själv har jag lagt upp bankinformation, länkar till program jag behöver ladda ned, checklistor, marknadsplaner, lista över domännamn jag äger, budgetar och liknande. Även filer, i synnerhet små pdf-broschyrer, som jag hittat på nätet och vill spara laddar jag upp där. Det känns mer rätt att lägga det på wikin där jag har tillgång till filerna var jag än är.

Internet Explorer 8 med smart sökfunktion

Internet Explorer 8 finns nu att ladda ned. Mest intressant är den nya sökfunktionen som bland annat låter dig få ”suggestions” från Wikipedia eller någon av sökmotorerna. Det går även enkelt att söka i Eniros gula sidor genom sökfunktionen.

Sök direkt på Wikipedia med Internet Explorer 8

När du öppnar en länk i en ny flik får fliken dessutom en unik färg så att man enkelt kan spåra varifrån fliken kommer. Helt klart en smart detalj.

Även Google Chrome har kommit ut i en ny betaversion med en del experimentella funktioner. Samtidigt har de släppt en Chrome-blogg där du enbart kan följa utvecklingen av webbläsaren.

Låt besökarna läsa filerna direkt på din webbsida med DocShots

DocShots låter dina besökare läsa filer direkt i webbläsaren utan att ladda ned och öppna dem i sina egna program.

Fördelen med det här är många. Dels går det snabbare för besökaren att skumma igenom exempelvis ett Word-dokument utan att ladda ned det, och dels behöver man inte ens ha programmet installerat.

De dokumentformat som stöds är Word, Acrobat, PowerPoint och Excel (doc, pdf, ppt och xls) och dessa laddas upp hos DocShots. Givetvis kan besökarna ladda ned dokumenten på vanligt vis också. Det finns även en möjlighet att behålla filerna privat, utan att de exponeras publikt.


Creeper MediaCreeper
QR Code Business Card