SlideShare a Scribd company logo

Getting Started with HTML5 in Tech Com (STC 2012)

•
•
Peter Lubbers
Peter Lubbers

The document discusses an HTML5 presentation given by Peter Lubbers at STC12. It provides an agenda for the presentation that includes discussing what HTML5 is, its features, tools for HTML5, and a Q&A. It also shares quotes about the growing adoption of HTML5 and discusses several HTML5 topics like new elements, forms, multimedia, and CSS3.

TechnologyDesign
1 of 83
Download to read offline
@peterlubbers Kaazing #stc12 1 Getting Started with HTML5 © 2011 – Kaazing Corporation Illustration by Will Phillips Jr. | HTML5 Logo attributed W3C
Your host: @peterlubbers 2 © 2011 – Kaazing Corporation
Image @rdclark 3 © 2011 – Kaazing Corporation
Image: @jeffreypalermo 4 © 2011 – Kaazing Corporation
Agenda • HTML5—What and Why? • HTML5 Features #stc12 • Your HTML5 Toolkit @peterlubbers • Q&A 5 © 2011 – Kaazing Corporation
Word on the Street… "The world is moving to HTML5" —Steve Jobs, Apple "The Web has not seen this level of transformation, this level of acceleration, in the past ten years… we're betting big on HTML5" —Vic Gundotra, VP of Engineering, Google “If you want to do something universal, there is no question, the world is going HTML5. That is clear...The world is just pushing down this HTML5 path and so are we. —Steve Ballmer, CEO Microsoft "I had no idea there was so much HTML5 already in play" —Tim O'Reilly "HTML5’s impact on Tech Com will be bigger than DITA" 6 —Peter Lubbers © 2011 – Kaazing Corporation
HTML5 and DITA • Continue to author in DITA, but output to HTML5 and CSS3 • Replacement of tri-pane layouts of DITA OT with style-based layouts ―Users of DITA … see some clear associations of these HTML5 elements with structures in both DITA topics and DITA maps.‖ —Don Day http://learningbywrote.com/blog/2011/08/html-5-in-the-world-of-dita/ 7 © 2011 – Kaazing Corporation
#1 Job Trend 2011 ―HTML5" is the #1 job trend - the fastest growing keyword found in online job postings‖ —indeed.com (http://goo.gl/xXZVm) 8 © 2011 – Kaazing Corporation
What is HTML5? • The new major milestone for HTML • Focused on Web Applications • Web apps are rapidly becoming first class apps, on par with desktop and native apps • Different definitions 9 © 2011 – Kaazing Corporation
HTML5 Feature Areas 10 © 2011 – Kaazing Corporation
HTML5 At a Glance 11 © 2011 – Kaazing Corporation
Why HTML5? 5 Reasons why you should care! 12 © 2011 – Kaazing Corporation
1) HTML5 Paves the Cow Paths • Because HTML5 takes a pragmatic approach, fixing common real-world problems 13 © 2011 – Kaazing Corporation
Paved Cow Path HTML4 <form> <input name="email" type="text"> (?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:.[a-z0- 9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[x01-x08x0bx0cx0e- crapload of x1fx21x23-x5bx5d-x7f]|[x01-x09x0bx0cx0e- x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0- validation code 9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|[(?:(?:25[0- 5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}(?:25[0-5]|2[0- 4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[x01- or extra js lib x08x0bx0cx0e-x1fx21-x5ax53-x7f]|[x01- x09x0bx0cx0e-x7f])+)]) HTML5 14 © 2011 – Kaazing Corporation <input type=email required>
2) HTML5 Simplifies Because HTML5 is, well, simpler 15 © 2011 – Kaazing Corporation
Simplified Doctype HTML4/XHTML • HTML 4.01 Strict • HTML 4.01 Transitional • HTML 4.01 Frameset • XHTML 1.0 Strict • XHTML 1.0 Transitional • XHTML 1.0 Frameset • XHTML 1.1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML5 16 © 2011 – Kaazing Corporation <!DOCTYPE html>
Simplified Character Set HTML4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> HTML5 <meta charset=utf-8> 17 © 2011 – Kaazing Corporation
Simplified Markup HTML5 <!DOCTYPE html> DOM <meta charset=utf-8> <title>HTML5</title> <h1>HTML5!</h1> 18 © 2011 – Kaazing Corporation
Simplified Markup 19 © 2011 – Kaazing Corporation
3) HTML5 is Universal • Because HTML5 works in all languages and accessibility is built in from the ground up 20 © 2011 – Kaazing Corporation
Universal Access • Support for all world languages • For example, the new <ruby> element • Accessibility • Semantic markup • WebVTT <video controls WEBVTT preload="metadata"> <source src="rocpoc.mp4"> 1 <track label="English" 00:00:01,000 --> 00:00:03,050 What do I think about HTML 5?... kind="subtitles" src="subtitles_en.vtt”> 2 </video> 00:00:04,000 --> 00:00:07,100 It’s pretty sweet. I just hope that people use the new features http://html5videoguide.net/presentations/WebVTT thoughtfully. 21 © 2011 – Kaazing Corporation
4) HTML5 Means Less Plugins • Because HTML5 provides native support for many features that were possible only with plugins or complex hacks (audio/video, drawing, so ckets) 22 © 2011 – Kaazing Corporation
Plugins are on the way out • Built-in is better than bolt-on —@brucel • Plugins may not be installed (for long) • Plugins can be an attack vector (Proxy poisoning) • ―Whenever a Mac crashes, more often that not is because of Flash‖ —Steve Jobs http://goo.gl/mzFjM 23 © 2011 – Kaazing Corporation http://www.infoq.com/news/2011/09/Metro-Plug-ins
5) HTML5 is Secure by Default • HTML5 uses origin-based security • Defines secure cross-origin sharing • Issues in HTML5 are fixed quickly http://enable-cors.org/ 24 © 2011 – Kaazing Corporation
Semantic Markup & Microdata 25 © 2011 – Kaazing Corporation
New HTML5 Elements Layout (semantics) Multimedia Other article section audio, video command, menu* aside nav source embed figure figcaption header footer Graphics Forms details summary canvas datalist wbr hgroup svg progress time mark output meter ruby, rp, rt keygen * menu redefined from HTML 4 26 © 2011 – Kaazing Corporation dev.w3.org/html5/markup/elements.html
Obsolete Elements Presentational Frames Other basefont frame acronym big frameset applet center noframes isindex font strike tt 27 © 2011 – Kaazing Corporation http://www.w3.org/TR/html5-diff/#obsolete-elements
Semantic Markup Benefits • Based on research (Opera, Google studies on commonly used div class and id names) • Cleaner, less verbose markup (replace div and span elements with meaningful elements) • Machine readable: • Search engines • Syndication • Linking and sharing 28 © 2011 – Kaazing Corporation
Semantic Markup 29 © 2011 – Kaazing Corporation
Moving to Structural/Semantic Markup nav 1. Identify functional areas / use structural tags 2. Separate content from presentation • Move styles to CSS file section • Use a reset stylesheet • Consider a grid system for layout 3. Consider alternate article layouts (e.g. mobile) footer + nav 30 © 2011 – Kaazing Corporation
Details Element HTML <!-- Progressive Information Disclosure --> <details> <summary>What are my download options?</summary> <ul> <li><strong>Base:</strong> Contains a minimal download...</li> <li><strong>Full:</strong> Contains the Base download plus documentation and demos.</li> </ul> </details> 31 © 2011 – Kaazing Corporation
Progressive Info. Disclosure 32 © 2011 – Kaazing Corporation http://tech.kaazing.com/documentation/html5/3.3/setup-guide.html
Valid HTML vs. Valid XHTML • So you created XHTML… • But did you know that: • Over 90% of XHTML is delivered with the text/html • Delivering XHTML as application/xhtml+xml is risky (not supported in old IE) • Instead, use HTML5 and create valid HTML • http://html5.validator.nu/ and http://validator.w3.org • HTML5 allows XML syntax from XHTML 1.0 for backward compatibility 33 © 2011 – Kaazing Corporation
Microdata • Emphasis on machine readability • SEO advantages • Use Microdata embed machine-readable data in HTML documents • Easy-to-write syntax (add to any element) • Compatible with other data formats such as RDF and JSON • Use microdata vocabularies: http://data-vocabulary.org 34 © 2011 – Kaazing Corporation
HTML5 Microdata Example HTML <section itemscope> <article id="html5-fast-track" itemtype="http://data-vocabulary.org/Product"> <header> <h1 itemprop="name”>HTML5 Fast Track</h1> </header> <p itemprop="description">The HTML5 Fast Track training course is a two day experience... </p> </article> </section> 35 © 2011 – Kaazing Corporation
Microdata Testing 36 © 2011 – Kaazing Corporation http://www.google.com/webmasters/tools/richsnippets
HTML5 Forms • New form functionality: • No JavaScript required • Native date and color pickers • Search, e-mail, web address • Client side validation • Spin boxes and sliders • Features degrade gracefully (unknown input types are treated as text) • Benefits: • Virtual keyboard support • Native widgets and error messages are internationalized 37 © 2011 – Kaazing Corporation
Example HTML5 Form HTML <form> <p><label for="phone">Telephone number:</label> <input type=tel placeholder="(xxx) xxx-xxx" required></p> <p><label for="emailaddress">E-mail address:</label> <input id="emailaddress" name="emailaddress" type=email required></p> <p><label for="dob">DOB:</label><input id="dob” name="dob” type=date value=1944-06-06 max=1992-05-01></p> <p><label for="color">Shirt Color:</label> <input id="color" name="color" type="color"></p> 38 © 2011 – Kaazing Corporation
New Input Types Date picker 39 © 2011 – Kaazing Corporation Color picker
CSS3 40 © 2011 – Kaazing Corporation
CSS Level 3 • Modularized for easier browser uptake • Almost 50 modules (readiness varies) • Use browser-specific prefixes until finalized • Dramaticallyimproves performance • Examples: • Border radius (rounded corners) without images • Gradients • Multi-column layout • Transformations and transitions • Web Fonts • Media Queries 41 © 2011 – Kaazing Corporation
Rounded corners CSS a:hoverimg { border-radius: 10px; border: 2px solid #F47D31; -webkit-transform: scale(1.05); } 42 © 2011 – Kaazing Corporation
Web Fonts HTML <html> <head> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> <style> h1 { font-family: 'Tangerine', serif; font-size: 48px; } </style> </head> <body><h1>Making the Web Beautiful!</h1></body> http://code.google.com/apis/webfonts/docs/getting_started.html#Quick_Start 43 © 2011 – Kaazing Corporation
Media Queries CSS /* Media-specific sections of stylesheet */ @media all and (orientation:landscape) { /* e.g. rotated smartphone */ } @media screen and (max-device-width: 480px) { /* small screen */ } @media print { /* drop navigation elements that make no sense on paper */ nav { visibility:hidden; } } 44 © 2011 – Kaazing Corporation
Responsive Web Design http://www.boston.com/bostonglobe/features/ 45 © 2011 – Kaazing Corporation
Multimedia 46 © 2011 – Kaazing Corporation
HTML5 Audio and Video • New HTML5 media elements • <audio> and <video> • Native audio and video (no plugins required) • Programmable with JavaScript • Style with CSS • Add videos and audio as if it was an image • Codec support varies, but multiple source elements and fallback content can be used • Complete JavaScript API available 47 © 2011 – Kaazing Corporation
HTML5 Video Example HTML //Basic Video <video controls src=”goldrush.mp4"> A movie about HTML5 </video> // Video with additional attributes <video id="movies" controls preload="metadata" width="400px" height="300px" poster="html5.png" > <source src="goldrush.webm"> <source src="goldrush.mp4"> <track label="English" kind="subtitles" srclang="en" src="subtitles_en.vtt"> A movie by Rocky Lubbers </video> 48 © 2011 – Kaazing Corporation
Flash Video Fallback 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> 49 © 2011 – Kaazing Corporation
WebVTT (Video Accessibility) 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. 50 © 2011 – Kaazing Corporation
Video API 51 © 2011 – Kaazing Corporation http://www.w3.org/2010/05/video/mediaevents.html
Graphics and 3D 52 © 2011 – Kaazing Corporation
HTML5 Canvas and SVG • Provide native drawing functionality • Previously possible only with plugins (Flash, Silverlight) • Completely integrated into HTML5 documents (part of DOM) • Can be styled with CSS • Can be controlled with JavaScript • Use for animation, charts, images, pixel manipulation, and so on • Canvas supports 2D and 3D (WebGL) • Will impact animated graphics and diagrams soon (use libraries) 53 © 2011 – Kaazing Corporation
Canvas Animation 54 © 2011 – Kaazing Corporation Demo courtesy Gary Davis, AniWorx
SVG "Scalable" Vector Graphics (not bitmaps) http://www.croczilla.com/bits_and_pieces/svg/samples/tiger/tiger.svg 55 © 2011 – Kaazing Corporation
SVG Libraries 56 © 2011 – Kaazing Corporation http://mbostock.github.com/d3/
Device Access 57 © 2011 – Kaazing Corporation
Speech Input 58 © 2011 – Kaazing Corporation http://slides.html5rocks.com/#speech-input
Accelerometer/WebSocket 59 © 2011 – Kaazing Corporation http://demo.kaazing.com/racer/
Device Orientation Demo: http://slides.html5rocks.com/#slide- orientation Image: http://idisk.mac.com/han.solo-Public/Canvas/SteelSeries/Radial.html 60 © 2011 – Kaazing Corporation
Offline and Storage 61 © 2011 – Kaazing Corporation
Offline Web Applications • Use complete web sites (documentation sets) in offline mode • Cache pages that have not been visited yet • Browsers cache data in an Application Cache • HTML5 allows online and offline detection • Allows prefetching of site resources (can speed up pages) • Simple manifest mechanism 62 © 2011 – Kaazing Corporation
Example appcache File appcache File CACHE MANIFEST # manifest version 1.0.1 # Files to cache index.html cache.html html5.css image1.jpg img/foo.gif http://www.example.com/styles.css # Use from network if available NETWORK: network.html # Fallback content FALLBACK: / fallback.html 63 © 2011 – Kaazing Corporation
Example manifest Attribute • Reference the manifest file: • Use .appcache extension (*.manifest also allowed) • Add as attribute to HTML element HTML <!DOCTYPE html> <html manifest="offline.appcache"> <head> <title>HTML5 Application Cache Rocks!</title> 64 © 2011 – Kaazing Corporation http://appcachefacts.info/
The 2012 HTML5 Toolbox 65 © 2011 – Kaazing Corporation
Browser Support • Modern browsers (incl. mobile) already support a lot of features, : • http://html5test.com • Support varies widely for different features • IE 6,7 and 8: minimal support • Use support matrices: • http://caniuse.com • http://mobilehtml5.org 66 © 2011 – Kaazing Corporation http://paulirish.com/2010/high-res-browser-icons
Browser Developer Tools Browser Built-In Tool Mac Shortcut Windows Shortcut Chrome Developer Tools Command + CTRL + Shift + J Option + J Firefox Firebug F12 F12 Opera Dragonfly Command + CTRL + Shift + I Option + I Safari Web Inspector Command + CTRL + Alt + I Option + I Internet Explorer Developer Tools F12 67 © 2011 – Kaazing Corporation
HTML5 Boilerplate • The best way to get started http://html5boilerplate.com 68 © 2011 – Kaazing Corporation
Modernizr • Part of H5BP • Download or create a custom build • Use Modernizr.load to test for feature support Javascript Modernizr.load({ test: Modernizr.websocket, yep : ’websocket.js', nope: ’kz-websocket-polyfill.js' }); 69 © 2011 – Kaazing Corporation http://www.sfhtml5.org/events/28458331
Polyfills and Emulation • Feature detect with Modernizr (part of H5BP): http://www.modernizr.com • Complete polyfill list: https://github.com/Modernizr/Modernizr/wiki/HT ML5-Cross-browser-Polyfills 70 © 2011 – Kaazing Corporation
Chrome Frame • The Ultimate polyfill • Embed Chrome in IE • No admin privileges needed to install HTML <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame <meta http-equiv="X-UA-Compatible“ content="IE=edge,chrome=1”> 71 © 2011 – Kaazing Corporation http://code.google.com/chrome/chromeframe/
Mobile Boilerplate 72 © 2011 – Kaazing Corporation http://html5boilerplate.com/mobile/
320 and up 73 © 2011 – Kaazing Corporation http://stuffandnonsense.co.uk/projects/320andup
Opera Mobile Emulator 74 © 2011 – Kaazing Corporation http://www.opera.com/developer/tools/mobile/
Ripple Mobile Emulator 75 © 2011 – Kaazing Corporation http://ripple.tinyhippos.com/download
Questions? • Now or Later • E-mail: peter.lubbers@kaazing.com • Twitter: @peterlubbers • LinkedIn: Peter Lubbers 76 © 2011 – Kaazing Corporation
Buy the Book! • Pro HTML5 Programming (Apress, 2011) • 50% off e-book coupon code: HTL528 http://goo.gl/4RmFk 77 © 2011 – Kaazing Corporation
Get Trained! • Proven, practical worldwide HTML5 Training (training from experts, not just trainers): • E-mail us: training@kaazing.com • Web site: http://kaazing.com/training/ 78 © 2011 – Kaazing Corporation
SF HTML5 User Group • Free • Great monthly events with top speakers • Video-taped • Twitter: @sfhtml5 • Sign up today: www.sfhtml5.org 79 © 2011 – Kaazing Corporation The HTML5 logo is attributed to the W3C. http://www.w3.org/html/logo/
Other Great Resources • HTML5 Weekly (weekly newsletter): http://html5weekly.com/ • The Web Ahead (5x5 Podcast): http://5by5.tv/webahead/ 80 © 2011 – Kaazing Corporation
Elements Overview http://html5doctor.com/element-index/ 81 © 2011 – Kaazing Corporation
Who is Developing HTML5? • Web Hypertext Application Technology Working Group (WHATWG) http://www.whatwg.org/specs/web-apps/current-work/ • World Wide Web Consortium (W3C) http://dev.w3.org/html5/spec/Overview.html • Internet Engineering Task Force (IETF) http://tools.ietf.org/html/draft-hixie-thewebsocketprotocol 82 © 2011 – Kaazing Corporation
83 © 2011 – Kaazing Corporation

Recommended

Javascript
JavascriptJavascript
Javascriptmussawir20
 
Javascript
JavascriptJavascript
JavascriptMomentum Design Lab
 
CSS Basics
CSS BasicsCSS Basics
CSS BasicsSanjeev Kumar
 
Bootstrap 5 ppt
Bootstrap 5 pptBootstrap 5 ppt
Bootstrap 5 pptMallikarjuna G D
 
Bootstrap ppt
Bootstrap pptBootstrap ppt
Bootstrap pptIshtdeep Hora
 
Html 5 Features And Benefits
Html 5 Features And Benefits Html 5 Features And Benefits
Html 5 Features And Benefits Software Engineering
 
HTML5
HTML5HTML5
HTML5Hatem Mahmoud
 
CSS
CSSCSS
CSSVladimir Zhidal
 

More Related Content

What's hot

JavaScript & Dom Manipulation
JavaScript & Dom ManipulationJavaScript & Dom Manipulation
JavaScript & Dom ManipulationMohammed Arif
 
HTML Semantic Elements
HTML Semantic ElementsHTML Semantic Elements
HTML Semantic ElementsReema
 
JavaScript - Chapter 11 - Events
JavaScript - Chapter 11 - Events JavaScript - Chapter 11 - Events
JavaScript - Chapter 11 - Events WebStackAcademy
 
Html,javascript & css
Html,javascript & cssHtml,javascript & css
Html,javascript & cssPredhin Sapru
 
Presentation of bootstrap
Presentation of bootstrapPresentation of bootstrap
Presentation of bootstrap1amitgupta
 
HTML and CSS crash course!
HTML and CSS crash course!HTML and CSS crash course!
HTML and CSS crash course!Ana Cidre
 
Html5 tutorial for beginners
Html5 tutorial for beginnersHtml5 tutorial for beginners
Html5 tutorial for beginnersSingsys Pte Ltd
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS PresentationShawn Calvert
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basicsEliran Eliassy
 
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSAbout Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSNaga Harish M
 

What's hot (20)

JavaScript & Dom Manipulation
JavaScript & Dom ManipulationJavaScript & Dom Manipulation
JavaScript & Dom Manipulation
 
Bootstrap 5 basic
Bootstrap 5 basicBootstrap 5 basic
Bootstrap 5 basic
 
HTML Semantic Elements
HTML Semantic ElementsHTML Semantic Elements
HTML Semantic Elements
 
JavaScript - Chapter 11 - Events
JavaScript - Chapter 11 - Events JavaScript - Chapter 11 - Events
JavaScript - Chapter 11 - Events
 
Html,javascript & css
Html,javascript & cssHtml,javascript & css
Html,javascript & css
 
jQuery
jQueryjQuery
jQuery
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
 
Laravel overview
Laravel overviewLaravel overview
Laravel overview
 
Javascript basics
Javascript basicsJavascript basics
Javascript basics
 
Presentation of bootstrap
Presentation of bootstrapPresentation of bootstrap
Presentation of bootstrap
 
Introduction to Angularjs
Introduction to AngularjsIntroduction to Angularjs
Introduction to Angularjs
 
HTML and CSS crash course!
HTML and CSS crash course!HTML and CSS crash course!
HTML and CSS crash course!
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Html5 tutorial for beginners
Html5 tutorial for beginnersHtml5 tutorial for beginners
Html5 tutorial for beginners
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
 
Javascript 101
Javascript 101Javascript 101
Javascript 101
 
Reactjs
ReactjsReactjs
Reactjs
 
jQuery
jQueryjQuery
jQuery
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
 
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSAbout Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JS
 

Viewers also liked

HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)Peter Lubbers
 
