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

  • 1,866 views
Uploaded on

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

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,866
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
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. 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. 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. Page 01TABLE OF CONTENTSINTRODUCTIONDEVICE INTRODUCTION MOTOROLA ATRIXTECHNOLOGY ON DEVICE webtopTECHNOLOGY BENEFITS Web ApplicationsCORE TECHNOLOGY CONCEPTS HTML5DEMO
  • 4. INTRODUCTION
  • 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. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 6DEVICE INTRODUCTION Twitter: @motodev Version 1.0
  • 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. 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. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 9TECHNOLOGYINTRODUCTION Twitter: @motodev
  • 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. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 11webtop• Activated when docked and connected to HDMI screen Twitter: @motodev
  • 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. 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. 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. 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. 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. 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. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 18TECHNOLOGY BENEFITS Twitter: @motodev
  • 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. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 20CORE TECHNOLOGYCONCEPTS Twitter: @motodev
  • 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. 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. 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. 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. 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. 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. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 27DEMO• Web Application Development Twitter: @motodev
  • 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. 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. 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