• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Html5 first look by aj.Ball

on

  • 2,186 views

 

Statistics

Views

Total Views
2,186
Views on SlideShare
2,185
Embed Views
1

Actions

Likes
1
Downloads
77
Comments
0

1 Embed 1

http://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Html5 first look by aj.Ball Html5 first look by aj.Ball Presentation Transcript

    • The First LookSupote Phunsakulhttp://codetoday.netTwitter: @SoftEngine #codetoday #html5 #wp7dev #techtags
    • January 27, 2010
    • Scott Stanfield @ Mix’11
    • 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.
    • PAGE 15
    • 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)
    • Scott Stanfield @ Mix’11
    • 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
    • Scott Stanfield @ Mix’11
    • 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
    • Scott Stanfield @ Mix’11
    • Scott Stanfield @ Mix’11
    • 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>
    • 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
    • Scott Stanfield @ Mix’11 Top 20 Class Names(http://code.google.com/webstats/)
    • Scott Stanfield @ Mix’11Mapping Popular Class Names
    • Scott Stanfield @ Mix’11
    • Scott Stanfield @ Mix’11
    • 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.