Category: HTML

Useful links: Should you?, HTML5 syntax, Cooks Source, Before and After, 30 selectors

Should Web Designers Know HTML and CSS? at Six Revisions is by Michael Tuck. It’s a fascinating discussion and he does a fair job of presenting both sides of the issue. My 2 cents: there are layers to peel back as to what exactly you mean by “web designer” but no one can be a top expert at it who doesn’t know the foundation information.

Since HTML5 takes a free-choice approach to syntax – allowing camel case, all caps, lower case, quoted attributes, unquoted attributes, and other less-than-rigorous approaches to code – 456 Berea Street offers up some suggestions for best practice in HTML5 syntax guidelines.

Kathy Gill from Wired Pen has put together a terrific timeline of the Cooks Source Magazine plagiarism scandal that rocked Facebook, Twitter, and Slashdot last week. Read and learn. Don’t skip the conclusions at the end. Eric Meyer wrote Memetic Epidemology about watching it unfold. (Eric praised a story by Edward Champion about profiting from plagiarism.)

Accessible University is a before and after accessibility discussion about a fictional university home page. Enlightening.

30 CSS Selectors you must memorize goes through some lesser known CSS syntax, tells you how to use it, where it works and shows code examples. A handout waiting to happen in your CSS classroom.

ARIA States 101

See Also: ARIA Roles 101

As part of the Web Accessibility Initiative (WAI), the 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 specifies the following:

  • Roles to describe the type of widget presented, such as “menu,” “treeitem,” “slider,” and “progressmeter”
  • Roles to describe the structure of the Web page, such as headings, regions, and tables (grids)
  • Properties to describe the state widgets are in, such as “checked” for a check box, or “haspopup” for a menu.
  • Properties to define live regions of a page that are likely to get updates (such as stock quotes), as well as an interruption policy for those updates—for example, critical updates may be presented in an alert dialog box, and incidental updates occur within the page
  • Properties for drag-and-drop that describe drag sources and drop targets
  • A way to provide keyboard navigation for the Web objects and events, such as those mentioned above

This article will focus on the third item in the list relating to states. ARIA states work now in many browsers and screen readers. When they don’t, they are harmless. The use of ARIA states goes beyond basic HTML role definitions and moves into widget and web app development. Perhaps for this reason, clear information about states is less available.

The W3C definition of state.

A state is a dynamic property expressing characteristics of an object that may change in response to user action or automated processes. States do not affect the essential nature of the object, but represent data associated with the object or user interaction possibilities.

The W3C further defines how states (and properties) are related to ARIA roles, and how states and properties differ.

The terms “states” and “properties” refer to similar features. Both provide specific information about an object, and both form part of the definition of the nature of roles. . . .  states and properties are both treated as aria-prefixed markup attributes. However, they are maintained conceptually distinct to clarify subtle differences in their meaning. One major difference is that the values of properties (such as aria-labelledby) are less likely to change throughout the application life-cycle than the values of states (such as aria-checked) which may change frequently due to user interaction.

Global States

Some states are considered global, meaning they can be applied to any element regardless of whether a role is applied to the element. These states are listed, with links going to the W3C for further information on each state.

Widget States

Attributes of widgets that require user interaction that express state are the following:

Code Examples

It is hard at this point in ARIA use/adoption to find examples of ARIA states in use. If you can point me to examples, I’d like to see them. Few people outside the W3C are trying to explain ARIA states in educational articles like this one and the examples are limited. The topic needs are great deal more explaining, in my opinion.

ARIA states can be used with forms. In this example, aria-required="true" adds information about the state the object is in.  The value “true” is an example of numerous values that can be applied to ARIA states such as “number” or “string”.

<label for="firstName">First name:</label>
<input id="firstName" type="text" aria-required="true">

Here’s another:

<li role="menuitemcheckbox" aria-checked="true">Item text</li>

Resources

ARIA Roles 101

See Also: ARIA States 101

As part of the Web Accessibility Initiative (WAI), the 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.

