HTML5 XP session 16 tủ tài liệu bách khoa

Session: 16 Building a Mobile Web Application the  features  of  different  mobile  devices   Ÿ  Describe   Ÿ  List  the  different  types  of  plaDorms  available  for  mobile  devices   the  design  and  architectural  aspects  of  a  mobile  Web  site   Ÿ  Explain   Ÿ  Explain  the  requirements  for  developing  and  tes4ng  of  a  mobile  Web  site   HTML5  support  for  a  mobile  Web  site   Ÿ  Explain   Ÿ  List  the  best  prac4ces  for  op4mizing  a  mobile  Web  site   ©  Aptech  Ltd     Building  a  Mobile  Web  Applica4on  /  Session  16       access  to  the  Web  is  not  limited  to  only  desktop  systems,  but  is  also   Ÿ  Today,   available  on  portable  and  wireless  devices,  such  as  mobiles  devices   A mobile device, also known as a handheld device, is a small portable computing device with a small display screen and keyboard A mobile device has an operating system on which various types of application software are executed These application software are also known as apps The most commonly used apps are mobile browsers that display the Web pages ©  Aptech  Ltd     Building  a  Mobile  Web  Applica4on  /  Session  16       Ÿ  The  different  categories  of  mobile  phones  available  in  the  market  are  as  follows:   Ø  Basic Mobile Devices     basic  models  with  only  call  and  Short  Message  Service  (SMS)  facility     Ÿ  Very   Ÿ  Do  not  provide  support  for  Web  browsers  or  network  access   Ø  Low-end Mobile Devices     more  features  than  a  basic  mobile  device,  typically  Web  support   Ÿ  Provide   by  users  who  do  not  need  heavy  Internet  usage   Ÿ  Preferred   a  basic  camera  and  a  basic  music  player   Ÿ  Include   such  as  Nokia,  Motorola,  Sony  Ericsson,  Samsung,  and  so  forth   Ÿ  Manufacturers,   have  gained  popularity  for  offering  low  cost  handsets  in  the  global  market   ©  Aptech  Ltd     Building  a  Mobile  Web  Applica4on  /  Session  16       figure  shows  the  low-­‐end  mobile  devices  available  from  different   Ÿ  Following   manufacturers   Ø  Mid-end Mobile Devices     types  of  mobile  devices  have  gained  popularity  due  to  their  increased  user   Ÿ  These   experience  and  moderate  cost   key  features  of  these  devices  include:  medium  sized-­‐screen,  HTML  supported   Ÿ  Some   browser,  a  decent  camera,  games,  and  support  for  applica4ons   have  a  proprietary  Opera4ng  System  (OS)  that  is  not  well-­‐known  and  is  also   Ÿ  They   not  portable  across  various  plaDorms   Building  a  Mobile  Web  Applica4on  /  Session  16     ©  Aptech  Ltd       figure  shows  the  mid-­‐end  mobile  devices  available  from  different   Ÿ  Following   manufacturers   Ø  High-end Mobile Devices     types  of  mobile  devices  have  advanced  features,  such  as  an  accelerometer,   Ÿ  These   advanced  camera  features,  and  Bluetooth     Ÿ  They  have  a  be]er  look  and  feel  as  compared  to  mid-­‐end  mobile  devices   ©  Aptech  Ltd     Building  a  Mobile  Web  Applica4on  /  Session  16       Ÿ  Following  figure  shows  the  high-­‐end  mobile  devices   Ø  Smartphones     are  mobile  devices  with  mul4tasking  capabili4es     Ÿ  These   devices  have  a  full  browser  support  similar  to  desktop  browsers  with   Ÿ  These   wireless  LAN  and  3G  connec4on   ©  Aptech  Ltd     Building  a  Mobile  Web  Applica4on  /  Session  16       Ÿ  They  have  several  advanced  features  that  are  as  follows:   Compass      Digital   Posi4oning  System  (GPS)      Global   screen      Touch   with  video  recording      Camera   out      TV      Bluetooth      Accelerometer   Ÿ  Following  figure  shows  the  various  smartphone  devices   ©  Aptech  Ltd     Building  a  Mobile  Web  Applica4on  /  Session  16       Ø  Tablets and Notebooks   devices  are  larger  than  mobile  phones     Ÿ  These   are  mobile  computers  with  a  touch  screen  virtual  keyboard  and  stylus  or   Ÿ  They   digital  pen     of  tablets  include:  mul4-­‐touch  display,  be]er  user  experience,  high   Ÿ  Features   quality  screen  resolu4on,  be]er  Web  support,  and  mul4tasking  OS  with  high   speed   of  the  tablets  available  in  the  market  are  BlackBerry  PlayBook  Tablet  PC,   Ÿ  Some   Samsung  Galaxy  Tab,  and  HCL  Me  Tab   Ÿ  Following  figure  shows  different  types  of  tablet  devices   ©  Aptech  Ltd     Building  a  Mobile  Web  Applica4on  /  Session  16       A mobile device platform is similar to a software platform It is basically responsible to interact with the device hardware and run software/services on the mobile device The mobile platforms are categorized as proprietary and open source Proprietary platforms are those which are designed and developed by the mobile device manufacturers These platforms are developed for specific devices and are not supported on all platforms Open source platforms are those which are freely available to the users The users can download the source code and alter them as per their requirements ©  Aptech  Ltd     Building  a  Mobile  Web  Applica4on  /  Session  16     10   Ø  Links   are  used  to  link  pages  in  a  Web  applica4on   Ÿ  Hyperlinks   hyperlink  is  defined  using    tag  with  href  a]ribute     Ÿ  A   href  a]ribute  is  set  to  the  URL  of  a  resource     Ÿ  The    tag  should  also  have  accesskey  a]ribute  specified  with  it     Ÿ  The   accesskey  a]ribute  is  a  keyboard  shortcut  and  is  useful  for  mobile  devices   Ÿ  The   that  have  support  for  access  keys   Code  Snippet  demonstrates  the  use  of    and  

 tag  to  create  a   Ÿ  The   naviga4on  list  on  a  mobile  Web  page  
