Webentwicklung für das IPhone

3,143 views
3,045 views

Published on

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

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,143
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Webentwicklung für das IPhone

  1. 1. Webentwicklung für das IPhone Reinhard Henning
  2. 2. Inhalt • Eigenschaften des IPhone Safari Browsers • Toolkits, Frameworks, CSS & Javascript Bibliotheken
  3. 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. 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. 5. Bildschirm Maße Vollbild: 320x480
  6. 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. 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. 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. 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. 10. Bsp: Viewport
  11. 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. 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. 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. 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

×