HTML5, A GREAT MOBILE INTERNET CATALYST?

AMInternet and Web Development

Nov 26, 2011 (5 years and 8 months ago)

985 views

 

©
Momac  2010
.  Some  rights  reserved
 
June
 
2011
 
 
 
 
 
HTML5,  A  GREAT  MOBILE  
INTERNET  CATALYST?
 
A  practical  guide  for  all  mobile  portal  owners
.
 
 
 
 
 

Created  by
 
 
http://www.momac.net
 
http://twitter.com/momac
 
©
Momac  2010
.  Some  rights  reserved.
 
2
 
Introduction
 
 
You  may  have  noticed  some  
increasing  a
ttention  on  the  Internet  about  HTML5.  
You  may  also  have  
read  
that  companies  like  Google  &  Apple  are  
adopting  
HTML5  with  initiatives  like  a  
Mobile  
Google  E
-­‐
mail  client  
written  fully  in  HTML5,  
iAd  in  HTML5,  or  YouTube  using  HTML5  video.  S
o  what  does  it  
all  
m
ean,  what  can  
we  do  w
ith  HTML5,  and  more  importantly:  
what  does  it  mean  for  the  Mobile  Internet?
 
HTML5  is  the  proposed  next  standard  for  HTML  4.01  and  
XHTML  1.0  by  
the  Web  Hypertext  Application  
Technology  Working  Group  (WHATWG)  founded  by  individuals  of  Ap
ple,  the  Mozilla  Foundation,  and  Opera  
Software
.  The  HTML5  standard  has  still  status  Draft  and  the  specification  gets  updated  frequently.  
Since  
2009
,
 
HTML5  support  in  Safari,  Firefox,  Opera  and  Chrome  browsers  is  
increasing  noticeable.
 
Wi
th  the  continuing  
growth  of  the  S
martphone  market  share  (iPhone,  Android,  Nokia)  HTML5  support  on  
the  Mobile  Internet  is  also  
becoming  a  fact,  resolving  constrains  that  block  Mobile  Internet  innovations  
today.  
 
The  thinking  behind  HTML5  is  to  offer  developers  a  complete  sui
te  of  markup  and  API’s  that  allow  them  to  
basically  build  ‘any’  rich  internet  application  using  HTML5,  CSS3  and  (fast)  Javascript.  It  is  especially  this  
thinking  that  makes  the  arrival  of  HTML5  to  the  mobile  platform  really  something  you  don’t  want  to  miss
 
out  on.
 
So  what  features  of  HTML5  are  of  special  interest  on  the  Mobile  Internet,  and  moreover,  what  can  we  
already  use  today,  and  what  can  we  expect?
 
 
 
Alex  Rutgers  is  the  Head  of  Technology  within  www.momac.net  that  specializes  in  partnering  with  media  
companies  and  mobile  
operators  to  create  powerful  mobile  
web
 
sites  and  profitable  mobile  operator  portals.  Follow  MoMac  on  Twitter  #momac
 
 
 
 
HTML5  video  &  audio
 
 
HTML5  allows  developers  to  embed  audio  and  video  components  into  their  rich  internet  appl
ication  pages.  
In  HTML5  you  can  fully  separate  all  controls  (e.g.  play,  pause,  stop,  etc.)  from  the  audio  or  video  play  area,  
which  allows  better  looking  pages,  but  also  allows  synchronized  control  of  multiple  video  area’s  with  a  
single  control.  The  
video  
API  allows  developer
s  to  define  content  functions  on  the  video  data,  
like  changing  
the  lighting
,  add  3D  features,  or  add  face  or  object  recognition
.  Providing  this  level  of  control  and  access  
will  allow  developers  to  create  
new  and  
innovative  mobile  applic
ations  that  
can  
control  
and  
customize  the  
video  data  
in
to  the  mobile  context,  for  example  combine  geo  location
,  device  camera  information  and  
server  video  
information  
to  present  a  true  localized  and  personalized  piece  of  video  content.
 
 
T
oday  there  are  sti
ll  limitations  on  the  mobile  platform
 
with  HTML5  video  &  audio
,  for  example  the  iPhone  
does  support  the  <video>  element,  but  is
 
