The future of web technologies
WEB STANDARDS, CROSS-DEVICE DEVELOPMENT AND THE WEB AS UBIQUITOUS PLATFORM




 Patrick H. Lauke / Webtech / Karlsruhe / 17 November 2009
Web Evangelist at Opera
Opera – one browser on many devices
"Our goal is to take the one true Web and
make it available to people on their terms."
         Jon S. von Tetzchner, Opera Co-founder & CEO
1. new web standards
2. adaptive content
3. browser as platform
1. new web standards
2. adaptive content
3. browser as platform
new technologies you can start using today
HTML5
<!DOCTYPE html>
HTML5 does not replace HTML 4.01
HTML5 has more bling!
“...extending the language to better support Web
applications, since that is one of the directions the Web is
going in and is one of the areas least well served by HTML
so far. This puts HTML in direct competition with other
technologies intended for applications deployed over the
Web, in particular Flash and Silverlight.”

Ian Hickson, Editor of HTML5
http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html
HTML5 is umbrella term:
markup elements and JavaScript APIs
Webforms – more powerful form elements
standardise commonly-used
rich form elements – without JavaScript
built-in validation
(of course you should still validate on the server)

          Demonstration of webforms
<canvas>
canvas = “scriptable images”
canvas has standard API methods for drawing
ctx = canvas.getContext("2d");
ctx.fillRect(x, y, width, height);
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x, y);
ctx.bezierCurveTo(x1, y1, x2, y2, c1, c2);
canvas mixing things up with external graphics
ctx = canvas.drawImage(…)

Demonstration of canvas
<video>
<object width="425" height="344">
  <param name="movie"
value="http://www.youtube.com/v/9sEI1AUFJKw&hl=en
&fs=1&"></param>
  <param name="allowFullScreen"
value="true"></param>
  <param name="allowscriptaccess"
value="always"></param>
  <embed
src="http://www.youtube.com/v/9sEI1AUFJKw&hl=en&f
s=1&" type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true"
width="425" height="344"></embed>
</object>
<video src="video.ogv"
  controls
  autoplay
  poster="poster.jpg"
  width="320" height="240">
    <a href="video.ogv">Download movie</a>
</video>
video as native object...why is it important?

● “play nice” with rest of the page
● keyboard accessibility built-in

● API for controls



Demonstration of video in Presto 2.4
video format debates – MP4 vs OGG Theora
<video controls autoplay poster="…" width="…" height="…">
   <source src="movie.ogv" type="video/ogg" />
   <source src="movie.mp4" type="video/mp4" />
   <!-- fallback content -->
</video>


       still include fallback for old browsers
            http://camendesign.com/code/video_for_everybody
video and canvas on any device
        without plugins
     (Java / Flash / Silverlight not ubiquitous)
IANAL, but … EOLAS?
1. new web standards
2. adaptive content
3. browser as platform
Mobile web and why it matters
        www.opera.com/smw
Opera Mini: +150% users, +224% traffic
   15 Billion pages served / month
             September 2008 - 2009
“One Web” is an uneven landscape:

● constrained browsers (WAP, …)
● mobile “Full Web” (Android, Opera Mobile, …)

● proxy-based (Opera Mini, …)

● laptop, Netbook, Tablet PC, Desktop

● games consoles, set-top boxes, TVs
Device capabilities also vary:

● screen size and resolution
● input mechanism – touch, keypad, other?

● memory and processing power

● colour palettes

● connection speed / quality
“One Web means making, as far as is reasonable, the
same information and services available to users
irrespective of the device they are using. However, it does
not mean that exactly the same information is available in
exactly the same representation across all devices.”
W3C Mobile Web Best Practices http://www.w3.org/TR/mobile-bp/#OneWeb
Approaches to cross-device development:

● do nothing – use standards, defensive design
● separate site (m.mysite.com, mysite.mobi)

● single site, but optimised for cross-device
Server-side detection of devices:

●   “browser sniffing” the User Agent string
    Opera/9.80 (J2ME/MIDP; Opera Mini/5.0.2056/866; U; en) Presto/2.2


●   offer users a way back (example of Orkut)
Client-side detection of devices:

● “browser sniffing” the User Agent string again
● “capability sniffing” reliant on JavaScript

● CSS 2.1 Media Types

● CSS 3 Media Queries
CSS 2.1 Media Types:

● print, screen, handheld, projection, tv, …
● partially supported

● lump all devices into single categories



http://www.w3.org/TR/CSS21/media.html
CSS 2.1 Media Types:

<link rel="stylesheet" ...
media="print" href="...">

@import url("...") print;

@media print {
  // insert CSS rules here
}
CSS 3 Media Queries:

● build and extend CSS 2.1 Media Types
● more granular control of capabilities

● width, height, orientation, color, resolution, …



http://www.w3.org/TR/css3-mediaqueries/
CSS 3 Media Queries:

@media screen and
       (max-device-width: 480px) {

    // insert CSS rules here

}

Demonstration of Media Queries
SVG in OBJECT, CSS and IMG element*
     native inclusion in HTML5?
          *only in Opera at the moment
CSS 3 Media Queries and SVG:

