Mathias Amnell » Web 2.0

Gowalla – Gotta Catch ‘Em All!

Amnell — Sun, 24 Jan 2010 01:27:45 +0000

De senaste månaderna har jag börjat utforska allt fler sociala tjänster online. Tidigare har jag till stor del bara varit en passiv åskådare, men nu har jag gått över till ett mer aktivt deltagande. I samma veva har jag snubblat över en massa intressanta tjänster, bland annat den underbara tjänsten Gowalla. För att få fler att få upp ögonen för Gowalla hade jag tänkt presentera en kort guide och introduktion samt på slutet även ta med lite tips och trix.

Vad är gowalla?

Gowalla är en positioneringstjänst och ett spel i ett. För tillfället finns Gowalla till iPhone och iPod Touch. För Android-mobiler är det för tillfället den mobila hemsidan (http://m.gowalla.com) som gäller. Meningen är att du ska ”checka in” på ställen du besöker för att på visa för dina kompisar vart du är och vad du har besökt, samla olika badges (emblem) och stamps (stämplar) samt för att få chansen att hitta olika ”items”.

Ett item är kort och gott en liten ikon som syns i din profil. Det kan till exempel vara en longboard, en trave böcker eller en handske. Items slumpas ut och det är inte alltid man får ett när man checkar in. I skrivande stund finns det 98 olika typer av items och det är främst samlandet av alla items som gör Gowalla så otroligt beroendeframkallande.

Exempel på items i Gowalla

Finns inte platsen du är på inlagd Gowalla så kan du själv skapa den. Skapar du en spot blir du automatiskt ”creator” av just den spoten. Lämnar du dessutom ett item blir du ”founder” (grundare). När sedan någon annan checkar in på samma ställe kan personen välja att själv lämna ett item för att också bli founder. Man kan även byta items från sitt pack med items som någon lämnat på en spot.

Alla items du hittar hamnar automatiskt i ditt ”pack”. Allt som ligger där kan du lämna eller byta på de ställen du besöker. Hittar du ett item du inte redan har och du känner att du vill behålla det så kan du välja att lägga det i ditt ”Vault”. Har du väl lagt in ett item i ditt vault kan du inte ta ut det därifrån! Det är helt enkelt din troféhylla där du kan spara alla items du tycker är värda att spara.

När du checkar in på en plats får du möjligheten att posta din incheckning på Twitter och/eller Facebook tillsammans med en kort beskrivning. Utöver detta skickas även en push-notifikation till alla dina vänner i din vännerlista. Har de push påslaget för din användare ser de när och vart du checkar in.

Gowalla i framtiden

Så vad ska man med Gowalla till egentligen? Varför ska man checka in på olika ställen och samla på sig olika items samt berätta för alla vart man är? Många är negativa till tjänster som Gowalla, medans andra ser det som en möjlighet till en helt ny sorts marknad. Något som Gowalla redan har börjat med är möjligheten att vinna riktiga items.

En drive som pågår för tillfället är att man har chans att vinna riktiga produkter från Incase om man checkar in på en Apple Store. Det finns även vissa barer, restauranger och caféer runtomkring i världen som erbjuder rabatterade priser om man samtidigt är incheckad på Gowalla.

Ytterligare en rolig grej som Gowalla höll i under julen var deras Golden Gift-drive där man hade chansen att hitta en Golden Gift när man checkade in någonstans. Innuti en golden gift kunde det antingen ligga en iPod nano, $100 presentkort på iTunes eller en Gowalla T-shirt. Jag hade turen och hittade en Golden Gift och jag vann en T-shirt!

Jag tycker att Gowalla är mycket trevligt och beroendeframkallande. Jag är ständigt på jakt efter nya ställen att checka in på. Kolla in min Gowalla-profil och följ mina enorma framgångar

Saker du kanske inte visste

När du skapar din spot spelar det egentligen ingen större roll ifall du stavar fel, lägger den i fel kategori eller om positionen inte är helt hundra. Det går nämnligen att ändra allt detta på hemsidan.
Spara inte för många items utanför ditt Vault. Du kan nämnligen inte ha fler än 10 åt gången. Så om du går omkring och undrar varför du aldrig får några items så kan det bero på att du bär omkring på 10 st items i ditt pack.
En spot kan inte ha fler än 10 items lagrade åt gången.
När du redigerar en spot via hemsidan och vill veta hur stor omkrets spoten har kan du använda dig av Radius Bookmarklet (dra länken till din bokmärkesrad). När du sedan redigerar en spot är det bara att klicka på bokmärket för att se omkretsen.
Har du en WordPress-blogg kan du installera pluginet WP-Walla för att visa dina incheckningar för dina användare.
Har du inte tillgång till GPS försöker gowalla lokalisera dig genom trådlösa nätverk. Det kan därför fungera bättre att koppla upp sig mot trådlösa nätverk när du är inomhus.
När du är i listan med närliggande spots kan du vrida på iPhonen för att se en karta över alla spots. Gröna har du besökt, röda har du inte besökt.

Bra att tänka på

Att berätta för hela världen att man inte är hemma är kanske inte alltid det säkraste man kan göra. Det finns fall där inbrottstjuvar har följt personer på sociala tjänster för att se när de inte är hemma. Beroende på hur synlig du är i övrigt på nätet borde du tänka två gånger innan du skapar en ”Hemma”-spot.
Att ha en ”Hemma”-spot är kanske roligt för stunden, men det tar bort rätt mycket av meningen med Gowalla. För andra användare och kompisar är ditt ”Hemma” kanske inte deras hem etc. Gatunamnet skulle därför kunna vara ett bra alternativ.
Att alltid posta till Twitter och Facebook är inte alltid uppskattat av alla. Använd funktionen med måtta och välj i stället att bara publicera de viktigaste eller mest intressanta platserna.
Har du slut på items? Enda lösningen är att checka in på fler ställen för att hitta nya. Plötsligt sitter du där med väskan full av fina items.
Bor du i en stad med få Gowalla-användare? Passa på att skapa en massa spots och försök bli founder till så många som möjligt. Gowalla har nämnligen hintat om att founders kan komma att få erkännande för sitt hårda arbete i framtiden.

Relaterade poster:

Kompakta formulär med jQuery och CSS

Silverlight 1.0

Amnell — Fri, 05 Oct 2007 11:15:00 +0000

Så, nu kommer den första gamla nyheten. Silverlight, Microsofts svar på Adobes Flash, har lanserats som version 1.0. Silverlight är ett plattformsoberoende .NET-baserad media och applikations plug-in för webben. Silverlight har stöd för flera olika språk så som AJAX, VB, C# Python och Ruby.

Hur det kommer gå för Silverlight återstår att se. Jag har tyvärr inte haft tid att fördjupa mig i hur Silverlight fungerar, men förhoppningsvis kan jag sätta mig ner och testa lite framöver.

Silverlight ser tyvärr inte ut att funka i Linux för tillfället, men det är under utveckling och ser ut att lanseras som ”Moonlight”.

Relaterade poster:

Alfaversion av Adobe Apollo släppt

Amnell — Wed, 21 Mar 2007 11:44:14 +0000

Nyligen (igår) släppte Adobe en alfa-version på sin nya teknologi, Apollo.
Apollo är en teknik som gör det möjligt för webbutvecklare att använda sina kunskaper inom Flash, Flex, HTML, JavaScript och Ajax till att skapa plattformsoberoende (Windows, Mac och snart Linux) webbaserade desktop-applikationer.

Om allt går vägen för Adobe så kommer Apollo skapa en helt ny trend av webbaserade applikationer och tjänster som skapar en helt ny dimension till den nya webben (web 2.0).
Jag tror att det inte kommer ta allt för lång tid innan Apollokunskaper kommer vara eftertraktat på marknaden.

Vill du lära dig mer så finns för tillfället 14 filmklipp på lynda.com som förklarar lite mer ingående vad Apollo är och vad det kan göra. Introduktion och Guider till Apollo på lynda.com.

[tags]Apollo, Adobe, Web 2.0, AJAX[/tags]

Relaterade poster:

Web 2.0 under 5 minuter

Amnell — Thu, 15 Feb 2007 10:59:23 +0000

Hittade en liten video som på ett roligt sätt summerar Web 2.0, på lite mindre än 5 minuter dessutom.

[tags]Web 2.0[/tags]

Relaterade poster:

Twingly – Länkar nyhetssidor till bloggosfären

Amnell — Thu, 08 Feb 2007 12:04:37 +0000

I går lanserade Primelabs sidan/tjänsten Twingly, en svensk tjänst som blir en länk mellan bloggosfären och de största svenska nyhetssidorna.
Som bloggare har man möjlighet att pinga ‘s servrar, antingen manuellt eller automatiskt så fort man skriver ett nytt inlägg. Länkar du i ditt inlägg till en nyhetsartikel på t ex dn.se så känner Twingly automatiskt av det och visar en länk till ditt blogginlägg från nyhetsartikeln. Detta gör det möjligt för nyhetssidorna att ”ge tillbaka” någonting till bloggarna som länkar till dem.

Twingly har för tillfället indexerat 13155 svenska bloggar och det ökar ständigt. För tillfället sammarbetar de med aftonbladet, SvD, DN, svt, expressen och metro.
Ändring: som Carl Fredrik Wettermark från Primelabs skriver i kommentarerna så är det bara SvD och DN som använder sig av Twingly för tillfället.

Tjänsten är inte fullt igång ännu och funktionen finns bara på vissa enstaka nyhetsartiklar, t.ex ”Upphovsmän kan få jaga fildelare” på dn.se.

Det här är en underbar tjänst som gör det möjligt för mindre bloggare med bra åsikter att synas, och vem vill inte synas på de stora nyhetssidorna. Tummen upp Twingly.

[tags]Bloggosfären, Twingly, Primelabs[/tags]

Relaterade poster:

Trailfire – avancerad social bokmärkning

Amnell — Tue, 06 Feb 2007 16:03:21 +0000

Trailfire är ett nytt verktyg för social bokmärkning ala web2.0, genom att installera deras plugin i Firefox eller Internet Explorer så kan man lämna spår (”trails”) med kommentarer efter sig på sidor man besöker. Alla spår visas sedan som små ikoner på sidan och kan ses av andra trailfire-medlemmar, medlemmarna kan även kommentera varandras trails och en diskussion kan blomma upp på sidan, man kan även se vad andra användare har ”trailat” och på så sätt hitta nya intressanta sidor.

I en video på podtech.net har Robert Scoble intervjuat Alex Rublowsky (vice president för marknadsföring på trailfire). Rekomenderar starkt ett besök, Intervju på podtech.net.

[tags]Trailfire, AJAX, Firefox, Mashup, social bookmarking, web 2.0[/tags]

Relaterade poster:

Kompakta formulär med jQuery och CSS

Amnell — Tue, 23 Jan 2007 20:52:51 +0000

För någon dag sedan snubblade jag över en artikel på alistapart.com där Mike Brittain går igenom hur man kan göra sina inloggningsformulär (och andra formulär också för den delen) lite mer kompakta och samtidigt behålla tillgängligheten.

I artikeln använder sig Mike av Javascript och CSS för att visa/dölja label’s (hädanefter kallar jag dem för etiketter) ovanpå input-fälten. I stället för att som i Mark’s exempel använda ett ”vanligt” Javascript så hade jag tänkt gå igenom hur man kan använda sig av det utmärkta Javascript-biblioteket jQuery, och dessutom få till lite snygga effekter.

Innan vi sätter igång så rekomenderar jag att ni läser igenom hela artikeln på alistapart.com.
Jag kommer utgå från Mark’s Färdiga Exempel och vidareutveckla det.

Eftersom vi inte kommer använda oss av Marks javascript så kan vi helt ta bort det.
Exempel utan javascript

1) Ladda ner jQuery och inkludera det i dokumentet
För att vi ska kunna använda oss av jQuery på sidan så måste vi inkludera det i dokumentet, det finns två sätt att göra detta på.