ARIA specifies the following:

  • Roles to describe the type of widget presented, such as “menu,” “treeitem,” “slider,” and “progressmeter”
  • Roles to describe the structure of the Web page, such as headings, regions, and tables (grids)
  • Properties to describe the state widgets are in, such as “checked” for a check box, or “haspopup” for a menu.
  • Properties to define live regions of a page that are likely to get updates (such as stock quotes), as well as an interruption policy for those updates—for example, critical updates may be presented in an alert dialog box, and incidental updates occur within the page
  • Properties for drag-and-drop that describe drag sources and drop targets
  • A way to provide keyboard navigation for the Web objects and events, such as those mentioned above

This article will look at the first two items dealing with ARIA roles.

How to use roles

As the list mentioned, roles describe widgets and structure. Structural roles are added to markup as attributes of elements. In XHTML, for example:

<div id="header" role="banner">
<div id="nav"  role="navigation">

or in HTML5

<header role="banner">
<nav role="navigation">

Roles used in ways like the preceding examples are navigation aids for machine readers and for assistive devices such as screen readers.

Roles that describe widgets are added to markup with additional information. The role in the example below identifies the element as a slider, with additional values using the aria prefix prepended to the property name. For example, in a slider widget that allows the user to select the day of the week, the values 1 – 7 indicate the days of the week. The first day of the week, number 1, is Sunday. The aria-valuemin and aria-valuemax restrict the options in the slider to 1 – 7.

<div role="slider"
aria-valuenow="1"
aria-valuemin="1" aria-valuemax="7"
aria-valuetext="Sunday"></div>

List of roles

The W3C list of roles is quoted below. Links go to further definitions of each role on the W3C site.

Roles that act as standalone user interface widgets or as part of larger, composite widgets.

Roles that act as composite user interface widgets. These roles typically act as containers that manage other, contained widgets.

Roles that describe document structures that organize content in a page.

Roles that act as navigational landmarks

Additional Resources

Guest Post: Learning Web Design – A Basic Tutorial

Here’s a guest post by Amanda at Best Rank, an Internet Marketing Company. The information is useful for an Internet Fundamentals or Basic Web Design setting.

Most people surf the net regularly for favorite websites, or search online to gather research for school and work related projects. There are websites for just about any topic one can imagine, complete with text, images, streaming video and more. Every page is created through the process of web design, a concept that is an essential building block in creating the appearance web surfers will see at a specific web address. Those sites ranking highest in popular search engines like Google and Yahoo are naturally the ones most viewers will see most often.

The basic system formats web pages is HTML, or HyperText Markup Language. Each page has code created for it, with a wide range of different markup choices that influence how a page looks to its viewers. Different sections of the page are divided into HTML elements that include opening and closing tags. Between the tags, a web designer will place the contents that will be visible to viewers. For example, sections of the site use tags such as the <body> tag, which when used with the <p> tag, creates paragraphs of information users will read.  Site graphics will be placed between the proper <img> tags.

As a web designer builds a page with HTML, they will want to consider how they would like to format text, perhaps with code that determines emphasis or elements like  headings. HTML also allows you to create ordered (numbered) and unordered (bulleted) lists for information. The creator will want to add code that will show various links users may want to click on.

Cascading style sheets (also known as CSS) are a method many use to keep appearance the same across different HTML pages. Implementing CSS code can help keep borders, text alignment, colors, fonts and more consistent, without having to constantly repeat the HTML coding on each page. Each stylesheet consists of a list of rules known as declaration blocks, with selectors that choose which HTML elements the rules apply to. Though some HTML pages will have CSS coding directly inside the HTML code , it is far more efficient to have an external CSS file. By having an external CSS file, which is referenced in the HTML code, download time can be minimized since only a single file is needed for storing style rules.

When an individual has completed the web design of a page to their liking, they will want to upload it to the Internet. This can be accomplished using an FTP, or file transfer protocol, client. Such applications assist one in transferring files to a website. The website files are transferred to the web host or server. Each website has a URL or uniform resource locator, which is more commonly known as their website address to which they will upload these files.

Different programs have been developed to assist web designers in creating sites. One of the most popular of these is Dreamweaver, which allows one to preview a website with a web browser before it is uploaded. As a person works on a visual template of their website, Dreamweaver generates the HTML code of the page. While this may make the process easier for some, many argue that there is still no substitute for learning the HTML coding itself.