Navigation list
• Comprehensive Animation Pro
• 2D & 3D Animation
• Animation & 3D
Main Menu
©  Aptech  Ltd     Building  a  Mobile  Web  Applica4on  /  Session  16     42   Ÿ  Following  figure  displays  the  naviga4on  list  on  a  mobile  Web  page   Ø  Links   mobile  devices  are  basically  phones,  hence,  links  can  be  created  to  perform   Ÿ  As   phone  call  ac4ons     is  achieved  using  the  tel:  scheme  embedded  with  a   tel  scheme  is  useful  in  situa4ons,  such  as  accessing  helpdesk  systems  or   Ÿ  The   voicemail  systems   Building  a  Mobile  Web  Applica4on  /  Session  16     ©  Aptech  Ltd     43   Ÿ  The  Code  Snippet  demonstrates  a  tel  scheme  defined  on  a  mobile  Web  page   Mobile Application

Arena Animation is leader in animation and multimedia education with the widest network of centers across the country Over a span of 14 years, 250,000 students and professionals have, through Arena, found their calling in Animation | films Multimedia

• Comprehrensive Animation Pro
Contact us
• 2D & 3D Animation Copyright © 2012 Ltd.

• Animation & 3D
©  Aptech  Ltd     Building  a  Mobile  Web  Applica4on  /  Session  16     44   figure  displays  the  output  of  a  Web  page  in  a  tablet  selected  in  an   Ÿ  Following   Opera  Mobile  Emulator   ©  Aptech  Ltd     Building  a  Mobile  Web  Applica4on  /  Session  16     45   provides  proper4es  for  adding  colors,  selectors,  borders,  backgrounds,  and   Ÿ  CSS3   so  on  for  effec4ve  appearance  of  a  Web  page   Most modern mobile browsers support following features of CSS3: Rounded  corners   Images  with  borders     Adding  shadow  effect  on  text  and  boxes   Anima4ons   Transi4ons   Mul4-­‐column  layout   ©  Aptech  Ltd     Building  a  Mobile  Web  Applica4on  /  Session  16     46   browsers  have  provided  new  styles  for  CSS3  that  are  specific  to  each   Ÿ  Modern   browser     add  these  styles  on  a  Web  page,  the  relevant  proper4es  need  to  be  prefixed   Ÿ  To   with  the  browser  specific  keyword     property  prefixed  with  the  keyword  represents  the  browser  on  which  it  is   Ÿ  The   supported     Ÿ  Following  table  lists  the  keywords  with  their  supported  browsers   Keyword ©  Aptech  Ltd     Browser -moz Firefox -ms Internet Explorer -o Opera -webkit Google Chrome and Safari Building  a  Mobile  Web  Applica4on  /  Session  16     47   Code  Snippet  demonstrates  the  CSS3  proper4es  for  a  Web  page  that  was   Ÿ  The   developed  in  the  code   margin:0px; margin-top:5px; Mobile Application } html, ul#navigation body { { margin:0px; margin: 0; border-left:1px padding: 0; solid #c4bbe7; border-right:1px border: 0; solid #c4dbe7; padding-top:5px; font-size: 100%; } font-weight: normal; ul#navigation vertical-align: li { baseline; display:inline; background: transparent; }font-size:12px; body font-weight:bold; { margin:0; line-height: inherit; }padding:0; #nav float:left; { position:relative; width:500px; border-top:1px height:60px;0 solid #c4dbe7; border-bottom:2px solid #c4dbe7; } ©  Aptech  Ltd     Building  a  Mobile  Web  Applica4on  /  Session  16     48   ul#navigation li a { p { padding:10px; border: 0; color:#616161; font-size: 100%; text-shadow:1px 1px 0px #fff; font-weight: normal; text-decoration:none; vertical-align: baseline; display:inline-block; background: transparent; } a { border-right:1px solid #fff; margin: 0; border-left:1px solid #C2C2C2; padding: 0; border-top:1px solid #fff; font-weight: normal; background: #f6f6f5; } -webkit-transition:color 0.2s linear, background 0.2s #intro { linear; background-color: yellow; -moz-transition:color 0.2s linear, background 0.2s border: solid black 2px; linear; width: 600px; -o-transition:color 0.2s linear, background 0.2s linear; height: 150px; transition:color 0.2s linear, background 0.2s linear; } } ul#navigation li a:hover { background:#f8f8f8; color:red; } ©  Aptech  Ltd     Building  a  Mobile  Web  Applica4on  /  Session  16     49   Arena Animation is leader in animation and multimedia education with students and professionals have, through Animation Arena, found | Multimedia their calling in animation, graphics, print publishing, web designing & films
• Comprehensive Contact us
• 2D Ltd & 3D Animation

