Getting Started with HTML5 in Tech Com (STC 2012)

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… were 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 OReilly"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

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

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>

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>

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 featureshttp://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

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

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

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

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

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

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

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

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

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 Fileappcache 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/

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 ToolsBrowser Built-In Tool Mac Shortcut Windows ShortcutChrome Developer Tools Command + CTRL + Shift + J Option + JFirefox Firebug F12 F12Opera Dragonfly Command + CTRL + Shift + I Option + ISafari Web Inspector Command + CTRL + Alt + I Option + IInternet Explorer Developer Tools F12 67 © 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/

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/

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

http://otsblog.local	1241
http://techmaster.vn	556
http://localhost	381
http://www.conseilsmarketing.com	236
http://blog.onthespot.com	200
http://digiman89.wordpress.com	122
http://khishigee.miniih.com	114
http://esouillat.wordpress.com	88
http://www.khishigee.miniih.com	82
http://81.18.5.85	63
http://127.0.0.1	54
http://sbedoya1.blogspot.com.es	47
https://twitter.com	41
http://blocs.xtec.cat	39
http://intranet.whitefriars.vic.edu.au	39
http://thesocialmoon.dev	33
http://www.pousadaemparaty.com	29
http://www.mundocruzroja.org	28
http://rascasse.com	28
http://blog.websourcing.fr	26
http://summit.stc.org	23
http://www.stonepower.fr	19
http://dev.venture-lab.org	18
http://vedruna2esoclara.blogspot.com	18
http://posgrado.unaed.org	17
http://us-w1.rockmelt.com	15
http://isobiotech.com	13
http://vedruna2esoaignacio.blogspot.com.es	12
http://vedruna2esoclara.blogspot.com.es	12
http://114.214.55.211	11
http://jabbr.net	11
http://al27910daw1.site90.net	10
http://tweetedtimes.com	10
http://www.mindtalk.com	10
https://si0.twimg.com	10
http://svrbb8.javerianacali.edu.co	9
http://ihowmore.vn-tin.com	9
http://vedruna2esoaignacio.blogspot.com	9
http://almoujez.wordpress.com	8
http://feeds.feedburner.com	8
http://dev.effektivitet.dk	8
https://twimg0-a.akamaihd.net	7
http://gildams.blogspot.com	7
http://staging.effektivitet.dk	6
http://37.59.36.116	6
http://www.yatedo.fr	6
http://anne-tercinet.blog.em-lyon.com	5
http://ci.thorogood.houseofkaizen.com	5
http://sbedoya1.blogspot.com	5
http://ask.priestley.ac.uk	4
http://www.paperblog.fr	4

Getting Started with HTML5 in Tech Com (STC 2012)

by Peter Lubbers

Accessibility

Categories

Upload Details

Usage Rights

83 Embeds 3,805

Statistics