SlideShare a Scribd company logo
1 of 74
Download to read offline
Web Development 2.0
Mobile, HTML5, CSS 3, DAP; beat the buzzwords with Bruce




 Bruce Lawson / Over The Air / London / 10 September 2010
NEWT – MWA !
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

   "All I ask is access to the full Web, for everyone, everywhere.
                        And some more beer."
                                 Me
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
CSS 3
font control, shadows, rounded corners,
            basic animations
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;
HTML5
<!DOCTYPE html>
Pic by @slexaxton
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 mix with external graphics/ video
ctx = canvas.drawImage(…)

Demonstration of canvas
<svg>
   or

<canvas>?
Scalable Vector Graphics:

● Supported in 4 modern browsers, and IE9
● Vector graphics, therefore infinitely scalable

● XML so text-based - can be made accessible

● Keeps a DOM

● Can author with Adobe Illustrator or Inkscape
<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 format debates – Free formats vs MP4
<video controls autoplay poster=… width=… height=…>
   <source src=movie.mp4 type=video/mp4>
   <source src=movie.webm type=video/webm>
   <!-- fallback content -->
</video>


       still include fallback for old browsers
            http://camendesign.com/code/video_for_everybody
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 Opera,
                scripted controls
geolocation
find out your location via JavaScript
navigator.geolocation.getCurrentPosition(success, error);

function success(position) {
   /* where's Waldo? */
   var lat = position.coords.latitude;
   var long = position.coords.longitude;
   ...
}
offline support
detect if a browsers goes offline
window.addEventListener('online', function(){ … }, true);
window.addEventListener('offline', function(){ … }, true);
storage
localStorage/sessionStorage
like cookies...
document.cookie = 'key=value; expires=Thu, 15 Feb 2010
23:59:59 UTC; path=/'
…

/* convoluted string operations go here … */
localStorage/sessionStorage
like cookies...on steroids!
localStorage.setItem(key, value);
localStorage.getItem(key);
localStorage.clear();
localStorage.key = value;
if (localStorage.key == '…') { … }
…
application cache
cache UI/resource files for offline use
<html manifest=”blah.manifest”>

CACHE MANIFEST
# send this with correct text/cache-manifest MIME
images/sprites.png
scripts/common.js
scripts/jquery.js
styles/global.css
1. new web standards
2. adaptive content
3. browser as platform
Mobile web and why it matters
          opera.com/smw
Opera Mini: 29.6 billion pages were served
 and 4.1 petabytes of operator data were
    compressed for Opera Mini users.

     Unique users increased 114%.
                  July 2009 – July 2010

           http://www.opera.com/smw/2010/07/
“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
1. do nothing
not WAP or text anymore...
mobile browsers
will work ok-ish
2. separate mobile site
  (m.flickr.com, mobile.mysite.com, ...)
beware browser sniffing
     photo: http://www.flickr.com/photos/timdorr/2096272747/
refactored for small screen,
not dumbed down for mobile
offer users choice:
desktop or mobile?
3. single adaptive site
nothing new...
fluid layout, progressive enhancement, graceful degradation
Tips for optimising for mobile/ devices:

● Use CSS3 Media Queries
● Define size of images in HTML

● Put JavaScript as far down as you can

● Reduce HTTP requests
CSS 3 Media Queries:

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

    // insert CSS rules here

}
http://www.w3.org/TR/css3-mediaqueries/

Demonstration of Media Queries
Images:

●
  Images take a long time to load, so tell the browser
to leave a space for them
● If you don't, when the image finally loads, the


browser will redraw the page to fit the image in,
perhaps scrolling off screen
● Redrawing the screen wastes processor time (and


battery life)
● Some turn off images; design for accessibility
Put JS as far down the source as possible:

●
  Browsers wait for JS to load. If they're at the top,
rendering pauses.
● If your JS is at the bottom of the page, the user can


