Webentwicklung für das IPhone
Post on 18-Dec-2014
2824 Views
Preview:
DESCRIPTION
Transcript
Webentwicklung für das IPhone
Reinhard Henning
Webentwicklung für das IPhone
Inhalt
• Eigenschaften des IPhone Safari Browsers
• Toolkits, Frameworks, CSS & Javascript Bibliotheken
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
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
Bildschirm Maße
Vollbild:
320x480
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”
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" />
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.0Mobile /7A341 Safari /528.16
if ( stristr ( $_SERVER[ 'HTTP_USER_AGENT'] , 'iPhone' )) { ... }
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;">
Bsp: Viewport
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()
{
window.scrollTo(0, 1);
}, 100);
}
}
setInterval(updateLayout, 400);
CSS Selector
body[orient=landscape] { width: 480px; } body[orient=portrait] { width: 320px; }
Schiebt die URL Leisteaus dem Bild (+60px)
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)
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>
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/iuiiuiiuiiui/
top related