SlideShare uma empresa Scribd logo
1 de 52
Baixar para ler offline
HTML5, how to rethink
[     your web strategy                     ]

          licensed using creative commons
Table of contents


Introduction	

Part I

HTML5, the web evolution                                                             p.4
	
Introduction to How Web Pages Work
The perpetual evolution of HTML
HTML5: buzzword ou real disruption ?	
HTML5 vs HTML4: what does it hold?	
The state of art	
      • Which browsers and operating systems are the most compatible with HTML5?	
      • What are the most used web and mobile browsers in the World ?	

Part II

Native applications : threatened by the web mobile ?	                               p.20


Applications model, although dominating the mobile market…
…Is presently questioned	
HTML5 in the service of mobility: strenghs and issues	
      	 • The websites in HTML5 can do much better than native applications	
      	 • The distribution of mobile websites

Part III

Mobile vs Native applications	                                                      p.25

Technical and functional confrontation	
Two design strategies that lead to different user experiences
The big issues related to project development
Decision matrix: what to do in any case ?
      • Website vs native applications ?	
      • What about hybrid applications ?	

Partie IV

Our recommendation	                                                                 p.37


Which solutions fit for each type of application ?
     • Games and Entertainment
     • Media, News and Information	
     • Social networking	
     • Traveling and maps
     • Utilities (reservation, e-shopping, bank transaction)
     • Multimedia	

Synthesis
Introduction


HMTL5 signs the revival of the web: mobility, interactivity and openness.

Inspired by native applications’ success on connected devices, HTML5 new features provide developers with
solutions to create more easily and quickly richer mobile experience: touch, disconnected mode, audio and
video, use of the device’s GPS and camera.

But HTML5’s vocation is not only to offer an alternative to native applications and closed ecosystems such
as  iOS or Android: it is, more broadly, to provide answers to those who want to streamline their digital multi-
platform strategy, without putting aside stores like App Store or Google Play Store.

This study aims to provide companies wishing to develop digital products with:
         • An overview of HMTL5 new features;
         • A simple analysis of latest trends in web development, mobile, tablet and smart TV;
         • A decision grid that will allow for each project, whether single platform or multi-platform, to determine
         the best development strategy possible.




................................................................................................................................................................. ...........
Note: Parts 1.1 and 1.2. of this document present basic elements to understand HTML5 issues. Readers already familiar with web
technologies and more precisely HTML5, are invited to proceed directly to Part 1.3.
faberNovel   •••   4
[I]




HTML5, the evolution of the web
   • Introduction to How Web Pages Work

   • The perpetual evolution of HTML

   • HTML5 : buzzword ou real disruption ?	

   • HTML5 vs HTML4 : what is the advantage?	

   • The state of art




                                                faberNovel   •••   5
Introduction to How Web Pages Work


A web page is a collection of text, images, multimedia objects, files and programs scattered over the web.
Programming languages can be separated into two categories:



Web standards                                           Flash, Silverlight, etc..
                                                        = Proprietary technologies
                                                        Flash and Silverlight scripting languages are often
The HTML page defines all elements of the               used to manage the behavior of multimedia content,
page, and indicates where to find them and how          such as videos, animations, 3D objects, etc.
they fit together with each other. This is the basic
component that determines the structure of most         These technologies are standardized because they
web pages.                                              originate from a single vendor, who dictates the
                                                        writing standards and provides tools to interpret them
The CSS of a page is a document that defines the        perfectly.
visual appearance of each element: text font, color
windows, border width, location of items, etc.          Example: Flash is published by Adobe. In order to
                                                        read a Flash script, a browser must be equipped with
JavaScript is the most common scripting language        the plug-in (a piece of software that “branches” on
that is executable by a browser. It is the most         the browser to increase capacity). Flash Player is
common choice for managing the behavior of the          edited and released only by Adobe.
different “buttons” of a web page, text fields, etc.
                                                        A web browser is software (which can be installed
                                                        on a computer, mobile device, SmartTV, video game
These languages are ‘basic’ web languages,              console, etc.) that is able to read HTML and CSS to
supported by all browsers. They do not belong to        display all the website’s elements on the screen. You
any company and therefore are likely to change          are probably using one of the following browsers:
depending on the uses and needs of the developer
community. International organizations like W3C
                                                              • Internet Explorer
and ECMA are in charge of establishing writing
standards and promoting them via a set of regularly           • Firefox
published recommendations. Each website editor                • Chrome
and web browser is free to adopt them, or create
                                                              • Safari
new ones. Usually, what we refer to as HTML is
actually the trio of HTML + CSS + JavaScript,                 • Opera
since these languages are very closely related. In
this study we will adopt this usage.                    Most websites are not static: the behaviour of some
                                                        elements may vary depending on user actions. The
                                                        way these dynamics elements behave is described
                                                        by scripts, that is to say, mini-programs inserted into
                                                        the HTML and executed directly in the browser.

                                                        A web app is a special type of website that provides a
                                                        service directly accessible through the user’s browser
                                                        e.g. webmail, search engine, wiki, blog, etc.
Elements’ position, the
                                                   background color of the
                                                   header, fonts, titles, etc. are
                                                   described thanks to CSS.


                                                   The texts, menus, sections,
                                                   etc. are described within the
                                                   HTML code.

                                                   The dynamic behavior of the
                                                   “Les Videos” after clicking the
                                                   scroll arrows is described by a
                                                   JavaScript code.

Figure 1
Structure of France TV Info website’s home page.




                                                                 faberNovel   •••    7
The perpetual evolution of HTML


The developer community constantly creates new HTML features. But before
reaching end users, these features must go through four levels of adoption :




                                                                                          Use by
     Testing by the                                              Implementation
                                          W3C‘s                                        mass-market
  developer community                                             on mainstream
                                     recommendation                                  website publishers
                                                                     browsers




Figure 2
Main stages of the process of integrating new features of HTML



W3C continuously publishes new recommendations to ensure that browsers work
together correctly: the organization encourages browser developers to implement
new features and meet the same standards to facilitate the work of web developers.

Sometimes, when W3C believes that the new features being developed and
tested represent a significant advance for the web, it decides to announce a new
version of HTML.

We must understand that there is no ORIGINAL HTML version: each website and
browser incorporates the newest HTML features at its own pace and according to
its own terms.

Today, the official version recommended by the W3C is HTML4. HTML5 is
still “being specified,” even though many websites and browsers worldwide
support HTML5 features.
HTML5 : buzzword or real disruption ?




HTML‘s new features, already developed and implemented in major browsers or          Figure 3
                                                                                     HTML5 : the future of the
still under development, gathered under the “HTML5” label, inspire the enthusiasm    web ?
of web developers because they can easily reproduce features that were
previously handled by proprietary technologies.




HTML5 vs Flash                            HTML5 vs native
                                          applications
• HTML5 allows the integration
video and audio tracks in a web           Many features of HTML5 mimic native
pages without using Flash. Thus,          applications’ behaviour on connected
multimedia contents can be read           devices:
by a browser without any plug-in in       • The ability to use hardware device
particular..                              elements within the web page: camera,
• HTML5 can incorporate animations        microphone, keypad, GPS, etc.
and dynamic 2D elements (and soon         • Optimization of web page elements for
3D) without using Flash. In particular,   multitouch interfaces
it is possible to create games
entirely in HTML5. This is definitely     • Data storage on the device to operate
a revolution because most online          the web page offline or for automatic
games are based on Flash or other         data logging or user preferences storage
proprietary technologies.                 • Optimization of the web page display
                                          depending on screen size


                                          These are the reason why more and more developers are
                                          considering developing websites accessible via mobile
                                          browsers rather than native applications.
1.4	HTML5 vs. HTML4: what is the advantage?


Recently, new features have appeared for HTML: new tags have been released,
and obsolete ones removed from version 4.0. Here are the main features included
in the fifth version of HTML:



The webdesign revolution

        • Formatting is now clearly handled by CSS in a web page
        • The web page structure has been simplified with pre-formatted tags for
        titles, top, footer, sections, etc. This new structure common to all websites
        promotes accessibility and allows, among others, speech synthesizers and
        people with visual disabilities to identify content more easily
        • Improvement of graphic performance: API “canvas,” new and more
        compact fonts, integration of images in vector format



A few examples of new features recently available or soon to be available
through HTML5:



Animations within a page                                         New filters and CSS animations for unique lay-
                                                                 outs
Today, HTML5 allows the integration of 2D
animations on a web page without having to use
Flash. The next expected step will be to also
incorporate 3D animations.




Figure 4
Example: the luminous lines are drawn by following the path of
the mouse on the screen, they move in and fade progressively.




                                                                 Figure 5
                                                                 CSS animation example: the text is aligned with the contours of
                                                                 the car as it moves across the page
A richer user experience

        •	 More interaction possible for the user: complete an online application, use “drag and drop” functionality,
        load files from your own computer to the web, geolocation, edit or modify a web page or only certain
        parts, highlight the words found in the page when searching
        •	 Integration of rich media: embed video or audio clips




Interaction with the microphone

Speak and your browser reacts. This feature will
soon facilitate web browsing for people with visual
disabilities.




                                                                 Interaction with the webcam

                                                                 Now you can take photos directly within a webpage.
                                                                 Moreover, online video chat will soon be possible,
                                                                 without downloading any additional application.
Figure 6
Example of interaction with the microphone: When making
noise in front of the computer, the balls start to jump on the
screen.




                                                                 Figure 7
                                                                 Example of interaction with the webcam: you can take pictures
                                                                 and add special filters or effects.




                                                                                                       faberNovel   •••   11
Interaction with the mouse

When moving the mouse on your screen, you can
animate objects. This feature enriches the browsing
experience, making it more graceful, with among
others the creation of drawing interfaces on the
internet.

                                                      Video games fully playable online

                                                      Relatively advanced games directly accessible from
                                                      a browser already exist. But, soon a joystick will
                                                      directly control the action of the mouse on the web
                                                      page.




Figure 8
Drawing made using the mouse in a web page




                                                      Figure 9
                                                      The famous Snake game entirely developed in HTML5




                                                      Figure 10
                                                      Illustration of a game in HTML5, piloted by a joystick




                                                                                             faberNovel    •••   12
An efficient mobile experience

Optimized for responsive design development, data storage during the page
initialization in order to allow offline navigation.

Other features


      • Detecting the user’s status : is he connected to Wifi, 3G, the 4G?
      Functions of what’s detected, the contents of the page fits and gives
      you the best experience.
      • Detection of the user’s action: If he watches a video in a tab, the
      video will automatically pause if he goes to another tab, and will recover
      only when he returns to the the right tab.
      • Full Screen: the browser will switch to “full screen” simply by typing the
      key “f”.

These features already exist on all browsers tests (such as Chrome Canary) or
the latest versions of web browsers. Soon, the majority of people will have access,
which will allow to imagine new experiences and use of the web.




Remember:

HTML5 is not a brand new technology: it only consists in all the
latest features of HTML, a language that is constantly evolving.
These latest features are a real step forward for HTML and the
web in general because they help make sites more beautiful, more
complex and better adapted to new media online.




                                                                                      faberNovel   •••   13
1.5	The state of art


Which browsers and operating systems are the most
compatible with HTML5?

HTML 5 is not equaly supported by all browsers: while some of them incorporate
the latest innovations proposed by the developer community, others are “late”.
The following figures present a classification of different browsers and their
compatibility with HTML5. The score is obtained on a total of 500 established from
the 500 latest features of HTML.




Web Browsers

Browsers listed below are stable browsers widely used. HTML5 may get a higher
score on versions of unstable browsers under development, but not used by the
mass-market. We can note the bad position of Internet Explorer, far behind other
browsers that integrate rather well HTML5.



                                                                           Score
Maxthon 3.4.1                                                                422
Chrome 20                                                                    414
                                                                                     Figure 11
Opera 12.00                                                                  385     Score (out of 500) of the 6
Firefox 13                                                                   345     browsers compatible with
                                                                                     HTML5.
Safari 5.1                                                                   317
Internet Explorer 9                                                          138     Source
                                                                                     http://html5test.com/


What happens when a HTML functionality (eg a video in HTML5) is not recognized
by the browser?

Three possibilities:
      • Nothing happens: the video does not start
      • The animation has been damaged: the sound and the image of the video
      are shifted
      • You do not realize anything: developers have recourse to a “fall back”
      version of their site. On browsers that read the HTML5 functionality,
      everything will be in HTML5, on the other, they will bypass the problem by
      incorporating a piece of Flash or Silverlight example.
Smartphones OS

Opera, Firefox et Safari sont très bons, mais les autres sont encore à la traîne,
notamment Android, BlackBerry et Nokia.

On a mobile, web browsing is done on a browser that is directly associated with
the OS version used by the mobile : Safari for iOS, Android for Android, etc.. Other
mobile browsers have also developed independently, and settled slowly on the
market: Opera, Firefox, etc.

On mobile, scores are generally poorer than with a standard Web browser,
because they do not include yet the latest features of HTML5. Opera, Firefox and
Safari are very good, but the others are still lagging behind, including Android,
BlackBerry and Nokia.

                                                                            Score
RIM Tablet OS 2.0             Blackberry Playbook                              373
Chrome                        All Android 4 devices                            371
Opera Mobile 12.00            Multiple platforms                               369
Firefox Mobile 10             Multiple platforms                               325     Figure 12
                                                                                       Score (out of 500) of 8
IOS 5.1                       Apple iPhone, iPad and iPod Touch                324     Smartphones OS allowing
                                                                                       the best compatibility with
Android 4.0                   Asus Transformer Prime and others                280
                                                                                       HTML5 features.
WebOS 3.0                     HP TouchPad                                      217
                                                                                       Source
Silk 1.0                      Amazon Kindle Fire                               174     http://html5test.com/




                                                                                             faberNovel    •••   15
Tablets OS

The tablet market being new, browsers are fewer. As we see in the mobile
market, Opera, Firefox and IOS are ahead about HTML5, while Android is hard to
follow developments. However, we note the relatively good performance of RIM
BlackBerry Tablet.



                                                                             Score
Chrome                            All Android 4 devices                         371
Opera Mobile 12.00                Multiple platforms                            369
Firefox Mobile 10                 Multiple platforms                            325
IOS 5.1                           Apple iPhone, iPad and iPod Touch             324
MeeGo/Harmattan                   Nokia N9 and N950                             284
Android 4.0                       Samsung Galaxy Nexus                          280
Blackberry OS7                    Blackberry Bold 9900 and others               273
Bada 2.0                          Samsung Wave and others                       268
Nokia Belle FP1         S60 5.4 Nokia 603, 700 and 701                          226     Figure 13
                                                                                        Score (out of 500) of the 12
webOS 2.2                         Palm Pre 2 and HP Pre 3                       210     tablet’s OS allowing the best
                                                                                        compatibility with HTML5
Android 2.3                       Google Nexus S and others                     189     features.
Windows Phone 7.5                 Samsung Omnia, W, LG E906 and                 138
                                                                                        Source
                                  others                                                http://html5test.com/




