![Page 1: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/1.jpg)
Web Development 2.0
Bruce Lawson / SparkUp! Poland / 24 May 2010
WEB STANDARDS, CROSS-DEVICE DEVELOPMENT AND THE WEB AS UBIQUITOUS PLATFORM
![Page 2: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/2.jpg)
Web Evangelist at Opera
![Page 3: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/3.jpg)
Opera – one browser on many devices
![Page 4: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/4.jpg)
"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
![Page 5: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/5.jpg)
![Page 6: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/6.jpg)
1. new web standards2. adaptive content3. browser as platform
![Page 7: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/7.jpg)
1. new web standards2. adaptive content3. browser as platform
![Page 8: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/8.jpg)
new technologies you can start using today
![Page 9: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/9.jpg)
CSS 3font control, shadows, rounded corners,
basic animations
![Page 10: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/10.jpg)
-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;
![Page 11: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/11.jpg)
HTML5<!DOCTYPE html>
![Page 12: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/12.jpg)
HTML5 does not replace HTML 4.01
![Page 13: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/13.jpg)
HTML5 has more bling!
![Page 14: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/14.jpg)
“...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 HTML5http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html
![Page 15: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/15.jpg)
HTML5 is umbrella term:markup elements and JavaScript APIs
![Page 16: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/16.jpg)
Webforms – more powerful form elements
![Page 17: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/17.jpg)
standardise commonly-usedrich form elements – without JavaScript
![Page 18: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/18.jpg)
built-in validation(of course you should still validate on the server)
Demonstration of webforms
![Page 19: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/19.jpg)
<canvas>
![Page 20: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/20.jpg)
canvas = “scriptable images”
![Page 21: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/21.jpg)
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);
![Page 22: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/22.jpg)
canvas mix with external graphics/ video
ctx = canvas.drawImage(…)
Demonstration of canvas
![Page 23: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/23.jpg)
<svg> or
<canvas>?
![Page 24: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/24.jpg)
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
![Page 25: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/25.jpg)
<video>
![Page 26: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/26.jpg)
<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&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>
![Page 27: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/27.jpg)
<video src="video.ogv" controls autoplay poster="poster.jpg" width="320" height="240"> <a href="video.ogv">Download movie</a></video>
![Page 28: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/28.jpg)
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" /><!-- fallback content -->
</video>
still include fallback for old browsershttp://camendesign.com/code/video_for_everybody
![Page 29: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/29.jpg)
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
![Page 30: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/30.jpg)
geolocation
![Page 31: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/31.jpg)
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;...
}
![Page 32: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/32.jpg)
offline support
![Page 33: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/33.jpg)
detect if a browsers goes offline
window.addEventListener('online', function(){ … }, true);window.addEventListener('offline', function(){ … }, true);
![Page 34: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/34.jpg)
storage
![Page 35: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/35.jpg)
localStorage/sessionStoragelike cookies...
document.cookie = 'key=value; expires=Thu, 15 Feb 2010 23:59:59 UTC; path=/'…/* convoluted string operations go here … */
![Page 36: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/36.jpg)
localStorage/sessionStoragelike cookies...on steroids!
localStorage.setItem(key, value);localStorage.getItem(key);localStorage.clear();localStorage.key = value;if (localStorage.key == '…') { … }…
![Page 37: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/37.jpg)
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 */
});});
![Page 38: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/38.jpg)
application cache
![Page 39: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/39.jpg)
cache UI/resource files for offline use
<html manifest=”blah.manifest”>CACHE MANIFEST# send this with correct text/cache-manifest MIMEimages/sprites.pngscripts/common.jsscripts/jquery.jsstyles/global.css
![Page 40: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/40.jpg)
1. new web standards2. adaptive content3. browser as platform
![Page 42: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/42.jpg)
Opera Mini: +140% users, +200% page views25.8 billion pages / month
3.6 petabytes of data were compressedMarch 2009 – 2010
www.opera.com/smw/2010/03
![Page 43: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/43.jpg)
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
![Page 44: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/44.jpg)
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
![Page 45: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/45.jpg)
“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
![Page 46: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/46.jpg)
Device capabilities also vary:
● screen size and resolution● input mechanism – touch, keypad, other?● memory and processing power● colour palettes● connection speed / quality
![Page 47: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/47.jpg)
“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
![Page 48: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/48.jpg)
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
![Page 49: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/49.jpg)
Server-side detection of devices:
● “browser sniffing” the User Agent stringOpera/9.80 (J2ME/MIDP; Opera Mini/5.0.2056/866; U; en) Presto/2.2
● offer users a way back (example of Orkut)
![Page 50: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/50.jpg)
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
![Page 51: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/51.jpg)
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
![Page 52: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/52.jpg)
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
![Page 53: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/53.jpg)
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
![Page 54: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/54.jpg)
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.
![Page 55: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/55.jpg)
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
![Page 56: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/56.jpg)
1. new web standards2. adaptive content3. browser as platform
![Page 57: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/57.jpg)
![Page 58: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/58.jpg)
“…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
![Page 59: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/59.jpg)
W3C Widgets – application development filled with web standards goodness,
using browser engine as platform
![Page 60: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/60.jpg)
Anatomy of a widget
index.html, assets + config.xml, zipped .wgt
![Page 61: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/61.jpg)
1. new web standards2. adaptive content3. browser as platform
![Page 62: Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland](https://reader034.vdocuments.mx/reader034/viewer/2022051513/545904feaf79594f558b5461/html5/thumbnails/62.jpg)