HTML5 for PHP Developers - IPC
HTML5 for PHP Developers - IPCHTML5 for PHP Developers - IPC
HTML5 for PHP Developers - IPCMayflower GmbH
 
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the WebHTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the WebRobin Hawkes
 
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]Aaron Gustafson
 
Web Visions PDX '12: Applying Behavior Design
Web Visions PDX '12: Applying Behavior DesignWeb Visions PDX '12: Applying Behavior Design
Web Visions PDX '12: Applying Behavior DesignChris Risdon
 
HTML5 JavaScript APIs
HTML5 JavaScript APIsHTML5 JavaScript APIs
HTML5 JavaScript APIsRemy Sharp
 
An Introduction To HTML5
An Introduction To HTML5An Introduction To HTML5
An Introduction To HTML5Robert Nyman
 
HTML presentation for beginners
HTML presentation for beginnersHTML presentation for beginners
HTML presentation for beginnersjeroenvdmeer
 
Social media means business
Social media means businessSocial media means business
Social media means businessIan Lurie
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTMLMayaLisa
 
Your Speech is Toxic
Your Speech is ToxicYour Speech is Toxic
Your Speech is ToxicChiara Ojeda
 
Building Rich Mobile Apps with HTML5, CSS3 and JavaScript
Building Rich Mobile Apps with HTML5, CSS3 and JavaScriptBuilding Rich Mobile Apps with HTML5, CSS3 and JavaScript
Building Rich Mobile Apps with HTML5, CSS3 and JavaScriptSencha
 
