Your SlideShare is downloading. ×
0
Iphone Presentation for MuMe09
Iphone Presentation for MuMe09
Iphone Presentation for MuMe09
Iphone Presentation for MuMe09
Iphone Presentation for MuMe09
Iphone Presentation for MuMe09
Iphone Presentation for MuMe09
Iphone Presentation for MuMe09
Iphone Presentation for MuMe09
Iphone Presentation for MuMe09
Iphone Presentation for MuMe09
Iphone Presentation for MuMe09
Iphone Presentation for MuMe09
Iphone Presentation for MuMe09
Iphone Presentation for MuMe09
Iphone Presentation for MuMe09
Iphone Presentation for MuMe09
Iphone Presentation for MuMe09
Iphone Presentation for MuMe09
Iphone Presentation for MuMe09
Iphone Presentation for MuMe09
Iphone Presentation for MuMe09
Iphone Presentation for MuMe09
Iphone Presentation for MuMe09
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Iphone Presentation for MuMe09

1,462

Published on

iPhone/iPod touch presentation for MuMe09.

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,462
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
77
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. iPhone/iPod touch Gonzalo Parra
  • 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. What is the iPod touch? • accelerometer • multi-touch display • sensors (ambient light) • WI-FI, Bluetooth
  • 4. Types of Development • Native Apps • Mobile Safari Web Apps • External platforms Apps • Jailbreak Apps
  • 5. Native Applications • iPhone SDK (requires an Intel Mac) • Language: Objective-C • Tools: XCode, Interface Builder, iPhone Simulator • Apple Developer Program • AppStore
  • 6. Mobile Safari Web Applications • Language: HTML*, Javascript, CSS • Tools: DashCode, iPhone Simulator, Safari * PHP, JSP, ASP, ...
  • 7. External platforms • PhoneGap, Titanium, Mobione • requires iPhone SDK • Language: HTML*, Javascript, CSS
  • 8. Jailbreak Applications • Windows/Linux • Language: Objective-C • Tools: cygwin, Eclipse, jailbreak iPhone/iPod touch • Cydia store
  • 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. 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. Basics
  • 12. Basics The finger is not a mouse!
  • 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. Hello iPhone!
  • 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. iUI Framework • JS & CSS bundle • JSON object window.iui • Elements • toolbar • home • button • backbutton
  • 17. Hello iPhone 2!
  • 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. More examples iUi: iPhone User Interface Framework
  • 20. Extra material • PDFs • http://developer.apple.com/iphone/ • Professional iPhone and iPod touch Programming, Richard Wagner • WWW
  • 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

×