Alternativ 1)
Ladda ner senaste versionen av jQuery och lägg jquery-latest.js i samma mapp som semicolor_login.html. Lägg sedan till följande innanför head-taggarna:

Alternativ 2)
Istället för att ladda ner jQuery så kan vi bara länka till senaste versionen som ligger ute genom att lägga till följande i innanför head-taggarna:

Fördelen med den här lösningen är att du aldrig kommer behöva uppdatera jQuery om det kommer ut i en ny version, du länkar alltid till den senaste. Nackdelen är att scripten på din sida inte kommer fungera om jQuery’s sida är nere eller är överbelastad.

2) Börja scripta
Nu kan vi börja lägga till lite jQuery-kod i dokumentet. Börja med att lägga till följande längst ner i head-taggen:

Ok, vad är det vi vill uppnå då, jo till att börja med så vill vi att alla etiketter ska ligga ovanpå respektive input-fält. I exemplet finns redan all css vi behöver för att uppnå detta.

Klassen overlabel
Alla etiketter i exemplet har klassen ”overlabel” som standard.
Klassen ”overlabel” gör inte mycket annat än ändrar färg på alla labels, i det här fallet till en grå nyans. Det här är standardklassen för alla etiketter, endast denna visas för användare utan javascript.

Klassen overlabel-apply
Den är den här klassen som vi vill att alla etiketter ska få så fort sidan laddas. Klassen gör så att alla etiketter hamnar i ett eget lager och därav hamnar input-fälten automatiskt under dem.