not  able  to  truly  embed  the  video  screen  data  into  the  same  
mobile  web  
page  and  offer  the  control  and  access  HTML5  defines.  Inst
ead  it  shows  
the  poster  
image  
and  
will  
open  the  video  
in  the  QuickTime  
player.  
On  the  Google  Nexus  One,  HTML5  video  support  seems  to  be  
absent,  the  <video>  element  results  into  an  unplayable  poster  image  of  the  video.
 
Improved  HTML5  video  and  audio  support
 
like  embedding  the  video  and  higher  frame  rates  should  soon  
become  possible  on  the  iPhone  4G  and  Google  Nexus  Two  which  both  should  get  a  faster  ARM  CPU  (e.g.  
Apple  A4  processor)  and  faster  video  acceleration.
 
Mobile  browsers  still  will  limit  and  fragment
 
the  support  of  video  and  audio  codec  capabilities.  For  example  
Apple  didn’t  choose  to  support  the  open  source  Ogg  Vorbis/Theora  codecs,  but  instead  choose  to  support  
aac,  mp3,  wav  and  H.264  on  their  iPhone,  iPod  and  iPad.  In  contrast,  Android  devices  supp
ort  the  patent  
free  Ogg  audio  and  video  format.  So  when  offering  a  full  mobile  HTML5  video  service  you  would  need  to  
recode  the  video  and  audio  content  several  formats.
 
©
Momac  2010
.  Some  rights  reserved.
 
3
 
 
 
 
 
 
HTML5  <video>  in  detail
 
 
The  <video>  element  from  the  new  HTML5  standard  is  suppor
ted  on  some  more  capable  Smartphone  
devices.  Although  the  <video>  element  itself  is  supported,  all  features  that  come  with  the  <video>  element  
might  not  be  supported  or  might  have  been  implemented  ‘somewhat’  different  per  mobile  device.  These  
variations  al
so  control  the  way  you  can  deliver  video  data  to  a  mobile  device,  and  form  an  important  
technical  factor  that  you  need  to  consider  when  you  want  to  create  new  video  experiences  using  HTML5.
 
 
HTML5  <video>  control
 
 
On  all,  except  the  iPad,  the  <video>  eleme
nt  does  not  yet  present  a  “true”  embedded  video  experience  in  
the  mobile  internet  page.  Instead,  in  the  page  a  placeholder  is  shown,  and  when  the  video  is  started,  a  
separate  window  from  the  video  player  will  start,  hiding  the  current  mobile  internet  page,
 
with  all  potential  
new  features  such  as  separated  video  controls.  The  image  below  shows  such  a  placeholder.
 
 
 
 
On  the  iPad,  where  the  video  does  play  embedded  in  the  mobile  internet  page,  it  is  not  possible  to  
start/control  multiple  video’s  (parallel  vid
eo),  nor  obtain  access  to  the  video  data  for  example  to  copy  it  to  
a  <canvas>  element  to  implement  all  sorts  of  creative  effects  on  video  data  as  shown  in  many  demo  
Internet  HTML5  sites.  However  on  the  iPad  it  is  possible  to  create  a  video  player  to  your  o
wn  taste  having  
basic  controls  like  play,  pause  and  show  the  position  in  the  video  with  a  timer  or  position  data  and  control  
the  source  of  the  video  with  a  picklist  for  example.
 
©
Momac  2010
.  Some  rights  reserved.
 
4
 
The  following  table  shows  some  HTML5  feature  support  on  some  of  the  latest  de
vices.
 
Attribute
 
iPad
 
iPod
 
iPhone
 
HTC  
Legend
 
play()
 
Y
 
Y
 
Y
 
Y
 
pause()
 
Y
 
Y
 
Y
 
Y
 
seeking  (event)
 
Y
 
Y
 
Y
 
Y
 
timeupdate  (event)
 
Y
 
Y
 
Y
 
Y
 
canplay  (event)
 
Y
 
Y
 
Y
 
Y
 
play  (event)
 
Y
 
Y
 
Y
 
Y
 
src
 
Y
 
Y
 
Y
 
Y
 
currentTime
 
Y
 
Y
 
Y
 
Y
 
webkitSupportsFullscreen
 
N
 
