webentwicklung für das iphone
DESCRIPTION
Tipps zu Frameworks, Javascript code und HTML Tricks für eine angepasste Darstellung von Webseiten auf dem IPhoneTRANSCRIPT
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:[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
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/