● SVG already resolution independent
● ideal for device interfaces, maps, graphs, …

● combination with CSS 3 Media Queries



Demonstration of Media Queries + SVG
1. new web standards
2. adaptive content
3. browser as platform
Full Web is not always practical or desirable
Widgets are nothing new
Yahoo! Widgets (aka Konfabulator), OS X Dashboard, Windows Sidebar,
              Adobe Air, iPhone Apps, Android Apps, …
“…the browser run-time is
perfect…you’re out of writing for
Windows Mobile, Android, S60,
each of which require testing...we
want to abstract that.

All the cool innovation is
happening inside the browser –
you don’t need to write to the
native operating system
anymore.”

Mobile Entertainment Market , June, 2009
W3C Widgets – application development filled
      with web standards goodness,
    using browser engine as platform
Widgets on desktop, mobile, TV … fridge?
Opera had widget capability for a long time …
latest Labs release widgets as standalone apps
             http://labs.opera.com/news/2009/10/15/
Anatomy of a widget
index.html + config.xml
Configuration file
<widget>
  <widgetname>MyFirstWidget</widgetname>
  <description>A demo widget</description>
  <icon>images/widget.png</icon>
  <width>320</width>
  <height>240</height>
</widget>

Demonstration of basic widget
Standardised JavaScript APIs
to access device-specific capabilities
               (JIL / BONDI)
Opera Unite applications related
to widget … but turbo-charged!
Media Player                           Messenger
Access your complete home              Communicate with your friends
music library from wherever you        in My Opera in a one-to-one,
are.                                   live session.



File Sharing                           The Lounge
Share files directly from your         Invite your friends to a chat in
computer easily and safely.            The Lounge hosted on your
                                       computer.



File Inbox                             Web Server
Allow files to be uploaded to
                                       Host your Web sites running from
your computer, by you or
                                       your own computer.
your friends, from
anywhere.



Photo Sharing                          Fridge
Share your personal photos with        Enjoy fun notes left on your
friends around the world without the   computer by friends.
need to upload them.
laptop.tagawa.operaunite.com
Traditional data sharing
Opera Unite data sharing
Opera Unite applications use web standards
        + specific JavaScript APIs
Opera Unite applications = “P2P widgets”
using Opera browser as app environment
           (but any other browser can connect)
1. new web standards
2. adaptive content
3. browser as platform
www.opera.com/developer
   patrick.lauke@opera.com

