Netsetters weblog » visualisation

Safari tips voor IPhone en IPad (iOS)

Maurice Lourens — Wed, 16 Jun 2010 20:55:07 +0000

: Image via Wikipedia

Ondertussen zijn wij ook mee gaan doen met de IPad gekte. Maar voordat je apps gaat ontwikkelen zijn er al heel wat mogelijkheden in de browser van deze aparaten. Safari biedt voor web-applicatie ontwikkelaars speciale tags. Hierdoor kunnen we applicaties ontwikkelen en deze via de website gelijk aanbieden, zonder gebruik te maken van de appstore.

Ken het plusje

Op de IPad in de Safari-browser zit een plus icoontje, hiermee kan je een webpagina snelkoppeling op je ‘desktop’ zetten. Naast dat het erg handig is dat je snel een webpagina op kan roepen, geeft het je ok de mogelijkheid om een applicatie bijna ‘native’ te laten draaien op je IPad.

Maak zelf je desktop icoon

Door middel van apple-touch-icon link kan je een icoon aangeven die gebruikt wordt als snelkoppeling. Het icoon moet een PNG zijn van 45px bij 45px. Deze kan je daarna linken in de head van je pagina.

Apple gooit er automatisch een glas-effect overheen, wil je dit niet hebben gebruik dan apple-touch-icon-precomposed

Web-applicatie Full Screen op je IPhone en IPad

Door de volgende meta informatie te plaatsen in je van je website kan je de applicatie fullscreen zonder zichtbaar browserscherm laten draaien nadat deze is toegevoegd aan de ‘desktop’ met het plusje.

Door de waarde van apple-mobile-web-app-capable op “yes” te zetten zal de applicatie op fullscreen draaien. Hierdoor zal het op een volwaardige applicatie lijken. Je kan in je javascript ook kijken of een pagina in fullscreenmode draaid (en daar je inhoud of css op aanpassen) door gebruik te maken van de window.navigator.standalone boolean waarde.

if(window.navigator.standalone) {
	alert("ik draai fullscreen als applicatie");
} else {
	alert("ik draai in een browser");
}

Negeer de automatische telefoonnummer links

Als je al eens een web-applicatie of website voor de IPhone of IPad ebt gemaakt zal je zien dat alle op telefoonnummer lijkende nummerreeksen als bel-link worden aangemaakt. Hierdoor kan je direct eenn telefoonnummer bellen als deze in een website staat. Dit kan erg handig zijn, maar soms wil je niet dat dit gedrag voorkomt. Daarvoor is ook een meta-tag.

Door de format-detecion waarde op “no” te zetten voorkom je dat de telefoonnummers (of daarop gelijkende nummer-reeksen) automatisch worden gelinkt. Mocht je dan onverhoopt toch een telefoonnummer willen linken kan dat altijd nog door middel van een normale link.

0111-422622

Kies zelf je toetsenbord

Op de iphone en IPad heb je verschillende toetsenborden. Om snel de goede toetsenborden tevoorschijn te toveren kna je ook gebruikmaken

Tekst:  
Telefoon:  
Homepage:  
E-mail:  
Leeftijd:

Ook kan je de automatische tekstcorrectie uitzetten voor input velden:

Draaien met het scherm

Het kan zijn dat je web-applicatie zich moet aanpassen als het apparaat wordt gedraaid, en daardoor het formaat van je scherm anders wordt. Hierdoor moet je soms veranderingen in je css of javascript doorvoeren. Daarom bestaan er in Safari Mobile verschillende methoden om hiermee om ta gaan. Allereerst is er het event, onorientationchange, hiermee kan je een bepaalde functie aanroepen als de oriëntatie van de pagina wordt veranderd.

In javascript kan de oriëntatie van het scherm worden opgevraagd door middel van de window.orientation:

window.orientation is 0 wanneer het apparaat verticaal wordt gehouden
window.orientation is 90 wanneer het apparaat 90 graden naar links (tegen de klok in) is gedraaid (horizontaal).
window.orientation is -90 wanneer het apparaat 90 graden naar rechts (met de klok mee) is gedraaid (horizontaal).

Ook kan je css file worden aangepast op je scherm oriëntatie:

(automatisch) zoomen; de viewport

Je IPhone of IPad zal een website proberen te schalen zodat deze het beste zichtbaar is. Deze berekening van de viewport kan soms irritant zijn. Daarom kan je de initiële schaal vastzetten. Dit kan bijvoorbeeld op de breedte van ht scherm

Of zet de breedte op 100% , dan maak je geen gebruik van de automatische zoom

Daarnaast kan je er ook nog voor zorgen dat de gebruiker niet kan in- of uit-zoomen en een vaste initiële zoom van 230%

Nog meer mogelijkheden op IPhone en IPad

Naast deze meest gebruikte technieken bestaan er nog meer eigenschappen specifiek voor de mobile versie van Safari op iOS. Bovenstaande technieken zullen ook de discussie aanwakkeren of het wel nodig is om een applicatie via de Appstore toe te voegen. Soms is het namelijk veel handiger om de web-applicatie direct via de website aan te bieden als link.

Safari 5: HTML5, Faster JS, Reader (zef.me)
Apple posts HTML 5 demo page (news.cnet.com)
Apple Shows Us What HTML5 Can Do (mashable.com)
HTML5 To Apple, You’re Doing It Wrong (lockergnome.com)

