Webbutveckling

Hur man bygger webbplatser med fokus på struktur, tillgänglighet och användbarhet (inte så mycket kod). Det var det bloggen handlade om från början.

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)

Dela:facebooktwittergoogle_plus

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:

Dela:facebooktwittergoogle_plus

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.

Dela:facebooktwittergoogle_plus

Så hittar du gratis kvalitetsbilder till din webbplats

Behöver du gratis bilder av hög kvalitet? Vill du hålla dig på rätt sida av lagen? Här får du en guide med 9 sajter där du hittar bilder du kan använda utan att behöva titta i plånboken.


(Foto: GeorgesNijs)

När jag letar efter bilder är dessa fyra mina givna startpunkter:

  • Flickr är helt klart min favorit. Där finns flera miljarder bilder från hela världen. Se till att kryssa i rutan ”Creative Commons” när du söker så kan du hitta bilder som du får använda kommersiellt och till och med ändra.
  • EveryStockPhoto indexerar de flesta bildleverantörer som erbjuder gratisbilder (tänk dig Google Images på steroider). Det innebär att det är enkelt att hitta mängder med bra bilder.
  • Wikimedia Commons har över åtta miljoner mediafiler (och mycket bilder) som du kan använda, där många även får användas kommersiellt.
  • Creative Commons är en licensform med generös upphovsrätt, men på deras hemsida finns dessutom en sökfunktion som kan söka igenom flera olika källor på en gång. Och givetvis är den anpassad till att söka efter bilder som lyder under Creative Commons!

Stock photo

Det finns också speciella bildleverantörer som säljer bilder som om det vore lösgodis. Några av dem har dessutom en del gratisbilder också:

  • SXC.HU har en stor samling bilder med bra sökfunktion och kategorisering av bilder. Perfekt för ditt nya projekt som kräver kvalitetsbilder.
  • Free Digital Photos organiserar royalty-fria bilder som finns i olika storlekar. Det är den minsta bilden som är gratis och vill du har större får du betala.
  • Free Foto säger sig vara den största samlingen av fotografier online. Vill du använda foton måste du dock länka tillbaks till deras sajt.
  • FreeLargePhotos har som namnet säger större bilder. Enkel sida med tydliga kategorier där du måste länka tillbaka om du vill använda bilden.
  • Fotoakuten är en svensk sida som har åtta tusen gratisbilder i hög kvalitet.
Dela:facebooktwittergoogle_plus

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.

Dela:facebooktwittergoogle_plus

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.

Dela:facebooktwittergoogle_plus

Hur du omdirigerar Aftonbladet.se till SvD.se

Aftonbladet i alla ära… vem försöker jag lura egentligen? När du bestämt dig för att inte läsa Aftonbladet längre finns det ett bra sätt att upprätthålla detta befogade omdöme.

Gör så här:

  1. Leta upp filen hosts på din dator.
  2. Lägg in följande kodrad i filen:
    144.63.252.10 aftonbladet.se
  3. Spara filen och töm din cache i webbläsaren.
  4. Varje gång du går in på aftonbladet.se kommer adressfältet visa Aftonbladet, men du ser i själva verket Svenska Dagbladet. Precis som det ska vara.
Dela:facebooktwittergoogle_plus

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.

Dela:facebooktwittergoogle_plus