Category: Dreamweaver

Double teaming at Webuquerque

Tonight’s meeting of Webuquerque will feature Emily Lewis and myself double teaming on the topics of standards, accessibility and doing it all with Dreamweaver.

I’ll put up a link to tonight’s presentation tomorrow, but for now you can check out a presentation called Achieve Accessibility with Dreamweaver that I gave way back in 2005 to the New Mexico Macromedia Users Group, which was a prequel to Webuquerque. The 2005 version of Dreamweaver lacked many of the new accessibility helps available in CS4, but the principles are still the same.

And, more importantly, the 2005 version of the talk lacked Emily, who has  a great deal to add the topic.

I’ll be bringing a copy of Adobe Dreamweaver CS4 Classroom in a Book to give away with the other schwag.

Hope to see you there.

My Best Sellers

What’s hot on eHow? Find out what my best sellers are. More . . .

Here are some of the best sellers I’ve written . . . on eHow, that is.

Best sellers on eHow means that an article gets a lot of page views. I try to write quality articles there that give helpful information on a number of Internet and Web Development topics, but I never know what will be a big hit. Here are some of my big hits.

On Dreamweaver

On general topics

On CSS or HTML

On Free Web Building Tools

On Writing

Using Dreamweaver to add labels to forms

Web Teacher tip on how to use form labels in Dreamweaver.

There are still people out there who are convinced that Adobe Dreamweaver can’t create an accessible or standards-compliant web site. Well, it can. You do have to know what an accessible site is, and you do have to use the tools (in this case, Dreamweaver) properly. After that, you will be completely able to create accessible and standards-based work in Dreamweaver.

One aspect of accessibility is the proper use of the label element with form fields. Dreamweaver makes that very easy to do.

Starting with Dreamweaver CS4, all the accessibility preferences are on by default. If you are using Dreamweaver CS3 or older, you have to go to Preferences and turn them on. Select the Accessibility category on the left.

Make sure every field is checked, not only the one for Form objects. Use best practices at all times and you’ll be accessible.

On a document in Dreamweaver, insert a form element. You’ll see this dialog.

form dialog

Here you enter the ID and the label text. Select Attach label using ‘for’ attribute for the majority of form elements. Dreamweaver will give the ‘for’ attribute the same value as the value you enter for the ID. Form controls like Submit or Reset buttons need no label because the element itself is the label.

Next, decide whether to place the label text before or after the form element. For input elements such as text boxes, the label normally should go before the form element. For radio buttons and checkboxes, the label should go after the form element. Although the dialog has access key and tab index options, I suggest you leave them blank. These have proven over time to be more of a hindrance than a help.

Click OK and you have an accessible form element with a label.

Related article: Styling the label element with CSS

An RDFa extension for Dreamweaver

Sitepoint got a scoop on announcing Fast Publishing of RDFa with Dreamweaver.

Martin McEvoy has just released the RDFa Documents extension which will (soon) be available via Adobe Exchange once approved. For now you can grab it directly from Martin’s site: v0.1.

I installed the v0.1 extension. The Sitepoint article gives an overview of what it can do. Here’s what I’ve learned about it.

You may recall my  my request for an RDFa feature in Dreamweaver. (See Dear Adobe, Here’s an Idea for You.) What I was hoping for was a pulldown list of the DC properties that could be applied to tags. This extension supposedly has a tag library, but I don’t see it.

What you can do is create the DOCTYPE you need in Dreamweaver. In the File > Convert menu, you now have this option.

That creates the following in Dreamweaver:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

The real question, however, is what kind of code hints do you get for adding Dublin Core meta data to tags. The article at Sitepoint made it sound like there were RDFa code  hints for various tags. I don’t see that in the v.01 version that I tried. Here’s an example. What if I want to add  property="dc:title" to an <h1> or <h2> element? Here are the code hints for a heading element in Code View with the extension installed:

code hints for an h1 element

The long list of hints for an h1 includes nothing to encourage the use of RDFa meta data.