Super презентация Super Маркетинга ДСУД Ланит
Super презентация Super Маркетинга ДСУД ЛанитSuper презентация Super Маркетинга ДСУД Ланит
Super презентация Super Маркетинга ДСУД ЛанитAlexey Fitiskin
 
Sql Server execution plans
Sql Server execution plansSql Server execution plans
Sql Server execution plansFlorin Cardasim
 
課程名稱：八屏一雲時代來臨 教你HTML5六小時打通(1)
課程名稱：八屏一雲時代來臨 教你HTML5六小時打通(1)課程名稱：八屏一雲時代來臨 教你HTML5六小時打通(1)
課程名稱：八屏一雲時代來臨 教你HTML5六小時打通(1)Jollen Chen
 

Viewers also liked (20)

Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 
HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)
 
Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
 
HTML5 for PHP Developers - IPC
HTML5 for PHP Developers - IPCHTML5 for PHP Developers - IPC
HTML5 for PHP Developers - IPC
 
html5.ppt
html5.ppthtml5.ppt
html5.ppt
 
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the WebHTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
 
HTML5 on mobile
HTML5 on mobileHTML5 on mobile
HTML5 on mobile
 
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
 
Web Visions PDX '12: Applying Behavior Design
Web Visions PDX '12: Applying Behavior DesignWeb Visions PDX '12: Applying Behavior Design
Web Visions PDX '12: Applying Behavior Design
 
