teaching tips Archives - Page 6 of 11

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?

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.

Why, Jane McGonigal, why?

I am just getting into Jane McGonigal’s book Reality is Broken: Why Games Make Us Better and How they Can Change the World.

Already after just a few pages I found the answer to this problem:

I call it the “Why the hell do I keep playing with her?” problem. If I could scroll through my phone for you, you would see screen after screen that looks just like this. Ladybug nearly always beats me. But I keep playing with her.

In reading McGonigal’s book, I discovered a few things about games that explain my willingness to keep losing to Ladybug. She quotes Bernard Suits, who said,

Playing a game is the voluntary attempt to overcome unnecessary obstacles.

In McGonigal’s list of how games are a fix for reality, fix #1 is,

Compared with games, reality is too easy. Games challenge us with voluntary obstacles and help us put our personal strengths to better use.

No surprise then that I’m drawn to word games, and that I’ll play even when I’m sure before I start that at least one opponent – my archenemy Ladybug – is going to beat me.

I’ve been interested in Jane McGonigal’s ideas about how games can improve the world since I heard her keynote at SXSW several years ago. I was similarly interested in Seth Priebatsch at this years SXSW.

Even though I’ve barely begun reading, I’m sure this is an important book. Check it out.

HTML/Text editor recommendations

I got this email the other day:

I have a rather odd request to ask. I am trying to learn how to write web pages for fun and maybe more down the road. At present I have several different editors to choose from, and was wondering if you could give me some advice as to which one I should use as my primary editor. I have: Dreamweaver CS4, Notpad++(sic), TopStyle Pro 4.0.0.85 and UEStudio ’10 as my potential editors. The thing is I really want to learn hand coding from the ground up. I have both of your books, Intergraded (sic) HTML and CSS and Mastering Intergraded (sic) HTML and CSS for my learning the basics. I also have PDF books on learning JavaScript and HTML5, more books than I know what to do with.

I haven’t seen anyone talking about editors on a blog for a long time. Because of that, I thought I’d give a rather lengthy answer. And a lengthy answer sounds like a blog post, does it not? Here’s how I answered the email.

Each of those tools has its own pros and cons. If you are serious about hand coding, you might find UEStudio, with its excellent HTML text editor UltraEdit as a good choice. Coupling that with TopStyle Pro for help with writing CSS and you have the basics covered.

UltraEdit beats out Notepad in my book because you have color coding, search and replace, FTP, and much more that isn’t available with Notepad.

Dreamweaver – which can be used as a text editor in Code View – adds another dimension you don’t get from other tools. If you aren’t great at typing or spelling, which your email hints might be the case, using Code View in Dreamweaver to type code is pretty typo-proof. There are many site management tools in Dreamweaver: link management, validation tools, site-wide search and replace, built in JavaScripts, FTP, CSS tools, image editing and more. Plus you have the WYSIWYG view if you want it.

Any one of these tools can get the job done. Which do you feel most comfortable working in? Which one makes the most sense to you? That one is probably the right choice for you.

I have dozens and dozens of web design books at my house, too. I’ve read them all. I’ve given away sacks and sacks of them to Freecycle folks. There are more books to come. In this field, there’s always something new, always something more to learn. Get the basic building blocks of HTML, CSS, and JavaScript under control and that gives you the foundation to build on.

Free eBook on fieldset CSS

The posts here on fieldset CSS are so popular, I decided to put them all together in one PDF file and offer it as a free download.

It’s a PDF file, so it isn’t perfect, but it does give you the information you may be looking for all in one place. If you have any problems with the PDF format, the posts are all available here on the blog. The included articles from the blog are:

Download Web Teacher on Fieldset CSS.

Here is the applicable Creative Commons license info.

How to make HTML5 semantic elements more accessible

The new semantic elements in HTML5 hold accessibility promise. Here are some of the the new elements.

header: header can be used for a page element, a section, and article, or an aside element
footer: footer can be used for a page element, a section, and article, or an aside element
article: an article is a part of a page that is complete in itself with a heading, content, footer, and possibly sections
section: a section is a a section of a page; related content can be contained in a section but it should have a heading and may contain articles with their own headings
aside: the aside is tangentially related material on a page or as part of an article
nav: navigation

Accessible Rich Internet Applications Suite (ARIA), defines a way to make Web content and Web applications more accessible. It is used to improve the accessibility of dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.

ARIA roles work now in many browsers and screen readers. When they don’t, they are harmless. If you build a page as accessibly as you can and then add ARIA roles into it where possible, you increase the potential accessibility of the page. This is currently the recommended best practice with HTML5 semantic elements.

An ARIA role is added as an attribute to the relevant element. The landmark ARIA roles are helpful with the new HTML5 semantic elements:

There are also a number of roles that describe structure on a page.

Here are a few examples of how to add the landmark role information to various elements:

<header role="banner"> <nav role="navigation"> <aside role="complementary"> <section role="main"> <footer role="contentinfo">

Some roles can only be used once per page. banner and contentinfo must be unique on a page. In other words, while you can have many header elements on a page, only one header can fill the banner role.

[Note: This post was updated on June 12, 2014.]

See also: ARIA Roles 101 and ARIA States 101.

HTML4, XHTML, HTML5 DOCTYPES: What’s a teacher to do?

Reading an excellent article at Accessible Web Design called It’s still important to talk about HTML 4 got me thinking. It was talking about beginners finding out-of-date information on the web and how we need to continue to promote best practices with current information. One point made in the article:

It’s still important to talk about older technology: it’s still relevant to write or promote articles which offer tutorials on simple tasks, like changing font color using CSS or properly forming an unordered list. The reason it’s relevant is because the internet knowledge base is polluted — those who are in control of outdated material should take responsibility for updating their information, ideally, but we don’t all have that power. The best we can do is continue to promote best practices in all areas.

Last week I was teaching a continuing ed class at UNM. The class was a basic overview of how to create and maintain a web site. Here’s what I did and why I think it was a decent compromise for the current state of the web.

They looked at the HTML 4, XHTML, and HTML5 DOCTYPES. I gave a brief overview of what each one meant and how they differed. (Very brief. This is a 12 hour continuing ed class we’re talking about. Keep that in mind.)
I told them it was okay to start using the HTML5 DOCTYPE. I think that’s safe. Browsers know what to do with it.
When they got going with HTML, I taught them HTML 4 Strict syntax. I didn’t let them use the choose-your-own-style syntax of HTML5 in their page building. I think they are a lot safer in terms of browser rendering and accessibility if they stick with a rigorous syntax model like HTML 4 Strict (or XHTML Strict).

Before I started teaching it to them that way, I hadn’t really thought much about the pedagogy of it. But the article at Accessible Web Design spurred me on a bit.

HTML5 hasn’t been implemented fully enough to be mainstream at the present time. Beginners trying to cope with new HTML5 elements with spotty implementation would have more frustration than they need when trying to learn the basics of web design. Learning something that is currently best practice, and rigorous enough to work in any situation seems like a better choice. However, using the HTML5 DOCTYPE is simply easier and will work, even if the rest of the document is formatted as HTML 4. And it eliminates the need for one of those long-winded earlier DOCTYPES.

What are other teachers doing with DOCTYPES and syntax models these days?