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.

1. MOTOROLA MOBILITY
MOTODEV
Taking Advantage of webtop
How HTML5 Improves the
Mobile User Experience
MOTOROLA 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 01
TABLE OF CONTENTS
INTRODUCTION
DEVICE INTRODUCTION
MOTOROLA ATRIX
TECHNOLOGY ON DEVICE
webtop
TECHNOLOGY BENEFITS
Web Applications
CORE TECHNOLOGY CONCEPTS
HTML5
DEMO

4. INTRODUCTION

5. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 5
INTRODUCTION
• 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 6
DEVICE INTRODUCTION
Twitter: @motodev
Version 1.0

7. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 7
SMARTPHONE
• 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 8
MOTOROLA 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 9
TECHNOLOGY
INTRODUCTION
Twitter: @motodev

10. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 10
webtop
• Presents a full desktop browser environment with modern web
technologies
Twitter: @motodev

11. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 11
webtop
• Activated when docked and connected to HDMI screen
Twitter: @motodev

12. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 12
webtop
• 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 13
webtop
• 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
Page
webtop
• 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 15
webtop - Points to remember for Android Application
Developers
• ‘Device View' rotation is passed on to app
Twitter: @motodev

16. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 16
webtop - Points to remember for Android Application
Developers
• ‘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 17
webtop - Points to remember for Android Application
Developers
• 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 18
TECHNOLOGY BENEFITS
Twitter: @motodev

19. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 19
Web 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 20
CORE TECHNOLOGY
CONCEPTS
Twitter: @motodev

21. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 21
HTML5
• 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 22
HTML5
• 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 23
HTML5
• 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 24
API 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 25
Design & 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 26
Design & 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 27
DEMO
• Web Application Development
Twitter: @motodev

28. TAKING ADVANTAGE OF WEBTOP HOW HTML5 HELPS MOBILE USER EXPERIENCE Page 28
References
• 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
Page
ATRIX 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 30
Get 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