N
 
N
 
N
 
volume
 
N
 
N
 
N
 
N
 
muted
 
N
 
N
 
N
 
N
 
true  embedded  play
 
Y
 
N
 
N
 
N
 
copy  video  to  canvas
 
N
 
N
 
N
 
N
 
parallel  video
 
N
 
N
 
N
 
N
 
autoplay
 
N
 
N
 
N
 
N
 
 
Apple  choose
s
 
also  not  to  implement  the  auto  play  attribute  t
o  prevent  unsolicited  downloads  over  cellular  
networks.  The  user  always  
has  to  start  the  play()  action.
 
 
HTML5  Dynamic  Imaging  with  Canvas
 
 
The  new  HTML5  Canvas
 
element  is  certainly  welcomed  as  an  additional  alternative  to  Flash  Lite  to  achieve  
full  media  reach.  Combined  with  SVG  and  javascript,  developers  are  given  a  screen  w
ith  the  possibility  to  
manipulate  pixels  in  any  way  they  would  like.  It  isn’t  surprising  that  Google  employees  took  up  that  
challenge  and  ported  the  open  source  version  of  the  game  Quake  II  to  HTML5.  Today  the  current  mobile  
CPU  restrictions  won’t  allow  yo
u  to  run  3D  games  like  that  at  a  sufficient  frame  rate,  but  its  only  a  matter  of  
time.  The  Google  Nexus  One  has  for  example  a  1  GHz  processor,  which  should  be  sufficient  to  create  an  
acceptable  frame  rate.  Also  more  HTML5  API’s  would  have  to  be  implemented
 
in  the  Safari/Webkit  
browser  such  as  the  WebSocket  API  to  communicate  to  the  Quake  Server.
 
Also  the  ability  to  combine  Canvas  manipulation  abilities  with  the  HTML5  video  capabilities  leads  to  
stunning  effects  that  can  be  created  on  the  fly  in  your  browser
,  where  normally  more  complicated  video  
production  software  would  be  required.
 
Back  to  today,  we  already  see  Mobile  HTML5  Game  shops  opening,  offering  a  wide  range  of  low  end  games  
like  Tetris,  Asteroids  and  Space  Invaders  in  a  somewhat  screen  customized  a
nd  slimmed  way.  Sites  like  that  
could  become  a  very  easy,  convenient,  open  alternative  to  the  today  immense  popular  concept  of  App  
Stores  
-­‐
 
without  the  vetting  process.  And  on  the  iPhone  and  iPad  it  will  be  the  only  alternative  as  it  appears  
that  Flash  won
’t  be  supported  on  the  Iphone  for  a  while.
 
 
HTML5  API’s  &  Mobile
 
 
When  all  the  above  HTML5  capabilities  are  mixed  with  the  proposed  API’s  the  full  power  of  HTML5  on  the  
mobile  platform  will  be  quite  evident.  For  example,  the  Geo  Location  API  has  been  propo
sed  and  has  been  
implemented  already  in  several  mobile  devices,  such  as  the  iPhone  allowing  HTML5  developers  to  have  
direct  access  to  the  GPS  coordinates  via  the  browser,  and  use  these  coordinates.  But  that  is  not  all.  The  
plan  is  to  create  API’s  to  every  
device  and  component  available  on  the  mobile  handset,  for  example  a  
©
Momac  2010
.  Some  rights  reserved.
 
5
 
Capture  API  is  defined  that  would  be  fully  capable  of  capturing  audio,  images  and  video  data  from  the  
phone’s  camera.  An  API  like  that  would  open  up  yet  another  wide  range  of  mobile  applic
ations  in  the  
browser  from  video  conferencing,  voip  and  even  real
-­‐
time  augmented  reality  applications.  In  fact  Google  is  
giving  us  a  peek  preview  of  the  possibilities  with  their  GPS  connected  Google  Maps  &  Street  view.  Besides  
these  API’s  more  API’s  have  b
een  defined  such  as  a  Contacts  API  that  provides  access  to  a  
unified  address  
book
.
 
 
HTML5  Local  Storage
 
 
When  creating  functional  applications  the  storage  of  session  and/or  permanent  data  is  of  vital  importance.  
Without  local  storage  it  would  still  be  poss
ible  to  store  session  data  in  cookies,  and  link  all  other  transaction  
data  to  a  server  side  database  like  MySQL  (or  even  squeeze  all  data  in  a  cookie  like  some  developers  love  to  
do),  however  ubiquitous  access  to  a  MySQL  server  place  is  not  always  an  optio
n,  and  might  not  even  
be  
possible  when  a  connection  is  not  fast  enough,  or  even  failing.  Also  in  some  other  cases  local  storage  can  
be  a  very  convenient  way  to  temporary  store  (cache)  data  when  a  web  service  does  not  allow  continuous  
and  frequent  access  du
e  to  usage  policies  like  social  network  API’s  such  as  Twitter’s
.
 
