Snart finns det fler prylar som är uppkopplade mot nätet än människor som är uppkopplade mot nätet. Det vi kallar för The Internet of things.

IBM har knåpat ihop den hittills bästa instruktionsfilmen. (Mental note: animerade instruktionsfilmer är fortfarande det bästa sättet att överföra kunskap)

Efter all den HTML5-hajp som rått under våren tycker jag det är lite märkligt att vare sig Flowplayer(även om det finns ett inofficiellt plugin) eller JW Media Player lanserat någon HTML5-fallback för sina videospelare. Jag känner själv att jag har behov av att erbjuda iPad-kompatibelt video på något enkelt sätt utan utveckla egna HTML5-spelare.

Därför har jag sammanställt några olika alternativ om du behöver en smidig HTML5-player.

Flare Video
Måste väl sägas vara en iTunes/Quicktime. Men det är snyggt och bra. Kanske den bästa.
http://flarevideo.com/

Video JS
Också denna vädigt stilren och smidig. Känns också som den snabbaste. Flare Video tenderar att lagga emellanåt.
http://videojs.com/

Sublime
Väldigt slick och snygg lösning, framstår som seriöst och välgjort. Ännu inte lanserat men det kommer de närmaste veckorna.
http://jilion.com/sublime/video

Vi skall eventuellt jobba med ett projekt där vi behöver spåra Postens paket baserat på kollinummer och skicka vidare informationen i mail och SMS. Jag kollade runt lite och hittade en enkel URL man kan anropa med kollinummer som inputparameter och läsa ut hela paketets leveransinformation i ett strukturerat XML-format.

Exempel på anrop:
http://server.logistik.posten.se/servlet/PacTrack?kolliid=85021866221SE

Posten beskriver själva denna tjänst närmare här. Tyvärr finns inte någon tydlig dokumentation men jag tycker nog att själva XML-filen är ganska självförklarande. Här finns beskrivning av DTD och några olika exempel i alla fall. Här kan du läsa mer om tjänsten.

http://www.posten.se/c/online_godssokning

Så om du är sugen på att implementera en egen anpassad paketspårning är detta sannolikt en bra start.

Det har skrivits en hel del om beefen mellan Adobe och Steve Jobs och jag har själv funderat över hur detta kommer att påverka webbens framtida utveckling(jag har själv tagit upp det här). Om man idag vill bygga iPad-kompatibla webbplatser måste man bygga sin webbplats utan Flash. Däremot är det ju så att Flash fortfarande är överlägset de öppna standarderna på många områden och utfasningen av gamla webbläsare kommer att ta låååång tid(Stopp Lab skriver bra om detta). Framför allt animeringar. Här finns inget bra alternativ. SVG har ju gjort sina försök men det har aldrig riktigt lossnat, sannolikt eftersom Flash är bättre än SVG, men kanske ännu viktigare att man har ett bättre toolkit för att utveckla material.

Därför var det lite interessant att springa ihop med Smokescreen-projektet som syftar till att konvertera Flashfilmer till HTML/Javascript. Jag gissar att det till stora delar är Canvas som används för att åstadkomma detta. Fördelen med detta är att man behåller alla fantastiska verktyg från Adobe för genrering av själva innhållet i filerna men att man kan konvertera dessa till iPad och iPhone-kompatibla filmer. Det skall sägas att Smokescreen inte rullar speciellt snabbt på de mobila enheterna utan det laggar rätt ofta. Men principen är väldigt intressant.

Det är precis detta jag hade hoppats på med konflikten mellan Adobe/Apple. Att det sätter ljuset nya intressanta tekniker. Och förstås, detta är Open Source. Kolla in demos här.

Sedan snart ett år tillbaka jobbar vi tillsammans med klädmärket Acne och arbetet med deras globala webshop Acnestudios.com. Detta är sannolikt sveriges största Magento-shop i så väl omsättning som besökstrafik vilket ställt höga krav på produktionen och som visar att Magento efter några versionsreleaser äntligen är redo för prime time.

Jag uppskattar modet som Acne visar genom att basera ett av sina mest kritiska IT-system på öppen källkod. Att välja en modern plattform med spännande möjligheter i kontrast till de gamla och förutsägbara systemen. Kanske kan man kalla det ”living the brand”. Genom att satsa på ett öppet system med över 2000 moduler öppnas möjligheter att skräddarsy webbutiken i minsta detalj. Nedan går vi igenom några av de olika avdelningar du hittar i shoppen och en kort beskrivning av hur vi implementerat den.

Vad som är extra kul med den här shoppen är att den är byggd i 100% HTML/CSS/Javascript. Inget flash eller andra plugins vilket gör att denna shop är 100% iPad-kompatibel utan att behöver anpassas. Det gör också att fler delar av butiken blir tillgänglig via Google.

Projektgrupp: P-M Nordkvist, Hjalmar Hägglund, Micke Degefeld, Maroun Sleiman, Christian Cederwall, Björn Blomquist &Suzanne Fors