As we have seen, HTML is constantly changing and different browsers try to adapt
to these changes.
Even if they’re not at the same point today, all are making efforts to follow the W3C
standard: free browsers such as Firefox or Chrome have attracted more HTML
developers providing researchers unstable versions of their browser (Firefox 14,
Chrome Canary) to enable them to test new HTML features. They are therefore
better placed than Internet Explorer, but all that is changing very rapidly.




                                                                                              faberNovel    •••   16
Smart TV

Finally, on Smart TV market, browsers are a less efficient than on mobile and
tablets market. Indeed, this emerging market still concern few users. The scores
are tighter, with four leaders above 300 (60% of HTML5 features compatible):
Sharp Aquos TV Googe, NetTV Philips and Toshiba. Samsung, LG and Sony to
follow shortly.


                                                                                                                                                                  Score
 Sharp Aquos                                Espial 6.05                       Sharp Aquos televisions                                                                 342
 GoogleTV                                                                     Sony Internet TV, LOgitech Revue and others                                             328
 Philips NetTV                              Opera Devices 3.2 Philips televisions                                                                                     325
 Toshiba                                    Espial 6.04                       Toshiba L7200 televisions                                                               310
 Samsung Smart TV 2012                                                        Samsung televisions                                                                     286
 LG NetCast 2012                                                              LG televisions                                                                          282
 Sony Internet TV                           Opera Devices 3.1 Sony televisions and Bluray players                                                                     275
 Sharp Aquos                                Opera Devices 3.0 Sharp Aquos televisions                                                                                 236
 Boxee                                                                        Boxee Box by D-Link, Iomega TV wit...                                                   214
 Panasonic Smart Viera                                                        Panasonic Viera televisions                                                             214

                                                                                                                                        Figure 14
                                                                                                                                        Score (out of 500) of the 10
                                                                                                                                        Smart TV OS allowing the best
                                                                                                                                        compatibility with HTML5

                                                                                                                                        Source
                                                                                                                                        http://html5test.com




................................................................................................................................................................. ...........
Note: An exhaustive list of web and mobile browsers is available at this following link: http://fr.wikipedia.org/wiki/Liste_de_
navigateurs_Webdes




                                                                                                                                                 faberNovel        •••     17
What are the most used web and mobile browsers in the World ?

       World’s population’s access to the latest features of HTML5 is still low.

       Web browsers
       	
       Worldwide, only 33,9% of Internet users have a desktop browser that supports more than 80% of the current
       features of HTML5. This is the part of users of Chrome. However, still 31,8% of Internet users are using Internet
       Explorer 9, which includes only 27,6% of the current features of HTML5.




       Percentage of browsers compatible with HTML5  
       Percentage of use by browsers in the World, July 2012

100%

         82,8%
                                                            77%
                                     69%
                                                 63,4%

                                                                                   Three giants of web browsers:
                                                                                   Chrome, Firefox and Internet
                 34%                                                               Explorer.
                               32%
                       27,6%
                                           24%
                                                                                   Internet Explorer 9.0 is still
                                                                                   widely used whereas it only
                                                     7%                            includes 27,6% of the current
                                                                  3%               features of HTML5
 0%


                                                                                   Safari (web browser installed by
                                                                                   default on Apple computers) is
             20            9           13           5.1      12.00                 struggling to take off but is still
                                                                                   behind the big three

                                                                                                 Figure 15
                                                                                                 HTML5 compatiblity
                                                                                                 pourcentage of most popular
                                                                                                 web browsers worldwidly
                                                                                                 used.

                                                                                                 Source
                                                                                                 http://gs.statcounter.com/




                                                                                                       faberNovel   •••   18
Mobile browsers

       Worldwide, only 60% of Internet users have a mobile browser that supports
       more than 50% of HTML5 current features.

       And only 20% of Internet users have a mobile that supports more than 70% of
       HTML5 current features. This ratio corresponds to Opera Mobile’s users,
       which is the only mobile browser exceeding 70% compatibility with the
       current features of HTML5.




       Percentage of mobile browsers compatible with HTML5  
       Percentage of use by mobile browsers in the World, July 2012
100%




                                73,8%
                      64,8%
          56%                                         54,6%
                                          51,2%




                23%       21%       20%                                    Other mobile browsers
                                                           4,5%            are struggling to
                                                10%
                                                                           emerge.
 0%
                                                                           At European level,
                                                                           BlackBerry and Opera
                                                                           stand out in the race.

            4.1       iPhone     Opera Belle           Black-
                                                                           Two giants in the
                      IOS 5.1    mobile FP2            berry
                                                                           market: iPhone and
                                 12.00                  OS7                Android.

                                                                                      Figure 16
                                                                                      HTML5 compatiblity
                                                                                      pourcentage of most popular
                                                                                      mobile browsers worldwidly
                                                                                      used.

                                                                                      Source
                                                                                      http://gs.statcounter.com/




                                                                                           faberNovel   •••   19
What to remember

Worldwide population is still under equipped to use websites that
support advanced features of HTML5. An application publisher
who wishes to make its website reachible for must people must take
care not to use today’s most advanced HTML5 features, or in this
case to propose systematicaly a fall back * for these features.




................................................................................................................................................................. ...........
* Reminder: A fall back is a “copy” of an HTML5 feature developed with other more common technologies (JavaScript, Flash, Silverlight,
etc.) so that users of less compatible browsers can still make the most of this feature (sometimes in a degraded version).




                                                                                                                                                faberNovel        •••     20
[II]




Native applications :
threatened by the web mobile ?
• Applications model, although dominating the mobile market

• …Is presently questioned	

• HTML5 in the service of mobility : strenghs and issues	




                                                              faberNovel   •••   21
Applications model, although dominating the
mobile market…


The applications model, popularized by Apple, works so well so far that all the
mobile platforms have adopted it.
Why the application model has it imposed on smartphones?



On the users’ side:

      • Saves time for access to content and services: Mobile connectivity are
      generally not as fast as fixed connectivity. The web search may take time.
      Mobile applications avoid this problem since they are a point of immediate
      access to favorite services of the user.
      • Improved performance: While a web site must be fully loaded at each
      visit in the browser via the Internet, an application can load some of
      the features and content “hard”, directly to the phone. This reduces the
      bandwidth requirements to use the service properly.
      • Better integration of hardware features: Because the application is
      developed specifically for a platform and a device type, it can make better
      use of the equipment of this unit: use of camera, integrated GPS, value for
      money storage or use of the processor, etc..
      • Graphical effects and interactions richer: These items are managed
      locally in the phone, not online as a website.



On the publishers’ side:

      • A means of effective distribution of their service: On the blinds type
      applications App Store, all applications are referenced, presented the same
      way and easily downloadable. This is a radical departure from web sites
      which depend on their ranking in search engines (especially Google).
      • Monetization’s outlook more interesting: The distribution system
      designed by Apple encourages the creation of content and services with
      high added value, for which it is easier to charge the user.




                                                                                    faberNovel   •••   22
On the platforms’ side
(iOS, Android, Blackberry, Windows Phone, etc.) :


    • A way to keep control on the ecosystem: Apple, Google, etc.. set the
    rules on their platforms to ensure their users a certain level of quality and
    consistency of the experience when they use applications.
    • A new source of revenue: Thanks to stores applications, Apple, Google
    etc. control of the supply chain of applications and can afford to take a
    commission on sales of each application and each transactions within
    applications.




                                                                                    faberNovel   •••   23
…Is presently questioned


The applications’ ecosystem, which helped restore value to services and content
that had trouble finding a viable business model on the web (dominated by the
free), also have disadvantages for publishers:


      • A loss of control over their service in favor of mobile platforms
      • Loss of money related to the commission taken by the platforms at each
      application and sale of each transaction within the application
      • A loss of efficiency (which translates into loss of money), because each
      platform requires to develop a specific application in a specific language,
      which may require the intervention of a specific provider.
      • No contribution from the open source community
      • Very little connection between applications that remain closed objects
      • Poor management of display advertising, generally less contextualized
      and personalized than on the web

Despite these drawbacks, the editors do not really have an alternative:


      • In its current state, HTML5 does not compete with native applications.
      • The use of native applications has become a reflex for users. On connected
      devices, the use of browsers to access services and to view information
      remains marginal

The first point is about to be solved thanks to the new HTML 5 features : soon it
will be possible for certain types of services, to make websites that work equally
well (or almost as well) on mobile browser that a native application. This is only a
matter of months or years (see Part III of the note).

The second point is more delicate : applications offer a way more fluid experience
and is truly entrenched in practice. Therefore, so that users begin to use websites
on their connected devices, these websites will have to do much better than native
applications in certain areas.
HTML5 in the service of mobility : strenghs and
issues


The websites in HTML5 can do much better than
native applications

Restore the link between services
Unlike native applications, websites are much more open and interconnected.
It is easier to create complex links between two websites than between two
applications.

A continuous improvement process
The updating process of a native application is long, especially because it involves
monitoring the application by the operator of the platform (Apple’s App Store for
example). The frequency of updates is limited. On the contrary, a website can be
updated as often as its publisher wants.



The distribution of mobile websites

The referencing and distribution model on stores applications is the key of mobile
applications’ success. Mobile users find applications that they need immediately
on their home screen, without using a web search engine.

The challenge HTML5 publishers face is to provide users an easy access on
mobile and other connected devices.

Two tracks to consider:
      • Communicate and encourage users to create shortcuts to HTML sites on
      the home screen of their device.
      • Take advantage of the emergence of “universal stores” listing both
      native applications and sites in HTML.

The most promising universal store is certainly the Facebook App Center, which
can tap into the power of its 900 million Facebook users and its viral power.




                                                                                       faberNovel   •••   25
[III]


                         VS

Mobile vs Native application
• Technical and functional confrontation	

• Two design strategies that lead to different user experiences

• The big issues related to project development

• Decision matrix: what to do in any case ?




                                                                  faberNovel   •••   26
Technical and functional confrontation


 Today, native applications can deliver a better experience for users: graphics
 performance, ergonomics, interactions. However, HTML begins to integrate
 efficient tools little by little to complete those functionnalities. It only needs a
 mobile browser to set HTML5 technolo


                         Website (= web app)                         Native application
Graphics rendering       Progress is underway thanks to CSS          Graphic rendering of high quality,
                         and HTML evolutions but not yet             especially for 3D.
                         integrated on mobile browsers.
Animations               Ability to make 2D animations in            Greater computing power for 2D and
                         some browsers but not on mobile. So         3D animations, which allows to create
                         far impossible to make 3D animations        games, immersive experiences, etc. ..
                         without the Flash plug-in on the web
Access to the device's   Possible on the latest browsers, but        Yes
camera                   they are still not available on mobile.
Access to the devices'   Possible on the latest browsers, but        Yes
microphone               they are still not available on mobile.
Access to the device's   Yes,                                        Yes
geolocation feature
Using notifications      Push notifications to the home              Yes
from the application     screen are impossible from an HTML
to the Home screen of    website. Developers are working on
the device               it.
Advanced user /          Possibility to browse like on the web:      Possibility to use the accelerometer
machine interactions"    scrolling, clicking, etc. With HTML5,       to interact with the device: shaking,
                         microphone interaction is coming            flipping, tilting, etc..
                         soon on mobile browsers.
Offline operation        Possible with HTML5 but not                 Yes
                         necessarily the most popular
                         browsers.
User account             Yes.                                        Yes
(e-commerce, social
networks ...)
Video embedding          Possible with HTML5                         Yes, with the device's native player

Games                    Limited to 2D graphics experiences,         3D design and innovative
                         and “movement and mouse click”              interactions: tilt, shake …
                         actions.
Application / web site   Within the web browser, or from an          From an icon on the home screen
access                   icon on the device's home screen
                         (shortcut to the website)


                                                                                            Continued on next page>
Site web (= web app)                      Application native
Download of the        From the matching web site or from a      From the matching Store : AppStore,
application            web application platform.                 Androïd Market, etc.
Application            Only if an account registration and       The application can be easily
personnalisation       differentiation of various profiles are   customized from the "settings":
                       provided.                                 access to location data, notifications,
                                                                 etc..
E-commerce             Possible via websites like PayPal         Possible directly with the user's
                       easily embeddable into a webapps.         account on the platform.

Links to other services Easy navigation from one page to         Applications communicate very little
                        another within the browser.              between them.
Share on social        With one click if the the social          Possible if built within the application
networks               network's API or widget is added to
                       the site.

                                                                                     Figure 17
                                                                                     Comparaison des possibilités
                                                                                     techniques et fonctionnelles
                                                                                     entre un site web et une
                                                                                     application native




                                                                                            faberNovel   •••   28
Two design strategies that lead to different user
experiences


eBay’s case

eBay is an auction site created online by the end of 1990: since then it has become
the industry standard for e-commerce. More than 270 million users buy and sell all
kinds of objects on this platform.

And yet, eBay is particularly difficult to use: the information is hard to find, poor
ergonomics, etc. At first its bad design was not glaring, but it became so in 2007
with the launch of the eBay application for iPhone, followed later by the launch of
the eBay application for iPad. Indeed, the mobile and tablet versions are far more
simple and faster to use.
Why such a difference?
      • Developing a website allows greater freedom of design, sometimes - as is
      the case for eBay - to the detriment of the quality of user experience.
      • On the contrary, an iPhone application is developed from existing
      ergonomic bricks and is designed for a small size screen which forces them
      to Basics.




                                                                                        Figure 18
                                                                                        Comparison of Ebay website
                                                                                        and Smartphone application




                                                                                              faberNovel   •••   29
What to remember:

Lack of freedom and OS constraints encourage developers
to optimize both the user interface and the ergonomics of the
application, which will also be assessed and confirmed by the
corresponding Store before being put online. Therefore, this
requirement promotes quality.

As a side effect, some suggest adopting a “mobile first design
strategy.”

Mobile development requirements being more restrictive (small
screen, often low connectivity, use the move, etc..), and is indeed a
very good starting point for designing a simple, clear and effective
service.

Designed after the native application, the website will therefore
benefit from its broad principles of design and ergonomics.

For a HTML5 website, it is recommended to start designing the
mobile experience: what information and features are essential to
highlight? How to simplify the user path? Etc..




                                                                        faberNovel   •••   30
The big issues related to project development


 The board below brings to light how HTML website development is simpler to
 implement than a native application.
 HTML being older, there are more skilled developers. Furthermore, the technology
 is quite stable, easy to spread and update.


                          Website (= web app)                      Native application
Human resources           A provider or intern resources for the   Most of the time, an OS specialized
development               development. Intern resources are        provider must be hired, even for
                          given priority to for maintenance and    maintenance.
                          update. Indeed HTML is a well and
                          long-time known language, many
                          companies have built a web division.
Availability of skilled   HTML5 development requires               Many skilled developers for most
developers                very good web skills: last trends        common platforms (iOS and Android)
                          knowledge, responsive design             but rarer and more expensive for
                          mastering, APIs, best practices for      other platforms.
                          CSS, etc.. HTML5 developers are
                          rarer and more expensive than the
                          average web developers.
