Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland

Web Development 2.0
WEB STANDARDS, CROSS-DEVICE DEVELOPMENT AND THE WEB AS UBIQUITOUS PLATFORM

Bruce Lawson / SparkUp! Poland / 24 May 2010

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, everywhere. And some more beer."
Me

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 does not replace HTML 4.01

“...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 = “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

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 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.ogv" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />

</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 mark-up “fallback” video in Opera 10.53,
scripted controls

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;
...
}

detect if a browsers goes offline
window.addEventListener('online', function(){ … }, true);
window.addEventListener('offline', function(){ … }, true);

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 == '…') { … }
…

Web Database – full relational DB / SQL
var db =
openDatabase(dbName, version, displayName, expectedSize);

db.transaction(function(tx) {
tx.executeSql(sqlStatement, [], function (tx, result) {
/* do something with the results */
});
});

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

Mobile web and why it matters
www.opera.com/smw

Opera Mini: +140% users, +200% page views
25.8 billion pages / month
3.6 petabytes of data were compressed
March 2009 – 2010

www.opera.com/smw/2010/03

Top 10 sites in Poland
● google.com
● nasza-klasa.pl

● onet.pl

● wikipedia.org

● allegro.pl

●
youtube.com
●
wp.pl
●
sciaga.pl
●
fotka.pl
●
my.opera.com

Top 10 handsets in Poland
● Sony Ericsson K800i
●
Nokia 6300
●
Nokia 5130 XpressMusic
●
Sony Ericsson K550i
●
Sony Ericsson W890i
●
Nokia 5310 XpressMusic
●
Nokia E51
●
Nokia 6500s
● LG KU990i

● Sony Ericsson W910i

“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)

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

“…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 .wgt

www.opera.com/developer
bruce.lawson@opera.com
twitter.com@brucel

Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland

Similar to Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland (20)

More from brucelawson

More from brucelawson (9)

Recently uploaded

Recently uploaded (20)

Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland