Emil Janitzek

Slå samman twitter, youtube, bloggen till ett rss flöde

Emil Janitzek — Wed, 03 Aug 2011 14:24:45 +0000

Jag fick nyligen i uppdrag att presentera alla sociala aktiviteter för en speciell kund samlad på en och samma sida. Jag testade först med att lägga in widgets från twitter och installerade en rss-widget för wordpress, som fungerade ganska bra, men det blev väldigt rörigt och gick inte att få en översikt över aktiviteten. Och det finns ingen bra widget för youtube att använda.

Jag ville istället presentera alla aktiviteter i ett gemensamt flöde på hemsidan. Men för att göra det enklast ville jag sammanfoga flödena till ett flöde som jag sedan med hjälp av en simpel rss-widget kunde visa på hemsidan.

Jag sökte runt en del och testade några olika tjänster innan jag hittade en perfekt träff för det jag ville göra, Yahoo Pipes. Men Yahoo pipes kan man definiera ett antal källor att läsa från, dessa kan man sedan bearbeta för att slutligen slå samman till ett flöde. Steg ett är att hitta rss-feeds för de källor man vill visa, se min tidigare post om hur man hittar rss feed för youtube kanaler, för twitter finns det i deras API-beskrivning en länk till hur man får fram rss-flödet genom user_timeline. För bloggen, om det är en wordpress-blogg, lägger man bara på /feed/ i slutet av adressen för att få rss-flödet.

Så här satte jag upp Yahoo Pipes för att slå samman flera flöden till ett

Letade reda på rss-feed för de flöden jag ville inkludera och drog ut tre stycken Fecth Feed
I twitter flödet ingår även användarnamnet i varje rad, eftersom jag enbart visar flödet för en person ville jag inte ha med detta och la därför till en Loop med en String Replace på item.title och tog bort ”:”
Drog sedan min loop och de andra två flödena till en Union för att koppla samman dem
Efter detta är det viktigt att lägga till en Sort, annars kommer ändå alla inlägg från en feed först och man ser ingen skillnad
Sist valde jag att beskära flödet med Truncate och enbart visa top 10 träffar.
Sista boxen blir då Pipe Output, kollar man i debuggern eller kör sin pipe så ska man se alla flöden sammanfogade till ett.

När nu alla flöden var sammanslagna kunde jag med en simpel rss-widget inkludera dessa på kundes wordpress sida. Och med några enkla hack för att vissa rätt ikon för respektive rad i flödet så måste jag säga att det blev mycket bra. Fler detaljer om hur jag satte upp yahoo pipes spana in min pipe.

Så här får du tag på RSS-flöde för din kanal på Youtube

Emil Janitzek — Sat, 23 Jul 2011 16:11:57 +0000

Jag ville nyligen visa Youtube-aktivitet för en speciell kanal direkt på kundens hemsida. Nu för tiden är man ganska bortskämt med att webbtjänster tillhandahåller både färdiga widgets och API. Men att komma åt ett simpelt rss-flöde är inte alltid lika enkelt längre. Och informationen om just Youtube är både mycket utspridd och inte så väldokumenterad.

Efter att sökte runt en bra stund och nästa gett upp gick jag in och granskade källan på youtube.com och såg då det jag letat efter så länge. Adressen till flödet, unikt för varje kanal. Så dagens tips är kort men förhoppningsvis sparar det dig lite huvudbry ifall du vill göra något liknande med youtube-flöden.

Så här får du fram flödet

Högerklicka på sidan och välj ”visa källa”
Scrolla ner tills du hittar och kopiera hela href-attributet.
Eller anpassa adressen själv genom att bara byta ut delen med kanalens namn i.

Så har du ett flöde med rubrik, beskrivning och en thumbnail över videoklippet. Själv ville jag göra detta för att kunna slå samman flera flöden till ett, men mer om det i ett kommande inlägg. Ifall du vill göra mer avancerade saker mot youtube finns även ett API att tillgå.

Uppgradera minnet i HTC Desire till 16 gb

Emil Janitzek — Fri, 17 Jun 2011 21:06:43 +0000

Jag har fram tills nu klarat mig bra på det 4 gb minneskort som följer med som standard till HTC Desire. Men eftersom man nu kan installera fler och fler appar på sd-kortet börjar utrymmet att tryta. Jag bestämde mig därför för att skaffa ett större minneskort. Telefonen använder standard micro sd kort så det finnes ett stort utbud av märken och storlekar. Jag valde ett Sandisk 16 gb micro sd-kort och fick betala 399 kr.

Uppgradera minneskort utan att förlora data

