Html5 first look by aj.Ball

The First LookSupote Phunsakulhttp://codetoday.netTwitter: @SoftEngine #codetoday #html5 #wp7dev #techtags

January 27, 2010

Scott Stanfield @ Mix’11

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

http://drama-addict.com

Scott Stanfield @ Mix’11Jobs, “yeah I meant it: Flash sucks”

Adobe’s response

Apple’s (implied) response

Scott Stanfield @ Mix’11Most Flash websites will needto be rewritten to supporttouch. [...] why not usemodern technologies likeHTML5, CSS and JavaScript?  Steve Jobs, April 2010

Scott Stanfield @ Mix’11Apple loves HTML5.

Scott Stanfield @ Mix’11Google loves HTML5.

Scott Stanfield @ Mix’11Microsoft loves HTML5.

January 18, 2011

Scott Stanfield @ Mix’11It’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 & CSS3 Styling Integration

http://www.html5rocks.comWhat is “HTML5”? HTML5 ~= HTML + CSS + JSPAGE 20

Next Month (May 2011)

Who’s ready for HTML5?

Scott Stanfield @ Mix’11 56% 23% 11% 6% 2%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’11IE6 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’11So, why do we care so much about HTML5?

Because 5 > 4

What’s my Browser Compatibilty Strategy?(BCS)

Scott Stanfield @ Mix’11Official Tests: w3c-test.org

Scott Stanfield @ Mix’11(Unofficial Tests)HTML5Test.com CanIUse.com

Syntax:HTML5 is Terse

Scott Stanfield @ Mix’11<!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>

Semantics:New Tags

Scott Stanfield @ Mix’11 Top 20 Class Names(http://code.google.com/webstats/)

Scott Stanfield @ Mix’11Mapping Popular Class Names

Great sites from Beauty Of The WebPAGE 52

http://www.blognone.comHTML5 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 เข้ าซื ้อบริ ษัทเครื่ องมือสร้ างเกมด้ วย HTML5PAGE 53

http://www.blognone.comHTML5 Topics  แอปเปิ ลปรับเว็บใหม่ใช้ HTML5 แทน HTML4  Gmail เพิ่มฟี เจอร์ "แจ้ งเตือนเมลใหม่" บนเดสก์ท็อป  มาตรฐานวีดีโอแตกเป็ นสองทาง: Chrome ยกเลิกการรองรับ H.264 แล้ ว  ไมโครซอฟท์โต้ กเู กิล บอก WebM ไม่มีใครใช้  วิดีโอใหม่ใน YouTube ถูกแปลงเป็ น WebM หมดแล้ ว  IE9 สนับสนุน VP8 Codec บน HTML5  อุตสาหกรรมหนังโป๊ หนุน HTML5 เตรี ยมบอกลา FlashPAGE 54

MultimediaAudio and video are first class citizens in theHTML5 web, living in harmony with yourapps and sites. Lights, camera, action!

Nigel Parker - http://nigelparker.nameHTML5 Video & Audio<audio <videosrc= 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 videopreload= preload= (none, metadata, auto) Start downloadingautoplay autoplay Audio or video should play immediatelyloop loop Audio or video should return to start and playcontrols controls Will show controls (play, pause, scrub bar)> >… …</audio> </video>

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

Nigel Parker - http://nigelparker.nameAudio & Video Codecs – Browser Support ! ! * * Chrome is removing support for H.264 * If WebM is installed ! Microsoft released a H.264 Extension for Chrome on Windows 7PAGE 58

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 - XPAGE 59

Nigel Parker - http://nigelparker.nameApple’s HLS (HTTP Live Streaming)  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)PAGE 60

CSS3 StylingCSS3 delivers a wide range of stylization andeffects, enhancing the web app withoutsacrificing your semantic structure orperformance. Additionally Web Open FontFormat (WOFF) provides typographicflexibility and control far beyond anythingthe web has offered before.

Nigel Parker @ Mix’11 Styling Video with CSSvideo { position: relative; border-radius: 200px 50px 200px 50px; box-shadow: #244766 10px 10px 10px; transform: rotate(5deg) translate(15px,10px);} PAGE 62

Jonathan Snook @ Mix’11Dropdown Menu 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;PAGE 63 }

Jonathan Snook @ Mix’11Rollovers 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;PAGE 64 }

