• Save
Taking Advantage of Webtop
Upcoming SlideShare
Loading in...5
×
 

Taking Advantage of Webtop

on

  • 1,646 views

Learn how HTML5 improves the mobile user experience.

Learn how HTML5 improves the mobile user experience.

Statistics

Views

Total Views
1,646
Views on SlideShare
1,507
Embed Views
139

Actions

Likes
0
Downloads
0
Comments
0

4 Embeds 139

http://community.developer.motorola.com 134
http://mtrl.lithium.com 3
http://feeds2.feedburner.com 1
http://webcache.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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.

Taking Advantage of Webtop Taking Advantage of Webtop Presentation Transcript

  • MOTOROLA MOBILITY MOTODEV 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. Taking Advantage of webtop
    • KARAN DEEP GEDDAM
    • Developer Advocate
    • Motorola Developer Platforms & Services
    • MOTODEV
    • MOTOROLA MOBILITY
    • http:// developer.motorola.com
    • @motodev
  • TABLE OF CONTENTS
    • INTRODUCTION
    • DEVICE INTRODUCTION
    • MOTOROLA ATRIX
    • TECHNOLOGY ON DEVICE webtop
    • TECHNOLOGY BENEFITS
    • Web Applications
    • CORE TECHNOLOGY CONCEPTS
    • HTML5
    • DEMO
    Page 01
  • INTRODUCTION
  • MOTODEV
    • Developer Outreach Division of Motorola Mobility, Inc.
    • http://developer.motorola.com
    • Aid Developers during app design, development, test and distribution phases
      • 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
  • DEVICE INTRODUCTION Version 1.0
  • SMARTPHONE
    • MOTOROLA ATRIX
      • Won the Best Smartphone of the Show at CES 2011
      • Worlds 1 st qHD device
      • 4” Touch Tablet
      • Dual Core 1 GHz Processor
      • 1GB RAM
      • Android v2.2.1
      • Adobe Flash
      • OpenGL ES 2.0
  • TECHNOLOGY INTRODUCTION
  • webtop
  • 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
  • webtop
    • Points to remember for Android Application Developers
      • ‘ 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 its different
  • TECHNOLOGY BENEFITS
  • 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
  • CORE TECHNOLOGY CONCEPTS
  • 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
  • HTML5
    • Introduces a number of new elements and attributes
      • Eg: Section, Article, Aside, Hgroup, Header, Footer, Nav, Figure, Video, Audio, Canvas, Datalist, Embed, Mark etc.
  • 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
  • API LIST
    • Geolocation
    • Web Workers
    • File API
    • Canvas
    • Web Storage
    • Web Messaging
    • Drag and Drop API
  • 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
  • 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
  • DEMO
    • Web Application Development
    • QUESTIONS?
    • Join the conversation at
    • http://community.developer.motorola.com
  • References
    • w3c.org
    • 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/
  • 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
    • Join us at the MOTODEV App Summit Berlin on April 11, 2011 (http://developer.motorola.com/eventstraining/summit/).
  •