iPhone/iPod touch
     Gonzalo Parra
What is the iPhone?
• accelerometer
• GPS
• Digital compass
• multi-touch display
• sensors (proximity, ambient light)
• c...
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...
Mobile Safari Web
        Applications
• Language: HTML*, Javascript, CSS
• Tools: DashCode, iPhone Simulator, Safari
  * ...
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
• ...
Our project:
 Mobile Safari Web Apps
                Windows                   MAC

  Tools      Notepad, Eclipse   TextEd...
Setting up the tools
         Windows                MAC
                          Activate the Apache
1   Install Apache ...
Basics
Basics
The finger is not a mouse!
Basics
Apple-Specific Meta Tag Keys
• apple-mobile-web-app-capable
• apple-mobile-web-app-status-bar-style
• format-detecti...
Hello iPhone!
Hello iPhone!
<meta name = "viewport" content="width=320, user-scalable=0"/>
<script type="text/javascript" language="java...
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="widt...
More examples
iUi: iPhone User Interface Framework
Extra material

• PDFs
• http://developer.apple.com/iphone/
• Professional iPhone and iPod touch
  Programming, Richard Wa...
References
•   Professional iPhone and iPod touch Programming,
    Richard Wagner
•   Safari Web Content Guide, Apple Inc....
Iphone Presentation for MuMe09
Iphone Presentation for MuMe09
Iphone Presentation for MuMe09
Upcoming SlideShare
Loading in …5
×

Iphone Presentation for MuMe09

1,856 views

Published on

iPhone/iPod touch presentation for MuMe09.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,856
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
85
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Iphone Presentation for MuMe09

  1. 1. iPhone/iPod touch Gonzalo Parra
  2. 2. 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
  3. 3. What is the iPod touch? • accelerometer • multi-touch display • sensors (ambient light) • WI-FI, Bluetooth
  4. 4. Types of Development • Native Apps • Mobile Safari Web Apps • External platforms Apps • Jailbreak Apps
  5. 5. Native Applications • iPhone SDK (requires an Intel Mac) • Language: Objective-C • Tools: XCode, Interface Builder, iPhone Simulator • Apple Developer Program • AppStore
  6. 6. Mobile Safari Web Applications • Language: HTML*, Javascript, CSS • Tools: DashCode, iPhone Simulator, Safari * PHP, JSP, ASP, ...
  7. 7. External platforms • PhoneGap, Titanium, Mobione • requires iPhone SDK • Language: HTML*, Javascript, CSS
  8. 8. Jailbreak Applications • Windows/Linux • Language: Objective-C • Tools: cygwin, Eclipse, jailbreak iPhone/iPod touch • Cydia store
  9. 9. Our project: Mobile Safari Web Apps Windows MAC Tools Notepad, Eclipse TextEdit, DashCode* Built-in Apache Web Deploy Apache Web server Server Safari, iPhone Tests Mobione, Safari emulator* Framework iUI iUI * XCode needs to be installed
  10. 10. Setting up the tools Windows MAC Activate the Apache 1 Install Apache Server Server 2 Install Mobione Install iPhone SDK Create our Hello Create our Hello 3 iPhone app iPhone app
  11. 11. Basics
  12. 12. Basics The finger is not a mouse!
  13. 13. Basics Apple-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,.. • ...
  14. 14. Hello iPhone!
  15. 15. 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>
  16. 16. iUI Framework • JS & CSS bundle • JSON object window.iui • Elements • toolbar • home • button • backbutton
  17. 17. Hello iPhone 2!
  18. 18. 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>
  19. 19. More examples iUi: iPhone User Interface Framework
  20. 20. Extra material • PDFs • http://developer.apple.com/iphone/ • Professional iPhone and iPod touch Programming, Richard Wagner • WWW
  21. 21. 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

×