I don’t think Sitepoint made up the statement that there would be a tag library. But it isn’t found in the code hints. Here’s the information about the extension from the Extension Manager.

the Extension Manager description

You see a reference to the fact that the extension contains an HTML TagLibrary with RDFa attributes.  My problem is, where is that TagLibrary? Is it not yet available in v.01? Will be there when the extension is uploaded to the Adobe Exchange?

I’m really excited about this Dreamweaver extension. I think it answers a need. But I’m not seeing an effective way to make use of it at this point.

Useful Links: JavaScript curriculum, Avatars, Dreamweaver extension makers

Opera adds core competencies in JavaScript to its curriculum, avatars matter, and a search for the perfect Dreamweaver extension maker. More. . .
More . . .

JavaScript in Town! announces new articles in the Opera Web Standards Curriculum with 13 new articles on the core competencies for JavaScript. Opera also announced the final CSS article in the CSS track of their curriculum.

Why Your Avatar Matters from Hivelogic gives you some ideas about the importance of your avatars. Hivelogic didn’t say this, but I must add, don’t change your avatar all the time. Be consistent.

In comments on  the post Dear Adobe, Here’s an idea for you, it was mentioned that the best way to introduce new capabilities like what I suggested for RDFa was via the Dreamweaver extension route. I thought of Project Seven, but learned that they aren’t particularly interested in building a tool for this. I started looking for other Dreamweaver extension makers. I found Hot Dreamweaver and Kaosweaver in a quick search, but I don’t know if this idea would appeal to them. Are there other Dreamweaver extension gurus out there that I don’t know about who might think this is a good idea? If you know of any, please leave a name and a link to the website.

Dear Adobe, Here’s an idea for you

Dreamweaver and RDFa. Can they be friends? More. . .

Dear Adobe,

I know you’ve been learning about RDFa (Resource Description Framework). You guys pay attention. I’d love it if the folks working on Dreamweaver could add some RDFa support to the next version of Dreamweaver.

Here’s my vision of this. The already existing metadata developed by The Dublin Core Metadata Initiative could simply be added as a menu, perhaps a new DC menu. Using that menu, a developer could quickly select from a list of existing properties and insert them in semantically appropriate locations on a web page.

Here’s an example of some RDFa code from the W3C:

<div xmlns:dc="http://purl.org/dc/elements/1.1/">
<h2 property="dc:title">The trouble with Bob</h2>
<h3 property="dc:creator">Alice</h3>
...
</div>

Wouldn’t it be lovely if a busy front end developer using Dreamweaver could just grab the xmlns or one of the dc properties from a menu and apply it to the proper semantic element?

The other day I heard  Michael (TM) Smith say,

Semantic markup is markup that encodes meaning into content. Semantic markup transforms a document into an information source. The information becomes usable in unanticipated ways when the structure is reusable.

I know that the hand coders and the standardistas out here in web page land will take to RDF without your help. But what about Adobe’s core user group? Don’t those developers need to be describing their data with machine-readable structured meta data, too?

I  hope you will give the idea some consideration.

Sincerely,
Dreamweaver’s  biggest fan,
Virginia

Useful Links: Internet safety, jQuery, Obama and Tech

A important report on Internet safety, a new tutorial on jQuery use in Dreamweaver, and a look at President Obama’s plans for technology. More . . .

Internet Safety Technical Task Force Report from apophenia is important information for educators, parents, and policy makers. Please read it.

Moving Pictures: a jQuery Accordion Tutorial Greg Rewls explains how to use Dreamweaver CS4 with a jQuery Accordion Widget from the Dreamweaver exchange to create an image menu that slides accordion-style.

How Obama Will Use Web Technology at Tech Crunch examines what we can expect technologically from the new administration.

The new media team has identified three top priorities of the new administration – communication, transparency and participation. Let’s examine how the new administration has been leveraging web technologies to meet these priorities.

One of the most interesting changes at change.gov is that all the content is now available to the public under a Creative Commons license.