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

1. Webentwicklung für das IPhone
Reinhard Henning

2. Inhalt
• Eigenschaften des IPhone Safari Browsers
• Toolkits, Frameworks, CSS & Javascript Bibliotheken

3. 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

4. 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

5. Bildschirm Maße
Vollbild:
320x480

6. 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”

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

8. 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.0
Mobile/7A341 Safari/528.16
if (stristr($_SERVER['HTTP_USER_AGENT'], 'iPhone')) { ... }

9. 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;">

10. Bsp: Viewport

11. 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()
{
Schiebt die URL Leiste
window.scrollTo(0, 1);
aus dem Bild (+60px)
}, 100);
}
}
setInterval(updateLayout, 400);
CSS Selector
body[orient=landscape] { width: 480px; } body[orient=portrait] { width: 320px; }

12. 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)

13. 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>

14. 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/iui
iui/
iui