Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Beautiful Mind: iPhone Anatomy & Architecture

17,421 views

Published on

O'Reilly Web20 Expo SF 2010 Conference Mobile Track

Published in: Technology
  • Be the first to comment

Beautiful Mind: iPhone Anatomy & Architecture

  1. A Beautiful Mind: Anatomy and Architecture of the iPhone App Bess Ho May 4, 2010 Tue 9:00 AM San Francsico
  2. Silence
  3. Follow QR Code My Slides
  4. Follow QR Code Linkedin
  5. Follow QR Code vCard
  6. My Bio TEXT Short Code 99702
  7. Friendly Assessment
  8. A Beautiful Mind
  9. Anatomy and Architecture of the iPhone App
  10. STANFORD UNIVERSITY School of Engineering
  11. Three Years Ago Jan 2007
  12. Widescreen iPod with touch controls
  13. Revolutionary mobile phone
  14. Breakthrough internet communicator
  15. iPod Phone Internet
  16. iMirror
  17. M-RFID Tag iBadge
  18. iDoor (Inside)
  19. iDoor (Outside)
  20. To boldly go where no man has gone before:
  21. Data Portable Data Communication Sensing Analysis s Tricorder
  22. Locator Scanner Compass Recorder Sensor Search Text Data Voice
  23. Phone Camera (Audio) (Photo / Video) GPS (Geo) Magnetometer (Compass) Accelerometer (XZY) Touch (Device Orientation) Wireless Bluetooth Network / WiFi (File) (Web / Email) External Accessory Microphone SMS (Data) (Audio) (Data) iPhone’s Anatomy
  24. Phone Camera (Audio) (Photo / Video) GPS (Geo) Magnetometer (Compass) Accelerometer (XZY) Touch (Device Orientation) Wireless Bluetooth Network / WiFi (File) (Web / Email) External Accessory Microphone SMS (Data) (Audio) (Data) Portable Sensors
  25. iPhone SDK Xcode Interface Builder Data Analysis
  26. Phone Camera (Audio) (Photo / Video) GPS (Geo) Magnetometer (Compass) Accelerometer (XZY) Touch (Device Orientation) Wireless Bluetooth Network / WiFi (File) (Web / Email) External Accessory Microphone SMS (Data) (Audio) (Data) Data Communications
  27. Touch Audio Visual Sensor Geo Data iPhone’s Anatomy
  28. Laboratory robot has confirmed with a human test: Apple’s iPhone touchscreen is by far the most accurate touch panel on the market iPhone Google Nexus One Motorola Droid HTC Droid Eris Palm Pre BlackBerry Storm 2 Reference: http://www.appleinsider.com/articles/10/03/24/robotic_test_reconfirms_apples_iphone_touchscreen_superiority.html iPhone’s Anatomy
  29. Laboratory robot has confirmed with a human test: Apple’s iPhone touchscreen is by far the most accurate touch panel on the market Reference: http://www.appleinsider.com/articles/10/03/24/robotic_test_reconfirms_apples_iphone_touchscreen_superiority.html iPhone’s Anatomy
  30. MOTO Lab Experiment 7mm robotic “finger” for “medium touch” 4mm robotic “finger” for a “very light touch” iPhone’s Anatomy
  31. iPhone’s Anatomy
  32. “All touchscreens are not created equal.” Screen sensitivity is a combination of 1) hardware component quality 2) design and 3) software integration - Operating System to ensure responsiveness for the user iPhone’s Anatomy
  33. Resistive VS Capacitive Touchscreen Technology
  34. Resistive Touchscreens A screen where two thin metallic layers are separated by a narrow gap. A finger pushing down on the top layer makes contact with the bottom surface and the point of contact is computed by the accompanying electronics. iPhone’s Anatomy
  35. Resistive Touchscreens A screen where two thin metallic layers are separated by a narrow gap. A finger pushing down on the top layer makes contact with the bottom surface and the point of contact is computed by the accompanying electronics. iPhone’s Anatomy
  36. Resistive Touchscreens A screen where two thin metallic layers are separated by a narrow gap. A finger pushing down on the top layer makes contact with the bottom surface and the point of contact is computed by the accompanying electronics. iPhone’s Anatomy
  37. Resistive Touchscreens Step 1: Step 2: Touch Press Pressure-sensitive iPhone’s Anatomy
  38. Capacitive Touchscreens This capacitive technology responds to the electrical properties of your skin, not the pressure of your finger to figure out where you are touching the screen. iPhone’s Anatomy
  39. Capacitive Touchscreens This capacitive technology responds to the electrical properties of your skin, not the pressure of your finger to figure out where you are touching the screen. iPhone’s Anatomy
  40. Resistive VS Capacitive Touchscreen Technology
  41. Resistive VS Capacitive Touchscreen Technology
  42. Resistive VS Capacitive Touchscreen Technology
  43. Web OS VS Native HTML5 / JS / CSS JAVA Objective-C Touchscreen Technology
  44. WebOS VS Native Touchscreen Technology
  45. Web Plug-in WebOS Web Run Time Widget SDK PDK (C / C+ QT Java +) Symbian Java WebOS & Native Platforms
  46. Path of Innovation
  47. Web App Native App
  48. Xcode Interface DashCode Builder
  49. Activity Monitor CPU Sampler Leaks Object Allocations Core Data File Activity UI Recorder Core Animation Open GL ES System Usage Available Instruments
  50. Activity Monitor overall CPU, memory, disk & Monitor network activity Precise time-based sampling of CPU CPU Sampler usage Leaks Detects memory leaks Object Measures memory usage by class Allocations Monitor Core Data activity & Core Data performance Monitor application’s interaction with File Activity the file system Available Instruments
  51. Captures & play back UI events to UI Recorder run exact same sequence of user interactions Core Measures Core Animation graphics Animation performance and resulting CPU load Measures Open GL ES graphics Open GL ES performance and resulting CPU load Monitors file, network & memory I/O System Usage use and duration for each method Available Instruments
  52. Touch
  53. Cocoa Touch Layer Media Layer Core Services Layer Core OS Layer iPhone SDK Frameworks
  54. 320 pixel 480 pixel iPhone / iTouch Screen Size
  55. 768 pixel 1024 pixel iPad Screen Size
  56. Large High (hdpi) 3.2” Screen 320 pixel Normal Medium (mdpi) Small Low (ldpi) 480 pixel Android <1.5 Android 1.6+ Android Screen Sizes
  57. Screen Sizes 84 x 84 pixel 128 x 128 pixel 176 x 208 pixel 240 x 320 pixel 360 x 640 pixel 120 x 160 pixel Screen Width Tiny: 84, 96, 101, 128, 130,132 Small: 160, 176 Medium: 208, 220, 240 Large: 320, 360, 480 Nokia Screen Sizes
  58. 1 2 3 iPhone iPad Universal App Native App
  59. iPhone Icon Promotion 57 x 57 pixel iPad Icon 512 x 512 pixel 72 x 72 pixel iPhone App Store Submission
  60. 162 ppi 132 ppi Core Text Framework Text-rendering & layout features Animated text with special effects Display Density (pixels per inch)
  61. Hardware Software Prefer saving and Accelerometer loading data invisibly Compass Without an explicit Core Location “save” or “load” option Wi-Fi Supports Open GL ES Bluetooth 2.0 with legacy Microphone support for Open GL headphone socket ES 1.0 iPad
  62. Supports external displays and projectors Supports external Apple or third-party keyboard Likely supports external devices - music keyboards, media controllers, game hardware iPad
  63. iPhone UI Library
  64. Carrier 10:32 AM Carrier 10:32 AM Carrier 3G 10:32 AM Signal Strength Carrier Current Network Connection Time Battery Charge Status Bar
  65. 6 Music Videos Podcasts Search More 9 99 999 Should be present on all screens switch between modes & views Badges are superimposed in the tab bar to inform user of new items Tab Bar & Badges
  66. 6 Music Videos Podcasts Search More Tab Bar
  67. Activity indicator for nav bar on grey background... Network activity Display if it takes more than a couple of seconds to perform the task Activity Indicator
  68. Back Button Pane Label Button Optional instructions for this pane Cancel Pane Label Save Pane Label Disabled Groups All Contacts + Inbox (20) 2 of 50 Display title of current view Display buttons that trigger action to the view or navigate Navigation Bar
  69. Page Indicator
  70. 5 Progress Indicator 24 of 39 Primary Secondary Touch size 44 x 44 pixels < 5 toolbar icons Toolbar
  71. Toolbar Icons
  72. MockApp mockapp.com/ Google MockApp Cancel http://mockapp.com/ MockApp Cancel Google Browser Bar
  73. Sample search text Search Clear Directions Cancel Start: Current Location End: Type a company name or stock ID. Cancel Search Cancel Placeholder text Bookmarks button & Clear button Prompt with descriptive title above the search bar Search Bar
  74. Primary action you can also do this or maybe this or why not that Cancel Delete Cancel Selection Or Confirmation Menu Important or common action should appear to the top Destructive action use red button Action Sheets
  75. 0:00 0:28 OK Delete Play Record Action Sheets
  76. Select Select All Paste MockApp Bubbles
  77. Main Message Optional explanation of what a user needs to do Primary Button Confirmation Message Optional explanation of what the system is asking Secondary Primary Confirmation Message Please enter your password Optional explanation of what the system is john@doe.com asking Password Cancel OK Primary Use it wisely Require immediate user attention Alerts
  78. Web20 Expo SF Sent from iPhone It supports multiple lines It supports scrolling Text Views
  79. From: Twitter Hide To: Dotan Saguy Everybody is now following you on Twitter! April 1, 2035 1:33 PM Mark Unread Display rich HTML content Web / Email Views
  80. Q W E R T Y U I O P A S D F G H J K L #+= Z X C V B N M ABC space @ . return 1 2 ABC 3 DEF 4 GHI 5 JKL 6 MNO 7 PQRS 8 TUV 9 WXYZ 0 + Keyboards
  81. N G A A B This is a regular table B Pete Gardener C D C view D E F M E F Tess Grady G G H I Divided into sections H I M.J. Grey J (the letters are the sections) J K K L Each row is an item L M Jenn Guggenheim M N O of the list N O H P P Q and can contain several Q Sara Hashimoto R R S data elements (image, text, etc.) S T T U O U Em Hirsch V W Display lists of items List is divided into sections separated by grey headers Table Views
  82. Unread 29 First Last name mobile Item to delete or move Ready to be deleted Delete Not pressed yet Current status When pressed it highlights This is a regular table view With icons like in The “more” tab of the iPod app Podcasts Table Views
  83. This group has 3 items This item has been selected Items highlight briefly when hit This group has only 1 item You can insert headers too This one lets you drill down This one shows Current status Segmented controls Tab One Tab Two Tab Three Tab One Tab Two Tab Three Tab One Tab Two Tab Three Grouped Table Views
  84. Bess Ho home (111) 222-3333 mobile (111) 222-3333 work (111) 222-3333 whatever (111) 222-3333 Text Message Share Contact You can even insert instructions like these as well if they’re helpful in this context. Silent This item is turned OFF Ring This item is turned ON ON Grouped Table Views
  85. August 03 2007 7 45 September 04 2008 8 46 October 05 2009 9 47 AM November 06 2010 10 48 PM December 07 2011 11 49 Sat Oct 3 7 50 28 Sun Oct 4 8 55 29 Today 9 00 AM 0 hours 30 mins Tue Oct 6 10 05 PM 1 31 Wed Oct 7 11 10 2 32 Date & Time Pickers
  86. First & default value Second value Third value Value Picker
  87. Tap ~ Single Mouse Click Swipe Reveal the delete button in a table-view row Drag Scroll or Pan Gestures
  88. Tap ~ Single Mouse Click Swipe Reveal the delete button in a table-view row Drag Scroll or Pan Gestures
  89. Tap ~ Single Mouse Click Swipe swipe Reveal the delete button in a table-view row Drag Scroll or Pan Gestures
  90. Tap ~ Single Mouse Click Swipe Reveal the delete button in a table-view row Drag Scroll or Pan Gestures
  91. Tap ~ Single Mouse Click Swipe Reveal the delete button in a table-view row Drag drag Scroll or Pan Gestures
  92. Double Tap Zoom-in / Zoom-out Touch & Hold view in Display a magnified editable text Gestures
  93. Double Tap Zoom-in / Zoom-out 2x tap Touch & Hold view in Display a magnified editable text Gestures
  94. Double Tap Zoom-in / Zoom-out 2x tap Touch & Hold view in Display a magnified touch and editable text hold Gestures
  95. Pinch Close Zoom-in Pinch Open Zoom-out Gestures
  96. Pinch Close Zoom-in pinch close Pinch Open Zoom-out Gestures
  97. Pinch Close Zoom-in pinch close Pinch Open Zoom-out pinch open Gestures
  98. Audio
  99. 30-pin dock connector Require Certification SDK iPhone External Accessory Framework External Accessory (Data)
  100. iPhone Headset Microphone
  101. iPhone Headset Microphone
  102. Audible Frequency Ambient Voice Music Inaudible Frequency Heartbeat Breathing Sleeping Instrument Signal iPhone Microphone
  103. Recording / Playing Audio Processing iPhone Microphone
  104. Audio Toolbox Framework AV Foundation Framework OpenAL Framework Audio Unit Framework Audio Queue Services Remote IO Unit Media Player Framework iPhone Audio Frameworks
  105. Visual Sensor
  106. Digial Telephoto Camera
  107. Digital Microscope
  108. Camera (Photo / Video) Scanner Bar Code QR Code
  109. Camera (Photo / Video) Card Scanner Business Card
  110. Camera (Photo / Video) Text Scanner Optical Character Recognition (OCR)
  111. Camera (Photo / Video) Language Translator
  112. Camera (Photo / Video) “Live” Scanner Augmented Reality (AR)
  113. Camera (Photo / Video) Recording Playing
  114. Kodak Pearl Module Dental System Practice Management Systems 3D & Extraoral Imaging Intraoral Radiography Intraoral Digital Image Intraoral X-ray Image
  115. Video Conferencing Eye Tracking Iris Scanning Front-Facing Camera (Future)
  116. Geo
  117. Cocoa Touch Layer Map Kit Media Layer Core Services Layer Core Location Core OS Layer iPhone SDK Frameworks
  118. MapKit Core Location iPhone SDK Frameworks
  119. CLLocation Manager CLLocation CLHeading Core Location Framework: Class
  120. UIViewController Interface CLLocationManager #import <CoreLocation/CoreLocation.h> @interface GetLocationViewController : UIViewController <CLLocationManagerDelegate> { CLLocationManager *locationManager; CLLocation *bestEffortAtLocation; } @property (nonatomic, retain) CLLocationManager *locationManager; @property (nonatomic, retain) CLLocation *bestEffortAtLocation; Core Services Layer: Core Location
  121. ViewController Method CLLocationManager // Create the manager object self.locationManager = [[[CLLocationManager alloc] init] autorelease]; locationManager.delegate = self; locationManager.desiredAccuracy = [[setupInfo objectForKey:kSetupInfoKeyAccuracy] doubleValue]; [locationManager startUpdatingLocation]; Core Services Layer: Core Location
  122. CLLocation Class Constants CCLocationDegrees CCLocationCoordinate2D CCLocationAccuracy Accuracy Constants CCLocationSpeed CCLocationDirection Core Services Layer: Core Location
  123. Accuracy Constants CCLocation Class locationManager.desiredAccuracy is the most important property of Location Manager. It determines the amount of power it consumed. Constant values are to specify the accuracy of a location. kCLLocationAccuracyBest Best kCLLocationAccuracyNearestTenMete 10 Meters rs 100 Meters kCLLocationAccuracyHundredMeters 1000 Meters kCLLocationAccuracyKilometer 3000 Meters kCLLocationAccuracyThreeKilometers Core Services Layer: Core Location
  124. CLLocation Class Constants CCLocationDegrees Delivers a latitude or longitude value specified in degrees. Data type is double. CCLocationSpeed Delivers the speed at which the device is moving in meters per second. Data type is double. Core Services Layer: Core Location
  125. CLLocation Class Constants CCLocationDirection Delivers a direction that is measured in degrees and relative to true north. Data type is double. North is 0 degrees East is 90 degrees South is 180 degrees Any “-” value indicates an invalid direction Core Services Layer: Core Location
  126. CLLocation Class Properties altitude coordinate course horizontalAccuracy speed timestamp verticalAccuracy Core Services Layer: Core Location
  127. Measurement Units altitude (meters) coordinate course (degrees) horizontalAccuracy (meters) speed (meters per sec) timestamp (NSDate) verticalAccuracy (meters) Core Services Layer: Core Location
  128. CLLocation Manager CLLocation CLHeading Core Location Framework: Class
  129. CCLocationManager Core Location Create a CCLocationManager object to get heading by invoking [CCLocationManager startUpdatingHeading]. iPhone 3GS contains a magnetometer - a magnetic field detector. It displays the raw x, y, and z magnetometer values. Magnitude of the magnetic field is computed in strength. Core Services Layer: Core Location
  130. CLLocationManager Core Location if (locationManager.headingAvailable == NO) { self.locationManager = nil; // No compass is available } else { // heading service configuration locationManager.headingFilter = kCLHeadingFilterNone; // setup delegate callbacks locationManager.delegate = self; // start the compass [locationManager startUpdatingHeading]; } } Core Services Layer: Core Location
  131. CLLocation Manager CLLocation CLHeading Core Location Framework: Class
  132. CLHeading Core Location - (void)locationManager:(CLLocationManager *)manager didUpdateHeading:(CLHeading *)heading { // Update the labels with the raw x, y, and z values. [xLabel setText:[NSString stringWithFormat:@"%.1f", heading.x]]; [yLabel setText:[NSString stringWithFormat:@"%.1f", heading.y]]; [zLabel setText:[NSString stringWithFormat:@"%.1f", heading.z]]; } MapKit Framework: Class
  133. MapKit Core Location iPhone SDK Frameworks
  134. MKAnnotationView MKMapView MKPinAnnotationView MKPlacemark MKReverseGeocoder MKUserLocation MapKit Framework: Class
  135. MKReverseGeocoder MKReverseGeocoder offers services to convert a map coordinate (latitude & Longitude) to info such as country, city, or street. It works with a network- based map service to look up placemark information for a specified coordinate value. Cocoa Touch Layer: MapKit Framework
  136. MKReverseGeocoder Each app is limited to amount of reverse geocoding Send one reverse-geocoding request for any one user action Reuse the results from initial request Suggest not to send one reverse-geocode request per minute Cocoa Touch Layer: MapKit Framework
  137. MKAnnotationView MKMapView MKPinAnnotationView MKPlacemark MKReverseGeocoder MKUserLocation MapKit Framework: Class
  138. MKMapView Class Properties annotations scrollEnabled annotationsVisibleRect selectedAnnotations centerCoordinate showsUserLocation delegate userLocation mapType userLocationVisible region zoomEnabled Cocoa Touch Layer: MapKit Framework
  139. MKMapView Class MKMapType It delivers the type of map to display. MKMapTypeStandard MKMapTypeSatellite MKMapTypeHybrid Cocoa Touch Layer: MapKit Framework
  140. MKAnnotationView MKMapView MKPinAnnotationView MKPlacemark MKReverseGeocoder MKUserLocation MapKit Framework: Class
  141. MKAnnotationView Class Properties annotation image calloutOffset leftCalloutAccessoryView canShowCallout reuseIdentifier centerOffset rightCalloutAccessoryView enabled selected Cocoa Touch Layer: MapKit Framework
  142. MKAnnotationView MKMapView MKPinAnnotationView MKPlacemark MKReverseGeocoder MKUserLocation MapKit Framework: Class
  143. MKAnnotationView Class Properties Properties animatesDrop pinColor Constants MKPinAnnotationColor MKPinAnnotationColorRed (Destination Points) MKPinAnnotationColorGreen (Starting Points) MKPinAnnotationColorPurple (User-specified Points) Cocoa Touch Layer: MapKit Framework
  144. Google Location Maps Services External Library Android SDK
  145. Interfaces GpsStatus.Listener GpsStatus.NmeaListener LocationListener package: android.location
  146. Classes Address GpsStatus Criteria Location Geocoder LocationManager GpsSatellite LocationProvider package: android.location
  147. Location Class Methods getAccuracy() getAltitude() getLongitude() getBearing() getProvider() getExtras() getSpeed() getLatitude() getTime() package: android.location
  148. Classes Address GpsStatus Criteria Location Geocoder LocationManager GpsSatellite LocationProvider package: android.location
  149. LocationManager Class Methods getAllProviders() getLastKnownLocation getBestProvider() getProvider() getGpsStatus() getProviders() package: android.location
  150. Google Location Maps Services External Library Android SDK
  151. Google Maps External Library Use Google APIs add-on Download Maps external library Must register with Google Maps service Obtain a Maps API Key Android SDK
  152. AndroidManifest.xml Declare Maps Library Request internet permission Hide title bar <uses-library android:name=”com.google.android.maps” /> <uses-permission android:name=”android.permission.INTERNET” /> <activity android:name=”.HelloMaps” android:label=”@string/app_name” android:theme=”@android:style/Theme.NoTitleBar”> Android SDK
  153. res/layout/main.xml <?xml version=”1.0” encoding=”utf-8”?> <com.google.android.maps.MapView xmlns:android=”http://schmas.android.com/ apk/res/android” android:id=@+id/mapview” android:layout_width=”fill_parent” android:layout_height=”fill_parent” android:clickable=”true” android:apiKey=”Map API Key” /> Android SDK
  154. + HelloMaps.java public class HelloMaps extends MapActivity @Override protected boolean isRouteDisplayed() { return false; } @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } MapView mapView = (MapView) findViewById(R.id.mapview); mapView.setBuiltInZoomControls(true); Android SDK
  155. Data iPhone Screen Size
  156. y axis x axis z axis Accelerometer
  157. TEXT Email openURL: Method To From CC BCC HTML Email MessuageUI Framework Attachment Email
  158. Push Notification
  159. HTTP protocol GET / POST Data Store .plist files SQLite CoreData Network
  160. Controller Heliptor Automobile Bluetooth / WiFi
  161. Yes Yes Yes iPhone Cupcake 1.5 S40 OS 3.1 S60 Wireless Bluetooth
  162. 30-pin dock connector Point of Sale (POS) Credit Card Terminal External Accessory
  163. Medical Tricorder
  164. STANFORD UNIVERSITY School of Engineering (EE46) Engineering For Good Save The World Have Fun Doing It
  165. Save The World Malaria TB HIV
  166. Augmented Reality (AR) Camera (Photo / Video) Bar Code Optical Character Recognition QR Code (OCR) Scanner: 2D Objects
  167. Detect Diseases Scanner: Micro Life Forms
  168. Identify Patients Scanner: Body Parts
  169. Scan Diseases & Patients Scanner: Life Forms
  170. Challenges
  171. Scanner: Mosquitoes
  172. Q&A
  173. @bess Attendee Directory http://www.slideshare.net/bess.ho

×