Shoppen

Den  huvudsakliga delen av trafiken riktas förstås mot butikens olika produktkategorier och produktsidor. Kategorierna navigeras genom så kallad layered navigation där användaren kan filtrera resultatet genom att gallra på parametrar som Pris, Midjemått, Storlek, Färg. Exempel. Man kan också redan från kategorisidan se vilka färger produkterna finns tillgängliga i genom bilder på färgprover som tillhör respektive produkt.

Exempel:
http://shop.acnestudios.com/shop/women.html

Produktsidan

Produktsidan är förstås den kanske mest centrala delen av shoppen. Här listas produktbilder i olika färger varvat med en så kallad Stylebild. Stylebilden visar hur plagget ser ut när man bär det medan färgbilderna låter användare granska hur olika plagg i olika fäger ser ut på nära håll. Om användaren zoomar på en produktbild visas den i högupplöst(1200 pixlar bred) läge där man i detalj kan granska plagget man vill köpa. Jag måste faktiskt säga att detta är den absolut bästa Zoom-funktion jag sett på något webbshop. När man skall handla på nätet är det otroligt viktigt att man känner sig trygg med att vad man ser på skärmen faktiskt är vad man får levererat senare. Och ofta är dåliga bilder en anledning till att kunder backar ut och undviker att handla. Vidare är jag förtjust i enkelheten på vilket lagersaldot(hur många som finns kvar i lager) visas när man väljer storlek.

Exempel
http://shop.acnestudios.com/catalog/product/view/id/35863/s/supreme-pre-s-s-10/category/11/

The Journal

Vid sidan av shoppen tycker jag man gör ett bra jobb att arbeta med redaktionellt material genom bloggen/webbmagazinet The Journal. En wordpress-blogg som kompletterar Magentos något begränsade CMS-möjligheter med det utmärkta publiceringsverktyg som WordPress sitter och ruvar på.

Exempel:
http://www.acnestudios.com/category/the-journal/

Shop by outfit

Denna del av sajten låter besökarna bläddra bland så kallade outfits och sedan köpa plagg som finns på dessa outfitsidor. Outfits består av olika plagg som användaren kan hitta i butiken men köpa dem direkt från denna sida. Detta fungerar som inspiration och sidan låter användare navigera mellan olika outfits i en Ajax-baserat gränssnitt.

Exempel
http://shop.acnestudios.com/outfits/shopbylook/look/gender/female/parent/51/id/290/

The Lookbook

En lookbook är ett bland annat ett modemärkes presentation av en kommande kollektion. Acne har lagt hela sin lookbook på webben i en javascript-baserad interaktiv presenation i shoppen. Denna del är byggd som ett WordPress-plugin och klämer, som beställaren påpkeade, musten ur vad man kan göra med jQuery i en webbläsare. Vi bockar och bugar och tackar för komplimangen. Det är alltid roligt när man kan ersätta Flash med javascript.

Exempel:
http://www.acnestudios.com/lookbooks/women-main-autumn-winter-2010/#look-6

The Outlet

Shoppen har även en integrerad del som kallas ”The outlet” där äldre produkter säljs av till reducerade priser. För att tydliggöra att denna avdelning skiljer sig från den övriga shoppen används här en alternativ stilmall för att visa denna del av shoppen i vitt och lila istället för rosa och svart.

Exempel:
http://shop.acnestudios.com/outlet/outlet-women.html

Jag har lekt lite med CSS3 tidigare men mest på ett hypotetiskt plan. Typ vad man skulle kunna göra om det fanns ett brett implementerat stöd för CSS3 i våra webbläsare. Enda gången då man i lugn och ro kan använda CSS3 är när man gör iPhone-sajter eftersom man då vet precis vad man har att leka med.

Men Mordernizr är en ganska finurlig bit kod som gör det enklare att extenda sina sidor med CSS3-stöd men samtidigt behålla ett alternativt utseende för alla andra. Genom att lägga in ett JS-script som bara tar 1.1kb får man helt plötsligt en rad nya CSS-klasser att leka med. En för varje CSS3-funktion som man vill använda. Så om du t.ex. vill presentera två olika utseende för en box. En som använder border-radius och en som du gör på vanligt vis använder du t.ex. följande kod:

Rätt simpelt och straight-forward. Fördelen är att man slipper att kolla vilken browser användaren kör och sedan hålla reda på vilken browser som har stöd för vad. Med detta script blir det lite enklare.

Smart och smidigt.

Det här var en smart lösning. Ett Café som snickrat ihop  en lösning för en snabbkassa baserat på en iPad. Med hjälp av ett tillbehör för kortbetalning har man satt ihop en slick checkoutkassa. Fy vilken enkel och smart lösning. Tekniken kommer från ”Square” som säljer en standardlösning för detta vilket innebär att vi kommer att få se många kostnadseffektiva experiment den närmaste tiden.

Detta kommer från samma företag som utvecklat samma teknik till iPhone. Det känns helt klart att det här passar bättre för iPad än för iPhone.

