Your SlideShare is downloading. ×
  • Like
Webentwicklung für das IPhone
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Webentwicklung für das IPhone

  • 2,849 views
Published

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,849
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
15
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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