With  the  HTML5  Web  Storage  API  and  Web  SQL  Database  API  it  becomes  possible  to  store  the  application  
data  as  key/value  pairs,  or  even  as  a  normalized  relational  database  table,  accessible  wit
h  SQL  statements  
(on  the  local  device)  and  make  it  available  for  search,  retrieval  and  update  at  any  time.  Having  a  relational  
SQL  database  around  will  be  very,  very  convenient  to  application  programmers  who  are  very  well  know  to  
SQL.  Also  having  SQL  avail
able  would  allow  the  porting  of  any  existing  open  source  application,  like  those  
can  be  found  on  SourceForge.
 
Besides  the  regular  local  data  storage  for  data  processing  applications  the  local  storage  capabilities  will  
extend  the  potential  of  personalisatio
n  which  is  still  an  important  
distinctive
 
property  of  mobile  
applications  today
 
Seeing  that  Google  is  p
hasing  Out  Gears  
-­‐
 
Opting  to  support  HTML5  instead
,  is  also  a  clear  sign  the  HTML5  
Local  storage  capabilities  would  be  sufficient  to  provide  in  all  the  l
ocal  storage  requirements  applications  
might  have.
 
 
HTML5  Drag  &  Drop
 
 
With  HTML5  every  element  in  a  page  can  become  a  subject  to  drag  and  drop.  HTML5  allows  developers  to  
define  elements  that  should  be  subject  to  drag  simply  trough  an  attribute  
draggable=
"true"
.    Also  
events  like  drag  start  and  javascript  API’s  like  dataTransfer  allow  developers  to  implement  the  required  
code  to  execute  the  action  that  is  meant  by  the  user  dropping  a  dragable  element.  For  Mobile  Internet,  
Touch  devices,  intuitive  Drag  &  Dr
op  interaction  plays  an  important  role  in  the  usability  and  integration  of  
the  application.
 
 
HTML5  Form  Elements
 
 
HTML5  defines  an  additional  set  of  form  input  element  types,  like  date,  
time  and  email  to  name  a  few.  Using  this  type  of  information,  the  bro
wser  
will  be  able  to  customize  the  user  interface  with  the  goal  to  simplify  the  
interaction.  For  example  the  iPhone  will  automatically  include  the  @  sign  
in  the  screen  keyboard  when  it  processes  input  for  an  email  type  input.  
Data  input  types  will  automati
cally  result  in  the  well  known  calendar  
control  allowing  to  navigate  to  the  right  date,  and  simply  select  the  day  

 
all  “out
-­‐
of
-­‐
the
-­‐
box”,  saving  developers  time  to  implement  features  like  
this.
 
 
©
Momac  2010
.  Some  rights  reserved.
 
6
 
HTML5  
Web
 
Workers
 
 
With  Web  Workers  application  developers  ca
n  start  processes  in  the  background  or  implement  some  of  the  
user  interaction  in  an  asynchronous  way,  allowing  for  a  much  better  performance  of  the  user  interface,  
speed  up  some  data  processing  by  parallel  processing  etc.  Currently  there  are  no  mobile  devi
ce  browsers  
that  provide  Web  Workers,  but  with  multi  core  processor  devices  upcoming,  it  would  totally  make  sense  to  
make  this  feature  also  available  in  the  mobile  browser.
 
 
HTML5  Structure  and  CSS3
 
 
HTML5  and  CSS3  will  bring  improved  markup  structure  and  
s
tyle
 
