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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Webentwicklung für das IPhone

2,892

Published on

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

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

No Downloads
Views
Total Views
2,892
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
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

×