Free Xenon Consulting » Web Standards http://www.freexenon.com PSD or Image to Site with Accessibility Built In Mon, 17 May 2010 15:59:18 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 More HTML5 Resources http://www.freexenon.com/2009/11/10/more-html5-resources/ http://www.freexenon.com/2009/11/10/more-html5-resources/#comments Tue, 10 Nov 2009 14:55:42 +0000 FreeXenon http://www.freexenon.com/?p=297
  • Dive into HTML5 (by Mark Pilgrim)
  • Making your site html5 ready pt1/the time is now (by onderhond)
  • How to get HTML5 working in IE and Firefox-2 (@ HTML Doctor)
  • HTML5 Shiv (@ Google Code to get HTML5 working in IE6-IE8)
    • ]]>     http://www.freexenon.com/2009/11/10/more-html5-resources/feed/ 0     HTML5 Now Featuring ARIA and RDFa!! http://www.freexenon.com/2009/10/21/html5-now-featuring-aria-and-rdfa/ http://www.freexenon.com/2009/10/21/html5-now-featuring-aria-and-rdfa/#comments Wed, 21 Oct 2009 18:49:50 +0000 FreeXenon http://www.freexenon.com/?p=272 I have just heard that HTML5 will be getting the RDFa stuff, and that it will also be inheriting ARIA stuff too.

    I am so very happy to hear this increased accessibility and meta data. I cannot wait for an updated doc type (if there will be one), specification, and validator for all of this. Throw all of this together with CSS3 and I am one happy man!

    ]]>     http://www.freexenon.com/2009/10/21/html5-now-featuring-aria-and-rdfa/feed/ 0     Bespin – A Collaborative Cloud Based HTML5 Editor From Mozilla Labs http://www.freexenon.com/2009/10/21/bespin-a-collaborative-cloud-based-html5-editor-from-mozilla-labs/ http://www.freexenon.com/2009/10/21/bespin-a-collaborative-cloud-based-html5-editor-from-mozilla-labs/#comments Wed, 21 Oct 2009 18:38:45 +0000 FreeXenon http://www.freexenon.com/?p=270 I stumbled upon Bespin which is a collaborative cloud based HTML5 editor from Mozilla Labs which is really in beta (0.4.4) production. It is really in beta since I was not able to upload a HTML5 page I have been working on or copy and paste the code into it. I look forward to when this will be more developed because I am really jonesing for a good HTML/RDFa/ARIA editor. Hurry People!

    ]]>     http://www.freexenon.com/2009/10/21/bespin-a-collaborative-cloud-based-html5-editor-from-mozilla-labs/feed/ 0     Header Tags.. Oi!! http://www.freexenon.com/2009/10/19/header-tags-oi/ http://www.freexenon.com/2009/10/19/header-tags-oi/#comments Mon, 19 Oct 2009 20:57:52 +0000 FreeXenon http://www.fx.serenitystudios.com/?p=10 I originally wrote this in November of 2005 years ago but did not finish it, I think, and thought I would publish it as it is. The idea is basically finished’ish but still needs some work.

    Who is this article written for??

    This is written for an audience that has a basic understanding of HTML design. We will take at a big picture look at the specifications and how the language in the specification affects its use and interpretation. We will cross-reference specifications and the Web Logs of ‘Experts’ in the accessibility and standards communities.

    Introduction

    There was a huge not-so-conclusive debate on the GAWDS mailing list (last week of March) regarding the use of the <h1> tag. What really got people jumping was wondering whether it was OK to use more than one <h1> tag per document. It is well known in the development community that the specification does not explicitly prohibit this. With this in mind I am going to examine the W3C’s specifications and the WCAG’s to come up with an answer as to how the <h1> tag should be used. Will there be definitive answer – No, but best practices will be covered.

    To really understand how header tags, more specifically the <h1> tag, should be used we need to look at the title and link elements and see how they are supposed to be used. When we better understand them it will become more apparent how the <h1> tag should be be utilized.

    The Title and Link Elements should provide for context and the <h1> tag should reflect the topic of the document.

    Usage of the h1 Tag

    We have the title element and the link element to show how a specific page relates to the rest of the site, topic, or content external to itself. The link element shows how the page relates to other pages in the collection (either topically or site wide) on a page basis relative to itself, and the title shows how the page relates to other pages on a topical basis relative to the topic/content. What is left to do? Tell what the page is about and that is what the <h1> tag should be about.

    Having said that I am now going to say something that really seems counter-productive. The real problem with the spec is the examples that they use to support the spec and the language they use. There are a few different ways  to interpret the spec and examples that support and contradict these interpretations. How you decide to implement the spec all depends on which statements and examples hold credence for you. There are three  schools of thought here: There is only one H1, there can be multiple H1’s , and the headers denote Importance rather than structure schools. I will no explain how these schools are derived from the spec and the examples that support and contradict them.

    Structure and Relative Importance

    The one statement that many people key in on the Headings Section is the following statement There are six levels of headings in HTML with H1 as the most important and H6 as the least. Visual browsers usually render more important headings in larger fonts than less important ones. It is thought that the header tags are used to denote importance and not structure. This is the only statement that supports this, the rest of the reviewed material supports their use determining document structure. Structure, structure, structure…

    The areas of the HTML 4.01 specification that I found the most informative of this topic are as follows: The Global Structure of an HTML Document, 12.3 Document Relationships: The Link Element. I referenced the XHTML 2.0 specification to see where the technology was heading which will give further perspective to its correct use. The 2.0 specification generally mirrors the 4.01 spec. If there are illuminating differences I will mention them. I start the big picture look here with the specification by referencing the link and title elements as well.

    More than one

    So now we have the subject of more than one <h1> tag on a page. Do the specs explicitly forbid it? NO. Do they give example to promulgate the belief that it is acceptable? Yes. Should you do it? My belief is No.

    Examples

    We will take a look at our fictitious site of www.flowerguide.com whose name is ‘The Flower Guide’. They have a fairly small informational site with 5 pages: site index, Buying Flowers, Types of Flowers, Growing Flowers and Flower Arranging respectively. We will show you a good  example as to how the Title and Link elements and the <h1> tag should be for the ‘Types of Flowers’ page.

    Types of Flowers Page

    <html>
