bruce lawson-over-the-air
DESCRIPTION
A general overview of HTML5, CSS 3, CSS Meedia Queries, mobile, DAP. You might find the organically-grown hand-selected list-of-links-o-rama™ at http://my.opera.com/ODIN/blog/over-the-air-2010-bruce-lawsons-web-developments-2-0-talk to be useful.TRANSCRIPT
![Page 1: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/1.jpg)
Web Development 2.0
Bruce Lawson / Over The Air / London / 10 September 2010
Mobile, HTML5, CSS 3, DAP; beat the buzzwords with Bruce
![Page 2: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/2.jpg)
NEWT – MWA !
![Page 3: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/3.jpg)
Web Evangelist at Opera
![Page 4: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/4.jpg)
Opera – one browser on many devices
![Page 5: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/5.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, for everyone, everywhere. And some more beer."
Me
![Page 6: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/6.jpg)
![Page 7: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/7.jpg)
1. new web standards2. adaptive content3. browser as platform
![Page 8: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/8.jpg)
1. new web standards2. adaptive content3. browser as platform
![Page 9: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/9.jpg)
new technologies you can start using today
![Page 10: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/10.jpg)
CSS 3font control, shadows, rounded corners,
basic animations
![Page 11: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/11.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 12: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/12.jpg)
HTML5<!DOCTYPE html>
![Page 13: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/13.jpg)
Pic by @slexaxton
![Page 14: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/14.jpg)
HTML5 does not replace HTML 4.01
![Page 15: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/15.jpg)
HTML5 has more bling!
![Page 16: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/16.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 17: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/17.jpg)
HTML5 is umbrella term:markup elements and JavaScript APIs
![Page 18: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/18.jpg)
Webforms – more powerful form elements
![Page 19: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/19.jpg)
standardise commonly-usedrich form elements – without JavaScript
![Page 20: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/20.jpg)
built-in validation(of course you should still validate on the server)
Demonstration of webforms
![Page 21: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/21.jpg)
<canvas>
![Page 22: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/22.jpg)
canvas = “scriptable images”
![Page 23: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/23.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 24: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/24.jpg)
canvas mix with external graphics/ video
ctx = canvas.drawImage(…)
Demonstration of canvas
![Page 25: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/25.jpg)
<svg> or
<canvas>?
![Page 26: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/26.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 27: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/27.jpg)
<video>
![Page 28: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/28.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 29: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/29.jpg)
<video src="video.ogv" controls autoplay poster="poster.jpg" width="320" height="240"> <a href="video.ogv">Download movie</a></video>
![Page 30: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/30.jpg)
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 browsershttp://camendesign.com/code/video_for_everybody
![Page 31: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/31.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 video in Opera, scripted controls
![Page 32: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/32.jpg)
geolocation
![Page 33: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/33.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 34: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/34.jpg)
offline support
![Page 35: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/35.jpg)
detect if a browsers goes offline
window.addEventListener('online', function(){ … }, true);window.addEventListener('offline', function(){ … }, true);
![Page 36: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/36.jpg)
storage
![Page 37: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/37.jpg)
localStorage/sessionStoragelike cookies...
document.cookie = 'key=value; expires=Thu, 15 Feb 2010 23:59:59 UTC; path=/'…/* convoluted string operations go here … */
![Page 38: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/38.jpg)
localStorage/sessionStoragelike cookies...on steroids!
localStorage.setItem(key, value);localStorage.getItem(key);localStorage.clear();localStorage.key = value;if (localStorage.key == '…') { … }…
![Page 39: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/39.jpg)
application cache
![Page 40: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/40.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 41: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/41.jpg)
1. new web standards2. adaptive content3. browser as platform
![Page 42: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/42.jpg)
Mobile web and why it mattersopera.com/smw
![Page 43: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/43.jpg)
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/
![Page 44: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/44.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 45: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/45.jpg)
1. do nothing
![Page 46: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/46.jpg)
not WAP or text anymore...
![Page 47: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/47.jpg)
mobile browserswill work ok-ish
![Page 48: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/48.jpg)
2. separate mobile site(m.flickr.com, mobile.mysite.com, ...)
![Page 49: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/49.jpg)
beware browser sniffingphoto: http://www.flickr.com/photos/timdorr/2096272747/
![Page 50: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/50.jpg)
refactored for small screen,not dumbed down for mobile
![Page 51: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/51.jpg)
offer users choice:desktop or mobile?
![Page 52: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/52.jpg)
![Page 53: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/53.jpg)
![Page 54: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/54.jpg)
3. single adaptive site
![Page 55: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/55.jpg)
nothing new...fluid layout, progressive enhancement, graceful degradation
![Page 56: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/56.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 57: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/57.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 58: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/58.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 59: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/59.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 60: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/60.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 61: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/61.jpg)
1. new web standards2. adaptive content3. browser as platform
![Page 62: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/62.jpg)
![Page 63: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/63.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 64: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/64.jpg)
W3C Widgets – application development filled with web standards goodness,
using browser engine as platform
![Page 65: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/65.jpg)
Anatomy of a widget
index.html, assets + config.xml, zipped and renamed .wgt
![Page 66: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/66.jpg)
What's next?
![Page 67: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/67.jpg)
W3C DAP(Devices and Protocols Working Group)
![Page 68: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/68.jpg)
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/
![Page 69: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/69.jpg)
![Page 70: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/70.jpg)
![Page 71: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/71.jpg)
![Page 72: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/72.jpg)
1. new web standards2. adaptive content3. browser as platform
![Page 73: Bruce lawson-over-the-air](https://reader034.vdocuments.net/reader034/viewer/2022051323/5495bec2b479595b4d8b4e16/html5/thumbnails/73.jpg)