SlideShare a Scribd company logo
1 of 286
Download to read offline
BREAKING THE
                           MOBILE WEB
                                   Max Firtman
                                       @firt
                                     firt.mobi
                Sep, 12th, 2011
                   Nashville

Monday, September 12, 11
who am I?

      mobile+web developer
      mobilexweb.com blog


                           @firt

Monday, September 12, 11
where?




Monday, September 12, 11
where?
        buenos aires ~ argentina




Monday, September 12, 11
where?
        buenos aires ~ argentina
                           patagonia
                           soccer
                           meat & wine
                           tango
Monday, September 12, 11
where?
        buenos aires ~ argentina
                           patagonia
                           soccer
                           meat & wine
                           tango
Monday, September 12, 11
where?
        buenos aires ~ argentina
                           patagonia
                                           true lies
                                         tango scene


                           soccer
                           meat & wine
                           tango
Monday, September 12, 11
books




                           Image from my house
Monday, September 12, 11
Monday, September 12, 11
Using the Latest Today




            Mobile
            HTML5
                                                                    coming soon...
                                                     Estelle Weyl
                                          & Maximiliano Firtman     also by @estellevw
Monday, September 12, 11
many of you have
                two questions for me



Monday, September 12, 11
the first answer is no




Monday, September 12, 11
the second answer is
                         yes



Monday, September 12, 11
other projects
               Blog
               www.mobilexweb.com

               +40 links, +300 emulators
               www.mobilexweb.com/emulators


               typing long URLs on mobile?
               www.mobiletinyurl.com


Monday, September 12, 11
agenda




Monday, September 12, 11
agenda




Monday, September 12, 11
agenda
                           ‣   why?




Monday, September 12, 11
agenda
                           ‣ why?
                           ‣ what’s the problem?




Monday, September 12, 11
agenda
                           ‣ why?
                           ‣ what’s the problem?

                           ‣ why are we here?




Monday, September 12, 11
agenda
                           ‣ why?
                           ‣ what’s the problem?

                           ‣ why are we here?

                           ‣ mobile browsers today




Monday, September 12, 11
agenda
                           ‣ why?
                           ‣ what’s the problem?

                           ‣ why are we here?

                           ‣ mobile browsers today

                           ‣ forget & learn




Monday, September 12, 11
agenda
                           ‣ why?
                           ‣ what’s the problem?

                           ‣ why are we here?

                           ‣ mobile browsers today

                           ‣ forget & learn

                           ‣ mobile web toolkit




Monday, September 12, 11
agenda
                           ‣ why?
                           ‣ what’s the problem?

                           ‣ why are we here?

                           ‣ mobile browsers today

                           ‣ forget & learn

                           ‣ mobile web toolkit

                           ‣ html5 today




Monday, September 12, 11
agenda
                           ‣ why?
                           ‣ what’s the problem?

                           ‣ why are we here?

                           ‣ mobile browsers today

                           ‣ forget & learn

                           ‣ mobile web toolkit

                           ‣ html5 today

                           ‣ the future


Monday, September 12, 11
why mobile?




Monday, September 12, 11
mobile devices are our
          flying cars




Monday, September 12, 11
mobile is more about
                         users



Monday, September 12, 11
mobile




Monday, September 12, 11
mobile
                           ‣   absolutely personal




Monday, September 12, 11
mobile
                           ‣ absolutely personal
                           ‣ +5 billions




Monday, September 12, 11
mobile
                           ‣ absolutely personal
                           ‣ +5 billions

                           ‣ make us focus




Monday, September 12, 11
mobile
                           ‣ absolutely personal
                           ‣ +5 billions

                           ‣ make us focus

                           ‣ read our context...




Monday, September 12, 11
mobile
                           ‣ absolutely personal
                           ‣ +5 billions

                           ‣ make us focus

                           ‣ read our context...

                           ‣ ... always...




Monday, September 12, 11
mobile
                           ‣ absolutely personal
                           ‣ +5 billions

                           ‣ make us focus

                           ‣ read our context...

                           ‣ ... always...

                           ‣ ... and everywhere.




Monday, September 12, 11
then... what is the
                               problem?



Monday, September 12, 11
mobile is a
  minefield



                   Photo by World of Good (Flickr)
        Malvinas / Falklands Islands



Monday, September 12, 11
lots of questions

     Photo by wayneandwax (Flickr)
Monday, September 12, 11
we need to learn
                           lots of questions

Monday, September 12, 11
lots of platforms
Monday, September 12, 11
mobile web appears




Monday, September 12, 11
native
                             vs
                            web


Monday, September 12, 11
WAIT!




Monday, September 12, 11
Are you sure?




Monday, September 12, 11
native code
                                vs
                            javascript


Monday, September 12, 11
browser
                                  vs
                           installed apps
                              & stores

Monday, September 12, 11
lack of definitions




Monday, September 12, 11
when we say mobile web




Monday, September 12, 11
when we say mobile web
                      from a developer’s
                      perspective it’s using HTML,
                      CSS and JavaScript to
                      develop mobile apps



Monday, September 12, 11
when we say mobile web
                      from a developer’s
                      perspective it’s using HTML,
                      CSS and JavaScript to
                      develop mobile apps

                      (browser or installed)

Monday, September 12, 11
what’s the problem
                      with mobile web?



Monday, September 12, 11
we are second class
                       producers



Monday, September 12, 11
second class




Monday, September 12, 11
second class
                           ‣vague, non-existent or outdated
                           documentation




Monday, September 12, 11
second class
                           ‣ vague, non-existent or outdated
                            documentation
                           ‣ new features discovered by

                            third-parties




Monday, September 12, 11
second class
                           ‣ vague, non-existent or outdated
                            documentation
                           ‣ new features discovered by

                            third-parties
                           ‣ lack of samples




Monday, September 12, 11
second class
                           ‣ vague, non-existent or outdated
                            documentation
                           ‣ new features discovered by

                            third-parties
                           ‣ lack of samples

                           ‣ no developer tools




Monday, September 12, 11
what?




    Updated: 02 Sep 2011

Monday, September 12, 11
Testing & debugging



Monday, September 12, 11
Standards!




Monday, September 12, 11
Photo by Ben Millett (Flickr)
Monday, September 12, 11
Monday, September 12, 11
Are you
    sure to
   be happy?




     Photo by Ricky David (Flickr)
Monday, September 12, 11
What is        ?



Monday, September 12, 11
html5




Monday, September 12, 11
html5
                           ‣   w3c standards (all in draft)




Monday, September 12, 11
html5
                           ‣ w3c standards (all in draft)
                           ‣ some are other w3c standards

                            (css, svg, geolocation)




Monday, September 12, 11
html5
                           ‣ w3c standards (all in draft)
                           ‣ some are other w3c standards

                            (css, svg, geolocation)
                           ‣ de-facto standards




Monday, September 12, 11
html5
                           ‣ w3c standards (all in draft)
                           ‣ some are other w3c standards

                            (css, svg, geolocation)
                           ‣ de-facto standards

                           ‣ w3c ex-standards




Monday, September 12, 11
html5
                           ‣ w3c standards (all in draft)
                           ‣ some are other w3c standards

                            (css, svg, geolocation)
                           ‣ de-facto standards

                           ‣ w3c ex-standards

                           ‣ everything “new” on the web




Monday, September 12, 11
html5




Monday, September 12, 11
html5
                           today:




Monday, September 12, 11
html5
                           today:
                           lack of real, good and practical
                           information for mobile on the
                           html5 community




Monday, September 12, 11
caniuse.com




         • Simplification of the mobile web browser space
         • Inaccurate information

Monday, September 12, 11
Modernizr




             • Inaccurate information - inlinesvg and webgl
Monday, September 12, 11
html5test.com




        Not clear the html5 concept behind these tests
Monday, September 12, 11
let’s try to clarify




Monday, September 12, 11
announcing today...




Monday, September 12, 11
Photo by Ben Millett (Flickr)
Monday, September 12, 11
mobile browsers




Monday, September 12, 11
mobile browsers
                           ‣   too many




Monday, September 12, 11
mobile browsers
                           ‣ too many
                           ‣ (some) too limited




Monday, September 12, 11
mobile browsers
                           ‣ too many
                           ‣ (some) too limited

                           ‣ (some) too innovative




Monday, September 12, 11
mobile browsers
                           ‣ too many
                           ‣ (some) too limited

                           ‣ (some) too innovative

                           ‣ (some) proxy based




Monday, September 12, 11
mobile browsers
                           ‣ too many
                           ‣ (some) too limited

                           ‣ (some) too innovative

                           ‣ (some) proxy based

                           ‣ (most) without documentation




Monday, September 12, 11
mobile browsers
                           ‣ too many
                           ‣ (some) too limited

                           ‣ (some) too innovative

                           ‣ (some) proxy based

                           ‣ (most) without documentation

                           ‣ (most) without a name




Monday, September 12, 11
mobile browsers
                           ‣ too many
                           ‣ (some) too limited

                           ‣ (some) too innovative

                           ‣ (some) proxy based

                           ‣ (most) without documentation

                           ‣ (most) without a name

                           ‣ (most) without debugging tools



Monday, September 12, 11
mobile browsers




Monday, September 12, 11
mobile browsers
                           ‣   (some) focus-based




Monday, September 12, 11
mobile browsers
                           ‣ (some) focus-based
                           ‣ (some) cursor-based




Monday, September 12, 11
mobile browsers
                           ‣ (some) focus-based
                           ‣ (some) cursor-based

                           ‣ (some) touch-based




Monday, September 12, 11
mobile browsers
                           ‣ (some) focus-based
                           ‣ (some) cursor-based

                           ‣ (some) touch-based

                           ‣ (some) multitouch-based




Monday, September 12, 11
mobile browsers
                           ‣ (some) focus-based
                           ‣ (some) cursor-based

                           ‣ (some) touch-based

                           ‣ (some) multitouch-based

                           ‣ (some) with zooming support




Monday, September 12, 11
mobile browsers
                           ‣ (some) focus-based
                           ‣ (some) cursor-based

                           ‣ (some) touch-based

                           ‣ (some) multitouch-based

                           ‣ (some) with zooming support

                           ‣ (most) unknown for web devs




Monday, September 12, 11
MOBILE WEB USAGE!


                             Smartphones,         Smartphones,


                             Social,Phones,       Social,Phones,


                                                    Feature,
                            Feature,Phones,
                                                    Phones,

                           MARKET SHARE!




Monday, September 12, 11
a quick, dirty list




Monday, September 12, 11
a quick, dirty list
                           ‣ Safari on iOS
                           ‣ Android Browser

                           ‣ Nokia Browser for Symbian

                           ‣ webOS Browser

                           ‣ BlackBerry Browser
                           ‣ Opera Mobile
                           ‣ Opera Mini

                           ‣ Firefox
                           ‣ Internet Explorer
Monday, September 12, 11
a quick, dirty list (cont.)




Monday, September 12, 11
a quick, dirty list (cont.)
                           ‣ Bada Browser
                           ‣ NetFront

                           ‣ Myriad

                           ‣ Nokia Browser (Ovi)

                           ‣ Phantom

                           ‣ microB

                           ‣ Skyfire

                           ‣ BOLT

Monday, September 12, 11
they are on tablets too!




Monday, September 12, 11
they are on tablets too!
                           ‣ Safari on iOS
                           ‣ Android Browser

                           ‣ webOS Browser

                           ‣ BlackBerry Browser

                           ‣ Opera Mini




Monday, September 12, 11
and with different
                              versions...



Monday, September 12, 11
and there’s more!



Monday, September 12, 11
pseudo-browsers




Monday, September 12, 11
pseudobrowsers




Monday, September 12, 11
pseudobrowsers

                    ‣      mostly on iOS and Android




Monday, September 12, 11
pseudobrowsers

                    ‣ mostly on iOS and Android
                    ‣ uses the internal web control




Monday, September 12, 11
pseudobrowsers

                    ‣ mostly on iOS and Android
                    ‣ uses the internal web control

                    ‣ have different behavior than the

                     native!




Monday, September 12, 11
Monday, September 12, 11
don’t give up yet




Monday, September 12, 11
mobile IE reborn




Monday, September 12, 11
mobile IE reborn

                    ‣ on Windows Phone Mango, full
                     Internet Explorer 9 with HTML5




Monday, September 12, 11
mobile IE reborn

                    ‣ on Windows Phone Mango, full
                     Internet Explorer 9 with HTML5
                    ‣ but...




Monday, September 12, 11
the WebKit problem




Monday, September 12, 11
the WebKit problem
                    ‣      we are doing some things wrong




Monday, September 12, 11
the WebKit problem
                    ‣ we are doing some things wrong
                    ‣ mostly css3, using only -webkit

                     prefix




Monday, September 12, 11
the WebKit problem
                    ‣ we are doing some things wrong
                    ‣ mostly css3, using only -webkit

                     prefix
                    ‣ IE9, Firefox, Opera second-class

                     citizens



Monday, September 12, 11
the WebKit problem




Monday, September 12, 11
the WebKit problem
                   ‣   do WebKit development for mobile




Monday, September 12, 11
the WebKit problem
                   ‣ do WebKit development for mobile
                   ‣ but also take care of the others




Monday, September 12, 11
the WebKit problem
                   ‣ do WebKit development for mobile
                   ‣ but also take care of the others

                   ‣ please?




Monday, September 12, 11
we need to forget
                               and learn



Monday, September 12, 11
forget about




Monday, September 12, 11
forget about
                           ‣   pixels




Monday, September 12, 11
forget about
                           ‣ pixels
                           ‣ static designs




Monday, September 12, 11
forget about
                           ‣ pixels
                           ‣ static designs

                           ‣ desktop frameworks   (ok, not always)




Monday, September 12, 11
forget about
                           ‣ pixels
                           ‣ static designs

                           ‣ desktop frameworks   (ok, not always)

                           ‣ always connected




