SlideShare ist ein Scribd-Unternehmen logo
1 von 170
Downloaden Sie, um offline zu lesen
reset
                                                   the web
                                        a brief stroll into our past and our future




http://www.flickr.com/photos/karen_roe
the web is less than
                                                             8000 days old...

Hat tip to Kevin Kelly - The next 5000 days of the web        http://www.flickr.com/photos/psd/3149878971
it reaches
                                                                       1/3* of
                                                                       people
                                                                       on our planet




*2012 estimates put the population at about 7 billion inhabitants...     http://www.flickr.com/photos/vitroids/2753929716
it powers business,
   entertainment,
                 learning...




   http://www.flickr.com/photos/viirok/2498157861
and so
and so much more...




        http://www.icanhascheezburger.com/
but what is   the web
        for?




                        http://www.flickr.com/photos/34233222@N05/4292987392
probably not surprisingly...
I found the beginning of an
answer through this man...
a few years before the Macintosh…
   ...in 1980 Steve Jobs recounted
          the following story...
“    in the early 70s, Scientific American
did a study on the efficiency of locomotion...




                        it was actually the 1970’s, not 1870’s… ;)




                                        http://www.flickr.com/photos/boston_public_library/4328032194
“
...for all different species of things on the planet
               ...birds, cats, dogs goats...
A                                                 B




    “  ...they measured, how much energy
does it take for a goat to get from here to there...
“...they then ranked them, and published a list

1.
23.
32.
18.
       California Condor
       Domestic cat
       British Alpine Goat
       Springer Spaniel
                                  a lazy glider
                                  prefers to sleep
                                  see goatsonstuff.com
                                  prefers to swim…
27.    Red-breasted Robin         faster than most
8.     American Saddlebred        -
298.   Banana Slug                faster than a rock…
3.     Cheetah                    currently missing
207.   Humming Bird               got tired watching it.
-      Bumble Bee                 couldn’t find one…
183.   Elephant                   forgot
342.   Bob…                       not his finest moment…
1.   California Condor            a lazy glider…




“     of all the animals, the condor won. It took
the least amount of energy to get from here to there...
“    man however didn’t do so well...

342. Bob…                        not his finest moment…
?




“
man came a rather unimpressive showing...
   a third of the way down the list...
“
...but fortunately, someone was insightful
    enough to test man on a bicycle...
“    and man with a bicycle won...




1.   Bob on a bicycle             one of his better days…
“
...twice as good as the condor,
     all the way off the list..
“
...what it showed was that man as a tool maker,
    has the ability to create tools, to amplify
               an inherent ability...
released 1984




“
...and that’s exactly what we’re doing here
    (Steve of course was talking about Apple, and the development
                of one of the first personal computers)
Steve Jobs went on to explain that computers were
 just one in a long line of tools created by man...
...just as the bicycle amplified our ability
to use our muscles, tendons and brains
           to transport our bodies...
...just as the tools and technologies
    of the industrial revolution were
“an amplification of human sweat”...
...the computer amplified our human abilities
   of memory, problem-solving, calculation,
     projection, analysis, and so much more...




                      http://nicelifeapparel.wordpress.com/tag/crazy-math-problem/
Steve Jobs also realized
that the computer was
 just the beginning...
“
There is something very
special and historically
different that takes place,
when you have one
computer, for one person,
rather than one for many.
                            - Steve Jobs




      http://www.flickr.com/photos/aidanmorgan/3709199304/
(as it happens) this statement is
   also true of the Internet...
the Internet’s ability to amplify knowledge
began as a purely academic and scientific tool...




                                http://www.flickr.com/photos/epitti/2371715992
...but its true potential was only revealed when
it became a ubiquitously available tool...




                               http://www.flickr.com/photos/olpc/2929782994
“
                                                  Nobody has any idea
                                                  of what a new invention
                                                  will really be good for.
                                                  The crucial question is,
                                                  what happens when
                                                  everyone has one?
                                                                - Kevin Kelly




http://www.flickr.com/photos/goincase/4647893507
open and universally accessible
 ...when we connected a browser to the Internet
we couldn’t have guessed what it would become...




                                          http://www.flickr.com/photos/tanaka/3212368979
...when we connected the Internet
to a glowing rectangle, we thought we were
           creating a ‘smart’ phone...
but this is not
a smartphone...
it’s
"A device to
  amplify
 curiosity"
- John Seely Brown
...and while this doesn’t really explain
what the web is for, it begins to clarify
     it’s immense value to all of us...
being always connected to an open platform,
    accessible by anyone with a browser,
     has forever changed the way we live...
“
...hold on...let me
look that up...
I just happen to
have the sum of
human knowledge
in my pocket...
                             - @fj




    http://www.flickr.com/photos/w00kie/2752309431
“
                                             ...the magic is
                                             in my palms,
                                             god knows what
                                             I would do
                                             without this....
                                             Omar, 19, Hafeezpet, India




Source: Anthropology, development and ICTs       http://www.flickr.com/photos/jonhurd/2367208101
not too shabby for
           8000 days...

    http://www.flickr.com/photos/psd/3149878971
But how did we really get here?
To understand this better, let’s take a step back...
...and talk a bit
                   about plumbing.




Part 2: plumbing




                     http://www.flickr.com/photos/nnova/2923859643
all technological revolutions

require a level of plumbing
                or if you prefer...infrastructure




                                                    http://www.flickr.com/photos/wheatfields/2110680492
plumbing provides

a common framework

or scaffold on which

to innovate




Source: ToBeDetermined.org
the rise of computers, the Internet,
the web and mobile have been intricately linked...
...to the invention, implementation
and market adoption of this type of plumbing...
hardware
                             900                   Microprocessor
                                                   integrates CPU function
                                                   onto a single chip.
                             800                                                       Compaq, DEC,IBM,
                                                                                       Intel, Microsoft, NEC
                                                "Moore's Law" predicts the             and Nortel begin
                             700                future of integrated circuits.         work on USB.
millions of Internet hosts




                                                          first 64-bit processor                                First 64-bit
                             600                          in a supercomputer                                    processor in a
                                                                                                                personal
                                                                                                                computer.
                             500
                                       An all semiconductor                                Intel 32-bit
                             400       "Solid Circuit" is                                  Pentium
                                       demonstrated by                                     processor
                                       Jack Kilby.        Personal computers begin         released.
                             300                          to appear. Resistive touch
                                                          screens are patented.
                                   Transistorized
                             200                                                               ARM6 processor
                                   computers                  First human-                     is released.
                                   emerge.
                                                              input multi-touch
                             100                              system.

                              0
                                   50 55 60 65 70 75 80 85 90 91 93 93 94 95 96 97 98 99 00 01 02 03 04 05 06 07 08 10 11 12




chart: world Internet hosts, source: ISC - 1981-2012, other data primarily from Wikipedia
network
                             900                                TCP/IP based                         First IPv6
                                                                NSFNET          First person to      description.
                                                                established.    person SMS
                             800                                                sent in Finland.          NTT DoCoMo
                                                             TCP/IP standardised,                         introduces the first
                             700                             and Internet introduced.                     full mobile Internet
millions of Internet hosts




                                                                                                          service in Japan.
                                                         DNS
                             600                     invented
                                                                                           Transition from          NTT DoCoMo
                                                                                           ARPANET/NSFNET           launches first
                                                                                           networks to the
                             500                           NMT launches 1G                                          commercial 3G
                                                                                           modern (commercial)
                                                           networks in Denmark,                                     network in Japan.
                                                                                           Internet.
                                                           Finland, Norway and
                             400                           Sweden.
                                     First ARPANET                First commercial               9 companied
                                                                                                 including IBM,
                             300     link established.            dialup ISP in the U.S.
                                                                                                 Intel, Nokia and                       295 million
                                                         NTT launches                            Microsoft agree                        subscribers on
                             200                         first (1G)   First GSM (2G)             to Bluetooth                           3G networks
                                                         cellular     network launches in        standard.                              worldwide.
                                                         network.     Finland. Wi-fi invented
                             100                                      by NCR/AT&T.

                              0
                                   50 55 60 65 70 75 80 85 90 91 93 93 94 95 96 97 98 99 00 01 02 03 04 05 06 07 08 10 11 12




chart: world Internet hosts, source: ISC - 1981-2012, other data primarily from Wikipedia
the web
                             900
                                                                 First JPG
                                                                 standard.      W3C founded.
                             800                                                TBL makes the Web freely
                                                                                available with no patents or
                                                         Compuserve             royalties. Launch of WebCrawler
                             700                         introduces the         (first full-text search engine).
millions of Internet hosts




                                                         GIF format.
                                                                                           PNG
                             600                               Debut of the Web as a format
                                                               publicly available          approved.
                                                               service on the Internet.
                             500
                                                                          Mosaic             HTML 4.01
                                                                          (first graphical recommended                             YouTube
                             400                                          browser)
                                                                                                  WAP &          XHTML MP          launches.
                                                     SGML
                                                                                                  CHTML          released.
                             300                                                    HTML
                                                                                                  released
                                                          Tim Berners-Lee           2.0
                                                          builds all the tools      CSS                       Wikipedia
                             200                                                        Start of              launches. Facebook           HTML5
                                                          necessary for a
                                                                                        Google                                             working
                                                          working Web (HTTP,                                               launches.
                                                                                        research                                           draft.
                                                          HTML, a browser
                             100                          and server)                   project.

                              0
                                   50 55 60 65 70 75 80 85 90 91 93 93 94 95 96 97 98 99 00 01 02 03 04 05 06 07 08 10 11 12




chart: world Internet hosts, source: ISC - 1981-2012, other data primarily from Wikipedia
with each layer of plumbing comes new innovations
     (which spawn or inspire more plumbing...)
product innovation
                             900

                             800
                                                       Microsoft                                 Palm
                                                       Windows first                                                                  iPad
                                                                                                 Pilot
                             700                       announced.
millions of Internet hosts




                                                                       First person
                             600                                       to person
                                             Nokia begins              SMS sent in          Symbian Ltd.       First
                                             manufacturing             Finland.             formed by          BlackBerry
                             500             telecommunications                             Ericsson, Nokia,   smartphone.       iPhone
                                             equipment.                                     Motorola & Psion
                             400                                            Apple Newton          First RIM
                                                                            platform              pager
                                                                            launched.                                First WebKit
                             300                                                                          First      mobile browser    iPhone 4
                                                                                  Windows                 Symbian                      330 ppi
                                                                                                                     (Nokia)
                                                                                  95      iMac            device.                      display
                             200
                                                                                            G3                          Nokia E60
                                                     Macintosh                                                          260 ppi       Palm
                             100                     Classic                                                            display       WebOS

                              0
                                   50 55 60 65 70 75 80 85 90 91 93 93 94 95 96 97 98 99 00 01 02 03 04 05 06 07 08 10 11 12




chart: world Internet hosts, source: ISC - 1981-2012, other data primarily from Wikipedia
The First Internet Router
                                                                                   The BBN Interface
                                                                                   Message Processor did
                                                                                   the packet routing for
                                                                                   the ARPANET in 1969,




                  “                ...it takes on average 20 years for a technology to make
                                   the transition from first articulation...to maturity
                                   (defined as becoming a $1billion industry)…the mouse,
                                   for example, took 30 years.
                                   – Bill Buxton, Principle researcher Microsoft


http://www.flickr.com/photos/kiwanja/3169409467/
during this time
lack of infrastructure may

cause some to

fall behind...
...or sometimes

                                                     leap ahead