Hoppas vi får se fler smarta lösningar.

Magento 1.4 är bra på många sätt. Jag har jobbat med den parallella versionen för Magento Enterprise men har från gång till gång stött på felmeddelandet:

”Exception printing is disabled by default for security reasons”

D.v.s. istället för en stracktrace på felet som uppstår i Magento får jag bara en referens till ett ID över felet som inträffat. Det gör att man kan hitta stacktrace’et i var/report-mappen istället. Men ibland skrivs inte heller några filer där. Detta beror på att Magento byggt om felhanteringen eftersom det, med rätta, kan vara en säkerhetsrisk att exponera stacktrace på felmeddelanden till publika användare. Men då det inte är helt självklart hur man aktiverar detta igen kan det vara nyttigt att känna till att det i error-mappen numera finns en fil som heter: local.xml.sample. Den innehåller en konfiguration som aktiverar felhanteringen igen. Där kan man styra om meddelanden skall slås av, döljas, printas och/eller sparas på disk.

Enklast att aktivera igen är om du bara byter namn på filen local.xml.sample till local.xml. Då fungerar allt igen. Annars kan du leka med konfigurationen i filen också som är rätt självklar utifrån kommentarerna i XML-filen.

Så var det med den saken.

För ett par veckor sedan satte vi de sista bitarna på plats för arbetet med Tvinterplay.se, en filmsajt till produktionsbolaget TV-Inter. TV-Inter har sedan starten 1983 producerat över 200 timmar material på uppdrag av den svenska pingströrelsen. Bland produktionern kan nämnas framgångarna med SVT-produktionen Minns du sången. Man sände även en tv-serie(Guds Hus) på kanal 8 hösten 2008.

TV-Inter kom till oss med uppdraget att utforma en webbplats som:

• Är lättillgänglig, fungerar för så många som möjligt(olika plattformar, webbläsare och bandbredd)
• Fräsch och fin
• Har stöd för användaruppladdade filmer
• Har stöd för egna kanaler för publicering av eget material
• Billig att drifta
• Förberedd för mobila plattformar
• Möjlighet att bädda in video på externa webbplatser

Nu är vi klar med arbetet och vi är minst sagt nöjda med slutresultatet som vi tycker håller hög kvalitet.

Videospelare
För uppspelning av filmer har vi valt en flashbaserad spelar, Flow Player, att spela filmer i mp4-formatet. Detta format stöds av minst 96% av  de europesika användarna och håller i vår uppfattning en hög och professionell kvalitet. Värt att notera är att vi valde bort så väl FLV-formatet samt JW Media Player. Det tidigare håller inte tillräckligt hög kvalitet och fungerar dåligt med de streamingmoduler vi använder. Den senare upplever vi som lite stel när det kommer till att göra egna anpassningar även men den också håller hög kvalitet.

Spelaren har fullt ut byggts om för att gränssnittet skall vara baserat på Javascript/HTML/CSS istället för flash. Det är enbart sjävla filmytan som är flash. Övriga kontroller styrs via Javascript. Det underlättar för att oss att skinna spelaren precis som vi vill och kan få den att skilja sig något till utseendet än många andra spelare på marknaden.

Streaming
När vi byggde applikationen har vi gjort allt vi kunnat, och lyckats, med att försöka uppnå streamingfunktionalitet utan att använda dyra programvaror som inte sälla kostar per streamad megabyte. Detta beskrivs närmare i detalj här.

Filmuppladdning
Funktionen för användaruppladdning har vi löst genom att använda tredjepartstjänsten Encoding.com. När användarna laddar upp filer(baserat på tekniken Plupload) hämtas de upp av Encoding.com som encodar filmfilerna till flashkompatibelt mp4-format och genererar en thumbnail innan filmen publiceras på webbplatsen. Eftersom Encoding.com är baserat på Amazons servermoln Amazon EC2 är den totala kapaciteten för videoencoding i stort sett obegränsad.

Utvecklingsplattform
Vi har faktiskt i alla delar av plattformen utom encoding baserat applikationen på öppen källkod för såväl server(Linux), videospelare(Flow Player), Streaming(H264 Streaming Module), PHP(Zend Framework). Den sistnämnda har blivit lite av en favorit i våra sammanhang och helt klart något som lyft PHP till nya höga höjder.

Projektgrupp
Micke Degerfält(systemutveckling), Björn Blomquist(Projektledning), Hjalmar Hägglund(gränssnittsutveckling), Christian Cederwall(gränssnittsutveckling), Malin Hamrin(formgivning), Maria Nordmark(konceptutveckling)

Beställare: Roger Svanell
Adress: www.tvinterplay.se

Alltid kul att läsa bloggposter om extrem prestanda. Intressant att läsa om hur mycket man kan skriva per sekund till en databas. Att i korta perioder går det att skriva mycket men i långa loppet måste man börja batcha skrivningarna.

http://tech.bluesmoon.info/2009/09/scaling-writes-in-mysql.html