Monday, September 12, 11
forget about
                           ‣ pixels
                           ‣ static designs

                           ‣ desktop frameworks   (ok, not always)

                           ‣ always connected

                           ‣ unlimited power




Monday, September 12, 11
forget about
                           ‣ pixels
                           ‣ static designs

                           ‣ desktop frameworks (ok, not always)

                           ‣ always connected

                           ‣ unlimited power

                           ‣ everyone see the same




Monday, September 12, 11
forget about
                           ‣ pixels
                           ‣ static designs

                           ‣ desktop frameworks (ok, not always)

                           ‣ always connected

                           ‣ unlimited power

                           ‣ everyone see the same

                           ‣ insulting your users



Monday, September 12, 11
forget about
                           ‣ pixels
                           ‣ static designs

                           ‣ desktop frameworks (ok, not always)

                           ‣ always connected

                           ‣ unlimited power

                           ‣ everyone see the same

                           ‣ insulting your users

                           ‣ device conditionals

Monday, September 12, 11
learn about




Monday, September 12, 11
learn about
                           ‣   server-side detection




Monday, September 12, 11
learn about
                           ‣ server-side detection
                           ‣ progressive enhancement




Monday, September 12, 11
learn about
                           ‣ server-side detection
                           ‣ progressive enhancement

                           ‣ responsive design, but....




Monday, September 12, 11
learn about
                           ‣ server-side detection
                           ‣ progressive enhancement

                           ‣ responsive design, but....

                           ‣ mobile usability




Monday, September 12, 11
learn about
                           ‣ server-side detection
                           ‣ progressive enhancement

                           ‣ responsive design, but....

                           ‣ mobile usability

                           ‣ mobile use cases




Monday, September 12, 11
learn about
                           ‣ server-side detection
                           ‣ progressive enhancement

                           ‣ responsive design, but....

                           ‣ mobile usability

                           ‣ mobile use cases

                           ‣ best experience for each context




Monday, September 12, 11
learn about
                           ‣ server-side detection
                           ‣ progressive enhancement

                           ‣ responsive design, but....

                           ‣ mobile usability

                           ‣ mobile use cases

                           ‣ best experience for each context

                           ‣ the “top model” approach, aka WPO




Monday, September 12, 11
learn about
                           ‣ server-side detection
                           ‣ progressive enhancement

                           ‣ responsive design, but....

                           ‣ mobile usability

                           ‣ mobile use cases

                           ‣ best experience for each context

                           ‣ the “top model” approach, aka WPO

                           ‣ gain user loyalty


Monday, September 12, 11
learn about




Monday, September 12, 11
learn about
                    ‣  what’s the viewport and how applies
                      to our designs




Monday, September 12, 11
learn about
                    ‣ what’s the viewport and how applies
                     to our designs
                    ‣ what’s the target density (pixel ratio)




Monday, September 12, 11
learn about
                    ‣ what’s the viewport and how applies
                     to our designs
                    ‣ what’s the target density (pixel ratio)

                    ‣ how to fix elements on screen




Monday, September 12, 11
learn about
                    ‣ what’s the viewport and how applies
                     to our designs
                    ‣ what’s the target density (pixel ratio)

                    ‣ how to fix elements on screen

                    ‣ how background code works




Monday, September 12, 11
learn about
                    ‣ what’s the viewport and how applies
                     to our designs
                    ‣ what’s the target density (pixel ratio)

                    ‣ how to fix elements on screen

                    ‣ how background code works

                    ‣ data URI - inlining content




Monday, September 12, 11
mobile web toolkit



Monday, September 12, 11
emulators




                           www.mobilexweb.com/emulators

Monday, September 12, 11
friends

                lots of them




Monday, September 12, 11
virtual labs

           real devices on real networks




           www.perfectomobile.com   www.deviceanywhere.com

Monday, September 12, 11
device libraries

           detect devices and abilities from server-side

           manually tested



                           www.wurfl.com   www.deviceatlas.com

Monday, September 12, 11
debugging tools
           remote web inspector (BB 7.0 y PlayBook)
           opera mobile (DragonFly)
           weinre




        phonegap.github.com/weinre   debug.phonegap.com

Monday, September 12, 11
performance tools
           just starting...




         http://stevesouders.com/mobileperf/

Monday, September 12, 11
and what about
                           capabilities today?



Monday, September 12, 11
warning....




Monday, September 12, 11
offline installation




                HTML5      3.0+   2.1+   6.0+   Mobile 11+   5.0+

Monday, September 12, 11
offline installation
                       ‣   Install a package on the device




                HTML5         3.0+   2.1+   6.0+   Mobile 11+   5.0+

Monday, September 12, 11
offline installation
                       ‣ Install a package on the device
                       ‣ Complex to debug / reload




                HTML5       3.0+   2.1+   6.0+   Mobile 11+   5.0+

Monday, September 12, 11
offline installation
                       ‣ Install a package on the device
                       ‣ Complex to debug / reload

                       ‣ Buggy on some platforms




                HTML5       3.0+   2.1+   6.0+   Mobile 11+   5.0+

Monday, September 12, 11
offline installation
                       ‣ Install a package on the device
                       ‣ Complex to debug / reload

                       ‣ Buggy on some platforms

                       ‣ online / offline events




                HTML5       3.0+   2.1+   6.0+   Mobile 11+   5.0+

Monday, September 12, 11
offline installation
                       ‣ Install a package on the device
                       ‣ Complex to debug / reload

                       ‣ Buggy on some platforms

                       ‣ online / offline events

                       ‣ on iOS can be mixed with icons and full-

                        screen webapp metatags




                HTML5      3.0+   2.1+   6.0+   Mobile 11+   5.0+

Monday, September 12, 11
geolocation




             Geolocation   2.0+   2.0+   6.0+   9.0+   Mobile 11+   5.0+

Monday, September 12, 11
geolocation

                       ‣   GPS, A-GPS, Wi-Fi, cells




             Geolocation      2.0+   2.0+   6.0+   9.0+   Mobile 11+   5.0+

Monday, September 12, 11
geolocation

                       ‣ GPS, A-GPS, Wi-Fi, cells
                       ‣ (some) force GPS “highAccuracy”




             Geolocation   2.0+   2.0+   6.0+   9.0+   Mobile 11+   5.0+

Monday, September 12, 11
geolocation

                       ‣ GPS, A-GPS, Wi-Fi, cells
                       ‣ (some) force GPS “highAccuracy”

                       ‣ (some) heading




             Geolocation   2.0+   2.0+   6.0+   9.0+   Mobile 11+   5.0+

Monday, September 12, 11
geolocation

                       ‣ GPS, A-GPS, Wi-Fi, cells
                       ‣ (some) force GPS “highAccuracy”

                       ‣ (some) heading

                       ‣ once or movement




             Geolocation   2.0+   2.0+   6.0+   9.0+   Mobile 11+   5.0+

Monday, September 12, 11
offline web storage




             Web Storage   2.0+   2.0+   6.0+   9.0+   Mobile 11+   5.0+

Monday, September 12, 11
offline web storage
                       ‣   persistent and session storage




             Web Storage      2.0+   2.0+   6.0+   9.0+   Mobile 11+   5.0+

Monday, September 12, 11
offline web storage
                       ‣ persistent and session storage
                       ‣ key/value (strings)




             Web Storage    2.0+   2.0+   6.0+   9.0+   Mobile 11+   5.0+

Monday, September 12, 11
offline web storage
                       ‣ persistent and session storage
                       ‣ key/value (strings)

                       ‣ (some) allow object storage




             Web Storage    2.0+   2.0+   6.0+   9.0+   Mobile 11+   5.0+

Monday, September 12, 11
offline web storage
                       ‣ persistent and session storage
                       ‣ key/value (strings)

                       ‣ (some) allow object storage

                       ‣ limit space, non-standard ~5Mb




             Web Storage   2.0+   2.0+   6.0+   9.0+   Mobile 11+   5.0+

Monday, September 12, 11
offline web storage
                       ‣ persistent and session storage
                       ‣ key/value (strings)

                       ‣ (some) allow object storage

                       ‣ limit space, non-standard ~5Mb

                       ‣ be careful with private browsing




             Web Storage    2.0+   2.0+   6.0+   9.0+   Mobile 11+   5.0+

Monday, September 12, 11
offline sql storage




              deprecated   2.2+   2.0+   6.0+   Mobile 11+

Monday, September 12, 11
offline sql storage
                       ‣   persistent and session storage




              deprecated      2.2+   2.0+   6.0+   Mobile 11+

Monday, September 12, 11
offline sql storage
                       ‣ persistent and session storage
                       ‣ key/value (strings)




              deprecated    2.2+   2.0+   6.0+   Mobile 11+

Monday, September 12, 11
offline sql storage
                       ‣ persistent and session storage
                       ‣ key/value (strings)

                       ‣ (some) allow object storage




              deprecated    2.2+   2.0+   6.0+   Mobile 11+

Monday, September 12, 11
offline sql storage
                       ‣ persistent and session storage
                       ‣ key/value (strings)

                       ‣ (some) allow object storage

                       ‣ limit space, non-standard ~5Mb




              deprecated   2.2+   2.0+   6.0+   Mobile 11+

Monday, September 12, 11
offline sql storage
                       ‣ persistent and session storage
                       ‣ key/value (strings)

                       ‣ (some) allow object storage

                       ‣ limit space, non-standard ~5Mb

                       ‣ be careful with private browsing




              deprecated    2.2+   2.0+   6.0+   Mobile 11+

Monday, September 12, 11
multimedia API




             Web Storage   3.0+   2.3+   7.0+   9.0+   Mobile 11+   5.0+

Monday, September 12, 11
multimedia API

                       ‣   audio and video tags




             Web Storage      3.0+   2.3+   7.0+   9.0+   Mobile 11+   5.0+

Monday, September 12, 11
multimedia API

                       ‣ audio and video tags
                       ‣ javascript api & events




             Web Storage    3.0+   2.3+   7.0+   9.0+   Mobile 11+   5.0+

Monday, September 12, 11
multimedia API

                       ‣ audio and video tags
                       ‣ javascript api & events

                       ‣ codecs nightmare




             Web Storage    3.0+   2.3+   7.0+   9.0+   Mobile 11+   5.0+

Monday, September 12, 11
server-sent events




           Server-Sent events   4.1+   Mobile 11+   6.0+

Monday, September 12, 11
server-sent events

                       ‣   EventSource




           Server-Sent events   4.1+     Mobile 11+   6.0+

Monday, September 12, 11
server-sent events

                       ‣ EventSource
                       ‣ reduce AJAX/Comet solutions




           Server-Sent events   4.1+           Mobile 11+   6.0+

Monday, September 12, 11
server-sent events

                       ‣ EventSource
                       ‣ reduce AJAX/Comet solutions

                       ‣ be careful with proxies/3g connections




           Server-Sent events   4.1+             Mobile 11+   6.0+

Monday, September 12, 11
web sockets




               web sockets   4.2+   6.1+   Mobile 11+   6.0+

Monday, September 12, 11
web sockets
                       ‣    Evolution of bi-directional
                           communication




               web sockets     4.2+       6.1+       Mobile 11+   6.0+

Monday, September 12, 11
web sockets
                       ‣ Evolution of bi-directional
                        communication
                       ‣ reduce AJAX/Comet solutions




               web sockets   4.2+    6.1+      Mobile 11+   6.0+

Monday, September 12, 11
web sockets
                       ‣ Evolution of bi-directional
                        communication
                       ‣ reduce AJAX/Comet solutions

                       ‣ be careful with proxies/3g connections




               web sockets   4.2+     6.1+       Mobile 11+   6.0+

Monday, September 12, 11
web sockets
                       ‣ Evolution of bi-directional
                        communication
                       ‣ reduce AJAX/Comet solutions

                       ‣ be careful with proxies/3g connections

                       ‣ special server




               web sockets   4.2+     6.1+       Mobile 11+   6.0+

Monday, September 12, 11
web sockets
                       ‣ Evolution of bi-directional
                        communication
                       ‣ reduce AJAX/Comet solutions

                       ‣ be careful with proxies/3g connections

                       ‣ special server

                       ‣ standard changed months ago




               web sockets   4.2+     6.1+       Mobile 11+   6.0+

Monday, September 12, 11
web workers




              web workers   6.0+   Mobile 11+   6.0+

Monday, September 12, 11
web workers

                       ‣   threading in JavaScript




              web workers                6.0+        Mobile 11+   6.0+

Monday, September 12, 11
web workers

                       ‣ threading in JavaScript
                       ‣ important for performance




              web workers             6.0+      Mobile 11+   6.0+

Monday, September 12, 11
web workers

                       ‣ threading in JavaScript
                       ‣ important for performance

                       ‣ worker without DOM manipulation




              web workers            6.0+     Mobile 11+   6.0+

Monday, September 12, 11
2d drawing api (canvas)




                HTML5      1.0+   1.5+   6.0+   9.0+   Mob 10+ / Mini 5   4.0+

Monday, September 12, 11
2d drawing api (canvas)

                       ‣   great support




                HTML5         1.0+   1.5+   6.0+   9.0+   Mob 10+ / Mini 5   4.0+

Monday, September 12, 11
2d drawing api (canvas)

                       ‣ great support
                       ‣ javascript-based drawing




                HTML5      1.0+   1.5+   6.0+   9.0+   Mob 10+ / Mini 5   4.0+

Monday, September 12, 11
2d drawing api (canvas)

                       ‣ great support
                       ‣ javascript-based drawing

                       ‣ (some) allows data URI export




                HTML5      1.0+   1.5+   6.0+   9.0+   Mob 10+ / Mini 5   4.0+

Monday, September 12, 11
svg




                   SVG     2.2+   3.0+   4.7+   9.0+   Mob 10+ / Mini 5   4.0+

