Bruce lawson-over-the-air

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

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>  </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

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

“…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/

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

Bruce lawson-over-the-air

Esté a ler uma amostra.

Confira estes a seguir

Bruce lawson-over-the-air

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Quem viu também gostou (20)

Semelhante a Bruce lawson-over-the-air (20)

Mais de brucelawson (14)

Mais recentes (20)