Webentwicklung für das IPhone
of 14
/14
-
Author
reinhardh -
Category
Self Improvement
-
view
2.824 -
download
1
Embed Size (px)
description
Tipps zu Frameworks, Javascript code und HTML Tricks für eine angepasste Darstellung von Webseiten auf dem IPhone
Transcript of Webentwicklung für das IPhone
- 1. Webentwicklung fr 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:[email protected] Telefonieren Ruf mich an SMS SMS:+4917128..... Google Maps (maps.google.com) Youtube: www.youtube.com Playlisten .pls ffnen im quicktime Player Links zum App Store
- 5. Bildschirm Mae Vollbild: 320x480
- 6. Webseiten fr 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 fr den IPhone Safari Browser App-Icon fr die Website apple-touch-icon.png ins Root-Verzeichnis Oder:
- 8. Webseiten fr den IPhone Safari Browser Um ein CSS nur fr das Iphone zu laden: 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 fr den IPhone Safari Browser Viewport (Steuerung v. Ausschnitt u. Zoom) Default: Optimal:
- 10. Bsp: Viewport
- 11. Ntzliche 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, fr native Apps, erfordert Xcode)
- 13. IUI User Interface Framework
- B
- Bananas
- Barrels
- Howler
- Spider
- Rhesus
- Barbary Ape
Howler Monkeys love to ...
- 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 Developers 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