CSS Pseudo classes

Maurice Lourens — Sun, 13 Jun 2010 20:37:31 +0000

: Image via Wikipedia

Dit keer een kort stukje over een klein maar waardevolle mogelijkheden in CSS: Pseudo Classes. Pseudo classen worden gebruikt om een bepaald effect aan een selector mee te geven. Het bekendste pseudo-class is wel de :hover die al aardig ingeburgerd is in het css gebruik. Met :hover kan je bijvoorbeeld een link een andere css class geven als je er met de muis overheen beweegt. Recent zijn er enkele classen bijgekomen, zo ook de :before en :after elementen

Compatibility van de nieuwe pseudo classen

Zoals zo vaak behandel ik alleen nieuwe technieken die aardig worden ondersteund door modernere browsers. Zo kunnen deze nieuwe pseudo classen worden gebruikt in de huidige versies van alle browsers. In Internet Explorer 7 waren deze nog niet aanwezig, maar in 8 zit de functionaliteit er volledig in. Ook Chrome, Safari, Firefox en Opera doen ondersteuenen al een tijdje deze classen.

Gebruik van pseudo classes

Pseudo classes kunnen gebruikt worden op bijna alle CSS classes door gebruik te maken van een dubbele punt (“:”) en de naam van de pseudo class. Net als de bekende :hover. Bijvoorbeeld:

a:hover {color:red;}

Pak het eerste kind met :first-child

Soms moet je binnen een pagina elk eerste element anders stijlen dan de rest. Daarvoor bestaat er first-child. Hiermee pak je van de genoemde classe het eerste element. Zo kan je bijvoorbeeld elke eerste paragraaf binnen een document een afwijkende stijl geven

p:first-child {
	font-style: oblique;
}

Zo kunnen ook eerste elementen in een lijst of rij in tabel een afwijkende stijl worden gegeven. In dat geval veranderd er wel iets, omdat het hoofdelement meerdere malen voor kan komen. In dit geval geven we aan dat er (eventueel) meerdere tabellen zijn in de css met de volgende code:

table > tr:first-child {
    font-weight:bold;
}

Andersom kunnen ook alle tr in alleen de eerste table een stijl meegegeven worden

table:first-child tr {
    font-weight:bold;
}

:before en :after css elementen

Ook een handige en nog niet veel gebruikte CSS elementen zijn de :before en :after pseudo elementen. Hiermee kan er voor of na het betreffende element een stuk inhoud worden toegevoegd. Wil je bijvoorbeeld voor elke quote een tekstje “quote:” dan kan dat door middel van css.

q:before {
	content: "Quote:";
}

Dan kunnen we ook nog aanhalingstekens om het geheel heen plaatsen (let op dat deze wel “ge-escaped” moeten worden, de backslash geeft aan dat de quote lettterlijk genomen moet worden en niet het inde van de tekst is.)

q:before {
	content: "Quote: \" ";
}

q:after {
	content: "\" "
}

Het is ook mogelijk om afbeeldingen mee te geven aan het begin of einde van een element. Bijvoorbeeld een plaatje voor elke paragraaf. Of alleen de eerste paragraaf in combinatie met first-child.

/* Plaatje voor elke paragraaf */
p:before {
	content: url(/images/mijn_image.gif);
}

/* alleen voor de eerste paragraaf */
p:first-child:before {
	content: url(/images/mijn_image.gif);
}

De :lang pseudo class

Voor ontwikkelaars die zich moeten richten op websites in verschillende talen geeft CSS tegenwoordig wat meer hulpmiddelen in de vorm van bijvoorbeeld de :lang pseudo classe. Hiermee kan er een regel worden gezet voor een bepaalde taal. Laten we voor Nederlanders de tekst maar oranje maken

p:lang(nl) {
	color:#FF6633;
}

Natuurlijk zijn er ook betere toepassingen, zoals in Noorwegen gebruiken ze het bekende “golfje” als teken voor quotes. Nu kunnen we in combinatie met de :before en :after classe van hierboven makkelijk alle quotes voorzien van andere tekens.

/* eerst de 'normale situatie zetten */
q:before {
	content: "\" ";
}

q:after {
	content: " \" ";
}

/* alleen voor de Noorse lezers */
q:before {
	content: " ~";
}

q:after {
	content: "~ ";
}

Dit kan ook korter met de quotes declaratie

q:lang(no) {
	quotes: "~" "~";
}

:first-line en :first-letter classe

Als laatste wil ik de :first-line en :first-letter elementen bespreken. Hiermee kan je de eerste regel of eerste letter van een element een stijl geven. Als je de eerste regel van paragraven dik gedrukt wilt hebben en de eerste letter een stuk groter (zoals de oude monnik boekwerken), dan is dit kinderlijk eenvoudig met deze pseudo-elementen.

p:first-line {
	font-weight: bold;
}

p:first-letter {
	font-size: 50px;
}

Let wel op dat de eerste regel de eerste visuele is. CSS herkent geen punten maar wacht tot een regelomhaal. Dat is dus de eerste of automatische regelomhaal omdat de container te klein is.

Doe meer met CSS

