Webentwicklung für das IPhone

Reinhard Henning

Webentwicklung für das IPhone

Inhalt

• Eigenschaften des IPhone Safari Browsers

• Toolkits, Frameworks, CSS & Javascript Bibliotheken

Eigenschaften des IPhone Safari Browsers

Mobile Safari (Original Zustand, ohne Jailbreak/Plugins)

• HTML(5), XHTML, CSS3

• Kein File Download / Upload– Dateien per mailto: senden

• Kein Flash, kein Java

• Javascript, Ajax, Canvas, SVG 1.1, SQLite

• Video: H264, MPEG-4 (m4v, 3gp, mov?)– Youtube / Quicktime Player

Eigenschaften des Safari Browsers

• Spezielle Links öffnen Anwendungen:

– eMail mailto:reinhard.henning@gmx.de

– Telefonieren <a href=“tel:+4917128.....“>Ruf mich an</a>

– SMS SMS:+4917128.....

– Google Maps (maps.google.com )– Youtube: www.youtube.com

– Playlisten .pls öffnen im quicktime Player– Links zum App Store

Bildschirm Maße

Vollbild:

320x480

Webseiten für den IPhone Safari Browser

Vermeide• Frames• Flash• Java applets• Scalable vector graphics (SVG)• Plug - ins• CSS property position:fixed• JavaScript functions showModalDialog() and print() and

several mouse events • HTML element input type=”file”

Webseiten für den IPhone Safari Browser

• App-Icon für die Website– apple-touch-icon.png ins Root-Verzeichnis– Oder:

<link rel="apple-touch-icon" href="http://www.meinserver.de/meineapp/mein-icon.png" />

Webseiten für den IPhone Safari Browser

• Um ein CSS nur f ür das Iphone zu laden:

<link rel="stylesheet" href="iphone.css" type="text/css" media="only screen and (max-device-

width: 480px)" />

• Useragent (Browserweiche):Mozilla /5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS X; de-

de) AppleWebKit /528.18 (KHTML, like Gecko ) Version /4.0Mobile /7A341 Safari /528.16

if ( stristr ( $_SERVER[ 'HTTP_USER_AGENT'] , 'iPhone' )) { ... }

Webseiten für den IPhone Safari Browser

• Viewport (Steuerung v. Ausschnitt u. Zoom)

Default:

<meta name=”viewport” content=”width=980;user-scalable=1;” />

Optimal:<meta name="viewport" content="width=device-

width; minimum-scale=1.0; maximum-scale=1.0; scalable=1;">

Bsp: Viewport

Nützliche Javascript Funktionen

addEventListener("load", function() {

setTimeout(updateLayout, 0); }, false);

var currentWidth = 0;

function updateLayout()

{

if (window.innerWidth != currentWidth)

{

currentWidth = window.innerWidth;

var orient = currentWidth == 320 ? "profile" : "landscape";

document.body.setAttribute("orient", orient);

setTimeout(function()

{

window.scrollTo(0, 1);

}, 100);

}

}

setInterval(updateLayout, 400);

CSS Selector

body[orient=landscape] { width: 480px; } body[orient=portrait] { width: 320px; }

Schiebt die URL Leisteaus dem Bild (+60px)

Werkzeuge / Frameworks / Bibliotheken

• Dashcode (Apple, grafische IDE)

• IUI (Javascript, CSS, Grafiken)

• WebApp-net (Javascript, CSS, Grafiken)

• Safire (Javascript, CSS, Grafiken)

• iWebkit (Javascript, CSS, Grafiken)

• jQuery Touch (Erweiterung)

• iPhone GUI PSD 3.0 (Photoshop Grafik)

• PhoneGap (Fullscreen Browser, für native Apps, erfordert Xcode)

IUI User Interface Framework

<ul id="home" title="Categories" selected="true">

<li class="group">B</li>

<li><a href="#Bananas">Bananas</a></li>

<li><a href="#Barrels">Barrels</a></li></ul>

...

<ul id="Monkeys" title="Monkeys">

<li><a href="#howler">Howler</a></li>

<li><a href="#spider">Spider</a></li>

<li><a href="#rhesus">Rhesus</a></li>

<li><a href="#barbaryape">Barbary Ape</a></li></ul>

<p id="howler">Howler Monkeys love to ...</p>

Quellen

• Apple Developer Center: http://developer.apple.com/iphone/• iPhone Google Group:

http://groups.google.com/group/iphonewebdev• Web Kit: http://webkit.org• iPhone Developer’s Wiki: http://www.kudit.com/wiki/• DevPhone: http://devphone.com• iPhone Atlas: http://iphoneatlas.com• iPhone News Blog: http://iphonenewsblog.com• IUI http://code.google.com/p/iuiiuiiuiiui/