Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland

2,570 views

Published on

Forget the empty "Web 2.0" buzzword! Web development, however, is changing. In this session, Bruce gives and overview of HTML5, its intelligent forms, scriptable images and native video. Together with CSS3 and SVG, it will change the way you work making it easier to develop exciting applications. The emergence of more and more Web-enabled devices presents headaches: do you write and test many sites for different devices, or make one site for all? Some simple techniques help you write one site to work everywhere, saving you time and grey hairs. Web development 2.0: Web workers of the world, relax!

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,570
On SlideShare
0
From Embeds
0
Number of Embeds
40
Actions
Shares
0
Downloads
9
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland

  1. 1. Web Development 2.0 WEB STANDARDS, CROSS-DEVICE DEVELOPMENT AND THE WEB AS UBIQUITOUS PLATFORM Bruce Lawson / SparkUp! Poland / 24 May 2010
  2. 2. Web Evangelist at Opera
  3. 3. Opera – one browser on many devices
  4. 4. "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
  5. 5. 1. new web standards 2. adaptive content 3. browser as platform
  6. 6. 1. new web standards 2. adaptive content 3. browser as platform
  7. 7. new technologies you can start using today
  8. 8. CSS 3 font control, shadows, rounded corners, basic animations
  9. 9. -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;
  10. 10. HTML5 <!DOCTYPE html>
  11. 11. HTML5 does not replace HTML 4.01
  12. 12. HTML5 has more bling!
  13. 13. “...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
  14. 14. HTML5 is umbrella term: markup elements and JavaScript APIs
  15. 15. Webforms – more powerful form elements
  16. 16. standardise commonly-used rich form elements – without JavaScript
  17. 17. built-in validation (of course you should still validate on the server) Demonstration of webforms
  18. 18. <canvas>
  19. 19. canvas = “scriptable images”
  20. 20. 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);
  21. 21. canvas mix with external graphics/ video ctx = canvas.drawImage(…) Demonstration of canvas
  22. 22. <svg> or <canvas>?
  23. 23. 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
  24. 24. <video>
  25. 25. <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>
  26. 26. <video src="video.ogv" controls autoplay poster="poster.jpg" width="320" height="240"> <a href="video.ogv">Download movie</a> </video>
  27. 27. 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 browsers http://camendesign.com/code/video_for_everybody
  28. 28. 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
  29. 29. geolocation
  30. 30. 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; ... }
  31. 31. offline support
  32. 32. detect if a browsers goes offline window.addEventListener('online', function(){ … }, true); window.addEventListener('offline', function(){ … }, true);
  33. 33. storage
  34. 34. localStorage/sessionStorage like cookies... document.cookie = 'key=value; expires=Thu, 15 Feb 2010 23:59:59 UTC; path=/' … /* convoluted string operations go here … */
  35. 35. localStorage/sessionStorage like cookies...on steroids! localStorage.setItem(key, value); localStorage.getItem(key); localStorage.clear(); localStorage.key = value; if (localStorage.key == '…') { … } …
  36. 36. 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 */ }); });
  37. 37. application cache
  38. 38. 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
  39. 39. 1. new web standards 2. adaptive content 3. browser as platform
  40. 40. Mobile web and why it matters www.opera.com/smw
  41. 41. 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
  42. 42. 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
  43. 43. 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
  44. 44. “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
  45. 45. Device capabilities also vary: ● screen size and resolution ● input mechanism – touch, keypad, other? ● memory and processing power ● colour palettes ● connection speed / quality
  46. 46. “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
  47. 47. 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
  48. 48. 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)
  49. 49. 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
  50. 50. 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
  51. 51. 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
  52. 52. 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
  53. 53. 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.
  54. 54. 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
  55. 55. 1. new web standards 2. adaptive content 3. browser as platform
  56. 56. “…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
  57. 57. W3C Widgets – application development filled with web standards goodness, using browser engine as platform
  58. 58. Anatomy of a widget index.html, assets + config.xml, zipped .wgt
  59. 59. 1. new web standards 2. adaptive content 3. browser as platform
  60. 60. www.opera.com/developer bruce.lawson@opera.com twitter.com@brucel

×