Taking Advantage of Webtop
•
0 gefällt mir•559 views
Learn how HTML5 improves the mobile user experience.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Ähnlich wie Taking Advantage of Webtop
Ähnlich wie Taking Advantage of Webtop (20)
Mehr von Motorola Mobility - MOTODEV
Mehr von Motorola Mobility - MOTODEV (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Taking Advantage of Webtop
- 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. © 2011 Motorola Mobility, Inc. All rights reserved.
- 2. MOTODEV App Summit Page 2 KARAN DEEP GEDDAM Developer Advocate Motorola Developer Platforms & Services MOTODEV MOTOROLA MOBILITY http://developer.motorola.com @motodev © 2011 Motorola Mobility, Inc.
- 3. MOTODEV App Summit Page 3 Page 01 TABLE OF CONTENTS INTRODUCTION DEVICE INTRODUCTION MOTOROLA ATRIX TECHNOLOGY ON DEVICE webtop TECHNOLOGY BENEFITS Web Applications CORE TECHNOLOGY CONCEPTS HTML5 DEMO © 2011 Motorola Mobility, Inc.
- 4. INTRODUCTION 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. © 2011 Motorola Mobility, Inc. All rights reserved.
- 5. MOTODEV App Summit Page 5 Takeaways from this talk • A different way to develop applications accessible for multiple devices • Sneak peek of platform available for developing such applications • Tips to consider • Learn to develop a simple web app © 2011 Motorola Mobility, Inc.
- 6. MOTODEV App Summit Page 6 DEVICE INTRODUCTION Version 1.0 © 2011 Motorola Mobility, Inc.
- 7. MOTODEV App Summit 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 © 2011 Motorola Mobility, Inc.
- 8. MOTODEV App Summit Page 8 TECHNOLOGY INTRODUCTION © 2011 Motorola Mobility, Inc.
- 9. MOTODEV App Summit Page 9 webtop • Presents a full desktop browser environment with modern web technologies • Activated when docked and connected to HDMI screen • Presents input device functionality if none connected ie. Keyboard, Mouse functionality • Has full version of Firefox browser (Desktop version not mobile version) • Mobile View provides phone interaction © 2011 Motorola Mobility, Inc.
- 10. MOTODEV App Summit Page 10 webtop • Points to remember – ‘Device View' rotation is passed on to app – ‘Device View' resizing on screen is just scaling up, so there is no notification to the app – App interaction is not like device configuration • No Keyboard, No Navigation – on device, but with lapdock it is different © 2011 Motorola Mobility, Inc.
- 11. MOTODEV App Summit Page 11 TECHNOLOGY BENEFITS © 2011 Motorola Mobility, Inc.
- 12. MOTODEV App Summit Page 12 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 • Demo of Web Application © 2011 Motorola Mobility, Inc.
- 13. MOTODEV App Summit Page 13 CORE TECHNOLOGY CONCEPTS © 2011 Motorola Mobility, Inc.
- 14. MOTODEV App Summit Page 14 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 © 2011 Motorola Mobility, Inc.
- 15. MOTODEV App Summit Page 15 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 © 2011 Motorola Mobility, Inc.
- 16. MOTODEV App Summit Page 16 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 © 2011 Motorola Mobility, Inc.
- 17. MOTODEV App Summit Page 17 API LIST • Geolocation • Web Workers • File API • Canvas • Web Storage • Web Messaging • Drag and Drop API © 2011 Motorola Mobility, Inc.
- 18. MOTODEV App Summit Page 18 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 © 2011 Motorola Mobility, Inc.
- 19. MOTODEV App Summit Page 19 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 © 2011 Motorola Mobility, Inc.
- 20. MOTODEV App Summit Page 20 DEMO • Web Application Development a+b/a=a/b © 2011 Motorola Mobility, Inc.
- 21. MOTODEV App Summit Page 21 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/ © 2011 Motorola Mobility, Inc.
- 22. MOTODEV App Summit Page 22 Get Started Now • Test Your 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 © 2011 Motorola Mobility, Inc.
- 23. MOTODEV App Summit Page 23 © 2011 Motorola Mobility, Inc.
Hinweis der Redaktion
- This page is based on the Title Slide master page. All fonts are Arial. Note font sizes and specs for line spacing, text box design and locations here and on actual pages. BUSINESS UNIT text box: all margins are 0, text anchor is bottom, height is .97” (width is flexible), text is flush left, position is horizontal .42” and vertical .46” from top left corner. Box should be aligned with nearest left guide. THIS TEXT BOX IS DEFINED ON MASTER SLIDE (location and design will reset to correct design when you reapply “title slide” format) Subhead text box: all margins are 0, text anchor is top, height is .3” (width is flexible), text is flush left, position is horizontal .42” and vertical 1.42” from top left corner. Box should be aligned with nearest left guide PRESENTATION text box: all margins are 0, text anchor is top, height is 1.58” (width is flexible), text is flush left, position is horizontal .42” and vertical 4.6” from top left corner. Box should be aligned with nearest left guide THIS TEXT BOX IS DEFINED ON TITLE MASTER SLIDE (location and design will reset to correct design when you reapply “title slide” format) Second Subhead text box: all margins are 0, text anchor is bottom, height is .6” (width is flexible), text is flush left, position is horizontal .42” and vertical 5.44” Copyright info text box: all margins are 0, text anchor is top, height is .22” (width is flexible), text is flush left, position is horizontal .46” and vertical 6.91” from top left corner. Version/date text box: THIS TEXT BOX IS LOCATED ON TITLE MASTER SLIDE, cannot be edited here. To edit items on the master of this slide, go to View/Master/Title Master. Do not move text boxes while editing content on Title Master. How to use this template file: Duplicate this file and change the title to reflect your project. Copy pages as needed within the file. Do not attempt to copy pages from this document into an unformatted file…you will lose the guidelines that are on these pages. If you don’t see little dotted lines criss crossing the page, make sure you go to “View” and select “Guides” Also turn off “Snap to Grid.” This document has the color scheme defined with the approved color chord. You will also lose that if you copy pages from here into another file. To make sure text doesn’t change size automatically, go to Preferences, go to the Edit tab, and make sure “autofit text to text placeholder” is NOT selected.
- TABLE OF CONTENTS text box: all margins are 0, text anchor is bottom, height is .97” (width is flexible), text is flush left, position is horizontal .42” and vertical .52” from top left corner. Box should be aligned with nearest left guide. THIS TEXT BOX IS DEFINED ON MASTER SLIDE (location and design will reset to correct design when you reapply “title slide” format) PAGE info text box: all margins are 0, text anchor is top, text is flush left, position is horizontal .42” and vertical 1.89” from top left corner. Box should be aligned with nearest left guide. EMSIGNIA is located on this page (there is no Master for this slide). Size is .31”x.31” and location is horizontal .39” and vertical 6.82” You will have to enter these page numbers by hand. Sorry…unlike Word, there’s no automatic table of contents here in Powerpoint. Font size is 18pt, line spacing is 20pt with 3pt before paragraph.
- SECTION TITLE text box: all margins are 0, text anchor is top, height is 1.58” (width is flexible), text is flush left, position is horizontal .42” and vertical 4.6” from top left corner. Box should be aligned with nearest left guide THIS TEXT BOX IS DEFINED ON MASTER SLIDE (location and design will reset to correct design when you reapply “title slide” format) Second Subhead text box: all margins are 0, text anchor is bottom, height is .6” (width is flexible), text is flush left, position is horizontal .42” and vertical 5.44” Copyright info text box: all margins are 0, text anchor is top, height is .22” (width is flexible), text is flush left, position is horizontal .46” and vertical 6.91” from top left corner. Color is white. Version/date text box: 8pt EMSIGNIA is located on this page (there is no Master for this slide). Size is .31”x.31” and location is horizontal .39” and vertical 6.82” We think that colors are emotional cues, so picking ones that evoke the emotions and qualities that are our brand traits is hugely important. This Powerpoint template provides a color chord for you. Choose one to lead and one to compliment. This page looks like that Title Slide, but it’s different. Make copies of this slide for additional Section Titles.
- SECTION TITLE text box: all margins are 0, text anchor is top, height is 1.58” (width is flexible), text is flush left, position is horizontal .42” and vertical 4.6” from top left corner. Box should be aligned with nearest left guide THIS TEXT BOX IS DEFINED ON MASTER SLIDE (location and design will reset to correct design when you reapply “title slide” format) Second Subhead text box: all margins are 0, text anchor is bottom, height is .6” (width is flexible), text is flush left, position is horizontal .42” and vertical 5.44” Copyright info text box: all margins are 0, text anchor is top, height is .22” (width is flexible), text is flush left, position is horizontal .46” and vertical 6.91” from top left corner. Color is white. Version/date text box: 8pt EMSIGNIA is located on this page (there is no Master for this slide). Size is .31”x.31” and location is horizontal .39” and vertical 6.82” We think that colors are emotional cues, so picking ones that evoke the emotions and qualities that are our brand traits is hugely important. This Powerpoint template provides a color chord for you. Choose one to lead and one to compliment. This page looks like that Title Slide, but it’s different. Make copies of this slide for additional Section Titles.
- SECTION TITLE text box: all margins are 0, text anchor is top, height is 1.58” (width is flexible), text is flush left, position is horizontal .42” and vertical 4.6” from top left corner. Box should be aligned with nearest left guide THIS TEXT BOX IS DEFINED ON MASTER SLIDE (location and design will reset to correct design when you reapply “title slide” format) Second Subhead text box: all margins are 0, text anchor is bottom, height is .6” (width is flexible), text is flush left, position is horizontal .42” and vertical 5.44” Copyright info text box: all margins are 0, text anchor is top, height is .22” (width is flexible), text is flush left, position is horizontal .46” and vertical 6.91” from top left corner. Color is white. Version/date text box: 8pt EMSIGNIA is located on this page (there is no Master for this slide). Size is .31”x.31” and location is horizontal .39” and vertical 6.82” We think that colors are emotional cues, so picking ones that evoke the emotions and qualities that are our brand traits is hugely important. This Powerpoint template provides a color chord for you. Choose one to lead and one to compliment. This page looks like that Title Slide, but it’s different. Make copies of this slide for additional Section Titles.
- Phone does not have physical keyboard, tracking – However, In Webtop mode, it could have a keyboard and Mouse connected. These are not known to the android application.
- SECTION TITLE text box: all margins are 0, text anchor is top, height is 1.58” (width is flexible), text is flush left, position is horizontal .42” and vertical 4.6” from top left corner. Box should be aligned with nearest left guide THIS TEXT BOX IS DEFINED ON MASTER SLIDE (location and design will reset to correct design when you reapply “title slide” format) Second Subhead text box: all margins are 0, text anchor is bottom, height is .6” (width is flexible), text is flush left, position is horizontal .42” and vertical 5.44” Copyright info text box: all margins are 0, text anchor is top, height is .22” (width is flexible), text is flush left, position is horizontal .46” and vertical 6.91” from top left corner. Color is white. Version/date text box: 8pt EMSIGNIA is located on this page (there is no Master for this slide). Size is .31”x.31” and location is horizontal .39” and vertical 6.82” We think that colors are emotional cues, so picking ones that evoke the emotions and qualities that are our brand traits is hugely important. This Powerpoint template provides a color chord for you. Choose one to lead and one to compliment. This page looks like that Title Slide, but it’s different. Make copies of this slide for additional Section Titles.
- SECTION TITLE text box: all margins are 0, text anchor is top, height is 1.58” (width is flexible), text is flush left, position is horizontal .42” and vertical 4.6” from top left corner. Box should be aligned with nearest left guide THIS TEXT BOX IS DEFINED ON MASTER SLIDE (location and design will reset to correct design when you reapply “title slide” format) Second Subhead text box: all margins are 0, text anchor is bottom, height is .6” (width is flexible), text is flush left, position is horizontal .42” and vertical 5.44” Copyright info text box: all margins are 0, text anchor is top, height is .22” (width is flexible), text is flush left, position is horizontal .46” and vertical 6.91” from top left corner. Color is white. Version/date text box: 8pt EMSIGNIA is located on this page (there is no Master for this slide). Size is .31”x.31” and location is horizontal .39” and vertical 6.82” We think that colors are emotional cues, so picking ones that evoke the emotions and qualities that are our brand traits is hugely important. This Powerpoint template provides a color chord for you. Choose one to lead and one to compliment. This page looks like that Title Slide, but it’s different. Make copies of this slide for additional Section Titles.