Overall costs of          Only one site (in responsive design)     A developer specialized in each
development               to develop for all platforms.            platform for each application.
Update and                Performed by the developer,              Performed by the developer, and
maintenance               automatically synchronized on the        manual downloading of the new
                          web.                                     version of the application: which is
                                                                   more painful for the user.
Privacy code              The code is open (HTML)                  The code is kept confidential

Development time          Only the time required for software      Longer because the application must
                          development. Possibility of rapid        be assessed and validated by the
                          prototyping.                             corresponding store.
Screen Resolution         "Possible use of responsive design       Each screen size matches with a
                          which adapts contents to the screen      different and specifically developed
                          orientation.It also allows developers    application.
                          to build one application and have it
                          scale up and down to all the different
                          screen sizes and resolutions.”
Design and                Entirely free                            Standards are imposed by the
appearance                                                         corresponding OS


                                                                                    Figure 19
                                                                                    Website development
                                                                                    vs Native application
                                                                                    development
Relating to the business models applied, each technology has its own :
        • HTML is an open model: no quality control, free service (mostly at least),
        universality of reading materials, online distribution and referencing
        • The native model is a highly in demand model : each conected device has
        its own application. Applications are assessed and validated before being
        distributed on a Store which facilitates their distribution in compensation of
        cost for the publisher. Users are willing to pay for this quality.



                         Website (=web app)                            Native applications
Ranking                  Like any website, web apps are                No web ranking, but only on the
                         ranked on search engines like                 device's appropriate Store. There are
                         Google. They can also be found on             only compatible applications with the
                         web applications Stores.                      device used, which simplifies users'
                                                                       experience.
Monetization,            Advertising and monetization control          You must go through Stores to
advertising              according to the web page you                 add an ad on an application. The
                         visited.                                      ad is not necessarily related to the
                                                                       application's theme.
Interoperability         An HTML website can be read from              An application developed for one
                         any devices: smartphone, tablet, ...          device can not be read from another.
                         and reach a maximum number of                 It aims a single category of users.
                         users.
Sale                     A web application is usually available        A native application is available on
                         for free, it's a website.                     Stores, free or not, which takes 30%
                                                                       of
Distribution             No special mean of distribution,              Through a Store such as the App
                         except search engines' ranking                Store or Android Market, allowing to
                                                                       benefit from the platform's image.
                                                                       However, the Store is the only one
                                                                       mastering the application's visibility
                                                                       (only the first 50 really successful).
Change over to the       The web will always exist,                    We do not know which platform
context                  using HTML W3C standards'                     will dominate the market in the
                         recommandations. HTML language is             coming years: the rise of Android
                         a sustainable solution.                       and Samsung against Apple ...
                                                                       Developing native application
                                                                       compatible with today's dominant
                                                                       platform does not guarantee success
                                                                       for the future .

                                                                                           Figure 20
                                                                                           Functional and technical
                                                                                           differences between a website
                                                                                           and a native application




                                                                                                 faberNovel     •••   32
Case Study: Financial Times

In June 2011, the Financial Times launched a web app which greatly accelerated
FT’s access on mobile devices (smartphone and tablets): 12% of registrations
from mobile, and 19% of website traffic is generated by mobile access, which
represents 2M users.

In August 2011, the web app had already attracted more users than the prior
native application. This latter was subsequently removed from the AppStore.

HTML5 has allowed them to reach more users, especially those using an
Android Smartphone, or other browsers. Furthermore, FT wanted to control the
release of Apple and 30% of revenues collected by the Cupertino company.
Furthermore, FT wanted to free themselves of Apple and their 30% revenue share.




                                                                                  Figure 21
                                                                                  Financial Times website read
                                                                                  from a tablet




                                                                                         faberNovel   •••   33
Decision matrix: what to do in any case ?



Website vs native applications ?


Native application when the service…


• Uses the hardware’s devices: camera, gyroscope, compass ...
• Allows many possible uses, adjustable in the connected device “preferences”
• Is easily reachable from any other application or from the home page
• Is part of a business model that fits well with the Store applications’ model
• Aims at one person category with only one Smartphone
• Must be highly efficient
• Does not need to connect to the Internet
• Has been developed with a confidential code

• Uses data that must be secured
                                                                             VS
                             Web App when the service…


                             • Must reach the entire population, regardless of the device, and whatever the
                             Smartphones, tablets or SmartTV market forcecasts.
                             • …Or on the contrary, will reach a few people (no need to invest less in a language
                             known as HTML)
                             • Is accessible by a simple web search
                             • Will be quickly and frequently updated
                             • Is free to be put online
                             • Provides links to other websites
                             • Will be maintained by someone other than the developer
                             • Must have a completely original design
                             • Must allow a perfect control of the monetization system and advertising (analytics)
                             • Must be developed quickly / can be used to develop other services (reuse of existing
                             widgets, etc.).
                             • Will be available soon
                             • Also refers to an online website
What about hybrid applications ?

It is impossible to easily convert a native application from one device to another.
Indeed :
      • Development languages are different;
      Examples: Objective-C for Apple Java for Android
      • The interface changes from platform to platform;
      • The OS that support the applications are different.

The one and only solution to develop a native application that runs on different
platforms is to develop a native application for each different platform, with proper
interface, and a specialist developer regarding the OS and language used.
On the contrary, an HTML web application can be read by any Smartphone fitted
with an Internet browser: iPhone, Android, or BlackBerry.

However, some applications need both the ability to:
      • Be used on any type of OS: Android, IOS, etc.;
      • Access to the Smartphone or Tablet native features : microphone, camera,
      accurate geolocation, contacts list, calendars.

In these particular cases, it is possible to pitch an intermediate solution:
hybrid applications.

A hybrid application is based on the same technologies as web applications: the
code is built with HTML standard, CSS and JS. Thus, it has the same performance
and qualities as web applications.

This code is thereafter integrated into “frameworks” which allow access to
the OS native features.



What is a Framework ?

It consists in an empty native application, allowing the HTML contents of a webpage
to be read. The framework’s features are very close to a browser’s.




                                                                                        Figure 22
                                                                                        PhoneGap’s scheme showing
                                                                                        frameworks’ role




                                                                                              faberNovel   •••   35
Thus, unlike a native application, a hybrid application will access hardware
devices (camera, GPS, Etc.) and be listed on the corresponding Store. Moreover,
a hybrid application makes the most of its HTML code : ease of updating and
developing, design responsive, long-term stability of the language used.



Which suppliers provide those frameworks ?

Here are two actors who develop frameworks and integrate HTML pages to make
hybrid applications on different platforms.

PhoneGap

supported by the Apache Software Foundation’s incubator

The following are native features supported by PhoneGap’s different frameworks:




                                                                                  Figure 23
                                                                                  Table of different platforms’
                                                                                  native features, supported by
                                                                                  the PhoneGap’s frameworks.




                                                                                         faberNovel   •••   36
Sencha Touch

Sencha also provides the framework so that web applications have access to
most the native features: geolocation, compass, accelerometer, etc...

Below,are the list of devices compatible with Sencha’s solution :




                                                                             Figure 24
                                                                             The different platforms on
                                                                             which Sencha Touch can
                                                                             spread a hybrid application,
                                                                             from the same HTML5 code




                                                                                    faberNovel   •••   37
[IV]




Our recommendation
• Which solutions fit for each type of application ?

	 Games and Entertainment	
	 Media, News and Information	
	 Social networking	
	 Traveling and maps
	 Utilities (reservation, e-shopping, bank transaction)	
	Multimedia

• Synthesis




                                                           faberNovel   •••   38
Our recommendation


Which solutions fit for each type of application ?




Games and Entertainment

[Native application]

Why ? Such applications require high-end graphics and responsiveness to evoke
a wide new universe, along with possible interactions with innovative hardware
elements (eg accelerometer).


Example 1 : Infinity Blade

This game is extremely similar to those played
on video gaming consoles. Its high quality 3D
graphics requires high computing power to respond
to players’ actions. Impossible to obtain in HTML5
developement so far, native development is
essential.
                                                                    Example 2 : Angry Birds

                                                                    One of the most popular games on mobile phones
                                                                    is now available in HTML5 ..but only on Chrome
                                                                    19, which is not yet available for a Smartphone or
                                                                    a tablet. Note that it is a relatively simple game: a
                                                                    single type of interaction, 2D graphics.



Figure 25
“Infinity Blade”’s illustration, a native gaming application that
uses 3D animations




                                                                    Figure 26
                                                                    “Angry Birds”, from now on available in HTML5
                                                                    on Chrome 19 browser
Media, News and Information

[Hybrid now … web app for soon !]

Why? Contents must be constantly consulted, updated ... and all users need this
service. Moreover, there is no particular interactions to imagine but read, share
and comment. Native applications’ advantage is to push notifications: this feature
is expected to arrive shortly on HTML5.




Examples : Financial Times & Le Monde

Financial Times is a web                Le Monde is a native
application.                            application.




Figure 27
Financial Times’ webapp and Le Monde’s native application.




                                                                                     faberNovel   •••   40
Social networking

[Native or hybrid]

Why? Social networking applications have characteristics quite similar to news’
application. Frequently updated and modified, they target a wide audience, which
uses various devices. Finally, users need camera and geolocation access to
share those data.




Example 1 : LinkedIn

LinkedIn is a hybrid application.



                                                         Example 2 : Facebook

                                                         Facebook has abandoned HTML5 and came back
                                                         to a native version of its application. Facebook’s
                                                         purpose is to make the application more optimal
                                                         and fluid in particular when opening and viewing
                                                         multimedia content.
                                                         Facebook has chosen to promote the efficiency and
                                                         speed of a native application rather than developing
                                                         an HTML5 application readable on any mobile
                                                         platform.



Figure 28
Linkedin’s hybrid application on Smartphones




                                                          Figure 29
                                                          Facebook’s application, the new native application launched in
                                                          August 2012




                                                                                                 faberNovel    •••   41
Traveling and maps

[Native application and webapp]

Why? For such applications, geolocation is
essential. Webapp geolocation is as accurate as
native application geolocation. It is one of the first       Utilities (reservation, e-shopping, bank
features compatible with most common browsers.               transaction)

                                                             [Native application]

Example : Foursquare                                         Why? For such applications, one need to identify
                                                             and make transactions safely. In native applications,
Foursquare is a native application available on both         the user is most of the time already identified
Android and iOS.                                             and registered, so he doesn’t need to enter the
                                                             username nor the password for each transaction.



                                                             Example : eBay

                                                             eBay has combined both a native application, and
                                                             an optimized website for mobile. Indeed, iPhone’s
                                                             features can further enrich eBay’s service on the
                                                             web: scan bar code with the camera, notifications
                                                             when an item is sold or purchased, etc.. These
                                                             features can not yet exist in HTML5.



Figure 30
The Foursquare application, a native application that uses
native geolocation devices




                                                             Figure 31
                                                             The eBay application, an e-commerce application using
                                                             notifications and camera to scan a bar code




                                                                                                   faberNovel   •••   42
Multimedia

[Native application today … But about to switch for web application !]

Why? For a long time, websites publishers putting forward movies or music
contents online had no other alternative than using native applications. Now,
HTML5 allows the integration of multimedia content on mobile devices, with a
greater responsiveness when the Internet connection is safe.




Example : YouTube

When Smartphones first came out, YouTube had previously developed an
application that used the Smartphone’s native video player. Indeed, adding a
Flash plug-in was then the only way to play videos online. However, Apple refused
to integrate the Flash plug-in into mobile iOS.
More recently, new HTML5 features have allowed YouTube to develop a web
application version that runs on all platforms.




Figure 32
Youtube’s HTML5 application, identical on all platforms




                                                                                    faberNovel   •••   43
Synthesis

So far, there have been a lot of debates about which technology is the best to
develop a digital product, but the real debate actually relies on which technology
is the most suitable to a publisher’s needs in terms of quality and speed of the
application.

Whenever an app requires to be very reactive, work offline, or use advanced
features of the device (camera, gyroscope, voice, push, sending by e-mail, address
book, etc..), it must be native. Each app will be optimized for its proper platform.

If instead, the app’s development is driven by a logic of cost and does not require as
advanced features as a native app, HTML5 offers the best compromise possible.
The interest is to have a unique app to develop and update. Costs savings can be
substantial as the number of apps is important.



Although, HMTL5 technology is not fully mature yet …

The most interesting features of HTML5 are not supported by widely used
browsers. They will be in the coming months for desktop browsers, but not
necessarily for mobile browsers, tablets and SmartTV. Actors controlling thoses
devices (Apple, Google, Samsung, etc..) have indeed little interest to encourage
the web apps’ development.
Web apps’ development on the connected devices requires two revolutions that
are quite difficult to predict:
       •	 A shift in strategy for Apple, Google, Samsung, etc.. which would lead
       them to improve HTML5 comptatibility on their connected devices
       •	 A revolution in the habits of mobile users who would start reaching their
       favorite service from their browser rather than a native application. Given
       the current success of native applications, this change will not happen
       without a major disruption of the market, supported the world’s giant digital
       players.




                                                                                         faberNovel   •••   44
... It is time for players to integrate HTML5 to their multiplatform
strategy...

Browsers for desktop computers integrate faster HTML5 new features. By the end
of 2012 or early 2013 ,HTML5 will be considered as the web standard development
technology.

Even if all are not yet supported by the various browsers, overall, HTML5 new
features let you go through richer and more interative web experience. Beyond
this technological aspect, HTML5 also brings a new concept design:
      •	 Multiplatform strategy: how to adapt a unique web experience to different
      devices (mobile, tablet, TV) all-in sharing development costs?
      •	 Updating and running ease: every last changes and web development
      versions follow one another seamlessly and transparently. It also allows to
      develop new experiences through swift prototyping methodologies, through
      an incremental and iterative way
      •	 A logical flow: we do not need to download or store anymore information.
      Everything is accessible on the web, via a url.




                                                                                     faberNovel   •••   45
This means that new websites’ developments or existing websites’ updates will
have to be done taking into account both HTML5 and web standards in order to
replace proprietary technologies or provide a richer user experience.
Some examples for pluzz.fr:
      •	 For movies, change from Flash to HTML5
      •	 Provide a full screen mode for more immersion




…And explore the field of hybrid applications.

A service like Pluzz should be reachable by the largest number of possible
devices: Smartphones, tablets, SmartTV. In order to reduce the high developing
costs implied by the development of a native application for each different platform,
one should use a common heart in HTML5. An example is the strategy chosen by
Netflix. Advantages are many:

The advantages:


      •	 The heart can be updated at any time, without having to go through Apple,
      Google, Samsung, etc..
      •	 It is possible to make dynamic testing (A / B testing) to quickly improve the
      interface.
      •	 The development cost for each application is significantly reduced.

