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.

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.

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.

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.

Dålig struktur och inkonsekvent navigation några vanliga fel

Jakob Nielsen har skrivit om de tio vanligaste misstagen inom informationsarkitektur på webbplatser.

Top 10 Information Architecture Mistakes

Structure and navigation must support each other and integrate with search and across subsites. Complexity, inconsistency, hidden options, and clumsy UI mechanics prevent users from finding what they need.

Fortfarande är det så att avsaknad av en konsekvent struktur är det vanligaste felet liksom dålig integration mellan sök och struktur. Dessutom används för många olika navigeringstekniker samtidigt som de används inkonsekvent.

Ny webbplats från Backend Media: Abstrakt Dahlgren

Jag har gjort ytterligare en webbplats. Denna gången är det Abstrakt Dahlgren som är ett galleri för min brors (Thomas Dahlgren) abstrakta konstverk. Till skillnad från andra konstnärer kan Thomas ta en bild, som du exempelvis hittat på nätet, och överföra den till en oljemålning.

Abstrakt Dahlgren

Eftersom det var min bror så behövdes inte många ord innan jag förstod hur hans tanke om färgschema och utformning skulle se ut.

Jag byggde webbplatsen med publiceringsverktyget Drupal (öppen källkod) och använde följande plugins:

  • Fivestar – betygsättning av bilderna
  • Google Analytics – logga statistik till Analytics
  • Global Redirect – ser till att det bara finns en URL till innehållet
  • Image – galleriet och uppladdning av bilder
  • Pathauto – skapar automatiskt en sökmotorvänlig URL för varje sida
  • Token – behövs av Pathauto för att ta fram titeln från objekten
  • Views – skräddarsy ”vyer” som filtrerar ut information på önskat vis
  • Voting API – behövs av Fivestar och ligger i botten för betygsättningen
  • Wysiwyg – för att skriva inlägg och kommentarer utan att kunna HTML

Temat heter Colourise och är minimalt modifierat. Framöver ska även Webform användas, som är en plugin för att bygga skräddarsydda formulär. Tanken är att användare ska kunna ladda upp bilder direkt på hemsidan och få dem överförda till oljemålningar.

Bilder och texter lägger Thomas upp själv via systemet, men framöver kommer jag sannolikt att bearbeta copyn på sidorna för att få en tydlig så kallad call to action.

Så om du har hittat en bild på nätet som du gillar och skulle vilja ha den som en snygg, professionell tavla som matchar dina möbler eller inredningsstil kan Abstrakt Dahlgren hjälpa dig ge ditt hem en unik look!

Säg gärna vad du tycker i kommentarerna också.

Användartester i Drupal 7: installation, teman och skapa innehåll

Gänget bakom publiceringsverktyget Drupal arbetar frenetiskt med att göra verktyget lättare att använda.

Följ med i deras utvecklingsarbete så ser du att de försöker klura ut hur man gör det bättre för gemene man och kvinna att installera, konfigurera och till slut använda i det dagliga arbetet. För att vara ett projekt med öppen källkod är det ambitiöst att se dem ta användbarheten på blodigt allvar.

How we will make Drupal 7 simple to use

I videon nedan kan du se hur användare upplever installationen av Drupal som går relativt smärtfritt:

Sedan tittar de på hur man väljer teman och stöter på problem när de inte förstår språket som Drupal använder:

Och därefter hur man skapar en navigation och framför allt innehåll. En viktig fråga som ställs, när användaren trycker på spara-knappen, är om innehållet publiceras på webbplatsen eller bara sparas för redigering senare:

Som synes finns det tonvis med saker att förbättra för vanliga människor. Förhoppningsvis kan du snappa upp en del av konversationen i videoklippen och förbättra dina egna webbapplikationer.

Validera din webbplats ända in i benmärgen

NetRelations Inspector granskar din html-kod och visar bristerna. Alla brister. Det handlar om hur länktexten ser ut, om du har en korrekt rubrikstruktur, om du använder style sheets i koden snarare än i externa filer och så vidare.

Räkna inte med att få ett bra resultat. Däremot en tydlig hänvisning till vad du bör åtgärda och förbättra för att nå en optimal tillgänglighet.

NetRelations Inspector

(Via användbart)

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.

Google sprider upphovsrättsskyddat material: cachar torrent-filer

Google cachar torrent-filer som leder till upphovsrättsskyddat material. Därmed bör Google betraktas som medhjälpare till upphovsrättsintrång. Åtminstone om man beaktar likheterna med den aktuella Pirate Bay-rättegången.

Jag testade att söka efter följande fras på Google:

wedding crasher filetype:torrent

Wedding crashers torrent Google

Notera länken Se som HTML-version i sökresultatet ovan. Det leder till en cachad version av torrent-filen förutom den vanliga länken som leder till målservern. Med andra ord lagrar Google med all tydlighet metadata som kan leda till upphovsrättsskyddat material.

IDG skriver om den sjätte dagen i Pirate Bay-rättegången – Antipiratbyrån och IFPI pressade av försvaret – och det som intresserar mig mest är om en sökmotor för torrent-filer är att betrakta som upphovsrättsbrott. Kan man då åtala Google för medhjälp till upphovsrättsbrott? Det förefaller rimligt med tanke på att det går att hitta samma information där, om än i mindre organiserad form.

Henrik Pontén:
– Vad är skillnaden på Google och Pirate Bay?
Anders Nilsson:
– Google söker html-kod och länkar vidare till andras material. Söker jag efter ett matrecept kan jag få upp en sida från Aftonbladet. Pirate Bay söker bara bland de torrentfiler som finns indexerade på sajten. Söker jag på ett matrecept där får jag upp ett helt annat resultat. Huruvida Google även kan cache:a torrentfiler låter jag vara osagt.

Men jag låter det vara sagt. Google cachar torrent-filer, vilket gör att varken Pirate Bays eller Googles webbplatser är så okomplicerade som de kan vara vid en första åsyn. För att säkerställa sådana typer av upphovsrättsintrång måste det till signifikant censur, filtrering och blockerande av allt som kan tänkas bryta mot upphovsrätten. Och då blir det lätt att man kastar ut barnet med badvattnet.