Anledningen varför användarnamn- och lösenords-etiketterna inte har overlabel-apply som standard är att utifall att användaren inte har javascript aktiverat i webbläsaren så kommer etikettern bara ha klassen overlabel och därav visas korrekt brevid input-fälten. Istället kommer vi med hjälp av jQuery lägga till klassen overlabel-apply till etiketterna.

Så låt oss börja. Som sagt så ska först och främst alla etiketter få klassen overlabel-apply. Tack vare jQuery krävs inte mer än en liten rad med kod.

$(document).ready(function(){
	/*Alla jQuery-script nedanför den här raden */
	$("label.overlabel").addClass("overlabel-apply");
});

Ser väl rätt enkelt ut?

$("label.overlabel")
Skapar ett jQuery-objekt som innehåller alla etiketter (label) och som har klassen overlabel.

addClass
är en jQuery-funktion som i det här fallet lägger till klassen ”overlabel-apply” till alla element i objektet $(”label.overlabel”).

Sidan ser nu ut Exempel med jQuery och overlabel-apply.
Som ni ser så försvinner inte etiketterna när man klickar på de underliggande input-fälten, det ska vi fixa med ytterligare några rader jQuery-kod:

$("input#username-field, input#password-field").focus(function() {
	if($(this).val() === "") {
		$(this).prev().fadeOut("fast");
	}
});