This strategy is an opportunity to think out globally services for an easier
management, more efficient and rational (systematic use of APIs, better structure
its data, better “talk to each other” the various services, etc..).




                                                                                         faberNovel   •••   46
Sources



Figure 3                                    Figure 9
HTML5 : the futur of web ?                  The famous Snake game entirely
http://www.w3.org/html/logo/                developed in HTML5
                                            http://neave.com/fr/serpent/
Figure 4
Exemple d’animation : les traits            Figure 10
lumineux se dessinent en suivant            Illustration of a game in HTML5,
le trajet de la souris sur l’écran, ils     piloted by a joystick
bougent et s’effacent au fur et à           http://hacks.mozilla.org/2011/12/
mesure.                                     gaming-and-the-mozilla-labs-apps-
http://neave.com/fr/imagination/            project

Figure 5                                    Figure 11
CSS animation example: the text is          Score (out of 500) of the 6 browsers
aligned with the contours of the car        compatible with HTML5.
when this latter moves                      http://html5test.com/results/desktop.
http://www.adobe.com/fr/devnet/             html
html5/articles/css3-regions.html
                                            Figure 12
Figure 6                                    Score (out of 500) of 8 Smartphones
Example of interaction with the             OS allowing the best compatibility with
microphone: When making noise in            HTML5 features
front of the computer, the balls start to   http://html5test.com/results/mobile.
jump on the screen.                         html
http://neave.com/fr/balles-
sauteuses/                                  Figure 13
                                            Score (out of 500) of the 12 tablet’s
Figure 7                                    OS allowing the best compatibility with
Example of interaction with the             HTML5 features
webcam: you can take pictures and           http://html5test.com/results/tablet.
add special filters or effects.             html
http://neave.com/fr/webcam/
                                            Figure 14
Figure 8                                    Score (out of 500) of the 10 Smart TV
Drawing made using the mouse in a           OS allowing the best compatibility with
web page                                    HTML5.
http://harmoniousapp.com/                   http://html5test.com/results/
                                            television.html




                                                                                      faberNovel   •••   47
Figure 15                              Figure 23
HTML5 compatiblity pourcentage of      Table of different platforms’
most popular web browsers worldwidly   native features, supported by the
used                                   PhoneGap’s frameworks
http://gs.statcounter.com/             www.phonegap.com

Figure 16                              Figure 24
HTML5 compatiblity pourcentage         Different platforms on which Sencha
of most popular mobile browsers        Touch can spread a hybrid application,
worldwidly used                        from the same HTML5 code
http://gs.statcounter.com/             www.sencha.com

Figure 22                              Figure 29
PhoneGap’s scheme showing              Facebook’s application, the new native
frameworks’ role                       application launched in August 2012
https://build.phonegap.com/            www.igeneration.fr




                                                                                faberNovel   •••   48
Acknowledgments




Bruno Patino
Executive Vice President, Strategy & Digital of France
Télévisions Group,
Director of France 5


Eric Scherer
Director of Future Media


Philippe Deloeuvre
Strategic Marketing Director




Aurélien Fache
Technical Director




Romain Goyet
Co-fondateur et CTO




                                                         faberNovel   •••   49
Contact




17 rue du Faubourg du Temple
75010 Paris
+33 1 42 72 20 04

www.fabernovel.com




Marie-Caroline Lanfranchi
Project Director
marie-caroline.lanfranchi@fabernovel.com



Maxime Coupez
Senior Project Manager
maxime.coupez@fabernovel.com



Marguerite Meunier
Junior Project Manager
marguerite.meunier@fabernovel.com




                                           faberNovel   •••   50
We are faberNovel
We help large organizations think and act like startups!

We help our clients make the most of digital opportunities and
emerging partices. We build on tomorrow’s challenges to deliver
significant impact.

We are designers, business analysts, and engineers.

With a strong expertise in design and execution of digital experiments
using HTML5, we are able to assist organizations in:
     • Building their innovation abilities thanks to our training and
     coaching team: digital deep dive for senior managers, custom
     workshops design, Innovation Labs
     • Defining a digital multi-platform strategy, clear and customer-
     orientated
     • Designing products, services and innovative experiences
     • Supporting innovative projects with the ability to offer turnkey
     service: vendor and technology sourcing and assessment,
     operational run and post-launch management
     • The development of transmedia projects with design and
     execution of multichannel experiments.




•••
We work ideas into successful project.
We make innovation happen.



     facebook.com/faberNovel              @faberNovel               www.fabernovel.com
We are faberNovel
References

SFR PLAYER

In 2011, as part of the SFR PLAYER event, faberNovel was in
charge of the design and animation of a digital experience about
technological innovations.

http://sfrplayer.sfr.com/


INSIDE ENGRENAGES

In collaboration with Canal +, faberNovel was in charge of designing
and   developing an interactive web experience called “Inside
Engrenages”, a new webserie deriving from the original French
police procedural television series called “Engrenages”.

“Put yourself in a webreporter’s shoes allowed to follow Captain
Laure Berthaud’s group the time of an investigation of a forged
documents traffic and clandestine network.”

During seven days, the user will follow in real-time the investigation’s
progress and will be notified by email or social networks for twists
and new evidence’s discovery.

http://engrenages.canalplus.fr/




    facebook.com/faberNovel                @faberNovel               www.fabernovel.com

Mais conteúdo relacionado

Mais procurados

The web phenomenon
The web phenomenonThe web phenomenon
The web phenomenonZool
 
Exploring the physical web
Exploring the physical webExploring the physical web
Exploring the physical webyiibu
 
Business opportunities in social media
Business opportunities in social mediaBusiness opportunities in social media
Business opportunities in social mediaJoseph A. Bayer
 
The future of media queries?
The future of media queries?The future of media queries?
The future of media queries?yiibu
 
HTML5: The Code to Maximizing Revenue
HTML5: The Code to Maximizing RevenueHTML5: The Code to Maximizing Revenue
HTML5: The Code to Maximizing Revenuebloevens
 
Mobile Web (R)Evolution - Sept 2011
Mobile Web (R)Evolution - Sept 2011Mobile Web (R)Evolution - Sept 2011
Mobile Web (R)Evolution - Sept 2011arendsf
 
Road to mobile w/ Sinatra, jQuery Mobile, Spine.js and Mustache
Road to mobile w/ Sinatra, jQuery Mobile, Spine.js and MustacheRoad to mobile w/ Sinatra, jQuery Mobile, Spine.js and Mustache
Road to mobile w/ Sinatra, jQuery Mobile, Spine.js and MustacheBrian Sam-Bodden
 
Prakash Narayan Building Social Web V1
Prakash  Narayan    Building  Social  Web V1Prakash  Narayan    Building  Social  Web V1
Prakash Narayan Building Social Web V1SOA Symposium
 
Social Business @ IBM Denmark October 2011
Social Business @ IBM Denmark October 2011Social Business @ IBM Denmark October 2011
Social Business @ IBM Denmark October 2011IBM Danmark
 
Enterprise 2.0 Summit 2009 Closing Keynote by Dion Hinchcliffe
Enterprise 2.0 Summit 2009 Closing Keynote by Dion HinchcliffeEnterprise 2.0 Summit 2009 Closing Keynote by Dion Hinchcliffe
Enterprise 2.0 Summit 2009 Closing Keynote by Dion HinchcliffeDion Hinchcliffe
 
Cross platform app a comparative study
Cross platform app  a comparative studyCross platform app  a comparative study
Cross platform app a comparative studyijcsit
 
4 Steps To Creating A Mobile Strategy
4 Steps To Creating A Mobile Strategy4 Steps To Creating A Mobile Strategy
4 Steps To Creating A Mobile Strategyrickross
 
Mobility testing day_1_ppt
Mobility testing day_1_pptMobility testing day_1_ppt
Mobility testing day_1_pptsayhi2sudarshan
 
Best cross platform app development frameworks for 2021
Best cross platform app development frameworks for 2021Best cross platform app development frameworks for 2021
Best cross platform app development frameworks for 2021Omega_UAE
 
4 steps to creating a mobile development strategy - White Paper - Appcelerator
4 steps to creating a mobile development strategy - White Paper - Appcelerator4 steps to creating a mobile development strategy - White Paper - Appcelerator
4 steps to creating a mobile development strategy - White Paper - AppceleratorRomain Fonnier
 
Why does .net maui deserve your attention if you’re planning to use xamarin
Why does .net maui deserve your attention if you’re planning to use xamarin  Why does .net maui deserve your attention if you’re planning to use xamarin
Why does .net maui deserve your attention if you’re planning to use xamarin Moon Technolabs Pvt. Ltd.
 
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGapBuilding Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGapNick Landry
 
Your Mobile Strategy Can't Be HTML5
Your Mobile Strategy Can't Be HTML5Your Mobile Strategy Can't Be HTML5
Your Mobile Strategy Can't Be HTML5Theresa Neil
 

Mais procurados (20)

The web phenomenon
The web phenomenonThe web phenomenon
The web phenomenon
 
Exploring the physical web
Exploring the physical webExploring the physical web
Exploring the physical web
 
Business opportunities in social media
Business opportunities in social mediaBusiness opportunities in social media
Business opportunities in social media
 
Open Source Design - FSOSS 2008
Open Source Design - FSOSS 2008Open Source Design - FSOSS 2008
Open Source Design - FSOSS 2008
 
The future of media queries?
The future of media queries?The future of media queries?
The future of media queries?
 
HTML5: The Code to Maximizing Revenue
HTML5: The Code to Maximizing RevenueHTML5: The Code to Maximizing Revenue
HTML5: The Code to Maximizing Revenue
 
Mobile Web (R)Evolution - Sept 2011
Mobile Web (R)Evolution - Sept 2011Mobile Web (R)Evolution - Sept 2011
Mobile Web (R)Evolution - Sept 2011
 
Road to mobile w/ Sinatra, jQuery Mobile, Spine.js and Mustache
Road to mobile w/ Sinatra, jQuery Mobile, Spine.js and MustacheRoad to mobile w/ Sinatra, jQuery Mobile, Spine.js and Mustache
Road to mobile w/ Sinatra, jQuery Mobile, Spine.js and Mustache
 
Prakash Narayan Building Social Web V1
Prakash  Narayan    Building  Social  Web V1Prakash  Narayan    Building  Social  Web V1
Prakash Narayan Building Social Web V1
 
Social Business @ IBM Denmark October 2011
Social Business @ IBM Denmark October 2011Social Business @ IBM Denmark October 2011
Social Business @ IBM Denmark October 2011
 
Enterprise 2.0 Summit 2009 Closing Keynote by Dion Hinchcliffe
Enterprise 2.0 Summit 2009 Closing Keynote by Dion HinchcliffeEnterprise 2.0 Summit 2009 Closing Keynote by Dion Hinchcliffe
Enterprise 2.0 Summit 2009 Closing Keynote by Dion Hinchcliffe
 
Cross platform app a comparative study
Cross platform app  a comparative studyCross platform app  a comparative study
Cross platform app a comparative study
 
4 Steps To Creating A Mobile Strategy
4 Steps To Creating A Mobile Strategy4 Steps To Creating A Mobile Strategy
4 Steps To Creating A Mobile Strategy
 
Mobility testing day_1_ppt
Mobility testing day_1_pptMobility testing day_1_ppt
Mobility testing day_1_ppt
 
Best cross platform app development frameworks for 2021
Best cross platform app development frameworks for 2021Best cross platform app development frameworks for 2021
Best cross platform app development frameworks for 2021
 
4 steps to creating a mobile development strategy - White Paper - Appcelerator
4 steps to creating a mobile development strategy - White Paper - Appcelerator4 steps to creating a mobile development strategy - White Paper - Appcelerator
4 steps to creating a mobile development strategy - White Paper - Appcelerator
 
Why does .net maui deserve your attention if you’re planning to use xamarin
Why does .net maui deserve your attention if you’re planning to use xamarin  Why does .net maui deserve your attention if you’re planning to use xamarin
Why does .net maui deserve your attention if you’re planning to use xamarin
 
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGapBuilding Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
 
Your Mobile Strategy Can't Be HTML5
Your Mobile Strategy Can't Be HTML5Your Mobile Strategy Can't Be HTML5
Your Mobile Strategy Can't Be HTML5
 
HTML5 / Mobile Web
HTML5 / Mobile WebHTML5 / Mobile Web
HTML5 / Mobile Web
 

Destaque

Amazon.com: the Hidden Empire - Update 2013
Amazon.com: the Hidden Empire - Update 2013Amazon.com: the Hidden Empire - Update 2013
Amazon.com: the Hidden Empire - Update 2013Fabernovel
 
Real Time Search and Analytics on Big Data
Real Time Search and Analytics on Big DataReal Time Search and Analytics on Big Data
Real Time Search and Analytics on Big DataRyan Tabora
 
Gluecon 2013 - Dark Architecture and How to Forklift Upgrade Your System - Dy...
Gluecon 2013 - Dark Architecture and How to Forklift Upgrade Your System - Dy...Gluecon 2013 - Dark Architecture and How to Forklift Upgrade Your System - Dy...
Gluecon 2013 - Dark Architecture and How to Forklift Upgrade Your System - Dy...Cory von Wallenstein
 
10 Ideas For The New Decade
10 Ideas For The New Decade10 Ideas For The New Decade
10 Ideas For The New DecadeDavid Armano
 
Building Software Systems at Google and Lessons Learned
Building Software Systems at Google and Lessons LearnedBuilding Software Systems at Google and Lessons Learned
Building Software Systems at Google and Lessons Learnedparallellabs
 
Keep calm and write CSS with Flexbox - Luz Maria Maida Claure (WTM - GDG - CBBA)
Keep calm and write CSS with Flexbox - Luz Maria Maida Claure (WTM - GDG - CBBA)Keep calm and write CSS with Flexbox - Luz Maria Maida Claure (WTM - GDG - CBBA)
Keep calm and write CSS with Flexbox - Luz Maria Maida Claure (WTM - GDG - CBBA)gdgsantacruz
 
Motion graphics pp
Motion graphics pp Motion graphics pp
Motion graphics pp linslondon
 
Build A Product June 09 version
Build A Product June 09 versionBuild A Product June 09 version
Build A Product June 09 versionLoic Le Meur
 
MURALI ARCHITECTS-Kongu College Presentation - Completed projects
MURALI ARCHITECTS-Kongu College Presentation - Completed projectsMURALI ARCHITECTS-Kongu College Presentation - Completed projects
MURALI ARCHITECTS-Kongu College Presentation - Completed projectsmurugan Murali
 
Módulo 1 – Ordens mundiais
Módulo 1 – Ordens mundiais Módulo 1 – Ordens mundiais
Módulo 1 – Ordens mundiais Silmara Vedoveli
 

Destaque (11)

Amazon.com: the Hidden Empire - Update 2013
Amazon.com: the Hidden Empire - Update 2013Amazon.com: the Hidden Empire - Update 2013
Amazon.com: the Hidden Empire - Update 2013
 
Real Time Search and Analytics on Big Data
Real Time Search and Analytics on Big DataReal Time Search and Analytics on Big Data
Real Time Search and Analytics on Big Data
 