HTML5 JavaScript APIs
HTML5 JavaScript APIsHTML5 JavaScript APIs
HTML5 JavaScript APIs
 
An Introduction To HTML5
An Introduction To HTML5An Introduction To HTML5
An Introduction To HTML5
 
HTML presentation for beginners
HTML presentation for beginnersHTML presentation for beginners
HTML presentation for beginners
 
Social media means business
Social media means businessSocial media means business
Social media means business
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Your Speech is Toxic
Your Speech is ToxicYour Speech is Toxic
Your Speech is Toxic
 
Building Rich Mobile Apps with HTML5, CSS3 and JavaScript
Building Rich Mobile Apps with HTML5, CSS3 and JavaScriptBuilding Rich Mobile Apps with HTML5, CSS3 and JavaScript
Building Rich Mobile Apps with HTML5, CSS3 and JavaScript
 
Super презентация Super Маркетинга ДСУД Ланит
Super презентация Super Маркетинга ДСУД ЛанитSuper презентация Super Маркетинга ДСУД Ланит
Super презентация Super Маркетинга ДСУД Ланит
 
D drops
D drops D drops
D drops
 
Sql Server execution plans
Sql Server execution plansSql Server execution plans
Sql Server execution plans
 
課程名稱：八屏一雲時代來臨 教你HTML5六小時打通(1)
課程名稱：八屏一雲時代來臨 教你HTML5六小時打通(1)課程名稱：八屏一雲時代來臨 教你HTML5六小時打通(1)
課程名稱：八屏一雲時代來臨 教你HTML5六小時打通(1)
 

Similar to Getting Started with HTML5 in Tech Com (STC 2012)

HTML5 Overview (Silicon Valley User Group)
HTML5 Overview (Silicon Valley User Group)HTML5 Overview (Silicon Valley User Group)
HTML5 Overview (Silicon Valley User Group)robinzimmermann
 
HTML5 Real Time and WebSocket Code Lab (SFHTML5, GTUGSF)
HTML5 Real Time and WebSocket Code Lab (SFHTML5, GTUGSF)HTML5 Real Time and WebSocket Code Lab (SFHTML5, GTUGSF)
HTML5 Real Time and WebSocket Code Lab (SFHTML5, GTUGSF)Peter Lubbers
 