Kanske aningen krångligare än koden innan, men samtidigt mycket logiskt.

$("input#username-field, input#password-field")
Skapar ett jQuery objekt som innehåller alla input-fält med ID satt till username-field eller password-field.

focus(function() { });
Focus är en jQuery funktion som känner av ifall något av elementen inne i jQuery-objektet får fokus (i det här fallet om man klickar i något av input-fälten) i så fall så ska funktionen innanför parenteserna köras.

if($(this).val() === "") { }
En if-sats som kollar om $(this) (this är i det här fallet det input-fältet som har fått fokus) har värdet ”” (ingenting), i så fall ska koden innanför { } köras.

$(this).prev().fadeOut("fast");
Det är här magin sker, $(this) är objektet som fått fokus, prev() väljer det element som ligger ovanför input-fältet (etiketten ligger ovanför input-fältet i html-koden och blir då det element som nästa funktion kommer påverka). Nästa funktion är fadeOut som ”tonar ut” etiketten och får den därmed att försvinna (”fast”) anger hur snabbt detta ska ske.

Sidan ser nu ut Exempel med fadeOut. Och som ni ser så funkar fadeOut prima, men någonting fattas, såklart vill vi ju att etiketterna kommer tillbaka om man inte har skrivit någonting i input-fältet och lämnar det. Vi lägger därför till ytterligare en funktion.

$("input#username-field, input#password-field").blur(function() {
	if($(this).val() === "") {
		$(this).prev().fadeIn("fast");
	}
});

Det här är i princip samma som funktionen innan, med två små ändringar i stället för focus så använder vi blur, som är motsatsen till focus, dvs kollar om fältet mister fokus och lämnas. Och i stället för fadeOut så använder vi här fadeIn, vilket tonar in etiketten.

Sådär, nu är vi färdiga!
Såhär ser det färdiga inloggningsformuläret ut.

Sammanfattning
Det finns självklart för och nackdelar med att köra jQuery istället för som i Mark’s exempel bara använda ”vanligt” javascript.

Fördelar:

Man har ett robust bibliotek bakom sig som man kan använda till så mycket mer på sidan.
Funktionerna är väldokumenterade och just jQuery har en fantastisk community där man snabbt kan få svar på frågor och hjälp med script.
Det finns flera plugins till jQuery som kan göra ganska fantastiska saker. De är dessutom mycket enkla att implementera.
Scripten är lätta att förstå, även för personer som inte har full koll på jQuery.
Det går att göra egna funktioner och plugins för jQuery ganska enkelt.

Nackdelar:

Man har inte 100% koll på precis vad som sker under ytan, något som många tycker om att ha.
Kommer inte på fler nackdelar just nu.

Det här var min första guide och jag hoppas att någon kommer finna användning av den. Kom gärna med förslag.

[tags]jQuery, ajax, web 2.0, css, webbdesign[/tags]

Relaterade poster: