MOTOROLA MOBILITYMOTODEVTaking Advantage of webtopHow HTML5 Improves theMobile User ExperienceMOTOROLA and the Stylized M ...
TAKING ADVANTAGE OF WEBTOP   HOW HTML5 HELPS MOBILE USER EXPERIENCE                 Page 2                      KARAN DEEP...
Page 01TABLE OF CONTENTSINTRODUCTIONDEVICE INTRODUCTION   MOTOROLA ATRIXTECHNOLOGY ON DEVICE   webtopTECHNOLOGY BENEFITS  ...
INTRODUCTION
TAKING ADVANTAGE OF WEBTOP   HOW HTML5 HELPS MOBILE USER EXPERIENCE                 Page 5INTRODUCTION• MOTODEV   – Develo...
TAKING ADVANTAGE OF WEBTOP   HOW HTML5 HELPS MOBILE USER EXPERIENCE                         Page 6DEVICE INTRODUCTION     ...
TAKING ADVANTAGE OF WEBTOP   HOW HTML5 HELPS MOBILE USER EXPERIENCE                 Page 7SMARTPHONE• MOTOROLA ATRIX   –  ...
TAKING ADVANTAGE OF WEBTOP   HOW HTML5 HELPS MOBILE USER EXPERIENCE                 Page 8MOTOROLA ATRIX Experience Video ...
TAKING ADVANTAGE OF WEBTOP   HOW HTML5 HELPS MOBILE USER EXPERIENCE                 Page 9TECHNOLOGYINTRODUCTION          ...
TAKING ADVANTAGE OF WEBTOP   HOW HTML5 HELPS MOBILE USER EXPERIENCE                 Page 10webtop• Presents a full desktop...
TAKING ADVANTAGE OF WEBTOP   HOW HTML5 HELPS MOBILE USER EXPERIENCE                 Page 11webtop• Activated when docked a...
TAKING ADVANTAGE OF WEBTOP   HOW HTML5 HELPS MOBILE USER EXPERIENCE                 Page 12webtop• Presents input device f...
TAKING ADVANTAGE OF WEBTOP   HOW HTML5 HELPS MOBILE USER EXPERIENCE                 Page 13webtop• Has full version of Fir...
TAKING ADVANTAGE OF WEBTOP   HOW HTML5 HELPS MOBILE USER EXPERIENCE                           Page 14                     ...
TAKING ADVANTAGE OF WEBTOP   HOW HTML5 HELPS MOBILE USER EXPERIENCE                 Page 15webtop - Points to remember for...
TAKING ADVANTAGE OF WEBTOP   HOW HTML5 HELPS MOBILE USER EXPERIENCE                 Page 16webtop - Points to remember for...
TAKING ADVANTAGE OF WEBTOP   HOW HTML5 HELPS MOBILE USER EXPERIENCE                 Page 17webtop - Points to remember for...
TAKING ADVANTAGE OF WEBTOP   HOW HTML5 HELPS MOBILE USER EXPERIENCE                 Page 18TECHNOLOGY BENEFITS            ...
TAKING ADVANTAGE OF WEBTOP   HOW HTML5 HELPS MOBILE USER EXPERIENCE                 Page 19Web Applications• Software appl...
TAKING ADVANTAGE OF WEBTOP   HOW HTML5 HELPS MOBILE USER EXPERIENCE                 Page 20CORE TECHNOLOGYCONCEPTS        ...
TAKING ADVANTAGE OF WEBTOP   HOW HTML5 HELPS MOBILE USER EXPERIENCE                 Page 21HTML5• HTML5 is the latest revi...
TAKING ADVANTAGE OF WEBTOP   HOW HTML5 HELPS MOBILE USER EXPERIENCE                 Page 22HTML5• Introduces a number of n...
TAKING ADVANTAGE OF WEBTOP   HOW HTML5 HELPS MOBILE USER EXPERIENCE                 Page 23HTML5• Make the browser a progr...
TAKING ADVANTAGE OF WEBTOP   HOW HTML5 HELPS MOBILE USER EXPERIENCE                 Page 24API LIST• Geolocation• Web Work...
TAKING ADVANTAGE OF WEBTOP   HOW HTML5 HELPS MOBILE USER EXPERIENCE                 Page 25Design & Development Considerat...
TAKING ADVANTAGE OF WEBTOP   HOW HTML5 HELPS MOBILE USER EXPERIENCE                 Page 26Design & Development Considerat...
TAKING ADVANTAGE OF WEBTOP   HOW HTML5 HELPS MOBILE USER EXPERIENCE                 Page 27DEMO• Web Application Developme...
TAKING ADVANTAGE OF WEBTOP   HOW HTML5 HELPS MOBILE USER EXPERIENCE                 Page 28References• w3c.org• W3schools....
TAKING ADVANTAGE OF WEBTOP   HOW HTML5 HELPS MOBILE USER EXPERIENCE                 Page 29                               ...
TAKING ADVANTAGE OF WEBTOP   HOW HTML5 HELPS MOBILE USER EXPERIENCE                 Page 30Get Started Now• Test Your Andr...
developing Android and HTML5 apps for the Motorola ATRIX - Taking advantage of webtop
Upcoming SlideShare
Loading in...5
×

