Internet Marketing + Digital Business Strategy

← back to all blog posts

O’Reilly Mini Tools of Change HTML5 Workshop

Friday, October 19, 2012 | Posted by to

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 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, Tylor is still teaching me new things. Lots of new things!

Ya! @tylorsherman of @denimandsteel kicks off #tocvan HTML5

Lessons Learned

1. Developer Apps, Extensions & Bookmarklets

  • Write in Plain Text. Amen! Tylor uses Sublime Text 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 Pendule 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
  • Validate your code to check for errors.
  • Be mindful of keeping your content separate from the presentation. For example <br> 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
  • <br> works in HTML 5. <br /> is used in xhtml.
  • &nbsp; 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

  • 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: Twitter 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

5. Where to Learn More (Trusted Resources)

6. 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., 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

Tylor Sherman demonstrates cool HTML5 and CSS3 examples at #tocvan
Stay in touch with Tylor Sherman

@tylorsherman on Twitter

Or hire him at Denim and Steel
Denim and Steel makes interactive products that bring together the web, mobile, social and physical world.


Monique Sherrett

Monique used to be allergic to all fish and was cured by Chinese medicine doctor Debra Gibson (not the pop singer). This is inconsequential to marketing or technology but does mean that she can attend client lunches without being picky about the menu options. See more posts by Monique Sherrett. You can also find her marketing tips on LinkedIn and Twitter.

Posted by
Filed under: | Permalink

Add a Comment

Commenting is not available in this channel entry.
We work on a mix of online marketing projects for publishers, educators, cultural and mid-size organizations.
Talk to us about what you need.