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

Plug-ins are out; HTML5 is in.


http://drama-addict.com

Jobs, “yeah I meant it: Flash sucks”


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


Apple loves HTML5.


Google loves HTML5.


Microsoft loves HTML5.


January 18, 2011

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

Next Month (May 2011)

Who’s ready for HTML5?

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?


Because 5 > 4

What’s my Browser Compatibilty Strategy? (BCS)

Official Tests: w3c-test.org


(Unofficial Tests)

HTML5Test.com

CanIUse.com


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>


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"



<!DOCTYPE html>

<html lang="en">



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


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


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


Semantics: New Tags

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

http://video.stickon.me/CSS

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

Html5 first look by aj.Ball

Education

Transcript of Html5 first look by aj.Ball