capabilities;  many  of  these  improvements  
you  might  not  notice  in  the  end  result,  as  web  developers  have  been  applying  mind
-­‐
boggling  workarounds  
already  using  its  predecessors.  However,  HTML5  and  CSS3  will  make  the  structuring  and  creating  layout  
easi
er,  for  example  creating  rounded  corners  is  just  added  as  a  standard  feature  of  CSS3  which  is  great  
news  for  web  designers.  It  will  allow  them  to  become  more  productive,  and  get  less  distracted  by  having  to  
come  up  with  workarounds  in  the  older  HTML  and  CS
S  all  the  time.  Also,  as  things  get  more  structured,  
changes  and  maintenance  will  become  somewhat  easier  too.
 
 
HTML5  Support  on  Mobile  today
 
 
Clearly  HTML5  has  all  promises  to  change  the  Mobile  Internet  landscape  and  lift  important  blocking  factors  
today  t
hat  web  developers  encounter  when  they  develop  web  technology  based  applications  for  a  Mobile  
browser.  
 
That  HTML5  support  is  moving  with  an  increasing  speed  is  becoming  evident  when  we  investigate  the  level  
of  functional  HTML5  support  that  is  found  on  sam
ple  of  current  smartphone  that  are  out  there  today.  The  
test  shows  that  you  should  not  expect  too  much  from  some  older  devices  from  the  past  running  older  
versions  of  Safari  and  WebKit.
 
 
©
Momac  2010
.  Some  rights  reserved.
 
7
 
 
 
To  establish  the  level  of  support  of  a  PC  or  Mobile  browser
,
 
tests
 
have  been  executed  at  the  DOM  and  API  
level,  to  check  if  
HTML5  
support  
could  be  detected  
for  audio,  video,  the  number  of  codecs,  geo
-­‐
location,  
offline  web  application  store,  Workers,  section  elements,  grouping  content  elements,  text
-­‐
level  semantic  
element
s  (e.g.  time),  Form  Input,  Elements  and  User  interaction.  The  test  does  not  
show  the  effect  of  current  
limitations  as  indicated  in  the  article
,
 
like  the  fact  that  the  video  element  on  the  iPhone  is  actually  not  yet  
showing  a  fully  embedded  and  controllable
 
video  stream.
 
 
HTML5  Yes!
 
It  might  be  a  bit  too  soon  to  start  implementing  full  HTML5  compliant  Mobile  Internet  sites.  But  nothing  
would  stand  in  the  way  to  start  using  HTML  elements  and  features  like  the  Video,  Canvas  or  the  Geo  
Location  API  where  suppor
t  already  can  be  found.  HTML5  still  won’t  totally  solve  the  mobile  device  
fragmentation.  However  HTML5  will  act  as  a  strong  catalyst  to  increase  c
onverge
 
of  the  market,  as  it  sets  a  
new  standard  with  many  features,  and  the  first  signs  indicate  that  this  st
andard  is  moving  much  faster  than  
any  previous  attempts  made  by  the  W3C  alone,  thanks  to  the  WHATWG.
 
The  natural  effect  of  this  increased  speed  will  be  that  some  HTML5  specifications,  newly  introduced  
elements  and  API’s  might  change  faster  than  you  would  l
ike,  so  when  development  budgets  are  low  and  
under  pressure,  and  you  don’t  want  to  be  a  fist  mover,  you  might  want  to  time  your  HTML5  adventure,  and  
perhaps  wait  somewhat  on  a  more  stable  specification.
 
To  get  the  most  out  of  your  mobile  site,  achieve  the  
widest  reach  and  get  the  best  experience  on  each  
mobile  device  you  would  still  need  specialized  solutions  that  can  adjust  media  rendering  based  on  the  
device  and/or  browser  recognition  and  are  able  to  adapt  the  level  of  HTML5  features  based  on  the  current  
available  browser  support.
 
©
Momac  2010
.  Some  rights  reserved.
 
8
 
 
HTML5  Demo
 
If  you  would  like  to  experience  some  HTML5  features  on  your  mobile  device  today,  you  can  visit  us  at:  
http://html5demo.momac.net
 