Gluecon 2013 - Dark Architecture and How to Forklift Upgrade Your System - Dy...
Gluecon 2013 - Dark Architecture and How to Forklift Upgrade Your System - Dy...Gluecon 2013 - Dark Architecture and How to Forklift Upgrade Your System - Dy...
Gluecon 2013 - Dark Architecture and How to Forklift Upgrade Your System - Dy...
 
10 Ideas For The New Decade
10 Ideas For The New Decade10 Ideas For The New Decade
10 Ideas For The New Decade
 
Building Software Systems at Google and Lessons Learned
Building Software Systems at Google and Lessons LearnedBuilding Software Systems at Google and Lessons Learned
Building Software Systems at Google and Lessons Learned
 
OpenNLP demo
OpenNLP demoOpenNLP demo
OpenNLP demo
 
Keep calm and write CSS with Flexbox - Luz Maria Maida Claure (WTM - GDG - CBBA)
Keep calm and write CSS with Flexbox - Luz Maria Maida Claure (WTM - GDG - CBBA)Keep calm and write CSS with Flexbox - Luz Maria Maida Claure (WTM - GDG - CBBA)
Keep calm and write CSS with Flexbox - Luz Maria Maida Claure (WTM - GDG - CBBA)
 
Motion graphics pp
Motion graphics pp Motion graphics pp
Motion graphics pp
 
Build A Product June 09 version
Build A Product June 09 versionBuild A Product June 09 version
Build A Product June 09 version
 
MURALI ARCHITECTS-Kongu College Presentation - Completed projects
MURALI ARCHITECTS-Kongu College Presentation - Completed projectsMURALI ARCHITECTS-Kongu College Presentation - Completed projects
MURALI ARCHITECTS-Kongu College Presentation - Completed projects
 
Módulo 1 – Ordens mundiais
Módulo 1 – Ordens mundiais Módulo 1 – Ordens mundiais
Módulo 1 – Ordens mundiais
 

Semelhante a HTML5, How to rethink your web strategy

HTML5: Next Generation Web Development
HTML5: Next Generation Web DevelopmentHTML5: Next Generation Web Development
HTML5: Next Generation Web DevelopmentDipesh Mukerji
 
Webpage Design Using Templates and Online WYSIWYG Platforms
Webpage Design Using Templates and Online WYSIWYG PlatformsWebpage Design Using Templates and Online WYSIWYG Platforms
Webpage Design Using Templates and Online WYSIWYG Platformsshelanie oliquino
 
Fundamental of-web design-trends-20142
Fundamental of-web design-trends-20142Fundamental of-web design-trends-20142
Fundamental of-web design-trends-20142Ly Nguyen Bui
 
Website Overview
Website OverviewWebsite Overview
Website OverviewChanHan Hy
 
Front-End Web Development
Front-End Web DevelopmentFront-End Web Development
Front-End Web DevelopmentYash Sati
 
Over view of Technologies
Over view of TechnologiesOver view of Technologies
Over view of TechnologiesChris Mitchell
 
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptxLATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptxchitrachauhan21
 
web_dev_first_session.pptx
web_dev_first_session.pptxweb_dev_first_session.pptx
web_dev_first_session.pptxAyaBenkabbour1
 
10 Reasons to Adopt HTML5 for Mobile Apps
10 Reasons to Adopt HTML5 for Mobile Apps10 Reasons to Adopt HTML5 for Mobile Apps
10 Reasons to Adopt HTML5 for Mobile AppsDoug Robinson
 
10 Reasons to Adopt HTML5 for Mobile Apps
10 Reasons to Adopt HTML5 for Mobile Apps 10 Reasons to Adopt HTML5 for Mobile Apps
10 Reasons to Adopt HTML5 for Mobile Apps Fresh Digital Group
 
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeThe challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeCaridy Patino
 
Google chrome extensions
Google chrome extensionsGoogle chrome extensions
Google chrome extensionslillianabe
 
Annotated Bibliography On The Body Essay
Annotated Bibliography On The Body EssayAnnotated Bibliography On The Body Essay
Annotated Bibliography On The Body EssayAvis Malave
 

Semelhante a HTML5, How to rethink your web strategy (20)

HTML5: Next Generation Web Development
HTML5: Next Generation Web DevelopmentHTML5: Next Generation Web Development
HTML5: Next Generation Web Development
 
Webpage Design Using Templates and Online WYSIWYG Platforms
Webpage Design Using Templates and Online WYSIWYG PlatformsWebpage Design Using Templates and Online WYSIWYG Platforms
Webpage Design Using Templates and Online WYSIWYG Platforms
 
Low-Cost Digital Marketing Service in Nagpur | PSK Technologies
Low-Cost Digital Marketing Service in Nagpur | PSK TechnologiesLow-Cost Digital Marketing Service in Nagpur | PSK Technologies
Low-Cost Digital Marketing Service in Nagpur | PSK Technologies
 
PPT ON UI.pptx
PPT ON UI.pptxPPT ON UI.pptx
PPT ON UI.pptx
 
Fundamental of-web design-trends-20142
Fundamental of-web design-trends-20142Fundamental of-web design-trends-20142
Fundamental of-web design-trends-20142
 
Website Overview
Website OverviewWebsite Overview
Website Overview
 
Qnx html5 hmi
Qnx html5 hmiQnx html5 hmi
Qnx html5 hmi
 
Front-End Web Development
Front-End Web DevelopmentFront-End Web Development
Front-End Web Development
 
Sustainability and bit-rot
Sustainability and bit-rotSustainability and bit-rot
Sustainability and bit-rot
 
Over view of Technologies
Over view of TechnologiesOver view of Technologies
Over view of Technologies
 
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptxLATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
 
HTML5 and XHTML2
HTML5 and XHTML2HTML5 and XHTML2
HTML5 and XHTML2
 
web_dev_first_session.pptx
web_dev_first_session.pptxweb_dev_first_session.pptx
web_dev_first_session.pptx
 
10 Reasons to Adopt HTML5 for Mobile Apps
10 Reasons to Adopt HTML5 for Mobile Apps10 Reasons to Adopt HTML5 for Mobile Apps
10 Reasons to Adopt HTML5 for Mobile Apps
 
10 Reasons to Adopt HTML5 for Mobile Apps
10 Reasons to Adopt HTML5 for Mobile Apps 10 Reasons to Adopt HTML5 for Mobile Apps
10 Reasons to Adopt HTML5 for Mobile Apps
 
HTML 5 - A developers perspective
HTML 5 - A developers perspectiveHTML 5 - A developers perspective
HTML 5 - A developers perspective
 
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeThe challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
 
Google chrome extensions
Google chrome extensionsGoogle chrome extensions
Google chrome extensions
 
Annotated Bibliography On The Body Essay
Annotated Bibliography On The Body EssayAnnotated Bibliography On The Body Essay
Annotated Bibliography On The Body Essay
 
1_Intro_toHTML.ppt
1_Intro_toHTML.ppt1_Intro_toHTML.ppt
1_Intro_toHTML.ppt
 

Mais de Fabernovel

GAFAnomics Tesla Volume 2 - Is Tesla the disruptor we need?
GAFAnomics Tesla Volume 2 -  Is Tesla the disruptor we need?GAFAnomics Tesla Volume 2 -  Is Tesla the disruptor we need?
GAFAnomics Tesla Volume 2 - Is Tesla the disruptor we need?Fabernovel
 
Lancement de ReCOVery - Sortie de crise - Les nouveaux raisonnables
Lancement de ReCOVery - Sortie de crise - Les nouveaux raisonnablesLancement de ReCOVery - Sortie de crise - Les nouveaux raisonnables
Lancement de ReCOVery - Sortie de crise - Les nouveaux raisonnablesFabernovel
 
[Extract] Study - Talent KPIs
[Extract] Study - Talent KPIs [Extract] Study - Talent KPIs
[Extract] Study - Talent KPIs Fabernovel
 
Fabernovel analyse les tendances publicitaires du super bowl de 2020
Fabernovel analyse les tendances publicitaires du super bowl de 2020Fabernovel analyse les tendances publicitaires du super bowl de 2020
Fabernovel analyse les tendances publicitaires du super bowl de 2020Fabernovel
 
Amazon is eating the world
Amazon is eating the worldAmazon is eating the world
Amazon is eating the worldFabernovel
 
Gafanomics - Quarterly - Episode 4 (Q4FY19)
Gafanomics - Quarterly - Episode 4 (Q4FY19) Gafanomics - Quarterly - Episode 4 (Q4FY19)
Gafanomics - Quarterly - Episode 4 (Q4FY19) Fabernovel
 
Fabernovel study on SoftBank
Fabernovel study on SoftBankFabernovel study on SoftBank
Fabernovel study on SoftBankFabernovel
 
The new retail: apocalypse or new era?
The new retail: apocalypse or new era?The new retail: apocalypse or new era?
The new retail: apocalypse or new era?Fabernovel
 
L’aventure iOS - tvOS myCANAL
L’aventure iOS - tvOS myCANALL’aventure iOS - tvOS myCANAL
L’aventure iOS - tvOS myCANALFabernovel
 
WeChat Social Ads Playbook
WeChat Social Ads PlaybookWeChat Social Ads Playbook
WeChat Social Ads PlaybookFabernovel
 
[Extract] Study The We Company: is real estate a disruptable industry?
[Extract] Study The We Company: is real estate a disruptable industry?[Extract] Study The We Company: is real estate a disruptable industry?
[Extract] Study The We Company: is real estate a disruptable industry?Fabernovel
 
Insight Report by Fabernovel - The Hidden consumption force of Overseas Chine...
Insight Report by Fabernovel - The Hidden consumption force of Overseas Chine...Insight Report by Fabernovel - The Hidden consumption force of Overseas Chine...
Insight Report by Fabernovel - The Hidden consumption force of Overseas Chine...Fabernovel
 
Study Ardian & Fabernovel - The Augmented Infrastructure: Digital for climate?
Study Ardian & Fabernovel - The Augmented Infrastructure:  Digital for climate?Study Ardian & Fabernovel - The Augmented Infrastructure:  Digital for climate?
Study Ardian & Fabernovel - The Augmented Infrastructure: Digital for climate?Fabernovel
 
Services urbains : faut il vraiment penser utilisateur ?
Services urbains : faut il vraiment penser utilisateur ?Services urbains : faut il vraiment penser utilisateur ?
Services urbains : faut il vraiment penser utilisateur ?Fabernovel
 
[Fabernovel study] New economy, new KPI: the customer era
[Fabernovel study] New economy, new KPI:  the customer era[Fabernovel study] New economy, new KPI:  the customer era
[Fabernovel study] New economy, new KPI: the customer eraFabernovel
 
Gafanomics - The Quarterly - Episode 2 (Q2FY19)
Gafanomics - The Quarterly - Episode 2 (Q2FY19)Gafanomics - The Quarterly - Episode 2 (Q2FY19)
Gafanomics - The Quarterly - Episode 2 (Q2FY19)Fabernovel
 
The Future of Corporate Learning: from Training to Learning Experience
The Future of Corporate Learning: from Training to Learning ExperienceThe Future of Corporate Learning: from Training to Learning Experience
The Future of Corporate Learning: from Training to Learning ExperienceFabernovel
 
Gafanomics - The Quarterly - Episode 1 (Q1FY19)
Gafanomics - The Quarterly - Episode 1 (Q1FY19)Gafanomics - The Quarterly - Episode 1 (Q1FY19)
Gafanomics - The Quarterly - Episode 1 (Q1FY19)Fabernovel
 
Vers une nouvelle ère de vos expériences
Vers une nouvelle ère de vos expériencesVers une nouvelle ère de vos expériences
Vers une nouvelle ère de vos expériencesFabernovel
 
Slack, the future workplace
Slack, the future workplaceSlack, the future workplace
Slack, the future workplaceFabernovel
 

Mais de Fabernovel (20)

GAFAnomics Tesla Volume 2 - Is Tesla the disruptor we need?
GAFAnomics Tesla Volume 2 -  Is Tesla the disruptor we need?GAFAnomics Tesla Volume 2 -  Is Tesla the disruptor we need?
GAFAnomics Tesla Volume 2 - Is Tesla the disruptor we need?
 
Lancement de ReCOVery - Sortie de crise - Les nouveaux raisonnables
Lancement de ReCOVery - Sortie de crise - Les nouveaux raisonnablesLancement de ReCOVery - Sortie de crise - Les nouveaux raisonnables
Lancement de ReCOVery - Sortie de crise - Les nouveaux raisonnables
 
[Extract] Study - Talent KPIs
[Extract] Study - Talent KPIs [Extract] Study - Talent KPIs
[Extract] Study - Talent KPIs
 
Fabernovel analyse les tendances publicitaires du super bowl de 2020
Fabernovel analyse les tendances publicitaires du super bowl de 2020Fabernovel analyse les tendances publicitaires du super bowl de 2020
Fabernovel analyse les tendances publicitaires du super bowl de 2020
 
Amazon is eating the world
Amazon is eating the worldAmazon is eating the world
Amazon is eating the world
 
Gafanomics - Quarterly - Episode 4 (Q4FY19)
Gafanomics - Quarterly - Episode 4 (Q4FY19) Gafanomics - Quarterly - Episode 4 (Q4FY19)
Gafanomics - Quarterly - Episode 4 (Q4FY19)
 
Fabernovel study on SoftBank
Fabernovel study on SoftBankFabernovel study on SoftBank
Fabernovel study on SoftBank
 
The new retail: apocalypse or new era?
The new retail: apocalypse or new era?The new retail: apocalypse or new era?
The new retail: apocalypse or new era?
 
L’aventure iOS - tvOS myCANAL
L’aventure iOS - tvOS myCANALL’aventure iOS - tvOS myCANAL
L’aventure iOS - tvOS myCANAL
 
WeChat Social Ads Playbook
WeChat Social Ads PlaybookWeChat Social Ads Playbook
WeChat Social Ads Playbook
 
[Extract] Study The We Company: is real estate a disruptable industry?
[Extract] Study The We Company: is real estate a disruptable industry?[Extract] Study The We Company: is real estate a disruptable industry?
[Extract] Study The We Company: is real estate a disruptable industry?
 
Insight Report by Fabernovel - The Hidden consumption force of Overseas Chine...
Insight Report by Fabernovel - The Hidden consumption force of Overseas Chine...Insight Report by Fabernovel - The Hidden consumption force of Overseas Chine...
Insight Report by Fabernovel - The Hidden consumption force of Overseas Chine...
 
Study Ardian & Fabernovel - The Augmented Infrastructure: Digital for climate?
Study Ardian & Fabernovel - The Augmented Infrastructure:  Digital for climate?Study Ardian & Fabernovel - The Augmented Infrastructure:  Digital for climate?
Study Ardian & Fabernovel - The Augmented Infrastructure: Digital for climate?
 
