Webentwicklung für das IPhone

14
Webentwicklung für das IPhone Reinhard Henning Webentwicklung für das IPhone

description

Tipps zu Frameworks, Javascript code und HTML Tricks für eine angepasste Darstellung von Webseiten auf dem IPhone

Transcript of Webentwicklung für das IPhone

Page 1: Webentwicklung für das IPhone

Webentwicklung für das IPhone

Reinhard Henning

Webentwicklung für das IPhone

Page 2: Webentwicklung für das IPhone

Inhalt

• Eigenschaften des IPhone Safari Browsers

• Toolkits, Frameworks, CSS & Javascript Bibliotheken

Page 3: Webentwicklung für das IPhone

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

Page 4: Webentwicklung für das IPhone

Eigenschaften des Safari Browsers

• Spezielle Links öffnen Anwendungen:

– eMail mailto:[email protected]

– 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

Page 5: Webentwicklung für das IPhone

Bildschirm Maße

Vollbild:

320x480

Page 6: Webentwicklung für das IPhone

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”

Page 7: Webentwicklung für das IPhone

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" />

Page 8: Webentwicklung für das IPhone

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' )) { ... }

Page 9: Webentwicklung für das 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;">

Page 10: Webentwicklung für das IPhone

Bsp: Viewport

Page 11: Webentwicklung für das IPhone

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)

Page 12: Webentwicklung für das IPhone

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)

Page 13: Webentwicklung für das IPhone

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>

Page 14: Webentwicklung für das IPhone

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/