Monday, September 12, 11
svg
                       ‣   old standard




                   SVG        2.2+   3.0+   4.7+   9.0+   Mob 10+ / Mini 5   4.0+

Monday, September 12, 11
svg
                       ‣ old standard
                       ‣ scalable vector graphics




                   SVG      2.2+   3.0+   4.7+   9.0+   Mob 10+ / Mini 5   4.0+

Monday, September 12, 11
svg
                       ‣ old standard
                       ‣ scalable vector graphics

                       ‣ (some) allows inline <svg> tag




                   SVG      2.2+   3.0+   4.7+   9.0+   Mob 10+ / Mini 5   4.0+

Monday, September 12, 11
svg
                       ‣ old standard
                       ‣ scalable vector graphics

                       ‣ (some) allows inline <svg> tag

                       ‣ (some) allows svg as background




                   SVG     2.2+   3.0+   4.7+   9.0+   Mob 10+ / Mini 5   4.0+

Monday, September 12, 11
svg
                       ‣ old standard
                       ‣ scalable vector graphics

                       ‣ (some) allows inline <svg> tag

                       ‣ (some) allows svg as background

                       ‣ (some) allows svg as font




                   SVG     2.2+   3.0+   4.7+   9.0+   Mob 10+ / Mini 5   4.0+

Monday, September 12, 11
motion sensors




           DeviceOrientation   4.2+   3.0+   4.7+ (basic)   6.0+ (moz)

Monday, September 12, 11
motion sensors
                     ‣     accelerometer / gyroscope / magnetometer




           DeviceOrientation   4.2+   3.0+   4.7+ (basic)   6.0+ (moz)

Monday, September 12, 11
motion sensors
                     ‣ accelerometer / gyroscope / magnetometer
                     ‣ onorientationchange




           DeviceOrientation   4.2+   3.0+   4.7+ (basic)   6.0+ (moz)

Monday, September 12, 11
motion sensors
                     ‣ accelerometer / gyroscope / magnetometer
                     ‣ onorientationchange

                     ‣ window.orientation




           DeviceOrientation   4.2+   3.0+   4.7+ (basic)   6.0+ (moz)

Monday, September 12, 11
motion sensors
                     ‣ accelerometer / gyroscope / magnetometer
                     ‣ onorientationchange

                     ‣ window.orientation

                     ‣ games, visual effects, pressure detection?




           DeviceOrientation   4.2+   3.0+   4.7+ (basic)   6.0+ (moz)

Monday, September 12, 11
motion sensors
                     ‣ accelerometer / gyroscope / magnetometer
                     ‣ onorientationchange

                     ‣ window.orientation

                     ‣ games, visual effects, pressure detection?



                   mobilexweb.com/samples/ball.html
                   mobilexweb.com/samples/pressure.html




           DeviceOrientation   4.2+   3.0+   4.7+ (basic)   6.0+ (moz)

Monday, September 12, 11
new form controls




                 HTML5     2.2+ (b)   5.0+ (adv)   9.0 (basic)   10+ (med) 6.0+ (med)

Monday, September 12, 11
new form controls
                     ‣     variable support




                 HTML5        2.2+ (b)   5.0+ (adv)   9.0 (basic)   10+ (med) 6.0+ (med)

Monday, September 12, 11
new form controls
                     ‣ variable support
                     ‣ basic=different virtual keyboard




                 HTML5     2.2+ (b)   5.0+ (adv)   9.0 (basic)   10+ (med) 6.0+ (med)

Monday, September 12, 11
new form controls
                     ‣ variable support
                     ‣ basic=different virtual keyboard

                     ‣ medium=new date, number, range




                 HTML5     2.2+ (b)   5.0+ (adv)   9.0 (basic)   10+ (med) 6.0+ (med)

Monday, September 12, 11
new form controls
                     ‣ variable support
                     ‣ basic=different virtual keyboard

                     ‣ medium=new date, number, range

                     ‣ advanced=datalist




                 HTML5     2.2+ (b)   5.0+ (adv)   9.0 (basic)   10+ (med) 6.0+ (med)

Monday, September 12, 11
new form controls
                     ‣ variable support
                     ‣ basic=different virtual keyboard

                     ‣ medium=new date, number, range

                     ‣ advanced=datalist

                     ‣ (some) allows validation and css3 pseudo-

                      classes




                 HTML5     2.2+ (b)   5.0+ (adv)   9.0 (basic)   10+ (med) 6.0+ (med)

Monday, September 12, 11
touch events




             Touch events   3.0+   2.1+   6.1+   6.0+

Monday, September 12, 11
touch events
                       ‣   iOS specification




             Touch events     3.0+   2.1+   6.1+   6.0+

Monday, September 12, 11
touch events
                       ‣ iOS specification
                       ‣ some differences between implementations




             Touch events   3.0+   2.1+   6.1+       6.0+

Monday, September 12, 11
touch events
                       ‣ iOS specification
                       ‣ some differences between implementations

                       ‣ (some) multi-touch




             Touch events   3.0+   2.1+   6.1+       6.0+

Monday, September 12, 11
touch events
                       ‣ iOS specification
                       ‣ some differences between implementations

                       ‣ (some) multi-touch

                       ‣ touchstart, touchmove, touchend,

                        touchcancel




             Touch events   3.0+   2.1+   6.1+       6.0+

Monday, September 12, 11
touch events
                       ‣ iOS specification
                       ‣ some differences between implementations

                       ‣ (some) multi-touch

                       ‣ touchstart, touchmove, touchend,

                        touchcancel
                       ‣ (some) touchenter, touchleave




             Touch events   3.0+   2.1+   6.1+       6.0+

Monday, September 12, 11
css3 basic




                 CSS 3     1.0+   1.0+   6.0+   9.0+   10+   6.0+   Anna+

Monday, September 12, 11
css3 basic

                       ‣   basic new styling




                 CSS 3        1.0+   1.0+   6.0+   9.0+   10+   6.0+   Anna+

Monday, September 12, 11
css3 basic

                       ‣ basic new styling
                       ‣ rounded borders, opacity




                 CSS 3     1.0+   1.0+   6.0+   9.0+   10+   6.0+   Anna+

Monday, September 12, 11
css3 basic

                       ‣ basic new styling
                       ‣ rounded borders, opacity

                       ‣ (some) still requires prefix




                 CSS 3      1.0+   1.0+   6.0+   9.0+   10+   6.0+   Anna+

Monday, September 12, 11
css3 basic

                       ‣ basic new styling
                       ‣ rounded borders, opacity

                       ‣ (some) still requires prefix

                       ‣ -webkit, -o, -moz, -ms




                 CSS 3      1.0+   1.0+   6.0+   9.0+   10+   6.0+   Anna+

Monday, September 12, 11
css3 transforms




                 CSS 3     2.0+   2.0+   6.0+   9.0+   11+   6.0+   Anna+

Monday, September 12, 11
css3 transforms
                       ‣   basic 2d transforms




                 CSS 3        2.0+   2.0+   6.0+   9.0+   11+   6.0+   Anna+

Monday, September 12, 11
css3 transforms
                       ‣ basic 2d transforms
                       ‣ -webkit, -o, -moz, -ms




                 CSS 3     2.0+   2.0+   6.0+   9.0+   11+   6.0+   Anna+

Monday, September 12, 11
css3 transforms
                       ‣ basic 2d transforms
                       ‣ -webkit, -o, -moz, -ms

                       ‣ rotate, scale, skew, translate




                 CSS 3      2.0+   2.0+   6.0+   9.0+   11+   6.0+   Anna+

Monday, September 12, 11
css3 transforms
                       ‣ basic 2d transforms
                       ‣ -webkit, -o, -moz, -ms

                       ‣ rotate, scale, skew, translate

                       ‣ (some) matrix




                 CSS 3      2.0+   2.0+   6.0+   9.0+   11+   6.0+   Anna+

Monday, September 12, 11
css3 transforms
                       ‣ basic 2d transforms
                       ‣ -webkit, -o, -moz, -ms

                       ‣ rotate, scale, skew, translate

                       ‣ (some) matrix

                       ‣ (some) 3d transforms




                 CSS 3      2.0+   2.0+   6.0+   9.0+   11+   6.0+   Anna+

Monday, September 12, 11
css3 transitions




                 CSS 3     2.0+   2.0+   6.0+   10+   6.0+   Anna+

Monday, September 12, 11
css3 transitions

                       ‣   basic animations between 2 states




                 CSS 3        2.0+   2.0+   6.0+    10+   6.0+   Anna+

Monday, September 12, 11
css3 transitions

                       ‣ basic animations between 2 states
                       ‣ prefix




                 CSS 3     2.0+   2.0+   6.0+     10+   6.0+   Anna+

Monday, September 12, 11
css3 animations




                 CSS 3     2.2+   2.0+   6.0+   6.0+   Anna+

Monday, September 12, 11
css3 animations

                       ‣   keyframe animations




                 CSS 3        2.2+   2.0+   6.0+   6.0+   Anna+

Monday, September 12, 11
css3 animations

                       ‣ keyframe animations
                       ‣ attribute prefix and keyframe prefix




                 CSS 3     2.2+   2.0+   6.0+           6.0+   Anna+

Monday, September 12, 11
css3 animations

                       ‣ keyframe animations
                       ‣ attribute prefix and keyframe prefix

                       ‣ duplication :S




                 CSS 3     2.2+   2.0+   6.0+           6.0+   Anna+

Monday, September 12, 11
what is just
                           starting...?



Monday, September 12, 11
apis starting to appear




Monday, September 12, 11
apis starting to appear
                   ‣   XMLHttpRequest 2 - Android 3.0




Monday, September 12, 11
apis starting to appear
                   ‣ XMLHttpRequest 2 - Android 3.0
                   ‣ Navigation Timing API - Internet Explorer 9.0




Monday, September 12, 11
apis starting to appear
                   ‣ XMLHttpRequest 2 - Android 3.0
                   ‣ Navigation Timing API - Internet Explorer 9.0

                   ‣ Notifications API - Firefox 6.0




Monday, September 12, 11
apis starting to appear
                   ‣ XMLHttpRequest 2 - Android 3.0
                   ‣ Navigation Timing API - Internet Explorer 9.0

                   ‣ Notifications API - Firefox 6.0

                   ‣ Network Information API - Android 2.2+




Monday, September 12, 11
apis starting to appear
                   ‣ XMLHttpRequest 2 - Android 3.0
                   ‣ Navigation Timing API - Internet Explorer 9.0

                   ‣ Notifications API - Firefox 6.0

                   ‣ Network Information API - Android 2.2+

                   ‣ File API and FileReader API - Android 3.0




Monday, September 12, 11
apis starting to appear
                   ‣ XMLHttpRequest 2 - Android 3.0
                   ‣ Navigation Timing API - Internet Explorer 9.0

                   ‣ Notifications API - Firefox 6.0

                   ‣ Network Information API - Android 2.2+

                   ‣ File API and FileReader API - Android 3.0

                   ‣ CORS (cross-domain AJAX) - Android 2.2+, iOS 3.2+




Monday, September 12, 11
apis starting to appear
                   ‣ XMLHttpRequest 2 - Android 3.0
                   ‣ Navigation Timing API - Internet Explorer 9.0

                   ‣ Notifications API - Firefox 6.0

                   ‣ Network Information API - Android 2.2+

                   ‣ File API and FileReader API - Android 3.0

                   ‣ CORS (cross-domain AJAX) - Android 2.2+, iOS 3.2+

                   ‣ Media Camera API - Android 3.0




Monday, September 12, 11
apis starting to appear
                   ‣ XMLHttpRequest 2 - Android 3.0
                   ‣ Navigation Timing API - Internet Explorer 9.0

                   ‣ Notifications API - Firefox 6.0

                   ‣ Network Information API - Android 2.2+

                   ‣ File API and FileReader API - Android 3.0

                   ‣ CORS (cross-domain AJAX) - Android 2.2+, iOS 3.2+

                   ‣ Media Camera API - Android 3.0

                   ‣ IndexedDB - Firefox 6.0




Monday, September 12, 11
and what to expect
                        in the future?



Monday, September 12, 11
for next year...




Monday, September 12, 11
for next year...
                  ‣   Augmented Reality on the web




Monday, September 12, 11
for next year...
                  ‣ Augmented Reality on the web
                  ‣ Camera API




Monday, September 12, 11
for next year...
                  ‣ Augmented Reality on the web
                  ‣ Camera API

                  ‣ MathML




Monday, September 12, 11
for next year...
                  ‣ Augmented Reality on the web
                  ‣ Camera API

                  ‣ MathML

                  ‣ Idle detection




Monday, September 12, 11
for next year...
                  ‣ Augmented Reality on the web
                  ‣ Camera API

                  ‣ MathML

                  ‣ Idle detection

                  ‣ Speech detection




Monday, September 12, 11
for next year...
                  ‣ Augmented Reality on the web
                  ‣ Camera API

                  ‣ MathML

                  ‣ Idle detection

                  ‣ Speech detection

                  ‣ 3D Drawing API (aka WebGL)




Monday, September 12, 11
for next year...
                  ‣ Augmented Reality on the web
                  ‣ Camera API

                  ‣ MathML

                  ‣ Idle detection

                  ‣ Speech detection

                  ‣ 3D Drawing API (aka WebGL)

                  ‣ Native integration API




Monday, September 12, 11
for next year...
                  ‣ Augmented Reality on the web
                  ‣ Camera API

                  ‣ MathML

                  ‣ Idle detection

                  ‣ Speech detection

                  ‣ 3D Drawing API (aka WebGL)

                  ‣ Native integration API

                  ‣ Contacts and Calendar API




Monday, September 12, 11
for next year...
                  ‣ Augmented Reality on the web
                  ‣ Camera API

                  ‣ MathML

                  ‣ Idle detection

                  ‣ Speech detection

                  ‣ 3D Drawing API (aka WebGL)

                  ‣ Native integration API

                  ‣ Contacts and Calendar API

                  ‣ Messaging API




