Taiwan Web Standards Talk 2011

HTML5 / CSS3

Friday, March 18, 2011

http://mediaarchive.cern.ch/MediaArchive/Photo/Public/1998/9806033/9806033/9806033-A4-at-144-dpi.jpg

This machine is a
server, DO NOT
POWER DOWN!

http://obamapacman.com/wp-content/uploads/2009/08/First-World-Wide-Web-Server-at-CERN-made-possible-by-Tim-Berners-Lee-hosted-on-Steve-Jobs-NeXT-workstation-
computer-300x225.jpg

GO!

Why do open
standards matter?


GO!

13717712538

http://gpssystems.net/wp-content/uploads/2009/11/sao-paulo-trafﬁc-jam.jpg


HTML


HTML5 HTML4


device element

3D parser

HTML5
widgets Canvas

Text
Video

geolocation

HTML5
and friends
http://www.ﬂickr.com/photos/fuyoh/809640616/sizes/o/


Video

source: http://zibin.tehais.com/?p=1641


CANVAS

http://www.canvasdemos.com

<canvas id="myCanvas" width="300" height="150">
Fallback content, in case the browser does not support Canvas.
</canvas>

// Get a reference to the element.
var elem = document.getElementById('myCanvas');

// Always check for properties and methods, to make sure your code doesn't break
// in other browsers.
if (elem && elem.getContext) {
// Get the 2d context.
// Remember: you can only initialize one context per element.
var context = elem.getContext('2d');
if (context) {
// You are done! Now you can draw your ﬁrst rectangle.
// You only need to provide the (x,y) coordinates, followed by the width and
// height dimensions.
context.ﬁllRect(0, 0, 150, 100);
}
}


ﬂash


http://www.dailyhtcblog.com/2010/11/augmented-reality-apps-for-android/

IP

Wi-Fi

Cell-ID

GPS


if navigator.geolocation
{
navigator.geolocation.getCurrentPosition successFunction
, errorFunction ;
}
else
{
alert “no support” ;
}

function successFunction position
{
var lat = position.coords.latitude;
var long = position.coords.longitude;
alert 'Your latitude is :'+lat+' and longitude is '+long ;
}


3D

<trend 1>

WebGL Text

http://img9.zol.com.cn/desk_pic/big_432/431808.jpg

Text

http://devﬁles.myopera.com/articles/572/idlist-url.htm


HTML4 / XHTML HTML5


Device

<trend 1>

http://www.ﬂickr.com/photos/anniehp/4312513225/

<!DOCTYPE html>
<h1>Simple web camera display demo</h1>
<device type="media"/>
<video autoplay></video>
<script type="text/javascript">
<trend 1>
var device = document.getElementsByTagName('device')[0],
video = document.getElementsByTagName('video')[0];
device.addEventListener('change', function() {
video.src = device.data;
}, true);
</script>


Widgets

< />


HTML5
Semantics
CSS3
Design


< />

CSS3


Borders Background


border-radius

border-radius: 25px;


border-radius

border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;


border-radius

source: http://zibin.tehais.com/?p=1410


multiple background images


multiple background images

background:
url(rose.png) no-repeat 150px -20px,
url(driedrose.png) no-repeat,! ! ! ! ! !
url(fieldsky.jpg) no-repeat;


box-shadow

box-shadow: 10px 10px 0px #fff;


box-shadow

box-shadow: 10px 10px 20px #fff;


Transitions Transform


Transitions


div {
-o-transition-property: background-color,
width, height;
-o-transition-duration: 4s, 8s, 5s;
-o-transition-delay: 0s, 0s 2s;
}


@font-face {
src: url(DeutscheZierschrift.ttf) format("truetype");
font-family: "Zierschrift";
font-style: normal;
}


SVG

@font-face {
! font-family: Blackout-Midnight;
! src: url(Blackout-Midnight.ttf) format("truetype");
! }


text-shadow


text-shadow

text-shadow: #000000 10px 10px 19px;


text-shadow

text-shadow:
0 0 4px white, 0 -5px 4px #ff3,
2px -10px 6px #fd3, -2px -15px 11px #f80,
2px -25px 18px #f20;


opacity

opacity: 1.0; opacity: 0.5; opacity: 0.2;


rgba hsla

rgba(255,0,0,1.0);

rgba(255,0,0,0.8);

rgba(255,0,0,0.6);

rgba(255,0,0,0.4);

rgba(255,0,0,0.2);


< :-)/>


Q&A

zibin AT opera.com
twitter: zibin


Creative Commons license image
clap
http://www.flickr.com/photos/tudor/953584594/
spider web
http://www.flickr.com/photos/luc_viatour/2843025968/sizes/l/in/set-72157614714349217/
now
http://www.gottabemobile.com/2010/01/18/ebook-readers-strike-back-at-publishers-trying-to-
maximize-profits
shadow
http://www.flickr.com/photos/jenny-pics/3115479281/sizes/m/
transitions transform
http://www.flickr.com/photos/28481088@N00/1298930743/
borders and background
http://www.flickr.com/photos/cheekyneedle/178950842/sizes/o/
web fonts
http://www.flickr.com/photos/sekimura/4363831481/sizes/o/
clapping photo
http://splashclubpenguin.files.wordpress.com/2009/03/101606sly_claps.jpg
sun flower
http://www.flickr.com/photos/treyevan/429692359/sizes/l/
transition
http://www.flickr.com/photos/28481088@N00/1290363773/sizes/o/


Demo & article
background and borders articles
http://dev.opera.com/articles/view/css3-border-background-boxshadow/
border-radius flower demo
http://people.opera.com/zibin/css3flower/flower.html
transiitons and transform article
http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/
web fonts article
http://dev.opera.com/articles/view/seven-web-fonts-showcases/
9elements HTML5 demo
http://9elements.com/io/projects/html5/canvas/
David’s photobook demo
http://people.opera.com/dstorey/transforms/image-gallery.html

Presentation reference
introduction to CSS2.1 and CSS3
http://www.slideshare.net/marcamos/introduction-to-css-21-and-css-3


Taiwan Web Standards Talk 2011

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to Taiwan Web Standards Talk 2011

Similar to Taiwan Web Standards Talk 2011 (20)

More from Zi Bin Cheah

More from Zi Bin Cheah (18)

Recently uploaded

Recently uploaded (20)

Taiwan Web Standards Talk 2011