Embed Size (px)
DESCRIPTION
iPhone/iPod touch presentation for MuMe09.
Citation preview
iPhone/iPod touchGonzalo Parra
What is the iPhone?
• accelerometer
• GPS
• Digital compass
• multi-touch display
• sensors (proximity, ambient light)
• camera (photos, video)
• UMTS/HSDPA, GSM/EDGE, WI-FI, Bluetooth
What is the iPod touch?
• accelerometer
• multi-touch display
• sensors (ambient light)
• WI-FI, Bluetooth
Types of Development
• Native Apps
• Mobile Safari Web Apps
• External platforms Apps
• Jailbreak Apps
Native Applications
• iPhone SDK (requires an Intel Mac)
• Language: Objective-C
• Tools: XCode, Interface Builder, iPhone Simulator
• Apple Developer Program
• AppStore
Mobile Safari Web Applications
• Language: HTML*, Javascript, CSS
• Tools: DashCode, iPhone Simulator, Safari
* PHP, JSP, ASP, ...
External platforms
• PhoneGap, Titanium, Mobione
• requires iPhone SDK
• Language: HTML*, Javascript, CSS
Jailbreak Applications
• Windows/Linux
• Language: Objective-C
• Tools: cygwin, Eclipse, jailbreak iPhone/iPod touch
• Cydia store
Our project:Mobile Safari Web Apps
Windows MAC
Tools
Deploy
Tests
Framework
Notepad, Eclipse TextEdit, DashCode*
Apache Web server Built-in Apache Web Server
Mobione, Safari Safari, iPhone emulator*
iUI iUI
* XCode needs to be installed
Setting up the tools
Windows MAC
1
2
3
Install Apache Server Activate the Apache Server
Install Mobione Install iPhone SDK
Create our Hello iPhone app
Create our Hello iPhone app
Basics
BasicsThe finger is not a mouse!
BasicsApple-Specific Meta Tag Keys
• apple-mobile-web-app-capable
• apple-mobile-web-app-status-bar-style
• format-detection
• viewport
Supported Attributes
• onorientationchange
• ongesturestart, ongesturechange,..
• ontouchmove, ontouchcancel,..
• ondragenter, ondragleave,..
• ...
Hello iPhone!
Hello iPhone!<meta name = "viewport" content="width=320, user-scalable=0"/><script type="text/javascript" language="javascript">
function updateOrientation() {var displayStr = "Orientation : ";switch(window.orientation) {
case 0: displayStr += "Portrait";break;
case -90: displayStr += "Landscape (right, screen turned clockwise)";break;
case 90: displayStr += "Landscape (left, screen turned counterclockwise)";break;
case 180: displayStr += "Portrait (upside-down portrait)";break;
} document.getElementById("output").innerHTML = displayStr;} </script></head> <body onorientationchange="updateOrientation();"><div id="output"></div> </body>
iUI Framework
• JS & CSS bundle
• JSON object window.iui
• Elements
• toolbar
• home
• button
• backbutton
Hello iPhone 2!
Hello iPhone 2!<head><title>iUI Hello World test for Wholemap tutorial</title> <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/> <style type="text/css" media="screen">@import "iui/iui/iui.css";</style> <script type="application/x-javascript" src="iui/iui/iui.js"></script></head><body> <div class="toolbar"> <h1 id="pageTitle"></h1> <a id="backButton" class="button" href="#"></a> <a class="button" href="#searchForm">Search</a> </div> <ul id="home" title="Hello World" selected="true"> <li><a href="#FirstM">First choice</a></li> <li><a href="#SecondM">Second choice</a></li> </ul>...</body>
More examplesiUi: iPhone User Interface Framework
Extra material
• PDFs
• http://developer.apple.com/iphone/
• Professional iPhone and iPod touch Programming, Richard Wagner
• WWW
References
• Professional iPhone and iPod touch Programming, Richard Wagner
• Safari Web Content Guide, Apple Inc.
• Safari HTML Reference, Apple Inc.
• Web Development with GRAILS, Christopher Judd
• CS193P: iPhone Application Programming, Stanford University
• A quick tutorial on using iUI to create a native looking iPhone or iPod touch web page, Whole Map
