iphone presentation for mume09
DESCRIPTION
iPhone/iPod touch presentation for MuMe09.TRANSCRIPT
![Page 1: Iphone Presentation for MuMe09](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c895fc4a795943258b4652/html5/thumbnails/1.jpg)
iPhone/iPod touchGonzalo Parra
![Page 2: Iphone Presentation for MuMe09](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c895fc4a795943258b4652/html5/thumbnails/2.jpg)
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
![Page 3: Iphone Presentation for MuMe09](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c895fc4a795943258b4652/html5/thumbnails/3.jpg)
What is the iPod touch?
• accelerometer
• multi-touch display
• sensors (ambient light)
• WI-FI, Bluetooth
![Page 4: Iphone Presentation for MuMe09](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c895fc4a795943258b4652/html5/thumbnails/4.jpg)
![Page 5: Iphone Presentation for MuMe09](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c895fc4a795943258b4652/html5/thumbnails/5.jpg)
![Page 6: Iphone Presentation for MuMe09](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c895fc4a795943258b4652/html5/thumbnails/6.jpg)
![Page 7: Iphone Presentation for MuMe09](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c895fc4a795943258b4652/html5/thumbnails/7.jpg)
Types of Development
• Native Apps
• Mobile Safari Web Apps
• External platforms Apps
• Jailbreak Apps
![Page 8: Iphone Presentation for MuMe09](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c895fc4a795943258b4652/html5/thumbnails/8.jpg)
Native Applications
• iPhone SDK (requires an Intel Mac)
• Language: Objective-C
• Tools: XCode, Interface Builder, iPhone Simulator
• Apple Developer Program
• AppStore
![Page 9: Iphone Presentation for MuMe09](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c895fc4a795943258b4652/html5/thumbnails/9.jpg)
Mobile Safari Web Applications
• Language: HTML*, Javascript, CSS
• Tools: DashCode, iPhone Simulator, Safari
* PHP, JSP, ASP, ...
![Page 10: Iphone Presentation for MuMe09](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c895fc4a795943258b4652/html5/thumbnails/10.jpg)
External platforms
• PhoneGap, Titanium, Mobione
• requires iPhone SDK
• Language: HTML*, Javascript, CSS
![Page 11: Iphone Presentation for MuMe09](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c895fc4a795943258b4652/html5/thumbnails/11.jpg)
Jailbreak Applications
• Windows/Linux
• Language: Objective-C
• Tools: cygwin, Eclipse, jailbreak iPhone/iPod touch
• Cydia store
![Page 12: Iphone Presentation for MuMe09](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c895fc4a795943258b4652/html5/thumbnails/12.jpg)
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
![Page 13: Iphone Presentation for MuMe09](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c895fc4a795943258b4652/html5/thumbnails/13.jpg)
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
![Page 14: Iphone Presentation for MuMe09](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c895fc4a795943258b4652/html5/thumbnails/14.jpg)
Basics
![Page 15: Iphone Presentation for MuMe09](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c895fc4a795943258b4652/html5/thumbnails/15.jpg)
BasicsThe finger is not a mouse!
![Page 16: Iphone Presentation for MuMe09](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c895fc4a795943258b4652/html5/thumbnails/16.jpg)
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,..
• ...
![Page 17: Iphone Presentation for MuMe09](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c895fc4a795943258b4652/html5/thumbnails/17.jpg)
Hello iPhone!
![Page 18: Iphone Presentation for MuMe09](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c895fc4a795943258b4652/html5/thumbnails/18.jpg)
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>
![Page 19: Iphone Presentation for MuMe09](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c895fc4a795943258b4652/html5/thumbnails/19.jpg)
iUI Framework
• JS & CSS bundle
• JSON object window.iui
• Elements
• toolbar
• home
• button
• backbutton
![Page 20: Iphone Presentation for MuMe09](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c895fc4a795943258b4652/html5/thumbnails/20.jpg)
Hello iPhone 2!
![Page 21: Iphone Presentation for MuMe09](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c895fc4a795943258b4652/html5/thumbnails/21.jpg)
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>
![Page 22: Iphone Presentation for MuMe09](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c895fc4a795943258b4652/html5/thumbnails/22.jpg)
More examplesiUi: iPhone User Interface Framework
![Page 23: Iphone Presentation for MuMe09](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c895fc4a795943258b4652/html5/thumbnails/23.jpg)
Extra material
• PDFs
• http://developer.apple.com/iphone/
• Professional iPhone and iPod touch Programming, Richard Wagner
• WWW
![Page 24: Iphone Presentation for MuMe09](https://reader034.vdocuments.net/reader034/viewer/2022051819/54c895fc4a795943258b4652/html5/thumbnails/24.jpg)
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