developing Android and HTML5 apps for the Motorola ATRIX - Taking advantage of webtop

1,966

Published on

This exclusive Orange Partner webinar with Motorola looked at the recently launched Motorola ATRIX.

Providing the insight and the answers was Karan Geddam of MOTODEV where he works as the Android Developer Advocate. The event was hosted by Martin Wrigley, who heads up the developer services side for Orange.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

developing Android and HTML5 apps for the Motorola ATRIX - Taking advantage of webtop

  1. 1. MOTOROLA MOBILITYMOTODEVTaking Advantage of webtopHow HTML5 Improves theMobile User ExperienceMOTOROLA and the Stylized M Logo are trademarks or registered trademarks of Motorola Trademark Holdings, LLC.All other trademarks are the property of their respective owners. © 2010 Motorola Mobility, Inc. All rights reserved.
  2. 2. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 2 KARAN DEEP GEDDAM Developer Advocate Motorola Developer Platforms & Services MOTODEV MOTOROLA MOBILITY http://developer.motorola.com @motodev Twitter: @motodev
  3. 3. Page 01TABLE OF CONTENTSINTRODUCTIONDEVICE INTRODUCTION MOTOROLA ATRIXTECHNOLOGY ON DEVICE webtopTECHNOLOGY BENEFITS Web ApplicationsCORE TECHNOLOGY CONCEPTS HTML5DEMO
  4. 4. INTRODUCTION
  5. 5. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 5INTRODUCTION• MOTODEV – Developer outreach division of Motorola Mobility, Inc. – http://developer.motorola.com• Aid developers during app design, development, test, distribution Product details, documentation, articles – Technical support and advice through discussion boards – Blogs, podcasts – Tools to quickly develop applications – Get early access to information on Motorola devices Twitter: @motodev
  6. 6. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 6DEVICE INTRODUCTION Twitter: @motodev Version 1.0
  7. 7. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 7SMARTPHONE• MOTOROLA ATRIX – Won the Best Smartphone of the Show at CES 2011 – Worlds 1st qHD device – 4” Touch Tablet – Dual Core 1 GHz Processor – 1GB RAM – Android v2.2.1 – Adobe Flash – OpenGL ES 2.0 Twitter: @motodev
  8. 8. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 8MOTOROLA ATRIX Experience Video http://www.youtube.com/watch?v=mWEvWYbxLEo&feature=player_profilepage Twitter: @motodev
  9. 9. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 9TECHNOLOGYINTRODUCTION Twitter: @motodev
  10. 10. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 10webtop• Presents a full desktop browser environment with modern web technologies Twitter: @motodev
  11. 11. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 11webtop• Activated when docked and connected to HDMI screen Twitter: @motodev
  12. 12. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 12webtop• Presents input device functionality if none connected ie. Keyboard, Mouse functionality Twitter: @motodev
  13. 13. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 13webtop• Has full version of Firefox browser (Desktop version not mobile version) Twitter: @motodev
  14. 14. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 14 Pagewebtop• Mobile View provides phone interaction Webtop Application Mobile View Twitter: @motodev Android HTML, js Version 1.0 Web apps
  15. 15. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 15webtop - Points to remember for Android ApplicationDevelopers• ‘Device View rotation is passed on to app Twitter: @motodev
  16. 16. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 16webtop - Points to remember for Android ApplicationDevelopers• ‘Device View resizing on screen is just scaling up, so there is no notification to the app Twitter: @motodev
  17. 17. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 17webtop - Points to remember for Android ApplicationDevelopers• App interaction is not like device configuration – No Keyboard, No Navigation – on device, but with Lapdock its different Twitter: @motodev
  18. 18. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 18TECHNOLOGY BENEFITS Twitter: @motodev
  19. 19. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 19Web Applications• Software application that is hosted in a browser-controlled environment.• Developer need not worry about client side platform details/device.• Allows for innovation around new Services and Business Models – E.g. Cloud Services, Collaboration tools, Advertisement etc Twitter: @motodev
  20. 20. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 20CORE TECHNOLOGYCONCEPTS Twitter: @motodev
  21. 21. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 21HTML5• HTML5 is the latest revision of the HTML standard by W3C• Aims at supporting Web Applications• Reduce the need for external plugins• Better error handling• Markup to replace scripting• Device independent Twitter: @motodev
  22. 22. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 22HTML5• Introduces a number of new elements and attributes – Layout Related: section, article, aside, hgroup, header, footer, nav, figure – Multimedia/Graphics Related: video, audio, canvas – Others: progress, meter, time, wbr, embed, mark etc. – Attributes: spellcheck, draggable, dropzone etc Twitter: @motodev
  23. 23. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 23HTML5• Make the browser a programming platform for great applications.• Introduces a number of APIs that help in creating Web applications – Play Audio/Video – Enable Offline Applications – Drag and Drop etc Twitter: @motodev
  24. 24. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 24API LIST• Geolocation• Web Workers• File API• Canvas• Web Storage• Web Messaging• Drag and Drop API Twitter: @motodev
  25. 25. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 25Design & Development Considerations• Multiple screen sizes – Support Desktop, Tablets, Mobile Devices• Limit scrolling to one direction• Optimize navigation• Reduce dependence on plugin availability• Use tabs, drop down menus• Pre-populate form values to defaults Twitter: @motodev
  26. 26. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 26Design & Development Considerations• Avoid radio buttons• Use caching appropriately• Prioritize links appearance• Cache DOM nodes if using DOM structure• Avoid DOM manipulations in loops• Avoid synchronous operations while animating• Initialize variables only when needed• Simplify, Simplify & Simplify Twitter: @motodev
  27. 27. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 27DEMO• Web Application Development Twitter: @motodev
  28. 28. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 28References• w3c.org• W3schools.com• Wikipedia - http://en.wikipedia.org/wiki/Html5• LessFramework – http://lessframework.com• Android Documentation – http://developer.android.com• HTML5 Rocks - http://www.html5rocks.com• Noupe - http://www.noupe.com/ Twitter: @motodev
  29. 29. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 29 PageATRIX Resources • SDK add-on o http://developer.motorola.com/docstools/tools/ • Webtop Application Overview article o http://developer.motorola.com/docstools/library/ • Device Specifications o http://developer.motorola.com/products/atrix-mb860/ Twitter: @motodev
  30. 30. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 30Get Started Now• Test Your Android Apps on the MOTODEV App Validator at http://moto.ly/appvalidator• Join the MOTODEV Community: Ask questions, read our blogs, and network at http://moto.ly/joinmotodev• Tell us about your apps - https://myapps.developer.motorola.com/tellus Twitter: @motodev

×