Leverage web technology in a mobile world

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 speciﬁc plaVorm (e.g. iPhone or Android apps) 4

Let’s recap Development op5ons !   Widgets !  XHTML, CSS and JavaScript !  WriTen for a speciﬁc 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 diﬀerent 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 diﬀers from surﬁng 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, speciﬁca5ons, 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 speciﬁc content adapta5on rules ¡  Remove speciﬁc 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

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

Leverage web technology in a mobile world

by Dieter Blomme

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 10

Statistics