Tips, web design book reviews, resources and observations for teaching and learning web development.
Great explanation of Document Outlines at HTML5 Doctor. Perfect resource link if you’re teaching an HTML5 class.
Google is listening to the feedback on Google+.
Google isn’t the only company listening to what users want. Sarah Kimmel is on her way to Austin to talk with Dell. If there’s something you want Dell to know, get word to Sarah.
One of the classes I’ve been teaching at UNM Continuing Ed lately is Beginning Dreamweaver. The school uses Adobe Creative Suite 4 in the lab where I teach. The DOCTYPE options in DW 4 are either transitional or strict in HTML 4/XHTML 1.0.
Outside of the UNM lab, the most recent version of DW on the market is 5.5, which includes the HTML5 DOCTYPE. If the students go out and buy a commercial version of DW, they will get 5.5 and the option to choose HTML5.
Which means, when we look at the options for creating a new page in DW, we have to include HTML5 in the discussion of which DOCTYPE to choose, even though it isn’t there in the school’s DW 4 options.
Back in March, I wrote Syntax Style for HTML 5: Some Best Practice Recommendations. To summarize that article, the syntax style most like what was recommended for HTML was similar to the syntax for HTML 4.01 Strict.
I’ve been telling students two things about DOCTYPES. First, I tell them that it doesn’t really matter which one they pick as long as they pick one, because any one they pick will keep them out of quirks mode. Dreamweaver will correctly write the HTML for what ever they choose. Secondly, I tell them that if they are thinking of using HTML5 in their future work, to choose HTML 4. That instruction always feels oddly retro – go back to an older technology and forget about dealing with the seemingly more modern XHTML.
In my mind, the seemingly more modern XHTML has two drawbacks. First, it’s been abandoned by the W3C and won’t been updated. Second, the syntax for HTML 4 Strict seems a much better choice when working in HTML 5 because there’s no need to talk about XML and trailing slashes in empty elements and other things that don’t apply to HTML5. And HTML 4 Strict syntax rules match up with what was recommended as a best practice for writing under the new anything-goes rules of HTML5.
What DOCTYPE are you telling students to use these days?
The Union of Concerned Scientists published the results of much research and data collection in an interactive map. Clicking on the various hot spots around the world map leads you to several things. You see local results of climate change, a link to an action item and a link to a solution item.
In this example, the ACTION button leads to a suggestion to write a letter to a coal fired electric generating plant in the area asking that they capture CO2 emissions from their smokestack. The REGIONAL SOLUTION button has general information and links about things like:
I know you are seeing the effects of climate change where you live. Too much rain or not enough. Changes in plants, new animals in the area or disappearing animals in the area, extreme weather events like tornadoes and hurricanes, too hot, too cold, TOO SOMETHING. The items on the list above are not just regional. They are solutions needed everywhere – now.
Want to do something patriotic for the 4th of July? Take a couple of the ACTION steps from this interactive map.
The map page, by the way, is in HTML5.
That Tech Chick has a post about a new social tool called Triberr. You might want to give it a spin to see if it increases traffic to your blog.
Hidden is a nice app for Macs. If your Mac is stolen, it sends you a location and photos of the thief.
Recent developments around WebVTT.
People have been asking me lots of questions about WebVTT (Web Video Text Tracks) recently. Questions about its technical nature such as: are the features included in WebVTT sufficient for broadcast captions including positioning and colors? Questions about its standardisation level: when is the spec officially finished and when will it move from the WHATWG to the W3C? Questions about implementation: are any browsers supporting it yet and how can I make use of it now?
There are new semantic elements in HTML5 with names like header, article, and nav. But the screen readers haven’t quite caught up with the element names yet. The most recent test results I’ve seen on how various browsers and screen readers handle the new HTML5 semantic elements can be found at Accessible Culture.
When we talk about accessibility, we stress how using the correct HTML tag to format something is accessibility Rule Number One. The reason is that most HTML tags are self-describing – the tag itself describes the semantic underpinning of the content it’s used to format. For example, tags like li and em and blockquote add meaning, semantic meaning, into the markup.
But what if the device you are using to get the content doesn’t recognize the semantics of an element like aside or section? You can add an attribute to the element that provides information that most assistive technology devices do recognize. The attributes I’m talking about describe ARIA roles. Here are a few example of new HTML5 semantic elements with ARIA roles.
<header role="banner">
<nav role="navigation">
<aside role="complementary">
<section role="main">
<footer role="contentinfo">
What are the possible ARIA roles you can use with the new HTML5 semantic elements? The most useful for the situations I’m talking about are the “landmark” roles:
Screen readers have a pretty good track record with ARIA roles. Adding them to HTML5 markup (or any version of HTML prior to HTML5 as well) adds meaningful help for people using assistive technology.
One way to fill the time before screen readers are updated to recognize the new semantic elements is to make sure you include ARIA roles in your markup.
See Also:
YouTube’s instructions on how to add captions to your video.
How is HTML5 changing web development? An interview with Remy Sharp.
Stop Obsessing over HTML5 and CSS3. Paul Boag has some ideas about what we should be thinking about instead of merely worrying about learning HTML5 and CSS3. What I want to know is does Paul – or any web educator – think topics like those he suggests need to be part of a comprehensive web education curriculum?
Microformats 2 and RFDa Collaboration references where these two are heading and includes a mention of schema.org. [See also: Modifying an hReview to include HTML from schema.org.]
A whole bunch of Amazing Stuff Pseudo Elements can Do is from CSS Tricks.
On using h1 for all heading levels in HTML5 from 446 Berea Street. This worries me, too. Happy to see Roger doing some testing on it.
Is There Still a Social Stigma for Geek Girls? What do you think?
The GOP presidential contenders had a debate last night. Mashable talks Twitter stats about it. As the election season heats up, it’s going to be interesting to watch how and what both parties try to do with the Internet and social media to help advance their causes. If Lady Gaga and Justin Bieber can be brilliant with social media, then maybe the politicos can figure it out too. I know you’re sick of hearing about Anthony Weiner, but this post about his Twitter habits at Wired Pen is pretty interesting.