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.
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