En viktig faktor är att jag fortfarande vill ha kvar all data från mitt gamla minneskort, alla bilder men även applikationer och deras inställningar. Vissa tipsar om att införskaffa en kortläsare för att säkerhetskopiera alla filerna, men det visade sig att androids möjlighet att agera som diskenhet fungerade minst lika bra.

Så här gjorde jag för att byta minne på min HTC Desire

Jag började med att ansluta telefonen med usb-kabeln och väljer att montera den som en diskenhet till datorn och tog en kopia av allt på minneskortet.
Med detta klart stänger jag av telefonen och bryter med lite kraft loss baksidan och tar ut batteriet för att kunna skjuta ut minneskortet.
Byter bara plats på minneskorten och monterar ihop telefonen.
Startar upp telefonen och monterar den återigen som en diskenhet och kopierar helt enkelt tillbaka alla filer och väljer att migrera de mappar som redan existera på minneskortet (androd skapar på nytt upp alla mappar som behövs).
Startar om telefonen och med en gång finns alla applikationer, inställninar och bilder tillgängliga

Vad betyder Shobre för dig?

Emil Janitzek — Tue, 07 Jun 2011 16:33:55 +0000

Jag äger i alla fall domänen, den var inköpt under mina domän glada dagar men hade inte direkt någon plan för vad jag skulle göra med den. För att den inte ska stå helt tomt har jag nu lagt upp en simpel sida med den något så officiella beskrivning på vad shobre betyder enligt Språkrådet (2004). Men jag ville samtidigt göra något mer av den, när jag lekte runt på facebooks plugin-lista fick jag tanken att se vad shobre betyder för andra. Sagt och gjort jag slängde upp en facebook comment plugin. Vilket är väldigt simpelt, man konfigurerar bara vilken adress man vill kommentera kring och bredden på sidan och får sedan en färdig snippet att inkludera på sidan. Kolla in Shobre.se för att se hur det blev.

Nya systembolaget.se med fokus på användarvänlighet är inte användarvänlig

Emil Janitzek — Sat, 12 Mar 2011 14:18:39 +0000

Jag upptäckte nyligen att systembolaget.se har fått en ny design, det är en riktigt uppfräschad design och där fokus enligt dem själva ligger på ”hjälpa användare hitta och välja oavsett kunskap”. Den information som jag oftast vill hitta när jag besöker systembolaget.se är deras öppettider, det kan vara som idag när jag är lite osäker på när närmaste systembolaget stänger och framförallt runt högtider kan hela systembolaget.se ligga nere för att alla vill hitta aktuella öppettider. Detta tycker man ju att de borde förstå och ta till sig när de designar en ny hemsida. InUse har tagit fram konceptet och interaktionsdesign med fokus på användarvänlighet men lyckas ändå inte, hemsidan har i mitt tycke blivit mer otydlig genom att ta bort ”Öppettider” ur huvudmenyn, dessa ligger nu under ”Butiker & ombud” vilket tidigare kallades ”Butiker & Öppettider” vilket var mycket tydligare indikation och jag kunde snabbt söka igenom menyvalen för att hitta rätt länk. Istället har de lagt en ruta med ”Våra generella öppettider” längst ner till höger på sidan, men även med min 24″ skärm med 1920×1200 pixlar så måste jag scrolla innan jag ser öppettiderna, dvs det är information som majoriteten av besökarna kommer att missa.

Men tillbaka till huvudsyftet med deras nya hemsida, sökningen och den nya ”smarta” sökrutan, jag väljer givetvis den största sökrutan att det finns två likadana sökrutor utan något markering vad det är för skillnad är inget jag tänker, eller ens märker till en början. Jag fyller därför i ”Backaplan” som är mitt närmaste systembolag för att hitta deras öppettider. Till min stora förvåning för jag inga träffar, istället måste jag gå till sidan ”Butiker och ombud” eller använda den andra sökrutan som ser i princip likadan. Där lyckas jag mycket riktigt hitta butiken och ser med en gång öppettiderna. Men varför måste det vara två liknande sökrutor? Kan inte hemsidan förstå att om jag anger ett butiksnamn visa med butikerna, eller får jag inga träffar på drycker sök igenom butikerna också, eller visa mig i alla fall en tabb i sökresultaten med matchande butiker. Det borde vara en teknisklösning, och jag pratar inte om någon avancerad algoritm, som hemsidan borde lösa istället för att användaren måste tänka på det.