read the content etc while she is waiting to interact
with the page.
Minimise HTTP requests:

●
  Combine JS into one file. Same with CSS.
● Use CSS sprites to combine decorative images

● Consider encoding images directly in your page as


data URLs
● Use SVG or <canvas> for images
1. new web standards
2. adaptive content
3. browser as platform
“…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
Anatomy of a widget
index.html, assets + config.xml,
        zipped and renamed .wgt
What's next?
W3C DAP
(Devices and Protocols Working Group)
Defining JavaScript APIs:

● Contacts (access address book)
● Calendar API

● Media Capture API (programmatic access to


camera/microphone)
● Messaging API (email/ SMS)



                http://www.w3.org/2009/dap/
1. new web standards
2. adaptive content
3. browser as platform
www.opera.com/developer
   bruce.lawson@opera.com
      twitter.com@brucel

More Related Content

What's hot

Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed BumpsNicholas Zakas
 
Now you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and DevelopmentNow you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and DevelopmentJonas Päckos
 
Collective.amberjack ploneconf2010
Collective.amberjack ploneconf2010Collective.amberjack ploneconf2010
Collective.amberjack ploneconf2010Massimo Azzolini
 
Introduction to WordPress Multisite
Introduction to WordPress MultisiteIntroduction to WordPress Multisite
Introduction to WordPress MultisiteCraig Taylor
 
Plone for python programmers
Plone for python programmersPlone for python programmers
Plone for python programmersDylan Jay
 
RESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web DesignRESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web DesignDave Olsen
 
SEE 2009: Improving Mobile Web Developer Experience
SEE 2009: Improving Mobile Web Developer ExperienceSEE 2009: Improving Mobile Web Developer Experience
SEE 2009: Improving Mobile Web Developer ExperienceTasneem Sayeed
 
S314011 - Developing Composite Applications for the Cloud with Apache Tuscany
S314011 - Developing Composite Applications for the Cloud with Apache TuscanyS314011 - Developing Composite Applications for the Cloud with Apache Tuscany
S314011 - Developing Composite Applications for the Cloud with Apache TuscanyLuciano Resende
 
Making Chrome Extension with AngularJS
Making Chrome Extension with AngularJSMaking Chrome Extension with AngularJS
Making Chrome Extension with AngularJSBen Lau
 