<head>
    <title>Types of Flowers -  The Flower Guide - www.flowerguide.com</title>
    <link rel="start" title= "The Flower Guide Home" src="index.htm" />
    <link rel="next"  title= "Next page: Arranging Flowers" src="arranging.htm" />
    <link rel="prev"  title= "Previous page: Buying Flowers" src="buying.htm" />
</head>
<body>
    <h1>Types of Flowers</h1>
...content...
</body>
</html>

    Sources of Information and Influences

    The World Wide Web Consortium’s Specifications

    To answer any question regarding the use of HTML tags we must analyze the source. The source, of course, is the specifications as set forth by the W3C. For the purposes of this discussion I have examined the HTML 4.01 and XHTML 2.0 (working draft) specifications, WCAG 1.0 and Techniques, WCAG 2.0 (Working Draft) and Techniques,
    and the following W3C’s Tips of the Day:

    I have also perused the WHATWG’s Webforms 1.0 proposal to the W3C to be the successor the HTML 4.01 spec. As you can see I have not just examined writings about headers themselves; I have also checked other things that affect or modify the use of header tags such as the link
    and title elements which will give us some perspective as to their proper use.

    Web Logs of Industry Gurus or Organizations

    I also Google’d around for, and check well known BLogs of very active and knowing people in the industry to give even more perspective to the specifications as written. Specifications may look good on paper but how they are implemented and iterpreted may be a different matter. The following Web Logs have influenced my writing as I have referenced them during my research.

    BLogs

    Organizations

    ]]>     http://www.freexenon.com/2009/10/19/header-tags-oi/feed/ 0     Usage of the Title Element http://www.freexenon.com/2009/10/19/usage-of-the-title-element/ http://www.freexenon.com/2009/10/19/usage-of-the-title-element/#comments Mon, 19 Oct 2009 20:48:31 +0000 FreeXenon http://www.fx.serenitystudios.com/?p=17 I originally wrote this about 4 years ago but did not finish it, I think, and thought I would publish it as it is. The idea is basically finished’ish but still needs some work.

    … Authors should use the TITLE element
    to identify the contents of a document. Since users often consult documents out of context, authors should provide context-rich titles. Thus, instead of a title such as “Introduction”, which doesn’t provide much contextual background, authors should supply a title such as “Introduction to Medieval Bee-Keeping” instead.

    For reasons of accessibility, user agents must always make the content of
    the TITLE element available to users. …

    This is a quote from 7.4.2 The TITLE element of the 4.01 HTML specification.  This states that the title element should be used to provide context for an individual page (within a collection of webpages) so that we have an idea where this information fits into the scheme of the website or topic. Since it must always be available to the user we can count on this to set
    the context for our page’s content.

    Best Practices

    So what does context-rich mean. Giving a short concise title for the user to be able to put the page’s content into context. Some would take the content that is found in the h1 element and in many cases that is a good idea. A case where this might not be a good idea is when the h1 tag is not concisely descriptive of the content and is more creative. An example (Stuart: August 29) is where the title of the page is “American Dream” when the page is a profile on “Paul Auster”. The title element should be something like Profile of Paul Auster and then the h1 element can be the more creative American Dream.

    Order and Separators

    A key thing to remember is that the title element will be displayed in the title bar and very often in the search engine results page. To be ultimately useful in this capactity the left most portion of the title content should be describe the content and then the other information can follow such as site name or title and section information (if included). It seems that the -, ., | seem to be the preferred separators for title content.

    Read More

    ]]>     http://www.freexenon.com/2009/10/19/usage-of-the-title-element/feed/ 0     Usage of the Link Element http://www.freexenon.com/2009/10/19/usage-of-the-link-element/ http://www.freexenon.com/2009/10/19/usage-of-the-link-element/#comments Mon, 19 Oct 2009 14:50:00 +0000 FreeXenon http://www.fx.serenitystudios.com/?p=11 I originally published  this about November 20, 2005 but I think that I will republish it. , I think, and thought I would publish it as it is.

    The <link> element provides context by providing links to other pages in the collection and shows how they are related to the current page. Here is a quote fron the HTML 4.01 Spec that is echoed in the other specs and I have emphasized the important part:

    This element defines a link. Unlike A, it may only appear in the HEAD section of a document, although it may appear any number of times. Although LINK has no content, it conveys relationship information that may be rendered by user agents in a variety of ways (e.g., a tool-bar with a drop-down menu of links).

    There are quite a few options that we can set for a webpage. The one drawback to using the <link> element is that it is not supported by or easily accessible in all browsers. Because of this we cannot count on the <link> tag. Just remember that this is out there and that as standards, development skills, and the semantic web evolve the <link> tag will become much more prevalent and useful for setting the context of a webpage. Some progressive websites do use this and it is a boon to accessibility, but for now just keep this in mind (and use it) Here is a list of some of the commonly used link types that can be set:

    Start
    Refers to the first document in a collection of documents. This link type tells search engines which document is considered by the author to be the starting point of the collection.
    Next
    Refers to the next document in a linear sequence of documents. User agents may choose to pre-load the “next” document, to reduce the perceived load time.
    Prev
    Refers to the previous document in an ordered series of documents. Some user agents also support the synonym “Previous”.
    Contents
    Refers to a document serving as a table of contents. Some user agents also support the synonym ToC (from “Table of Contents”).
    Chapter
    Refers to a document serving as a chapter in a collection of documents.
    Section
    Refers to a document serving as a section in a collection of documents.

    By using the Link element there are quite a few ways that you can set the context for a webpage. All are not supported by all user agents and there are more options for links than are listed here. They even go so far as the say that you may create your own values for the rel attribute. A very rich and extensive relationship set can be created for an individual page. A large listing of relationships used can be found on this Tripod Page. Here is a simple example of their use:

    <head>
 <title>Types of Flowers - The Flower Guide - www.flowerguide,com</title>
 <link rel="start" src="index.htm"     title= "The Flower Guide Home"  />
 <link rel="next"  src="arranging.htm" title= "Next page: Arranging Flowers" />
 <link rev="prev"  src="arranging.htm" />
 <link rel="prev"  src="buying.htm"    title= "Previous page: Buying Flowers" />
 <link rev="next"  src="buying.htm" />
