Peter lubbers-html5-overview-sf-dev-conf-2011
•Als PPTX, PDF herunterladen•
4 gefällt mir•2,508 views
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Ähnlich wie Peter lubbers-html5-overview-sf-dev-conf-2011
Ähnlich wie Peter lubbers-html5-overview-sf-dev-conf-2011 (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Peter lubbers-html5-overview-sf-dev-conf-2011
- 1. Title HTML5Shoes:@matijs HTML5: The30,000 Foot Overview(Updated) Peter Lubbers Senior Director, Technical Communication Kaazing
- 3. Not to Be Confused With…
- 6. Check out our booth, win prizes
- 8. Great monthly events with top speakers
- 9. Video-taped
- 11. Sign up today:www.sfhtml5.orgThe HTML5 logo is attributed to the W3C. http://www.w3.org/html/logo/
- 15. 2 Hours + 1 Hr Q&A
- 20. 1 Hr (incl. Q&A)
- 22. HTML5 History in <2 minutes
- 23. Why HTML5?
- 24. HTML5 Features
- 25. Your 2011 HTML5 Toolkit
- 28. Focused on Web Applications
- 29. Web apsare rapidly becoming first class apps, on par with desktopand native apps
- 30. Different definitionsWhat is HTML5? HTML JavaScript CSS NEWT?
- 33. Support varies widely for different features
- 34. IE 6,7 and 8: minimal support
- 38. HTML Timeline
- 40. 1993: First HTML Specification (IETF)
- 43. HTML 4.01, XHTML, Web 2.0 1999: HTML 4.01 2000: XHTML 1.0 2001: Last 4.01 Errata 2001: XHTML 1.1 2004: Web 2.0
- 45. 2008: HTML5 Working Draft W3C
- 47. May 24 2011: Working Draft Last Call
- 51. 2) HTML5 Simplifies Because HTML5 is, well, simpler
- 55. XHTML 1.0 Strict
- 58. XHTML 1.1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML5 <!DOCTYPE html>
- 59. Simplified Character Set HTML4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> HTML5 <meta charset=utf-8>
- 60. SimplifiedMarkup HTML5 <!DOCTYPE html> <meta charset=utf-8> <title>HTML5</title> <h1>HTML5!</h1> DOM 70 characters!
- 61. Simplified Markup Two HTML5 pages in onetweet!
- 63. For example, the new <ruby> element
- 64. Accessibility
- 65. Semantic markup
- 66. WebVTT<video controls preload="metadata"> <source src="rocpoc.mp4"> <track label="English" kind="subtitles" src="subtitles_en.vtt”> </video> WEBVTT 1 00:00:01,000 --> 00:00:03,050 What do I think about HTML 5?... 2 00:00:04,000 --> 00:00:07,100 It’s pretty sweet. I just hope that people use the new features thoughtfully. http://html5videoguide.net/presentations/WebVTT
- 68. Plugins may not be installed
- 69. Pluginscan be an attack vector (Proxy poisoning)
- 70. “Whenever a Mac crashes, more often that not is because of Flash” —Steve Jobshttp://www.infoq.com/news/2011/09/Metro-Plug-ins
- 73. Defines secure cross-origin sharing
- 74. HTML5 is not without flaws, but issues will be fixed (unlike proprietary plugins)
- 78. HTML5 Feature Areas Semantics: Markup describes purpose of content(e.g. <header> vs. <div class="header">) CSS3: New selectors, more visual options Multimedia: <audio> and <video> Graphics: <canvas> and in-line SVG
- 79. HTML5 Feature Areas Device Access: Geolocation, accelerometer, etc. Performance: Run JS in background Offline/Storage: Use web apps on/off line Connectivity: Improved XHR, SSE, WebSockets
- 80. Semantic Markup & Microdata
- 82. Why don’t you serve it with the right mime type?
- 83. Over 90% of XHTML is delivered with the text/html mime type and therefore broken
- 87. HTML5 allows XML syntax from XHTML 1.0 for backward compatibility
- 88. For example: <br />
- 89. HTML5 has well-definedprocessing ruleshttp://validator.nu
- 90. New HTML5 Elements <canvas> <article> <audio> <aside> <command> <dialog> <details> <datalist> <header> <hgroup> <footer> <figure> <embed> <nav> <keygen> <mark> <meter> <ruby> <output> <section> <rp> <rt> <video> <source> http://dev.w3.org/html5/markup/elements.html#elements
- 91. Removed Elements <acronym> <basefont> <applet> <big> <dir> <font> <center> <s> <strike> <frame> <u> <frameset> <noframes> <tt>
- 93. Cleaner, less verbose markup (replace div and span elements with meaningful elements)
- 95. Search engines
- 96. Syndication
- 98. HTML5 Page in IE I.E. <9
- 100. Easy-to-write syntax (add attributes to any element)
- 104. Native date and color pickers
- 105. Search, e-mail, web address
- 107. Spin boxes and sliders
- 108. Features degrade gracefully (unknown input types are treated as text)
- 109. Benefits:
- 112. Forms features Date picker Color picker
- 113. CSS3
- 115. Almost 50 modules (readiness varies)
- 116. Use browser-specific prefixes until finalized
- 118. Examples:
- 119. Border radius (roundedcornerswithout images)
- 120. Gradients
- 121. Multi-column layout
- 122. Reflection
- 124. Rounded corners CSS a:hoverimg { border-radius: 10px; border: 2px solid #F47D31; -webkit-transform: scale(1.05); }
- 125. CSS /* Linear Gradient for WebKit and Mozilla in CSS3 */ background-image: -moz-linear-gradient(top, #F47D31, #888); background-image: -webkit-gradient( linear, left top, left bottom, color-stop (0,#F47D31), color-stop(1, #888)); Copyright © 2011 - Kaazing Corporation. All rights reserved. Example: Linear Gradient
- 126. CSS /* Define a fallback color and image */ background-color: #f47d31; background: #888888 url("gradient-bg.png") repeat-x top; /** In Opera, you can also use SVG: background: #f47d31 url("gradient-bg.svg"); **/ /* IE(6&7, 8) Fallback, specify 6-digit colors here */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFF47D31', EndColorStr='#FF888888'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFF47D31', EndColorStr='#FF888888')"; Copyright © 2011 - Kaazing Corporation. All rights reserved. Linear Gradient Fallback
- 127. Multi-ColumnLayout CSS /* Column layout*/ body { -webkit-column-count:3; -webkit-column-width: 100px; -webkit-column-gap: 10px; -webkit-column-rule: 1px solid; -moz-column-count:3; -moz-column-width: 100px; -moz-column-gap: 10px; -moz-column-rule: 1px solid;}}
- 128. Reflection For images, videos, etc. CSS -webkit-box-reflect: below 2px -webkit-gradient( linear, left top, left bottom, from(transparent), color-stop( 0.6, transparent), to(white));
- 129. Multimedia
- 131. <audio> and <video>
- 132. Native audio and video (no plugins required)
- 134. Style with CSS
- 135. Add videos and audio as if it was an image
- 138. HTML <!—Multiple videos with alternate Flash content--> <video controls> <source src=”goldrush.webm"> <source src=”goldrush.mp4”> <track label="English" kind="subtitles"srclang="en" src="subtitles_en.vtt"> <object data="videoplayer.swf" type="application/x-shockwave-flash"> <param name="movie" value="rocpoc.swf"/> A movie by Rocky Lubbers </object> </video> Flash Video Fallback
- 139. WebVTT WEBVTT 1 00:00:01,000 --> 00:00:03,050 What do I think about HTML 5?... 2 00:00:04,000 --> 00:00:07,100 It’s the next big thing! I just hope that people use the new features thoughtfully. WebVTT
- 140. Graphics and 3D
- 142. Previously possible only with plugins (Flash, Silverlight)
- 143. Completely integrated into HTML5documents (part of DOM)
- 144. Can be styled with CSS
- 145. Can be controlled with JavaScript
- 146. Use for animation, charts, images,pixel manipulation, and so on
- 148. Interactive Canvas Animation everytimezone.com
- 150. 3D Canvas (WebGL) http://bodybrowser.googlelabs.com/body.html
- 151. Device Access
- 153. Geolocation
- 154. Allows users to share their locationfor location-aware services
- 155. Implemented in all browsers
- 156. Drag and Drop
- 157. Filesystem API
- 158. Speech Input
- 161. Device Orientation Demo: http://slides.html5rocks.com/#slide-orientation Image: http://idisk.mac.com/han.solo-Public/Canvas/SteelSeries/Radial.html
- 162. Speech Input HTML <input type=text x-webkit-speech>
- 163. Performance
- 165. HTML5 Web Workers provide background processing capabilities to web applications
- 166. Run background JavaScript (like a thread)
- 169. Cache pages that have not been visited yet
- 170. Browsers cache data in an Application Cache
- 171. HTML5 allows online and offline detection
- 172. Allows prefetching of site resources (can speed up pages)
- 175. Use .appcache extension (*.manifest also allowed)
- 176. Add as attribute to HTML elementHTML <!DOCTYPE html> <html manifest="offline.appcache"> <head> <title>HTML5 Application Cache Rocks!</title> Example manifest Attribute http://appcachefacts.info/
- 178. Web and Web Database storage a.k.a. "cookies on steroids”
- 179. Web Storage (Session and Local Storage
- 180. Web Database StorageCookies Session Local Database
- 181. Connectivity and Real Time
- 184. Server-Sent Events
- 185. WebSockets
- 188. The 2011 HTML5 Toolbox
- 193. Download or create a custom build
- 194. Use Modernizr.load to test for feature supportJavascript Modernizr.load({ test: Modernizr.websocket, yep : ’websocket.js', nope: ’kz-websocket-polyfill.js' }); http://www.sfhtml5.org/events/28458331
- 196. Embed Chrome in IE
- 197. No admin privileges needed to installHTML <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame <meta http-equiv="X-UA-Compatible“ content="IE=edge,chrome=1”> http://code.google.com/chrome/chromeframe/
- 199. Page Speed
- 200. YSlow
- 206. Small, simple JavaScript library that checks support for HTML5 and CSS3 features
- 207. Moves away from user-agent sniffing and uses feature detection insteadhttp://www.modernizr.com/
- 208. html5shiv
- 209. Creates the new HTML5 DOM elements in Internet Explorer so that styles can be applied to themhttp://code.google.com/p/html5shiv/
- 210. html5boilerplate
- 214. HTML5 outline algorithm test page
- 216. Performance:
- 221. Apress book: Pro HTML5 Programming
- 222. (Peter Lubbers, Brian Albers, & Frank Salim)http://www.prohtml5.com/
- 223. 5by5 podcasts:
- 224. The Web Ahead
- 225. The Big Web Show
Hinweis der Redaktion
- Coming to a head vote in W3C, WHATWG created
- Well, that’s the promise, actually next slide
- Steve Jobs says 90% browser crashes are due to FlashPlug-ins are prone to attacks
- Steve Jobs says 90% browser crashes are due to FlashPlug-ins are prone to attacks
- Steve Jobs says 90% browser crashes are due to FlashPlug-ins are prone to attacks
- HTML, CSS, and JS
- Not deprecated, but obsolete
- They’re all Web storage