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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (6)

Similaire à Taiwan Web Standards Talk 2011

Similaire à Taiwan Web Standards Talk 2011 (20)

Plus de Zi Bin Cheah

Plus de Zi Bin Cheah (18)

Dernier

Dernier (20)

Taiwan Web Standards Talk 2011