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!
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.
- 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
- List of New HTML5 Elements
- 25 HTML5 Tips and Techniques that we reviewed
- Tylor reviewed a number of HTML5 examples, but I was paying attention so here’s another resource to HTML5 Examples and Tutorials.
5. Where to Learn More (Trusted Resources)
6. CSS
- border-radius.com for rounded corners
- font-face.com for issues with web typography
- typekit.com for using cool fonts online
- cool animations in css not javascript, eg. 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., 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
Stay in touch with Tylor Sherman
@tylorsherman on Twitter
Github.com/tylor
TylorSherman.com
Or hire him at Denim and Steel
Denim and Steel makes interactive products that bring together the web, mobile, social and physical world.
