Getting Started with HTML5 in Tech Com (STC 2012)
Upcoming SlideShare
Loading in...5
×
 

Getting Started with HTML5 in Tech Com (STC 2012)

on

  • 119,089 views

Peter Lubbers' session about getting started with HTML5 for technical communicators, presented at the May 2012 STC Summit in Chicago.

Peter Lubbers' session about getting started with HTML5 for technical communicators, presented at the May 2012 STC Summit in Chicago.

Statistics

Views

Total Views
119,089
Views on SlideShare
114,753
Embed Views
4,336

Actions

Likes
90
Downloads
1,119
Comments
11

87 Embeds 4,336

http://otsblog.local 1241
http://techmaster.vn 597
http://localhost 383
http://www.scoop.it 262
http://www.conseilsmarketing.com 237
http://digiman89.wordpress.com 206
http://blog.onthespot.com 200
http://khishigee.miniih.com 124
http://esouillat.wordpress.com 121
http://www.khishigee.miniih.com 92
http://81.18.5.85 63
http://127.0.0.1 54
https://twitter.com 50
http://sbedoya1.blogspot.com.es 47
http://www.mashme.tv 45
http://blocs.xtec.cat 42
http://www.mundocruzroja.org 42
http://intranet.whitefriars.vic.edu.au 39
http://thesocialmoon.dev 33
http://www.pousadaemparaty.com 29
http://rascasse.com 28
http://blog.websourcing.fr 27
http://summit.stc.org 23
http://www.stonepower.fr 19
http://vedruna2esoclara.blogspot.com 18
http://dev.venture-lab.org 18
http://posgrado.unaed.org 17
http://us-w1.rockmelt.com 15
http://www.yuploo.com 14
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://www.mindtalk.com 10
http://tweetedtimes.com 10
http://al27910daw1.site90.net 10
https://si0.twimg.com 10
http://vedruna2esoaignacio.blogspot.com 9
http://svrbb8.javerianacali.edu.co 9
http://ihowmore.vn-tin.com 9
http://almoujez.wordpress.com 8
http://dev.effektivitet.dk 8
http://feeds.feedburner.com 8
http://gildams.blogspot.com 7
https://twimg0-a.akamaihd.net 7
http://www.yatedo.fr 6
http://staging.effektivitet.dk 6
http://37.59.36.116 6
http://sbedoya1.blogspot.com 5
More...

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

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

110 of 11 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…

110 of 11

Post Comment
Edit your comment
  • 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.
  • HTML, CSS, and JS
  • 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
  • Open /code/canvas-svg/svg.html and zoom in to show how it doesn’t pixelate
  • 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)

Getting Started with HTML5 in Tech Com (STC 2012) Getting Started with HTML5 in Tech Com (STC 2012) Presentation Transcript

  • @peterlubbers Kaazing #stc121 Getting Started with HTML5 © 2011 – Kaazing Corporation Illustration by Will Phillips Jr. | HTML5 Logo attributed W3C
  • Your host: @peterlubbers2 © 2011 – Kaazing Corporation
  • Image @rdclark3 © 2011 – Kaazing Corporation
  • Image: @jeffreypalermo4 © 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… 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
  • #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 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
  • 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.svg55 © 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 OrientationDemo: 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 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/
  • 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 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
  • 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