Html5 today
Html5 todayHtml5 today
Html5 todayRoy Yu
 
Koubei banquet 30
Koubei banquet 30Koubei banquet 30
Koubei banquet 30Koubei UED
 
夜宴30期《HTML5 is coming》
夜宴30期《HTML5 is coming》夜宴30期《HTML5 is coming》
夜宴30期《HTML5 is coming》Koubei Banquet
 
HTML5 Technical Executive Summary
HTML5 Technical Executive SummaryHTML5 Technical Executive Summary
HTML5 Technical Executive SummaryGilad Khen
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるSadaaki HIRAI
 
HTML5 WebSocket Introduction
HTML5 WebSocket IntroductionHTML5 WebSocket Introduction
HTML5 WebSocket IntroductionMarcelo Jabali
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebGeorge Kanellopoulos
 
IBM - Developing portlets using Script portlet in WP 8001
IBM - Developing portlets using Script portlet in WP 8001IBM - Developing portlets using Script portlet in WP 8001
IBM - Developing portlets using Script portlet in WP 8001Vinayak Tavargeri
 

Similar to Getting Started with HTML5 in Tech Com (STC 2012) (20)

HTML5 Overview (Silicon Valley User Group)
HTML5 Overview (Silicon Valley User Group)HTML5 Overview (Silicon Valley User Group)
HTML5 Overview (Silicon Valley User Group)
 
Html5 Flyover
Html5 FlyoverHtml5 Flyover
Html5 Flyover
 
HTML5 Real Time and WebSocket Code Lab (SFHTML5, GTUGSF)
HTML5 Real Time and WebSocket Code Lab (SFHTML5, GTUGSF)HTML5 Real Time and WebSocket Code Lab (SFHTML5, GTUGSF)
HTML5 Real Time and WebSocket Code Lab (SFHTML5, GTUGSF)
 
Html 5
Html 5Html 5
Html 5
 
HTML5 and Joomla! 2.5 Template
HTML5 and Joomla! 2.5 TemplateHTML5 and Joomla! 2.5 Template
HTML5 and Joomla! 2.5 Template
 
Html5 today
Html5 todayHtml5 today
Html5 today
 
HTML 5
HTML 5HTML 5
HTML 5
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
 
HTML5
HTML5HTML5
HTML5
 
Koubei banquet 30
Koubei banquet 30Koubei banquet 30
Koubei banquet 30
 
夜宴30期《HTML5 is coming》
夜宴30期《HTML5 is coming》夜宴30期《HTML5 is coming》
夜宴30期《HTML5 is coming》
 
HTML5 Technical Executive Summary
HTML5 Technical Executive SummaryHTML5 Technical Executive Summary
HTML5 Technical Executive Summary
 
WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)
 
HTML5 in IE9
HTML5 in IE9HTML5 in IE9
HTML5 in IE9
 
Html5
Html5Html5
Html5
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
 
HTML5 WebSocket Introduction
HTML5 WebSocket IntroductionHTML5 WebSocket Introduction
HTML5 WebSocket Introduction
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWeb
 
IBM - Developing portlets using Script portlet in WP 8001
IBM - Developing portlets using Script portlet in WP 8001IBM - Developing portlets using Script portlet in WP 8001
IBM - Developing portlets using Script portlet in WP 8001
 

More from Peter Lubbers

HTML5 Real-Time and Connectivity
HTML5 Real-Time and ConnectivityHTML5 Real-Time and Connectivity
HTML5 Real-Time and ConnectivityPeter Lubbers
 
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011Peter Lubbers
 
HTML5: The Next Internet Goldrush
HTML5: The Next Internet GoldrushHTML5: The Next Internet Goldrush
HTML5: The Next Internet GoldrushPeter Lubbers
 
HTML5 WebSocket: The New Network Stack for the Web
HTML5 WebSocket: The New Network Stack for the WebHTML5 WebSocket: The New Network Stack for the Web
HTML5 WebSocket: The New Network Stack for the WebPeter Lubbers
 
Los Angeles HTML5 User Group Meeting Ask the Expert Session
Los Angeles HTML5 User Group Meeting Ask the Expert SessionLos Angeles HTML5 User Group Meeting Ask the Expert Session
Los Angeles HTML5 User Group Meeting Ask the Expert SessionPeter Lubbers
 
HTML5 Web Workers-unleashed
HTML5 Web Workers-unleashedHTML5 Web Workers-unleashed
HTML5 Web Workers-unleashedPeter Lubbers
 

More from Peter Lubbers (7)

HTML5 Real-Time and Connectivity
HTML5 Real-Time and ConnectivityHTML5 Real-Time and Connectivity
HTML5 Real-Time and Connectivity
 
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
 
High-Speed HTML5
High-Speed HTML5High-Speed HTML5
High-Speed HTML5
 
HTML5: The Next Internet Goldrush
HTML5: The Next Internet GoldrushHTML5: The Next Internet Goldrush
HTML5: The Next Internet Goldrush
 
HTML5 WebSocket: The New Network Stack for the Web
HTML5 WebSocket: The New Network Stack for the WebHTML5 WebSocket: The New Network Stack for the Web
HTML5 WebSocket: The New Network Stack for the Web
 
Los Angeles HTML5 User Group Meeting Ask the Expert Session
Los Angeles HTML5 User Group Meeting Ask the Expert SessionLos Angeles HTML5 User Group Meeting Ask the Expert Session
Los Angeles HTML5 User Group Meeting Ask the Expert Session
 
HTML5 Web Workers-unleashed
HTML5 Web Workers-unleashedHTML5 Web Workers-unleashed
HTML5 Web Workers-unleashed
 

Recently uploaded

Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesManik S Magar
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...BookNet Canada
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observabilityitnewsafrica
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxfnnc6jmgwh
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Nikki Chapple
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Jeffrey Haguewood
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney
 
Digital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentDigital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentMahmoud Rabie
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
Irene Moetsana-Moeng: Stakeholders in Cybersecurity: Collaborative Defence fo...
Irene Moetsana-Moeng: Stakeholders in Cybersecurity: Collaborative Defence fo...Irene Moetsana-Moeng: Stakeholders in Cybersecurity: Collaborative Defence fo...
Irene Moetsana-Moeng: Stakeholders in Cybersecurity: Collaborative Defence fo...itnewsafrica
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkPixlogix Infotech
 
Kuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorialKuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorialJoão Esperancinha
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFMichael Gough
 
Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Karmanjay Verma
 
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...itnewsafrica
 

Recently uploaded (20)

Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
 