Så för att göra en användarvänlig hemsida, sätt användarnas primära behov i fokus, man ska inte behöva tänka efter när man besöker hemsida. Det finns många tekniska lösningar som vi, som utvecklare kan implementera för att hjälpa besökaren. Jag tänkte avsluta med just ett sådant tips, om jag fick möjlighet att påverka nya systembolaget.se skulle jag satt större fokus på öppettider, jag skulle använda geo-lokalisering för att ta reda på vart användaren befinner sig, ifall besökaren använder en mobiltelefon (vilket blir allt vanligare) blir det ännu enklare att visa relevant information baserat på deras position. Då kan man direkt på startsidan ge användaren den information de oftast behöver.

Jag har därför lagt rutan om öppettider bredvid sökrutan, direkt i blickfånget där den hör hemma. Den försöker själv hitta närmaste butik och visar istället dagens och morgondagens öppettider, med ett enkelt knapptryck tar mig direkt till butikens sida för mer information och öppettider eller visar andra butiker i mitt närområde.

Android vs. Apple ur ett användarperspektiv (aka HTC Desire vs iPad)

Emil Janitzek — Sat, 19 Feb 2011 15:43:41 +0000

Jag har varit riktigt dålig på att underhålla min blogg på senare tid och jag ber om ursäkt för det, tiden har bara sprungit iväg men många intressanta saker har hänt. Jag fick årets julklapp, en iPad i julklapp av tomten (somliga säger att jag köpte den till mig själv, men jag vet att det var tomten). Vissa hävdar att man sålt sin själ till djävulen, eller att man nu kommer bli en mac evangelist och älska allt med ett litet äpple på. Jag skulle inte klassa mig själv i någon av kategorierna, jag har haft en Macbook pro i flera år och tycker den är riktigt skönt att programmera med, men har även som erfarna läsare av den här bloggen känner till en HTC Desire som telefon och kör även Windows på några stationära datorer.

Jag tror på rätt pryl för rätt tillfälle men tänkte ta tillfälle i akt att gå igenom mina synpunkter mellan dessa två operativsystem, det har gått lite över två månader och jag har haft möjlighet att både använda dem rikligt samt programmerat egna appar för båda. Under denna mini-artikelserie (vi får se hur många det blir, men minst en till) om Android vs iOS tänkte jag i kommande inlägg gå in mer i detalj hur det är att programmera för Android respektive iPad. Men vi börjar med det grundläggande, användarupplevelsen… let the fight begin.

Android vs. iOS ur ett användarperspektiv

Jag måste börja med en liten disclaimer, jag utgår ifrån HTC Desire, som använder sin egen anpassade lösning av Android med HTC Sense, men mycket av tankegångarna är samma oavsett vilken Android version man har. Man ska även tänka på att jag kommer ifrån att haft en Android telefon i ett halvår innan jag skaffade en iPad, så vissa vanemönster från Androiden kanske inte är det samma ifall man går från andra hållet, dvs iPad till Android.

Grafikupplevelsen

Det är visserligen väldigt svårt att jämföra eftersom förutsättningarna är så olika mellan iPadens med sina 9,7 tums skärm och android telefonen. Men jag måste erkänna att det ibland känns som iPaden flyter på snyggare i animationerna och känns skönare. Men när det gäller hur man använder den och gränssnittet finns det några punkter där Android har lyckats mycket bättre än iPad.

Ingen bakåtknapp - på Android kan man alltid komma tillbaka genom att klicka på bakåtknappen, antingen inom applikationen eller tillbaka till sin tidigare applikation. Detta är något jag saknar på iPad, här måste man helt förlita sig på applikationens egna knappar, det finns inget krav på var dessa måste vara placerade ibland finns det en ”Done” knapp som stänger/går tillbaka, ibland swipar man med fingrarna. Och det är inte möjligt att gå tillbaka mellan applikationer då måste man istället förlita sig på applikations menyn för att hoppa tillbaka.
Ingen menyknapp- samma här, det finns inget enkelt sett att komma till en meny, och detta blir extra tydligt och irriterande när man vill ändra några inställningar. På iPaden finns det ibland någon ikon i applikationen för att ändra inställningar, ibland ligger de under system settings osv. På Android som har en fast knapp för menyn hittar man nästan alltid inställningarna som ett alternativ här.
Long click - på android blir long click nästan uteslutande ett ”högerklick” ur vanlig bemärkelse, det gör att man får upp fler alternativ om man använder long click, på iPaden fungerar det så ibland… men ofta blir det ett vanligt klick istället, vet inte hur många gånger jag bytt låt i Spotify appen genom att försökt long clicka för att lägga låten i kö

Android Market vs. Appstore