Zoals je kan zien is er met CSS steeds meer mogelijk. Een logisch vervolg van het belangrijker worden van de client-side en front-end programmeren. HTML5, CSS3 en javascript gaan hand in hand samen deze ontwikkeling door. Een ontwikkeling waardoor wij straks steeds meer applicaties web-based kunnen maken, maar dat web-based applicaties ook steeds meer gebruik kunnen gaan maken van de client.

The Mysterious Pseudo Class in CSS (tc.eserver.org)
An Event Apart: Object Oriented CSS (lukew.com)
50 New Useful CSS Techniques, Tools and Tutorials (smashingmagazine.com)
When can I use … is a great resource for browser compatibility advice (downloadsquad.com)

HTML5 contenteditable: Pas tekstblokken direct aan.

Maurice Lourens — Wed, 26 May 2010 07:58:32 +0000

: Image by Marc Amos via Flickr

Ooit de drang gehad om een tekstblok binnen een website even snel aan te passen? In de reeks HTML5 blog-items nu dan plaats voor contenteditable. Met contenteditable kan je tekst binnen bijvoorbeeld een div direct aanpasbaar laten zijn, zonder input-veld of textarea.

Contenteditable toepassingen

Van veel html5 toepassingen wist ik meteen een manier hoe deze in te zetten. Opslag met Local Storage, get current location, Canvas en font-face zijn direct toepasbaar en een meerwaarde voor applicaties waar ik aan werk. Voor contenteditable heb ik eerst enkele malen moeten nadenken. Allereerst zou het natuurlijk perfect werken voor CMS systemen, amar daar verlang je al snel een rich text editor voor het toevoegen van stijlen, en grafische elementen. Voor formulieren zou het ook kunnen , maar is dat er nou voor gemaakt. Toch zit de bruikbaarheid van dit element hem het meest in de combinatie met andere elementen zoals local storage.

Compatibility van contenteditable

Contenteditable is te gebruiken in de huidige versies van alle browsers en lijkt het meest compatible html5 element te zijn. Ook in Internet Explorer 7 werkt het naar behoren. Opera, Chrome, Safari en Firefox ondersteunen allemaal het contenteditable element. Zie de vergelijking op caniuse.com

Welke elementen kunnen worden aangepast met contenteditbale

contenteditable is een nieuw attribuut van html5 en is bruikbaar in de meeste tekst-containers. Zo kunnen ze gebruikit worden in:

div
section
a
h1 tot h6
ul, li etc
span

Natuurlijk is het ook te gebruiken in bijvoorbeeld body of table, maar op die manier is er dus weinig controle over het aanpasbare element.

Gebruik van contenteditable

Hieronder een code voorbeeld van het gebruik van het contenteditbale attribuut.


   
      
         ContentEditable
      
      
         
            De elementen met contenteditable kunnen aangepast worden door de client in de browser.
         
         
             Deze kop is aanpasbaar
             De tekst in deze paragraaf is aanpasbaar
             
             en deze lijst
             is ook
             aanpasbaar

Neemt stijl over van element

Door bovenstaand voorbeeld te gebruiken kan je zien dat de tekst aan te passen is van elle elementen binnen de aanpasbare element. Je kan bepaalde elementen binnen het aanpasbare element uitzetten door bijvoorbeeld:

Kop is niet aan te passen

In het aanpasbare element wordt de stijl van het omringende element over genomen. Zo blijft de list in bovenstaand voorbeeld een list, ook als er een enter wordt gegeven. Ook de paragraaf blijft de paragraaf en de kop blijft de kop. Er kan dus alleen binnen het element zelf aangepast worden. Er worden geen nieuwe elementen aangemaakt.

Een demo van content editable

Op de website van html5demos staat een demo soortgelijk aan bovenstaande code. Door middel van javascript en css kan het content-veld worden aangepast zodra er op gefocust wordt, zodat het duidelijker is dat deze aan ta passen is. Ook kan de inhoud van het editable deel met een id worden opgehaald of gereset.

JavaScript & HTML5 – Brave New World (slideshare.net)
HTML 5 for Web Designers, by Jeremy Keith (37signals.com)
The Future of the Web: HTML5 (slideshare.net)

CSS3; gebruik van lettertypen op het web met @font-face

Maurice Lourens — Sat, 22 May 2010 21:23:19 +0000

: Image by Rodrigo Galindez via Flickr

Het gebruik van lettertypen op het web is meestal vrij saai. Ik heb enorm vaak een (web) designer het standaard lijstje met de web-safe fonts door moeten sturen. Dit beperkt het design en de vrijheid van de designer enorm. Een alternatief is om de tekst als plaatje te serveren, maar dit gaat ten koste van indexering en accesability. Maar er is nu een makkelijke en enorm bruikbare methode om fonts te ‘embedden’ in je webpagina: @font-face

Het font staat op de server

Allereerst moet het lettertype aanwezig zijn op de web-server. Dit omdat de kans groot is dat de gebruiker het lettertype niet heeft geïnstalleerd. Let wel op de licentie van een font. Het feit dat deze via de website wordt gedistribueerd betekend eigenlijk dat je aan het delen bent. De fonts die geïnstalleerd staan op je computer komen vaak samen met je OS, die heeft de licenties geregeld. Het is dus niet vanzelfsprekend dat deze fonts dan ook legaal gedeeld mogen worden. Een website waar enorm veel gratis en commercieel te gebruiken fonts staan in TreuType en in OpenType is Font Squirrel. Nadat je het font hebt gedownload zet je deze op je webserver zodat je ze kan embedden met CSS.