Services urbains : faut il vraiment penser utilisateur ?
Services urbains : faut il vraiment penser utilisateur ?Services urbains : faut il vraiment penser utilisateur ?
Services urbains : faut il vraiment penser utilisateur ?
 
[Fabernovel study] New economy, new KPI: the customer era
[Fabernovel study] New economy, new KPI:  the customer era[Fabernovel study] New economy, new KPI:  the customer era
[Fabernovel study] New economy, new KPI: the customer era
 
Gafanomics - The Quarterly - Episode 2 (Q2FY19)
Gafanomics - The Quarterly - Episode 2 (Q2FY19)Gafanomics - The Quarterly - Episode 2 (Q2FY19)
Gafanomics - The Quarterly - Episode 2 (Q2FY19)
 
The Future of Corporate Learning: from Training to Learning Experience
The Future of Corporate Learning: from Training to Learning ExperienceThe Future of Corporate Learning: from Training to Learning Experience
The Future of Corporate Learning: from Training to Learning Experience
 
Gafanomics - The Quarterly - Episode 1 (Q1FY19)
Gafanomics - The Quarterly - Episode 1 (Q1FY19)Gafanomics - The Quarterly - Episode 1 (Q1FY19)
Gafanomics - The Quarterly - Episode 1 (Q1FY19)
 
Vers une nouvelle ère de vos expériences
Vers une nouvelle ère de vos expériencesVers une nouvelle ère de vos expériences
Vers une nouvelle ère de vos expériences
 
Slack, the future workplace
Slack, the future workplaceSlack, the future workplace
Slack, the future workplace
 

Último

UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxYounusS2
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataSafe Software
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServiceRenan Moreira de Oliveira
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 

Último (20)

UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptx
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 