• Animation & 3D

©  Aptech  Ltd     Building  a  Mobile  Web  Applica4on  /  Session  16     50   figure  displays  the  output  of  a  mobile  Web  page  with  the  CSS3  styles   Ÿ  Following   applied   ©  Aptech  Ltd     Building  a  Mobile  Web  Applica4on  /  Session  16     51   Ø  Media Queries for Browser Detection   queries  are  used  to  target  specific  features,  such  as  screen  width,   Ÿ  Media   orienta4on,  and  resolu4on  of  the  devices     use  of  a  media  query  is  to  display  HTML  pages  on  various  devices,  such  as   Ÿ  The   computers  and  mobile  devices  with  different  styles  based  on  their  media  types   media  queries,  expressions  are  added  for  specific  media  type,  then  checking   Ÿ  In   for  condi4on  is  done,  and  finally,  respec4ve  style  sheet  is  applied  to  a  Web  page   Media queries are used in two ways that are as follows: Inline  within  a  CSS  style  sheet   In  the    tag  as  “media”  a]ribute   ©  Aptech  Ltd     Building  a  Mobile  Web  Applica4on  /  Session  16     52   Code  Snippet  shows  the  markup  to  apply  a  style  sheet  named  screen.css   Ÿ  The   to  a  device  with  screen  and  set  the  viewing-­‐width  of  the  area  to  480   Code  Snippet  shows  the  code  to  change  the  background  color  of  a  Web  page   Ÿ  The   depending  on  the  device  width   @media only screen and (max-device-width: 480px) { body { background-color: #666; }} Code  Snippet  shows  the  markups  to  serve  style  sheets  based  on  the   Ÿ  The   orienta4on  of  the  device   ©  Aptech  Ltd     Building  a  Mobile  Web  Applica4on  /  Session  16     53   Web  sites  should  be  op4mized  for  be]er  performance   Ÿ  Mobile   of  the  best  prac4ces  that  can  be  followed  for  mobile  applica4ons  are  as   Ÿ  Some   follows:   Design of a mobile Web site should be simple to fit on small screens Avoid horizontal scrolling as some phones not support horizontal scrolling and hide the content on the screen Use buttons, instead of providing many tiny links, as this can annoy the mobile users Create cookies to store the user’s choice for viewing the full version of the site Avoid creating complex forms with many input fields, as data entry can be difficult on mobile devices compared to the desktops Limit the use of images due to bandwidth restrictions on mobile devices ©  Aptech  Ltd     Building  a  Mobile  Web  Applica4on  /  Session  16     54   Add mobile specific functionalities, such as built-in GPS facility or call-in action links Use of good foreground and background colors is important as they makes the sites readable on small screens Select the technologies that are compatible with old mobile devices Also, provide alternatives for functionalities, such as cookies, tables, style sheets, fonts, colors, and so on Avoid use of pop-up windows, tables for layout, frames, and image maps in the mobile Web site design ©  Aptech  Ltd     Building  a  Mobile  Web  Applica4on  /  Session  16     55   mobile   device   is   a   small   portable   compu4ng   device   with   a   small   display   Ÿ  A   screen  and  keyboard     Ÿ  The   different   categories   of   mobile   devices   available   in   the   market   are:   basic   model,   low-­‐end   mobile   devices,   mid-­‐end   mobile   devices,   high-­‐end   mobile   devices,  smartphones,  and  tablets     Ÿ  A  mobile  plaDorm  is  basically  responsible  to  interact  with  the  device  hardware   and  run  sohware/services  on  the  mobile  device     Ÿ  Different   plaDorms   for   mobile   devices   include:   Palm   OS,   Blackberry,   iOS,   Symbian,  Windows  Mobile,  and  Android     ideal   mobile   Web   site   is   supported   and   rendered   properly   by   maximum   Ÿ  An   possible  browsers  and  OS       factors   that   need   to   be   considered,   while   designing   mobile   Web   Ÿ  Two   applica4on  are  its  ini4al  display  (zoom)  scale  and  orienta4on     use   of   media   query   is   to   display   HTML   pages   on   different   devices   with   Ÿ  The   different  styles  based  on  their  media  types   ©  Aptech  Ltd     Building  a  Mobile  Web  Applica4on  /  Session  16     56   ...  mobile  Web  site   Ÿ  Explain   Ÿ  Explain  the  requirements  for  developing  and  tes4ng  of  a  mobile  Web  site   HTML5  support  for  a  mobile  Web  site   Ÿ  Explain   Ÿ  List  the...  / Session 16     17   Ÿ  Following  figure  shows  a  mobile  device  with  QWERTY  keyboard  and  touch  screen   ©  Aptech  Ltd     Building  a  Mobile  Web  Applica4on  / Session 16. ..  and  horizontal  screens   ©  Aptech  Ltd     Building  a  Mobile  Web  Applica4on  / Session 16     16   Smartphones and tablets can switch between landscape and portrait views to present