.    We  have  collected  a  number  of  HTML5  featu
res  such  as  video  and  audio.  
You  can  also  do  a  HTML5  score  test  to  check  out  how  well  your  device  supports  HTML5.
 
 
 
Conclusion
 
 
Improving  customer  experie
nce  is  rapidly  becoming  recognis
ed  as  the  number  one  priority  for  mobile  
operators  worldwide,  and  the  
subscr
iber  interface,  whether  mobile  I
nternet  portal  or  application,  will  play  
a  key  role  in  the  transformation  to  a  subscriber
-­‐
centric  proposition.  
 
 
By  offering
 
subscribers  a  highly  personalis
ed  ‘dashboard’  to  manage  their  operator  account,  comb
ined  with
 
access  to  key  mobile  I
nternet  products  and  services,  operators  can  position  themselves  at  the  heart  of  the  
users  mobile  
I
nternet  experience.  Integration  into  core  operator  databases  and/or  SDM  systems  will  deliver  
intelligence  to  the  customer  interface,  p
rovi
ding  for  context  and  subscriber
-­‐
aware  product  and  service  
offerings  spanning  c
ontent,  voice  and  data  packages
 
and  possibly  3
rd
 
party  products.
 
 
The  CCMI  can  become  the  champion  of  customer  experience,  enhancing  transparency  between  operator  
and  subscri
ber,  adding  value  to  both
.
 
 
Put  simply,  what  better  place  is  there  for  a  mobile  subscriber  to  manage  his  relationship  with  the  operator,  
tha
n  via  the  mobile  device  itself?
 
 
 
About  Momac
 
 
Momac  is  a  leading  provider  of  mobile  interface  solutions  for  mobile  
network  operators.  With  a  
comprehensive  set  of  cloud
-­‐
based  tools  and  managed  services,  Momac  enables  operators  to  run  highly  
personalised  mobile  interfaces  that  
incorporat
es
 
customer  care  services,  social  media  and  e
-­‐
mail,  premium  
content  stores,  advertisi
ng  and  messaging  in  one  flexible  solution  driving  customer  loyalty  and  increasing  
ARPU.
 
 
Momac’s  powerful  and  innovative  cloud
-­‐
based  platform  m
volve
 
puts  control  back  into  operator  hands,  
facilitating  rapid  changes  and  site  creation  without  the  need  for  te
chnical  resources.  Advanced
 
segmentation
 
and  CRM  capabilities  working  in  tandem  with  m
volve
 
self
-­‐
care  services  and  sophisticated  
personalisation  systems  provide  end  users  with  a  progressively  enhanced  customer  experience.  
 
 
©
Momac  2010
.  Some  rights  reserved.
 
9
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Momac  Customer  
Centric  Interfaces
 
 
Momac  
is  able  to
 
integrate  directly  into  operat
or  billing  and  CRM  systems,  HLRs  and  third
-­‐
party
 
Subscriber  
Data  Management  sy
stems  to  deliver  truly  customer
-­‐
centric  interfaces.  The  combination  of  flexibility  in  
interface  design  acro
ss  t
he  entire  range  of  handsets  with  access  to  third
-­‐
party  content  and  subscriber  data  
places  Momac  mobile  interfaces  at  the  forefront  of  the  dr
ive  towards  customer  centricity
 
and  an  improved  
customer  experience.
 
 
Cutting
-­‐
edge  yet  extremely  flexible,  m
volve
 
po
wers  mobile  portals  of  some  of  telecom’s  largest  players,  
including  Vodafone,  O2/Telefonica,  Three,  Orange  and  T
-­‐
Mobile.  As  the  mobile  industry  changes  

 
most  
notably  in  the  past  24  months  with  the  spectacular  rise  of  smart  phones  

 
Momac  has  delivered  con
tinually  
enhanced  services  and  products  that  assist  operators  to  satisfy  customer  demand.  Momac  partners  with  
operators  to  transform  their  portals  into  marketing  and  CRM  channels,  directly  impacting  ARPU  and  
retention.
 
 
As  an  international  company,  Momac  h
as  offices  in  London,  Rotterdam  and  Paris  but  commercially  serves  
more  than  20  countries.  
 
 
Follow  us  on  twitter.com/momac  or  browse  
http://www.momac.net