Leverage webtechnology in a  mobile world
IBBT!   Demand	  driven,	  interdisciplinary	  research	  in	      collabora5on	  with	  technology	  suppliers	  and	    ...
Why are we here?!   >1	  billion	  mobile	  phones	  sold/year	  !   That’s	  9	  zero’s!	  !   2010:	  302	  million	  sm...
Let’s recap                 Development	  op5ons	  !   Na5ve	  applica5ons	     !    Powerful	  applica5on	     !    WriTe...
Let’s recap                 Development	  op5ons	  !   Widgets	     !    XHTML,	  CSS	  and	  JavaScript	     !    WriTen	...
Let’s recap                 Development	  op5ons	  !   Mobile	  websites	     !    HTML,	  CSS	  and	  JavaScript	     !  ...
Why are we also here?              	  Na5ve	  development	  sucks!	                               7	  
Check this …               8	  
Mobile fragmentation!   Thousands	  of	  different	  devices	  !   Several	  opera5ng	  systems	  !   Wide	  range	  of	  p...
OS overviewPlatform        Language              Cross-platformiOS             Objective C           NOAndroid         Jav...
Monetizing your work                             Native App StoresOpenness                     Open to anyone who signs ag...
App store as a gold mine                     Think	  again	  !   Top	  10	  app	      !    ROI	  in	  2-­‐3	  weeks	  !   ...
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              ...
Let’s talk money again …                 Native App Stores                    Web AppsOpenness         Open to anyone who ...
It’s not that easy though!   Mobile	  web	  usage	  differs	  from	  surfing	  on	  a	     desktop	      !    Quick	  and	  ...
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	  brows...
Stop           Demo	  5me	  …	  !   hTp://acko.net/	  !   hTp://www.newgrounds.com/portal/view/    470460	  !   hTp://hell...
So why am I here                 Mosquito	  !   FP7-­‐ICT	  project	  !   Iden5fy	  barriers	  of	  fragmenta5on	  !   Sup...
We could use your help!   We	  need	  interviewees	       !    Developers	       !    Mobile	  oriented	             ¡  A...
!   FP7-­‐ICT	  project	  !   Open	  Source	  plaVorm	  and	  components	  !   For	  Future	  Internet	  !   A	  lot	  goi...
Some mobile web approaches Separate	  domains	                       27	  
Template switching!   Dynamically	  change	  website’s	      template	  !   Selec5on	  based	  on	  device	      detec5on	...
!   Mobile	  template:	  Rules	  of	  thumb	     !    Single	  column	  design	  for	  most	  device	     !    No	  floats,...
Why not?                                                     Desktop!   More	  maintenance	                               ...
Transcoding!   Proxy	  approach:	  intermediate	  server	     !    Perform	  device	  detec5on	     !    Fetch	  content	 ...
Transcoding!   Not	  a	  fan	  …	  !   But	  let’s	  wait	  for	  Eric	  Boussier	  from	  Antenna	                       ...
Responsive web design!   Target:	  high-­‐end	  devices	  !   Fully	  leverage	  HTML5	  and	  CSS3	  !   Typically:	  @me...
Example                  Boston	  globe	  !   Design	  of	  the	  header	  !   From	  high	  to	  low	      !    1200px	  ...
>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”	  ...
Difficult …!   Designing	      !    Very	  hard	  !   Coding	      !    Very	  hard	  !   Tes5ng	      !    Even	  harder	...
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	                                ...
Links                Mosquito	  !   www.mosquito-­‐fp7.eu	  !   TwiTer:	  @mosquito_fp7	  !   Survey:	      hTp://survey.i...
Help us … Please …                     50	  
And if you like dogs better …                         51	  
Link              Webinos	  !     www.webinos.org	  !     developer.webinos.org	  !     TwiTer:	  @webinos_project	  !    ...
My contact data!   Dieter	  Blomme	  !   dieter.blomme@intec.ugent.be	  !   TwiTer:	  @da`en	  ! Slideshare:	  hTp://www.s...
Everybody clap your hands …                      54	  
QUESTIONS?     Thank	  you	  
Upcoming SlideShare
Loading in...5
×

Leverage web technology in a mobile world

397

Published on

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

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
397
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Leverage web technology in a mobile world"

  1. 1. Leverage webtechnology in a mobile world
  2. 2. 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  
  3. 3. 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  
  4. 4. Let’s recap Development  op5ons  !   Na5ve  applica5ons   !  Powerful  applica5on   !  WriTen  for  specific  plaVorm  (e.g.  iPhone  or   Android  apps)   4  
  5. 5. 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  
  6. 6. Let’s recap Development  op5ons  !   Mobile  websites   !  HTML,  CSS  and  JavaScript   !  Easy  to  develop   !  Lacks  access  to  device  resources  *   6  
  7. 7. Why are we also here?  Na5ve  development  sucks!   7  
  8. 8. Check this … 8  
  9. 9. Mobile fragmentation!   Thousands  of  different  devices  !   Several  opera5ng  systems  !   Wide  range  of  proper5es  and  capabili5es   !  Screen  size   !  API’s   !  Programming  language   !  Overlays   !  …   9  
  10. 10. 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  
  11. 11. 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  
  12. 12. 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  
  13. 13. So, how long does your Iphone last? 13  
  14. 14. Obvious? solution  Let’s  go  to  the  web  …   14  
  15. 15. Evolution of the web 15  
  16. 16. Or to show it another way Mobile 25X growth over next 5 years!Weare Source: State of Drupal keynotetiny Copyright: Dries Buytaert 16  
  17. 17. 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  
  18. 18. 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  
  19. 19. Do you really want to see this? 19  
  20. 20. On this … 20  
  21. 21. This is you in that world! 21  
  22. 22. 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  
  23. 23. 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  
  24. 24. 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  
  25. 25. 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  
  26. 26. !   FP7-­‐ICT  project  !   Open  Source  plaVorm  and  components  !   For  Future  Internet  !   A  lot  going  on   !  Development,  specifica5ons,  security,  privacy,  …  !   More  later   26  
  27. 27. Some mobile web approaches Separate  domains   27  
  28. 28. 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  
  29. 29. !   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  
  30. 30. Why not? Desktop!   More  maintenance   Mobile!   Doesn’t  scale  well   30  
  31. 31. 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  
  32. 32. Transcoding!   Not  a  fan  …  !   But  let’s  wait  for  Eric  Boussier  from  Antenna   32  
  33. 33. 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  
  34. 34. Example Boston  globe  !   Design  of  the  header  !   From  high  to  low   !  1200px  (max  width)   !  960px   !  768px   !  600px   !  480px   !  320px   34  
  35. 35. >960px 35  
  36. 36. 768px 36  
  37. 37. 600px 37  
  38. 38. 480px 38  
  39. 39. 320px 39  
  40. 40. What’s still wrong!   High  to  low  !   You  leave  out  so  much  …  !   Design  “from  the  ground  up”  !   Progressive  enhancement   40  
  41. 41. Difficult …!   Designing   !  Very  hard  !   Coding   !  Very  hard  !   Tes5ng   !  Even  harder   41  
  42. 42. Some more about webinos Local  device   42  
  43. 43. Personal zone 43  
  44. 44. 44  
  45. 45. 45  
  46. 46. 46  
  47. 47. 47  
  48. 48. Links IBBT  ! www.ibbt.be  !   TwiTer:  @ibbt  ! www.facebook.com/IBBT.be   48  
  49. 49. Links Mosquito  ! www.mosquito-­‐fp7.eu  !   TwiTer:  @mosquito_fp7  !   Survey:   hTp://survey.inno-­‐projects.net/index.php? sid=93895   49  
  50. 50. Help us … Please … 50  
  51. 51. And if you like dogs better … 51  
  52. 52. Link Webinos  ! www.webinos.org  ! developer.webinos.org  !   TwiTer:  @webinos_project  ! www.facebook.com/webinosproject  ! hTp://www.linkedin.com/groups? gid=3387786   52  
  53. 53. My contact data!   Dieter  Blomme  ! dieter.blomme@intec.ugent.be  !   TwiTer:  @da`en  ! Slideshare:  hTp://www.slideshare.net/da`en   53  
  54. 54. Everybody clap your hands … 54  
  55. 55. QUESTIONS? Thank  you  

×