Html5 first look by aj.Ball

The First Look
Supote Phunsakul
http://codetoday.net
Twitter: @SoftEngine
 #codetoday
 #html5
 #wp7dev
 #techtags

Plug-ins are out; HTML5 is in.
Scott Stanfield @ Mix’11

Jobs, “yeah I meant it: Flash sucks”

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

Apple loves HTML5.

Google loves HTML5.

Microsoft loves HTML5.

It’s official: we have a logo!
http://www.w3.org/html/logo/

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

11%
23%
2%
6%
56%
Chrome Firefox Opera Safari Explorer

54%*
 Browsers support basic <canvas>
* From caniuse.com, Feb 2011

11%*
Still use IE 6
†
* Mainland China, 5.8%. USA is 0.6%
† IE 6.0 shipped August 2001

IE6 Deathwatch

54%
Of web traffic comes from Windows XP

95.91%*
Browse on the “desktop”
* 89% of that is on Windows

3.9%*
Mobile browsers
* Doubled in 12 months!

So, why do we care so much about HTML5?

What’s my Browser Compatibilty Strategy?
(BCS)

Official Tests: w3c-test.org

(Unofficial Tests)
HTML5Test.com
CanIUse.com

<!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>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"
<head>
charset=utf-8" />
</head>
<body>
<p>Hello World!</p>
</body></html>

<!DOCTYPE html>
<html lang="en">
<head>
charset=utf-8" />
</head>
<body>
<p>Hello World!</p>
</body></html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
</head>
<body>
<p>Hello World!</p>
</body></html>

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<p>Hello World!</p>
</body></html>

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<p>Hello World!</p>
</body>
</html>

Top 20 Class Names
(http://code.google.com/webstats/)

Mapping Popular Class Names

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
* !

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)

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;
}

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;
}

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; }

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;
height;
 readonly attribute
CanvasPixelArray data; };
 interface CanvasPixelArray {
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.

Html5 first look by aj.Ball

Recomendados

Recomendados

Más contenido relacionado

Similar a Html5 first look by aj.Ball

Similar a Html5 first look by aj.Ball (20)

Último

Último (20)

Html5 first look by aj.Ball