HTML5, How to rethink your web strategy

  • 1. HTML5, how to rethink [ your web strategy ] licensed using creative commons
  • 2. Table of contents Introduction Part I HTML5, the web evolution p.4 Introduction to How Web Pages Work The perpetual evolution of HTML HTML5: buzzword ou real disruption ? HTML5 vs HTML4: what does it hold? The state of art • Which browsers and operating systems are the most compatible with HTML5? • What are the most used web and mobile browsers in the World ? Part II Native applications : threatened by the web mobile ? p.20 Applications model, although dominating the mobile market… …Is presently questioned HTML5 in the service of mobility: strenghs and issues • The websites in HTML5 can do much better than native applications • The distribution of mobile websites Part III Mobile vs Native applications p.25 Technical and functional confrontation Two design strategies that lead to different user experiences The big issues related to project development Decision matrix: what to do in any case ? • Website vs native applications ? • What about hybrid applications ? Partie IV Our recommendation p.37 Which solutions fit for each type of application ? • Games and Entertainment • Media, News and Information • Social networking • Traveling and maps • Utilities (reservation, e-shopping, bank transaction) • Multimedia Synthesis
  • 3. Introduction HMTL5 signs the revival of the web: mobility, interactivity and openness. Inspired by native applications’ success on connected devices, HTML5 new features provide developers with solutions to create more easily and quickly richer mobile experience: touch, disconnected mode, audio and video, use of the device’s GPS and camera. But HTML5’s vocation is not only to offer an alternative to native applications and closed ecosystems such as  iOS or Android: it is, more broadly, to provide answers to those who want to streamline their digital multi- platform strategy, without putting aside stores like App Store or Google Play Store. This study aims to provide companies wishing to develop digital products with: • An overview of HMTL5 new features; • A simple analysis of latest trends in web development, mobile, tablet and smart TV; • A decision grid that will allow for each project, whether single platform or multi-platform, to determine the best development strategy possible. ................................................................................................................................................................. ........... Note: Parts 1.1 and 1.2. of this document present basic elements to understand HTML5 issues. Readers already familiar with web technologies and more precisely HTML5, are invited to proceed directly to Part 1.3.
  • 4. faberNovel ••• 4
  • 5. [I] HTML5, the evolution of the web • Introduction to How Web Pages Work • The perpetual evolution of HTML • HTML5 : buzzword ou real disruption ? • HTML5 vs HTML4 : what is the advantage? • The state of art faberNovel ••• 5
  • 6. Introduction to How Web Pages Work A web page is a collection of text, images, multimedia objects, files and programs scattered over the web. Programming languages can be separated into two categories: Web standards Flash, Silverlight, etc.. = Proprietary technologies Flash and Silverlight scripting languages are often The HTML page defines all elements of the used to manage the behavior of multimedia content, page, and indicates where to find them and how such as videos, animations, 3D objects, etc. they fit together with each other. This is the basic component that determines the structure of most These technologies are standardized because they web pages. originate from a single vendor, who dictates the writing standards and provides tools to interpret them The CSS of a page is a document that defines the perfectly. visual appearance of each element: text font, color windows, border width, location of items, etc. Example: Flash is published by Adobe. In order to read a Flash script, a browser must be equipped with JavaScript is the most common scripting language the plug-in (a piece of software that “branches” on that is executable by a browser. It is the most the browser to increase capacity). Flash Player is common choice for managing the behavior of the edited and released only by Adobe. different “buttons” of a web page, text fields, etc. A web browser is software (which can be installed on a computer, mobile device, SmartTV, video game These languages are ‘basic’ web languages, console, etc.) that is able to read HTML and CSS to supported by all browsers. They do not belong to display all the website’s elements on the screen. You any company and therefore are likely to change are probably using one of the following browsers: depending on the uses and needs of the developer community. International organizations like W3C • Internet Explorer and ECMA are in charge of establishing writing standards and promoting them via a set of regularly • Firefox published recommendations. Each website editor • Chrome and web browser is free to adopt them, or create • Safari new ones. Usually, what we refer to as HTML is actually the trio of HTML + CSS + JavaScript, • Opera since these languages are very closely related. In this study we will adopt this usage. Most websites are not static: the behaviour of some elements may vary depending on user actions. The way these dynamics elements behave is described by scripts, that is to say, mini-programs inserted into the HTML and executed directly in the browser. A web app is a special type of website that provides a service directly accessible through the user’s browser e.g. webmail, search engine, wiki, blog, etc.
  • 7. Elements’ position, the background color of the header, fonts, titles, etc. are described thanks to CSS. The texts, menus, sections, etc. are described within the HTML code. The dynamic behavior of the “Les Videos” after clicking the scroll arrows is described by a JavaScript code. Figure 1 Structure of France TV Info website’s home page. faberNovel ••• 7
  • 8. The perpetual evolution of HTML The developer community constantly creates new HTML features. But before reaching end users, these features must go through four levels of adoption : Use by Testing by the Implementation W3C‘s mass-market developer community on mainstream recommendation website publishers browsers Figure 2 Main stages of the process of integrating new features of HTML W3C continuously publishes new recommendations to ensure that browsers work together correctly: the organization encourages browser developers to implement new features and meet the same standards to facilitate the work of web developers. Sometimes, when W3C believes that the new features being developed and tested represent a significant advance for the web, it decides to announce a new version of HTML. We must understand that there is no ORIGINAL HTML version: each website and browser incorporates the newest HTML features at its own pace and according to its own terms. Today, the official version recommended by the W3C is HTML4. HTML5 is still “being specified,” even though many websites and browsers worldwide support HTML5 features.
  • 9. HTML5 : buzzword or real disruption ? HTML‘s new features, already developed and implemented in major browsers or Figure 3 HTML5 : the future of the still under development, gathered under the “HTML5” label, inspire the enthusiasm web ? of web developers because they can easily reproduce features that were previously handled by proprietary technologies. HTML5 vs Flash HTML5 vs native applications • HTML5 allows the integration video and audio tracks in a web Many features of HTML5 mimic native pages without using Flash. Thus, applications’ behaviour on connected multimedia contents can be read devices: by a browser without any plug-in in • The ability to use hardware device particular.. elements within the web page: camera, • HTML5 can incorporate animations microphone, keypad, GPS, etc. and dynamic 2D elements (and soon • Optimization of web page elements for 3D) without using Flash. In particular, multitouch interfaces it is possible to create games entirely in HTML5. This is definitely • Data storage on the device to operate a revolution because most online the web page offline or for automatic games are based on Flash or other data logging or user preferences storage proprietary technologies. • Optimization of the web page display depending on screen size These are the reason why more and more developers are considering developing websites accessible via mobile browsers rather than native applications.
  • 10. 1.4 HTML5 vs. HTML4: what is the advantage? Recently, new features have appeared for HTML: new tags have been released, and obsolete ones removed from version 4.0. Here are the main features included in the fifth version of HTML: The webdesign revolution • Formatting is now clearly handled by CSS in a web page • The web page structure has been simplified with pre-formatted tags for titles, top, footer, sections, etc. This new structure common to all websites promotes accessibility and allows, among others, speech synthesizers and people with visual disabilities to identify content more easily • Improvement of graphic performance: API “canvas,” new and more compact fonts, integration of images in vector format A few examples of new features recently available or soon to be available through HTML5: Animations within a page New filters and CSS animations for unique lay- outs Today, HTML5 allows the integration of 2D animations on a web page without having to use Flash. The next expected step will be to also incorporate 3D animations. Figure 4 Example: the luminous lines are drawn by following the path of the mouse on the screen, they move in and fade progressively. Figure 5 CSS animation example: the text is aligned with the contours of the car as it moves across the page
  • 11. A richer user experience • More interaction possible for the user: complete an online application, use “drag and drop” functionality, load files from your own computer to the web, geolocation, edit or modify a web page or only certain parts, highlight the words found in the page when searching • Integration of rich media: embed video or audio clips Interaction with the microphone Speak and your browser reacts. This feature will soon facilitate web browsing for people with visual disabilities. Interaction with the webcam Now you can take photos directly within a webpage. Moreover, online video chat will soon be possible, without downloading any additional application. Figure 6 Example of interaction with the microphone: When making noise in front of the computer, the balls start to jump on the screen. Figure 7 Example of interaction with the webcam: you can take pictures and add special filters or effects. faberNovel ••• 11
  • 12. Interaction with the mouse When moving the mouse on your screen, you can animate objects. This feature enriches the browsing experience, making it more graceful, with among others the creation of drawing interfaces on the internet. Video games fully playable online Relatively advanced games directly accessible from a browser already exist. But, soon a joystick will directly control the action of the mouse on the web page. Figure 8 Drawing made using the mouse in a web page Figure 9 The famous Snake game entirely developed in HTML5 Figure 10 Illustration of a game in HTML5, piloted by a joystick faberNovel ••• 12
  • 13. An efficient mobile experience Optimized for responsive design development, data storage during the page initialization in order to allow offline navigation. Other features • Detecting the user’s status : is he connected to Wifi, 3G, the 4G? Functions of what’s detected, the contents of the page fits and gives you the best experience. • Detection of the user’s action: If he watches a video in a tab, the video will automatically pause if he goes to another tab, and will recover only when he returns to the the right tab. • Full Screen: the browser will switch to “full screen” simply by typing the key “f”. These features already exist on all browsers tests (such as Chrome Canary) or the latest versions of web browsers. Soon, the majority of people will have access, which will allow to imagine new experiences and use of the web. Remember: HTML5 is not a brand new technology: it only consists in all the latest features of HTML, a language that is constantly evolving. These latest features are a real step forward for HTML and the web in general because they help make sites more beautiful, more complex and better adapted to new media online. faberNovel ••• 13
  • 14. 1.5 The state of art Which browsers and operating systems are the most compatible with HTML5? HTML 5 is not equaly supported by all browsers: while some of them incorporate the latest innovations proposed by the developer community, others are “late”. The following figures present a classification of different browsers and their compatibility with HTML5. The score is obtained on a total of 500 established from the 500 latest features of HTML. Web Browsers Browsers listed below are stable browsers widely used. HTML5 may get a higher score on versions of unstable browsers under development, but not used by the mass-market. We can note the bad position of Internet Explorer, far behind other browsers that integrate rather well HTML5. Score Maxthon 3.4.1 422 Chrome 20 414 Figure 11 Opera 12.00 385 Score (out of 500) of the 6 Firefox 13 345 browsers compatible with HTML5. Safari 5.1 317 Internet Explorer 9 138 Source http://html5test.com/ What happens when a HTML functionality (eg a video in HTML5) is not recognized by the browser? Three possibilities: • Nothing happens: the video does not start • The animation has been damaged: the sound and the image of the video are shifted • You do not realize anything: developers have recourse to a “fall back” version of their site. On browsers that read the HTML5 functionality, everything will be in HTML5, on the other, they will bypass the problem by incorporating a piece of Flash or Silverlight example.
  • 15. Smartphones OS Opera, Firefox et Safari sont très bons, mais les autres sont encore à la traîne, notamment Android, BlackBerry et Nokia. On a mobile, web browsing is done on a browser that is directly associated with the OS version used by the mobile : Safari for iOS, Android for Android, etc.. Other mobile browsers have also developed independently, and settled slowly on the market: Opera, Firefox, etc. On mobile, scores are generally poorer than with a standard Web browser, because they do not include yet the latest features of HTML5. Opera, Firefox and Safari are very good, but the others are still lagging behind, including Android, BlackBerry and Nokia. Score RIM Tablet OS 2.0 Blackberry Playbook 373 Chrome All Android 4 devices 371 Opera Mobile 12.00 Multiple platforms 369 Firefox Mobile 10 Multiple platforms 325 Figure 12 Score (out of 500) of 8 IOS 5.1 Apple iPhone, iPad and iPod Touch 324 Smartphones OS allowing the best compatibility with Android 4.0 Asus Transformer Prime and others 280 HTML5 features. WebOS 3.0 HP TouchPad 217 Source Silk 1.0 Amazon Kindle Fire 174 http://html5test.com/ faberNovel ••• 15
  • 16. Tablets OS The tablet market being new, browsers are fewer. As we see in the mobile market, Opera, Firefox and IOS are ahead about HTML5, while Android is hard to follow developments. However, we note the relatively good performance of RIM BlackBerry Tablet. Score Chrome All Android 4 devices 371 Opera Mobile 12.00 Multiple platforms 369 Firefox Mobile 10 Multiple platforms 325 IOS 5.1 Apple iPhone, iPad and iPod Touch 324 MeeGo/Harmattan Nokia N9 and N950 284 Android 4.0 Samsung Galaxy Nexus 280 Blackberry OS7 Blackberry Bold 9900 and others 273 Bada 2.0 Samsung Wave and others 268 Nokia Belle FP1 S60 5.4 Nokia 603, 700 and 701 226 Figure 13 Score (out of 500) of the 12 webOS 2.2 Palm Pre 2 and HP Pre 3 210 tablet’s OS allowing the best compatibility with HTML5 Android 2.3 Google Nexus S and others 189 features. Windows Phone 7.5 Samsung Omnia, W, LG E906 and 138 Source others http://html5test.com/ As we have seen, HTML is constantly changing and different browsers try to adapt to these changes. Even if they’re not at the same point today, all are making efforts to follow the W3C standard: free browsers such as Firefox or Chrome have attracted more HTML developers providing researchers unstable versions of their browser (Firefox 14, Chrome Canary) to enable them to test new HTML features. They are therefore better placed than Internet Explorer, but all that is changing very rapidly. faberNovel ••• 16
  • 17. Smart TV Finally, on Smart TV market, browsers are a less efficient than on mobile and tablets market. Indeed, this emerging market still concern few users. The scores are tighter, with four leaders above 300 (60% of HTML5 features compatible): Sharp Aquos TV Googe, NetTV Philips and Toshiba. Samsung, LG and Sony to follow shortly. Score Sharp Aquos Espial 6.05 Sharp Aquos televisions 342 GoogleTV Sony Internet TV, LOgitech Revue and others 328 Philips NetTV Opera Devices 3.2 Philips televisions 325 Toshiba Espial 6.04 Toshiba L7200 televisions 310 Samsung Smart TV 2012 Samsung televisions 286 LG NetCast 2012 LG televisions 282 Sony Internet TV Opera Devices 3.1 Sony televisions and Bluray players 275 Sharp Aquos Opera Devices 3.0 Sharp Aquos televisions 236 Boxee Boxee Box by D-Link, Iomega TV wit... 214 Panasonic Smart Viera Panasonic Viera televisions 214 Figure 14 Score (out of 500) of the 10 Smart TV OS allowing the best compatibility with HTML5 Source http://html5test.com ................................................................................................................................................................. ........... Note: An exhaustive list of web and mobile browsers is available at this following link: http://fr.wikipedia.org/wiki/Liste_de_ navigateurs_Webdes faberNovel ••• 17
  • 18. What are the most used web and mobile browsers in the World ? World’s population’s access to the latest features of HTML5 is still low. Web browsers Worldwide, only 33,9% of Internet users have a desktop browser that supports more than 80% of the current features of HTML5. This is the part of users of Chrome. However, still 31,8% of Internet users are using Internet Explorer 9, which includes only 27,6% of the current features of HTML5. Percentage of browsers compatible with HTML5   Percentage of use by browsers in the World, July 2012 100% 82,8% 77% 69% 63,4% Three giants of web browsers: Chrome, Firefox and Internet 34% Explorer. 32% 27,6% 24% Internet Explorer 9.0 is still widely used whereas it only 7% includes 27,6% of the current 3% features of HTML5 0% Safari (web browser installed by default on Apple computers) is 20 9 13 5.1 12.00 struggling to take off but is still behind the big three Figure 15 HTML5 compatiblity pourcentage of most popular web browsers worldwidly used. Source http://gs.statcounter.com/ faberNovel ••• 18
  • 19. Mobile browsers Worldwide, only 60% of Internet users have a mobile browser that supports more than 50% of HTML5 current features. And only 20% of Internet users have a mobile that supports more than 70% of HTML5 current features. This ratio corresponds to Opera Mobile’s users, which is the only mobile browser exceeding 70% compatibility with the current features of HTML5. Percentage of mobile browsers compatible with HTML5   Percentage of use by mobile browsers in the World, July 2012 100% 73,8% 64,8% 56% 54,6% 51,2% 23% 21% 20% Other mobile browsers 4,5% are struggling to 10% emerge. 0% At European level, BlackBerry and Opera stand out in the race. 4.1 iPhone Opera Belle Black- Two giants in the IOS 5.1 mobile FP2 berry market: iPhone and 12.00 OS7 Android. Figure 16 HTML5 compatiblity pourcentage of most popular mobile browsers worldwidly used. Source http://gs.statcounter.com/ faberNovel ••• 19
  • 20. What to remember Worldwide population is still under equipped to use websites that support advanced features of HTML5. An application publisher who wishes to make its website reachible for must people must take care not to use today’s most advanced HTML5 features, or in this case to propose systematicaly a fall back * for these features. ................................................................................................................................................................. ........... * Reminder: A fall back is a “copy” of an HTML5 feature developed with other more common technologies (JavaScript, Flash, Silverlight, etc.) so that users of less compatible browsers can still make the most of this feature (sometimes in a degraded version). faberNovel ••• 20
  • 21. [II] Native applications : threatened by the web mobile ? • Applications model, although dominating the mobile market • …Is presently questioned • HTML5 in the service of mobility : strenghs and issues faberNovel ••• 21
  • 22. Applications model, although dominating the mobile market… The applications model, popularized by Apple, works so well so far that all the mobile platforms have adopted it. Why the application model has it imposed on smartphones? On the users’ side: • Saves time for access to content and services: Mobile connectivity are generally not as fast as fixed connectivity. The web search may take time. Mobile applications avoid this problem since they are a point of immediate access to favorite services of the user. • Improved performance: While a web site must be fully loaded at each visit in the browser via the Internet, an application can load some of the features and content “hard”, directly to the phone. This reduces the bandwidth requirements to use the service properly. • Better integration of hardware features: Because the application is developed specifically for a platform and a device type, it can make better use of the equipment of this unit: use of camera, integrated GPS, value for money storage or use of the processor, etc.. • Graphical effects and interactions richer: These items are managed locally in the phone, not online as a website. On the publishers’ side: • A means of effective distribution of their service: On the blinds type applications App Store, all applications are referenced, presented the same way and easily downloadable. This is a radical departure from web sites which depend on their ranking in search engines (especially Google). • Monetization’s outlook more interesting: The distribution system designed by Apple encourages the creation of content and services with high added value, for which it is easier to charge the user. faberNovel ••• 22
  • 23. On the platforms’ side (iOS, Android, Blackberry, Windows Phone, etc.) : • A way to keep control on the ecosystem: Apple, Google, etc.. set the rules on their platforms to ensure their users a certain level of quality and consistency of the experience when they use applications. • A new source of revenue: Thanks to stores applications, Apple, Google etc. control of the supply chain of applications and can afford to take a commission on sales of each application and each transactions within applications. faberNovel ••• 23
  • 24. …Is presently questioned The applications’ ecosystem, which helped restore value to services and content that had trouble finding a viable business model on the web (dominated by the free), also have disadvantages for publishers: • A loss of control over their service in favor of mobile platforms • Loss of money related to the commission taken by the platforms at each application and sale of each transaction within the application • A loss of efficiency (which translates into loss of money), because each platform requires to develop a specific application in a specific language, which may require the intervention of a specific provider. • No contribution from the open source community • Very little connection between applications that remain closed objects • Poor management of display advertising, generally less contextualized and personalized than on the web Despite these drawbacks, the editors do not really have an alternative: • In its current state, HTML5 does not compete with native applications. • The use of native applications has become a reflex for users. On connected devices, the use of browsers to access services and to view information remains marginal The first point is about to be solved thanks to the new HTML 5 features : soon it will be possible for certain types of services, to make websites that work equally well (or almost as well) on mobile browser that a native application. This is only a matter of months or years (see Part III of the note). The second point is more delicate : applications offer a way more fluid experience and is truly entrenched in practice. Therefore, so that users begin to use websites on their connected devices, these websites will have to do much better than native applications in certain areas.
  • 25. HTML5 in the service of mobility : strenghs and issues The websites in HTML5 can do much better than native applications Restore the link between services Unlike native applications, websites are much more open and interconnected. It is easier to create complex links between two websites than between two applications. A continuous improvement process The updating process of a native application is long, especially because it involves monitoring the application by the operator of the platform (Apple’s App Store for example). The frequency of updates is limited. On the contrary, a website can be updated as often as its publisher wants. The distribution of mobile websites The referencing and distribution model on stores applications is the key of mobile applications’ success. Mobile users find applications that they need immediately on their home screen, without using a web search engine. The challenge HTML5 publishers face is to provide users an easy access on mobile and other connected devices. Two tracks to consider: • Communicate and encourage users to create shortcuts to HTML sites on the home screen of their device. • Take advantage of the emergence of “universal stores” listing both native applications and sites in HTML. The most promising universal store is certainly the Facebook App Center, which can tap into the power of its 900 million Facebook users and its viral power. faberNovel ••• 25
  • 26. [III] VS Mobile vs Native application • Technical and functional confrontation • Two design strategies that lead to different user experiences • The big issues related to project development • Decision matrix: what to do in any case ? faberNovel ••• 26
  • 27. Technical and functional confrontation Today, native applications can deliver a better experience for users: graphics performance, ergonomics, interactions. However, HTML begins to integrate efficient tools little by little to complete those functionnalities. It only needs a mobile browser to set HTML5 technolo Website (= web app) Native application Graphics rendering Progress is underway thanks to CSS Graphic rendering of high quality, and HTML evolutions but not yet especially for 3D. integrated on mobile browsers. Animations Ability to make 2D animations in Greater computing power for 2D and some browsers but not on mobile. So 3D animations, which allows to create far impossible to make 3D animations games, immersive experiences, etc. .. without the Flash plug-in on the web Access to the device's Possible on the latest browsers, but Yes camera they are still not available on mobile. Access to the devices' Possible on the latest browsers, but Yes microphone they are still not available on mobile. Access to the device's Yes, Yes geolocation feature Using notifications Push notifications to the home Yes from the application screen are impossible from an HTML to the Home screen of website. Developers are working on the device it. Advanced user / Possibility to browse like on the web: Possibility to use the accelerometer machine interactions" scrolling, clicking, etc. With HTML5, to interact with the device: shaking, microphone interaction is coming flipping, tilting, etc.. soon on mobile browsers. Offline operation Possible with HTML5 but not Yes necessarily the most popular browsers. User account Yes. Yes (e-commerce, social networks ...) Video embedding Possible with HTML5 Yes, with the device's native player Games Limited to 2D graphics experiences, 3D design and innovative and “movement and mouse click” interactions: tilt, shake … actions. Application / web site Within the web browser, or from an From an icon on the home screen access icon on the device's home screen (shortcut to the website) Continued on next page>
  • 28. Site web (= web app) Application native Download of the From the matching web site or from a From the matching Store : AppStore, application web application platform. Androïd Market, etc. Application Only if an account registration and The application can be easily personnalisation differentiation of various profiles are customized from the "settings": provided. access to location data, notifications, etc.. E-commerce Possible via websites like PayPal Possible directly with the user's easily embeddable into a webapps. account on the platform. Links to other services Easy navigation from one page to Applications communicate very little another within the browser. between them. Share on social With one click if the the social Possible if built within the application networks network's API or widget is added to the site. Figure 17 Comparaison des possibilités techniques et fonctionnelles entre un site web et une application native faberNovel ••• 28
  • 29. Two design strategies that lead to different user experiences eBay’s case eBay is an auction site created online by the end of 1990: since then it has become the industry standard for e-commerce. More than 270 million users buy and sell all kinds of objects on this platform. And yet, eBay is particularly difficult to use: the information is hard to find, poor ergonomics, etc. At first its bad design was not glaring, but it became so in 2007 with the launch of the eBay application for iPhone, followed later by the launch of the eBay application for iPad. Indeed, the mobile and tablet versions are far more simple and faster to use. Why such a difference? • Developing a website allows greater freedom of design, sometimes - as is the case for eBay - to the detriment of the quality of user experience. • On the contrary, an iPhone application is developed from existing ergonomic bricks and is designed for a small size screen which forces them to Basics. Figure 18 Comparison of Ebay website and Smartphone application faberNovel ••• 29
  • 30. What to remember: Lack of freedom and OS constraints encourage developers to optimize both the user interface and the ergonomics of the application, which will also be assessed and confirmed by the corresponding Store before being put online. Therefore, this requirement promotes quality. As a side effect, some suggest adopting a “mobile first design strategy.” Mobile development requirements being more restrictive (small screen, often low connectivity, use the move, etc..), and is indeed a very good starting point for designing a simple, clear and effective service. Designed after the native application, the website will therefore benefit from its broad principles of design and ergonomics. For a HTML5 website, it is recommended to start designing the mobile experience: what information and features are essential to highlight? How to simplify the user path? Etc.. faberNovel ••• 30
  • 31. The big issues related to project development The board below brings to light how HTML website development is simpler to implement than a native application. HTML being older, there are more skilled developers. Furthermore, the technology is quite stable, easy to spread and update. Website (= web app) Native application Human resources A provider or intern resources for the Most of the time, an OS specialized development development. Intern resources are provider must be hired, even for given priority to for maintenance and maintenance. update. Indeed HTML is a well and long-time known language, many companies have built a web division. Availability of skilled HTML5 development requires Many skilled developers for most developers very good web skills: last trends common platforms (iOS and Android) knowledge, responsive design but rarer and more expensive for mastering, APIs, best practices for other platforms. CSS, etc.. HTML5 developers are rarer and more expensive than the average web developers. Overall costs of Only one site (in responsive design) A developer specialized in each development to develop for all platforms. platform for each application. Update and Performed by the developer, Performed by the developer, and maintenance automatically synchronized on the manual downloading of the new web. version of the application: which is more painful for the user. Privacy code The code is open (HTML) The code is kept confidential Development time Only the time required for software Longer because the application must development. Possibility of rapid be assessed and validated by the prototyping. corresponding store. Screen Resolution "Possible use of responsive design Each screen size matches with a which adapts contents to the screen different and specifically developed orientation.It also allows developers application. to build one application and have it scale up and down to all the different screen sizes and resolutions.” Design and Entirely free Standards are imposed by the appearance corresponding OS Figure 19 Website development vs Native application development
  • 32. Relating to the business models applied, each technology has its own : • HTML is an open model: no quality control, free service (mostly at least), universality of reading materials, online distribution and referencing • The native model is a highly in demand model : each conected device has its own application. Applications are assessed and validated before being distributed on a Store which facilitates their distribution in compensation of cost for the publisher. Users are willing to pay for this quality. Website (=web app) Native applications Ranking Like any website, web apps are No web ranking, but only on the ranked on search engines like device's appropriate Store. There are Google. They can also be found on only compatible applications with the web applications Stores. device used, which simplifies users' experience. Monetization, Advertising and monetization control You must go through Stores to advertising according to the web page you add an ad on an application. The visited. ad is not necessarily related to the application's theme. Interoperability An HTML website can be read from An application developed for one any devices: smartphone, tablet, ... device can not be read from another. and reach a maximum number of It aims a single category of users. users. Sale A web application is usually available A native application is available on for free, it's a website. Stores, free or not, which takes 30% of Distribution No special mean of distribution, Through a Store such as the App except search engines' ranking Store or Android Market, allowing to benefit from the platform's image. However, the Store is the only one mastering the application's visibility (only the first 50 really successful). Change over to the The web will always exist, We do not know which platform context using HTML W3C standards' will dominate the market in the recommandations. HTML language is coming years: the rise of Android a sustainable solution. and Samsung against Apple ... Developing native application compatible with today's dominant platform does not guarantee success for the future . Figure 20 Functional and technical differences between a website and a native application faberNovel ••• 32
  • 33. Case Study: Financial Times In June 2011, the Financial Times launched a web app which greatly accelerated FT’s access on mobile devices (smartphone and tablets): 12% of registrations from mobile, and 19% of website traffic is generated by mobile access, which represents 2M users. In August 2011, the web app had already attracted more users than the prior native application. This latter was subsequently removed from the AppStore. HTML5 has allowed them to reach more users, especially those using an Android Smartphone, or other browsers. Furthermore, FT wanted to control the release of Apple and 30% of revenues collected by the Cupertino company. Furthermore, FT wanted to free themselves of Apple and their 30% revenue share. Figure 21 Financial Times website read from a tablet faberNovel ••• 33
  • 34. Decision matrix: what to do in any case ? Website vs native applications ? Native application when the service… • Uses the hardware’s devices: camera, gyroscope, compass ... • Allows many possible uses, adjustable in the connected device “preferences” • Is easily reachable from any other application or from the home page • Is part of a business model that fits well with the Store applications’ model • Aims at one person category with only one Smartphone • Must be highly efficient • Does not need to connect to the Internet • Has been developed with a confidential code • Uses data that must be secured VS Web App when the service… • Must reach the entire population, regardless of the device, and whatever the Smartphones, tablets or SmartTV market forcecasts. • …Or on the contrary, will reach a few people (no need to invest less in a language known as HTML) • Is accessible by a simple web search • Will be quickly and frequently updated • Is free to be put online • Provides links to other websites • Will be maintained by someone other than the developer • Must have a completely original design • Must allow a perfect control of the monetization system and advertising (analytics) • Must be developed quickly / can be used to develop other services (reuse of existing widgets, etc.). • Will be available soon • Also refers to an online website
  • 35. What about hybrid applications ? It is impossible to easily convert a native application from one device to another. Indeed : • Development languages are different; Examples: Objective-C for Apple Java for Android • The interface changes from platform to platform; • The OS that support the applications are different. The one and only solution to develop a native application that runs on different platforms is to develop a native application for each different platform, with proper interface, and a specialist developer regarding the OS and language used. On the contrary, an HTML web application can be read by any Smartphone fitted with an Internet browser: iPhone, Android, or BlackBerry. However, some applications need both the ability to: • Be used on any type of OS: Android, IOS, etc.; • Access to the Smartphone or Tablet native features : microphone, camera, accurate geolocation, contacts list, calendars. In these particular cases, it is possible to pitch an intermediate solution: hybrid applications. A hybrid application is based on the same technologies as web applications: the code is built with HTML standard, CSS and JS. Thus, it has the same performance and qualities as web applications. This code is thereafter integrated into “frameworks” which allow access to the OS native features. What is a Framework ? It consists in an empty native application, allowing the HTML contents of a webpage to be read. The framework’s features are very close to a browser’s. Figure 22 PhoneGap’s scheme showing frameworks’ role faberNovel ••• 35
  • 36. Thus, unlike a native application, a hybrid application will access hardware devices (camera, GPS, Etc.) and be listed on the corresponding Store. Moreover, a hybrid application makes the most of its HTML code : ease of updating and developing, design responsive, long-term stability of the language used. Which suppliers provide those frameworks ? Here are two actors who develop frameworks and integrate HTML pages to make hybrid applications on different platforms. PhoneGap supported by the Apache Software Foundation’s incubator The following are native features supported by PhoneGap’s different frameworks: Figure 23 Table of different platforms’ native features, supported by the PhoneGap’s frameworks. faberNovel ••• 36
  • 37. Sencha Touch Sencha also provides the framework so that web applications have access to most the native features: geolocation, compass, accelerometer, etc... Below,are the list of devices compatible with Sencha’s solution : Figure 24 The different platforms on which Sencha Touch can spread a hybrid application, from the same HTML5 code faberNovel ••• 37
  • 38. [IV] Our recommendation • Which solutions fit for each type of application ? Games and Entertainment Media, News and Information Social networking Traveling and maps Utilities (reservation, e-shopping, bank transaction) Multimedia • Synthesis faberNovel ••• 38
  • 39. Our recommendation Which solutions fit for each type of application ? Games and Entertainment [Native application] Why ? Such applications require high-end graphics and responsiveness to evoke a wide new universe, along with possible interactions with innovative hardware elements (eg accelerometer). Example 1 : Infinity Blade This game is extremely similar to those played on video gaming consoles. Its high quality 3D graphics requires high computing power to respond to players’ actions. Impossible to obtain in HTML5 developement so far, native development is essential. Example 2 : Angry Birds One of the most popular games on mobile phones is now available in HTML5 ..but only on Chrome 19, which is not yet available for a Smartphone or a tablet. Note that it is a relatively simple game: a single type of interaction, 2D graphics. Figure 25 “Infinity Blade”’s illustration, a native gaming application that uses 3D animations Figure 26 “Angry Birds”, from now on available in HTML5 on Chrome 19 browser
  • 40. Media, News and Information [Hybrid now … web app for soon !] Why? Contents must be constantly consulted, updated ... and all users need this service. Moreover, there is no particular interactions to imagine but read, share and comment. Native applications’ advantage is to push notifications: this feature is expected to arrive shortly on HTML5. Examples : Financial Times & Le Monde Financial Times is a web Le Monde is a native application. application. Figure 27 Financial Times’ webapp and Le Monde’s native application. faberNovel ••• 40
  • 41. Social networking [Native or hybrid] Why? Social networking applications have characteristics quite similar to news’ application. Frequently updated and modified, they target a wide audience, which uses various devices. Finally, users need camera and geolocation access to share those data. Example 1 : LinkedIn LinkedIn is a hybrid application. Example 2 : Facebook Facebook has abandoned HTML5 and came back to a native version of its application. Facebook’s purpose is to make the application more optimal and fluid in particular when opening and viewing multimedia content. Facebook has chosen to promote the efficiency and speed of a native application rather than developing an HTML5 application readable on any mobile platform. Figure 28 Linkedin’s hybrid application on Smartphones Figure 29 Facebook’s application, the new native application launched in August 2012 faberNovel ••• 41
  • 42. Traveling and maps [Native application and webapp] Why? For such applications, geolocation is essential. Webapp geolocation is as accurate as native application geolocation. It is one of the first Utilities (reservation, e-shopping, bank features compatible with most common browsers. transaction) [Native application] Example : Foursquare Why? For such applications, one need to identify and make transactions safely. In native applications, Foursquare is a native application available on both the user is most of the time already identified Android and iOS. and registered, so he doesn’t need to enter the username nor the password for each transaction. Example : eBay eBay has combined both a native application, and an optimized website for mobile. Indeed, iPhone’s features can further enrich eBay’s service on the web: scan bar code with the camera, notifications when an item is sold or purchased, etc.. These features can not yet exist in HTML5. Figure 30 The Foursquare application, a native application that uses native geolocation devices Figure 31 The eBay application, an e-commerce application using notifications and camera to scan a bar code faberNovel ••• 42
  • 43. Multimedia [Native application today … But about to switch for web application !] Why? For a long time, websites publishers putting forward movies or music contents online had no other alternative than using native applications. Now, HTML5 allows the integration of multimedia content on mobile devices, with a greater responsiveness when the Internet connection is safe. Example : YouTube When Smartphones first came out, YouTube had previously developed an application that used the Smartphone’s native video player. Indeed, adding a Flash plug-in was then the only way to play videos online. However, Apple refused to integrate the Flash plug-in into mobile iOS. More recently, new HTML5 features have allowed YouTube to develop a web application version that runs on all platforms. Figure 32 Youtube’s HTML5 application, identical on all platforms faberNovel ••• 43
  • 44. Synthesis So far, there have been a lot of debates about which technology is the best to develop a digital product, but the real debate actually relies on which technology is the most suitable to a publisher’s needs in terms of quality and speed of the application. Whenever an app requires to be very reactive, work offline, or use advanced features of the device (camera, gyroscope, voice, push, sending by e-mail, address book, etc..), it must be native. Each app will be optimized for its proper platform. If instead, the app’s development is driven by a logic of cost and does not require as advanced features as a native app, HTML5 offers the best compromise possible. The interest is to have a unique app to develop and update. Costs savings can be substantial as the number of apps is important. Although, HMTL5 technology is not fully mature yet … The most interesting features of HTML5 are not supported by widely used browsers. They will be in the coming months for desktop browsers, but not necessarily for mobile browsers, tablets and SmartTV. Actors controlling thoses devices (Apple, Google, Samsung, etc..) have indeed little interest to encourage the web apps’ development. Web apps’ development on the connected devices requires two revolutions that are quite difficult to predict: • A shift in strategy for Apple, Google, Samsung, etc.. which would lead them to improve HTML5 comptatibility on their connected devices • A revolution in the habits of mobile users who would start reaching their favorite service from their browser rather than a native application. Given the current success of native applications, this change will not happen without a major disruption of the market, supported the world’s giant digital players. faberNovel ••• 44
  • 45. ... It is time for players to integrate HTML5 to their multiplatform strategy... Browsers for desktop computers integrate faster HTML5 new features. By the end of 2012 or early 2013 ,HTML5 will be considered as the web standard development technology. Even if all are not yet supported by the various browsers, overall, HTML5 new features let you go through richer and more interative web experience. Beyond this technological aspect, HTML5 also brings a new concept design: • Multiplatform strategy: how to adapt a unique web experience to different devices (mobile, tablet, TV) all-in sharing development costs? • Updating and running ease: every last changes and web development versions follow one another seamlessly and transparently. It also allows to develop new experiences through swift prototyping methodologies, through an incremental and iterative way • A logical flow: we do not need to download or store anymore information. Everything is accessible on the web, via a url. faberNovel ••• 45
  • 46. This means that new websites’ developments or existing websites’ updates will have to be done taking into account both HTML5 and web standards in order to replace proprietary technologies or provide a richer user experience. Some examples for pluzz.fr: • For movies, change from Flash to HTML5 • Provide a full screen mode for more immersion …And explore the field of hybrid applications. A service like Pluzz should be reachable by the largest number of possible devices: Smartphones, tablets, SmartTV. In order to reduce the high developing costs implied by the development of a native application for each different platform, one should use a common heart in HTML5. An example is the strategy chosen by Netflix. Advantages are many: The advantages: • The heart can be updated at any time, without having to go through Apple, Google, Samsung, etc.. • It is possible to make dynamic testing (A / B testing) to quickly improve the interface. • The development cost for each application is significantly reduced. This strategy is an opportunity to think out globally services for an easier management, more efficient and rational (systematic use of APIs, better structure its data, better “talk to each other” the various services, etc..). faberNovel ••• 46
  • 47. Sources Figure 3 Figure 9 HTML5 : the futur of web ? The famous Snake game entirely http://www.w3.org/html/logo/ developed in HTML5 http://neave.com/fr/serpent/ Figure 4 Exemple d’animation : les traits Figure 10 lumineux se dessinent en suivant Illustration of a game in HTML5, le trajet de la souris sur l’écran, ils piloted by a joystick bougent et s’effacent au fur et à http://hacks.mozilla.org/2011/12/ mesure. gaming-and-the-mozilla-labs-apps- http://neave.com/fr/imagination/ project Figure 5 Figure 11 CSS animation example: the text is Score (out of 500) of the 6 browsers aligned with the contours of the car compatible with HTML5. when this latter moves http://html5test.com/results/desktop. http://www.adobe.com/fr/devnet/ html html5/articles/css3-regions.html Figure 12 Figure 6 Score (out of 500) of 8 Smartphones Example of interaction with the OS allowing the best compatibility with microphone: When making noise in HTML5 features front of the computer, the balls start to http://html5test.com/results/mobile. jump on the screen. html http://neave.com/fr/balles- sauteuses/ Figure 13 Score (out of 500) of the 12 tablet’s Figure 7 OS allowing the best compatibility with Example of interaction with the HTML5 features webcam: you can take pictures and http://html5test.com/results/tablet. add special filters or effects. html http://neave.com/fr/webcam/ Figure 14 Figure 8 Score (out of 500) of the 10 Smart TV Drawing made using the mouse in a OS allowing the best compatibility with web page HTML5. http://harmoniousapp.com/ http://html5test.com/results/ television.html faberNovel ••• 47
  • 48. Figure 15 Figure 23 HTML5 compatiblity pourcentage of Table of different platforms’ most popular web browsers worldwidly native features, supported by the used PhoneGap’s frameworks http://gs.statcounter.com/ www.phonegap.com Figure 16 Figure 24 HTML5 compatiblity pourcentage Different platforms on which Sencha of most popular mobile browsers Touch can spread a hybrid application, worldwidly used from the same HTML5 code http://gs.statcounter.com/ www.sencha.com Figure 22 Figure 29 PhoneGap’s scheme showing Facebook’s application, the new native frameworks’ role application launched in August 2012 https://build.phonegap.com/ www.igeneration.fr faberNovel ••• 48
  • 49. Acknowledgments Bruno Patino Executive Vice President, Strategy & Digital of France Télévisions Group, Director of France 5 Eric Scherer Director of Future Media Philippe Deloeuvre Strategic Marketing Director Aurélien Fache Technical Director Romain Goyet Co-fondateur et CTO faberNovel ••• 49
  • 50. Contact 17 rue du Faubourg du Temple 75010 Paris +33 1 42 72 20 04 www.fabernovel.com Marie-Caroline Lanfranchi Project Director marie-caroline.lanfranchi@fabernovel.com Maxime Coupez Senior Project Manager maxime.coupez@fabernovel.com Marguerite Meunier Junior Project Manager marguerite.meunier@fabernovel.com faberNovel ••• 50
  • 51. We are faberNovel We help large organizations think and act like startups! We help our clients make the most of digital opportunities and emerging partices. We build on tomorrow’s challenges to deliver significant impact. We are designers, business analysts, and engineers. With a strong expertise in design and execution of digital experiments using HTML5, we are able to assist organizations in: • Building their innovation abilities thanks to our training and coaching team: digital deep dive for senior managers, custom workshops design, Innovation Labs • Defining a digital multi-platform strategy, clear and customer- orientated • Designing products, services and innovative experiences • Supporting innovative projects with the ability to offer turnkey service: vendor and technology sourcing and assessment, operational run and post-launch management • The development of transmedia projects with design and execution of multichannel experiments. ••• We work ideas into successful project. We make innovation happen. facebook.com/faberNovel @faberNovel www.fabernovel.com
  • 52. We are faberNovel References SFR PLAYER In 2011, as part of the SFR PLAYER event, faberNovel was in charge of the design and animation of a digital experience about technological innovations. http://sfrplayer.sfr.com/ INSIDE ENGRENAGES In collaboration with Canal +, faberNovel was in charge of designing and   developing an interactive web experience called “Inside Engrenages”, a new webserie deriving from the original French police procedural television series called “Engrenages”. “Put yourself in a webreporter’s shoes allowed to follow Captain Laure Berthaud’s group the time of an investigation of a forged documents traffic and clandestine network.” During seven days, the user will follow in real-time the investigation’s progress and will be notified by email or social networks for twists and new evidence’s discovery. http://engrenages.canalplus.fr/ facebook.com/faberNovel @faberNovel www.fabernovel.com