Your SlideShare is downloading. ×
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Transmission2 25.11.2009
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Transmission2 25.11.2009

600

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
600
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. The future of web technologies WEB STANDARDS, CROSS-DEVICE DEVELOPMENT AND THE WEB AS UBIQUITOUS PLATFORM Patrick H. Lauke / Transmission2 #tx2 / Manchester / 25 November 2009
  • 2. Web Evangelist at Opera
  • 3. 1. new web standards 2. adaptive content 3. browser as platform
  • 4. 1. new web standards 2. adaptive content 3. browser as platform
  • 5. new technologies you can start using today
  • 6. HTML5 <!DOCTYPE html>
  • 7. HTML5 does not replace HTML 4.01
  • 8. HTML5 has more bling!
  • 9. “...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
  • 10. HTML5 is umbrella term: markup elements and JavaScript APIs
  • 11. new elements for more accurate semantics
  • 12. HTML5 elements for a typical blog
  • 13. HTML5 – unambiguous and machine readable
  • 14. current and old browsers “support” these new elements (although some need a little extra help)
  • 15. webforms – more powerful form elements
  • 16. standardise commonly-used rich form elements – without JavaScript
  • 17. built-in validation (of course you should still validate on the server) Demonstration of webforms
  • 18. <canvas>
  • 19. canvas = “scriptable images”
  • 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. canvas mixing things up with external graphics ctx = canvas.drawImage(…) Demonstration of canvas
  • 22. <video>
  • 23. <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>
  • 24. <video src="video.ogv" controls autoplay poster="poster.jpg" width="320" height="240"> <a href="video.ogv">Download movie</a> </video>
  • 25. 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 Presto 2.4
  • 26. video format debates – MP4 vs OGG Theora <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
  • 27. video and canvas on any device without plugins (Java / Flash / Silverlight not ubiquitous)
  • 28. IANAL, but … EOLAS?
  • 29. and many more... (geolocation, drag and drop, web workers, offline support, storage)
  • 30. 1. new web standards 2. adaptive content 3. browser as platform
  • 31. Mobile web and why it matters www.opera.com/smw
  • 32. Opera Mini: +150% users, +224% traffic 15 Billion pages served / month September 2008 - 2009
  • 33. "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 & CEO
  • 34. “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
  • 35. Device capabilities also vary: ● screen size and resolution ● input mechanism – touch, keypad, other? ● memory and processing power ● colour palettes ● connection speed / quality
  • 36. 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
  • 37. CSS 2.1 Media Types: ● print, screen, handheld, projection, tv, … ● partially supported ● lump all devices into single categories http://www.w3.org/TR/CSS21/media.html
  • 38. CSS 2.1 Media Types: <link rel="stylesheet" ... media="print" href="..."> @import url("...") print; @media print { // insert CSS rules here }
  • 39. CSS 3 Media Queries: ● build and extend CSS 2.1 Media Types ● more granular control of capabilities ● width, height, orientation, color, resolution, … http://www.w3.org/TR/css3-mediaqueries/
  • 40. CSS 3 Media Queries: @media screen and (max-device-width: 480px) { // insert CSS rules here } Demonstration of Media Queries
  • 41. CSS 3 Media Queries and SVG: ● SVG already resolution independent ● ideal for device interfaces, maps, graphs, … ● combination with CSS 3 Media Queries Demonstration of Media Queries + SVG
  • 42. 1. new web standards 2. adaptive content 3. browser as platform
  • 43. Full Web is not always practical or desirable
  • 44. Widgets are nothing new Yahoo! Widgets (aka Konfabulator), OS X Dashboard, Windows Sidebar, Adobe Air, iPhone Apps, Android Apps, …
  • 45. “…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
  • 46. W3C Widgets – application development filled with web standards goodness, using browser engine as platform
  • 47. Widgets on desktop, mobile, TV … fridge?
  • 48. Opera had widget capability for a long time … latest 10.20 alpha widgets as standalone apps dev.opera.com/articles/view/widgets-as-standalone-applications
  • 49. Standardised JavaScript APIs to access device-specific capabilities (JIL / BONDI)
  • 50. 1. new web standards 2. adaptive content 3. browser as platform
  • 51. www.opera.com/developer people.opera.com/patrickl/presentations/Transmission2_25.11.2009/Transmission2_25.11.2009.pdf patrick.lauke@opera.com

×