Digital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentDigital Tools & AI in Career Development
Digital Tools & AI in Career Development
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
Irene Moetsana-Moeng: Stakeholders in Cybersecurity: Collaborative Defence fo...
Irene Moetsana-Moeng: Stakeholders in Cybersecurity: Collaborative Defence fo...Irene Moetsana-Moeng: Stakeholders in Cybersecurity: Collaborative Defence fo...
Irene Moetsana-Moeng: Stakeholders in Cybersecurity: Collaborative Defence fo...
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App Framework
 
Kuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorialKuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorial
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDF
 
Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#
 
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
 

Getting Started with HTML5 in Tech Com (STC 2012)

  • 1. @peterlubbers Kaazing #stc12 1 Getting Started with HTML5 © 2011 – Kaazing Corporation Illustration by Will Phillips Jr. | HTML5 Logo attributed W3C
  • 2. Your host: @peterlubbers 2 © 2011 – Kaazing Corporation
  • 3. Image @rdclark 3 © 2011 – Kaazing Corporation
  • 4. Image: @jeffreypalermo 4 © 2011 – Kaazing Corporation
  • 5. Agenda • HTML5—What and Why? • HTML5 Features #stc12 • Your HTML5 Toolkit @peterlubbers • Q&A 5 © 2011 – Kaazing Corporation
  • 6. Word on the Street… "The world is moving to HTML5" —Steve Jobs, Apple "The Web has not seen this level of transformation, this level of acceleration, in the past ten years… we're betting big on HTML5" —Vic Gundotra, VP of Engineering, Google “If you want to do something universal, there is no question, the world is going HTML5. That is clear...The world is just pushing down this HTML5 path and so are we. —Steve Ballmer, CEO Microsoft "I had no idea there was so much HTML5 already in play" —Tim O'Reilly "HTML5’s impact on Tech Com will be bigger than DITA" 6 —Peter Lubbers © 2011 – Kaazing Corporation
  • 7. HTML5 and DITA • Continue to author in DITA, but output to HTML5 and CSS3 • Replacement of tri-pane layouts of DITA OT with style-based layouts ―Users of DITA … see some clear associations of these HTML5 elements with structures in both DITA topics and DITA maps.‖ —Don Day http://learningbywrote.com/blog/2011/08/html-5-in-the-world-of-dita/ 7 © 2011 – Kaazing Corporation
  • 8. #1 Job Trend 2011 ―HTML5" is the #1 job trend - the fastest growing keyword found in online job postings‖ —indeed.com (http://goo.gl/xXZVm) 8 © 2011 – Kaazing Corporation
  • 9. What is HTML5? • The new major milestone for HTML • Focused on Web Applications • Web apps are rapidly becoming first class apps, on par with desktop and native apps • Different definitions 9 © 2011 – Kaazing Corporation
  • 10. HTML5 Feature Areas 10 © 2011 – Kaazing Corporation
  • 11. HTML5 At a Glance 11 © 2011 – Kaazing Corporation
  • 12. Why HTML5? 5 Reasons why you should care! 12 © 2011 – Kaazing Corporation
  • 13. 1) HTML5 Paves the Cow Paths • Because HTML5 takes a pragmatic approach, fixing common real-world problems 13 © 2011 – Kaazing Corporation
  • 14. Paved Cow Path HTML4 <form> <input name="email" type="text"> (?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:.[a-z0- 9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[x01-x08x0bx0cx0e- crapload of x1fx21x23-x5bx5d-x7f]|[x01-x09x0bx0cx0e- x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0- validation code 9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|[(?:(?:25[0- 5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}(?:25[0-5]|2[0- 4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[x01- or extra js lib x08x0bx0cx0e-x1fx21-x5ax53-x7f]|[x01- x09x0bx0cx0e-x7f])+)]) HTML5 14 © 2011 – Kaazing Corporation <input type=email required>
  • 15. 2) HTML5 Simplifies Because HTML5 is, well, simpler 15 © 2011 – Kaazing Corporation
  • 16. Simplified Doctype HTML4/XHTML • HTML 4.01 Strict • HTML 4.01 Transitional • HTML 4.01 Frameset • XHTML 1.0 Strict • XHTML 1.0 Transitional • XHTML 1.0 Frameset • XHTML 1.1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML5 16 © 2011 – Kaazing Corporation <!DOCTYPE html>
  • 17. Simplified Character Set HTML4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> HTML5 <meta charset=utf-8> 17 © 2011 – Kaazing Corporation
  • 18. Simplified Markup HTML5 <!DOCTYPE html> DOM <meta charset=utf-8> <title>HTML5</title> <h1>HTML5!</h1> 18 © 2011 – Kaazing Corporation
  • 19. Simplified Markup 19 © 2011 – Kaazing Corporation
  • 20. 3) HTML5 is Universal • Because HTML5 works in all languages and accessibility is built in from the ground up 20 © 2011 – Kaazing Corporation
  • 21. Universal Access • Support for all world languages • For example, the new <ruby> element • Accessibility • Semantic markup • WebVTT <video controls WEBVTT preload="metadata"> <source src="rocpoc.mp4"> 1 <track label="English" 00:00:01,000 --> 00:00:03,050 What do I think about HTML 5?... kind="subtitles" src="subtitles_en.vtt”> 2 </video> 00:00:04,000 --> 00:00:07,100 It’s pretty sweet. I just hope that people use the new features http://html5videoguide.net/presentations/WebVTT thoughtfully. 21 © 2011 – Kaazing Corporation
  • 22. 4) HTML5 Means Less Plugins • Because HTML5 provides native support for many features that were possible only with plugins or complex hacks (audio/video, drawing, so ckets) 22 © 2011 – Kaazing Corporation
  • 23. Plugins are on the way out • Built-in is better than bolt-on —@brucel • Plugins may not be installed (for long) • Plugins can be an attack vector (Proxy poisoning) • ―Whenever a Mac crashes, more often that not is because of Flash‖ —Steve Jobs http://goo.gl/mzFjM 23 © 2011 – Kaazing Corporation http://www.infoq.com/news/2011/09/Metro-Plug-ins
  • 24. 5) HTML5 is Secure by Default • HTML5 uses origin-based security • Defines secure cross-origin sharing • Issues in HTML5 are fixed quickly http://enable-cors.org/ 24 © 2011 – Kaazing Corporation
  • 25. Semantic Markup & Microdata 25 © 2011 – Kaazing Corporation
  • 26. New HTML5 Elements Layout (semantics) Multimedia Other article section audio, video command, menu* aside nav source embed figure figcaption header footer Graphics Forms details summary canvas datalist wbr hgroup svg progress time mark output meter ruby, rp, rt keygen * menu redefined from HTML 4 26 © 2011 – Kaazing Corporation dev.w3.org/html5/markup/elements.html
  • 27. Obsolete Elements Presentational Frames Other basefont frame acronym big frameset applet center noframes isindex font strike tt 27 © 2011 – Kaazing Corporation http://www.w3.org/TR/html5-diff/#obsolete-elements
  • 28. Semantic Markup Benefits • Based on research (Opera, Google studies on commonly used div class and id names) • Cleaner, less verbose markup (replace div and span elements with meaningful elements) • Machine readable: • Search engines • Syndication • Linking and sharing 28 © 2011 – Kaazing Corporation
  • 29. Semantic Markup 29 © 2011 – Kaazing Corporation
  • 30. Moving to Structural/Semantic Markup nav 1. Identify functional areas / use structural tags 2. Separate content from presentation • Move styles to CSS file section • Use a reset stylesheet • Consider a grid system for layout 3. Consider alternate article layouts (e.g. mobile) footer + nav 30 © 2011 – Kaazing Corporation
  • 31. Details Element HTML <!-- Progressive Information Disclosure --> <details> <summary>What are my download options?</summary> <ul> <li><strong>Base:</strong> Contains a minimal download...</li> <li><strong>Full:</strong> Contains the Base download plus documentation and demos.</li> </ul> </details> 31 © 2011 – Kaazing Corporation
  • 32. Progressive Info. Disclosure 32 © 2011 – Kaazing Corporation http://tech.kaazing.com/documentation/html5/3.3/setup-guide.html
  • 33. Valid HTML vs. Valid XHTML • So you created XHTML… • But did you know that: • Over 90% of XHTML is delivered with the text/html • Delivering XHTML as application/xhtml+xml is risky (not supported in old IE) • Instead, use HTML5 and create valid HTML • http://html5.validator.nu/ and http://validator.w3.org • HTML5 allows XML syntax from XHTML 1.0 for backward compatibility 33 © 2011 – Kaazing Corporation
  • 34. Microdata • Emphasis on machine readability • SEO advantages • Use Microdata embed machine-readable data in HTML documents • Easy-to-write syntax (add to any element) • Compatible with other data formats such as RDF and JSON • Use microdata vocabularies: http://data-vocabulary.org 34 © 2011 – Kaazing Corporation
  • 35. HTML5 Microdata Example HTML <section itemscope> <article id="html5-fast-track" itemtype="http://data-vocabulary.org/Product"> <header> <h1 itemprop="name”>HTML5 Fast Track</h1> </header> <p itemprop="description">The HTML5 Fast Track training course is a two day experience... </p> </article> </section> 35 © 2011 – Kaazing Corporation
  • 36. Microdata Testing 36 © 2011 – Kaazing Corporation http://www.google.com/webmasters/tools/richsnippets
  • 37. HTML5 Forms • New form functionality: • No JavaScript required • Native date and color pickers • Search, e-mail, web address • Client side validation • Spin boxes and sliders • Features degrade gracefully (unknown input types are treated as text) • Benefits: • Virtual keyboard support • Native widgets and error messages are internationalized 37 © 2011 – Kaazing Corporation
  • 38. Example HTML5 Form HTML <form> <p><label for="phone">Telephone number:</label> <input type=tel placeholder="(xxx) xxx-xxx" required></p> <p><label for="emailaddress">E-mail address:</label> <input id="emailaddress" name="emailaddress" type=email required></p> <p><label for="dob">DOB:</label><input id="dob” name="dob” type=date value=1944-06-06 max=1992-05-01></p> <p><label for="color">Shirt Color:</label> <input id="color" name="color" type="color"></p> 38 © 2011 – Kaazing Corporation
  • 39. New Input Types Date picker 39 © 2011 – Kaazing Corporation Color picker
  • 40. CSS3 40 © 2011 – Kaazing Corporation
  • 41. CSS Level 3 • Modularized for easier browser uptake • Almost 50 modules (readiness varies) • Use browser-specific prefixes until finalized • Dramaticallyimproves performance • Examples: • Border radius (rounded corners) without images • Gradients • Multi-column layout • Transformations and transitions • Web Fonts • Media Queries 41 © 2011 – Kaazing Corporation
  • 42. Rounded corners CSS a:hoverimg { border-radius: 10px; border: 2px solid #F47D31; -webkit-transform: scale(1.05); } 42 © 2011 – Kaazing Corporation
  • 43. Web Fonts HTML <html> <head> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> <style> h1 { font-family: 'Tangerine', serif; font-size: 48px; } </style> </head> <body><h1>Making the Web Beautiful!</h1></body> http://code.google.com/apis/webfonts/docs/getting_started.html#Quick_Start 43 © 2011 – Kaazing Corporation
  • 44. Media Queries CSS /* Media-specific sections of stylesheet */ @media all and (orientation:landscape) { /* e.g. rotated smartphone */ } @media screen and (max-device-width: 480px) { /* small screen */ } @media print { /* drop navigation elements that make no sense on paper */ nav { visibility:hidden; } } 44 © 2011 – Kaazing Corporation
  • 45. Responsive Web Design http://www.boston.com/bostonglobe/features/ 45 © 2011 – Kaazing Corporation
  • 46. Multimedia 46 © 2011 – Kaazing Corporation
  • 47. HTML5 Audio and Video • New HTML5 media elements • <audio> and <video> • Native audio and video (no plugins required) • Programmable with JavaScript • Style with CSS • Add videos and audio as if it was an image • Codec support varies, but multiple source elements and fallback content can be used • Complete JavaScript API available 47 © 2011 – Kaazing Corporation
  • 48. HTML5 Video Example HTML //Basic Video <video controls src=”goldrush.mp4"> A movie about HTML5 </video> // Video with additional attributes <video id="movies" controls preload="metadata" width="400px" height="300px" poster="html5.png" > <source src="goldrush.webm"> <source src="goldrush.mp4"> <track label="English" kind="subtitles" srclang="en" src="subtitles_en.vtt"> A movie by Rocky Lubbers </video> 48 © 2011 – Kaazing Corporation
  • 49. Flash Video Fallback 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> 49 © 2011 – Kaazing Corporation
  • 50. WebVTT (Video Accessibility) 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. 50 © 2011 – Kaazing Corporation
  • 51. Video API 51 © 2011 – Kaazing Corporation http://www.w3.org/2010/05/video/mediaevents.html
  • 52. Graphics and 3D 52 © 2011 – Kaazing Corporation
  • 53. HTML5 Canvas and SVG • Provide native drawing functionality • Previously possible only with plugins (Flash, Silverlight) • Completely integrated into HTML5 documents (part of DOM) • Can be styled with CSS • Can be controlled with JavaScript • Use for animation, charts, images, pixel manipulation, and so on • Canvas supports 2D and 3D (WebGL) • Will impact animated graphics and diagrams soon (use libraries) 53 © 2011 – Kaazing Corporation
  • 54. Canvas Animation 54 © 2011 – Kaazing Corporation Demo courtesy Gary Davis, AniWorx
  • 55. SVG "Scalable" Vector Graphics (not bitmaps) http://www.croczilla.com/bits_and_pieces/svg/samples/tiger/tiger.svg 55 © 2011 – Kaazing Corporation
  • 56. SVG Libraries 56 © 2011 – Kaazing Corporation http://mbostock.github.com/d3/
  • 57. Device Access 57 © 2011 – Kaazing Corporation
  • 58. Speech Input 58 © 2011 – Kaazing Corporation http://slides.html5rocks.com/#speech-input
  • 59. Accelerometer/WebSocket 59 © 2011 – Kaazing Corporation http://demo.kaazing.com/racer/
  • 60. Device Orientation Demo: http://slides.html5rocks.com/#slide- orientation Image: http://idisk.mac.com/han.solo-Public/Canvas/SteelSeries/Radial.html 60 © 2011 – Kaazing Corporation
  • 61. Offline and Storage 61 © 2011 – Kaazing Corporation
  • 62. Offline Web Applications • Use complete web sites (documentation sets) in offline mode • Cache pages that have not been visited yet • Browsers cache data in an Application Cache • HTML5 allows online and offline detection • Allows prefetching of site resources (can speed up pages) • Simple manifest mechanism 62 © 2011 – Kaazing Corporation
  • 63. Example appcache File appcache File CACHE MANIFEST # manifest version 1.0.1 # Files to cache index.html cache.html html5.css image1.jpg img/foo.gif http://www.example.com/styles.css # Use from network if available NETWORK: network.html # Fallback content FALLBACK: / fallback.html 63 © 2011 – Kaazing Corporation
  • 64. Example manifest Attribute • Reference the manifest file: • Use .appcache extension (*.manifest also allowed) • Add as attribute to HTML element HTML <!DOCTYPE html> <html manifest="offline.appcache"> <head> <title>HTML5 Application Cache Rocks!</title> 64 © 2011 – Kaazing Corporation http://appcachefacts.info/
  • 65. The 2012 HTML5 Toolbox 65 © 2011 – Kaazing Corporation
  • 66. Browser Support • Modern browsers (incl. mobile) already support a lot of features, : • http://html5test.com • Support varies widely for different features • IE 6,7 and 8: minimal support • Use support matrices: • http://caniuse.com • http://mobilehtml5.org 66 © 2011 – Kaazing Corporation http://paulirish.com/2010/high-res-browser-icons
  • 67. Browser Developer Tools Browser Built-In Tool Mac Shortcut Windows Shortcut Chrome Developer Tools Command + CTRL + Shift + J Option + J Firefox Firebug F12 F12 Opera Dragonfly Command + CTRL + Shift + I Option + I Safari Web Inspector Command + CTRL + Alt + I Option + I Internet Explorer Developer Tools F12 67 © 2011 – Kaazing Corporation
  • 68. HTML5 Boilerplate • The best way to get started http://html5boilerplate.com 68 © 2011 – Kaazing Corporation
  • 69. Modernizr • Part of H5BP • Download or create a custom build • Use Modernizr.load to test for feature support Javascript Modernizr.load({ test: Modernizr.websocket, yep : ’websocket.js', nope: ’kz-websocket-polyfill.js' }); 69 © 2011 – Kaazing Corporation http://www.sfhtml5.org/events/28458331
  • 70. Polyfills and Emulation • Feature detect with Modernizr (part of H5BP): http://www.modernizr.com • Complete polyfill list: https://github.com/Modernizr/Modernizr/wiki/HT ML5-Cross-browser-Polyfills 70 © 2011 – Kaazing Corporation
  • 71. Chrome Frame • The Ultimate polyfill • Embed Chrome in IE • No admin privileges needed to install HTML <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame <meta http-equiv="X-UA-Compatible“ content="IE=edge,chrome=1”> 71 © 2011 – Kaazing Corporation http://code.google.com/chrome/chromeframe/
  • 72. Mobile Boilerplate 72 © 2011 – Kaazing Corporation http://html5boilerplate.com/mobile/
  • 73. 320 and up 73 © 2011 – Kaazing Corporation http://stuffandnonsense.co.uk/projects/320andup
  • 74. Opera Mobile Emulator 74 © 2011 – Kaazing Corporation http://www.opera.com/developer/tools/mobile/
  • 75. Ripple Mobile Emulator 75 © 2011 – Kaazing Corporation http://ripple.tinyhippos.com/download
  • 76. Questions? • Now or Later • E-mail: peter.lubbers@kaazing.com • Twitter: @peterlubbers • LinkedIn: Peter Lubbers 76 © 2011 – Kaazing Corporation
  • 77. Buy the Book! • Pro HTML5 Programming (Apress, 2011) • 50% off e-book coupon code: HTL528 http://goo.gl/4RmFk 77 © 2011 – Kaazing Corporation
  • 78. Get Trained! • Proven, practical worldwide HTML5 Training (training from experts, not just trainers): • E-mail us: training@kaazing.com • Web site: http://kaazing.com/training/ 78 © 2011 – Kaazing Corporation
  • 79. SF HTML5 User Group • Free • Great monthly events with top speakers • Video-taped • Twitter: @sfhtml5 • Sign up today: www.sfhtml5.org 79 © 2011 – Kaazing Corporation The HTML5 logo is attributed to the W3C. http://www.w3.org/html/logo/
  • 80. Other Great Resources • HTML5 Weekly (weekly newsletter): http://html5weekly.com/ • The Web Ahead (5x5 Podcast): http://5by5.tv/webahead/ 80 © 2011 – Kaazing Corporation
  • 81. Elements Overview http://html5doctor.com/element-index/ 81 © 2011 – Kaazing Corporation
  • 82. Who is Developing HTML5? • Web Hypertext Application Technology Working Group (WHATWG) http://www.whatwg.org/specs/web-apps/current-work/ • World Wide Web Consortium (W3C) http://dev.w3.org/html5/spec/Overview.html • Internet Engineering Task Force (IETF) http://tools.ietf.org/html/draft-hixie-thewebsocketprotocol 82 © 2011 – Kaazing Corporation
  • 83. 83 © 2011 – Kaazing Corporation

Editor's Notes

  1. In this session, Peter will explain why HTML5 is going to have a tremendous impact on technical communication. He will introduce you to the most relevant HTML5 features and show you practical tools, tips, and tricks so you can start using HTML5 in your technical communication projects right away.
  2. HTML, CSS, and JS
  3. Steve Jobs says 90% browser crashes are due to FlashPlug-ins are prone to attacks
  4. Steve Jobs says 90% browser crashes are due to FlashPlug-ins are prone to attacks
  5. Open /code/canvas-svg/svg.html and zoom in to show how it doesn’t pixelate
  6. WhatWG:Founded in 2004 (by individuals working for browser vendors Apple, Mozilla, Google, and Opera)Develops HTML and APIs for web application developmentUnofficial and open collaboration of browser vendors and interested partiesW3C:Created draft of HTML5 in 2008IETF:Protocols (HTTP, WebSocket)