Mobile for the rest of us
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Mobile for the rest of us

on

  • 1,372 views

 

Statistics

Views

Total Views
1,372
Views on SlideShare
1,372
Embed Views
0

Actions

Likes
0
Downloads
15
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Mobile for the rest of us Presentation Transcript

  • 1. Mobile for the rest of us Mobile 2.0 Conference Mountain View, CA Jeff Haynie @jhaynie
  • 2. About Me• @jhaynie @appcelerator• http://blog.jeffhaynie.us• jhaynie@appcelerator.com• #titanium_app on freenode
  • 3. Explosion of opportunities20% year over year growth anticipated fornext 5 years in smart phones
  • 4. Oh no.• iPhone (Objective-C, 28th!)• Android (Java, Google Style)• RIM (Java, Blackberry or Midlet style)• Symbian (old school C)• Palm Pre (Web 2.0)• Windows Mobile (.NET compact)• Maemo (GTK+)
  • 5. Oh, yeah...• Web Browsers• Desktop Apps• Net books• E-Book readers• Tablets• etc etc.
  • 6. We Web• HTML, CSS, JavaScript• Presentation / UI can easily be built with HTML/ CSS• JavaScript API for mobile features, platform, UI• Run locally, integrate cloud services
  • 7. It’s the UXBuild applications that fit theuse cases that are tailored forthe modality
  • 8. What we want• Skills• Tools• Reusability• Platforms• Portability• Speed / Cost• Open source / Standards
  • 9. AppceleratorEmpower developers to quickly create andcommercialize web, desktop and mobileapplications
  • 10. Titanium• Desktop: Win32, OSX, Linux• Mobile: iPhone and Android (Palm WebOS)• 100% code on github.com/appcelerator• Apache Public License• Active Open Source Community
  • 11. Appcelerator Products Create, test, and commercialize native mobile and desktop applications with the web technologies you use today.Develop Native iPhone Build Desktop apps Cloud services used for Web development toolsand Android apps with that can be deployed testing, packaging, that enable rapid RIAfull access to each with one code base on distribution, and development.device’s APIs. the PC, Mac, or Linux analytics. platforms.
  • 12. Product Architecture Mobile Desktop
  • 13. Programming ModelTitanium supports JavaScript, HTML, CSS forbuilding mobile applications
  • 14. UI• Clean separation of Design from Code• UI is constructed via HTML, CSS• JavaScript access to create native controls, native views, windows, etc.
  • 15. JavaScript• JavaScript is used to program Mobile Features, Access local Resources, Database, Remote Web Services, etc.• Use your favorite JS Toolkit - jQuery,YUI, Dojo, Mootools, etc etc.
  • 16. App AssemblyTitanium SDK compiles (using TitaniumDeveloper) the application using the MobileSDK into a native application
  • 17. Mobile APIs GeolocationAccelerometer Gesture Analytics Media App Network Database Platform Facebook UI Filesystem Yahoo
  • 18. Building the UI• <html> accepted here (including HTML5)• optimized native UI controls• hybrid UI composition• custom native UI controls
  • 19. Typical iPhone UI
  • 20. Typical Android UI
  • 21. <html>
  • 22. Native UI viewsGrouped View Table View
  • 23. Composite UI
  • 24. Composite Views
  • 25. Custom OpenGL UI
  • 26. Simple APIsTitanium.UI.setTabBadge(10) Titanium.UI.createMenu()
  • 27. Native UI Controls• Toolbars• Tab Bars• Status Bars• Dialogs• Controls
  • 28. Native UI (Android)
  • 29. Databasesvar db = Titanium.Database.open(mydb);db.execute(INSERT INTO DATABASETEST (ID, NAME ) VALUES(?,?),1,Name 1);db.execute(INSERT INTO DATABASETEST (ID, NAME ) VALUES(?,?),2,Name 2);db.execute(INSERT INTO DATABASETEST (ID, NAME ) VALUES(?,?),3,Name 3);db.execute(INSERT INTO DATABASETEST (ID, NAME ) VALUES(?,?),4,Name 4);
  • 30. CameraTitanium.Media.showCamera({    success:function(image,details)    {        $("status").innerHTML="Uploading...."+image.url; }});
  • 31. Videovar video = Titanium.Media.createVideoPlayer({ contentURL : "movie.mp4"});var listenerId = video.addEventListener("complete", function(){   video.removeEventListener(complete, listenerId);   var dlg = Titanium.UI.createAlertDialog({    title : Video Complete,    message : video completed,    buttonNames : [ OK ]   });   dlg.show();});video.play();
  • 32. Gesturesfunction onShake(){   document.getElementById("status").innerHTML = StopShaking me;  }var listenerId = Titanium.Gesture.addEventListener("shake",onShake);
  • 33. AccelerometerTitanium.Accelerometer.addEventListener(update,function(e){   document.getElementById(x).innerHTML = e.x;   document.getElementById(y).innerHTML = e.y;   document.getElementById(z).innerHTML = e.z});
  • 34. Titanium Info• http://www.appcelerator.com• http://github.com/appcelerator• @appcelerator• #titanium_app on irc.freenode.net• http://slideshare.net/jhaynie