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
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
27. 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
28. 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
29. video and canvas on any device
without plugins
(Java / Flash / Silverlight not ubiquitous)
34. Opera Mini: +150% users, +224% traffic
15 Billion pages served / month
September 2008 - 2009
35. "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
36. “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
37. Device capabilities also vary:
● screen size and resolution
● input mechanism – touch, keypad, other?
● memory and processing power
● colour palettes
● connection speed / quality
38. 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
39. 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
41. 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/
42. CSS 3 Media Queries:
@media screen and
(max-device-width: 480px) {
// insert CSS rules here
}
Demonstration of Media Queries
43. 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
44. 1. new web standards
2. adaptive content
3. browser as platform
47. Widgets are nothing new
Yahoo! Widgets (aka Konfabulator), OS X Dashboard, Windows Sidebar,
Adobe Air, iPhone Apps, Android Apps, …
48. “…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
49. W3C Widgets – application development filled
with web standards goodness,
using browser engine as platform
51. 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
