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)

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 » Web application