Webtech 17.11.2009
-
Upload
patrick-lauke -
Category
Technology
-
view
1.074 -
download
0
description
Transcript of Webtech 17.11.2009
![Page 1: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/1.jpg)
The future of web technologies
Patrick H. Lauke / Webtech / Karlsruhe / 17 November 2009
WEB STANDARDS, CROSS-DEVICE DEVELOPMENT AND THE WEB AS UBIQUITOUS PLATFORM
![Page 2: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/2.jpg)
Web Evangelist at Opera
![Page 3: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/3.jpg)
Opera – one browser on many devices
![Page 4: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/4.jpg)
"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
![Page 5: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/5.jpg)
1. new web standards2. adaptive content3. browser as platform
![Page 6: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/6.jpg)
1. new web standards2. adaptive content3. browser as platform
![Page 7: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/7.jpg)
new technologies you can start using today
![Page 8: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/8.jpg)
HTML5<!DOCTYPE html>
![Page 9: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/9.jpg)
HTML5 does not replace HTML 4.01
![Page 10: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/10.jpg)
HTML5 has more bling!
![Page 11: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/11.jpg)
“...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 HTML5http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html
![Page 12: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/12.jpg)
HTML5 is umbrella term:markup elements and JavaScript APIs
![Page 13: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/13.jpg)
Webforms – more powerful form elements
![Page 14: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/14.jpg)
standardise commonly-usedrich form elements – without JavaScript
![Page 15: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/15.jpg)
built-in validation(of course you should still validate on the server)
Demonstration of webforms
![Page 16: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/16.jpg)
<canvas>
![Page 17: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/17.jpg)
canvas = “scriptable images”
![Page 18: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/18.jpg)
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);
![Page 19: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/19.jpg)
canvas mixing things up with external graphics
ctx = canvas.drawImage(…)
Demonstration of canvas
![Page 20: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/20.jpg)
<video>
![Page 21: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/21.jpg)
<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&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>
![Page 22: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/22.jpg)
<video src="video.ogv" controls autoplay poster="poster.jpg" width="320" height="240"> <a href="video.ogv">Download movie</a></video>
![Page 23: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/23.jpg)
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
![Page 24: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/24.jpg)
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 browsershttp://camendesign.com/code/video_for_everybody
![Page 25: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/25.jpg)
video and canvas on any devicewithout plugins
(Java / Flash / Silverlight not ubiquitous)
![Page 26: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/26.jpg)
IANAL, but … EOLAS?
![Page 27: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/27.jpg)
1. new web standards2. adaptive content3. browser as platform
![Page 29: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/29.jpg)
Opera Mini: +150% users, +224% traffic15 Billion pages served / month
September 2008 - 2009
![Page 30: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/30.jpg)
“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
![Page 31: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/31.jpg)
Device capabilities also vary:
● screen size and resolution● input mechanism – touch, keypad, other?● memory and processing power● colour palettes● connection speed / quality
![Page 32: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/32.jpg)
“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
![Page 33: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/33.jpg)
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
![Page 34: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/34.jpg)
Server-side detection of devices:
● “browser sniffing” the User Agent stringOpera/9.80 (J2ME/MIDP; Opera Mini/5.0.2056/866; U; en) Presto/2.2
● offer users a way back (example of Orkut)
![Page 35: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/35.jpg)
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
![Page 36: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/36.jpg)
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
![Page 37: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/37.jpg)
CSS 2.1 Media Types:
<link rel="stylesheet" ... media="print" href="...">@import url("...") print;@media print { // insert CSS rules here}
![Page 38: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/38.jpg)
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/
![Page 39: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/39.jpg)
CSS 3 Media Queries:
@media screen and (max-device-width: 480px) { // insert CSS rules here
}Demonstration of Media Queries
![Page 40: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/40.jpg)
SVG in OBJECT, CSS and IMG element*native inclusion in HTML5?
*only in Opera at the moment
![Page 41: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/41.jpg)
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
![Page 42: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/42.jpg)
1. new web standards2. adaptive content3. browser as platform
![Page 43: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/43.jpg)
Full Web is not always practical or desirable
![Page 44: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/44.jpg)
![Page 45: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/45.jpg)
Widgets are nothing newYahoo! Widgets (aka Konfabulator), OS X Dashboard, Windows Sidebar,
Adobe Air, iPhone Apps, Android Apps, …
![Page 46: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/46.jpg)
“…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
![Page 47: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/47.jpg)
W3C Widgets – application development filled with web standards goodness,
using browser engine as platform
![Page 48: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/48.jpg)
Widgets on desktop, mobile, TV … fridge?
![Page 49: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/49.jpg)
Opera had widget capability for a long time … latest Labs release widgets as standalone apps
http://labs.opera.com/news/2009/10/15/
![Page 50: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/50.jpg)
Anatomy of a widget
index.html + config.xml
![Page 51: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/51.jpg)
Configuration file
<widget> <widgetname>MyFirstWidget</widgetname> <description>A demo widget</description> <icon>images/widget.png</icon> <width>320</width> <height>240</height></widget>Demonstration of basic widget
![Page 52: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/52.jpg)
Standardised JavaScript APIsto access device-specific capabilities
(JIL / BONDI)
![Page 53: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/53.jpg)
![Page 54: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/54.jpg)
Opera Unite applications relatedto widget … but turbo-charged!
![Page 55: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/55.jpg)
Media PlayerAccess your complete home music library from wherever you are.
File InboxAllow files to be uploaded to your computer, by you or your friends, from anywhere.
Photo SharingShare your personal photos with friends around the world without the need to upload them.
Web Server
Host your Web sites running from your own computer.
MessengerCommunicate with your friends in My Opera in a one-to-one, live session.
Fridge
Enjoy fun notes left on your computer by friends.
File SharingShare files directly from your computer easily and safely.
Invite your friends to a chat in The Lounge hosted on your computer.
The Lounge
![Page 57: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/57.jpg)
Traditional data sharing
![Page 58: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/58.jpg)
Opera Unite data sharing
![Page 59: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/59.jpg)
Opera Unite applications use web standards+ specific JavaScript APIs
![Page 60: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/60.jpg)
Opera Unite applications = “P2P widgets”using Opera browser as app environment
(but any other browser can connect)
![Page 61: Webtech 17.11.2009](https://reader033.fdocuments.in/reader033/viewer/2022051513/5459050fb1af9f33608b532a/html5/thumbnails/61.jpg)
1. new web standards2. adaptive content3. browser as platform