Your SlideShare is downloading. ×
0
Mobile for the rest of us         Mobile 2.0 Conference          Mountain View, CA         Jeff Haynie          @jhaynie
About Me• @jhaynie @appcelerator• http://blog.jeffhaynie.us• jhaynie@appcelerator.com• #titanium_app on freenode
Explosion of       opportunities20% year over year growth anticipated fornext 5 years in smart phones
Oh no.• iPhone (Objective-C, 28th!)• Android (Java, Google Style)• RIM (Java, Blackberry or Midlet style)• Symbian (old sc...
Oh, yeah...• Web Browsers• Desktop Apps• Net books• E-Book readers• Tablets• etc etc.
We                Web• HTML, CSS, JavaScript• Presentation / UI can easily be built with  HTML/ CSS• JavaScript API for mo...
It’s the UXBuild applications that fit theuse cases that are tailored forthe modality
What we want• Skills• Tools• Reusability• Platforms• Portability• Speed / Cost• Open source / Standards
AppceleratorEmpower developers to quickly create andcommercialize web, desktop and mobileapplications
Titanium• Desktop: Win32, OSX, Linux• Mobile: iPhone and Android (Palm WebOS)• 100% code on github.com/appcelerator• Apach...
Appcelerator Products        Create, test, and commercialize native mobile and desktop        applications with the web te...
Product Architecture  Mobile      Desktop
Programming ModelTitanium supports JavaScript, HTML, CSS forbuilding mobile applications
UI• Clean separation of Design from Code• UI is constructed via HTML, CSS• JavaScript access to create native controls,  n...
JavaScript• JavaScript is used to program Mobile  Features, Access local Resources,  Database, Remote Web Services, etc.• ...
App AssemblyTitanium SDK compiles (using TitaniumDeveloper) the application using the MobileSDK into a native application
Mobile APIs                GeolocationAccelerometer                 Gesture   Analytics                  Media      App   ...
Building the UI• <html> accepted here (including HTML5)• optimized native UI controls• hybrid UI composition• custom nativ...
Typical iPhone UI
Typical Android UI
<html>
Native UI viewsGrouped View   Table View
Composite UI
Composite Views
Custom OpenGL UI
Simple APIsTitanium.UI.setTabBadge(10) Titanium.UI.createMenu()
Native UI Controls• Toolbars• Tab Bars• Status Bars• Dialogs• Controls
Native UI (Android)
Databasesvar db = Titanium.Database.open(mydb);db.execute(INSERT INTO DATABASETEST (ID,   NAME ) VALUES(?,?),1,Name 1);db....
CameraTitanium.Media.showCamera({    success:function(image,details)    {        $("status").innerHTML="Uploading...."+ima...
Videovar video = Titanium.Media.createVideoPlayer({ contentURL : "movie.mp4"});var listenerId = video.addEventListener("co...
Gesturesfunction onShake(){   document.getElementById("status").innerHTML = StopShaking me;  }var listenerId = Titanium.Ge...
AccelerometerTitanium.Accelerometer.addEventListener(update,function(e){   document.getElementById(x).innerHTML = e.x;   d...
Titanium Info• http://www.appcelerator.com• http://github.com/appcelerator• @appcelerator• #titanium_app on irc.freenode.n...
Mobile for the rest of us
Mobile for the rest of us
Mobile for the rest of us
Mobile for the rest of us
Upcoming SlideShare
Loading in...5
×

Mobile for the rest of us

1,079

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
1,079
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \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
  • Transcript of "Mobile for the rest of us"

    1. 1. Mobile for the rest of us Mobile 2.0 Conference Mountain View, CA Jeff Haynie @jhaynie
    2. 2. About Me• @jhaynie @appcelerator• http://blog.jeffhaynie.us• jhaynie@appcelerator.com• #titanium_app on freenode
    3. 3. Explosion of opportunities20% year over year growth anticipated fornext 5 years in smart phones
    4. 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. 5. Oh, yeah...• Web Browsers• Desktop Apps• Net books• E-Book readers• Tablets• etc etc.
    6. 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. 7. It’s the UXBuild applications that fit theuse cases that are tailored forthe modality
    8. 8. What we want• Skills• Tools• Reusability• Platforms• Portability• Speed / Cost• Open source / Standards
    9. 9. AppceleratorEmpower developers to quickly create andcommercialize web, desktop and mobileapplications
    10. 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. 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. 12. Product Architecture Mobile Desktop
    13. 13. Programming ModelTitanium supports JavaScript, HTML, CSS forbuilding mobile applications
    14. 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. 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. 16. App AssemblyTitanium SDK compiles (using TitaniumDeveloper) the application using the MobileSDK into a native application
    17. 17. Mobile APIs GeolocationAccelerometer Gesture Analytics Media App Network Database Platform Facebook UI Filesystem Yahoo
    18. 18. Building the UI• <html> accepted here (including HTML5)• optimized native UI controls• hybrid UI composition• custom native UI controls
    19. 19. Typical iPhone UI
    20. 20. Typical Android UI
    21. 21. <html>
    22. 22. Native UI viewsGrouped View Table View
    23. 23. Composite UI
    24. 24. Composite Views
    25. 25. Custom OpenGL UI
    26. 26. Simple APIsTitanium.UI.setTabBadge(10) Titanium.UI.createMenu()
    27. 27. Native UI Controls• Toolbars• Tab Bars• Status Bars• Dialogs• Controls
    28. 28. Native UI (Android)
    29. 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. 30. CameraTitanium.Media.showCamera({    success:function(image,details)    {        $("status").innerHTML="Uploading...."+image.url; }});
    31. 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. 32. Gesturesfunction onShake(){   document.getElementById("status").innerHTML = StopShaking me;  }var listenerId = Titanium.Gesture.addEventListener("shake",onShake);
    33. 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. 34. Titanium Info• http://www.appcelerator.com• http://github.com/appcelerator• @appcelerator• #titanium_app on irc.freenode.net• http://slideshare.net/jhaynie
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×