--- title: "O’Reilly Mini Tools of Change HTML5 Workshop" description: "It’s workshop day at O’Reilly Mini Tools of Change for Publishing conference in Vancouver! (And the full conference day is tomorrow if you want to come, register quickly.) Workshops running..." url: https://www.boxcarmarketing.com/oreilly-mini-tools-of-change-html5-workshop/ date: 2012-10-19 modified: 2025-10-10 author: "Monique Sherrett" image: https://www.boxcarmarketing.com/wp-content/uploads/2025/09/toc-vancouver-logo.png categories: ["Uncategorized"] type: post lang: en --- # O’Reilly Mini Tools of Change HTML5 Workshop It’s workshop day at (http://oreilly.com/minitoc-vancouver.html) conference in Vancouver! (And the full conference day is tomorrow if you want to come, register quickly.) **Workshops running concurrently this morning are: ** - HTML5 Applied with Tylor Sherman of Denim & Steel - Secrets to Ebook Publishing Success with Jim Azevedo of Smashwords I’m sitting in on the HTML5 session and even though I spend a lot of my day looking at and editing HTML code, (http://denimandsteel.com/) is still teaching me new things. Lots of new things! [!(http://farm9.staticflickr.com/8328/8103134671_7f64da51e3_n.jpg)](http://www.flickr.com/photos/somisguided/8103134671/) ## Lessons Learned **1. Developer Apps, Extensions & Bookmarklets** - Write in Plain Text. Amen! Tylor uses (http://www.sublimetext.com/2) as his text editor. (I prefer TextWrangler.) PC default is Notepad. - Remove CSS. Find an extension or bookmarklet that lets you look at a webpage without the CSS to understand more about its structure. I’m a Chrome user and found that (https://chrome.google.com/webstore/detail/pendule/gbkffbkamcejhkcaocmkdeiiccpmjfdi) is the best. **2. Define the Doctype and Use the Appropriate HTML ** - If you set the doctype to indicate html 5, then make sure you’re using all the tags and entities that are appropriate for that doctype - (http://validator.w3.org/) to check for errors. - Be mindful of keeping your content separate from the presentation. For example
is the break tag, don’t use two break tags in a row instead of using the paragraph tag because then you are mixing up your content vs. the presentation -
works in HTML 5.
is used in xhtml. -   is the non-breaking space. Using a number of these in a row to indent is bad. Define an indent in the css, again to keep separate content and presentation of that content. **3. Cool Learning Tools and Resources** - (https://thimble.webmaker.org/) from Mozilla is a cool way to type html and see a visual representation of it. The split screen is handy and you can “show hints” to see warning flags when tags aren’t closed or code is generating an error. - My new favourite: (http://twitter.github.com/bootstrap/) is a framework for web development. Download nice clean basic CSS, components, javascript and other starter docs. **4. HTML5 Has New Media and Semantic Elements** - (http://www.w3schools.com/html/html5_new_elements.asp) - [25 HTML5 Tips and Techniques](http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/) that we reviewed - Tylor reviewed a number of HTML5 examples, but I was paying attention so here’s another resource to (http://www.tripwiremagazine.com/2012/03/html5-examples-tutorials.html). **5. Where to Learn More (Trusted Resources)** - (http://diveintohtml5.info/) **6. CSS** - (http://border-radius.com) for rounded corners - (http://www.font-face.com) for issues with web typography - (http://typekit.com) for using cool fonts online - cool animations in css not javascript, eg. (http://meet.globalmechanic.com) -   - boxes with rounded corners and shadows, what?! Faster and easier ways to do this in css. **7. Concepts** - Workers: do this when you have a chance and tell me what happens - Web sockets: web is request and response, web sockets let you connect and stay connected so the web can emit events, i.e., (http://thisisourstop.com) messages display without reload, which is cool for games - Localization: Ebooks. If the user identifies they are in Vancouver, present Vancouver-based content. - Modernizer: checks if browser support for many of these elements to identify when you need a fallback. - Apps vs. HTML5 (vs epub). Consider how you can serve your audience best and make a decision based on those parameters. “PhoneGap.com is a wrapper for all this HTML5 stuff so you can include it in native applications. Embed HTML5 applications inside mobile applications.” - EPUB format is a self-contained format used for ebooks. If you peak behind the scenes, it’s just a zip file. And if you unzip it, it’s just a series of xhtml files. **8. Caveats** - Video. Provide a flash back still b/c not everything is supported. - CSS animations. Not supported in all browsers, each needs different syntax. - HTML5 in Internet Explorer 6-9, there’s a snippet of javascript to include b/c IE has quirks. ## HTML5 Presenter [!(http://farm9.staticflickr.com/8190/8103422455_f793d04595.jpg)](http://www.flickr.com/photos/somisguided/8103422455/) **Stay in touch with Tylor Sherman** [@tylorsherman](http://twitter.com/tylorsherman) on Twitter (http://github.com/tylor) (http://tylorsherman.com/) Or hire him at (http://denimandsteel.com/) Denim and Steel makes interactive products that bring together the web, mobile, social and physical world.