Apple har lyckats bra med sin store, det är enkelt och tydligt att handla, till och med enklare än i Android. De har en striktare och lokalt anpassad prissättning, istället för applikationer som kostar 17,43 kr eller 6,34 så finns det en tydlig prissättning, 7 kr eller 15 kr. Men det känns samtidigt inte helt rätt att man hos Apple måste registrera sitt konto med ett giltigt kreditkort även om man bara vill ladda ner gratisapplikationer.

Öppen vs. stängd mjukvara

Här är det två helt skilda värdar som möts, Android förespråkar öppenhet med öppen mjukvara i grunden och det är enkelt att påverkar det mesta, applikationer kan installeras även utanför App Market och en applikation får mycket större möjlighet att påverka operativsystemet. Gillar man inte en funktion kan man enkelt byta ut den. Apple är tvärt om, i iPad får man snällt följa deras regler. Vanligtvis är det inga problem, det finns ett bra utbud med applikationer i app store och det mest fungerar bra redan från grunden. Men den dagen man vill göra något mer avancerat sätter de stopp. Se på flashfilmer är ett sådant exempel där apple har bestämt att det är dåligt för användarupplevelsen på en iPad. Men detta kan också vara ett smart drag från Apple, det gör att en iPad känns mycket mer stabil, man får inte problem eller program som kan hacka telefonen. Men android lägger de mycket mer ansvar på användaren, man måste vara uppmärksam när man installerar en applikation eftersom de kan göra i princip vad som helst med telefonen när den väl är installerad.

Jag gillar öppenheten, jag gillar friheten att välja vad jag vill installera och hur jag använder det. Men det är svårt att kora en vinnare ännu, fram för allt när en iPad och en Desire har två helt olika användningsområden. Men fortsättning följer i kommande artiklar, och då ska jag försöka summera allt och se om det finns någon klar vinnare.

jQuery Mobile är här, framtiden för mobilt internet; genomgång på HTC Desire

Emil Janitzek — Sun, 17 Oct 2010 21:40:21 +0000

Det var inte länge sedan utvecklingen började men nu är framtiden av mobilt internet här, i alla fall om man får tro gänget bakom jQuery. jQuery Mobile är tänkt att fungera som en plattform mellan webbtjänsten och den mobila enheten, ett gränssnittslager som förbättrar användarupplevelsen. Fördelen med jQuery Mobile är att det finns HTML-kod i botten att falla tillbaka på ifall javascript stöd saknas. Men stödet och intresset för jQuery Mobile från telefontillverkarna har varit mycket stort och flera har redan från börja bidragit till projektet, bland annat Palm, Blackberry, Nokia för att nämna några.

jQuery Mobile består för tillfället av:

Där formulärstödet är extra intressant och erbjuder många förbättringar utöver HTML standarden, så som sliders och bättre styling anpassat för mobila enheter.

Fördelarna med jQuery Mobile

Crossplattform; använder HTML5 + CSS3, med javascript transformation, fungerar på alla större smartphones som Android, iPhone, BlackBerry etc. Vanlig HTML som fallback för de som saknar stöd
jQuery är kända för att vara lightweight och snabba och jQuery Mobile är inget undantag.
Snabb utveckling och enkelt att göra befintliga webbtjänster mobilvänliga
Inbyggd kontroll för themes gör det enkelt att styla applikationen som man vill.

Stödet för jQuery Mobile är redan från början väldigt stort, det enda problemet för tillfället är bara Windows Mobile 7, där stödet för HTML5 och CSS3 i allmänhet är väldigt dåligt. Klicka på kartan för att se en total översikt hur stödet för webbläsarna är.

Men hur fungerar det då, jag passade på att testa deras exempel som är släppta tillsammans med Alpha releasen, och än så länge fungerar det mycket bra. Mest imponerande är transition-effekterna som gör att man enkelt kan få applikationskänslan av en vanlig html-sida, där man förflyttar sig i sidled mellan sidorna. Dessvärre fungerade forms-elementen inte riktigt lika bra på standardwebbläsaren i Desire. Den hade problem med att fokusera textfälten och scrollade ofta iväg utanför skärmen så man inte kunde se vad man skrev. Men för att vara en Alpha release känns det spännande att se vart det är på väg.

Så vad händer nu?

Jag hade ännu inte börjat använda jQuery Mobile i ett skarpt läge, det behövs fortfarande en del förbättringar, men det är också förväntat då det som sagt bara är en Alpha release. Men jag kommer definitivt sätta mig in strukturen och experimentera med deras kodexempel. För det känns som ett mycket bra sett att snabbt få upp en webbtjänst med applikationskänsla som direkt funkar i de flesta moderna smartphones.