http://www.flickr.com/photos/kiwanja/3169409467/
but the infrastructure of the web
(the common framework on which
    we continue to innovate...)
was based on

                                                       mental models

                                                of a very different time




http://www.flickr.com/photos/ona1a/4521406829/
...models that may soon no longer apply

                                      2000
      Internet Users (MM) Estimated




                                      1500


                                                                                          the inflection point is near...
                                      1000
                                                                                          within 2 years mobile users
                                                                                          are expected to exceed
                                                                                          desktop users

                                       500




                                        0
                                         2007   2008    2009      2010   2011   2012     2013       2014        2015

                                                       Mobile users             Desktop users




Source: Morgan Stanley Associates Internet Trends 2010 (PDF)
Part 3: welcome to the future




          http://www.flickr.com/photos/whiteafrican/2938685296
a short stroll into the future...



 contexts will   everything   just in time    content will
be varied and      will be    will replace   (need to) flow
unpredictable    connected    just in case     like water
today’s digital

and connected things

may feel incredibly diverse...

                                 http://www.flickr.com/photos/_dchris/4652995362
...but they are still
                                               deeply rooted to our past


http://www.flickr.com/photos/terry/5388630668
a small selection of near future devices
A random internet connected watch. More connected wearable devices are on the way.




                                                                                tiny

                                                                            personal

                                                                         constrained

http://www.flickr.com/photos/scobleizer/5263223798
large      stationary

 public       short use

     (sweaty) touch




Internet enabled treadmill. Currently considered a luxury product (...give it 18 months).
One of many Smart (internet enabled) TVs now shipping. Includes apps and a browser.
Some can be paired with a smartphone or tablet remote control.




                             large

                    social           stationary        low-ish ppi

      remote (voice, gesture, app)         lean-back      powerful (enough)
The new Tesla X with a internet-enabled touchscreen dashboard with apps and browser.




                                                              small      touch, voice

                                                             fixed (but not stationary)

                                                             bandwidth constrained
Quantas A380 first class with 17” flat panel display.
                 (Tethered tablets will likely appear soon).




                                               large(r)      public

                                              fixed (but not stationary)

                                              manipulation unknown

                                            bandwidth constrained
source: PC Mag
“         ...a companion to smartphones, tablets, PC, Macs, and adds smart
                  capabilities to existing displays, TVs, set top boxes and other devices.




                            Cotton Candy
                       a Screen independent
                         but otherwise fully
                        functional USB sized
                          ‘plug computer’.

                       ARM Cortex A9, Wi-fi,
                       Android, Ubuntu, with
                       virtualization client for
                            Win/Lin/Mac


                                                          many unknown unknowns




http://www.fxitech.com/products/
Bluetooth
      The Magic Cube
   is an ultra-portable,        productivity
     full-sized virtual
  computer keyboard         helper-appliance
with support for Android,
   iOS and any device
   with Bluetooth HID
          support.
Shipping spring 2012 in Europe
  LG’s EPD is a 6-inch, 1024×768 e-ink plastic screen. It’s
  0.7mm thick, it weighs 14g, and LG claims it’s resistant
  to scratches and drops from a 1.5 meter height.




    small(-ish)

       flexible           constrained

     many unknown unknowns




source: Green autoblog
“
We think technology
should work for you—
to be there when you
need it and get out of
your way when you don’t.

    tiny       voice, gesture?

    personal       constrained

    many unknown unknowns




                                 Google Glass
Golden-i head-mounted mobile computer for industrial settings such as construction,
 military, and security services. Includes SVGA microdisplay, Win-CE and voice recognition.




         tiny               voice, gesture

        personal                constrained

        many unknown unknowns




http://www.mygoldeni.com/
these contexts may be diverse,
but they still kinda ‘fit’ our mental models
for both the original ‘thing’ and the web
old
      thing
     (or media,
      or tool)



          +
connectivity


  software
          +
          +
user interface

  smart
          =
      thing

       old thing
 (just a bit smarter)
more often than not...
 the ‘smart’-ness

 has been bolted on




http://www.flickr.com/photos/mujitra/7053687599
this likely won’t be the pattern going forward,
             here’s why....
a short stroll into the future...



 contexts will   everything   just in time    content will
be varied and      will be    will replace   (need to) flow
unpredictable    connected    just in case     like water
Moore’s Law is
 close to 50 years old



Source: Intel
we’ve come
                      a very long way...




   1982                           2007
                                   1st gen.
Osborne Executive
                                   iPhone
1/100th MHz CPU
1/1000th the memory
100x the weight
10x the cost

                            Source and photo: Wikipedia
it now costs almost
                                                  nothing to make
                                                 something ‘smart’
                                                   or connected...

http://www.flickr.com/photos/slgc/6286652858
the new ARM
                        Cortex-M0+ uses

                                1/3
                      of the energy of an
                     8 or 16-bit processor




Source: New ARM chips herald Internet of things
it costs

                  30 cents           (£0.20)




Source: New ARM chips herald Internet of things
...and measures

                          2 mm        (0.07”)




Source: New ARM chips herald Internet of things
yesterday: multiple chips




                 today: one chip that does
                     the work of three




Source: ThingM
some chips are optimized for
                 a specific unit of functionality
                                               my job is to
                       my job is to
                                               connect to
                       provide GPS
                                              mobile phone
                       coordinates
                                                networks




Source: ThingM
my job is to
 provide GPS
 coordinates




                     Brad Frost


                 +                              =        WTF?
                     At airport gate ready to
                     head to @bdconf. Sadly
                     the large suction cups I
                     was going to use to
                     scale the biodome got
                     confiscated. #bdconf
                                                    “The Tweeting GeoLocation
                                                          aware Toaster”

 my job is to
connect to the
   Internet
“            object oriented hardware...
                                                ...functionality abstracted into silicon.
                                                                       - Mike Kuniavsky, ThingM




http://www.flickr.com/photos/negativz/41549347                                                     Source: ThingM
soon...
                                                               I may not even
                                                              need batteries :-)




     “           Ambient radio waves...can already provide enough energy
                 to substitute for AAA batteries in some calculators, temperature
                 and humidity sensors, and clocks....

                 We are on the cusp of an explosion in small wireless
                 devices...that can run on alternatives to battery power.
                 Devices like this can live on and on.


Source: The computer trend that will change everything and Bye-Bye Batteries: radio waves as a low-power source
“         ...embedded in
      everything
            will be a            sliver of webness
                                 - Kevin Kelly, founding editor Wired




Cute circuit - wearable technology
the more we peer into the future,
the more invisible this ‘web-ness’ becomes
a short stroll into the future...



 contexts will   everything   just in time    content will
be varied and      will be    will replace   (need to) flow
unpredictable    connected    just in case     like water
mobile is dramatically
shifting web behaviour
we are accessing

the web at any time

    and any place...
but current behaviour
  is still quite implicit




    http://www.flickr.com/photos/intelfreepress/5922668169
yesterday                    today




 “go to the computer”     open a browser (or app)
to use the web/Internet   to use the web/Internet
....and experiences are built accordingly
today’s just in case web
 (because you never quite know what they’ll need)




              information

                                         shopping
                         products

  support



                                 brand
            web site
                                         infotainment
                                social


tools
                  corporate     PR

                              jobs
            investor


                news
today’s just in case web + apps
                                          (now with added experience)




“
Our apps offer the best experience...
(so please download, install and keep
them updated, just in case that time
comes...we promise you won’t regret it)


                                                       support
                                                                   information


                                                                               products
                                                                                                shopping




                  shopping

                                                                                        brand
                         infotainment                            web site
           native                                                                               infotainment
                                                                                       social
    tool
            apps
                                                    tools

                tool                                                     corporate     PR

                                                                                     jobs
                                                                 investor


                                                                        news
...but I don’t want to
 own your app, I want
 to own the possibility
   space of your app.




Paraphrased from Mike Kuniavsky @ Webdirections South   http://www.flickr.com/photos/zenilorac/698514624
tomorrow's just in time web
                  (because everything is connected)




I’d like to use whatever device I have
on-hand to learn more about this thing/
tool/service/place (right here and right
now)...please show me what I can do.

                                                                support



                                                         information




                      tools




                                Like+
                                           smart thing
“
...a world where our devices load
applications opportunistically
as we need them, in real time.

The technological model for this...
is web pages. But these will be web
pages with advanced functionality that
can be accessed seamlessly from
remote or local networks—and even
from other mobile devices.
- Scott Jenson on Forbes: Apps are over




                                          http://www.flickr.com/photos/keepwaddling1/3048726936/
does this mean
             web sites will
                        go away?




OMG...               ”
 http://www.flickr.com/photos/richardmoross/1413692087
no, probably not...
...web sites will be just one of many interfaces
      we will use to interact with a service
the GlowCap service

                                   Your doctor or designated              Your pharmacy
                                     family member receives           is alerted when refills
                    light           regular progress emails.                  are due.



                                                     data               data
                                                     out                out




                            data        data
                             in         out


                                                                               data
                                                            service            out
         wireless
         enabled
           chip                                Each time the cap is opened,
                                                   data is transmitted
                                                 to the GlowCap service.

                The cap lights up,               Data is also transmitted,                A real-time web (or app)
             and plays a sound each             to trigger a reminder call                based progress report is
             time medication is due.                 if you miss a dose.                           available.




Vitality GlowCaps
“   The most profound technologies are those that
    disappear. They weave themselves into the fabric of
    everyday life until they are indistinguishable from it….
    - Mark Weiser (1991 chief scientist Xerox PARC)




                                                      http://www.flickr.com/photos/armaggeusa/3176297283
a short stroll into the future...



 contexts will   everything   just in time    content will
be varied and      will be    will replace   (need to) flow
unpredictable    connected    just in case     like water
responsive design is really just the beginning...
once we can envision this...



          contexts will
         be varied and
         unpredictable




 everything         just in time
   will be          will replace
 connected          just in case
this no longer feels
that strange...
“Get your content ready to go anywhere
because it’s going to go everywhere.”
- Brad Frost



                                         http://www.flickr.com/photos/sackerman519/5045015997/
but if content will be like water...
what kind of plumbing will we need?



                      http://www.flickr.com/photos/evdaimon/165589586
Part 4: re-imagining plumbing




http://www.flickr.com/photos/jonasb/2751113526
disclaimer: these ideas focus on a tiny sliver...
primarily related to the browser and the web platform
it’s easy to forget how much infrastructure
we’ve already built into the web as a platform
some of it was
necessary structural
scaffolding




                       http://www.flickr.com/photos/dandeluca/2720139047
form elements - v.1
HTML 4.01 - they haven’t failed us yet...
some focussed on user productivity...
browser productivity features
                                combined search/URL bar (and/            favourites
             favicon signpost       or choice of search engine)
    security signpost                                             tabs     RSS        extensions

     back buon
(added in 1993!)
                                                                                             find in
                                                                                             browser
  shortcuts &
   bookmarks




   status bar                                                                                zoom (Opera
                                                                                             version shown)
access keys navigation
first introduced in 1999 (and not specifically for mobile)




                        1. Home
                        2. Products
                        3. Articles
                        Contact us

                                      Products.html


         Home.html                      Articles.html
others were a response to change...
tel and SMS URI schemes
 introduced around 2000 via WTAI




            1. Home
            2. Products
            3. Articles
            Contact us    <a href="tel:12345">Contact Us</a>
visual navigation aids on mobile
                            Nokia Browser for S60 circa 2005




                                                               Visual Back key
MiniMap viewport                                               preview.
preview rectangle.
                                                               I really miss this