Gebruik van @font-face

Door onderstaande code embed ik het lettertype Lobster 1.1. een font die open beschikbaar is en te vinden is op Font Squirrel. Het toegankelijk maken van het font doe ik in CSS.

@font-face {
	font-family: 'Lobster1.1';
	src: url('/fonts/lobster_1.1_.otf') format('opentype');
}

Bovenstaande code pakt het bestand lobster_1.1_.otf uit de map fonts en noemt het Lobster 1.1. Hierna is het gebruik van het font hetzelfde als anders. Geef alle H1 koppen maar eens dit lettertype, maar zorg er voor dat browsers die incompatible zijn wel de tekst kunnen laten zien met een alternatief font.

h1 {
    font-weight: normal;
    font-style: normal;
    line-height:normal;
    font-family: 'Lobster1.1', sans-serif;
    font-size:83px;
    color: #333333;
    }

Meerdere malen @font-face gebruiken

Je kunt dit zelfde meerdere malen doen. Je kan dus na eenmalig het font te embedden in alle CSS code er na hetzelfde font gebruiken. Ook kan het embedden van meerdere font gewoon gebeuren door meerder malen @font-face te gebruiken.

@font-face {
	font-family: 'Lobster1.1';
	src: url('../fonts/lobster_1.1_.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Quicksand Book';
	src: url('../fonts/Quicksand_Book.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}

h1 {
    font-weight: normal;
    font-style: normal;
    line-height:normal;
    font-family: 'Lobster1.1', sans-serif;
    font-size:83px;
    color: #FFFFFF;
    margin:5px 0px;
    }

h2 {
    font-weight: normal;
    font-style: normal;
    line-height:normal;
    font-family: 'Lobster1.1', sans-serif;
    font-size:30px;
    color: #999999;
    margin:15px 0px 5px 0px;
    }

p   {
    font-weight: normal;
    font-style: normal;
    line-height:normal;
    font-family: 'Quicksand Book', sans-serif;
    font-size:13px;
    color: #000000;
    line-height:1.3em;
}

Welke browsers zijn compatible met CSS3 font-face

@font-face werkt goed in de huidige versies van Chrome, Opera, Safari en Firefox. Internet explorer ondersteunt alleen het EOT type font. Al met al dus geen exotische keus om een font te embedden. Vertel dat goede nieuws eens op een grafische afdeling en je zult vele glunderende gezichtjes zien.

Introducing the Google Font API & Google Font Directory (googlecode.blogspot.com)
2010: Web Fonts Are Here and Ready to Use (ajaxian.com)
Google enters the @font-face business (wisdump.com)
Typekit, iPad and Web Fonts (macstories.net)

HTML5: localisation. Vraag de locatie op in de browser met getCurrentLocation

Maurice Lourens — Fri, 21 May 2010 09:30:13 +0000

: Image by hawaii via Flickr

Na het artikel over HTML5 Canvas en twee mogelijkheden voor lokale opslag (Local storage en Database Storage) ben ik lekker op dreef. Daarom vandaag een stukje over geolocation. Met geolocation kunnen wij de locatie van iemand in de browser opvragen. Dit is uitermate geschikt voor mobiele toepassingen en het leveren van een gepersonaliseerde ervaring.

Realtime en locatiediensten steeds belangrijker

Realtime informatie en gepersonaliseerde locatie-diensten zijn sterk in opkomst. Zo zijn er initiatieven als Foursquare en Google Latitude die enorm aan populariteit winnen. Op dit moment moet een aparte mobiele applicatie geschreven worden die de locatie van de gebruiker kan doorgeven aan de server, maar door middel van geolocation in HTML5 kunnen we ook in de browser de locatie opvragen van een persoon. Dit geeft weer een enorm aantal toepassingen voor webapplicaties, vooral voor mobiele apparaten.

Niet alleen via GPS

De locatie van een client hoeft niet perse door middel van GPS te worden opgevraagd. Het is dus niet nodig om een apparaat te hebben met ingebouwd GPS maar het werkt ook op de normale desktop computer. Andere bronnen op locatie te bepalen zijn bijvoorbeeld het ip nummer, driehoeksmeting van GSM masten, Wifi, bluetooth etc. Het is dus niet altijd 100% zeker dat de geretourneerde waarde ook de werkelijke positie bevat, maar het geeft in ieder geval de meest betrouwbare positie van de client op dat moment weer.

Compatible browsers

Op dit moment is het nog onzeker of Microsoft het gaat redden om de ondersteuning in Internet Explorer 9 te krijgen, maar het werkt al op Firefox (>3.5), Chrome (>5.0; komt later 2010 uit), Opera (>10.*), Ok op het Iphone OS 3+ kan er gebruik gemaakt worden van geolocation. Het moeilijke is dat het naast een aanpassing in de browser ook een aanpassing in het onderliggende besturingssysteem vraagt, omdat deze de hardware aanstuurt om de positie van de client te berekenen. Firefox is de enige browser die geheel

Positie opvragen in javascript met getCurrentPosition

De locatie opvragen binnen javascript is uiterst simpel en gebeurd met getCurrentPosition. Deze functie heeft 3 argumenten namelijk:

succescallback (wat te doen bij succes)
errorcallback (wat te doen bij een fout)
casheoptions (hoe lang blijft de positie in de cache bewaard)

De succescallback is een functie waarin de long-lat coördinaten gebruikt kunnen worden, hieronder een voorbeeld.

// locatie opvragen en doorgeven aan de functie 'verwerkLocatie', als er geen locatie opgevraagd kan worden wordt de functie 'locatieError' uitgevoerd.
navigator.geolocation.getCurrentPosition(verwerkLocatie, locatieError);

function verwerkLocatie(position) {
      alert("mijn locatie is:"+position.coords.latitude+" "+position.coords.longitude);
}

function locatieError() {
      alert("Locatie kon niet worden vastgesteld door middel van HTML5");
}

Locatie iopvragen vanuit de cache

Het kan voorkomen dat de locatie nu niet beschikbaar is, maar dat deze wel x aantal minuten geleden is vastgesteld. Mobiele telefoons doen dit om de batterijduur te verlengen. Hierdoor is het mogelijk om een positiebepaling vanuit de opgeslagen cache op te vragen. Hieronder een voorbeeld waarin er een positie wordt opgevraagd vanuit de cache die niet ouder is dan 10 minuten.

navigator.geolocation.getCurrentPosition(successCallback,
                                             errorCallback,
                                             {maximumAge:600000});

Locatie gebaseerde webapplicatie bouwen

Nu kan de locatie gebruikt worden om bijvoorbeeld weer te geven op een map (vind verkooppunten van product x in mijn omgeving), of kan de locatie gebruikt worden om de taal van de website te selecteren. er zijn natuurlijk veel verschillende toepassingen om de locatie te gebruiken. Uitproberen? kijk eens op de demo op html5demos.com

The Web Doesn’t Suck. Browsers Are Innovating. (yehudakatz.com)
Google official reaffirms HTML5 readiness (infoworld.com)

Het bouwen van een mobiele website.

Maurice Lourens — Mon, 22 Mar 2010 17:09:27 +0000

: Image via Wikipedia

Net toen het me helemaal niet interessant leek om mobiele sites te bouwen kreeg ik een opdracht binnen hiervoor. Een klant wil dat hun site geoptimaliseerd is voor mobiel gebruik. Dat betekend lichter, rekening houden met beperkte ruimte, JavaScript verwijderen en plaatjes beter uitserveren.

Detectie van het platform en zijn mogelijkheden

Om het wiel niet een tweede keer uit te vinden gebruiken wij WURFL. Dit is een grote verzameling van XML bestanden waarin alle mogelijkheden per telefoon zijn beschreven. Door de detectie van de user-agent en dus de telefoon kan ik met behulp van WURFL alle gegevens er bij vinden zoals resolutie, JavaScipt ondersteuning, etc.

Indelen van categorieën telefoons

Met tweakers.net als voorbeeld hebben we apparaten onderverdeeld in verschillende classen. We hebben ook dezelfde classen gebruikt als Tweakers welke staan beschreven op de ‘device detect‘ pagina’. De onderscheid tussen de versie A tot en met F ligt hem vooral in resolutie en JavaScript support.

Omgaan met resolutie

Net nu we eindelijk er toch vanuit kunnen gaan dat een standaard beeldscherm minimaal 1024 breed is (de 800 x 600 resolutie-schermen zijn verwaarloosbaar) moete we dus weer rekening gaan houden met lagere resoluties. Het fijne is dat de modernere telefoons wel kunnen zoomen.In ons project gaan we er vanuit dat de meeste telefoons niet hoeven te zoomen. Maar niet alleen de resolutie-verschillen maken het erg, maar ook de verschillende verhoudingen.

Om het ons niet te moeilijk te maken testen we met de meest voorkomende resoluties:

128 x 160 pixels
176 x 220 pixels
240 x 320 pixels
320 x 480 pixels

De meeste smartphones (waarbij IPhone een grote speler is) hebben de laatst genoemde resolutie, iets wat ons heeft laten kiezen voor een breedte van 310px.

Het I-phone zoom probleem

De eerste mobiele versie was al vrij snel een feit, maar op de IPhone hadden we een gek probleem. De Iphone lijkt alles te schalen. Eerst dacht ik een fout te maken meteen en veel te breed element er in, maar naar een paar test werdt al vrij snel duidelijk dat Iphone (mijn zijn resolutie van 320px) maar al te graag 1024 wilt laten zien. Standaard toont hij dus altijd alles kleiner. Om dit op te lossen kan de volgende meta-tag worden gebruikt:

Een enorm simpele oplossing dus. Hiermee vertel je de browser van de Iphone dat de initiele schaal 1 is (dus 100%) en dat de maximale schaal ook 1 is. Zo kan er wel niet meer ingezomd worden. Door de maximale schaal te vergroten kan er wel worden gezoomd (wat weer fijner is voor de mensen die het niet goed kunnen lezen).

Roteren naar “landscape” en terug

De volgende stap is om de website bij een landscape positie de bredere ruimte te laten gebruiken. Hiervoor kunnen we javascript gebruiken. Op het moemnt dat de orientatie veranderd moet er een actie komen die het geheel kleiner of juist groter maakt. Dit is te realiseren met de event-handler “onorientationchange”:

MIX10: Designing and Developing for the Rich Mobile Web (lukew.com)
Mobile Development with Apache MyFaces Trinidad (nofluffjuststuff.com)
Designing for the mobile web (sitepoint.com)
The iPad Web Design & Development Toolbox (iphone.appstorm.net)

Besturingssysteem in de cloud

Maurice Lourens — Sun, 29 Nov 2009 21:52:43 +0000

: Image by Carlos Gutiérrez G. via Flickr

Steeds meer applicaties draaien in de ‘cloud‘, oftewel het internet. Deze applicaties worden niet meer geïnstalleerd op een computer maar draaien op het internet binnen de browser. De eerste voorbeelden hiervan zijn de webmail applicaties. Ooit begonnen als een manier om tussendoor de email te controleren, maar door Gmail ontwikkeld tot een volwaardige email client.

Snellere browsers

De afgelopen jaren is er veel gebeurd met de browsers die wij gebruiken.Door de snellere internetverbindingen kon er meer naar de browser gestuurd worden. Die grotere hoeveelheid aan informatie moet ook verwerkt worden. Dit heeft geleid tot betere,snellere en krachtigere browsers. Uiteindelijk heeft dit de weg vrij gemaakt voor geavanceerdere webapplicaties. Deze hebben weer een snellere internet-verbinding nodig en zo is de cirkel weer rond. Deze cyclus verloopt steeds sneller wat een enorme stimulans is voor ontwikkelaars van online webapplicaties.

Verandering van ons besturingssysteem

De verschuiving van applicaties naar de cloud heeft grote consequenties voor de besturingssystemen die wij gebruiken. Het doel van een besturingssysteem is snel toegang geven tot applicaties,maar webapplicaties hebben de tussenlaag van de browser. Hierdoor zijn er enkele besturingssystemen in de maak die het huidige idee van een besturingssysteem loslaten en zich richten op de cloud.

Google Chrome OS

Een van de bekendste van deze ‘nieuwe generatie’ besturingssystemen is Google Chrome OS. Dit systeem is uit gegaan van de bekende browser. Uitgebouwd met snelkoppelingen voor veel gebruikte webapplicaties. Hierin spelen de bekende webapplicaties van Google natuurlijk een grote rol, maar ook de nieuwe online office software van Microsoft werd getoond binnen Chrome OS

gOS

Door sommigen in het verleden gebombardeerd als GoogleOS omdat gOS gebruik maakt van de vele Google web-applicaties. gOS is eigenlijk Ubuntu met een eigen skin en de Google Cloud services er aan toegevoegd. De “widgets” maken het geheel weer wat speelser en de verdere optimalisatie voor gebruikers van Netbooks zijn welkom. De makers van gOS zijn nu ook bezig met een volledige cloud versie van hun OS, maar daar is nog niet genoeg over bekend.

gOS met widgets

Moblin

Door het bureaublad concept geheel los te laten en aansluiting te bieden op de populaire webapplicaties van het moment is Moblin een indrukwekkend besturingssysteem dat zeer intuïtief werkt. Moblin gaat uit van de taken die een gebruiker uitvoert. Muziek luisteren, websites bezoeken,mailen,sociale websites en contacten onderhouden,video’s kijken, etc. Alle functionaliteiten zijn verweven in verschillende panelen gemakkelijk bereikbaar. Tot nu toe ben ik zeer tevreden met Moblin maar het ene grota nadeel, ik krijg het niet draaiende op mijn EEEpc 900, omdat de processor niet ondersteund wordt. Jammer want ik had graag met dit systeem gewerkt.

Jolicoud

Omdat ik Moblin niet kon gebruiken op mijn eeepc 900 was ik op zoek naar een goed alternatief. Bij het zoeken stuitte ik op Jolicloud (zelfde makers als Netvibes). Bij het lezen van hun visie werd ik al enthousiast:

At Jolicloud we believe a movement has started. A movement that will change the computer industry forever: a world where computers are inexpensive, where operating systems are free and software is online. This is the world we dreamed of when we first discovered computers and the Internet.

Omdat het testen alleen bestemt was voor enkele mensen schreef ik me in voor een uitnodiging. 1 dag later kon ik Jolicloud installeren en proberen. Helaas viel me dit erg tegen. Het is eigenlijk gewoon de Netbook Remix versie van Ubuntu, plus Mozilla’s Prism en een set aan webapplicaties die binnen Prism draait. De meegeleverde USB bootdisk maker voor win/os x/linux was mooi, de installatie is wat we gewend zijn van Ubuntu; erg simpel, maar dan de tegenvaller. In de screenshots leek het heel wat maar het is niks meer dan een webpagina die ook draait binnen Prism bovenop Ubuntu. Het is een goede visie, een leuk begin maar verkeerde uitvoering. Misschien dat het idee in de komende tijd verder wordt doorontwikkeld zodat het geen tegenvaller meer zal zijn. Het zou fijn zijn om ook binnen de Jolicloud omgeving de web-apps te kunnen draaien zodat er niet steeds teruggegaan moet worden naar het conventionele Netbook Remix scherm.

Andere initiatieven

Er zijn vele andere initiatieven die ik niet allemaal op kan noemen. Microsoft is bezig zijn Live platform te combineren met een cloud OS Windows Azure. Daarnaast zijn er naast de ‘hybride’ cloud oplossingen die ik beschrijf enkele volledig gevirtualiseerde besturingssystemen online, zoals eyeOS. Toch denk ik dat een volledige overstap naar de cloud een stap te ver zal zijn… voor nu.

OS als betonblok

Door deze ontwikkelingen is het ‘originele’ OS een massief blok aan het been geworden van veel computergebruikers. Deze OS’en hebben zware dure computers nodig om goed te draaien om daarna alleen een tussenlaag te worden om webapplicatie te draaien. Voor ruim 80% van de computergebruikers is de computer te zwaar en een stroomvreter; en de software te duur. Deze ontwikkeling gaat de computerindustrie veranderen ten gunste van de consument. Het duurt niet lang voordat Het besturingssysteem voor een groot deel in de cloud zal gaan werken. De vraag is alleen: hoe lang laat de consument zichzelf nog bespelen?

Chrome OS demo today (ecombizcenter.blogspot.com)
Web browser Round-up : From ‘Most Popular’ to ‘Most Innovative’ (techpluto.com)
What Is an Operating System? The REAL Guide to Chrome OS for Dummies. (siliconangle.net)

Web elements: search-box

Maurice Lourens — Thu, 05 Nov 2009 20:34:05 +0000

: Image via Wikipedia

Search is getting the dominant way to navigate trough the web. The first web generation started out with a web-directory (the good old Yahoo, Altavista times), nowadays the start of every web-visit is search. Websites changed a lot because of this. menu’s, sitemaps and breadcrumbs (the whole web experience) changed because the homepage of every website is not the usual landing page. A search-box is almost essential on every website.

Positioning of the search box

More websites are using a search-box the give users fast access to their information. Not only because websites are getting bigger, also because search is an automatic process. The “Google-Generation” does not care about menu’s they directly use the search-box to find the information they need, even if a website has just 5 pages. To make the search box accessible it needs to be on ‘the right spot’.
eye-tracking heatmaps tell us that most visitors are scanning a page in a ‘F’ figure. Two horizontal lines (mostly the horizontal menu and the first header) and a vertical line (a vertical menu). search-boxes are mostly places in the right-upper corner within this ‘F’.

Design of the search-box

Most search-boxes are just a text input field with a button to start search. Sometimes they got a ‘advanced’ search possibility. After examining loads of boxes I came to some general conclusions:

There seems to be a trend to filter a search-result after searching instead of offering an advanced search option.
Most searches give results with the search-term emphasized and placed in their context.
Wildcards like % and * are not used anymore.
Websites with a lots of content place a search-box in the center, and do not offer a classic menu anymore.

Examples of search boxes

SEO Optimization Basics And Concepts (ronmedlin.com)
Microsoft, Yahoo partnership could reach beyond the US (sfgate.com)
Google Optimization Tips for Photography Websites (nichetitans.com)
Blog – Caffeine Injection Gives Google Search a Boost (technologyreview.com)
YaToo: Y! Going Real Time (marketingpilgrim.com)

Start with wireframes.

Maurice Lourens — Wed, 14 Oct 2009 20:28:56 +0000

: Image via Wikipedia

Want to start a project, start with a wireframe! Wireframes are an essential part of the project process. Wireframing has some benefits like: Faster web development, a good project guideline and Better user testing. I can advise everyone to start creating wireframes.

Why using wireframes?

By creating wireframes first, you outline the basic layouts for pages (what goes where) and functionality (what has pagination, what happens when you click “this”, etc.) . You can easily move elements around and ensure that you’re creating a very usable product, while keeping everyone on the project informed. Some reasons for using wireframes are:

Users are emotional. Wireframes and prototypes are generally gray or monochromatic in color. This lends itself well to initial user testing. They/You can focus more on actual functionality than users’ reactions to colors, pictures, text, etc. User testing can be hard because people have biased and emotional responses to certain things, this helps alleviate those situations. Wireframes also help you test earlier on in the process. You can see what’s working and what needs some revising before the design is set in stone.
Designers can make it too pretty. This will give your designers a place to start, even if you both decide to move things around, it’s at least a non-blank canvas. Graphic designers typically don’t want to design forms, am I correct? This lets them do what they do best without wondering what needs to happen on the page.
Programmers can program. Knowing what functionality needs to exist upfront will make your programmers happy and make teamwork easier for them. This allows them to breakdown what/where/when action happens and how to account for it, as well as how best to delegate the work among themselves.

Wireframing on paper

I started out wireframing with pencils on paper, but it did not quite work out for me. I even have difficulties drawing a straight line. So I stopped with this technique as soon as I found Omnigraffle. Last month I stumbled upon the website of Jason Robb, that gave me again new inspiration to start on paper, so I bought some markers and started again. Wireframes on “real” paper just look better, the counter side is that it’s really hard to edit.

Wireframe software

Ready to start with wireframes? There are some great tools out there that you can use creating them.

OmniGraffle Pro, Personally I’m using this one. First because it is easy, second because there are tons of stencils for it, en third.. I own a Mac, so I can’t use Visio. Want to find a stencil, go to Graffletopia. And really, Omnigraffle Pro is worth the money.
Adobe Fireworks. The new Fireworks has loads of rapid prototyping and Wireframe possibilities. Sometimes I like to use it but the bloated possibilities often let you create too detailed wireframes.
Microsoft Visio. For a long time Visio has been the standard for diagrams on the PC and a lot of people have continued to carry on with it for wireframing. You won’t get the same presentation modes that OmniGraffle offers, but you will find more stencils and templates available on the web.

Start today!

I started one year ago with wireframes, and I’m glad I did. I can’t imagine a project without a wireframe. Never used a wireframe? start today and you’ll see how easy it is. You do not have to be an artist to draw one; keep it simple stupid!

Visio Killer Gliffy Gets A Makeover (readwriteweb.com)
Help, we’re drowning in wireframing apps! (90percentofeverything.com)
Rapid Prototyping Tools Revisited (adaptivepath.com)
Site-it!: Information Architecture Prototyping Tool (slideshare.net)

How JavaScript frameworks contribute to a consistent experience

Maurice Lourens — Thu, 01 Oct 2009 20:19:55 +0000

: Image by Phillie Casablanca via Flickr

JavaScript Libraries started out as easy frameworks for web developers. Why write code that’s already been written and, in most cases, better than home-made JavaScript? It also provides a consistent way of programming throughout a project and a fast way to build applications.

JQuery UI and Ext JS, Prototype, YahooUI all grew to complete JavaScript platforms with familiar design elements that help programmers build an interface that people are used to. JQuery even has an own themeroller where programmers can generate a whole css theme for their interface.

Building bridges

The new generation of JavaScript libraries are building a small (but hopeful) bridge between designers and developers. Designers can understand the concept, en have consistent elements to work with. Developers can integrate these elements easily within their projects.

Cross browser, cross OS

The acceptance of these libraries among developers and designers is a great step to a consistent experience of web applications. we all recognize widgets, sliders, tabs, tree’s and we know how to operate them. Consistency is crucial when building rich web-applications. It does not depend on browser or OS, just the library used.

Skepticism

Of course there are some reasons why NOT to use a library. Programmers want to know what’s happening, mainly for debugging reasons, It can be a bit bloated when only using one or two functions and the biggest reason: You shouldn’t trust the code of others for your professional purposes. The latest versions of the various frameworks take away most of these worries with good debug option and even better performance.

jQuery Tools: The missing UI library for the Web (noupe.com)
Prototype 1.6.1; Speed up, clean up, and team up (ajaxian.com)
Colin Clark Accessible U Is With J Query And Infusion[1] (slideshare.net)

Netsetters weblog » visualisation

Safari tips voor IPhone en IPad (iOS)

Ken het plusje

Maak zelf je desktop icoon

Web-applicatie Full Screen op je IPhone en IPad

Negeer de automatische telefoonnummer links

Kies zelf je toetsenbord

Draaien met het scherm

(automatisch) zoomen; de viewport

Nog meer mogelijkheden op IPhone en IPad

Related articles by Zemanta

CSS Pseudo classes

Compatibility van de nieuwe pseudo classen

Gebruik van pseudo classes

Pak het eerste kind met :first-child

:before en :after css elementen

De :lang pseudo class

:first-line en :first-letter classe

Doe meer met CSS

Related articles by Zemanta

HTML5 contenteditable: Pas tekstblokken direct aan.

Contenteditable toepassingen

Compatibility van contenteditable

Welke elementen kunnen worden aangepast met contenteditbale

Gebruik van contenteditable

Deze kop is aanpasbaar

Neemt stijl over van element

Kop is niet aan te passen

Een demo van content editable

Related articles by Zemanta

CSS3; gebruik van lettertypen op het web met @font-face

Het font staat op de server

Gebruik van @font-face

Meerdere malen @font-face gebruiken

Welke browsers zijn compatible met CSS3 font-face

Related articles by Zemanta

HTML5: localisation. Vraag de locatie op in de browser met getCurrentLocation

Realtime en locatiediensten steeds belangrijker

Niet alleen via GPS

Compatible browsers

Positie opvragen in javascript met getCurrentPosition

Locatie iopvragen vanuit de cache

Locatie gebaseerde webapplicatie bouwen

Related articles by Zemanta

Het bouwen van een mobiele website.

Detectie van het platform en zijn mogelijkheden

Indelen van categorieën telefoons

Het I-phone zoom probleem

Roteren naar “landscape” en terug

Related articles by Zemanta

Besturingssysteem in de cloud

Snellere browsers

Verandering van ons besturingssysteem

Google Chrome OS

gOS

Moblin

Jolicoud

Andere initiatieven

OS als betonblok

Related articles by Zemanta

Web elements: search-box

Positioning of the search box

Design of the search-box

Examples of search boxes

Related articles by Zemanta

Start with wireframes.

Why using wireframes?

Wireframing on paper

Wireframe software

Start today!

Related articles by Zemanta

How JavaScript frameworks contribute to a consistent experience

Building bridges

Cross browser, cross OS

Skepticism

Related articles by Zemanta