• Save
Leverage web technology in a mobile world
Upcoming SlideShare
Loading in...5
×
 

Leverage web technology in a mobile world

on

  • 432 views

If you want to get your content on mobile, what is the best approach. This slideset gives some reasons for looking at the web ...

If you want to get your content on mobile, what is the best approach. This slideset gives some reasons for looking at the web ...

Statistics

Views

Total Views
432
Views on SlideShare
422
Embed Views
10

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 10

http://orw5.inceptum.eu 10

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

Leverage web technology in a mobile world Leverage web technology in a mobile world Presentation Transcript

  • Leverage webtechnology in a mobile world
  • IBBT!   Demand  driven,  interdisciplinary  research  in   collabora5on  with  technology  suppliers  and   users  !   Excellence  in  research  in  domains  with  a  high   societal  relevance  !   S5mula5ng  entrepreneurship  !   A  wide  (inter)na5onal  ecosystem  for  ICT   innova5on   2  
  • Why are we here?!   >1  billion  mobile  phones  sold/year  ! That’s  9  zero’s!  !   2010:  302  million  smartphones  !   2011:  486  million  smartphones  ! Prognosis  2016:  1  billion  SP’s/year   3  
  • Let’s recap Development  op5ons  !   Na5ve  applica5ons   !  Powerful  applica5on   !  WriTen  for  specific  plaVorm  (e.g.  iPhone  or   Android  apps)   4  
  • Let’s recap Development  op5ons  !   Widgets   !  XHTML,  CSS  and  JavaScript   !  WriTen  for  a  specific  widget  engine  (e.g.  Nokia   WRT)   !  O`en  special  JavaScript  APIs  with  access  to  device   resources   !  Powerful  and  easy  to  create   5  
  • Let’s recap Development  op5ons  !   Mobile  websites   !  HTML,  CSS  and  JavaScript   !  Easy  to  develop   !  Lacks  access  to  device  resources  *   6  
  • Why are we also here?  Na5ve  development  sucks!   7  
  • Check this … 8  
  • Mobile fragmentation!   Thousands  of  different  devices  !   Several  opera5ng  systems  !   Wide  range  of  proper5es  and  capabili5es   !  Screen  size   !  API’s   !  Programming  language   !  Overlays   !  …   9  
  • OS overviewPlatform Language Cross-platformiOS Objective C NOAndroid Java (Dalvik JVM) NOWindows Phone XNA/Silverlight NOSymbian C++ Compilation per targetBlackberry Java (with RIM API) NOTizen Web standards Possibly 10  
  • Monetizing your work Native App StoresOpenness Open to anyone who signs agreementEntry Cost $0 - $200Developer Revenue 30% - 80%Approval Few days - weeks!   Applica5on  stores  not  always  goldmines   !  Ranking-­‐based  system   !  Dapple  app:  $32,000  invested  vs.  $535  revenue  !   Developers  are  looking  for  alterna5ves   !  Less  restric5ve,  higher  revenue  rate   11  
  • App store as a gold mine Think  again  !   Top  10  app   !  ROI  in  2-­‐3  weeks  !   Top  50   !  6  weeks  !   Top  100   !  9  months  !   Average  app   !  51  years   12  
  • So, how long does your Iphone last? 13  
  • Obvious? solution  Let’s  go  to  the  web  …   14  
  • Evolution of the web 15  
  • Or to show it another way Mobile 25X growth over next 5 years!Weare Source: State of Drupal keynotetiny Copyright: Dries Buytaert 16  
  • Let’s talk money again … Native App Stores Web AppsOpenness Open to anyone who signs agreement Completely openEntry Cost $0 - $200 NoneDeveloper Revenue 30% - 80% 100%Approval Few days - weeks Instantaneous 17  
  • It’s not that easy though!   Mobile  web  usage  differs  from  surfing  on  a   desktop   !  Quick  and  easy  bits  of  content   !  Desktop  pages  are  too  bloated;  contain  too  much   informa5on  !   Typical  mobile  usage:   18  
  • Do you really want to see this? 19  
  • On this … 20  
  • This is you in that world! 21  
  • Web only for trivial apps? This  was  in  2010  !   Google  engineers  ported  Quake  II  to  browsers  !   Showing  capabili5es  of  HTML5-­‐compa5ble   browsers  !   Cross-­‐compiled  3D  engine  to  JavaScript   22  
  • Stop Demo  5me  …  ! hTp://acko.net/  ! hTp://www.newgrounds.com/portal/view/ 470460  ! hTp://helloracer.com/webgl/  ! hTp://cra`ymind.com/factory/html5video/ CanvasVideo.html  ! hTp://peterned.home.xs4all.nl/3d/  ! hTp://chrome.angrybirds.com/   23  
  • So why am I here Mosquito  !   FP7-­‐ICT  project  !   Iden5fy  barriers  of  fragmenta5on  !   Support  standardiza5on  of  mobile  internet  !   Support  ac5ons  rela5ng  to  interoperability   !  Mobile  applica5ons   !  And  services   24  
  • We could use your help!   We  need  interviewees   !  Developers   !  Mobile  oriented   ¡  Any  plaVorm   ¡  Any  type  of  applica5on   ¡  Any  type  of  content  !   If  you’d  like  to  help,  talk  to  me  or  give  me  your   business  card  !   If  you  don’t,  I’ll  talk  to  you  ;)   25  
  • !   FP7-­‐ICT  project  !   Open  Source  plaVorm  and  components  !   For  Future  Internet  !   A  lot  going  on   !  Development,  specifica5ons,  security,  privacy,  …  !   More  later   26  
  • Some mobile web approaches Separate  domains   27  
  • Template switching!   Dynamically  change  website’s   template  !   Selec5on  based  on  device   detec5on  !   Only  the  website’s  layout  changes   !  Content  can  be  reused  !   Important:  Mobile  template’s   quality   28  
  • !   Mobile  template:  Rules  of  thumb   !  Single  column  design  for  most  device   !  No  floats,  fixed  widths,  or  fixed  margins   !  Limit  usage  of  tables,  no  frames   !  ...  !   W3C  Mobile  Web  Best  Prac5ces   ! hTp://www.w3.org/TR/mobile-­‐bp/   29  
  • Why not? Desktop!   More  maintenance   Mobile!   Doesn’t  scale  well   30  
  • Transcoding!   Proxy  approach:  intermediate  server   !  Perform  device  detec5on   !  Fetch  content  from  original  desktop  site   !  Apply  specific  content  adapta5on  rules   ¡  Remove  specific  content,  transform  menu  structure,   resize  images,  …   Proxy Desktop 31  
  • Transcoding!   Not  a  fan  …  !   But  let’s  wait  for  Eric  Boussier  from  Antenna   32  
  • Responsive web design!   Target:  high-­‐end  devices  !   Fully  leverage  HTML5  and  CSS3  !   Typically:  @media  @media  screen  and  (min-­‐width:  640px)  and  (max-­‐width:  809px)  {          …  }   33  
  • Example Boston  globe  !   Design  of  the  header  !   From  high  to  low   !  1200px  (max  width)   !  960px   !  768px   !  600px   !  480px   !  320px   34  
  • >960px 35  
  • 768px 36  
  • 600px 37  
  • 480px 38  
  • 320px 39  
  • What’s still wrong!   High  to  low  !   You  leave  out  so  much  …  !   Design  “from  the  ground  up”  !   Progressive  enhancement   40  
  • Difficult …!   Designing   !  Very  hard  !   Coding   !  Very  hard  !   Tes5ng   !  Even  harder   41  
  • Some more about webinos Local  device   42  
  • Personal zone 43  
  • 44  
  • 45  
  • 46  
  • 47  
  • Links IBBT  ! www.ibbt.be  !   TwiTer:  @ibbt  ! www.facebook.com/IBBT.be   48  
  • Links Mosquito  ! www.mosquito-­‐fp7.eu  !   TwiTer:  @mosquito_fp7  !   Survey:   hTp://survey.inno-­‐projects.net/index.php? sid=93895   49  
  • Help us … Please … 50  
  • And if you like dogs better … 51  
  • Link Webinos  ! www.webinos.org  ! developer.webinos.org  !   TwiTer:  @webinos_project  ! www.facebook.com/webinosproject  ! hTp://www.linkedin.com/groups? gid=3387786   52  
  • My contact data!   Dieter  Blomme  ! dieter.blomme@intec.ugent.be  !   TwiTer:  @da`en  ! Slideshare:  hTp://www.slideshare.net/da`en   53  
  • Everybody clap your hands … 54  
  • QUESTIONS? Thank  you