Fredrik Gustafsson

Frontend utvecklare och interaktionsdesigner, med stort intresse för tillgänglighet, webbstandarder och mobilitet. Mitt favorituppdrag är att bygga upp en webbplats från grunden och skapa möjligheterna för framtida vidareutveckling.

Playing mobile – gallery web app

03 mars 2011
av Fredrik

Nu när mobildebatten är som hetast tänkte jag passa på att slänga in ett projekt som jag byggde i helgen. Det är en webapp för att visa mitt privata bildgalleri på telefoner och tablets.

Idén var att bygga ett flexibelt ramverk som fungerar bra på alla devices och som anpassar sitt utseende efter skärmens storlek på ett responsibelt sätt.

På en iphone ser resultatet ut så här

För att deklarera beteendet av en app använder jag några smidiga meta-taggar

<meta name="apple-mobile-web-app-capable" content="yes">
Vilket talar om för webbläsaren att detta är en webbapplikatioon och att vi inte vill att den ska ladda menyerna som tillbaka, bokmärk
<meta name="apple-mobile-web-app-status-bar-style" content="default">
Vi vill att statusbaren på iphone ska vara lite snyggare svart istället för den vanliga grå.
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=no">
Vi vill inte att den ska vara zoombar eftersom den redan är anpassad för mobiltelefoner
För att se ut som en app måste den givetvis ha en ikon och startskärm
</div>
<div>
<div><link rel="apple-touch-icon" href="apple-touch-icon.png"/></div>
<div><link rel="apple-touch-startup-image" href="splash.png" /></div>
<div>
Och eftersom detta i förstahand är en mobil webbapp så låter vi huvudstilmallen gälla för alla men lägger in anpassade stilmallar för de enheter som förstår media-queries samt har en skärmstorlek som är bredare än 640px
</div>
<div>
<div><link rel="stylesheet" href="styles/main.css"></div>
<div><link rel="stylesheet" href="styles/ipad.css"␣ media="only screen and (min-width:640px)"></div>
<div><link rel="stylesheet" href="styles/gallery.css"></div>
</div>
<div>
För bredare enheter kan innehållet alltså struktureras om och resulterar i detta.
På enheter mellan 640px och 800px (stående ipad) visas albumlisningen som ett lager som placeras framför bildlistningen, men för enheter bredare än 800px (liggande ipad) ligger albumlistningen ständigt till vänster om bilderna och gör det lättare att bläddra mellan album.
En demo av applikationen finns att testa här. Den är testad på desktop,iphone4,ipad och android Legend. Testa gärna och rapportera eventuella problem som uppstår i er telefon, eller testa i exempelvis Chrome och skala fönster fram och tillbaka för att se magin i @media-queries.
Kommentarer och frågor välkomnas varmt!

Taggar: , , , ,

2 Kommentarer »

Den nya templatesajten

18 november 2010
av Fredrik

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…)

Taggar: , , , , ,

2 Kommentarer »

Återvinn dina javascript-plugin

18 november 2010
av Fredrik

De flesta som bygger funktioner i javascript märker efter ett tag att man väldigt ofta skriver om samma funktioner gång på gång för att tillämpningen skiljer sig lite från förra gången. Då försöker man skapa mer generella plugins där man skapar en lista med egenskaper och variabler som man med olika anrop kan påverka resultatet av pluginet.
Exempelvis

jQuery.prototype.myAlert = function(argument){
  var option = jQuery.extend({
    message : "Hello world",
    click : function(){
      alert(option.message);
      return false;
    }
  }, argument);
  jQuery(this).click(option.click);
};
jQuery('a').myAlert({'message':'A whole new world'});

Denna metod är en väldigt generell och kraftfull metod som kan påverkas i sina anrop beroende på vilka argument, man anropar den med. Men problemet med denna lösning är att det är en inkapslad metod som inte kan ärvas och för att anropa olika modifierade instanser av den på samma sajt kräver att man sätter väldigt specifika sökvägar.

jQuery('#mybox .special-intance a.alert').myAlert({'message':'normal message'});
jQuery('#content .some-specific-place a.alert').myAlert({'message':'a even cooler message'});

Istället skulle man vilja skapa en instans av pluginet för varje objekt och sedan modifiera och utöka parametrar och funktioner för undantagen. Detta går att åstadkomma genom att skapa ett publikt objekt för varje plugin, där parametrarna sätts som funktionsparametrar direkt på objektet.

var myAlert = {
    message : 'hello world',
    onclick : function(){
	alert(this.message);
	return false;
    },
    init : function(){
	 //initcode
    }
};
jQuery.fn.myAlertBox = function(args){
    var opt = jQuery.extend({}, myAlert, args);
    function init(){
        $(this).setProperties(opt);
	if(typeof(this.init) == 'function'){
		this.init();
	}
    }
 return this.each(init);
};
jQuery.fn.setProperty = function(mykey, myvalue){
    function init(){
        this[mykey] = myvalue;
    }
    return this.each(init);
};
jQuery.fn.setProperties = function(args){
    function init(){
	for (var key in args) {
		$(this).setProperty(key, args[key]);
	}
    }
    return this.each(init);
};
jQuery(function(){
    jQuery('a').myAlertBox({'message' :'hello all links'});
    jQuery('li a').setProperties({"message":"inside a list"});
});

Objekten kan givetvis utöka jQuery-objektet för att kunna definiera mer avancerade jQuery funktioner och händelser.

Med denna funktionalitet kan vi bygga lättare plugin som utför grundfunktionaliteten i exempelvis ett bildspel eller lightbox, och kan utöka objektet för varje typ av implementation och undvika onödiga buggar och frustration.

Har du åsikter om denna metod eller förslag på bättre lösningar så är jag väldigt intresserad av att diskutera dem.

Taggar:

Inga Kommentarer »

Framtidens formulär idag

20 oktober 2010
av Fredrik

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.

(Läs mer…)

Taggar: , ,

Inga Kommentarer »

CSS Pseudoklasser i IE

12 augusti 2010
av Fredrik

Att utveckla för Internet Explorer innebär ofta att man skapar speciallösningar och att man bygger skript som åstadkommer samma stilningsresultat som riktiga webbläsare hanterar med CSS. På så sätt bildas det dubbletter där man får samma resultat på två olika ställen och man definierar sidans design både i CSS och i javascript. När man sedan vill ändra designen eller vidareutveckla sajten blir det ett väldigt arbete att hitta alla stylesättande skript.

Trots att Internet Explorer saknar mycket funktionalitet i CSS har den en feature som är väldigt praktisk, i IE kan du sätta variabler med CSS.

a.mylink{ store-my-valueplease : 45px; } Trots att webbläsaren inte förstår stilklassen lagras den och är åtkomlig via javascript.

Tack vare denna bug/feature, kan man definiera egna stilklasser specifika för IE som bakomliggande skript kan använda för att uppnå det önskade beteendet, medan alla stilregler sätts enbart i CSS, precis som det ska vara.

Med denna teknik har jag byggt några tillämpningar för vanliga stilmallsklasser och pseudoelement som Internet Explorer saknar.

Kodexempel följer!

(Läs mer…)

Taggar: ,

1 Kommentar »

Svunna minnen från SWDC

10 augusti 2010
av Fredrik

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!

http://swdc-central.com/

http://www.phonegap.com/

http://www.w3.org/TR/widgets/

http://nodejs.org/

http://couchdb.apache.org/

Taggar: , , , ,

Inga Kommentarer »