blogs.creuna.se
Som en del av er vet och som en del av er kanske märkt så har templatesajten blivit uppdaterad med ett helt nytt ramverk.
Den nya templatemallen är en från grunden omgjord plattform för att ligga som grund många olika typer av projekt. Markup och stilmallar är byggda för att utgöra en generellgrund anpassad för helt olika typer av design och funktionalitet. (Läs mer…)
Som alla vet så heter framtiden HTML5 och innehåller massor med vackra och häftiga funktioner som vi som webbutvecklare inte kan vänta på att få använda oss av som klientvalidering, inputtyper för flera olika typer av data, placeholder-text, felmeddelanden, autofocus datepickers, nummerstegning etc. etc.
Många av dessa funktioner är redan implementerade i de moderna bra webbläsarna på marknaden som gör livet lätt för oss utvecklare, för att uppnå samma funktionalitet i äldre webbläsare måste man bygga sina egna skript, men de ska enbart användas på de webbläsare och de versioner som inte redan har inbyggt stöd för HTML5 funktionaliteten.
Där kommer Modernizer in. Modernizer är ett litet skriptbibliotek som testar webbläsarens funktionalitet mot funktioner och element i HTML5 och gör det enkelt att applicera sina skript och stilmallar till enbart de webbläsare som behöver den. Detta genom en uppsättning av funktioner som testar en viss feature, eller via sökvägar, då den sätter webbläsarens egenskaper som klassnamn på <html>
Modernizer initierar även HTML5 element vilket gör att de är stilningsbara i Internet Explorer, men för att det ska fungera måste Modernizer inkluderas i .
Man kan kolla om webbläsaren har stör för just den aktuella funktionen, med:
if (!Modernizr.inputtypes.date) {
//specialscript
}
Eller peka ut sökvägar utifrån specifika features exempelvis:
.no-borderradius #mybox{//style}</span>
Mer om Modernizer hittar ni på http://www.modernizr.com/
För att inte alla ska behöva bygga dessa grymma skript själva så har jag byggt ett relativt komplett paket av HTML5 formulärfunktionalitet för alla webbläsare som bara behöver läggas in och anropas med,
$(document).ready(function(){
$(this).initforms();
})
Men innan ni får hämta hela paketet, ska jag förklara kort vad skriptet gör och hur de fungerar.
Två månader har hunnit passera sedan jag var på Scandinavian Web Developer Conference 2010 på Skandiateatern i Stockholm. Det var två fullspäckade heldagar om webbutveckling och mobilutveckling med moderna webbtekniker, av några av världens mest framstående talare på området.
Första dagen talade bland andra Daniel Glazman (@glazou) som är en av de gamla rävarna från W3C som har varit med från allra första början när webben vuxit fram till vad det är idag. Han predikade självklart om vikten av webstandarder och att vi måste börja använda de nya teknikerna i HTML5, CSS3 för att gamla avdankade webbläsare som Internet Explorer 7 och 6 måste försvinna. Flash är en bra platform, men den kräver en annan kompetens som kostar mer för samma resultat.
”We dont want to kill flash, it will be an unexpected side-effect”
Han visade exempel på hur man med Canvas kan spela mariocart på en ipad och styra genom att komma åt ipadens accelerometer, direkt i webbläsaren. (http://www.nihilogic.dk/labs/mariokart/).
Allas vår egen Robert Nyman (@robertnyman) från Valtech, presenterade HTML5 och vilka möjligheter det medför för utvecklare och användare.
Cristian Heilmann (@codepo8) från Yahoo, predikade som alltid om Progressive Enhancement, och att alla webbplatser ska gå att använda på en dålig mobiltelefon, med en taskig uppkoppling utan javascript. Men användarna bryr sig inte om de coola effekter och funktioner som vi utvecklare lägger ner dagar på att utveckla och anpassa för att de ska se lika bra ut i IE6 som i Safari.
De flesta användare som sitter med gammal utrustning och dåliga webbläsare har inte något val. Antingen är de rädda för virus och inte vågar ladda hem någonting nytt, eller så sitter de på ett företag där de inte får ha javascript påslaget pågrund av att javascript är en säkerhetsrisk (om den används på fel sätt), eller vet inte skillnaden på webbläsare, sökmotor och epost. Låt informationen vara åtkomlig och gör webbplatser tillgängliga, men låt varje teknik hantera den ”design” den klarar av. Tvinga inte in runda hörn, transparens, skuggor, lagerpålager, ajax och max-bredder på de plattformar som inte är gjorda för dem, för användarna bryr sig inte om det som vi tycker är ballt.
Han föreslog en underbar slutgiltig lösning på hur vi tillsammans kan hjälpas åt för att få bort IE6 utan att sluta stödja den. Amelie from Montemartmetoden (http://icant.co.uk/ie6-amelie/) är ett litet skript som vi kan lägga in på våra webbplatser som utnyttjar en väldigt konstig ”blur”-effekt som finns stöd för i IE6. Men slumpmässiga mellanrum kommer all text på webbsidan att bli suddig för IE6 användare under ett kort ögonblick. Efter några månade talar man om att det kan bero på mjukvaruutmattning och att om det inte åtgärdats även kan drabba hårdvaran. 
Ändra IE6 problemet från ett teknikproblem till ett hälsoproblem, så får det en helt annan prioritet.
Rik Arends (@rikarends) från Ajax.org demate ett väldigt läckert webbaserat IDE (@cloudide) för kooperativ webbutveckling i molnet. Det ger möjlighet för designer, frontend-utvecklare, backendutvecklare och testare att samarbeta, utveckla och köra lösningar direkt i molnet via webbläsaren. Designer skapar ett GUI genom drag and drop som sedan byggs logik till av utvecklarna. Testfall kan skapas på ursprungliga prototyper som sedan körs och spelas in medan produkten vidareutvecklas. Som ett komplett bättre Visual Studio i molnet med direktkoppling till GitHub.
Andra talare under första dagen pratade om nodeJS, CouchDB, javascriptmoduler för stora webbplatser, google chrome extensions och google för utvecklare.
Dag två inriktade sig helt på mobil utveckling och hur vi med Offline storage, geolocation, canvas, CSS3, PhoneGap etc kan skapa häftiga applikationer för mobiltelefoner och andra enheter som gör upplevelsen riktigt häftig.
Michael Mahemoff (@mahemoff) från Google, skapare av Ajaxian.com och författare till boken ”Ajax design patterns” talade också om hur HTML5 ger oss utvecklare vingar och möjliggör helt nya webbplatser och applikationer i webbläsaren. Han visade hur man på klienten kan lagra data, offline-manifest och köra avancerade javascript i bakgrundsprocesser, där olika enheter kan kommunicera och styra samma process. För mobiltelefoner är det väldigt viktigt eftersom man kan hantera ”shaky connections”, klara av avbrott för samtal och utnyttna webbläsarens fulla processor för skript och gui.
Wolfram Kriesing (@wolframkriesing) talade om ”Cross platform Mobile Apps” och lätt det är att skapa kraftfulla mobilapplikationer med hjälp av W3C Widgets och PhoneGap som fungerar för iPhone, Android, Palm, Blackberry, Nokia och Windows mobile, utan att utveckla en applikation för varje enhet.
Det finns upp till 50 olika mobila appstores för olika plattformar och olika utvecklingsspråk, varav 26 är riktigt stora. Webbapplikationer är det enda sättet att skapa applikationer som fungerar i samtliga telefoner.
W3C Widgets är ett paket av html-filer, css-filer, xml-config, ajax-bibliotek och en ikon som är zippade och omdöpt till .wgt, det skapar en widget som kan komunicera med webben som ex. facebook-dashboard-widgets.
PhoneGap är en lösning som ger webbsidor tillgång till telefonens hårdvara med hjälp av javascript och gör det möjligt att skapa riktiga applikationer av HTML, CSS och JS som kan genereras för alla olika plattformar. PhoneGap finns för att fylla gapet som finns mellan webb och OS till det att det stöds av alla telefoner och gör det möjligt att med javascript använda telefonens kamera, adressbok, gps, accelerometer, bildgalleri etc etc.
En annan väldigt intressant föreläsning var Tom Hughes Croucher (@sh1mmer) som talade om ”How to avoid the latence trap when using web services”. Han menade att det största problemet som vi som mobilwebbutvecklare har är latens. Latens uppstår vid alla typer av kommunikation speciellt trådlöst, av störande enheter, eller slöseri på bandbredd då en massa extrauppgifter skickas med varje paket. Det gäller därför att optimera bandbredden för maximal utdelning. Iphon kan t.ex. hantera 6 paralella anrop per domän, det kan därför vara en fördel att dela upp stilmallar, bilder och javascript i olika filer och på olika domäner.
Yahoo YQL är en samling av öppna APIer där din webbapp enbart behöver skicka textsträngar till Yahoos snabba servrar som sedan kommunicerar vi diverse andra servrar och sedan levererar resultatet till telefonen, vilket medför att fler anrop kan skickas snabbare utan att behöva vänta på svarstider från olika apier. Slides här
Tim Caswell (@creationix) visade tillslut hur man i Node.js kan bygga webbsajter där mobila enheter kan kopplas samman och interagera i realtid i samma webbapplikation.
Det var mycket intressant att lära sig på dessa två konferensdagar anordnade av Peter Svensson (@psvensson). Ett stort tack och jag ser fram emot nästa år, när dessa revolutionerande webbtekniker har fått ytterligare ett år på sig att mogna.
Nu är det dags för Creuna att börja utveckla mobila webbappar, så jag kan få sätta mina införskaffade ”kunskaper” i praktiken!
Jag tyckte det var intressant att igår läsa Internetworldartikeln och pressmeddelandet om regeringens nya delegation som ska leda och samordna arbetet med att utveckla it-baserade tjänster och lösningar i staten. Särskilt att de trycker på att e-tjänsterna ska bygga på öppna standarder. Jag börjar osökt tänka på WCAG 2.0 och att webb- och e-tjänstesatsningar både från statligt håll, från kommuner och landsting men givetvis även från den privata sektorn måste vara tillgängliga för alla. Regeringen pratar även om att använda programvara som bygger på öppen källkod samt sträva efter lösningar som stegvis frigör förvaltningen från beroendet av enskilda plattformar och lösningar. För varje organisation som ska satsa på e-tjänster är givetvis teknik- och produktval viktiga. Det gäller att välja den teknik som hjälper dig att göra e-tjänster som följer standarder och är tillgängliga för alla, även om teknikvalet är givetvis bara en liten del i vad som gör en e-tjänst tillgänglighetsanpassad.
På Creuna pratar vi en hel del om detta med webbplatser tillgängliga för alla och webbplatser som följer webbstandarder. Vervas halvårsutvärdering av offentliga webbplatser i oktober 2008 visar på ett ganska nedslående resultat. Vi anser att en seriös IT-leverantör som arbetar med webbutveckling måste kunna leverera lösningar som uppfyller webbstandarder.
Webbstandarder och tillgänglighet är hygienfaktorer som handlar om mycket mer än en webb anpassad för användare med funktionshinder. Det handlar inte heller bara om sökoptimering eller att en webbplats eller e-tjänst ska vara surfbar i alla webbläsare och mobila enheter. Utveckling enligt webbstandards ger effektiva och hållbara webbplatser som är förberedda för att konsumera och producera framtida tjänster. Att följa webbstandarder är en miniminivå. Nästa steg är att nå visionen om den semantiska webben med öppna och intelligenta webbplatser med oanade möjligheter till integration och smarta tjänster för medborgarna. Men vems ansvar är det att webbplatserna blir moderna och tillgängliga för alla? Ska verksamheten ställa kraven, leverantören implementera och acceptanstestet verifiera att kraven är uppfyllda och därmed säkerställa kvaliteten? En seriös leverantör som utger sig för att ha kunskap att leverera webbtjänster ska kunna mer än så – de måste hjälpa sina beställare med kravställningen.
Vi tror att de bästa lösningarna tas fram under en process där många specialistkompetenser är involverade. Interaktionsdesigners, verksamhetsrepresentanter, tillgänglighetsspecialister, utvecklare och formgivare samarbetar. Det handlar om att utgå från verksamhetsmålen, börja enkelt, prioritera tillsammans med kunden, testa, fråga användarna, prototypa, justera, utveckla och fråga användarna. Långa produktkravspecifikationer över komplexa webbplatser som efter godkännande lämnas över till utvecklaren undanbedes. Att kravspecifikationen är uppfylld är inte en garanti för att din webbplats håller rätt kvalitet.
Visst har beställaren ett ansvar. Vilken leverantör som helst kan göra en ”hemsida”. Frågan är bara vad det blir för nivå på den. Extrem kostnadspress ger samma effekt i IT-branschen som i andra branscher. Kvaliteten sjunker. Samtidigt är en dyr prislapp verkligen inte en garant för hög kvalitet. Det blir inte dyrare att utveckla efter webbstandarder – det är en kompetensfråga. Du som beställare måste lära av andra branscher; anlita ett beställarstöd med kompetens inom tillgänglig och modern webb innan du skriver under leverantörsavtalet. Se till att du till dina acceptanstester anlitar kompetens för att verifiera att webbplatsen uppfyller tillgänglighetskraven, att koden validerar mot gängse webbstandarder och är semantiskt och korrekt utformad.
Vi hoppas att tillgängliga och semantiskt uppbyggda webbplatser kommer att bli en hygienfaktor, inom både offentlig och privat sektor. För att nå dit krävs att beställare börjar ställa högre krav på sina leverantörer. Genom att ställa höga krav på dina leverantörer kommer utvecklingen i branschen att gå snabbare. Som leverantör uppmanar vi beställare att ställa högre krav på era leverantörer. Kräv att de levererar en standardiserad webbplats!
Madeleine Olsson, Andreas Fredriksson & Martin Odhelius