Html5 first look by aj.Ball
-
Upload
supote-phunsakul -
Category
Education
-
view
1.900 -
download
0
Transcript of Html5 first look by aj.Ball
The First Look
Supote Phunsakul
http://codetoday.net
Twitter: @SoftEngine
#codetoday
#html5
#wp7dev
#techtags
January 27, 2010
Scott Stanfield @ Mix’11
Scott Stanfield @ Mix’11
Plug-ins are out; HTML5 is in.
Scott Stanfield @ Mix’11
http://drama-addict.com
Jobs, “yeah I meant it: Flash sucks”
Scott Stanfield @ Mix’11
Adobe’s response
Apple’s (implied) response
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
Apple loves HTML5.
Scott Stanfield @ Mix’11
Google loves HTML5.
Scott Stanfield @ Mix’11
Microsoft loves HTML5.
Scott Stanfield @ Mix’11
PAGE 15
January 18, 2011
It’s official: we have a logo!
http://www.w3.org/html/logo/
Scott Stanfield @ Mix’11
The Technology
Semantic Offline & Storage Device Access Connectivity
Multimedia 3D, Graphics, Effects Performance &
Integration
CSS3 Styling
What is “HTML5”?
PAGE 20
HTML5 ~= HTML + CSS + JS
http://www.html5rocks.com
Next Month (May 2011)
Scott Stanfield @ Mix’11
Who’s ready for HTML5?
11%
23%
2% 6%
56%
Chrome Firefox Opera Safari Explorer
Scott Stanfield @ Mix’11
54%* Browsers support basic <canvas>
* From caniuse.com, Feb 2011
Scott Stanfield @ Mix’11
11%* Still use IE 6
†
* Mainland China, 5.8%. USA is 0.6%
† IE 6.0 shipped August 2001
Scott Stanfield @ Mix’11
IE6 Deathwatch
Scott Stanfield @ Mix’11
54% Of web traffic comes from Windows XP
Scott Stanfield @ Mix’11
95.91%* Browse on the “desktop”
* 89% of that is on Windows
Scott Stanfield @ Mix’11
3.9%* Mobile browsers
* Doubled in 12 months!
Scott Stanfield @ Mix’11
So, why do we care so much about HTML5?
Scott Stanfield @ Mix’11
Because 5 > 4
Scott Stanfield @ Mix’11
What’s my Browser Compatibilty Strategy? (BCS)
Official Tests: w3c-test.org
Scott Stanfield @ Mix’11
(Unofficial Tests)
HTML5Test.com
CanIUse.com
Scott Stanfield @ Mix’11
Scott Stanfield @ Mix’11
Scott Stanfield @ Mix’11
Syntax: HTML5 is Terse
<!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
<!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
<!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
<!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
<!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
<!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
Semantics: New Tags
Scott Stanfield @ Mix’11
Top 20 Class Names (http://code.google.com/webstats/)
Scott Stanfield @ Mix’11
Mapping Popular Class Names
Scott Stanfield @ Mix’11
Scott Stanfield @ Mix’11
Scott Stanfield @ Mix’11
Great sites from Beauty Of The Web
PAGE 52
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
HTML5 Topics
แอปเปิลปรับเว็บใหมใ่ช้ HTML5 แทน HTML4
Gmail เพ่ิมฟีเจอร์ "แจ้งเตือนเมลใหม"่ บนเดสก์ท็อป
มาตรฐานวีดีโอแตกเป็นสองทาง: Chrome ยกเลกิการรองรับ H.264 แล้ว
ไมโครซอฟท์โต้กเูกิล บอก WebM ไมมี่ใครใช้
วิดีโอใหม่ใน YouTube ถกูแปลงเป็น WebM หมดแล้ว
IE9 สนบัสนนุ VP8 Codec บน HTML5
อตุสาหกรรมหนงัโป๊หนนุ HTML5 เตรียมบอกลา Flash
PAGE 54
http://www.blognone.com
Multimedia Audio and video are first class citizens in the
HTML5 web, living in harmony with your
apps and sites. Lights, camera, action!
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
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
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
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
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
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.
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
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
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
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
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
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.
The concept of “Real Time Web” is awesome.
Craig Kitterman & Paul Batum @ Mix’11
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
http://www.html5labs.com
DEMO
PAGE 70
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.
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
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
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
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.
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.
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.
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.