Once focussed,                                                 feature! Much
clicking the navipad                                           clearer and didn’t
would zoom the                                                 force you to reload
layout.                                                        pages you didn’t
                                                               want to see again :-(
(Very similar to
Apple’s double-tap
to zoom.)
built-in reader modes
“Reader lets you view web articles free of clutter.”
                                                       we’re entirely to
                                                       blame for this bit...
proxy web browsers
              polyfill for many of our existing problems




OperaMini   UCWeb         Nokia Browser             Amazon Silk - 2011
  2005       2005         for S40 - 2011
on-the-fly user agent switching
            most browsers now include this ‘feature’
                                                             we’re somewhat to blame
                                                             for this bit as well...




                                                                    Abandon hope all ye
                                                                    who enter here




Dolphin browser for Android        Maxthon browser for Android
recent specifications
continue to bake-in common functionality...
...offloading aspects of behaviour
and rendering to the browser/platform
form elements - v.2
cleaner markup thanks to out of the box functionality



                                placeholder
                                  validation
HTML5 notifications API
out of the box components and behaviours
end result: intelligent, responsive, platform-appropriate
           yet adaptable default components...
a robust set of
            behaviours is           “responsiveness” is   lower-level platform access
            already baked-in        baked in by default   improves the user experience



end result: intelligent, responsive, platform-appropriate
           yet adaptable default components...
              aspects are               future-friendly
              styleable and             (and gracefully
              addressable through       degradable)
              the built-in API
the loss of control is generally welcome
     compared to the alternative...
a menu and header in a
                                     box with rounded corners
                                     before CSS3 & HTML5




look ma...no divs (and semantics!)         ...and after
form placeholders before HTML5
lots of potential issues
• cross browser support for entire
    behaviour (e.g. populate the field
    then clear it on focus)
• accessibility of placeholder value
• 4kb uncompressed (not huge..but
    adds up with each new element of
    functionality you build in)
• requires maintenance and testing
    for each new browsers/versions/
    form factors and manipulation
    models (touch, voice etc.)




                   after CSS3
                   and HTML5



                         and so on...
“       ...everything you add to the page is something you’re
                                taking away from the latency profile of that page
                                    ...everything you add—just as infrastructure
                                              to make things work—all these
                                                   things have a cost.
                                                                      - Alex Russell




Alex Russell speaking at London JS                                      Tilt 3D add-on for Firefox
in the future, it may make sense to take these
     approaches approach even further...
a few ideas...
(warning: ideas presented in order of potential
        disruption to the status quo)
idea #1

          Problem: Back to top links are useful to
          improve usability of longer pages.
          • Thanks to viewport diversity, ‘long’ is a variable value.
          • Sprinkling hard-coded anchors throughout content
            isn’t future friendly.

          • Adding them dynamically (on the client or server) based
            on context detection seems like needless heavy lifting.

                                                  i’ve seen this done...it works well
                                                  enough but isn’t a long-term strategy
vertical navigation
shortcuts

 • In QQ’s implementation,
     a tap scrolls the layout up or
     down by a (random) increment.
 •   Scrolling is accelerated                                              darkened for
     to improve the experience.                                            demonstration
                                                                           purposes
 •   Can be disabled by the user.
 •   Should ideally be customizable.
     e.g. option to instead map controls
     to a full ‘page-up/down’ behaviour.
 •   A nice companion to Apple’s
     “tap to reveal URL bar” gesture.

                                              sample implementation
                                           on Tencent’s QQ browser (iOS)
idea #2

          Problem: On the web, social media sharing
          and discovery is currently enabled client-side,
          using lots of third party scripts.
          • Scripts may not be compatible with all browsers.
          • Interactions are rarely responsive to changes in context.
          • Social widgets (often) cause lots of HTTP requests and
              have been known to block page load.
          •   The more popular social media gets, the more widgets
              we will (technically) need.
they also introduce
a fair bit of noise :-(
           it’s not like we don’t
           have a bit too much
           noise already...
studies suggest
                social networks
               now reach close to


                  70%
                 of the worldwide
                     population




                                                but are also unlikely
                                                       to go away...



Source: Social networks around the world 2010
• Social media is already
    weaving its way through
    mobile platforms.
•   Functionality is currently
    limited to glanceable
    home screen widgets, and
    easy in-browser sharing.
but social widgets
  aren’t content,
nor are they really
        chrome...
“      Mobile is the needle,
       social is the thread...
                                    - Pew Internet &
                                American Life Project




                                                            which means they
                                                        may just be...plumbing




http://www.flickr.com/photos/preetamrai/5454799225
user configurable

                                                                        bake-in a
                                                              social sharing layer




user configurable:                                         bubbles up
turn it off or fill it                                      glanceable
with your favourites                                      information




                         (loose and clunky attempt at
                       visualizing how this might work)
idea #3

          Problem: There are only so many ways
          to re-arrange complex navigation.
          • there will be many, devices of all shapes, sizes,
              capabilities and manipulation models
          •   we can only simplify sites so much...some will
              remain big, with a complex multi-level
              architecture
what would happen
                                                                if we offloaded
                              MENU


Apple Gives Share-
                                                         top-level navigation
holders More Input;
Will Facebook Get the
Message?
                                                                to the browser?
By Tim Carmody
February 24, 2012 | 4:26 pm
                                     a content first
At its annual shareholders meet-
ing on Thursday, Apple’s man-        approach to top-level
agement bowed to pressure
from key investors and agreed to
allow shareholders to elect
                                     navigation...
board directors by a simple ma-
jority vote.

Now any new or current director
standing for election who fails to
receive support from a majority
of shareholders must resign his
wired.co.uk’s
56 item top level navigation
         which admittedly could use a trim
MENU                                      MENU              Apple Gives Share-                           Apple Gives Sh
                                                                                          holders More Input;                          holders More
Apple Gives Share-                        Apple Gives Share-                              Will Facebook Get the                        Will Facebook
holders More Input;                       holders More Input;                             Message?                                     Message?
Will Facebook Get the
                    Home                  Will Facebook Get the                Home       By Tim Carmody          Home                 By Tim Carmody
Message?                                  Message?                                        February 24, 2012 | 4:26 pm                  February 24, 2012 | 4:26
By Tim Carmody
                                News      By Tim Carmody
                                                                               News                               News
                                                                                          At its annual shareholders                   At its annual shareho
February 24, 2012 | 4:26 pm               February 24, 2012 | 4:26 pm
                                Reviews                                        Reviews    meeting on Thursday, Reviews                 meeting on Thursda
At its annual shareholders meet-          At its annual shareholders meet-                Apple’s management bowed                     Apple’s managemen
ing on Thursday, Apple’s man-             ing on Thursday, Apple’s man-                   to pressure from key inves- Phones           to pressure from key
                             Photos                                            Photos                           Mobile
agement bowed to pressure                 agement bowed to pressure                       tors and agreed to allow                     tors and agreed to a
from key investors and agreedVideo
                              to          from key investors and agreed to                shareholders to elect Tablets
                                                                                                                board                  shareholders to elec
                                                                               Video      directors by a simple major-                 directors by a simple
allow shareholders to elect               allow shareholders to elect
board directors by a simple ma-           board directors by a simple ma-                 ity vote.             Gadgets                ity vote.
                             Magazine                                          Magazine
jority vote.                              jority vote.
                                                                                          Now any new or currentCameras & Camcorders   Now any new or cu
                            Podcast
Now any new or current director           Now any new or current director
                                                                               Podcast    director standing for election               director standing fo
standing for election who fails to        standing for election who fails to                                    Laptops
                                                                                          who fails to receive support                 who fails to receive
receive support from a majority
                               Topics     receive support from a majority
                                                                               Topics     from a majority of share-                    from a majority of sh
of shareholders must resign his           of shareholders must resign his                 holders must resign his and Home
                                                                                                                TV                     holders must resign
huh...?
                                                      what?




                                                   I’ve seen
                                                   that look...




http://www.flickr.com/photos/eldret_99/3311540632
attribute notifies browser that offloading to
                                       native behaviour is permitted

                                       attribute trigger is ignored on older browsers
                              MENU


Apple Gives Share-
holders More Input;
Will Facebook Get the                <nav is=”native”>
Message?
By Tim Carmody
                                         <ul>
February 24, 2012 | 4:26 pm
                                            <li>Home</li>
At its annual shareholders meet-                                         ‘normal’ standards
ing on Thursday, Apple’s man-
agement bowed to pressure
                                            <li>News</li>                compliant markup
from key investors and agreed to
allow shareholders to elect
                                            <li>Reviews</li>
board directors by a simple ma-
jority vote.                             </ul>
Now any new or current director      </nav>
standing for election who fails to
receive support from a majority
of shareholders must resign his
fully styleable
                    HTML trigger




                              MENU                                      MENU


Apple Gives Share-                        Apple Gives Share-
holders More Input;                       holders More Input;
Will Facebook Get the
Message?
                    Home                  Will Facebook Get the
                                          Message?                             • Native performance and
                                News
By Tim Carmody
February 24, 2012 | 4:26 pm
                                          By Tim Carmody
                                          February 24, 2012 | 4:26 pm              responsiveness (GPU acceleration etc.)
                                Reviews
At its annual shareholders meet-
ing on Thursday, Apple’s man-Photos
                                          At its annual shareholders meet-
                                          ing on Thursday, Apple’s man-        •   Device appropriate transition
agement bowed to pressure
from key investors and agreed to
                             Video
                                          agement bowed to pressure
                                          from key investors and agreed to         (or not...entirely dependant on device
allow shareholders to elect               allow shareholders to elect
board directors by a simple ma-
                             Magazine     board directors by a simple ma-          capabilities)
jority vote.                              jority vote.

Now any new or current director
                                Podcast   Now any new or current director
                                                                               •   User gets the most appropriate
standing for election who fails to
                              Topics
receive support from a majority
                                          standing for election who fails to
                                          receive support from a majority
                                                                                   experience for their device.
of shareholders must resign his           of shareholders must resign his
fully styleable                   (ideally) tied-in to native APIs
                    HTML trigger                      e.g. predictive text, localization...




                              MENU                                        MENU                      Apple Gives Share-
                                                                                                    holders More Input;
Apple Gives Share-                          Apple Gives Share-                                      Will Facebook Get the
holders More Input;                         holders More Input;                                     Message?
Will Facebook Get the
Message?
                    Home                    Will Facebook Get the
                                            Message?
                                                                                 Home               By Tim Carmody • Menu can (in theory)
                                                                                                    February 24, 2012 | 4:26 pm
By Tim Carmody
                                News        By Tim Carmody
                                                                                 News                                 be as long or complex
                                                                                                    At its annual shareholders
February 24, 2012 | 4:26 pm                 February 24, 2012 | 4:26 pm
                                Reviews                                          Reviews            meeting on Thursday,
At its annual shareholders meet-            At its annual shareholders meet-                                          as needed.
                                                                                                    Apple’s management bowed
                                                                                                    to pressure from key inves-
                                                                                                                  • Native platform assists
ing on Thursday, Apple’s man-Photos         ing on Thursday, Apple’s man-        Photos
agement bowed to pressure                   agement bowed to pressure                               tors and agreed to allow
from key investors and agreed to            from key investors and agreed to                        shareholders to elect board
                             Video                                               Video
allow shareholders to elect
board directors by a simple ma-
                                            allow shareholders to elect
                                            board directors by a simple ma-                         ity vote.
                                                                                                                      in management of drill
                                                                                                    directors by a simple major-
                             Magazine                                            Magazine
                                                                                                    Now any new or down or progressive
jority vote.                                jority vote.
                                                                                                                      current
                                Podcast                                          Podcast            director standing for election
Now any new or current director
standing for election who fails to
                              Topics
                                            Now any new or current director
                                            standing for election who fails to
                                                                                 Topics
                                                                                                                      disclosure.
                                                                                                    who fails to receive support
receive support from a majority             receive support from a majority                         from a majority of share-
of shareholders must resign his             of shareholders must resign his                         holders must resign his




                                          device appropriate
                                                                                          native
                                          native transition
                                                                                          performance
                                                                                          when scrolling
fully styleable                                                                                basic component styling
                                                      (ideally) tied-in to native APIs
                    HTML trigger                                                                                   (e.g. logo, colour scheme,
                                                      e.g. predictive text, localization...
                                                                                                                   fonts) is enabled via CSS




                              MENU                                        MENU                      Apple Gives Share-                           Apple Gives Sh
                                                                                                    holders More Input;                          holders More I
Apple Gives Share-                          Apple Gives Share-                                      Will Facebook Get the                        Will Facebook
holders More Input;                         holders More Input;                                     Message?                                     Message?
Will Facebook Get the
                    Home                    Will Facebook Get the                Home               By Tim Carmody          Home                 By Tim Carmody
Message?                                    Message?                                                February 24, 2012 | 4:26 pm                  February 24, 2012 | 4:26 p
By Tim Carmody
                                News        By Tim Carmody
                                                                                 News                                       News
                                                                                                    At its annual shareholders                   At its annual shareho
February 24, 2012 | 4:26 pm                 February 24, 2012 | 4:26 pm
                                Reviews                                          Reviews            meeting on Thursday, Reviews                 meeting on Thursday
At its annual shareholders meet-            At its annual shareholders meet-                        Apple’s management bowed                     Apple’s managemen
ing on Thursday, Apple’s man-               ing on Thursday, Apple’s man-                           to pressure from key inves- Phones           to pressure from key
                             Photos                                              Photos                                   Mobile
agement bowed to pressure                   agement bowed to pressure                               tors and agreed to allow                     tors and agreed to al
from key investors and agreed to            from key investors and agreed to                        shareholders to elect Tablets
                                                                                                                          board                  shareholders to elect
                             Video                                               Video              directors by a simple major-                 directors by a simple
allow shareholders to elect                 allow shareholders to elect
board directors by a simple ma-             board directors by a simple ma-                         ity vote.             Gadgets                ity vote.
                             Magazine                                            Magazine
jority vote.                                jority vote.
                                                                                                    Now any new or currentCameras & Camcorders   Now any new or cur
                           Podcast
Now any new or current director             Now any new or current director
                                                                                 Podcast            director standing for election               director standing for
standing for election who fails to          standing for election who fails to                                            Laptops
                                                                                                    who fails to receive support                 who fails to receive s
                              Topics
receive support from a majority             receive support from a majority
                                                                                 Topics             from a majority of share-                    from a majority of sh
of shareholders must resign his             of shareholders must resign his                         holders must resign his and Home
                                                                                                                          TV                     holders must resign h




                                          device appropriate
                                                                                          native
                                          native transition
                                                                                          performance
                                                                                          when scrolling
in theory...it wouldn’t matter what device you’re using...




                         Apple Gives Share-                Apple Gives Shareholders More Input;
                         holders More Input;
                         Will Facebook Get the            Home Facebook Get the Message?
                                                           Will
                                                          Home
                         Message?
              Home       By Tim Carmody                   News
                                                          News
Home                     February 24, 2012 | 4:26 pm          By Tim Carmody February 24, 2012 | 4:26 pm
              News
News                     At its annual shareholders       Reviews
                                                          Reviews
              Reviews    meeting on Thursday,              At its annual shareholders meeting on Thursday,
Reviews
Photos
              Photos
                         Apple’s management bowed
                         to pressure from key inves-
                         tors and agreed to allow
                                                          Photos management bowed to pressure from key in-
                                                          Photos
                                                           Apple’s                                                            Home
                                                           vestors and agreed to allow shareholders to elect
              Video      shareholders to elect board
                         directors by a simple major-
                                                          Video
                                                          Video
                                                           board directors by a simple majority vote.                         News
                         ity vote.                        Magazine
                                                          Magazine
              Magazine
              Podcast
                         Now any new or current
                                                          Podcast
                                                          Podcast new or current director standing for election
                                                                                                                              Reviews
                                                           Now any
                                                                                                                              Photos
                         director standing for election
                         who fails to receive support
              Topics     from a majority of share-        Topics fails to receive support from a majority of share-
                                                           who
                                                          Topics
                         holders must resign his
                                                           holders must resign his his or her position. At next year


                                                                                                                       MENU
it would also fit in nicely
                                  with the basic premise
                                              around this




CSS Pagination Template Module
and maybe even this




Web Components Explained
idea #4

          Problem: Our media formats aren’t
          adaptive enough
          • An image or media item that is suitable for one
              context may not be for another.
          •   Many parameters will determine which media item
              you serve. These are the ones we know of TODAY.
               • screen and/or viewport size

               • pixel density

               • support-level for the media format

               • available bandwidth

               • user choice      why do we keep ignoring this bit?
the current (early) proposal

                                                                          media query enables more
    proposed new picture element                                          control over criteria
    <picture>
         <source src=”high-res.jpg” media=”min-width: 800px” />
         <source src=”mobile.jpg” />
         <!-- Fallback media format -->       parameters could eventually be
                                              extended for added context e.g.
         <img src=”mobile.jpg” />             connection speed
    </picture>
                                    fallback image when
                                    unsupported


    modelled after the video element
     <video>
           <source src="high-res.webm" media="min-width:800px" />
           <source src="low-res.webm" />
           <img src="poster.jpg" />                      media query support
                                                         here is still poor
     </video>



Source: Responsive images- how they almost worked and what we need
will a new (much smarter) element be enough
    given all the diversity that is on the way?
why not a new, and natively adaptive
                              image media container format?




Hat tip to Christopher Schmitt
example ‘wired media’ container format
                                                     Apple circa 2000

                                                          with built in
                                                        progress meter



                                                           poster         • Built-in content negotiation.
                                                           image          • Default negotiation based on
                   Hi-rez                                                 connection speed but could also be
                   50MB        Mid-rez
                               20MB
                                                                          triggered by the developer (using the
                                                                          wired media API).
             Low-rez A                                                  • Optional, out-of-the-box native
             1MB                                                          component and behaviour to prompt
                            Low-rez B
                            1MB                                           user for connection speed
                                                      highly compressed   e.g. 28.8, 56, ISDN (how retro!)
                                                       initial download
               package contains                             2-20kb
             references to content
              (of almost any file
            format) on server/CDN
                                                                  QuickTime reference movies
                                                                                             please don’t be distracted
                                                                                                  by the word movie

Sorry...no links - this is all out of @bryanrieger’s head from back in 2000
Combine a smarter image format with some upcoming CSS specification drafts
        (and experiments) and we can begin to imagine truly responsive media combining
        content negotiation with sophisticated client-side adaptation




                                                          an image with grayscale pixel
                                                          shader applied




                                                          a list element (e.g. ul, li)
                                                          wrapped in a vertex shader

           CSS Exclusions & Shapes                                 CSS Shaders                  image compositing
        Adobe, Microsoft: Editor’s Draft 2               Adobe, Apple, Opera: Editor’s Draft   with CSS blend modes
                                                                                                Adobe - early concept


Adobe web platform blog and CSS bleeding edge features
these are of course just ideas....
the reality is, we have
                                                      no idea what will
                                                         happen next...
                                                   (when I was a kid, they kept telling us we
                                                             would have jetpacks by now...)




http://www.flickr.com/photos/jurvetson/302869583
“Technological revolutions have
several interesting properties.
First, we tend to overestimate
the immediate impact and
underestimate the long-term
impact.

Second, we tend to place the
emphasis on the technologies
themselves, when it is really the
social impact and cultural change
that will be most dramatic.”
– Don Norman, Drop everything you’re doing




                                             http://www.flickr.com/photos/jordanfischer/61429449
“           The future is a process, not a destination.
                 - Bruce Sterling




                                                               here’s to the next
                                                                     8000 days!

http://www.flickr.com/photos/psd/3149878971
@yiibu




         s
contact u
at
             hello@yiibu.com                                               thank you

             many thanks to the
             amazing photographers
             on




                 http://creativecommons.org/licenses/by/2.0



             http://www.slideshare.net/yiibu/reset-the-web




                                                              http://www.flickr.com/photos/tinou/453593446

Weitere ähnliche Inhalte

Was ist angesagt?

It's about people, not devices...
It's about people, not devices...It's about people, not devices...
It's about people, not devices...yiibu
 
Some Kind of Wonderful
Some Kind of WonderfulSome Kind of Wonderful
Some Kind of WonderfulBryan Rieger
 
Vortraglift120215sde 120222182845-phpapp02
Vortraglift120215sde 120222182845-phpapp02Vortraglift120215sde 120222182845-phpapp02
Vortraglift120215sde 120222182845-phpapp02Ishansanctus Das
 
Understanding UX: Designing for multiple devices - GA London, 18 Jan 2013
Understanding UX: Designing for multiple devices - GA London, 18 Jan 2013Understanding UX: Designing for multiple devices - GA London, 18 Jan 2013
Understanding UX: Designing for multiple devices - GA London, 18 Jan 2013Anna Dahlström
 
Technologies and Innovation Worth Watching in 2016
Technologies and Innovation Worth Watching in 2016Technologies and Innovation Worth Watching in 2016
Technologies and Innovation Worth Watching in 2016St. Petersburg College
 
Change the World - One Trillion Dollar Market at a time / the opportunity in ...
Change the World - One Trillion Dollar Market at a time / the opportunity in ...Change the World - One Trillion Dollar Market at a time / the opportunity in ...
Change the World - One Trillion Dollar Market at a time / the opportunity in ...Volker Hirsch
 
2009 04 30 IFS - google or be googled
2009 04 30 IFS - google or be googled2009 04 30 IFS - google or be googled
2009 04 30 IFS - google or be googledMaarten Cannaerts
 
Why the social web is here to stay (and what to do about it)
Why the social web is here to stay (and what to do about it)Why the social web is here to stay (and what to do about it)
Why the social web is here to stay (and what to do about it)Mike Ellis
 
Tales of Virality—Automattic
Tales of Virality—AutomatticTales of Virality—Automattic
Tales of Virality—Automatticterry chay
 
Why You Should Make Mobile Your Career | Clark College
Why You Should Make Mobile Your Career | Clark CollegeWhy You Should Make Mobile Your Career | Clark College
Why You Should Make Mobile Your Career | Clark CollegeJason Grigsby
 
Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013
Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013
Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013Anna Dahlström
 
GA London - Designing for multiple devices, 28may2012
GA London - Designing for multiple devices, 28may2012GA London - Designing for multiple devices, 28may2012
GA London - Designing for multiple devices, 28may2012Anna Dahlström
 

Was ist angesagt? (17)

It's about people, not devices...
It's about people, not devices...It's about people, not devices...
It's about people, not devices...
 
Some Kind of Wonderful
Some Kind of WonderfulSome Kind of Wonderful
Some Kind of Wonderful
 
Vortraglift120215sde 120222182845-phpapp02
Vortraglift120215sde 120222182845-phpapp02Vortraglift120215sde 120222182845-phpapp02
Vortraglift120215sde 120222182845-phpapp02
 
Understanding UX: Designing for multiple devices - GA London, 18 Jan 2013
Understanding UX: Designing for multiple devices - GA London, 18 Jan 2013Understanding UX: Designing for multiple devices - GA London, 18 Jan 2013
Understanding UX: Designing for multiple devices - GA London, 18 Jan 2013
 
Technologies and Innovation Worth Watching in 2016
Technologies and Innovation Worth Watching in 2016Technologies and Innovation Worth Watching in 2016
Technologies and Innovation Worth Watching in 2016
 
Change the World - One Trillion Dollar Market at a time / the opportunity in ...
Change the World - One Trillion Dollar Market at a time / the opportunity in ...Change the World - One Trillion Dollar Market at a time / the opportunity in ...
Change the World - One Trillion Dollar Market at a time / the opportunity in ...
 
Spotting
SpottingSpotting
Spotting
 
2009 04 30 IFS - google or be googled
2009 04 30 IFS - google or be googled2009 04 30 IFS - google or be googled
2009 04 30 IFS - google or be googled
 
Maker Boot Camp
Maker Boot CampMaker Boot Camp
Maker Boot Camp
 
Why the social web is here to stay (and what to do about it)
Why the social web is here to stay (and what to do about it)Why the social web is here to stay (and what to do about it)
Why the social web is here to stay (and what to do about it)
 
Tales of Virality—Automattic
Tales of Virality—AutomatticTales of Virality—Automattic
Tales of Virality—Automattic
 
Why You Should Make Mobile Your Career | Clark College
Why You Should Make Mobile Your Career | Clark CollegeWhy You Should Make Mobile Your Career | Clark College
Why You Should Make Mobile Your Career | Clark College
 
Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013
Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013
Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013
 
GA London - Designing for multiple devices, 28may2012
GA London - Designing for multiple devices, 28may2012GA London - Designing for multiple devices, 28may2012
GA London - Designing for multiple devices, 28may2012
 
Technology Trends to Watch
Technology Trends to WatchTechnology Trends to Watch
Technology Trends to Watch
 
Future of addiction
Future of addictionFuture of addiction
Future of addiction
 
Cloud 101
Cloud 101Cloud 101
Cloud 101
 

Ähnlich wie Reset the Web

Connecting First And Second Life
Connecting First And Second LifeConnecting First And Second Life
Connecting First And Second LifeMatt Biddulph
 
Ruling the World: When Life Gets Gamed
Ruling the World: When Life Gets GamedRuling the World: When Life Gets Gamed
Ruling the World: When Life Gets GamedSebastian Deterding
 
Beyond The Mobile Web By Yiibu
Beyond The Mobile Web By YiibuBeyond The Mobile Web By Yiibu
Beyond The Mobile Web By YiibuJim Porter
 
Beyond The Mobile Web By Yiibu 110412113255 Phpapp01
Beyond The Mobile Web By Yiibu 110412113255 Phpapp01Beyond The Mobile Web By Yiibu 110412113255 Phpapp01
Beyond The Mobile Web By Yiibu 110412113255 Phpapp01Therese Kokot
 
Fundamental Design Principles
Fundamental Design PrinciplesFundamental Design Principles
Fundamental Design PrinciplesNathan Smith
 
Week 3 IxD History: Computing Technology in the Workplace
Week 3 IxD History: Computing Technology in the WorkplaceWeek 3 IxD History: Computing Technology in the Workplace
Week 3 IxD History: Computing Technology in the WorkplaceKaren McGrane
 
3D Printing Is Just the Beginning: The Future of Makerspaces within Academic ...
3D Printing Is Just the Beginning: The Future of Makerspaces within Academic ...3D Printing Is Just the Beginning: The Future of Makerspaces within Academic ...
3D Printing Is Just the Beginning: The Future of Makerspaces within Academic ...Patrick "Tod" Colegrove
 
Postcards from the future texas state fbla
Postcards from the future   texas state fblaPostcards from the future   texas state fbla
Postcards from the future texas state fblaBill M Wooten, PhD
 
Postcards from the future texas state fbla
Postcards from the future   texas state fblaPostcards from the future   texas state fbla
Postcards from the future texas state fblaBill M Wooten, PhD
 
Shift to the future – the technological disruption of learning and work - cio...
Shift to the future – the technological disruption of learning and work - cio...Shift to the future – the technological disruption of learning and work - cio...
Shift to the future – the technological disruption of learning and work - cio...Brian Kuhn
 
Learning without Frontiers: School libraries and meta-literacy in action
Learning without Frontiers: School libraries and meta-literacy in actionLearning without Frontiers: School libraries and meta-literacy in action
Learning without Frontiers: School libraries and meta-literacy in actionJudy O'Connell
 
University of Northampton (UK)
University of Northampton (UK)University of Northampton (UK)
University of Northampton (UK)Michell Zappa
 
TedX Brooklyn: Hackers and redefining better
TedX Brooklyn: Hackers and redefining betterTedX Brooklyn: Hackers and redefining better
TedX Brooklyn: Hackers and redefining betterChad Dickerson
 

Ähnlich wie Reset the Web (20)

Connecting First And Second Life
Connecting First And Second LifeConnecting First And Second Life
Connecting First And Second Life
 
Ruling the World: When Life Gets Gamed
Ruling the World: When Life Gets GamedRuling the World: When Life Gets Gamed
Ruling the World: When Life Gets Gamed
 
Beyond the mobile web
Beyond the mobile webBeyond the mobile web
Beyond the mobile web
 
Beyond The Mobile Web By Yiibu
Beyond The Mobile Web By YiibuBeyond The Mobile Web By Yiibu
Beyond The Mobile Web By Yiibu
 
Beyond The Mobile Web By Yiibu 110412113255 Phpapp01
Beyond The Mobile Web By Yiibu 110412113255 Phpapp01Beyond The Mobile Web By Yiibu 110412113255 Phpapp01
Beyond The Mobile Web By Yiibu 110412113255 Phpapp01
 
Fundamental Design Principles
Fundamental Design PrinciplesFundamental Design Principles
Fundamental Design Principles
 
Week 3 IxD History: Computing Technology in the Workplace
Week 3 IxD History: Computing Technology in the WorkplaceWeek 3 IxD History: Computing Technology in the Workplace
Week 3 IxD History: Computing Technology in the Workplace
 
Making sense out of things on the web
Making sense out of things on the webMaking sense out of things on the web
Making sense out of things on the web
 
3D Printing Is Just the Beginning: The Future of Makerspaces within Academic ...
3D Printing Is Just the Beginning: The Future of Makerspaces within Academic ...3D Printing Is Just the Beginning: The Future of Makerspaces within Academic ...
3D Printing Is Just the Beginning: The Future of Makerspaces within Academic ...
 
Postcards from the future texas state fbla
Postcards from the future   texas state fblaPostcards from the future   texas state fbla
Postcards from the future texas state fbla
 
Postcards from the future texas state fbla
Postcards from the future   texas state fblaPostcards from the future   texas state fbla
Postcards from the future texas state fbla
 
Imagination and Innovation in IT
Imagination and Innovation in ITImagination and Innovation in IT
Imagination and Innovation in IT
 
Letting Go
Letting GoLetting Go
Letting Go
 
Lettinggo 110902081541-phpapp02
Lettinggo 110902081541-phpapp02Lettinggo 110902081541-phpapp02
Lettinggo 110902081541-phpapp02
 
The trouble with context
The trouble with contextThe trouble with context
The trouble with context
 
How technology rules our lives... and our destinies
How technology rules our lives... and our destiniesHow technology rules our lives... and our destinies
How technology rules our lives... and our destinies
 
Shift to the future – the technological disruption of learning and work - cio...
Shift to the future – the technological disruption of learning and work - cio...Shift to the future – the technological disruption of learning and work - cio...
Shift to the future – the technological disruption of learning and work - cio...
 
Learning without Frontiers: School libraries and meta-literacy in action
Learning without Frontiers: School libraries and meta-literacy in actionLearning without Frontiers: School libraries and meta-literacy in action
Learning without Frontiers: School libraries and meta-literacy in action
 
University of Northampton (UK)
University of Northampton (UK)University of Northampton (UK)
University of Northampton (UK)
 
TedX Brooklyn: Hackers and redefining better
TedX Brooklyn: Hackers and redefining betterTedX Brooklyn: Hackers and redefining better
TedX Brooklyn: Hackers and redefining better
 

Mehr von yiibu

Designing for conversation
Designing for conversationDesigning for conversation
Designing for conversationyiibu
 
The internet of things is for people
The internet of things is for peopleThe internet of things is for people
The internet of things is for peopleyiibu
 
Exploring the physical web
Exploring the physical webExploring the physical web
Exploring the physical webyiibu
 
The future of media queries?
The future of media queries?The future of media queries?
The future of media queries?yiibu
 
The Emerging Global Web
The Emerging Global WebThe Emerging Global Web
The Emerging Global Webyiibu
 
Designing for diversity - how to stop worrying and embrace the Android revol...
Designing for diversity -  how to stop worrying and embrace the Android revol...Designing for diversity -  how to stop worrying and embrace the Android revol...
Designing for diversity - how to stop worrying and embrace the Android revol...yiibu
 
Everything old is new again
Everything old is new againEverything old is new again
Everything old is new againyiibu
 
Developing an Interface for the Future of Mass Market Software Distribution (...
Developing an Interface for the Future of Mass Market Software Distribution (...Developing an Interface for the Future of Mass Market Software Distribution (...
Developing an Interface for the Future of Mass Market Software Distribution (...yiibu
 

Mehr von yiibu (8)

Designing for conversation
Designing for conversationDesigning for conversation
Designing for conversation
 
The internet of things is for people
The internet of things is for peopleThe internet of things is for people
The internet of things is for people
 
Exploring the physical web
Exploring the physical webExploring the physical web
Exploring the physical web
 
The future of media queries?
The future of media queries?The future of media queries?
The future of media queries?
 
The Emerging Global Web
The Emerging Global WebThe Emerging Global Web
The Emerging Global Web
 
Designing for diversity - how to stop worrying and embrace the Android revol...
Designing for diversity -  how to stop worrying and embrace the Android revol...Designing for diversity -  how to stop worrying and embrace the Android revol...
Designing for diversity - how to stop worrying and embrace the Android revol...
 
Everything old is new again
Everything old is new againEverything old is new again
Everything old is new again
 
Developing an Interface for the Future of Mass Market Software Distribution (...
Developing an Interface for the Future of Mass Market Software Distribution (...Developing an Interface for the Future of Mass Market Software Distribution (...
Developing an Interface for the Future of Mass Market Software Distribution (...
 

Kürzlich hochgeladen

COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 

Kürzlich hochgeladen (20)

COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 

Reset the Web

  • 1. reset the web a brief stroll into our past and our future http://www.flickr.com/photos/karen_roe
  • 2. the web is less than 8000 days old... Hat tip to Kevin Kelly - The next 5000 days of the web http://www.flickr.com/photos/psd/3149878971
  • 3. it reaches 1/3* of people on our planet *2012 estimates put the population at about 7 billion inhabitants... http://www.flickr.com/photos/vitroids/2753929716
  • 4. it powers business, entertainment, learning... http://www.flickr.com/photos/viirok/2498157861
  • 5. and so and so much more... http://www.icanhascheezburger.com/
  • 6. but what is the web for? http://www.flickr.com/photos/34233222@N05/4292987392
  • 7. probably not surprisingly... I found the beginning of an answer through this man...
  • 8. a few years before the Macintosh… ...in 1980 Steve Jobs recounted the following story...
  • 9. in the early 70s, Scientific American did a study on the efficiency of locomotion... it was actually the 1970’s, not 1870’s… ;) http://www.flickr.com/photos/boston_public_library/4328032194
  • 10. “ ...for all different species of things on the planet ...birds, cats, dogs goats...
  • 11. A B “ ...they measured, how much energy does it take for a goat to get from here to there...
  • 12. “...they then ranked them, and published a list 1. 23. 32. 18. California Condor Domestic cat British Alpine Goat Springer Spaniel a lazy glider prefers to sleep see goatsonstuff.com prefers to swim… 27. Red-breasted Robin faster than most 8. American Saddlebred - 298. Banana Slug faster than a rock… 3. Cheetah currently missing 207. Humming Bird got tired watching it. - Bumble Bee couldn’t find one… 183. Elephant forgot 342. Bob… not his finest moment…
  • 13. 1. California Condor a lazy glider… “ of all the animals, the condor won. It took the least amount of energy to get from here to there...
  • 14. man however didn’t do so well... 342. Bob… not his finest moment…
  • 15. ? “ man came a rather unimpressive showing... a third of the way down the list...
  • 16. “ ...but fortunately, someone was insightful enough to test man on a bicycle...
  • 17. and man with a bicycle won... 1. Bob on a bicycle one of his better days…
  • 18. “ ...twice as good as the condor, all the way off the list..
  • 19. “ ...what it showed was that man as a tool maker, has the ability to create tools, to amplify an inherent ability...
  • 20. released 1984 “ ...and that’s exactly what we’re doing here (Steve of course was talking about Apple, and the development of one of the first personal computers)
  • 21. Steve Jobs went on to explain that computers were just one in a long line of tools created by man...
  • 22. ...just as the bicycle amplified our ability to use our muscles, tendons and brains to transport our bodies...
  • 23. ...just as the tools and technologies of the industrial revolution were “an amplification of human sweat”...
  • 24. ...the computer amplified our human abilities of memory, problem-solving, calculation, projection, analysis, and so much more... http://nicelifeapparel.wordpress.com/tag/crazy-math-problem/
  • 25. Steve Jobs also realized that the computer was just the beginning...
  • 26. “ There is something very special and historically different that takes place, when you have one computer, for one person, rather than one for many. - Steve Jobs http://www.flickr.com/photos/aidanmorgan/3709199304/
  • 27. (as it happens) this statement is also true of the Internet...
  • 28. the Internet’s ability to amplify knowledge began as a purely academic and scientific tool... http://www.flickr.com/photos/epitti/2371715992
  • 29. ...but its true potential was only revealed when it became a ubiquitously available tool... http://www.flickr.com/photos/olpc/2929782994
  • 30. Nobody has any idea of what a new invention will really be good for. The crucial question is, what happens when everyone has one? - Kevin Kelly http://www.flickr.com/photos/goincase/4647893507
  • 31. open and universally accessible ...when we connected a browser to the Internet we couldn’t have guessed what it would become... http://www.flickr.com/photos/tanaka/3212368979
  • 32. ...when we connected the Internet to a glowing rectangle, we thought we were creating a ‘smart’ phone...
  • 33. but this is not a smartphone...
  • 34. it’s "A device to amplify curiosity" - John Seely Brown
  • 35. ...and while this doesn’t really explain what the web is for, it begins to clarify it’s immense value to all of us...
  • 36. being always connected to an open platform, accessible by anyone with a browser, has forever changed the way we live...
  • 37. “ ...hold on...let me look that up... I just happen to have the sum of human knowledge in my pocket... - @fj http://www.flickr.com/photos/w00kie/2752309431
  • 38. ...the magic is in my palms, god knows what I would do without this.... Omar, 19, Hafeezpet, India Source: Anthropology, development and ICTs http://www.flickr.com/photos/jonhurd/2367208101
  • 39. not too shabby for 8000 days... http://www.flickr.com/photos/psd/3149878971
  • 40. But how did we really get here?
  • 41. To understand this better, let’s take a step back...
  • 42. ...and talk a bit about plumbing. Part 2: plumbing http://www.flickr.com/photos/nnova/2923859643
  • 43. all technological revolutions require a level of plumbing or if you prefer...infrastructure http://www.flickr.com/photos/wheatfields/2110680492
  • 44. plumbing provides a common framework or scaffold on which to innovate Source: ToBeDetermined.org
  • 45. the rise of computers, the Internet, the web and mobile have been intricately linked...
  • 46. ...to the invention, implementation and market adoption of this type of plumbing...
  • 47. hardware 900 Microprocessor integrates CPU function onto a single chip. 800 Compaq, DEC,IBM, Intel, Microsoft, NEC "Moore's Law" predicts the and Nortel begin 700 future of integrated circuits. work on USB. millions of Internet hosts first 64-bit processor First 64-bit 600 in a supercomputer processor in a personal computer. 500 An all semiconductor Intel 32-bit 400 "Solid Circuit" is Pentium demonstrated by processor Jack Kilby. Personal computers begin released. 300 to appear. Resistive touch screens are patented. Transistorized 200 ARM6 processor computers First human- is released. emerge. input multi-touch 100 system. 0 50 55 60 65 70 75 80 85 90 91 93 93 94 95 96 97 98 99 00 01 02 03 04 05 06 07 08 10 11 12 chart: world Internet hosts, source: ISC - 1981-2012, other data primarily from Wikipedia
  • 48. network 900 TCP/IP based First IPv6 NSFNET First person to description. established. person SMS 800 sent in Finland. NTT DoCoMo TCP/IP standardised, introduces the first 700 and Internet introduced. full mobile Internet millions of Internet hosts service in Japan. DNS 600 invented Transition from NTT DoCoMo ARPANET/NSFNET launches first networks to the 500 NMT launches 1G commercial 3G modern (commercial) networks in Denmark, network in Japan. Internet. Finland, Norway and 400 Sweden. First ARPANET First commercial 9 companied including IBM, 300 link established. dialup ISP in the U.S. Intel, Nokia and 295 million NTT launches Microsoft agree subscribers on 200 first (1G) First GSM (2G) to Bluetooth 3G networks cellular network launches in standard. worldwide. network. Finland. Wi-fi invented 100 by NCR/AT&T. 0 50 55 60 65 70 75 80 85 90 91 93 93 94 95 96 97 98 99 00 01 02 03 04 05 06 07 08 10 11 12 chart: world Internet hosts, source: ISC - 1981-2012, other data primarily from Wikipedia
  • 49. the web 900 First JPG standard. W3C founded. 800 TBL makes the Web freely available with no patents or Compuserve royalties. Launch of WebCrawler 700 introduces the (first full-text search engine). millions of Internet hosts GIF format. PNG 600 Debut of the Web as a format publicly available approved. service on the Internet. 500 Mosaic HTML 4.01 (first graphical recommended YouTube 400 browser) WAP & XHTML MP launches. SGML CHTML released. 300 HTML released Tim Berners-Lee 2.0 builds all the tools CSS Wikipedia 200 Start of launches. Facebook HTML5 necessary for a Google working working Web (HTTP, launches. research draft. HTML, a browser 100 and server) project. 0 50 55 60 65 70 75 80 85 90 91 93 93 94 95 96 97 98 99 00 01 02 03 04 05 06 07 08 10 11 12 chart: world Internet hosts, source: ISC - 1981-2012, other data primarily from Wikipedia
  • 50. with each layer of plumbing comes new innovations (which spawn or inspire more plumbing...)
  • 51. product innovation 900 800 Microsoft Palm Windows first iPad Pilot 700 announced. millions of Internet hosts First person 600 to person Nokia begins SMS sent in Symbian Ltd. First manufacturing Finland. formed by BlackBerry 500 telecommunications Ericsson, Nokia, smartphone. iPhone equipment. Motorola & Psion 400 Apple Newton First RIM platform pager launched. First WebKit 300 First mobile browser iPhone 4 Windows Symbian 330 ppi (Nokia) 95 iMac device. display 200 G3 Nokia E60 Macintosh 260 ppi Palm 100 Classic display WebOS 0 50 55 60 65 70 75 80 85 90 91 93 93 94 95 96 97 98 99 00 01 02 03 04 05 06 07 08 10 11 12 chart: world Internet hosts, source: ISC - 1981-2012, other data primarily from Wikipedia
  • 52. The First Internet Router The BBN Interface Message Processor did the packet routing for the ARPANET in 1969, “ ...it takes on average 20 years for a technology to make the transition from first articulation...to maturity (defined as becoming a $1billion industry)…the mouse, for example, took 30 years. – Bill Buxton, Principle researcher Microsoft http://www.flickr.com/photos/kiwanja/3169409467/
  • 53. during this time lack of infrastructure may cause some to fall behind...
  • 54. ...or sometimes leap ahead http://www.flickr.com/photos/kiwanja/3169409467/
  • 55. but the infrastructure of the web (the common framework on which we continue to innovate...)
  • 56. was based on mental models of a very different time http://www.flickr.com/photos/ona1a/4521406829/
  • 57. ...models that may soon no longer apply 2000 Internet Users (MM) Estimated 1500 the inflection point is near... 1000 within 2 years mobile users are expected to exceed desktop users 500 0 2007 2008 2009 2010 2011 2012 2013 2014 2015 Mobile users Desktop users Source: Morgan Stanley Associates Internet Trends 2010 (PDF)
  • 58. Part 3: welcome to the future http://www.flickr.com/photos/whiteafrican/2938685296
  • 59. a short stroll into the future... contexts will everything just in time content will be varied and will be will replace (need to) flow unpredictable connected just in case like water
  • 60. today’s digital and connected things may feel incredibly diverse... http://www.flickr.com/photos/_dchris/4652995362
  • 61. ...but they are still deeply rooted to our past http://www.flickr.com/photos/terry/5388630668
  • 62. a small selection of near future devices
  • 63. A random internet connected watch. More connected wearable devices are on the way. tiny personal constrained http://www.flickr.com/photos/scobleizer/5263223798
  • 64. large stationary public short use (sweaty) touch Internet enabled treadmill. Currently considered a luxury product (...give it 18 months).
  • 65. One of many Smart (internet enabled) TVs now shipping. Includes apps and a browser. Some can be paired with a smartphone or tablet remote control. large social stationary low-ish ppi remote (voice, gesture, app) lean-back powerful (enough)
  • 66. The new Tesla X with a internet-enabled touchscreen dashboard with apps and browser. small touch, voice fixed (but not stationary) bandwidth constrained
  • 67. Quantas A380 first class with 17” flat panel display. (Tethered tablets will likely appear soon). large(r) public fixed (but not stationary) manipulation unknown bandwidth constrained source: PC Mag
  • 68. ...a companion to smartphones, tablets, PC, Macs, and adds smart capabilities to existing displays, TVs, set top boxes and other devices. Cotton Candy a Screen independent but otherwise fully functional USB sized ‘plug computer’. ARM Cortex A9, Wi-fi, Android, Ubuntu, with virtualization client for Win/Lin/Mac many unknown unknowns http://www.fxitech.com/products/
  • 69. Bluetooth The Magic Cube is an ultra-portable, productivity full-sized virtual computer keyboard helper-appliance with support for Android, iOS and any device with Bluetooth HID support.
  • 70. Shipping spring 2012 in Europe LG’s EPD is a 6-inch, 1024×768 e-ink plastic screen. It’s 0.7mm thick, it weighs 14g, and LG claims it’s resistant to scratches and drops from a 1.5 meter height. small(-ish) flexible constrained many unknown unknowns source: Green autoblog
  • 71. “ We think technology should work for you— to be there when you need it and get out of your way when you don’t. tiny voice, gesture? personal constrained many unknown unknowns Google Glass
  • 72. Golden-i head-mounted mobile computer for industrial settings such as construction, military, and security services. Includes SVGA microdisplay, Win-CE and voice recognition. tiny voice, gesture personal constrained many unknown unknowns http://www.mygoldeni.com/
  • 73. these contexts may be diverse, but they still kinda ‘fit’ our mental models for both the original ‘thing’ and the web
  • 74. old thing (or media, or tool) + connectivity software + + user interface smart = thing old thing (just a bit smarter)
  • 75. more often than not... the ‘smart’-ness has been bolted on http://www.flickr.com/photos/mujitra/7053687599
  • 76. this likely won’t be the pattern going forward, here’s why....
  • 77. a short stroll into the future... contexts will everything just in time content will be varied and will be will replace (need to) flow unpredictable connected just in case like water
  • 78. Moore’s Law is close to 50 years old Source: Intel
  • 79. we’ve come a very long way... 1982 2007 1st gen. Osborne Executive iPhone 1/100th MHz CPU 1/1000th the memory 100x the weight 10x the cost Source and photo: Wikipedia
  • 80. it now costs almost nothing to make something ‘smart’ or connected... http://www.flickr.com/photos/slgc/6286652858
  • 81. the new ARM Cortex-M0+ uses 1/3 of the energy of an 8 or 16-bit processor Source: New ARM chips herald Internet of things
  • 82. it costs 30 cents (£0.20) Source: New ARM chips herald Internet of things
  • 83. ...and measures 2 mm (0.07”) Source: New ARM chips herald Internet of things
  • 84. yesterday: multiple chips today: one chip that does the work of three Source: ThingM
  • 85. some chips are optimized for a specific unit of functionality my job is to my job is to connect to provide GPS mobile phone coordinates networks Source: ThingM
  • 86. my job is to provide GPS coordinates Brad Frost + = WTF? At airport gate ready to head to @bdconf. Sadly the large suction cups I was going to use to scale the biodome got confiscated. #bdconf “The Tweeting GeoLocation aware Toaster” my job is to connect to the Internet
  • 87. object oriented hardware... ...functionality abstracted into silicon. - Mike Kuniavsky, ThingM http://www.flickr.com/photos/negativz/41549347 Source: ThingM
  • 88. soon... I may not even need batteries :-) “ Ambient radio waves...can already provide enough energy to substitute for AAA batteries in some calculators, temperature and humidity sensors, and clocks.... We are on the cusp of an explosion in small wireless devices...that can run on alternatives to battery power. Devices like this can live on and on. Source: The computer trend that will change everything and Bye-Bye Batteries: radio waves as a low-power source
  • 89. ...embedded in everything will be a sliver of webness - Kevin Kelly, founding editor Wired Cute circuit - wearable technology
  • 90. the more we peer into the future, the more invisible this ‘web-ness’ becomes
  • 91. a short stroll into the future... contexts will everything just in time content will be varied and will be will replace (need to) flow unpredictable connected just in case like water
  • 93. we are accessing the web at any time and any place...
  • 94. but current behaviour is still quite implicit http://www.flickr.com/photos/intelfreepress/5922668169
  • 95. yesterday today “go to the computer” open a browser (or app) to use the web/Internet to use the web/Internet
  • 96. ....and experiences are built accordingly
  • 97. today’s just in case web (because you never quite know what they’ll need) information shopping products support brand web site infotainment social tools corporate PR jobs investor news
  • 98. today’s just in case web + apps (now with added experience) “ Our apps offer the best experience... (so please download, install and keep them updated, just in case that time comes...we promise you won’t regret it) support information products shopping shopping brand infotainment web site native infotainment social tool apps tools tool corporate PR jobs investor news
  • 99. ...but I don’t want to own your app, I want to own the possibility space of your app. Paraphrased from Mike Kuniavsky @ Webdirections South http://www.flickr.com/photos/zenilorac/698514624
  • 100. tomorrow's just in time web (because everything is connected) I’d like to use whatever device I have on-hand to learn more about this thing/ tool/service/place (right here and right now)...please show me what I can do. support information tools Like+ smart thing
  • 101. “ ...a world where our devices load applications opportunistically as we need them, in real time. The technological model for this... is web pages. But these will be web pages with advanced functionality that can be accessed seamlessly from remote or local networks—and even from other mobile devices. - Scott Jenson on Forbes: Apps are over http://www.flickr.com/photos/keepwaddling1/3048726936/
  • 102. does this mean web sites will go away? OMG... ” http://www.flickr.com/photos/richardmoross/1413692087
  • 104. ...web sites will be just one of many interfaces we will use to interact with a service
  • 105. the GlowCap service Your doctor or designated Your pharmacy family member receives is alerted when refills light regular progress emails. are due. data data out out data data in out data service out wireless enabled chip Each time the cap is opened, data is transmitted to the GlowCap service. The cap lights up, Data is also transmitted, A real-time web (or app) and plays a sound each to trigger a reminder call based progress report is time medication is due. if you miss a dose. available. Vitality GlowCaps
  • 106. The most profound technologies are those that disappear. They weave themselves into the fabric of everyday life until they are indistinguishable from it…. - Mark Weiser (1991 chief scientist Xerox PARC) http://www.flickr.com/photos/armaggeusa/3176297283
  • 107. a short stroll into the future... contexts will everything just in time content will be varied and will be will replace (need to) flow unpredictable connected just in case like water
  • 108. responsive design is really just the beginning...
  • 109. once we can envision this... contexts will be varied and unpredictable everything just in time will be will replace connected just in case
  • 110. this no longer feels that strange...
  • 111. “Get your content ready to go anywhere because it’s going to go everywhere.” - Brad Frost http://www.flickr.com/photos/sackerman519/5045015997/
  • 112. but if content will be like water... what kind of plumbing will we need? http://www.flickr.com/photos/evdaimon/165589586
  • 113. Part 4: re-imagining plumbing http://www.flickr.com/photos/jonasb/2751113526
  • 114. disclaimer: these ideas focus on a tiny sliver... primarily related to the browser and the web platform
  • 115. it’s easy to forget how much infrastructure we’ve already built into the web as a platform
  • 116. some of it was necessary structural scaffolding http://www.flickr.com/photos/dandeluca/2720139047
  • 117. form elements - v.1 HTML 4.01 - they haven’t failed us yet...
  • 118. some focussed on user productivity...
  • 119. browser productivity features combined search/URL bar (and/ favourites favicon signpost or choice of search engine) security signpost tabs RSS extensions back buon (added in 1993!) find in browser shortcuts & bookmarks status bar zoom (Opera version shown)
  • 120. access keys navigation first introduced in 1999 (and not specifically for mobile) 1. Home 2. Products 3. Articles Contact us Products.html Home.html Articles.html
  • 121. others were a response to change...
  • 122. tel and SMS URI schemes introduced around 2000 via WTAI 1. Home 2. Products 3. Articles Contact us <a href="tel:12345">Contact Us</a>
  • 123. visual navigation aids on mobile Nokia Browser for S60 circa 2005 Visual Back key MiniMap viewport preview. preview rectangle. I really miss this Once focussed, feature! Much clicking the navipad clearer and didn’t would zoom the force you to reload layout. pages you didn’t want to see again :-( (Very similar to Apple’s double-tap to zoom.)
  • 124. built-in reader modes “Reader lets you view web articles free of clutter.” we’re entirely to blame for this bit...
  • 125. proxy web browsers polyfill for many of our existing problems OperaMini UCWeb Nokia Browser Amazon Silk - 2011 2005 2005 for S40 - 2011
  • 126. on-the-fly user agent switching most browsers now include this ‘feature’ we’re somewhat to blame for this bit as well... Abandon hope all ye who enter here Dolphin browser for Android Maxthon browser for Android
  • 127. recent specifications continue to bake-in common functionality...
  • 128. ...offloading aspects of behaviour and rendering to the browser/platform
  • 129. form elements - v.2 cleaner markup thanks to out of the box functionality placeholder validation
  • 130. HTML5 notifications API out of the box components and behaviours
  • 131. end result: intelligent, responsive, platform-appropriate yet adaptable default components...
  • 132. a robust set of behaviours is “responsiveness” is lower-level platform access already baked-in baked in by default improves the user experience end result: intelligent, responsive, platform-appropriate yet adaptable default components... aspects are future-friendly styleable and (and gracefully addressable through degradable) the built-in API
  • 133. the loss of control is generally welcome compared to the alternative...
  • 134. a menu and header in a box with rounded corners before CSS3 & HTML5 look ma...no divs (and semantics!) ...and after
  • 135. form placeholders before HTML5 lots of potential issues • cross browser support for entire behaviour (e.g. populate the field then clear it on focus) • accessibility of placeholder value • 4kb uncompressed (not huge..but adds up with each new element of functionality you build in) • requires maintenance and testing for each new browsers/versions/ form factors and manipulation models (touch, voice etc.) after CSS3 and HTML5 and so on...
  • 136. ...everything you add to the page is something you’re taking away from the latency profile of that page ...everything you add—just as infrastructure to make things work—all these things have a cost. - Alex Russell Alex Russell speaking at London JS Tilt 3D add-on for Firefox
  • 137. in the future, it may make sense to take these approaches approach even further...
  • 138. a few ideas... (warning: ideas presented in order of potential disruption to the status quo)
  • 139. idea #1 Problem: Back to top links are useful to improve usability of longer pages. • Thanks to viewport diversity, ‘long’ is a variable value. • Sprinkling hard-coded anchors throughout content isn’t future friendly. • Adding them dynamically (on the client or server) based on context detection seems like needless heavy lifting. i’ve seen this done...it works well enough but isn’t a long-term strategy
  • 140. vertical navigation shortcuts • In QQ’s implementation, a tap scrolls the layout up or down by a (random) increment. • Scrolling is accelerated darkened for to improve the experience. demonstration purposes • Can be disabled by the user. • Should ideally be customizable. e.g. option to instead map controls to a full ‘page-up/down’ behaviour. • A nice companion to Apple’s “tap to reveal URL bar” gesture. sample implementation on Tencent’s QQ browser (iOS)
  • 141. idea #2 Problem: On the web, social media sharing and discovery is currently enabled client-side, using lots of third party scripts. • Scripts may not be compatible with all browsers. • Interactions are rarely responsive to changes in context. • Social widgets (often) cause lots of HTTP requests and have been known to block page load. • The more popular social media gets, the more widgets we will (technically) need.
  • 142. they also introduce a fair bit of noise :-( it’s not like we don’t have a bit too much noise already...
  • 143. studies suggest social networks now reach close to 70% of the worldwide population but are also unlikely to go away... Source: Social networks around the world 2010
  • 144. • Social media is already weaving its way through mobile platforms. • Functionality is currently limited to glanceable home screen widgets, and easy in-browser sharing.
  • 145. but social widgets aren’t content, nor are they really chrome...
  • 146. Mobile is the needle, social is the thread... - Pew Internet & American Life Project which means they may just be...plumbing http://www.flickr.com/photos/preetamrai/5454799225
  • 147. user configurable bake-in a social sharing layer user configurable: bubbles up turn it off or fill it glanceable with your favourites information (loose and clunky attempt at visualizing how this might work)
  • 148. idea #3 Problem: There are only so many ways to re-arrange complex navigation. • there will be many, devices of all shapes, sizes, capabilities and manipulation models • we can only simplify sites so much...some will remain big, with a complex multi-level architecture
  • 149. what would happen if we offloaded MENU Apple Gives Share- top-level navigation holders More Input; Will Facebook Get the Message? to the browser? By Tim Carmody February 24, 2012 | 4:26 pm a content first At its annual shareholders meet- ing on Thursday, Apple’s man- approach to top-level agement bowed to pressure from key investors and agreed to allow shareholders to elect navigation... board directors by a simple ma- jority vote. Now any new or current director standing for election who fails to receive support from a majority of shareholders must resign his
  • 150. wired.co.uk’s 56 item top level navigation which admittedly could use a trim
  • 151. MENU MENU Apple Gives Share- Apple Gives Sh holders More Input; holders More Apple Gives Share- Apple Gives Share- Will Facebook Get the Will Facebook holders More Input; holders More Input; Message? Message? Will Facebook Get the Home Will Facebook Get the Home By Tim Carmody Home By Tim Carmody Message? Message? February 24, 2012 | 4:26 pm February 24, 2012 | 4:26 By Tim Carmody News By Tim Carmody News News At its annual shareholders At its annual shareho February 24, 2012 | 4:26 pm February 24, 2012 | 4:26 pm Reviews Reviews meeting on Thursday, Reviews meeting on Thursda At its annual shareholders meet- At its annual shareholders meet- Apple’s management bowed Apple’s managemen ing on Thursday, Apple’s man- ing on Thursday, Apple’s man- to pressure from key inves- Phones to pressure from key Photos Photos Mobile agement bowed to pressure agement bowed to pressure tors and agreed to allow tors and agreed to a from key investors and agreedVideo to from key investors and agreed to shareholders to elect Tablets board shareholders to elec Video directors by a simple major- directors by a simple allow shareholders to elect allow shareholders to elect board directors by a simple ma- board directors by a simple ma- ity vote. Gadgets ity vote. Magazine Magazine jority vote. jority vote. Now any new or currentCameras & Camcorders Now any new or cu Podcast Now any new or current director Now any new or current director Podcast director standing for election director standing fo standing for election who fails to standing for election who fails to Laptops who fails to receive support who fails to receive receive support from a majority Topics receive support from a majority Topics from a majority of share- from a majority of sh of shareholders must resign his of shareholders must resign his holders must resign his and Home TV holders must resign
  • 152. huh...? what? I’ve seen that look... http://www.flickr.com/photos/eldret_99/3311540632
  • 153. attribute notifies browser that offloading to native behaviour is permitted attribute trigger is ignored on older browsers MENU Apple Gives Share- holders More Input; Will Facebook Get the <nav is=”native”> Message? By Tim Carmody <ul> February 24, 2012 | 4:26 pm <li>Home</li> At its annual shareholders meet- ‘normal’ standards ing on Thursday, Apple’s man- agement bowed to pressure <li>News</li> compliant markup from key investors and agreed to allow shareholders to elect <li>Reviews</li> board directors by a simple ma- jority vote. </ul> Now any new or current director </nav> standing for election who fails to receive support from a majority of shareholders must resign his
  • 154. fully styleable HTML trigger MENU MENU Apple Gives Share- Apple Gives Share- holders More Input; holders More Input; Will Facebook Get the Message? Home Will Facebook Get the Message? • Native performance and News By Tim Carmody February 24, 2012 | 4:26 pm By Tim Carmody February 24, 2012 | 4:26 pm responsiveness (GPU acceleration etc.) Reviews At its annual shareholders meet- ing on Thursday, Apple’s man-Photos At its annual shareholders meet- ing on Thursday, Apple’s man- • Device appropriate transition agement bowed to pressure from key investors and agreed to Video agement bowed to pressure from key investors and agreed to (or not...entirely dependant on device allow shareholders to elect allow shareholders to elect board directors by a simple ma- Magazine board directors by a simple ma- capabilities) jority vote. jority vote. Now any new or current director Podcast Now any new or current director • User gets the most appropriate standing for election who fails to Topics receive support from a majority standing for election who fails to receive support from a majority experience for their device. of shareholders must resign his of shareholders must resign his
  • 155. fully styleable (ideally) tied-in to native APIs HTML trigger e.g. predictive text, localization... MENU MENU Apple Gives Share- holders More Input; Apple Gives Share- Apple Gives Share- Will Facebook Get the holders More Input; holders More Input; Message? Will Facebook Get the Message? Home Will Facebook Get the Message? Home By Tim Carmody • Menu can (in theory) February 24, 2012 | 4:26 pm By Tim Carmody News By Tim Carmody News be as long or complex At its annual shareholders February 24, 2012 | 4:26 pm February 24, 2012 | 4:26 pm Reviews Reviews meeting on Thursday, At its annual shareholders meet- At its annual shareholders meet- as needed. Apple’s management bowed to pressure from key inves- • Native platform assists ing on Thursday, Apple’s man-Photos ing on Thursday, Apple’s man- Photos agement bowed to pressure agement bowed to pressure tors and agreed to allow from key investors and agreed to from key investors and agreed to shareholders to elect board Video Video allow shareholders to elect board directors by a simple ma- allow shareholders to elect board directors by a simple ma- ity vote. in management of drill directors by a simple major- Magazine Magazine Now any new or down or progressive jority vote. jority vote. current Podcast Podcast director standing for election Now any new or current director standing for election who fails to Topics Now any new or current director standing for election who fails to Topics disclosure. who fails to receive support receive support from a majority receive support from a majority from a majority of share- of shareholders must resign his of shareholders must resign his holders must resign his device appropriate native native transition performance when scrolling
  • 156. fully styleable basic component styling (ideally) tied-in to native APIs HTML trigger (e.g. logo, colour scheme, e.g. predictive text, localization... fonts) is enabled via CSS MENU MENU Apple Gives Share- Apple Gives Sh holders More Input; holders More I Apple Gives Share- Apple Gives Share- Will Facebook Get the Will Facebook holders More Input; holders More Input; Message? Message? Will Facebook Get the Home Will Facebook Get the Home By Tim Carmody Home By Tim Carmody Message? Message? February 24, 2012 | 4:26 pm February 24, 2012 | 4:26 p By Tim Carmody News By Tim Carmody News News At its annual shareholders At its annual shareho February 24, 2012 | 4:26 pm February 24, 2012 | 4:26 pm Reviews Reviews meeting on Thursday, Reviews meeting on Thursday At its annual shareholders meet- At its annual shareholders meet- Apple’s management bowed Apple’s managemen ing on Thursday, Apple’s man- ing on Thursday, Apple’s man- to pressure from key inves- Phones to pressure from key Photos Photos Mobile agement bowed to pressure agement bowed to pressure tors and agreed to allow tors and agreed to al from key investors and agreed to from key investors and agreed to shareholders to elect Tablets board shareholders to elect Video Video directors by a simple major- directors by a simple allow shareholders to elect allow shareholders to elect board directors by a simple ma- board directors by a simple ma- ity vote. Gadgets ity vote. Magazine Magazine jority vote. jority vote. Now any new or currentCameras & Camcorders Now any new or cur Podcast Now any new or current director Now any new or current director Podcast director standing for election director standing for standing for election who fails to standing for election who fails to Laptops who fails to receive support who fails to receive s Topics receive support from a majority receive support from a majority Topics from a majority of share- from a majority of sh of shareholders must resign his of shareholders must resign his holders must resign his and Home TV holders must resign h device appropriate native native transition performance when scrolling
  • 157. in theory...it wouldn’t matter what device you’re using... Apple Gives Share- Apple Gives Shareholders More Input; holders More Input; Will Facebook Get the Home Facebook Get the Message? Will Home Message? Home By Tim Carmody News News Home February 24, 2012 | 4:26 pm By Tim Carmody February 24, 2012 | 4:26 pm News News At its annual shareholders Reviews Reviews Reviews meeting on Thursday, At its annual shareholders meeting on Thursday, Reviews Photos Photos Apple’s management bowed to pressure from key inves- tors and agreed to allow Photos management bowed to pressure from key in- Photos Apple’s Home vestors and agreed to allow shareholders to elect Video shareholders to elect board directors by a simple major- Video Video board directors by a simple majority vote. News ity vote. Magazine Magazine Magazine Podcast Now any new or current Podcast Podcast new or current director standing for election Reviews Now any Photos director standing for election who fails to receive support Topics from a majority of share- Topics fails to receive support from a majority of share- who Topics holders must resign his holders must resign his his or her position. At next year MENU
  • 158. it would also fit in nicely with the basic premise around this CSS Pagination Template Module
  • 159. and maybe even this Web Components Explained
  • 160. idea #4 Problem: Our media formats aren’t adaptive enough • An image or media item that is suitable for one context may not be for another. • Many parameters will determine which media item you serve. These are the ones we know of TODAY. • screen and/or viewport size • pixel density • support-level for the media format • available bandwidth • user choice why do we keep ignoring this bit?
  • 161. the current (early) proposal media query enables more proposed new picture element control over criteria <picture> <source src=”high-res.jpg” media=”min-width: 800px” /> <source src=”mobile.jpg” /> <!-- Fallback media format --> parameters could eventually be extended for added context e.g. <img src=”mobile.jpg” /> connection speed </picture> fallback image when unsupported modelled after the video element <video> <source src="high-res.webm" media="min-width:800px" /> <source src="low-res.webm" /> <img src="poster.jpg" /> media query support here is still poor </video> Source: Responsive images- how they almost worked and what we need
  • 162. will a new (much smarter) element be enough given all the diversity that is on the way?
  • 163. why not a new, and natively adaptive image media container format? Hat tip to Christopher Schmitt
  • 164. example ‘wired media’ container format Apple circa 2000 with built in progress meter poster • Built-in content negotiation. image • Default negotiation based on Hi-rez connection speed but could also be 50MB Mid-rez 20MB triggered by the developer (using the wired media API). Low-rez A • Optional, out-of-the-box native 1MB component and behaviour to prompt Low-rez B 1MB user for connection speed highly compressed e.g. 28.8, 56, ISDN (how retro!) initial download package contains 2-20kb references to content (of almost any file format) on server/CDN QuickTime reference movies please don’t be distracted by the word movie Sorry...no links - this is all out of @bryanrieger’s head from back in 2000
  • 165. Combine a smarter image format with some upcoming CSS specification drafts (and experiments) and we can begin to imagine truly responsive media combining content negotiation with sophisticated client-side adaptation an image with grayscale pixel shader applied a list element (e.g. ul, li) wrapped in a vertex shader CSS Exclusions & Shapes CSS Shaders image compositing Adobe, Microsoft: Editor’s Draft 2 Adobe, Apple, Opera: Editor’s Draft with CSS blend modes Adobe - early concept Adobe web platform blog and CSS bleeding edge features
  • 166. these are of course just ideas....
  • 167. the reality is, we have no idea what will happen next... (when I was a kid, they kept telling us we would have jetpacks by now...) http://www.flickr.com/photos/jurvetson/302869583
  • 168. “Technological revolutions have several interesting properties. First, we tend to overestimate the immediate impact and underestimate the long-term impact. Second, we tend to place the emphasis on the technologies themselves, when it is really the social impact and cultural change that will be most dramatic.” – Don Norman, Drop everything you’re doing http://www.flickr.com/photos/jordanfischer/61429449
  • 169. The future is a process, not a destination. - Bruce Sterling here’s to the next 8000 days! http://www.flickr.com/photos/psd/3149878971
  • 170. @yiibu s contact u at hello@yiibu.com thank you many thanks to the amazing photographers on http://creativecommons.org/licenses/by/2.0 http://www.slideshare.net/yiibu/reset-the-web http://www.flickr.com/photos/tinou/453593446