vdebolt, Author at Web Teacher

What are you telling students about DOCTYPES?

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?

Interactive Map of Global Warming Effects

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 CO² emissions from their smokestack. The REGIONAL SOLUTION button has general information and links about things like:

elevating energy efficiency
promoting renewable energy
reducing coal emissions
greening transportation
providing assistance to developing countries to reduce deforestation and switch to clean energy technologies

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.

Useful Links: Handy, Google+, Captioning, usability tests, CSS3 Please

One Page Apps I Actually Use from CSS Tricks has several very helpful links for designers. You may want to keep them handy.

I haven’t received an invite to Google+ yet, but I’m looking at other people’s reports on it. It’s so similar to Facebook, even though people are comparing it with Google WAVE. If you move your life to Google+, are you quitting Facebook? More importantly, are people like me – who’s job partly entails promoting stuff by social media – now going to have to add Google+ to the mix? Like Facebook, is Google+ going to be one of those things you can’t avoid just because everyone else is using it?

How to Start Adding Captions/Subtitles to Online Video. Just one article from a captioning site by Bill Creswell that is full of captioning help.

Very interesting run through some usability tests on TED.com by IntuitionHQ. TED.com makes a pretty decent score at the end of it all.

CSS3 Please is a really nice tool to generate cross-browser CSS3 rules to copy into your own stylesheets.

Technology in Education at ISTE 2011

Education and Technology folks are gathered in Phildelphia this week for the 2011 conference of the ISTE. The conference is still in progress. Early blog posts about it have been very enthusiastic. ISTE is about advancing education through innovative use of technology.

Image Credit: kjarrett.

Can you say “excited?” EduTechGeek is excited.

All I can say so far is – DANG! ISTE 2011 in Philadelphia is just packed with great energy, ideas and educators from all over the world. I’ve attended a couple of sessions on Project Based Learning and TPCK and it’s just 9AM on Monday.

Vicky Sedgewick at Teaching Technology was unable to attend, yet managed to keep an eye on the conference and put together a great summary of events based on Twitter, Plurk, the ISTE blog and live streamed video. She has some interesting video on her blog already and is a fountain of resources for keeping up from afar.

Lots of activity on the twitter stream today with the kickoff to ISTE 2011. I started my day by watching the ISTE Music Video below and checking out some of the resources posted on Live Binders by Nedra Isenberg and Scoop.it by Bonnie Feather.

Advocacy & Consulting for Education was excited about assistive technology.

It’s also exciting because so many schools are moving more toward figuring out how to incorporate technology into their classrooms every day, not to mention the use that technology has in terms of assistive devices. Many people may associate “assistive device” with a voice output device, but IDEA actually defines it much more broadly. The definitions section says that “the term ‘assistive technology device’ means any item, equipment, or product system, whether acquired commercially off the shelf, modified, or customized, that is used to increase, maintain, or improve functional capabilities of a child with a disability.”

Audrey Watters from ReadWriteWeb is there. She wrote How Consumer Technology & User-Generated Content are Changing Ed-Tech. She highlights some new apps and startups that are focused on technology for education.

The Kids and Technology blog provides a link to a beginning programming language app called Alice found at the conference.

More reports:

Creativity Unleashed: Tablet PCs and the Power of Digital Ink, a video replay
Full Video of the Opening Keynote

Were you there? What was the most exciting education technology discovery you made? (Did you write about it? Leave a link, if you did.) If you have ideas about where education is heading in our technological world, please share them.

Cross-posted at BlogHer.

Useful links: Triberr, Hidden, WebVTT

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?

Waiting for Screen Readers to Learn the Semantics of HTML5

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:

Useful links: captioning YouTube, HTML5, or not, Final Cut Pro X

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.]

Author: vdebolt