About the author: This basic web design tutorial was provided by Amanda at Best Rank, an Internet Marketing Company that specializes in SEO (Search Engine Optimization) and other internet marketing strategies.

A guest post elsewhere . . .

I wrote a guest post for My Online Business Journey titled Tips for Disclosing Affiliate Links. Here’s the intro:

The FTC recently added bloggers to its guidelines about endorsements and testimonials in advertising. For bloggers this means any product review or endorsement that contains affiliate links must be treated with full disclosure.

Full disclosure is nothing more than transparency about the fact that a click on a link could potentially earn the blogger some money. It’s a simple process to provide the needed transparency, either in plain text or with a bit of information placed in the HTML for the link.

I’m experimenting with guest posts using MyBlogGuest. One post has appeared here that came from MyBlogGuest. This is my first guest post on someone else’s blog that was arranged through MyBlogGuest.

What I’m looking for with guest posting is a win-win exchange: posts here are good for readers of this blog and help the writer gain some traffic – and my posts elsewhere are good for the other blog and bring me some new readers.

Check it out: Tips for Disclosing Affiliate Links.

Useful Links: validators, keyboarding, Gmail, fake ads

The W3C has a new validator at validator.w3.org/unicorn they are calling a “unified” validator. Unified because it checks HTML (including HTML5), CSS, and RSS feeds.

The validator at validator.nu also checks HTML5, and can be set to check for ARIA roles as well.

Introduction to Keyboard Maestro from ATMac has a discount offer good through August.

Google came out with multiple account sign in yesterday. Here’s how to use it, from Demo Girl.

Fake Vintage Ads for Facebook, YouTube and Skype. Something to make you smile today.

Review: Create Stunning HTML Email that Just Works

get HTML Email at Amazon

A review by Web Teacher of Create Stunning HTML Email That Just Works (rating: 5 stars) Create Stunning HTML Email That Just Works by Mathew Patterson is from Sitepoint (2010).

I have opted in to quite a few corporate emails. They all come to my inbox in HTML. Some are more effective than others. Some get me to click through. Some I delete without even opening. This slim book talks about how to create an effective HTML email that will get clicks and will be effective.

The chapters include

  1. Why Email?
  2. Planning an Email Campaign
  3. Design for the Inbox
  4. Coding Your Emails
  5. Understanding Permission
  6. Selling Email to Your Clients

The author, Mathew Patterson, works for Campaign Monitor, and he does draw from that background. He isn’t knocking you over the head with Campaign Monitor, however, and gives credit to other email campaign services like MailChimp. What he does represent is the idea of legitimate business email as opposed to spam. He talks about how to get permission from people to opt-in, how to let people unsubscribe with ease, and the legal requirements of email campaigns. He spends quite a few pages detailing the capabilities of various email applications and explains carefully what will and won’t work in most email clients.

I was most interested in what he had to say in the chapter on coding email. No surprise, that. If you learned to make a web page 10 or 12 years ago, you are in great shape to market yourself as an email designer. If you are learning HTML now, you aren’t learning the old school coding techniques needed for email. Some of the tools of the email coder:

  • 600 pixel layout tables of one or two columns
  • presentational attributes in the code for things like cellspacing, cellpadding, bgcolor, and borders
  • inline styles for things like fonts and line-height
  • reduce reliance on images
  • always use alt text
  • caption images
  • store images permanently on your web server
  • use target="_blank" for links

In spite of the fact that some pundits have declaired email to be dead, it’s actually the most used protocol on the Internet. People who don’t do much of anything else on the Internet do use email. Companies and nonprofits rely on email for newsletters, announcements, calls to action, sales, and press releases. I think HTML email skills will be needed for a long time to come, and I think there is a niche market out there for people who can create well designed and effective email for a living.

This book opened up an educational can of worms for me. Do you think that an educational system should include the old school HTML techniques needed for effective email campaigns as a part of the curriculum? Should they be offered as a separate class or maybe a brief workshop, not a whole semester? Should the InterACT Curriculum include a module for HTML email?

Summary: A guide to the ethics and coding of HTML email.

Technorati Tags: ,