Jonathan Snook @ Mix’11Dependent Content 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> CSS </div> .faq > div { display:none; } .faq > div:target { display:block;PAGE 65 }

Jonathan Snook @ Mix’11Layout: display table with CSS 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; }PAGE 66

ConnectivityMore efficient connectivity means more real-time chats, faster games, and bettercommunication. Web Sockets and Server-Sent Events are pushing (pun intended) databetween client and server more efficientlythan ever before.

Craig Kitterman & Paul Batum @ Mix’11The concept of “Real Time Web” is awesome.

Craig Kitterman & Paul Batum @ Mix’11 WebSockets a socket that works anywhere across the web …even through network intermediaries Bidirectional Single TCP socket In & out of browser Real time performance Simple programming model Bandwidth savings Scalability advantages PAGE 69

DEMO http://www.html5labs.comPAGE 70

3D, Graphics, EffectsBetween SVG, Canvas, WebGL, and CSS3 3Dfeatures, youre sure to amaze your userswith stunning visuals natively rendered in thebrowser.

Jatinder Mann @ Mix’11What’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 state  Shadows  text   attribute DOMString font;  void save(); attribute double shadowOffsetX;  attribute DOMString textAlign;  void restore();  attribute DOMString textBaseline;  attribute double shadowOffsetY;  void fillText(…); transformations  attribute double shadowBlur;  void strokeText(…);  void scale(…);  attribute DOMString  TextMetrics measureText(…);  void rotate(…); shadowColor;  pixel manipulation  void translate(…);  Rects  ImageData createImageData(…);  void transform(…);  ImageData createImageData(…);  void clearRect(…);  void setTransform(…);  void fillRect(…);  ImageData getImageData(…);  void strokeRect(…);  void putImageData(…); compositing  globalAlpha;  path API  globalCompositeOperation;  void beginPath();  interface CanvasGradient {  void closePath();  void addColorStop(…); }; colors and styles  void moveTo(…);  interface CanvasPattern {};  strokeStyle;  void lineTo(…);  fillStyle;  void quadraticCurveTo(…);  interface TextMetrics {  CanvasGradient  void bezierCurveTo(…);  readonly attribute double width;  void arcTo(…); }; createLinearGradient(…);  CanvasGradient  void rect(…);  interface ImageData { createRadialGradient(…);  void arc(…);  readonly attribute unsigned long  width;  CanvasPattern void fill();  readonly attribute unsigned long createPattern(…);  void stroke(); height;  void clip();  readonly attribute Line caps/joins  boolean isPointInPath(…); CanvasPixelArray data; };  attribute double lineWidth;  interface CanvasPixelArray {  focus management  attribute DOMString lineCap;  readonly attribute unsigned long  boolean drawFocusRing(…); length;  attribute DOMString lineJoin;  getter octet (…);  attribute double miterLimit;  drawing images  setter void (…); }; PAGE 73  void drawImage(…);

http://www.w3schools.comCreate a Canvas Element  <canvas id="myCanvas" width="200" height="100"></canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); </script>PAGE 74

Offline & StorageWeb Apps can start faster and work even ifthere is no internet connection, thanks to theHTML5 App Cache, as well as the LocalStorage, Indexed DB, and the File APIspecifications.

HTML 5 SemanticsGiving meaning to structure, semantics arefront and center with HTML5. A richer set oftags, along with RDFa, microdata, andmicroformats, are enabling a more useful,data driven web for both programs and yourusers.

Device AccessBeginning with the Geolocation API, WebApplications can present rich, device-awarefeatures and experiences. Incredible deviceaccess innovations are being developed andimplemented, from audio/video input accessto microphones and cameras, to local datasuch as contacts & events, and even tiltorientation.

Performance & IntegrationMake your Web Apps and dynamic webcontent faster with a variety of techniquesand technologies such as Web Workers andXMLHttpRequest 2. No user should ever waiton your watch.

Html5 first look by aj.Ball

by Supote Phunsakul on Jun 12, 2011

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 1

Statistics

Html5 first look by aj.Ball Presentation Transcript