[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web Design[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
Build Python CMS The Plone Way
Build Python CMS The Plone WayBuild Python CMS The Plone Way
Build Python CMS The Plone WayTsungWei Hu
 
Chrome extension development
Chrome extension developmentChrome extension development
Chrome extension developmentMichal Haták
 
HTML5 and Google Chrome - DevFest09
HTML5 and Google Chrome - DevFest09HTML5 and Google Chrome - DevFest09
HTML5 and Google Chrome - DevFest09mihaiionescu
 
Managing windows with Puppet and Chocolatey
Managing windows with Puppet and ChocolateyManaging windows with Puppet and Chocolatey
Managing windows with Puppet and ChocolateySethMcBean
 
Build your own Chrome Extension with AngularJS
Build your own Chrome Extension with AngularJSBuild your own Chrome Extension with AngularJS
Build your own Chrome Extension with AngularJSflrent
 
Accessible web applications
Accessible web applicationsAccessible web applications
Accessible web applicationsWojtek Zając
 
Forensic Tools for In-Depth Performance Investigations
Forensic Tools for In-Depth Performance InvestigationsForensic Tools for In-Depth Performance Investigations
Forensic Tools for In-Depth Performance InvestigationsNicholas Jansma
 

What's hot (20)

Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed Bumps
 
Deploying a website
Deploying a websiteDeploying a website
Deploying a website
 
Now you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and DevelopmentNow you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and Development
 
Collective.amberjack ploneconf2010
Collective.amberjack ploneconf2010Collective.amberjack ploneconf2010
Collective.amberjack ploneconf2010
 
Meet The Family
Meet The FamilyMeet The Family
Meet The Family
 
Introduction to WordPress Multisite
Introduction to WordPress MultisiteIntroduction to WordPress Multisite
Introduction to WordPress Multisite
 
Plone for python programmers
Plone for python programmersPlone for python programmers
Plone for python programmers
 
Mozilla the web and you
Mozilla the web and youMozilla the web and you
Mozilla the web and you
 
RESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web DesignRESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web Design
 
SEE 2009: Improving Mobile Web Developer Experience
SEE 2009: Improving Mobile Web Developer ExperienceSEE 2009: Improving Mobile Web Developer Experience
SEE 2009: Improving Mobile Web Developer Experience
 
S314011 - Developing Composite Applications for the Cloud with Apache Tuscany
S314011 - Developing Composite Applications for the Cloud with Apache TuscanyS314011 - Developing Composite Applications for the Cloud with Apache Tuscany
S314011 - Developing Composite Applications for the Cloud with Apache Tuscany
 
Making Chrome Extension with AngularJS
Making Chrome Extension with AngularJSMaking Chrome Extension with AngularJS
Making Chrome Extension with AngularJS
 
[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web Design[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web Design
 
Build Python CMS The Plone Way
Build Python CMS The Plone WayBuild Python CMS The Plone Way
Build Python CMS The Plone Way
 
Chrome extension development
Chrome extension developmentChrome extension development
Chrome extension development
 
HTML5 and Google Chrome - DevFest09
HTML5 and Google Chrome - DevFest09HTML5 and Google Chrome - DevFest09
HTML5 and Google Chrome - DevFest09
 
Managing windows with Puppet and Chocolatey
Managing windows with Puppet and ChocolateyManaging windows with Puppet and Chocolatey
Managing windows with Puppet and Chocolatey
 
Build your own Chrome Extension with AngularJS
Build your own Chrome Extension with AngularJSBuild your own Chrome Extension with AngularJS
Build your own Chrome Extension with AngularJS
 
Accessible web applications
Accessible web applicationsAccessible web applications
Accessible web applications
 
Forensic Tools for In-Depth Performance Investigations
Forensic Tools for In-Depth Performance InvestigationsForensic Tools for In-Depth Performance Investigations
Forensic Tools for In-Depth Performance Investigations
 

Viewers also liked

The Home of the Future: CSS Layouts
The Home of the Future: CSS LayoutsThe Home of the Future: CSS Layouts
The Home of the Future: CSS LayoutsPeter Gasston
 
HTML5 Who what where when why how
HTML5 Who what where when why howHTML5 Who what where when why how
HTML5 Who what where when why howbrucelawson
 
Listening through Customer Insights
Listening through Customer InsightsListening through Customer Insights
Listening through Customer InsightsDelvinia
 
openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010Patrick Lauke
 
Staying in the fast lane - tools to keep your site speedy and light
Staying in the fast lane - tools to keep your site speedy and lightStaying in the fast lane - tools to keep your site speedy and light
Staying in the fast lane - tools to keep your site speedy and lightstefanjudis
 
Node.js, le pavé dans la mare
Node.js, le pavé dans la mareNode.js, le pavé dans la mare
Node.js, le pavé dans la mareValtech
 
Open Annotation Collaboration Briefing
Open Annotation Collaboration BriefingOpen Annotation Collaboration Briefing
Open Annotation Collaboration BriefingTimothy Cole
 
W3C/Webkit test integration presentation
W3C/Webkit test integration presentationW3C/Webkit test integration presentation
W3C/Webkit test integration presentationjacobg415
 
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011Patrick Lauke
 
Making your site mobile-friendly / RIT++
Making your site mobile-friendly / RIT++Making your site mobile-friendly / RIT++
Making your site mobile-friendly / RIT++Patrick Lauke
 
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...Patrick Lauke
 
Standards Talk - Opera Uni Tour Indonesia
Standards Talk - Opera Uni Tour IndonesiaStandards Talk - Opera Uni Tour Indonesia
Standards Talk - Opera Uni Tour IndonesiaZi Bin Cheah
 
Speak the Web 15.02.2010
Speak the Web 15.02.2010Speak the Web 15.02.2010
Speak the Web 15.02.2010Patrick Lauke
 
AngularJS Directives - DSL for your HTML
AngularJS Directives - DSL for your HTMLAngularJS Directives - DSL for your HTML
AngularJS Directives - DSL for your HTMLLukas Ruebbelke
 
Standards.Next: Canvas
Standards.Next: CanvasStandards.Next: Canvas
Standards.Next: CanvasMartin Kliehm
 
Bruce lawson Stockholm Geek Meet
Bruce lawson Stockholm Geek MeetBruce lawson Stockholm Geek Meet
Bruce lawson Stockholm Geek Meetbrucelawson
 
Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesiabrucelawson
 

Viewers also liked (20)

The Home of the Future: CSS Layouts
The Home of the Future: CSS LayoutsThe Home of the Future: CSS Layouts
The Home of the Future: CSS Layouts
 
HTML5 Who what where when why how
HTML5 Who what where when why howHTML5 Who what where when why how
HTML5 Who what where when why how
 
Listening through Customer Insights
Listening through Customer InsightsListening through Customer Insights
Listening through Customer Insights
 
openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010
 
The Future of Books - Creating New Value from Reading
The Future of Books - Creating New Value from ReadingThe Future of Books - Creating New Value from Reading
The Future of Books - Creating New Value from Reading
 
Staying in the fast lane - tools to keep your site speedy and light
Staying in the fast lane - tools to keep your site speedy and lightStaying in the fast lane - tools to keep your site speedy and light
Staying in the fast lane - tools to keep your site speedy and light
 
Node.js, le pavé dans la mare
Node.js, le pavé dans la mareNode.js, le pavé dans la mare
Node.js, le pavé dans la mare
 
Open Annotation Collaboration Briefing
Open Annotation Collaboration BriefingOpen Annotation Collaboration Briefing
Open Annotation Collaboration Briefing
 
W3C/Webkit test integration presentation
W3C/Webkit test integration presentationW3C/Webkit test integration presentation
W3C/Webkit test integration presentation
 
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
 
Making your site mobile-friendly / RIT++
Making your site mobile-friendly / RIT++Making your site mobile-friendly / RIT++
Making your site mobile-friendly / RIT++
 
HTML5 and XHTML2
HTML5 and XHTML2HTML5 and XHTML2
HTML5 and XHTML2
 
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
 
Standards Talk - Opera Uni Tour Indonesia
Standards Talk - Opera Uni Tour IndonesiaStandards Talk - Opera Uni Tour Indonesia
Standards Talk - Opera Uni Tour Indonesia
 
Speak the Web 15.02.2010
Speak the Web 15.02.2010Speak the Web 15.02.2010
Speak the Web 15.02.2010
 
AngularJS Directives - DSL for your HTML
AngularJS Directives - DSL for your HTMLAngularJS Directives - DSL for your HTML
AngularJS Directives - DSL for your HTML
 
Standards.Next: Canvas
Standards.Next: CanvasStandards.Next: Canvas
Standards.Next: Canvas
 
Bruce lawson Stockholm Geek Meet
Bruce lawson Stockholm Geek MeetBruce lawson Stockholm Geek Meet
Bruce lawson Stockholm Geek Meet
 
Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesia
 
HTML5 and CSS 3
HTML5 and CSS 3HTML5 and CSS 3
HTML5 and CSS 3
 

Similar to Bruce lawson-over-the-air

Transmission2 25.11.2009
Transmission2 25.11.2009Transmission2 25.11.2009
Transmission2 25.11.2009Patrick Lauke
 
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010Patrick Lauke
 
Handys und Tablets - Webentwicklung jenseits des Desktops - MobileTech Confer...
Handys und Tablets - Webentwicklung jenseits des Desktops - MobileTech Confer...Handys und Tablets - Webentwicklung jenseits des Desktops - MobileTech Confer...
Handys und Tablets - Webentwicklung jenseits des Desktops - MobileTech Confer...Patrick Lauke
 
Making your site mobile-friendly - Standards-Next 12.06.2010
Making your site mobile-friendly - Standards-Next 12.06.2010Making your site mobile-friendly - Standards-Next 12.06.2010
Making your site mobile-friendly - Standards-Next 12.06.2010Patrick Lauke
 
The Mobile Development Landscape
The Mobile Development LandscapeThe Mobile Development Landscape
The Mobile Development LandscapeAmbert Ho
 
Front-end. Global domination
Front-end. Global dominationFront-end. Global domination
Front-end. Global dominationStfalcon Meetups
 
Uni Tour Germany 11.2009
Uni Tour Germany 11.2009Uni Tour Germany 11.2009
Uni Tour Germany 11.2009Patrick Lauke
 
A new interface between smart device and web using html5 web socket and qr code
A new interface between smart device and web using html5 web socket and qr codeA new interface between smart device and web using html5 web socket and qr code
A new interface between smart device and web using html5 web socket and qr codeMatthew Chang
 
Developing for Mobile Web
Developing for Mobile WebDeveloping for Mobile Web
Developing for Mobile WebBarbara Bermes
 
How to build_a_mobile_site_with_drupal
How to build_a_mobile_site_with_drupalHow to build_a_mobile_site_with_drupal
How to build_a_mobile_site_with_drupalGreen For All
 
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeThe challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeCaridy Patino
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and moreYan Shi
 
Web app and more
Web app and moreWeb app and more
Web app and morefaming su
 

Similar to Bruce lawson-over-the-air (20)

Transmission2 25.11.2009
Transmission2 25.11.2009Transmission2 25.11.2009
Transmission2 25.11.2009
 
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010
 
Handys und Tablets - Webentwicklung jenseits des Desktops - MobileTech Confer...
Handys und Tablets - Webentwicklung jenseits des Desktops - MobileTech Confer...Handys und Tablets - Webentwicklung jenseits des Desktops - MobileTech Confer...
Handys und Tablets - Webentwicklung jenseits des Desktops - MobileTech Confer...
 
Webtech 17.11.2009
Webtech 17.11.2009Webtech 17.11.2009
Webtech 17.11.2009
 
Making your site mobile-friendly - Standards-Next 12.06.2010
Making your site mobile-friendly - Standards-Next 12.06.2010Making your site mobile-friendly - Standards-Next 12.06.2010
Making your site mobile-friendly - Standards-Next 12.06.2010
 
Best Practices for Mobile Web Design
Best Practices for Mobile Web DesignBest Practices for Mobile Web Design
Best Practices for Mobile Web Design
 
The Mobile Development Landscape
The Mobile Development LandscapeThe Mobile Development Landscape
The Mobile Development Landscape
 
Html5
Html5Html5
Html5
 
Front-end. Global domination
Front-end. Global dominationFront-end. Global domination
Front-end. Global domination
 
Frontend. Global domination.
Frontend. Global domination.Frontend. Global domination.
Frontend. Global domination.
 
Transforming the web into a real application platform
Transforming the web into a real application platformTransforming the web into a real application platform
Transforming the web into a real application platform
 
Uni Tour Germany 11.2009
Uni Tour Germany 11.2009Uni Tour Germany 11.2009
Uni Tour Germany 11.2009
 
A new interface between smart device and web using html5 web socket and qr code
A new interface between smart device and web using html5 web socket and qr codeA new interface between smart device and web using html5 web socket and qr code
A new interface between smart device and web using html5 web socket and qr code
 
Always on! ... or not?
Always on! ... or not?Always on! ... or not?
Always on! ... or not?
 
Developing for Mobile Web
Developing for Mobile WebDeveloping for Mobile Web
Developing for Mobile Web
 
How to build_a_mobile_site_with_drupal
How to build_a_mobile_site_with_drupalHow to build_a_mobile_site_with_drupal
How to build_a_mobile_site_with_drupal
 
What is HTML 5?
What is HTML 5?What is HTML 5?
What is HTML 5?
 
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeThe challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and more
 
Web app and more
Web app and moreWeb app and more
Web app and more
 

More from brucelawson

Bruce Lawson: Progressive Web Apps: the future of Apps
Bruce Lawson: Progressive Web Apps: the future of AppsBruce Lawson: Progressive Web Apps: the future of Apps
Bruce Lawson: Progressive Web Apps: the future of Appsbrucelawson
 
You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011
You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011
You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011brucelawson
 
HTML5 and Accessibility sitting in a tree
HTML5 and Accessibility sitting in a treeHTML5 and Accessibility sitting in a tree
HTML5 and Accessibility sitting in a treebrucelawson
 
Leveraging HTML 5.0
Leveraging HTML 5.0Leveraging HTML 5.0
Leveraging HTML 5.0brucelawson
 
HTML5 Multimedia Accessibility
HTML5 Multimedia AccessibilityHTML5 Multimedia Accessibility
HTML5 Multimedia Accessibilitybrucelawson
 
HTML5 Multimedia: where we are, where we're going
HTML5 Multimedia: where we are, where we're goingHTML5 Multimedia: where we are, where we're going
HTML5 Multimedia: where we are, where we're goingbrucelawson
 
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScriptWeb Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScriptbrucelawson
 
W3C Widgets: Apps made with Web Standards
W3C Widgets: Apps made with Web StandardsW3C Widgets: Apps made with Web Standards
W3C Widgets: Apps made with Web Standardsbrucelawson
 
Bruce lawson-html5-aria-japan
Bruce lawson-html5-aria-japanBruce lawson-html5-aria-japan
Bruce lawson-html5-aria-japanbrucelawson
 
Html5 oslo-code-camp
Html5 oslo-code-campHtml5 oslo-code-camp
Html5 oslo-code-campbrucelawson
 
Bruce Lawson HTML5 South By SouthWest presentation
Bruce Lawson HTML5 South By SouthWest presentationBruce Lawson HTML5 South By SouthWest presentation
Bruce Lawson HTML5 South By SouthWest presentationbrucelawson
 
Practical Tips for Mobile Widget development
Practical Tips for Mobile Widget developmentPractical Tips for Mobile Widget development
Practical Tips for Mobile Widget developmentbrucelawson
 
Standards.next: HTML - Are you mything the point?
Standards.next: HTML - Are you mything the point?Standards.next: HTML - Are you mything the point?
Standards.next: HTML - Are you mything the point?brucelawson
 

More from brucelawson (14)

Bruce Lawson: Progressive Web Apps: the future of Apps
Bruce Lawson: Progressive Web Apps: the future of AppsBruce Lawson: Progressive Web Apps: the future of Apps
Bruce Lawson: Progressive Web Apps: the future of Apps
 
You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011
You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011
You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011
 
HTML5 and Accessibility sitting in a tree
HTML5 and Accessibility sitting in a treeHTML5 and Accessibility sitting in a tree
HTML5 and Accessibility sitting in a tree
 
Leveraging HTML 5.0
Leveraging HTML 5.0Leveraging HTML 5.0
Leveraging HTML 5.0
 
HTML5 Multimedia Accessibility
HTML5 Multimedia AccessibilityHTML5 Multimedia Accessibility
HTML5 Multimedia Accessibility
 
HTML5 Multimedia: where we are, where we're going
HTML5 Multimedia: where we are, where we're goingHTML5 Multimedia: where we are, where we're going
HTML5 Multimedia: where we are, where we're going
 
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScriptWeb Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
 
W3C Widgets: Apps made with Web Standards
W3C Widgets: Apps made with Web StandardsW3C Widgets: Apps made with Web Standards
W3C Widgets: Apps made with Web Standards
 
Bruce lawson-html5-aria-japan
Bruce lawson-html5-aria-japanBruce lawson-html5-aria-japan
Bruce lawson-html5-aria-japan
 
Html5 oslo-code-camp
Html5 oslo-code-campHtml5 oslo-code-camp
Html5 oslo-code-camp
 
Disruptive code
Disruptive codeDisruptive code
Disruptive code
 
Bruce Lawson HTML5 South By SouthWest presentation
Bruce Lawson HTML5 South By SouthWest presentationBruce Lawson HTML5 South By SouthWest presentation
Bruce Lawson HTML5 South By SouthWest presentation
 
Practical Tips for Mobile Widget development
Practical Tips for Mobile Widget developmentPractical Tips for Mobile Widget development
Practical Tips for Mobile Widget development
 
Standards.next: HTML - Are you mything the point?
Standards.next: HTML - Are you mything the point?Standards.next: HTML - Are you mything the point?
Standards.next: HTML - Are you mything the point?
 

Recently uploaded

Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesThousandEyes
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Mark Simos
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...Nikki Chapple
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...BookNet Canada
 
Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfLandscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfAarwolf Industries LLC
 
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...amber724300
 
Kuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorialKuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorialJoão Esperancinha
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024TopCSSGallery
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
Français Patch Tuesday - Avril
Français Patch Tuesday - AvrilFrançais Patch Tuesday - Avril
Français Patch Tuesday - AvrilIvanti
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...Karmanjay Verma
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkPixlogix Infotech
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfNeo4j
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxAna-Maria Mihalceanu
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Kaya Weers
 

Recently uploaded (20)

Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
 
Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfLandscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdf
 
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
 
Kuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorialKuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorial
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and Insights
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
Français Patch Tuesday - Avril
Français Patch Tuesday - AvrilFrançais Patch Tuesday - Avril
Français Patch Tuesday - Avril
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App Framework
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance Toolbox
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)
 

Bruce lawson-over-the-air

  • 1. Web Development 2.0 Mobile, HTML5, CSS 3, DAP; beat the buzzwords with Bruce Bruce Lawson / Over The Air / London / 10 September 2010
  • 4. Opera – one browser on many devices
  • 5. "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 "All I ask is access to the full Web, for everyone, everywhere. And some more beer." Me
  • 6.
  • 7. 1. new web standards 2. adaptive content 3. browser as platform
  • 8. 1. new web standards 2. adaptive content 3. browser as platform
  • 9. new technologies you can start using today
  • 10. CSS 3 font control, shadows, rounded corners, basic animations
  • 11. -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
  • 14. HTML5 does not replace HTML 4.01
  • 15. HTML5 has more bling!
  • 16. “...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
  • 17. HTML5 is umbrella term: markup elements and JavaScript APIs
  • 18. Webforms – more powerful form elements
  • 19. standardise commonly-used rich form elements – without JavaScript
  • 20. built-in validation (of course you should still validate on the server) Demonstration of webforms
  • 23. 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);
  • 24. canvas mix with external graphics/ video ctx = canvas.drawImage(…) Demonstration of canvas
  • 25. <svg> or <canvas>?
  • 26. Scalable Vector Graphics: ● Supported in 4 modern browsers, and IE9 ● Vector graphics, therefore infinitely scalable ● XML so text-based - can be made accessible ● Keeps a DOM ● Can author with Adobe Illustrator or Inkscape
  • 28. <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>
  • 29. <video src="video.ogv" controls autoplay poster="poster.jpg" width="320" height="240"> <a href="video.ogv">Download movie</a> </video>
  • 30. video format debates – Free formats vs MP4 <video controls autoplay poster=… width=… height=…> <source src=movie.mp4 type=video/mp4> <source src=movie.webm type=video/webm> <!-- fallback content --> </video> still include fallback for old browsers http://camendesign.com/code/video_for_everybody
  • 31. 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 Opera, scripted controls
  • 33. find out your location via JavaScript navigator.geolocation.getCurrentPosition(success, error); function success(position) { /* where's Waldo? */ var lat = position.coords.latitude; var long = position.coords.longitude; ... }
  • 35. detect if a browsers goes offline window.addEventListener('online', function(){ … }, true); window.addEventListener('offline', function(){ … }, true);
  • 37. localStorage/sessionStorage like cookies... document.cookie = 'key=value; expires=Thu, 15 Feb 2010 23:59:59 UTC; path=/' … /* convoluted string operations go here … */
  • 38. localStorage/sessionStorage like cookies...on steroids! localStorage.setItem(key, value); localStorage.getItem(key); localStorage.clear(); localStorage.key = value; if (localStorage.key == '…') { … } …
  • 40. cache UI/resource files for offline use <html manifest=”blah.manifest”> CACHE MANIFEST # send this with correct text/cache-manifest MIME images/sprites.png scripts/common.js scripts/jquery.js styles/global.css
  • 41. 1. new web standards 2. adaptive content 3. browser as platform
  • 42. Mobile web and why it matters opera.com/smw
  • 43. Opera Mini: 29.6 billion pages were served and 4.1 petabytes of operator data were compressed for Opera Mini users. Unique users increased 114%. July 2009 – July 2010 http://www.opera.com/smw/2010/07/
  • 44. “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
  • 46. not WAP or text anymore...
  • 48. 2. separate mobile site (m.flickr.com, mobile.mysite.com, ...)
  • 49. beware browser sniffing photo: http://www.flickr.com/photos/timdorr/2096272747/
  • 50. refactored for small screen, not dumbed down for mobile
  • 52.
  • 53.
  • 55. nothing new... fluid layout, progressive enhancement, graceful degradation
  • 56. Tips for optimising for mobile/ devices: ● Use CSS3 Media Queries ● Define size of images in HTML ● Put JavaScript as far down as you can ● Reduce HTTP requests
  • 57. CSS 3 Media Queries: @media screen and (max-device-width: 480px) { // insert CSS rules here } http://www.w3.org/TR/css3-mediaqueries/ Demonstration of Media Queries
  • 58. Images: ● Images take a long time to load, so tell the browser to leave a space for them ● If you don't, when the image finally loads, the browser will redraw the page to fit the image in, perhaps scrolling off screen ● Redrawing the screen wastes processor time (and battery life) ● Some turn off images; design for accessibility
  • 59. Put JS as far down the source as possible: ● Browsers wait for JS to load. If they're at the top, rendering pauses. ● If your JS is at the bottom of the page, the user can read the content etc while she is waiting to interact with the page.
  • 60. Minimise HTTP requests: ● Combine JS into one file. Same with CSS. ● Use CSS sprites to combine decorative images ● Consider encoding images directly in your page as data URLs ● Use SVG or <canvas> for images
  • 61. 1. new web standards 2. adaptive content 3. browser as platform
  • 62.
  • 63. “…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
  • 64. W3C Widgets – application development filled with web standards goodness, using browser engine as platform
  • 65. Anatomy of a widget index.html, assets + config.xml, zipped and renamed .wgt
  • 67. W3C DAP (Devices and Protocols Working Group)
  • 68. Defining JavaScript APIs: ● Contacts (access address book) ● Calendar API ● Media Capture API (programmatic access to camera/microphone) ● Messaging API (email/ SMS) http://www.w3.org/2009/dap/
  • 69.
  • 70.
  • 71.
  • 72. 1. new web standards 2. adaptive content 3. browser as platform
  • 73.
  • 74. www.opera.com/developer bruce.lawson@opera.com twitter.com@brucel