Monday, September 12, 11
for next year...
                  ‣ Augmented Reality on the web
                  ‣ Camera API

                  ‣ MathML

                  ‣ Idle detection

                  ‣ Speech detection

                  ‣ 3D Drawing API (aka WebGL)

                  ‣ Native integration API

                  ‣ Contacts and Calendar API

                  ‣ Messaging API

                  ‣ Orientation Lock




Monday, September 12, 11
for next year...
                  ‣ Augmented Reality on the web
                  ‣ Camera API

                  ‣ MathML

                  ‣ Idle detection

                  ‣ Speech detection

                  ‣ 3D Drawing API (aka WebGL)

                  ‣ Native integration API

                  ‣ Contacts and Calendar API

                  ‣ Messaging API

                  ‣ Orientation Lock

                  ‣ Debugging tools



Monday, September 12, 11
working on these APIs...




Monday, September 12, 11
working on these APIs...
                  ‣   W3C Device APIs Working Group




Monday, September 12, 11
working on these APIs...
                 W3C Device APIs Working Group
                  ‣

                http://www.w3.org/2009/dap/




Monday, September 12, 11
working on these APIs...
                 W3C Device APIs Working Group
                  ‣

                http://www.w3.org/2009/dap/

                  ‣   Mozilla WebAPI effort (3-6 months)




Monday, September 12, 11
working on these APIs...
                 W3C Device APIs Working Group
                  ‣

                http://www.w3.org/2009/dap/

                 Mozilla WebAPI effort (3-6 months)
                  ‣

                https://wiki.mozilla.org/WebAPI




Monday, September 12, 11
working on these APIs...
                 W3C Device APIs Working Group
                  ‣

                http://www.w3.org/2009/dap/

                 Mozilla WebAPI effort (3-6 months)
                  ‣

                https://wiki.mozilla.org/WebAPI

                  ‣   WAC




Monday, September 12, 11
working on these APIs...
                 W3C Device APIs Working Group
                  ‣

                http://www.w3.org/2009/dap/

                 Mozilla WebAPI effort (3-6 months)
                  ‣

                https://wiki.mozilla.org/WebAPI

                 WAC
                  ‣

                http://www.wacapps.net/



Monday, September 12, 11
can i use apis today?




Monday, September 12, 11
can i use apis today?
                  ‣   PhoneGap




Monday, September 12, 11
can i use apis today?
                  ‣   PhoneGap
                 http://www.phonegap.com




Monday, September 12, 11
can i use apis today?
                  ‣   PhoneGap
                 http://www.phonegap.com

                  ‣   BlackBerry WebWorks




Monday, September 12, 11
can i use apis today?
                  ‣   PhoneGap
                 http://www.phonegap.com

                  ‣   BlackBerry WebWorks
                 http://us.blackberry.com/developers/browserdev/




Monday, September 12, 11
can i use apis today?
                  ‣   PhoneGap
                 http://www.phonegap.com

                  ‣   BlackBerry WebWorks
                 http://us.blackberry.com/developers/browserdev/

                  ‣   Nokia webapps




Monday, September 12, 11
can i use apis today?
                  ‣   PhoneGap
                 http://www.phonegap.com

                  ‣   BlackBerry WebWorks
                 http://us.blackberry.com/developers/browserdev/

                  ‣   Nokia webapps
                 http://www.developer.nokia.com/Develop/Web/




Monday, September 12, 11
some last advices



Monday, September 12, 11
Monday, September 12, 11
performance,
                           performance




Monday, September 12, 11
good practices




Monday, September 12, 11
don’t be fanatic




  photo by Kurt Christensen
           (flickr)
Monday, September 12, 11
be multiplatform




Monday, September 12, 11
best experience for
                        every context




Monday, September 12, 11
you can reach a good
                                    thank you!
                                experience



                     firt.mobi
                firtman@gmail.com
                   twitter: @firt
               www.mobilexweb.com



    Pictures)from)freedigitalphotos.net)
Monday, September 12, 11

More Related Content

Viewers also liked

Connecting With Customers
Connecting With CustomersConnecting With Customers
Connecting With Customershometown
 
Copy Of Fthb Presentation2
Copy Of Fthb Presentation2Copy Of Fthb Presentation2
Copy Of Fthb Presentation2peglover
 
David Scott Cosmetics
David Scott CosmeticsDavid Scott Cosmetics
David Scott CosmeticsDavid Scott
 
feliz navidad 2008/2009
feliz navidad 2008/2009feliz navidad 2008/2009
feliz navidad 2008/2009arqueomaria
 
Potential Issues within BCE
Potential Issues within BCEPotential Issues within BCE
Potential Issues within BCEJISC BCE
 
Greg Linch - Publish2 contest
Greg Linch - Publish2 contestGreg Linch - Publish2 contest
Greg Linch - Publish2 contestGreg Linch
 
Chemistry Jeopardy
Chemistry JeopardyChemistry Jeopardy
Chemistry Jeopardyginaarnold
 
Embedding BCE - Introduction
Embedding BCE - IntroductionEmbedding BCE - Introduction
Embedding BCE - IntroductionJISC BCE
 
Ilumtics corp profile_dec2011
Ilumtics corp profile_dec2011Ilumtics corp profile_dec2011
Ilumtics corp profile_dec2011Thanh Nguyen
 
Review Of Naming Compounds And Balancing Equations 1205854412907095 2
Review Of Naming Compounds And Balancing Equations 1205854412907095 2Review Of Naming Compounds And Balancing Equations 1205854412907095 2
Review Of Naming Compounds And Balancing Equations 1205854412907095 2siva sankar
 
Premier Global - Solutions and Values
Premier Global - Solutions and ValuesPremier Global - Solutions and Values
Premier Global - Solutions and Valuespremierglobal
 
Sharing Superheroes - J.Boye Philadelphia 2012 Keynote
Sharing Superheroes - J.Boye Philadelphia 2012 KeynoteSharing Superheroes - J.Boye Philadelphia 2012 Keynote
Sharing Superheroes - J.Boye Philadelphia 2012 KeynoteMichael Fienen
 
Elated Presentation
Elated PresentationElated Presentation
Elated Presentationdbaudio
 
易用性研究現場實務大綱 by David Liu
易用性研究現場實務大綱 by David Liu易用性研究現場實務大綱 by David Liu
易用性研究現場實務大綱 by David Liu悠識學院
 

Viewers also liked (20)

Connecting With Customers
Connecting With CustomersConnecting With Customers
Connecting With Customers
 
Copy Of Fthb Presentation2
Copy Of Fthb Presentation2Copy Of Fthb Presentation2
Copy Of Fthb Presentation2
 
David Scott Cosmetics
David Scott CosmeticsDavid Scott Cosmetics
David Scott Cosmetics
 
feliz navidad 2008/2009
feliz navidad 2008/2009feliz navidad 2008/2009
feliz navidad 2008/2009
 
SMS Based Push Mail
SMS Based Push MailSMS Based Push Mail
SMS Based Push Mail
 
Ilmu pengetahuan dan persoalan kita
Ilmu pengetahuan dan persoalan kitaIlmu pengetahuan dan persoalan kita
Ilmu pengetahuan dan persoalan kita
 
Potential Issues within BCE
Potential Issues within BCEPotential Issues within BCE
Potential Issues within BCE
 
Greg Linch - Publish2 contest
Greg Linch - Publish2 contestGreg Linch - Publish2 contest
Greg Linch - Publish2 contest
 
Ot 15.2
Ot 15.2Ot 15.2
Ot 15.2
 
Chemistry Jeopardy
Chemistry JeopardyChemistry Jeopardy
Chemistry Jeopardy
 
Mark Hughes
Mark HughesMark Hughes
Mark Hughes
 
Embedding BCE - Introduction
Embedding BCE - IntroductionEmbedding BCE - Introduction
Embedding BCE - Introduction
 
Ilumtics corp profile_dec2011
Ilumtics corp profile_dec2011Ilumtics corp profile_dec2011
Ilumtics corp profile_dec2011
 
Review Of Naming Compounds And Balancing Equations 1205854412907095 2
Review Of Naming Compounds And Balancing Equations 1205854412907095 2Review Of Naming Compounds And Balancing Equations 1205854412907095 2
Review Of Naming Compounds And Balancing Equations 1205854412907095 2
 
Pp6
Pp6Pp6
Pp6
 
Premier Global - Solutions and Values
Premier Global - Solutions and ValuesPremier Global - Solutions and Values
Premier Global - Solutions and Values
 
Sharing Superheroes - J.Boye Philadelphia 2012 Keynote
Sharing Superheroes - J.Boye Philadelphia 2012 KeynoteSharing Superheroes - J.Boye Philadelphia 2012 Keynote
Sharing Superheroes - J.Boye Philadelphia 2012 Keynote
 
Elated Presentation
Elated PresentationElated Presentation
Elated Presentation
 
易用性研究現場實務大綱 by David Liu
易用性研究現場實務大綱 by David Liu易用性研究現場實務大綱 by David Liu
易用性研究現場實務大綱 by David Liu
 
TmarketingConsulitng Services
TmarketingConsulitng ServicesTmarketingConsulitng Services
TmarketingConsulitng Services
 

Similar to Breaking the Mobile Web with HTML5

Ester Ytterbrink - FOSS for crips
Ester Ytterbrink - FOSS for cripsEster Ytterbrink - FOSS for crips
Ester Ytterbrink - FOSS for cripsFSCONS
 
Maximiliano Firtman
Maximiliano FirtmanMaximiliano Firtman
Maximiliano FirtmanColombia3.0
 
Multiplatform, Promises and HTML5
Multiplatform, Promises and HTML5Multiplatform, Promises and HTML5
Multiplatform, Promises and HTML5C4Media
 
Guiding Communication
Guiding CommunicationGuiding Communication
Guiding Communicationlakingaz
 
Windows 1-8 voor het bedrijfsleven. Wat moet je ermee
Windows 1-8 voor het bedrijfsleven. Wat moet je ermeeWindows 1-8 voor het bedrijfsleven. Wat moet je ermee
Windows 1-8 voor het bedrijfsleven. Wat moet je ermeeVincent Everts
 
Hacks & hackers
Hacks & hackersHacks & hackers
Hacks & hackerstwh
 
Localizing iOS Apps
Localizing iOS AppsLocalizing iOS Apps
Localizing iOS Appsweissazool
 
Preso ricoh-final-deel-I
Preso ricoh-final-deel-IPreso ricoh-final-deel-I
Preso ricoh-final-deel-IRonnie Overgoor
 
Managing Databases In A DevOps Environment
Managing Databases In A DevOps EnvironmentManaging Databases In A DevOps Environment
Managing Databases In A DevOps EnvironmentRobert Treat
 
Optimizing your site for contextual ads: SEO, Design and Content
Optimizing your site for contextual ads: SEO, Design and ContentOptimizing your site for contextual ads: SEO, Design and Content
Optimizing your site for contextual ads: SEO, Design and ContentRaven Tools
 
Tackling Big Data with Hadoop
Tackling Big Data with HadoopTackling Big Data with Hadoop
Tackling Big Data with Hadooppoorlytrainedape
 
Android Design: Beyond the Guidelines
Android Design: Beyond the GuidelinesAndroid Design: Beyond the Guidelines
Android Design: Beyond the Guidelineskevingrant5
 
South Africa: Doing Things Differently
South Africa: Doing Things DifferentlySouth Africa: Doing Things Differently
South Africa: Doing Things DifferentlyWilliam Price
 
Vlogging for Assessment and Critical Reflection
Vlogging for Assessment and Critical ReflectionVlogging for Assessment and Critical Reflection
Vlogging for Assessment and Critical ReflectionAmy Burvall
 
Oliver Weidlich presentation
Oliver Weidlich presentationOliver Weidlich presentation
Oliver Weidlich presentationMetro Screen
 

Similar to Breaking the Mobile Web with HTML5 (20)

Ester Ytterbrink - FOSS for crips
Ester Ytterbrink - FOSS for cripsEster Ytterbrink - FOSS for crips
Ester Ytterbrink - FOSS for crips
 
Maximiliano Firtman
Maximiliano FirtmanMaximiliano Firtman
Maximiliano Firtman
 
Multiplatform, Promises and HTML5
Multiplatform, Promises and HTML5Multiplatform, Promises and HTML5
Multiplatform, Promises and HTML5
 
Mobile? WT... F?
Mobile? WT... F?Mobile? WT... F?
Mobile? WT... F?
 
Guiding Communication
Guiding CommunicationGuiding Communication
Guiding Communication
 
Pulse News: porting android app to tablet
Pulse News: porting android app to tabletPulse News: porting android app to tablet
Pulse News: porting android app to tablet
 
Windows 1-8 voor het bedrijfsleven. Wat moet je ermee
Windows 1-8 voor het bedrijfsleven. Wat moet je ermeeWindows 1-8 voor het bedrijfsleven. Wat moet je ermee
Windows 1-8 voor het bedrijfsleven. Wat moet je ermee
 
Hacks & hackers
Hacks & hackersHacks & hackers
Hacks & hackers
 
Localizing iOS Apps
Localizing iOS AppsLocalizing iOS Apps
Localizing iOS Apps
 
Preso ricoh-final-deel-I
Preso ricoh-final-deel-IPreso ricoh-final-deel-I
Preso ricoh-final-deel-I
 
Reviving RIM
Reviving RIMReviving RIM
Reviving RIM
 
Embedjs
EmbedjsEmbedjs
Embedjs
 
Managing Databases In A DevOps Environment
Managing Databases In A DevOps EnvironmentManaging Databases In A DevOps Environment
Managing Databases In A DevOps Environment
 
