1. The future of web technologies
WEB STANDARDS, CROSS-DEVICE DEVELOPMENT AND THE WEB AS UBIQUITOUS PLATFORM
Patrick H. Lauke / Webtech / Karlsruhe / 17 November 2009
11. “...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
23. 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
24. 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
25. video and canvas on any device
without plugins
(Java / Flash / Silverlight not ubiquitous)
29. Opera Mini: +150% users, +224% traffic
15 Billion pages served / month
September 2008 - 2009
30. “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
31. Device capabilities also vary:
● screen size and resolution
● input mechanism – touch, keypad, other?
● memory and processing power
● colour palettes
● connection speed / quality
32. “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
33. 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
34. 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)
35. Client-side detection of devices:
● “browser sniffing” the User Agent string again
● “capability sniffing” reliant on JavaScript
● CSS 2.1 Media Types
● CSS 3 Media Queries
36. 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 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/
39. CSS 3 Media Queries:
@media screen and
(max-device-width: 480px) {
// insert CSS rules here
}
Demonstration of Media Queries
40. SVG in OBJECT, CSS and IMG element*
native inclusion in HTML5?
*only in Opera at the moment
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
45. Widgets are nothing new
Yahoo! Widgets (aka Konfabulator), OS X Dashboard, Windows Sidebar,
Adobe Air, iPhone Apps, Android Apps, …
46. “…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
47. W3C Widgets – application development filled
with web standards goodness,
using browser engine as platform
55. Media Player Messenger
Access your complete home Communicate with your friends
music library from wherever you in My Opera in a one-to-one,
are. live session.
File Sharing The Lounge
Share files directly from your Invite your friends to a chat in
computer easily and safely. The Lounge hosted on your
computer.
File Inbox Web Server
Allow files to be uploaded to
Host your Web sites running from
your computer, by you or
your own computer.
your friends, from
anywhere.
Photo Sharing Fridge
Share your personal photos with Enjoy fun notes left on your
friends around the world without the computer by friends.
need to upload them.