- 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.
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
Apple gooit er automatisch een glas-effect overheen, wil je dit niet hebben gebruik dan apple-touch-icon-precomposed
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png" />
Web-applicatie Full Screen op je IPhone en IPad
Door de volgende meta informatie te plaatsen in je <head> van je website kan je de applicatie fullscreen zonder zichtbaar browserscherm laten draaien nadat deze is toegevoegd aan de ‘desktop’ met het plusje.
<meta name="apple-mobile-web-app-capable" content="yes">
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.
<meta name="format-detection" content="telephone=no">
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.
<a href="tel:0111-422622">0111-422622</a>
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: <input type="text" /> <!-- standaard toetsenbord --> Telefoon: <input type="tel" /> <!-- telefoon toetsenbord --> Homepage: <input type="url" /> <!-- web-adres toetsenbord --> E-mail: <input type="email" /> <!-- e-mail toetsenbord --> Leeftijd: <input type="text" pattern="[0-9]*" /> <!-- numeriek toetsenbord -->
Ook kan je de automatische tekstcorrectie uitzetten voor input velden:
<input type="text" autocorrect="off" />
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.
<body onorientationchange="myOrientationChangeFunction()">
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:
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
(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
<meta name = "viewport" content = "width = device-width">
Of zet de breedte op 100% , dan maak je geen gebruik van de automatische zoom
<meta name = "viewport" content = "initial-scale = 1.0">
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%
<meta name = "viewport" content = "initial-scale = 2.3, user-scalable = no">
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.
Related articles by Zemanta
- 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)
Popularity: 100% [?]
Tags: Apple Inc., Data Formats, FAQs Help and Tutorials, HTML, HTML5, Markup Languages, mobiele applicaties, Safari, Safari Mobile, Web application, Website
