html5 first look by aj.ball
TRANSCRIPT
![Page 1: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/1.jpg)
The First Look
Supote Phunsakul
http://codetoday.net
Twitter: @SoftEngine
#codetoday
#html5
#wp7dev
#techtags
![Page 2: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/2.jpg)
January 27, 2010
![Page 3: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/3.jpg)
Scott Stanfield @ Mix’11
![Page 4: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/4.jpg)
Scott Stanfield @ Mix’11
![Page 5: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/5.jpg)
Plug-ins are out; HTML5 is in.
Scott Stanfield @ Mix’11
![Page 6: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/6.jpg)
http://drama-addict.com
![Page 7: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/7.jpg)
Jobs, “yeah I meant it: Flash sucks”
Scott Stanfield @ Mix’11
![Page 8: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/8.jpg)
Adobe’s response
![Page 9: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/9.jpg)
Apple’s (implied) response
![Page 10: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/10.jpg)
Most Flash websites will need to be rewritten to support touch. [...] why not use modern technologies like HTML5, CSS and JavaScript?
Steve Jobs, April 2010
Scott Stanfield @ Mix’11
![Page 11: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/11.jpg)
Apple loves HTML5.
Scott Stanfield @ Mix’11
![Page 12: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/12.jpg)
Google loves HTML5.
Scott Stanfield @ Mix’11
![Page 13: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/13.jpg)
Microsoft loves HTML5.
Scott Stanfield @ Mix’11
![Page 14: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/14.jpg)
![Page 15: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/15.jpg)
PAGE 15
![Page 16: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/16.jpg)
January 18, 2011
![Page 17: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/17.jpg)
It’s official: we have a logo!
http://www.w3.org/html/logo/
Scott Stanfield @ Mix’11
![Page 18: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/18.jpg)
![Page 19: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/19.jpg)
The Technology
Semantic Offline & Storage Device Access Connectivity
Multimedia 3D, Graphics, Effects Performance &
Integration
CSS3 Styling
![Page 20: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/20.jpg)
What is “HTML5”?
PAGE 20
HTML5 ~= HTML + CSS + JS
http://www.html5rocks.com
![Page 21: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/21.jpg)
Next Month (May 2011)
![Page 22: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/22.jpg)
Scott Stanfield @ Mix’11
![Page 23: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/23.jpg)
Who’s ready for HTML5?
![Page 24: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/24.jpg)
11%
23%
2% 6%
56%
Chrome Firefox Opera Safari Explorer
Scott Stanfield @ Mix’11
![Page 25: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/25.jpg)
54%* Browsers support basic <canvas>
* From caniuse.com, Feb 2011
Scott Stanfield @ Mix’11
![Page 26: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/26.jpg)
11%* Still use IE 6
†
* Mainland China, 5.8%. USA is 0.6%
† IE 6.0 shipped August 2001
Scott Stanfield @ Mix’11
![Page 27: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/27.jpg)
IE6 Deathwatch
Scott Stanfield @ Mix’11
![Page 28: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/28.jpg)
54% Of web traffic comes from Windows XP
Scott Stanfield @ Mix’11
![Page 29: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/29.jpg)
95.91%* Browse on the “desktop”
* 89% of that is on Windows
Scott Stanfield @ Mix’11
![Page 30: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/30.jpg)
3.9%* Mobile browsers
* Doubled in 12 months!
Scott Stanfield @ Mix’11
![Page 31: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/31.jpg)
So, why do we care so much about HTML5?
Scott Stanfield @ Mix’11
![Page 32: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/32.jpg)
Because 5 > 4
![Page 33: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/33.jpg)
Scott Stanfield @ Mix’11
![Page 34: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/34.jpg)
What’s my Browser Compatibilty Strategy? (BCS)
![Page 35: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/35.jpg)
Official Tests: w3c-test.org
Scott Stanfield @ Mix’11
![Page 36: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/36.jpg)
(Unofficial Tests)
HTML5Test.com
CanIUse.com
Scott Stanfield @ Mix’11
![Page 37: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/37.jpg)
Scott Stanfield @ Mix’11
![Page 38: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/38.jpg)
Scott Stanfield @ Mix’11
![Page 39: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/39.jpg)
Syntax: HTML5 is Terse
![Page 40: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/40.jpg)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Page</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <p>Hello World!</p> </body></html>
Scott Stanfield @ Mix’11
![Page 41: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/41.jpg)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Page</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <p>Hello World!</p> </body></html>
Scott Stanfield @ Mix’11
![Page 42: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/42.jpg)
<!DOCTYPE html>
<html lang="en">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Page</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <p>Hello World!</p> </body></html>
Scott Stanfield @ Mix’11
![Page 43: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/43.jpg)
<!DOCTYPE html>
<html lang="en">
<head> <meta charset=utf-8 /> <title>Untitled Page</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <p>Hello World!</p> </body></html>
Scott Stanfield @ Mix’11
![Page 44: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/44.jpg)
<!DOCTYPE html>
<html lang="en">
<head> <meta charset=utf-8 /> <title>Untitled Page</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <p>Hello World!</p> </body></html>
Scott Stanfield @ Mix’11
![Page 45: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/45.jpg)
<!DOCTYPE html> <html lang="en"> <head> <meta charset=utf-8 /> <title>Untitled Page</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <p>Hello World!</p> </body> </html>
Scott Stanfield @ Mix’11
![Page 46: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/46.jpg)
Semantics: New Tags
![Page 47: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/47.jpg)
Scott Stanfield @ Mix’11
![Page 48: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/48.jpg)
Top 20 Class Names (http://code.google.com/webstats/)
Scott Stanfield @ Mix’11
![Page 49: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/49.jpg)
Mapping Popular Class Names
Scott Stanfield @ Mix’11
![Page 50: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/50.jpg)
Scott Stanfield @ Mix’11
![Page 51: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/51.jpg)
Scott Stanfield @ Mix’11
![Page 52: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/52.jpg)
Great sites from Beauty Of The Web
PAGE 52
![Page 53: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/53.jpg)
HTML5 Topics
Twitter ปรับปรุง Mobile Web ใหม ่เขียนด้วย HTML5 เป็นเว็บแอพ
Adobe Creative Suite 5.5 มาแล้ว เน้น HTML5, มือถือ, แท็บเลต็
Facebook ออกเคร่ืองมือชว่ยวดัประสทิธิภาพเกม HTML5
NVIDIA/Mozilla/YouTube จบัมือโชว์วิดีโอ HTML5 แบบ 3D
ไมโครซอฟท์เปิดตวั Silverlight 5 เบต้า, ยืนยนั Sliverlight มีบทบาทในโลก HTML5
Adobe แจกตวัแปลง Flash เป็น HTML5 แล้วในช่ือ Wallaby
IE9 ผา่นการทดสอบ HTML5 และ CSS3 ร้อยเปอร์เซน็ต์เต็ม
Disney ไมส่น HTML5 ขอท า App ดีกวา่
Disney เข้าซือ้บริษัทเคร่ืองมือสร้างเกมด้วย HTML5
PAGE 53
http://www.blognone.com
![Page 54: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/54.jpg)
HTML5 Topics
แอปเปิลปรับเว็บใหมใ่ช้ HTML5 แทน HTML4
Gmail เพ่ิมฟีเจอร์ "แจ้งเตือนเมลใหม"่ บนเดสก์ท็อป
มาตรฐานวีดีโอแตกเป็นสองทาง: Chrome ยกเลกิการรองรับ H.264 แล้ว
ไมโครซอฟท์โต้กเูกิล บอก WebM ไมมี่ใครใช้
วิดีโอใหม่ใน YouTube ถกูแปลงเป็น WebM หมดแล้ว
IE9 สนบัสนนุ VP8 Codec บน HTML5
อตุสาหกรรมหนงัโป๊หนนุ HTML5 เตรียมบอกลา Flash
PAGE 54
http://www.blognone.com
![Page 55: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/55.jpg)
Multimedia Audio and video are first class citizens in the
HTML5 web, living in harmony with your
apps and sites. Lights, camera, action!
![Page 56: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/56.jpg)
HTML5 Video & Audio
<audio <video
src= src= The url to the audio or video
width= The width of the video element
height= The height of the video element
poster= The url to the thumbnail of the video
preload= preload= (none, metadata, auto) Start downloading
autoplay autoplay Audio or video should play immediately
loop loop Audio or video should return to start and play
controls controls Will show controls (play, pause, scrub bar)
> >
… …
</audio> </video>
Nigel Parker - http://nigelparker.name
![Page 57: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/57.jpg)
The browser will use the first recognized format
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
PAGE 57
![Page 58: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/58.jpg)
Audio & Video Codecs – Browser Support
PAGE 58
If WebM is
installed
*
! * !
Chrome is removing support for H.264
Microsoft released a H.264 Extension for
Chrome on Windows 7* !
Nigel Parker - http://nigelparker.name
![Page 59: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/59.jpg)
HTML5 Video Codec
Browser H.264 (MP4) VP8 (WebM)
Internet Explorer 9 X X Google Chrome 12 X X
Mozilla Firefox 4 - X Apple Safari 5 X -
Opera 11 - X
PAGE 59
![Page 60: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/60.jpg)
Apple’s HLS (HTTP Live Streaming)
PAGE 60
HTML5 doesn’t specify any form of adaptive streaming Apple’s HLS is not a part of an industry standard 3GPP and MPEG are in the process of standardizing DASH(Dynamic Adaptive Streaming over HTTP)
Nigel Parker - http://nigelparker.name
![Page 61: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/61.jpg)
CSS3 Styling CSS3 delivers a wide range of stylization and
effects, enhancing the web app without
sacrificing your semantic structure or
performance. Additionally Web Open Font
Format (WOFF) provides typographic
flexibility and control far beyond anything
the web has offered before.
![Page 62: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/62.jpg)
Styling Video with CSS
PAGE 62
video {
position: relative;
border-radius:
200px 50px 200px 50px;
box-shadow:
#244766 10px 10px 10px;
transform: rotate(5deg)
translate(15px,10px);
}
Nigel Parker @ Mix’11
![Page 63: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/63.jpg)
Dropdown Menu
PAGE 63
HTML
<ul class="menu"> <li><a href="/a/">Menu</a> <ul> <li><a href="/a/a">Sub-menu A</a></li> <li><a href="/a/b">Sub-menu A</a></li> <li><a href="/a/c">Sub-menu A</a></li> </ul> </li> </ul>
CSS
.menu > li > ul { display:none; }
.menu > li:hover > ul { display:block; }
Jonathan Snook @ Mix’11
![Page 64: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/64.jpg)
Rollovers
PAGE 64
CSS
a { background-image: url("my-image.png"); }
a:hover { background-image: url("roll.png"); }
CSS
a { background-image: url("my-sprite.png"); background-position: 0 0; }
a:hover { background-position:0 -30px; }
Jonathan Snook @ Mix’11
![Page 65: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/65.jpg)
Dependent Content
PAGE 65
HTML
<div class="faq"> <a href="#a1">How much wood could...?</a> <a href="#a2">Who sells seashells...?</a>
...
<div id="a1"> The amount of wood that a woodchuck... </div>
</div>
CSS
.faq > div { display:none; }
.faq > div:target { display:block; }
Jonathan Snook @ Mix’11
![Page 66: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/66.jpg)
Layout: display table with CSS
PAGE 66
HTML
<table>
<tr>
<td style="width:50px">Sidebar Content</td>
<td >Main Content</td>
</tr>
</table> HTML
<div id="content">
<div class="sidebar">Sidebar Content</div>
<div class="main">Main Content</div>
</div> CSS
#content { display:table; }
.sidebar { display:table-cell; width:50px; }
.main { display:table-cell; }
Jonathan Snook @ Mix’11
![Page 67: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/67.jpg)
Connectivity More efficient connectivity means more real-
time chats, faster games, and better
communication. Web Sockets and Server-
Sent Events are pushing (pun intended) data
between client and server more efficiently
than ever before.
![Page 68: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/68.jpg)
The concept of “Real Time Web” is awesome.
Craig Kitterman & Paul Batum @ Mix’11
![Page 69: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/69.jpg)
WebSockets
PAGE 69
Bidirectional
Single TCP socket
In & out of browser
Real time performance
Simple programming model
Bandwidth savings
Scalability advantages
a socket that works anywhere across the web …even
through network intermediaries
Craig Kitterman & Paul Batum @ Mix’11
![Page 70: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/70.jpg)
http://www.html5labs.com
DEMO
PAGE 70
![Page 71: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/71.jpg)
3D, Graphics, Effects Between SVG, Canvas, WebGL, and CSS3 3D
features, you're sure to amaze your users
with stunning visuals natively rendered in the
browser.
![Page 72: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/72.jpg)
What’s Canvas?
HTML5 element that allows for dynamic, scriptable rendering of 2D shapes and bitmaps
Immediate mode rendering
Simple API: 45 methods, 21 attributes
Jatinder Mann @ Mix’11
![Page 73: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/73.jpg)
Here is the entire API
PAGE 73
state void save();
void restore();
transformations void scale(…);
void rotate(…);
void translate(…);
void transform(…);
void setTransform(…);
compositing globalAlpha;
globalCompositeOperation;
colors and styles strokeStyle;
fillStyle;
CanvasGradient createLinearGradient(…);
CanvasGradient createRadialGradient(…);
CanvasPattern createPattern(…);
Line caps/joins attribute double lineWidth;
attribute DOMString lineCap;
attribute DOMString lineJoin;
attribute double miterLimit;
Shadows attribute double
shadowOffsetX;
attribute double shadowOffsetY;
attribute double shadowBlur;
attribute DOMString shadowColor;
Rects
void clearRect(…);
void fillRect(…);
void strokeRect(…);
path API
void beginPath();
void closePath();
void moveTo(…);
void lineTo(…);
void quadraticCurveTo(…);
void bezierCurveTo(…);
void arcTo(…);
void rect(…);
void arc(…);
void fill();
void stroke();
void clip();
boolean isPointInPath(…);
focus management
boolean drawFocusRing(…);
drawing images
void drawImage(…);
text attribute DOMString font; attribute DOMString textAlign;
attribute DOMString textBaseline; void fillText(…); void strokeText(…);
TextMetrics measureText(…);
pixel manipulation ImageData createImageData(…); ImageData createImageData(…);
ImageData getImageData(…); void putImageData(…);
interface CanvasGradient { void addColorStop(…); };
interface CanvasPattern {};
interface TextMetrics { readonly attribute double width;
};
interface ImageData { readonly attribute unsigned long
width; readonly attribute unsigned long
height;
readonly attribute CanvasPixelArray data; };
interface CanvasPixelArray { readonly attribute unsigned long
length; getter octet (…);
setter void (…); };
Jatinder Mann @ Mix’11
![Page 74: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/74.jpg)
Create a Canvas Element
<canvas id="myCanvas" width="200" height="100"></canvas>
PAGE 74
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
http://www.w3schools.com
![Page 75: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/75.jpg)
Offline & Storage Web Apps can start faster and work even if
there is no internet connection, thanks to the
HTML5 App Cache, as well as the Local
Storage, Indexed DB, and the File API
specifications.
![Page 76: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/76.jpg)
HTML 5 Semantics Giving meaning to structure, semantics are
front and center with HTML5. A richer set of
tags, along with RDFa, microdata, and
microformats, are enabling a more useful,
data driven web for both programs and your
users.
![Page 77: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/77.jpg)
Device Access Beginning with the Geolocation API, Web
Applications can present rich, device-aware
features and experiences. Incredible device
access innovations are being developed and
implemented, from audio/video input access
to microphones and cameras, to local data
such as contacts & events, and even tilt
orientation.
![Page 78: Html5 first look by aj.Ball](https://reader033.vdocument.in/reader033/viewer/2022052822/554f4063b4c90572088b52a0/html5/thumbnails/78.jpg)
Performance & Integration Make your Web Apps and dynamic web
content faster with a variety of techniques
and technologies such as Web Workers and
XMLHttpRequest 2. No user should ever wait
on your watch.