</head>

    By this simple example we can see that the current page’s topic is ‘Types of Flowers’ and the start page is index.htm. It has a page that preceeds and succeeds it and their reverse relationships are also set. With this example we have set how 4 pages in the (topical) collection relate to each other.

    Opera, Mozilla, iCab (Mac), and Lynx browsers and some Screen Readers show these link elements for you to use. Internet Explorer and Firefox and Netscape (Mozilla) need an add-on for this to be visible (IE: Link Toolbar; Netscape or Firefox: Link Toolbar or Link Toolbar). Here are list of methods to show a Link Navigation Bar in browsers that natively support it:

    • In the latest release of Mozilla (1.8A1) you can go to View -> Show/Hide -> Site Navigation Bar
    • In the latest release of Opera (8.0) you can go to View -> Tool Bars-> Navigation Bar

    Check the following articles:

    ]]>     http://www.freexenon.com/2009/10/19/usage-of-the-link-element/feed/ 0     HTML5 Resources http://www.freexenon.com/2009/10/07/html5-resources/ http://www.freexenon.com/2009/10/07/html5-resources/#comments Wed, 07 Oct 2009 16:41:34 +0000 FreeXenon http://www.freexenon.com/?p=85
  • HTML5.org
  • W3C Working Draft of HTML5
  • Coding a HTML5 Layout from Scratch (Smashing Magazine)
  • HTML5 Enabling Script
  • HTML5 Tutorial.net
  • 70 Must-Have CSS3 and HTML5 Tutorials and Resources (Web Appers)
    • ]]>     http://www.freexenon.com/2009/10/07/html5-resources/feed/ 0     HTML5 http://www.freexenon.com/2009/09/22/html5/ http://www.freexenon.com/2009/09/22/html5/#comments Tue, 22 Sep 2009 19:41:03 +0000 FreeXenon http://www.freexenon.com/?p=77 HTML5 is making me quiver with excitement. There is so much awesomeness in it, I almost want to scream. This is a wet-dream come true. I cannot wait until they get something ironed-out a bit more like that hgroup thingy and the header/footer issues too. I Love It. HTML5 is my precious!

    I cannot wait to be able to safely use this is production code. Hurry up people! Hurry up!

    ]]>     http://www.freexenon.com/2009/09/22/html5/feed/ 0     Web Standards, Development Firms, and Drupal http://www.freexenon.com/2008/11/06/web-standards-development-firsm-and-drupal/ http://www.freexenon.com/2008/11/06/web-standards-development-firsm-and-drupal/#comments Thu, 06 Nov 2008 18:47:02 +0000 FreeXenon http://www.freexenon.com/?p=49 Now, I realize that, by virtue of being a web standards based developer, that I am a significant minority, but this is the first time that I have had this reality really had it crammed down my throat. =) =(

    Well, at work I have been searching specifically for web standards developers for a major Drupal project. I have posted about the County’s needs on Drupal.org and on the Web Standards Group (of which I am a member), and none specifically showed their head. There were many who expressing interest in working with us, many of which were from India, which was interesting to see, but none of their business and sites said or specifically showed web standards, validation, accessibility, or usability as a priority. Most seem to be of the ‘get the contract, churn out a solution and move on to the next‘ mindset. This I found highly disconcerting.

    I had quite a few firms interested in working with us and as soon as they expressed interest in our project the first thing I did is went to their business’ home page and validated it and looked at their source code, and every single time I cried and died a little bit inside. Even after that I took a look at some of their sample sites, and validated and analyzed their code… while my tears were still drying, only to cry again. On occasion I would find one site in their samples that would validate but the code was just OK.

    When I responded to these firms who were interested I specifically asked for examples of their work that validate and showed a care for Semantics, Separation of Layers, Validation, as well as Accessibility and Usability. Each time the firm sent me a list of all of their sample sites, seeing that actually giving me what I wanted was not possible or they did not understand or care enough to take the time…. Annoying…. really annoying….

    So, after seeing that this was the case it was a matter of finding the firm that showed the most potential (at a reasonable cost) to be able to give me the result that I want, and there were not a whole lot of options. In the end we signed up with a firm that looked like they could get the job done.

    I do realize that Drupal does have strong level of decent code, but none go that extra mile that I am looking for…

    I do realize now that this post is turning into a rant stemming from the fact that Web Standards Developers are a minority, so take this post for what it is worth. I feel better now.

    Web Standards, Accessibility, and Usability Resources

    ]]>     http://www.freexenon.com/2008/11/06/web-standards-development-firsm-and-drupal/feed/ 0