Optimizing your site for contextual ads: SEO, Design and Content
Optimizing your site for contextual ads: SEO, Design and ContentOptimizing your site for contextual ads: SEO, Design and Content
Optimizing your site for contextual ads: SEO, Design and Content
 
Tackling Big Data with Hadoop
Tackling Big Data with HadoopTackling Big Data with Hadoop
Tackling Big Data with Hadoop
 
Android Design: Beyond the Guidelines
Android Design: Beyond the GuidelinesAndroid Design: Beyond the Guidelines
Android Design: Beyond the Guidelines
 
South Africa Tourism
South Africa TourismSouth Africa Tourism
South Africa Tourism
 
South Africa: Doing Things Differently
South Africa: Doing Things DifferentlySouth Africa: Doing Things Differently
South Africa: Doing Things Differently
 
Vlogging for Assessment and Critical Reflection
Vlogging for Assessment and Critical ReflectionVlogging for Assessment and Critical Reflection
Vlogging for Assessment and Critical Reflection
 
Oliver Weidlich presentation
Oliver Weidlich presentationOliver Weidlich presentation
Oliver Weidlich presentation
 

More from Maximiliano Firtman

ChatGPT and AI for Web Developers
ChatGPT and AI for Web DevelopersChatGPT and AI for Web Developers
ChatGPT and AI for Web DevelopersMaximiliano Firtman
 
Hacking Web Performance en Español - JSConf México 2020
Hacking Web Performance en Español - JSConf México 2020Hacking Web Performance en Español - JSConf México 2020
Hacking Web Performance en Español - JSConf México 2020Maximiliano Firtman
 
Uncovering Secrets of Progressive Web Apps
Uncovering Secrets of Progressive Web AppsUncovering Secrets of Progressive Web Apps
Uncovering Secrets of Progressive Web AppsMaximiliano Firtman
 
Hacking Web Performance @ ForwardJS 2017
Hacking Web Performance @ ForwardJS 2017Hacking Web Performance @ ForwardJS 2017
Hacking Web Performance @ ForwardJS 2017Maximiliano Firtman
 
La Web Salta al Mundo Físico - Web meets Physical World (spanish)
La Web Salta al Mundo Físico - Web meets Physical World (spanish)La Web Salta al Mundo Físico - Web meets Physical World (spanish)
La Web Salta al Mundo Físico - Web meets Physical World (spanish)Maximiliano Firtman
 
Progressive Web Apps (español - spanish)
Progressive Web Apps (español - spanish)Progressive Web Apps (español - spanish)
Progressive Web Apps (español - spanish)Maximiliano Firtman
 
High Performance Web - Full Stack Toronto
High Performance Web - Full Stack TorontoHigh Performance Web - Full Stack Toronto
High Performance Web - Full Stack TorontoMaximiliano Firtman
 
Responsive Images and Performance
Responsive Images and PerformanceResponsive Images and Performance
Responsive Images and PerformanceMaximiliano Firtman
 
The Physical World meets the Web
The Physical World meets the WebThe Physical World meets the Web
The Physical World meets the WebMaximiliano Firtman
 
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices Maximiliano Firtman
 
Extreme Web Performance for Mobile Device Fluent 2015
Extreme Web Performance for Mobile Device Fluent 2015Extreme Web Performance for Mobile Device Fluent 2015
Extreme Web Performance for Mobile Device Fluent 2015Maximiliano Firtman
 
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014Maximiliano Firtman
 
Extreme Web Performance for Mobile Devices - Velocity NY
Extreme Web Performance for Mobile Devices - Velocity NYExtreme Web Performance for Mobile Devices - Velocity NY
Extreme Web Performance for Mobile Devices - Velocity NYMaximiliano Firtman
 
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile DevicesExtreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile DevicesMaximiliano Firtman
 

More from Maximiliano Firtman (20)

ChatGPT and AI for Web Developers
ChatGPT and AI for Web DevelopersChatGPT and AI for Web Developers
ChatGPT and AI for Web Developers
 
PWA Cheat Sheet 2023
PWA Cheat Sheet 2023PWA Cheat Sheet 2023
PWA Cheat Sheet 2023
 
Hacking Web Performance en Español - JSConf México 2020
Hacking Web Performance en Español - JSConf México 2020Hacking Web Performance en Español - JSConf México 2020
Hacking Web Performance en Español - JSConf México 2020
 
The modern PWA Cheat Sheet
The modern PWA Cheat SheetThe modern PWA Cheat Sheet
The modern PWA Cheat Sheet
 
Hacking Web Performance 2019
Hacking Web Performance 2019Hacking Web Performance 2019
Hacking Web Performance 2019
 
Progressive Web Apps Keynote
Progressive Web Apps KeynoteProgressive Web Apps Keynote
Progressive Web Apps Keynote
 
Hacking Web Performance
Hacking Web PerformanceHacking Web Performance
Hacking Web Performance
 
Uncovering Secrets of Progressive Web Apps
Uncovering Secrets of Progressive Web AppsUncovering Secrets of Progressive Web Apps
Uncovering Secrets of Progressive Web Apps
 
Hacking Web Performance
Hacking Web Performance Hacking Web Performance
Hacking Web Performance
 
Hacking Web Performance @ ForwardJS 2017
Hacking Web Performance @ ForwardJS 2017Hacking Web Performance @ ForwardJS 2017
Hacking Web Performance @ ForwardJS 2017
 
La Web Salta al Mundo Físico - Web meets Physical World (spanish)
La Web Salta al Mundo Físico - Web meets Physical World (spanish)La Web Salta al Mundo Físico - Web meets Physical World (spanish)
La Web Salta al Mundo Físico - Web meets Physical World (spanish)
 
Progressive Web Apps (español - spanish)
Progressive Web Apps (español - spanish)Progressive Web Apps (español - spanish)
Progressive Web Apps (español - spanish)
 
High Performance Web - Full Stack Toronto
High Performance Web - Full Stack TorontoHigh Performance Web - Full Stack Toronto
High Performance Web - Full Stack Toronto
 
Responsive Images and Performance
Responsive Images and PerformanceResponsive Images and Performance
Responsive Images and Performance
 
The Physical World meets the Web
The Physical World meets the WebThe Physical World meets the Web
The Physical World meets the Web
 
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices
 
Extreme Web Performance for Mobile Device Fluent 2015
Extreme Web Performance for Mobile Device Fluent 2015Extreme Web Performance for Mobile Device Fluent 2015
Extreme Web Performance for Mobile Device Fluent 2015
 
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
 
Extreme Web Performance for Mobile Devices - Velocity NY
Extreme Web Performance for Mobile Devices - Velocity NYExtreme Web Performance for Mobile Devices - Velocity NY
Extreme Web Performance for Mobile Devices - Velocity NY
 
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile DevicesExtreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices
 

Recently uploaded

Vietnam presentation for intercultural communications class
Vietnam presentation for intercultural communications classVietnam presentation for intercultural communications class
Vietnam presentation for intercultural communications classseijibrown2
 
Do's & Don't at Turkish Airlines Mogadishu Office Address.pdf
Do's & Don't  at Turkish Airlines Mogadishu Office Address.pdfDo's & Don't  at Turkish Airlines Mogadishu Office Address.pdf
Do's & Don't at Turkish Airlines Mogadishu Office Address.pdfGlenna Glenna
 
TOURIST & ITS TYPE &MOTIVETIONAL FACTORS & BEHAVIOR .pptx
TOURIST & ITS TYPE &MOTIVETIONAL  FACTORS & BEHAVIOR .pptxTOURIST & ITS TYPE &MOTIVETIONAL  FACTORS & BEHAVIOR .pptx
TOURIST & ITS TYPE &MOTIVETIONAL FACTORS & BEHAVIOR .pptxkittustudy7
 
COMPLETE BENEFITS OF RELOCATING TO CANADA 1.pdf
COMPLETE BENEFITS OF RELOCATING TO CANADA 1.pdfCOMPLETE BENEFITS OF RELOCATING TO CANADA 1.pdf
COMPLETE BENEFITS OF RELOCATING TO CANADA 1.pdfOfficial Mark Daniels
 
Nanbokucho-period, Historical Origins of Modern Japan
Nanbokucho-period, Historical Origins of Modern JapanNanbokucho-period, Historical Origins of Modern Japan
Nanbokucho-period, Historical Origins of Modern Japanseijibrown2
 
pics from luxembourg exchange program 2016
pics from luxembourg exchange program 2016pics from luxembourg exchange program 2016
pics from luxembourg exchange program 2016seijibrown2
 
Culture and Identity through English as a Lingua Franca.pdf
Culture and Identity through English as a Lingua Franca.pdfCulture and Identity through English as a Lingua Franca.pdf
Culture and Identity through English as a Lingua Franca.pdfseijibrown2
 
How To Prepare For An Unforgettable Blackwater Dive In Kona
How To Prepare For An Unforgettable Blackwater Dive In KonaHow To Prepare For An Unforgettable Blackwater Dive In Kona
How To Prepare For An Unforgettable Blackwater Dive In KonaKona Ocean Adventures
 
The West Coast Trail Presentation for SAIT international students
The West Coast Trail Presentation for SAIT international studentsThe West Coast Trail Presentation for SAIT international students
The West Coast Trail Presentation for SAIT international studentsseijibrown2
 
Da Nang Tourist Attractions, VN (越南 峴港旅遊景點).ppsx
Da Nang Tourist Attractions, VN (越南 峴港旅遊景點).ppsxDa Nang Tourist Attractions, VN (越南 峴港旅遊景點).ppsx
Da Nang Tourist Attractions, VN (越南 峴港旅遊景點).ppsxChung Yen Chang
 
Reflective Essay.pdf for Global Compentency
Reflective Essay.pdf for Global CompentencyReflective Essay.pdf for Global Compentency
Reflective Essay.pdf for Global Compentencyseijibrown2
 
A Presentation of Braga. It was made by students of school
A Presentation of Braga. It was made by students of schoolA Presentation of Braga. It was made by students of school
A Presentation of Braga. It was made by students of schoolApostolos Syropoulos
 
Culture and Identity through English as a Lingua Franca (1).pdf
Culture and Identity through English as a Lingua Franca (1).pdfCulture and Identity through English as a Lingua Franca (1).pdf
Culture and Identity through English as a Lingua Franca (1).pdfseijibrown2
 
Planning a Memorable Day What to Look For In Murrells Inlet Fishing Charters
Planning a Memorable Day What to Look For In Murrells Inlet Fishing ChartersPlanning a Memorable Day What to Look For In Murrells Inlet Fishing Charters
Planning a Memorable Day What to Look For In Murrells Inlet Fishing ChartersCrazy Sister Marina
 
Traveling by Train in Sicily: A New Era of Comfort and Convenience
Traveling by Train in Sicily: A New Era of Comfort and ConvenienceTraveling by Train in Sicily: A New Era of Comfort and Convenience
Traveling by Train in Sicily: A New Era of Comfort and ConvenienceTime for Sicily
 
My presentation on vietnam for Intercultural Communications
My presentation on vietnam for Intercultural CommunicationsMy presentation on vietnam for Intercultural Communications
My presentation on vietnam for Intercultural Communicationsseijibrown2
 
2024 Annual Meeting: Visit Portland, Maine
2024 Annual Meeting: Visit Portland, Maine2024 Annual Meeting: Visit Portland, Maine
2024 Annual Meeting: Visit Portland, MaineVisit Portland
 
Reflective Essay for global competency certificate
Reflective Essay for global competency certificateReflective Essay for global competency certificate
Reflective Essay for global competency certificateseijibrown2
 

Recently uploaded (19)

Vietnam presentation for intercultural communications class
Vietnam presentation for intercultural communications classVietnam presentation for intercultural communications class
Vietnam presentation for intercultural communications class
 
Do's & Don't at Turkish Airlines Mogadishu Office Address.pdf
Do's & Don't  at Turkish Airlines Mogadishu Office Address.pdfDo's & Don't  at Turkish Airlines Mogadishu Office Address.pdf
Do's & Don't at Turkish Airlines Mogadishu Office Address.pdf
 
TOURIST & ITS TYPE &MOTIVETIONAL FACTORS & BEHAVIOR .pptx
TOURIST & ITS TYPE &MOTIVETIONAL  FACTORS & BEHAVIOR .pptxTOURIST & ITS TYPE &MOTIVETIONAL  FACTORS & BEHAVIOR .pptx
TOURIST & ITS TYPE &MOTIVETIONAL FACTORS & BEHAVIOR .pptx
 
COMPLETE BENEFITS OF RELOCATING TO CANADA 1.pdf
COMPLETE BENEFITS OF RELOCATING TO CANADA 1.pdfCOMPLETE BENEFITS OF RELOCATING TO CANADA 1.pdf
COMPLETE BENEFITS OF RELOCATING TO CANADA 1.pdf
 
Nanbokucho-period, Historical Origins of Modern Japan
Nanbokucho-period, Historical Origins of Modern JapanNanbokucho-period, Historical Origins of Modern Japan
Nanbokucho-period, Historical Origins of Modern Japan
 
pics from luxembourg exchange program 2016
pics from luxembourg exchange program 2016pics from luxembourg exchange program 2016
pics from luxembourg exchange program 2016
 
Culture and Identity through English as a Lingua Franca.pdf
Culture and Identity through English as a Lingua Franca.pdfCulture and Identity through English as a Lingua Franca.pdf
Culture and Identity through English as a Lingua Franca.pdf
 
How To Prepare For An Unforgettable Blackwater Dive In Kona
How To Prepare For An Unforgettable Blackwater Dive In KonaHow To Prepare For An Unforgettable Blackwater Dive In Kona
How To Prepare For An Unforgettable Blackwater Dive In Kona
 
The West Coast Trail Presentation for SAIT international students
The West Coast Trail Presentation for SAIT international studentsThe West Coast Trail Presentation for SAIT international students
The West Coast Trail Presentation for SAIT international students
 