Webtech 17.11.2009

  • 1.
    The future ofweb technologies WEB STANDARDS, CROSS-DEVICE DEVELOPMENT AND THE WEB AS UBIQUITOUS PLATFORM Patrick H. Lauke / Webtech / Karlsruhe / 17 November 2009
  • 2.
  • 3.
    Opera – onebrowser on many devices
  • 4.
    "Our goal isto take the one true Web and make it available to people on their terms." Jon S. von Tetzchner, Opera Co-founder & CEO
  • 5.
    1. new webstandards 2. adaptive content 3. browser as platform
  • 6.
    1. new webstandards 2. adaptive content 3. browser as platform
  • 7.
    new technologies youcan start using today
  • 8.
  • 9.
    HTML5 does notreplace HTML 4.01
  • 10.
  • 11.
    “...extending the languageto better support Web applications, since that is one of the directions the Web is going in and is one of the areas least well served by HTML so far. This puts HTML in direct competition with other technologies intended for applications deployed over the Web, in particular Flash and Silverlight.” Ian Hickson, Editor of HTML5 http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html
  • 12.
    HTML5 is umbrellaterm: markup elements and JavaScript APIs
  • 13.
    Webforms – morepowerful form elements
  • 14.
    standardise commonly-used rich formelements – without JavaScript
  • 15.
    built-in validation (of courseyou should still validate on the server) Demonstration of webforms
  • 16.
  • 17.
  • 18.
    canvas has standardAPI methods for drawing ctx = canvas.getContext("2d"); ctx.fillRect(x, y, width, height); ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x, y); ctx.bezierCurveTo(x1, y1, x2, y2, c1, c2);
  • 19.
    canvas mixing thingsup with external graphics ctx = canvas.drawImage(…) Demonstration of canvas
  • 20.
  • 21.
    <object width="425" height="344"> <param name="movie" value="http://www.youtube.com/v/9sEI1AUFJKw&hl=en &fs=1&"></param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube.com/v/9sEI1AUFJKw&hl=en&f s=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed> </object>
  • 22.
    <video src="video.ogv" controls autoplay poster="poster.jpg" width="320" height="240"> <a href="video.ogv">Download movie</a> </video>
  • 23.
    video as nativeobject...why is it important? ● “play nice” with rest of the page ● keyboard accessibility built-in ● API for controls Demonstration of video in Presto 2.4
  • 24.
    video format debates– MP4 vs OGG Theora <video controls autoplay poster="…" width="…" height="…"> <source src="movie.ogv" type="video/ogg" /> <source src="movie.mp4" type="video/mp4" /> <!-- fallback content --> </video> still include fallback for old browsers http://camendesign.com/code/video_for_everybody
  • 25.
    video and canvason any device without plugins (Java / Flash / Silverlight not ubiquitous)
  • 26.
  • 27.
    1. new webstandards 2. adaptive content 3. browser as platform
  • 28.
    Mobile web andwhy it matters www.opera.com/smw
  • 29.
    Opera Mini: +150%users, +224% traffic 15 Billion pages served / month September 2008 - 2009
  • 30.
    “One Web” isan uneven landscape: ● constrained browsers (WAP, …) ● mobile “Full Web” (Android, Opera Mobile, …) ● proxy-based (Opera Mini, …) ● laptop, Netbook, Tablet PC, Desktop ● games consoles, set-top boxes, TVs
  • 31.
    Device capabilities alsovary: ● screen size and resolution ● input mechanism – touch, keypad, other? ● memory and processing power ● colour palettes ● connection speed / quality
  • 32.
    “One Web meansmaking, as far as is reasonable, the same information and services available to users irrespective of the device they are using. However, it does not mean that exactly the same information is available in exactly the same representation across all devices.” W3C Mobile Web Best Practices http://www.w3.org/TR/mobile-bp/#OneWeb
  • 33.
    Approaches to cross-devicedevelopment: ● do nothing – use standards, defensive design ● separate site (m.mysite.com, mysite.mobi) ● single site, but optimised for cross-device
  • 34.
    Server-side detection ofdevices: ● “browser sniffing” the User Agent string Opera/9.80 (J2ME/MIDP; Opera Mini/5.0.2056/866; U; en) Presto/2.2 ● offer users a way back (example of Orkut)
  • 35.
    Client-side detection ofdevices: ● “browser sniffing” the User Agent string again ● “capability sniffing” reliant on JavaScript ● CSS 2.1 Media Types ● CSS 3 Media Queries
  • 36.
    CSS 2.1 MediaTypes: ● print, screen, handheld, projection, tv, … ● partially supported ● lump all devices into single categories http://www.w3.org/TR/CSS21/media.html
  • 37.
    CSS 2.1 MediaTypes: <link rel="stylesheet" ... media="print" href="..."> @import url("...") print; @media print { // insert CSS rules here }
  • 38.
    CSS 3 MediaQueries: ● build and extend CSS 2.1 Media Types ● more granular control of capabilities ● width, height, orientation, color, resolution, … http://www.w3.org/TR/css3-mediaqueries/
  • 39.
    CSS 3 MediaQueries: @media screen and (max-device-width: 480px) { // insert CSS rules here } Demonstration of Media Queries
  • 40.
    SVG in OBJECT,CSS and IMG element* native inclusion in HTML5? *only in Opera at the moment
  • 41.
    CSS 3 MediaQueries and SVG: ● SVG already resolution independent ● ideal for device interfaces, maps, graphs, … ● combination with CSS 3 Media Queries Demonstration of Media Queries + SVG
  • 42.
    1. new webstandards 2. adaptive content 3. browser as platform
  • 43.
    Full Web isnot always practical or desirable
  • 45.
    Widgets are nothingnew Yahoo! Widgets (aka Konfabulator), OS X Dashboard, Windows Sidebar, Adobe Air, iPhone Apps, Android Apps, …
  • 46.
    “…the browser run-timeis perfect…you’re out of writing for Windows Mobile, Android, S60, each of which require testing...we want to abstract that. All the cool innovation is happening inside the browser – you don’t need to write to the native operating system anymore.” Mobile Entertainment Market , June, 2009
  • 47.
    W3C Widgets –application development filled with web standards goodness, using browser engine as platform
  • 48.
    Widgets on desktop,mobile, TV … fridge?
  • 49.
    Opera had widgetcapability for a long time … latest Labs release widgets as standalone apps http://labs.opera.com/news/2009/10/15/
  • 50.
    Anatomy of awidget index.html + config.xml
  • 51.
    Configuration file <widget> <widgetname>MyFirstWidget</widgetname> <description>A demo widget</description> <icon>images/widget.png</icon> <width>320</width> <height>240</height> </widget> Demonstration of basic widget
  • 52.
    Standardised JavaScript APIs toaccess device-specific capabilities (JIL / BONDI)
  • 54.
    Opera Unite applicationsrelated to widget … but turbo-charged!
  • 55.
    Media Player Messenger Access your complete home Communicate with your friends music library from wherever you in My Opera in a one-to-one, are. live session. File Sharing The Lounge Share files directly from your Invite your friends to a chat in computer easily and safely. The Lounge hosted on your computer. File Inbox Web Server Allow files to be uploaded to Host your Web sites running from your computer, by you or your own computer. your friends, from anywhere. Photo Sharing Fridge Share your personal photos with Enjoy fun notes left on your friends around the world without the computer by friends. need to upload them.
  • 56.
  • 57.
  • 58.
  • 59.
    Opera Unite applicationsuse web standards + specific JavaScript APIs
  • 60.
    Opera Unite applications= “P2P widgets” using Opera browser as app environment (but any other browser can connect)
  • 61.
    1. new webstandards 2. adaptive content 3. browser as platform
  • 62.
    www.opera.com/developer patrick.lauke@opera.com