Läs mer på jquerymobile.com
Se alla exempel och demon

DN är inte bara sökmotorvänliga utan användarvänliga!

Emil Janitzek — Tue, 05 Oct 2010 11:16:34 +0000

Jag har länge hävdat att sökmotoroptimering och användarvänlighet går hand i hand. Google är precis som en blind besökare, de kan inte se innehållet, de måste bilda säg en uppfattning utifrån metadata. Optimerar man därför sin hemsida mot användaren och följer riktlinjerna från WAI samt de riktlinjer för webbutveckling som Verva, nu mera eutveckling tog fram, så kommer man få se lika stor fördel hos sökmotorerna.

DN har sedan ett tag tillbaka blivit riktigt duktiga på att länka viktiga nyckelord i sina artiklar mot andra artikel- eller temasidor med djupare information om ämnet. Detta är grymt användbart för besökaren och jag använder det nästan varje gång jag läser en intressant artikel för att få djupare kunskap.

Tidigare har det varit vanligt att avsluta artikeln med relaterade länkar och artiklar men på det här sättet får man informationen direkt när man behöver den. Jag kan till och med enbart genom att föra musen över länken och se vilken adress den pelare på kunnat få ut mer information för händelser som jag direkt inte kände till, då DN självklart också använder sökmotorvänliga länkar. Är det tillräckligt intressant öppnar jag det i en ny tabb bakom för senare läsning. Att detta får positiva effekter för sökmotorer är nog alla överens om. Så gör som DN:

Använd alltid läsvänliga adresser (sökmotorvänliga adresser)
Länka relevanta ord i din text till dina andra sidor på samma domän (men enbart till relevanta sidor, det är stor skillnad på SEO SPAM och relevanta länkar)

Börja därför alltid all optimering med att fråga dig själv: hur gör jag min hemsida mer användarvänlig. Så kommer du garanterar få sökmotoroptimeringen på köpet. Och då spelar det ingen roll ifall Google ändrar sin algoritm, anpassa aldrig dig efter sökmotorerna utan anpassa dig efter besökarna så kommer sökmotorerna att anpassa sig efter dig.

Lite klassisk nördhumor för att förbereda sig på kommande projekt

Emil Janitzek — Sat, 25 Sep 2010 11:51:11 +0000

Alla som varit inblandade i ett större projekt vet att koden efter ett tag lätt blir självdestruktiv. Den blir stor och tungjobb hur mycket tid man än lägger ner på planering och strukturering. Så för att lätta upp stämningen lite kommer här en klockren make-over på Stromae – Alors on Danse. And So You Code är mer ur ett programmeringsperspektiv

Se också originalposten And So You Code…

En anpassningsbar ”senaste inlägg” widget för wordpress

Emil Janitzek — Mon, 06 Sep 2010 20:22:53 +0000

Stör du dig som mig på att man inte kan göra några inställningar alls (okej man kan ändra titel och antalet inlägg att visa, men det är allt) i standardpluginen för senaste inlägg i wordpress. Pluginen i sig är väldigt smidig och jag använder den ofta, men ibland vill jag ändra på utseendet något och nu sist ville jag även visa datumet för inläggen. Istället för att gå in och modifiera senaste poster widgeten manuellt eller skriva en egen wp_query bestämde jag mig för att extenda wordpress inbyggda widget men lägga till de inställningar jag saknar.

När jag letade runt i wordpress pluginkatalog hittade jag några widgets som skulle ge fler inställningar till senaste inlägg. Men de var alla på tok för avancerade och gjorde egentligen inte det jag ville. Jag vill ha möjligheten att individuellt för varje widget bestämma hur den skall presentera innehållet. Jag gjorde det genom att introducera en simple template-motor där man helt enkelt själv väljer hur varje inlägg ska se ut.

[link] [/link]
[title]
[excerpt]
[date] här kan du även välja hur datumet ska formateras [date="Y-m-d"] t.ex. för 2010-08-04
[category]
[tags]

Ifall det finns några fler taggar ni skulle vilja ha med säg gärna till så implementerar jag detta. Nu kan man alltså enkelt bygga upp sitt eget utseende. t.ex.

[link][title][/link] - [date]

[excerpt]

I kategorin: [category]

Än så länge har finns den tillgänglig för nerladdning, och givetvis under open soruce. Ifall intresse finns och jag får tid kommer jag även lägga upp den i wordpress plugin directory.

Ladda ner extended senaste inlägg widget för wordpress