Da Nang Tourist Attractions, VN (越南 峴港旅遊景點).ppsx
Da Nang Tourist Attractions, VN (越南 峴港旅遊景點).ppsxDa Nang Tourist Attractions, VN (越南 峴港旅遊景點).ppsx
Da Nang Tourist Attractions, VN (越南 峴港旅遊景點).ppsx
 
Reflective Essay.pdf for Global Compentency
Reflective Essay.pdf for Global CompentencyReflective Essay.pdf for Global Compentency
Reflective Essay.pdf for Global Compentency
 
A Presentation of Braga. It was made by students of school
A Presentation of Braga. It was made by students of schoolA Presentation of Braga. It was made by students of school
A Presentation of Braga. It was made by students of school
 
Culture and Identity through English as a Lingua Franca (1).pdf
Culture and Identity through English as a Lingua Franca (1).pdfCulture and Identity through English as a Lingua Franca (1).pdf
Culture and Identity through English as a Lingua Franca (1).pdf
 
Planning a Memorable Day What to Look For In Murrells Inlet Fishing Charters
Planning a Memorable Day What to Look For In Murrells Inlet Fishing ChartersPlanning a Memorable Day What to Look For In Murrells Inlet Fishing Charters
Planning a Memorable Day What to Look For In Murrells Inlet Fishing Charters
 
Traveling by Train in Sicily: A New Era of Comfort and Convenience
Traveling by Train in Sicily: A New Era of Comfort and ConvenienceTraveling by Train in Sicily: A New Era of Comfort and Convenience
Traveling by Train in Sicily: A New Era of Comfort and Convenience
 
Mathura to Ayodhya Tour by Tempo Traveller
Mathura to Ayodhya Tour by Tempo TravellerMathura to Ayodhya Tour by Tempo Traveller
Mathura to Ayodhya Tour by Tempo Traveller
 
My presentation on vietnam for Intercultural Communications
My presentation on vietnam for Intercultural CommunicationsMy presentation on vietnam for Intercultural Communications
My presentation on vietnam for Intercultural Communications
 
2024 Annual Meeting: Visit Portland, Maine
2024 Annual Meeting: Visit Portland, Maine2024 Annual Meeting: Visit Portland, Maine
2024 Annual Meeting: Visit Portland, Maine
 
Reflective Essay for global competency certificate
Reflective Essay for global competency certificateReflective Essay for global competency certificate
Reflective Essay for global competency certificate
 

Breaking the Mobile Web with HTML5

  • 1. BREAKING THE MOBILE WEB Max Firtman @firt firt.mobi Sep, 12th, 2011 Nashville Monday, September 12, 11
  • 2. who am I? mobile+web developer mobilexweb.com blog @firt Monday, September 12, 11
  • 4. where? buenos aires ~ argentina Monday, September 12, 11
  • 5. where? buenos aires ~ argentina patagonia soccer meat & wine tango Monday, September 12, 11
  • 6. where? buenos aires ~ argentina patagonia soccer meat & wine tango Monday, September 12, 11
  • 7. where? buenos aires ~ argentina patagonia true lies tango scene soccer meat & wine tango Monday, September 12, 11
  • 8. books Image from my house Monday, September 12, 11
  • 10. Using the Latest Today Mobile HTML5 coming soon... Estelle Weyl & Maximiliano Firtman also by @estellevw Monday, September 12, 11
  • 11. many of you have two questions for me Monday, September 12, 11
  • 12. the first answer is no Monday, September 12, 11
  • 13. the second answer is yes Monday, September 12, 11
  • 14. other projects Blog www.mobilexweb.com +40 links, +300 emulators www.mobilexweb.com/emulators typing long URLs on mobile? www.mobiletinyurl.com Monday, September 12, 11
  • 17. agenda ‣ why? Monday, September 12, 11
  • 18. agenda ‣ why? ‣ what’s the problem? Monday, September 12, 11
  • 19. agenda ‣ why? ‣ what’s the problem? ‣ why are we here? Monday, September 12, 11
  • 20. agenda ‣ why? ‣ what’s the problem? ‣ why are we here? ‣ mobile browsers today Monday, September 12, 11
  • 21. agenda ‣ why? ‣ what’s the problem? ‣ why are we here? ‣ mobile browsers today ‣ forget & learn Monday, September 12, 11
  • 22. agenda ‣ why? ‣ what’s the problem? ‣ why are we here? ‣ mobile browsers today ‣ forget & learn ‣ mobile web toolkit Monday, September 12, 11
  • 23. agenda ‣ why? ‣ what’s the problem? ‣ why are we here? ‣ mobile browsers today ‣ forget & learn ‣ mobile web toolkit ‣ html5 today Monday, September 12, 11
  • 24. agenda ‣ why? ‣ what’s the problem? ‣ why are we here? ‣ mobile browsers today ‣ forget & learn ‣ mobile web toolkit ‣ html5 today ‣ the future Monday, September 12, 11
  • 26. mobile devices are our flying cars Monday, September 12, 11
  • 27. mobile is more about users Monday, September 12, 11
  • 29. mobile ‣ absolutely personal Monday, September 12, 11
  • 30. mobile ‣ absolutely personal ‣ +5 billions Monday, September 12, 11
  • 31. mobile ‣ absolutely personal ‣ +5 billions ‣ make us focus Monday, September 12, 11
  • 32. mobile ‣ absolutely personal ‣ +5 billions ‣ make us focus ‣ read our context... Monday, September 12, 11
  • 33. mobile ‣ absolutely personal ‣ +5 billions ‣ make us focus ‣ read our context... ‣ ... always... Monday, September 12, 11
  • 34. mobile ‣ absolutely personal ‣ +5 billions ‣ make us focus ‣ read our context... ‣ ... always... ‣ ... and everywhere. Monday, September 12, 11
  • 35. then... what is the problem? Monday, September 12, 11
  • 36. mobile is a minefield Photo by World of Good (Flickr) Malvinas / Falklands Islands Monday, September 12, 11
  • 37. lots of questions Photo by wayneandwax (Flickr) Monday, September 12, 11
  • 38. we need to learn lots of questions Monday, September 12, 11
  • 39. lots of platforms Monday, September 12, 11
  • 40. mobile web appears Monday, September 12, 11
  • 41. native vs web Monday, September 12, 11
  • 43. Are you sure? Monday, September 12, 11
  • 44. native code vs javascript Monday, September 12, 11
  • 45. browser vs installed apps & stores Monday, September 12, 11
  • 46. lack of definitions Monday, September 12, 11
  • 47. when we say mobile web Monday, September 12, 11
  • 48. when we say mobile web from a developer’s perspective it’s using HTML, CSS and JavaScript to develop mobile apps Monday, September 12, 11
  • 49. when we say mobile web from a developer’s perspective it’s using HTML, CSS and JavaScript to develop mobile apps (browser or installed) Monday, September 12, 11
  • 50. what’s the problem with mobile web? Monday, September 12, 11
  • 51. we are second class producers Monday, September 12, 11
  • 53. second class ‣vague, non-existent or outdated documentation Monday, September 12, 11
  • 54. second class ‣ vague, non-existent or outdated documentation ‣ new features discovered by third-parties Monday, September 12, 11
  • 55. second class ‣ vague, non-existent or outdated documentation ‣ new features discovered by third-parties ‣ lack of samples Monday, September 12, 11
  • 56. second class ‣ vague, non-existent or outdated documentation ‣ new features discovered by third-parties ‣ lack of samples ‣ no developer tools Monday, September 12, 11
  • 57. what? Updated: 02 Sep 2011 Monday, September 12, 11
  • 58. Testing & debugging Monday, September 12, 11
  • 60. Photo by Ben Millett (Flickr) Monday, September 12, 11
  • 62. Are you sure to be happy? Photo by Ricky David (Flickr) Monday, September 12, 11
  • 63. What is ? Monday, September 12, 11
  • 65. html5 ‣ w3c standards (all in draft) Monday, September 12, 11
  • 66. html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards (css, svg, geolocation) Monday, September 12, 11
  • 67. html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards (css, svg, geolocation) ‣ de-facto standards Monday, September 12, 11
  • 68. html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards (css, svg, geolocation) ‣ de-facto standards ‣ w3c ex-standards Monday, September 12, 11
  • 69. html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards (css, svg, geolocation) ‣ de-facto standards ‣ w3c ex-standards ‣ everything “new” on the web Monday, September 12, 11
  • 71. html5 today: Monday, September 12, 11
  • 72. html5 today: lack of real, good and practical information for mobile on the html5 community Monday, September 12, 11
  • 73. caniuse.com • Simplification of the mobile web browser space • Inaccurate information Monday, September 12, 11
  • 74. Modernizr • Inaccurate information - inlinesvg and webgl Monday, September 12, 11
  • 75. html5test.com Not clear the html5 concept behind these tests Monday, September 12, 11
  • 76. let’s try to clarify Monday, September 12, 11
  • 78. Photo by Ben Millett (Flickr) Monday, September 12, 11
  • 80. mobile browsers ‣ too many Monday, September 12, 11
  • 81. mobile browsers ‣ too many ‣ (some) too limited Monday, September 12, 11
  • 82. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative Monday, September 12, 11
  • 83. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy based Monday, September 12, 11
  • 84. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy based ‣ (most) without documentation Monday, September 12, 11
  • 85. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy based ‣ (most) without documentation ‣ (most) without a name Monday, September 12, 11
  • 86. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy based ‣ (most) without documentation ‣ (most) without a name ‣ (most) without debugging tools Monday, September 12, 11
  • 88. mobile browsers ‣ (some) focus-based Monday, September 12, 11
  • 89. mobile browsers ‣ (some) focus-based ‣ (some) cursor-based Monday, September 12, 11
  • 90. mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-based Monday, September 12, 11
  • 91. mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-based ‣ (some) multitouch-based Monday, September 12, 11
  • 92. mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-based ‣ (some) multitouch-based ‣ (some) with zooming support Monday, September 12, 11
  • 93. mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-based ‣ (some) multitouch-based ‣ (some) with zooming support ‣ (most) unknown for web devs Monday, September 12, 11
  • 94. MOBILE WEB USAGE! Smartphones, Smartphones, Social,Phones, Social,Phones, Feature, Feature,Phones, Phones, MARKET SHARE! Monday, September 12, 11
  • 95. a quick, dirty list Monday, September 12, 11
  • 96. a quick, dirty list ‣ Safari on iOS ‣ Android Browser ‣ Nokia Browser for Symbian ‣ webOS Browser ‣ BlackBerry Browser ‣ Opera Mobile ‣ Opera Mini ‣ Firefox ‣ Internet Explorer Monday, September 12, 11
  • 97. a quick, dirty list (cont.) Monday, September 12, 11
  • 98. a quick, dirty list (cont.) ‣ Bada Browser ‣ NetFront ‣ Myriad ‣ Nokia Browser (Ovi) ‣ Phantom ‣ microB ‣ Skyfire ‣ BOLT Monday, September 12, 11
  • 99. they are on tablets too! Monday, September 12, 11
  • 100. they are on tablets too! ‣ Safari on iOS ‣ Android Browser ‣ webOS Browser ‣ BlackBerry Browser ‣ Opera Mini Monday, September 12, 11
  • 101. and with different versions... Monday, September 12, 11
  • 102. and there’s more! Monday, September 12, 11
  • 105. pseudobrowsers ‣ mostly on iOS and Android Monday, September 12, 11
  • 106. pseudobrowsers ‣ mostly on iOS and Android ‣ uses the internal web control Monday, September 12, 11
  • 107. pseudobrowsers ‣ mostly on iOS and Android ‣ uses the internal web control ‣ have different behavior than the native! Monday, September 12, 11
  • 109. don’t give up yet Monday, September 12, 11
  • 110. mobile IE reborn Monday, September 12, 11
  • 111. mobile IE reborn ‣ on Windows Phone Mango, full Internet Explorer 9 with HTML5 Monday, September 12, 11
  • 112. mobile IE reborn ‣ on Windows Phone Mango, full Internet Explorer 9 with HTML5 ‣ but... Monday, September 12, 11
  • 113. the WebKit problem Monday, September 12, 11
  • 114. the WebKit problem ‣ we are doing some things wrong Monday, September 12, 11
  • 115. the WebKit problem ‣ we are doing some things wrong ‣ mostly css3, using only -webkit prefix Monday, September 12, 11
  • 116. the WebKit problem ‣ we are doing some things wrong ‣ mostly css3, using only -webkit prefix ‣ IE9, Firefox, Opera second-class citizens Monday, September 12, 11
  • 117. the WebKit problem Monday, September 12, 11
  • 118. the WebKit problem ‣ do WebKit development for mobile Monday, September 12, 11
  • 119. the WebKit problem ‣ do WebKit development for mobile ‣ but also take care of the others Monday, September 12, 11
  • 120. the WebKit problem ‣ do WebKit development for mobile ‣ but also take care of the others ‣ please? Monday, September 12, 11
  • 121. we need to forget and learn Monday, September 12, 11
  • 123. forget about ‣ pixels Monday, September 12, 11
  • 124. forget about ‣ pixels ‣ static designs Monday, September 12, 11
  • 125. forget about ‣ pixels ‣ static designs ‣ desktop frameworks (ok, not always) Monday, September 12, 11
  • 126. forget about ‣ pixels ‣ static designs ‣ desktop frameworks (ok, not always) ‣ always connected Monday, September 12, 11
  • 127. forget about ‣ pixels ‣ static designs ‣ desktop frameworks (ok, not always) ‣ always connected ‣ unlimited power Monday, September 12, 11
  • 128. forget about ‣ pixels ‣ static designs ‣ desktop frameworks (ok, not always) ‣ always connected ‣ unlimited power ‣ everyone see the same Monday, September 12, 11
  • 129. forget about ‣ pixels ‣ static designs ‣ desktop frameworks (ok, not always) ‣ always connected ‣ unlimited power ‣ everyone see the same ‣ insulting your users Monday, September 12, 11
  • 130. forget about ‣ pixels ‣ static designs ‣ desktop frameworks (ok, not always) ‣ always connected ‣ unlimited power ‣ everyone see the same ‣ insulting your users ‣ device conditionals Monday, September 12, 11
  • 132. learn about ‣ server-side detection Monday, September 12, 11
  • 133. learn about ‣ server-side detection ‣ progressive enhancement Monday, September 12, 11
  • 134. learn about ‣ server-side detection ‣ progressive enhancement ‣ responsive design, but.... Monday, September 12, 11
  • 135. learn about ‣ server-side detection ‣ progressive enhancement ‣ responsive design, but.... ‣ mobile usability Monday, September 12, 11
  • 136. learn about ‣ server-side detection ‣ progressive enhancement ‣ responsive design, but.... ‣ mobile usability ‣ mobile use cases Monday, September 12, 11
  • 137. learn about ‣ server-side detection ‣ progressive enhancement ‣ responsive design, but.... ‣ mobile usability ‣ mobile use cases ‣ best experience for each context Monday, September 12, 11
  • 138. learn about ‣ server-side detection ‣ progressive enhancement ‣ responsive design, but.... ‣ mobile usability ‣ mobile use cases ‣ best experience for each context ‣ the “top model” approach, aka WPO Monday, September 12, 11
  • 139. learn about ‣ server-side detection ‣ progressive enhancement ‣ responsive design, but.... ‣ mobile usability ‣ mobile use cases ‣ best experience for each context ‣ the “top model” approach, aka WPO ‣ gain user loyalty Monday, September 12, 11
  • 141. learn about ‣ what’s the viewport and how applies to our designs Monday, September 12, 11
  • 142. learn about ‣ what’s the viewport and how applies to our designs ‣ what’s the target density (pixel ratio) Monday, September 12, 11
  • 143. learn about ‣ what’s the viewport and how applies to our designs ‣ what’s the target density (pixel ratio) ‣ how to fix elements on screen Monday, September 12, 11
  • 144. learn about ‣ what’s the viewport and how applies to our designs ‣ what’s the target density (pixel ratio) ‣ how to fix elements on screen ‣ how background code works Monday, September 12, 11
  • 145. learn about ‣ what’s the viewport and how applies to our designs ‣ what’s the target density (pixel ratio) ‣ how to fix elements on screen ‣ how background code works ‣ data URI - inlining content Monday, September 12, 11
  • 146. mobile web toolkit Monday, September 12, 11
  • 147. emulators www.mobilexweb.com/emulators Monday, September 12, 11
  • 148. friends lots of them Monday, September 12, 11
  • 149. virtual labs real devices on real networks www.perfectomobile.com www.deviceanywhere.com Monday, September 12, 11
  • 150. device libraries detect devices and abilities from server-side manually tested www.wurfl.com www.deviceatlas.com Monday, September 12, 11
  • 151. debugging tools remote web inspector (BB 7.0 y PlayBook) opera mobile (DragonFly) weinre phonegap.github.com/weinre debug.phonegap.com Monday, September 12, 11
  • 152. performance tools just starting... http://stevesouders.com/mobileperf/ Monday, September 12, 11
  • 153. and what about capabilities today? Monday, September 12, 11
  • 155. offline installation HTML5 3.0+ 2.1+ 6.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 156. offline installation ‣ Install a package on the device HTML5 3.0+ 2.1+ 6.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 157. offline installation ‣ Install a package on the device ‣ Complex to debug / reload HTML5 3.0+ 2.1+ 6.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 158. offline installation ‣ Install a package on the device ‣ Complex to debug / reload ‣ Buggy on some platforms HTML5 3.0+ 2.1+ 6.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 159. offline installation ‣ Install a package on the device ‣ Complex to debug / reload ‣ Buggy on some platforms ‣ online / offline events HTML5 3.0+ 2.1+ 6.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 160. offline installation ‣ Install a package on the device ‣ Complex to debug / reload ‣ Buggy on some platforms ‣ online / offline events ‣ on iOS can be mixed with icons and full- screen webapp metatags HTML5 3.0+ 2.1+ 6.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 161. geolocation Geolocation 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 162. geolocation ‣ GPS, A-GPS, Wi-Fi, cells Geolocation 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 163. geolocation ‣ GPS, A-GPS, Wi-Fi, cells ‣ (some) force GPS “highAccuracy” Geolocation 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 164. geolocation ‣ GPS, A-GPS, Wi-Fi, cells ‣ (some) force GPS “highAccuracy” ‣ (some) heading Geolocation 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 165. geolocation ‣ GPS, A-GPS, Wi-Fi, cells ‣ (some) force GPS “highAccuracy” ‣ (some) heading ‣ once or movement Geolocation 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 166. offline web storage Web Storage 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 167. offline web storage ‣ persistent and session storage Web Storage 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 168. offline web storage ‣ persistent and session storage ‣ key/value (strings) Web Storage 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 169. offline web storage ‣ persistent and session storage ‣ key/value (strings) ‣ (some) allow object storage Web Storage 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 170. offline web storage ‣ persistent and session storage ‣ key/value (strings) ‣ (some) allow object storage ‣ limit space, non-standard ~5Mb Web Storage 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 171. offline web storage ‣ persistent and session storage ‣ key/value (strings) ‣ (some) allow object storage ‣ limit space, non-standard ~5Mb ‣ be careful with private browsing Web Storage 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 172. offline sql storage deprecated 2.2+ 2.0+ 6.0+ Mobile 11+ Monday, September 12, 11
  • 173. offline sql storage ‣ persistent and session storage deprecated 2.2+ 2.0+ 6.0+ Mobile 11+ Monday, September 12, 11
  • 174. offline sql storage ‣ persistent and session storage ‣ key/value (strings) deprecated 2.2+ 2.0+ 6.0+ Mobile 11+ Monday, September 12, 11
  • 175. offline sql storage ‣ persistent and session storage ‣ key/value (strings) ‣ (some) allow object storage deprecated 2.2+ 2.0+ 6.0+ Mobile 11+ Monday, September 12, 11
  • 176. offline sql storage ‣ persistent and session storage ‣ key/value (strings) ‣ (some) allow object storage ‣ limit space, non-standard ~5Mb deprecated 2.2+ 2.0+ 6.0+ Mobile 11+ Monday, September 12, 11
  • 177. offline sql storage ‣ persistent and session storage ‣ key/value (strings) ‣ (some) allow object storage ‣ limit space, non-standard ~5Mb ‣ be careful with private browsing deprecated 2.2+ 2.0+ 6.0+ Mobile 11+ Monday, September 12, 11
  • 178. multimedia API Web Storage 3.0+ 2.3+ 7.0+ 9.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 179. multimedia API ‣ audio and video tags Web Storage 3.0+ 2.3+ 7.0+ 9.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 180. multimedia API ‣ audio and video tags ‣ javascript api & events Web Storage 3.0+ 2.3+ 7.0+ 9.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 181. multimedia API ‣ audio and video tags ‣ javascript api & events ‣ codecs nightmare Web Storage 3.0+ 2.3+ 7.0+ 9.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 182. server-sent events Server-Sent events 4.1+ Mobile 11+ 6.0+ Monday, September 12, 11
  • 183. server-sent events ‣ EventSource Server-Sent events 4.1+ Mobile 11+ 6.0+ Monday, September 12, 11
  • 184. server-sent events ‣ EventSource ‣ reduce AJAX/Comet solutions Server-Sent events 4.1+ Mobile 11+ 6.0+ Monday, September 12, 11
  • 185. server-sent events ‣ EventSource ‣ reduce AJAX/Comet solutions ‣ be careful with proxies/3g connections Server-Sent events 4.1+ Mobile 11+ 6.0+ Monday, September 12, 11
  • 186. web sockets web sockets 4.2+ 6.1+ Mobile 11+ 6.0+ Monday, September 12, 11
  • 187. web sockets ‣ Evolution of bi-directional communication web sockets 4.2+ 6.1+ Mobile 11+ 6.0+ Monday, September 12, 11
  • 188. web sockets ‣ Evolution of bi-directional communication ‣ reduce AJAX/Comet solutions web sockets 4.2+ 6.1+ Mobile 11+ 6.0+ Monday, September 12, 11
  • 189. web sockets ‣ Evolution of bi-directional communication ‣ reduce AJAX/Comet solutions ‣ be careful with proxies/3g connections web sockets 4.2+ 6.1+ Mobile 11+ 6.0+ Monday, September 12, 11
  • 190. web sockets ‣ Evolution of bi-directional communication ‣ reduce AJAX/Comet solutions ‣ be careful with proxies/3g connections ‣ special server web sockets 4.2+ 6.1+ Mobile 11+ 6.0+ Monday, September 12, 11
  • 191. web sockets ‣ Evolution of bi-directional communication ‣ reduce AJAX/Comet solutions ‣ be careful with proxies/3g connections ‣ special server ‣ standard changed months ago web sockets 4.2+ 6.1+ Mobile 11+ 6.0+ Monday, September 12, 11
  • 192. web workers web workers 6.0+ Mobile 11+ 6.0+ Monday, September 12, 11
  • 193. web workers ‣ threading in JavaScript web workers 6.0+ Mobile 11+ 6.0+ Monday, September 12, 11
  • 194. web workers ‣ threading in JavaScript ‣ important for performance web workers 6.0+ Mobile 11+ 6.0+ Monday, September 12, 11
  • 195. web workers ‣ threading in JavaScript ‣ important for performance ‣ worker without DOM manipulation web workers 6.0+ Mobile 11+ 6.0+ Monday, September 12, 11
  • 196. 2d drawing api (canvas) HTML5 1.0+ 1.5+ 6.0+ 9.0+ Mob 10+ / Mini 5 4.0+ Monday, September 12, 11
  • 197. 2d drawing api (canvas) ‣ great support HTML5 1.0+ 1.5+ 6.0+ 9.0+ Mob 10+ / Mini 5 4.0+ Monday, September 12, 11
  • 198. 2d drawing api (canvas) ‣ great support ‣ javascript-based drawing HTML5 1.0+ 1.5+ 6.0+ 9.0+ Mob 10+ / Mini 5 4.0+ Monday, September 12, 11
  • 199. 2d drawing api (canvas) ‣ great support ‣ javascript-based drawing ‣ (some) allows data URI export HTML5 1.0+ 1.5+ 6.0+ 9.0+ Mob 10+ / Mini 5 4.0+ Monday, September 12, 11
  • 200. svg SVG 2.2+ 3.0+ 4.7+ 9.0+ Mob 10+ / Mini 5 4.0+ Monday, September 12, 11
  • 201. svg ‣ old standard SVG 2.2+ 3.0+ 4.7+ 9.0+ Mob 10+ / Mini 5 4.0+ Monday, September 12, 11
  • 202. svg ‣ old standard ‣ scalable vector graphics SVG 2.2+ 3.0+ 4.7+ 9.0+ Mob 10+ / Mini 5 4.0+ Monday, September 12, 11
  • 203. svg ‣ old standard ‣ scalable vector graphics ‣ (some) allows inline <svg> tag SVG 2.2+ 3.0+ 4.7+ 9.0+ Mob 10+ / Mini 5 4.0+ Monday, September 12, 11
  • 204. svg ‣ old standard ‣ scalable vector graphics ‣ (some) allows inline <svg> tag ‣ (some) allows svg as background SVG 2.2+ 3.0+ 4.7+ 9.0+ Mob 10+ / Mini 5 4.0+ Monday, September 12, 11
  • 205. svg ‣ old standard ‣ scalable vector graphics ‣ (some) allows inline <svg> tag ‣ (some) allows svg as background ‣ (some) allows svg as font SVG 2.2+ 3.0+ 4.7+ 9.0+ Mob 10+ / Mini 5 4.0+ Monday, September 12, 11
  • 206. motion sensors DeviceOrientation 4.2+ 3.0+ 4.7+ (basic) 6.0+ (moz) Monday, September 12, 11
  • 207. motion sensors ‣ accelerometer / gyroscope / magnetometer DeviceOrientation 4.2+ 3.0+ 4.7+ (basic) 6.0+ (moz) Monday, September 12, 11
  • 208. motion sensors ‣ accelerometer / gyroscope / magnetometer ‣ onorientationchange DeviceOrientation 4.2+ 3.0+ 4.7+ (basic) 6.0+ (moz) Monday, September 12, 11
  • 209. motion sensors ‣ accelerometer / gyroscope / magnetometer ‣ onorientationchange ‣ window.orientation DeviceOrientation 4.2+ 3.0+ 4.7+ (basic) 6.0+ (moz) Monday, September 12, 11
  • 210. motion sensors ‣ accelerometer / gyroscope / magnetometer ‣ onorientationchange ‣ window.orientation ‣ games, visual effects, pressure detection? DeviceOrientation 4.2+ 3.0+ 4.7+ (basic) 6.0+ (moz) Monday, September 12, 11
  • 211. motion sensors ‣ accelerometer / gyroscope / magnetometer ‣ onorientationchange ‣ window.orientation ‣ games, visual effects, pressure detection? mobilexweb.com/samples/ball.html mobilexweb.com/samples/pressure.html DeviceOrientation 4.2+ 3.0+ 4.7+ (basic) 6.0+ (moz) Monday, September 12, 11
  • 212. new form controls HTML5 2.2+ (b) 5.0+ (adv) 9.0 (basic) 10+ (med) 6.0+ (med) Monday, September 12, 11
  • 213. new form controls ‣ variable support HTML5 2.2+ (b) 5.0+ (adv) 9.0 (basic) 10+ (med) 6.0+ (med) Monday, September 12, 11
  • 214. new form controls ‣ variable support ‣ basic=different virtual keyboard HTML5 2.2+ (b) 5.0+ (adv) 9.0 (basic) 10+ (med) 6.0+ (med) Monday, September 12, 11
  • 215. new form controls ‣ variable support ‣ basic=different virtual keyboard ‣ medium=new date, number, range HTML5 2.2+ (b) 5.0+ (adv) 9.0 (basic) 10+ (med) 6.0+ (med) Monday, September 12, 11
  • 216. new form controls ‣ variable support ‣ basic=different virtual keyboard ‣ medium=new date, number, range ‣ advanced=datalist HTML5 2.2+ (b) 5.0+ (adv) 9.0 (basic) 10+ (med) 6.0+ (med) Monday, September 12, 11
  • 217. new form controls ‣ variable support ‣ basic=different virtual keyboard ‣ medium=new date, number, range ‣ advanced=datalist ‣ (some) allows validation and css3 pseudo- classes HTML5 2.2+ (b) 5.0+ (adv) 9.0 (basic) 10+ (med) 6.0+ (med) Monday, September 12, 11
  • 218. touch events Touch events 3.0+ 2.1+ 6.1+ 6.0+ Monday, September 12, 11
  • 219. touch events ‣ iOS specification Touch events 3.0+ 2.1+ 6.1+ 6.0+ Monday, September 12, 11
  • 220. touch events ‣ iOS specification ‣ some differences between implementations Touch events 3.0+ 2.1+ 6.1+ 6.0+ Monday, September 12, 11
  • 221. touch events ‣ iOS specification ‣ some differences between implementations ‣ (some) multi-touch Touch events 3.0+ 2.1+ 6.1+ 6.0+ Monday, September 12, 11
  • 222. touch events ‣ iOS specification ‣ some differences between implementations ‣ (some) multi-touch ‣ touchstart, touchmove, touchend, touchcancel Touch events 3.0+ 2.1+ 6.1+ 6.0+ Monday, September 12, 11
  • 223. touch events ‣ iOS specification ‣ some differences between implementations ‣ (some) multi-touch ‣ touchstart, touchmove, touchend, touchcancel ‣ (some) touchenter, touchleave Touch events 3.0+ 2.1+ 6.1+ 6.0+ Monday, September 12, 11
  • 224. css3 basic CSS 3 1.0+ 1.0+ 6.0+ 9.0+ 10+ 6.0+ Anna+ Monday, September 12, 11
  • 225. css3 basic ‣ basic new styling CSS 3 1.0+ 1.0+ 6.0+ 9.0+ 10+ 6.0+ Anna+ Monday, September 12, 11
  • 226. css3 basic ‣ basic new styling ‣ rounded borders, opacity CSS 3 1.0+ 1.0+ 6.0+ 9.0+ 10+ 6.0+ Anna+ Monday, September 12, 11
  • 227. css3 basic ‣ basic new styling ‣ rounded borders, opacity ‣ (some) still requires prefix CSS 3 1.0+ 1.0+ 6.0+ 9.0+ 10+ 6.0+ Anna+ Monday, September 12, 11
  • 228. css3 basic ‣ basic new styling ‣ rounded borders, opacity ‣ (some) still requires prefix ‣ -webkit, -o, -moz, -ms CSS 3 1.0+ 1.0+ 6.0+ 9.0+ 10+ 6.0+ Anna+ Monday, September 12, 11
  • 229. css3 transforms CSS 3 2.0+ 2.0+ 6.0+ 9.0+ 11+ 6.0+ Anna+ Monday, September 12, 11
  • 230. css3 transforms ‣ basic 2d transforms CSS 3 2.0+ 2.0+ 6.0+ 9.0+ 11+ 6.0+ Anna+ Monday, September 12, 11
  • 231. css3 transforms ‣ basic 2d transforms ‣ -webkit, -o, -moz, -ms CSS 3 2.0+ 2.0+ 6.0+ 9.0+ 11+ 6.0+ Anna+ Monday, September 12, 11
  • 232. css3 transforms ‣ basic 2d transforms ‣ -webkit, -o, -moz, -ms ‣ rotate, scale, skew, translate CSS 3 2.0+ 2.0+ 6.0+ 9.0+ 11+ 6.0+ Anna+ Monday, September 12, 11
  • 233. css3 transforms ‣ basic 2d transforms ‣ -webkit, -o, -moz, -ms ‣ rotate, scale, skew, translate ‣ (some) matrix CSS 3 2.0+ 2.0+ 6.0+ 9.0+ 11+ 6.0+ Anna+ Monday, September 12, 11
  • 234. css3 transforms ‣ basic 2d transforms ‣ -webkit, -o, -moz, -ms ‣ rotate, scale, skew, translate ‣ (some) matrix ‣ (some) 3d transforms CSS 3 2.0+ 2.0+ 6.0+ 9.0+ 11+ 6.0+ Anna+ Monday, September 12, 11
  • 235. css3 transitions CSS 3 2.0+ 2.0+ 6.0+ 10+ 6.0+ Anna+ Monday, September 12, 11
  • 236. css3 transitions ‣ basic animations between 2 states CSS 3 2.0+ 2.0+ 6.0+ 10+ 6.0+ Anna+ Monday, September 12, 11
  • 237. css3 transitions ‣ basic animations between 2 states ‣ prefix CSS 3 2.0+ 2.0+ 6.0+ 10+ 6.0+ Anna+ Monday, September 12, 11
  • 238. css3 animations CSS 3 2.2+ 2.0+ 6.0+ 6.0+ Anna+ Monday, September 12, 11
  • 239. css3 animations ‣ keyframe animations CSS 3 2.2+ 2.0+ 6.0+ 6.0+ Anna+ Monday, September 12, 11
  • 240. css3 animations ‣ keyframe animations ‣ attribute prefix and keyframe prefix CSS 3 2.2+ 2.0+ 6.0+ 6.0+ Anna+ Monday, September 12, 11
  • 241. css3 animations ‣ keyframe animations ‣ attribute prefix and keyframe prefix ‣ duplication :S CSS 3 2.2+ 2.0+ 6.0+ 6.0+ Anna+ Monday, September 12, 11
  • 242. what is just starting...? Monday, September 12, 11
  • 243. apis starting to appear Monday, September 12, 11
  • 244. apis starting to appear ‣ XMLHttpRequest 2 - Android 3.0 Monday, September 12, 11
  • 245. apis starting to appear ‣ XMLHttpRequest 2 - Android 3.0 ‣ Navigation Timing API - Internet Explorer 9.0 Monday, September 12, 11
  • 246. apis starting to appear ‣ XMLHttpRequest 2 - Android 3.0 ‣ Navigation Timing API - Internet Explorer 9.0 ‣ Notifications API - Firefox 6.0 Monday, September 12, 11
  • 247. apis starting to appear ‣ XMLHttpRequest 2 - Android 3.0 ‣ Navigation Timing API - Internet Explorer 9.0 ‣ Notifications API - Firefox 6.0 ‣ Network Information API - Android 2.2+ Monday, September 12, 11
  • 248. apis starting to appear ‣ XMLHttpRequest 2 - Android 3.0 ‣ Navigation Timing API - Internet Explorer 9.0 ‣ Notifications API - Firefox 6.0 ‣ Network Information API - Android 2.2+ ‣ File API and FileReader API - Android 3.0 Monday, September 12, 11
  • 249. apis starting to appear ‣ XMLHttpRequest 2 - Android 3.0 ‣ Navigation Timing API - Internet Explorer 9.0 ‣ Notifications API - Firefox 6.0 ‣ Network Information API - Android 2.2+ ‣ File API and FileReader API - Android 3.0 ‣ CORS (cross-domain AJAX) - Android 2.2+, iOS 3.2+ Monday, September 12, 11
  • 250. apis starting to appear ‣ XMLHttpRequest 2 - Android 3.0 ‣ Navigation Timing API - Internet Explorer 9.0 ‣ Notifications API - Firefox 6.0 ‣ Network Information API - Android 2.2+ ‣ File API and FileReader API - Android 3.0 ‣ CORS (cross-domain AJAX) - Android 2.2+, iOS 3.2+ ‣ Media Camera API - Android 3.0 Monday, September 12, 11
  • 251. apis starting to appear ‣ XMLHttpRequest 2 - Android 3.0 ‣ Navigation Timing API - Internet Explorer 9.0 ‣ Notifications API - Firefox 6.0 ‣ Network Information API - Android 2.2+ ‣ File API and FileReader API - Android 3.0 ‣ CORS (cross-domain AJAX) - Android 2.2+, iOS 3.2+ ‣ Media Camera API - Android 3.0 ‣ IndexedDB - Firefox 6.0 Monday, September 12, 11
  • 252. and what to expect in the future? Monday, September 12, 11
  • 253. for next year... Monday, September 12, 11
  • 254. for next year... ‣ Augmented Reality on the web Monday, September 12, 11
  • 255. for next year... ‣ Augmented Reality on the web ‣ Camera API Monday, September 12, 11
  • 256. for next year... ‣ Augmented Reality on the web ‣ Camera API ‣ MathML Monday, September 12, 11
  • 257. for next year... ‣ Augmented Reality on the web ‣ Camera API ‣ MathML ‣ Idle detection Monday, September 12, 11
  • 258. for next year... ‣ Augmented Reality on the web ‣ Camera API ‣ MathML ‣ Idle detection ‣ Speech detection Monday, September 12, 11
  • 259. for next year... ‣ Augmented Reality on the web ‣ Camera API ‣ MathML ‣ Idle detection ‣ Speech detection ‣ 3D Drawing API (aka WebGL) Monday, September 12, 11
  • 260. for next year... ‣ Augmented Reality on the web ‣ Camera API ‣ MathML ‣ Idle detection ‣ Speech detection ‣ 3D Drawing API (aka WebGL) ‣ Native integration API Monday, September 12, 11
  • 261. for next year... ‣ Augmented Reality on the web ‣ Camera API ‣ MathML ‣ Idle detection ‣ Speech detection ‣ 3D Drawing API (aka WebGL) ‣ Native integration API ‣ Contacts and Calendar API Monday, September 12, 11
  • 262. for next year... ‣ Augmented Reality on the web ‣ Camera API ‣ MathML ‣ Idle detection ‣ Speech detection ‣ 3D Drawing API (aka WebGL) ‣ Native integration API ‣ Contacts and Calendar API ‣ Messaging API Monday, September 12, 11
  • 263. for next year... ‣ Augmented Reality on the web ‣ Camera API ‣ MathML ‣ Idle detection ‣ Speech detection ‣ 3D Drawing API (aka WebGL) ‣ Native integration API ‣ Contacts and Calendar API ‣ Messaging API ‣ Orientation Lock Monday, September 12, 11
  • 264. for next year... ‣ Augmented Reality on the web ‣ Camera API ‣ MathML ‣ Idle detection ‣ Speech detection ‣ 3D Drawing API (aka WebGL) ‣ Native integration API ‣ Contacts and Calendar API ‣ Messaging API ‣ Orientation Lock ‣ Debugging tools Monday, September 12, 11
  • 265. working on these APIs... Monday, September 12, 11
  • 266. working on these APIs... ‣ W3C Device APIs Working Group Monday, September 12, 11
  • 267. working on these APIs... W3C Device APIs Working Group ‣ http://www.w3.org/2009/dap/ Monday, September 12, 11
  • 268. working on these APIs... W3C Device APIs Working Group ‣ http://www.w3.org/2009/dap/ ‣ Mozilla WebAPI effort (3-6 months) Monday, September 12, 11
  • 269. working on these APIs... W3C Device APIs Working Group ‣ http://www.w3.org/2009/dap/ Mozilla WebAPI effort (3-6 months) ‣ https://wiki.mozilla.org/WebAPI Monday, September 12, 11
  • 270. working on these APIs... W3C Device APIs Working Group ‣ http://www.w3.org/2009/dap/ Mozilla WebAPI effort (3-6 months) ‣ https://wiki.mozilla.org/WebAPI ‣ WAC Monday, September 12, 11
  • 271. working on these APIs... W3C Device APIs Working Group ‣ http://www.w3.org/2009/dap/ Mozilla WebAPI effort (3-6 months) ‣ https://wiki.mozilla.org/WebAPI WAC ‣ http://www.wacapps.net/ Monday, September 12, 11
  • 272. can i use apis today? Monday, September 12, 11
  • 273. can i use apis today? ‣ PhoneGap Monday, September 12, 11
  • 274. can i use apis today? ‣ PhoneGap http://www.phonegap.com Monday, September 12, 11
  • 275. can i use apis today? ‣ PhoneGap http://www.phonegap.com ‣ BlackBerry WebWorks Monday, September 12, 11
  • 276. can i use apis today? ‣ PhoneGap http://www.phonegap.com ‣ BlackBerry WebWorks http://us.blackberry.com/developers/browserdev/ Monday, September 12, 11
  • 277. can i use apis today? ‣ PhoneGap http://www.phonegap.com ‣ BlackBerry WebWorks http://us.blackberry.com/developers/browserdev/ ‣ Nokia webapps Monday, September 12, 11
  • 278. can i use apis today? ‣ PhoneGap http://www.phonegap.com ‣ BlackBerry WebWorks http://us.blackberry.com/developers/browserdev/ ‣ Nokia webapps http://www.developer.nokia.com/Develop/Web/ Monday, September 12, 11
  • 279. some last advices Monday, September 12, 11
  • 281. performance, performance Monday, September 12, 11
  • 283. don’t be fanatic photo by Kurt Christensen (flickr) Monday, September 12, 11
  • 285. best experience for every context Monday, September 12, 11
  • 286. you can reach a good thank you! experience firt.mobi firtman@gmail.com twitter: @firt www.mobilexweb.com Pictures)from)freedigitalphotos.net) Monday, September 12, 11