• Flickr
  • Last.fm
  • Twitter
  • Linkr
  • About
  • Favourites
  • Comments
  • XBox

All blog posts tagged with xhtml

Semantic Data Extractor

Posted on June 25, 2008 at 10:57PM

A while ago I discovered the Semantic Data Extractor after playing around with the W3C Mark-up Validation Service beta. It's a handy tool that can provide a basic outline of some of the semantics in your mark-up. Using XSLT(Extensible Stylesheet Language Transformations), the service examines your mark-up and provides a basic summary of important data.

I ran a few sites through the service and found that it was able to pull out generic metadata (stuff in the header), related resources (rss feeds, etc...), defined terms (definition lists), abbreviations and acronyms, and an outline of the document (a list generated by your h1-h6 elements).

For a semantic checking tool, I think this is in the right direction towards helping people. It's enough to help some people make changes, but not enough to take the thinking out of writing semantic mark-up. I recommend checking your site in it just to see what kind of results you get.

Note: this was originally posted on Bytes of Standards, which I recently closed.

XHTML with Rails 2.0

Posted on January 8, 2008 at 11:45AM

I've been spending an awful lot of time learning all about XHTML and mime-types. In specific, pretty much ever detail about serving the file as text/html versus application/xhtml+xml. The differences are huge, so I won't discuss them here. But if you're one of the people who wishes to serve your content as application/xhtml+xml, this might be of some help.

I'm exploring a method called content negation where I serve XHTML as application/xhtml+xml to capable browsers and XHTML as text/html to others. It seems to widely accepted. Fortunately for Rails users, there's nice plugin that can handle most of the work for you. Just install it and put a single line of code in your application controller.

This works perfect in Rails 1.x, and in some cases in Rails 2.0 (when you're not using a default scaffold), but not always. If you generate a scaffold, you're going to find that due to routing and formats, it's just spitting out XML or not working. What you need to do is add a new format, simply called xhtml.

Now, I haven't fully explored this with all browsers or even entirely in depth.

But when you use the plugin and add the new format, it looks as though you can still serve the html format separately from the xhtml content. That means you could actually serve HTML 4.01 Strict instead of (technically) invalid XHTML 1.0 Strict. There's a lot going on, so it may be a coincidence in my case. Either way, it's good to know that it's possible to have better separation.

The Latest Web Development Questions

Posted on December 7, 2006 at 02:33PM

With having a redesign in the back of my mind, I've been following different trends of web development quite closely. A lot of questions come up for best practices that previously people didn't really think of or at least necessarily worry about. Some are rehashes of previous debates and some are long continuations of long-running problems.

XHTML vs HTML

The one that has really challenged my thinking is the debate between XHTML and HTML. Whether it's debating text/html vs application/xhtml+xml or the confusion caused by the future in HTML5 (more around what it will be rather than whether it will come). The purist might say HTML is the way to go, due to the lack of application/xhtml+xml support in browsers, but someone actually using their site will want the XML valid markup of XHTML. Cause really, the only other argument against XHTML is that it should fail to render due to a single parsing error. Is that such a big deal? Any site using XSLT generally faces the same problem. I personally think that's good as it encourages good, clean mark-up. Right now it's really a "who cares?" answer, but I'd say go HTML Strict if you're not parsing your site as XML.

Elastic EM-Based Layouts

I'd seen it before, but Simplebits really put elastic em-based layouts into my view of interest. Is it just me or is Dan always a step ahead of most others? What's most interesting is the level of usability they add to a site. No extra stylesheets to handle text-size or having to hack in font-size changing. Everything is in proportion to the browsers font-size. A user changes the font-size and the entire layout, not just the font, adjusts. I'm almost positive I'll be using this technique in the revision.

The Resolution Wars

Things have changed in recent years. We've gone from having our windows as wide and tall as possible to having our browser windows at a comfortable size. Not having it maximized means we can do things around it and multi-task better. This is usually on larger, high resolution desktops, but those seem to be increasing as well. We've gone from a static, 800x600 maximized window to dynamic window that could be any combination of width and height. The question isn't, "Should I support 800x600", it's, "How can I support a broad range of resolutions?" The next step is to define the maximum and minimum widths of a fluid layout or the sweet spot of a static layout.

JavaScript Dependency

Let's face it, JavaScript at one point was used more annoyingly than anything. But these days it's what adds a lot of interactivity and smoothness to the web. There's one problem that's dragged itself into this otherwise beautiful tool: dependency. Roger Johansson says it best, "You cannot rely on JavaScript being available. Period.". Some may think what he says is a bit extreme, but I entirely agree. His examples are prime evidence that even the big guys don't do enough. In a world where accessibility laws are being passed and browser configurations/support vary so much, how can you possibly think your visitors will be happy that your site breaks? Depending on JavaScript can drive away visitors, clients and customers if it affects them. Is it worth it?

Standards are in the Air

Posted on September 27, 2006 at 02:35PM

Is it just me or are standards floating in the air rather than pollen? I've seen several major articles posted recently either advocating the continuation to spread the word about standards or they've focused upon a given part of a standard. Here's a quick summary of what's hot in the world of standards.

Talk about CSS, standards, mark-up, semantics, validation and doctypes. There's no better time than now (well.. I guess anytime before now) than to start learning and using standards.

Replaced Elements

Posted on September 19, 2006 at 06:47AM

Replaced elements are likely the most interesting in HTML. They're also the most risky to use. A replaced element is where you have an element that will display text by default, but will be replaced with something else if the browser supports it and can load it. The most common replaced element is the image.

If you watch when a page loads, sometimes you'll see the alternate text displayed before the image gets a chance to load. It's most common you see it when images are disabled or for whatever reason, an image can't load.

Replaced elements are very neat in that they're designed to work well in both states. The risky part is when either state isn't properly done, it can have a negative affect. The fortunately part is that usually the replacement side of things will fallback to the textual state. So really, your focus on assurance needs to be on the textual side of things in the event it can't load.

So just incase you've ever wondered why kind of element an image is, it's a replaced element. Others include applet, button, input, textarea, object and select.

Conquering the Use of Divs and Spans

Posted on September 17, 2006 at 01:20PM

Entering today's methods of web design, we see the div element as our hero, defeating nested tables as our structuring method of choice. It's without question an important element, even though it's use provides no meaning to the content within. It doesn't imply wrong meaning or right meaning, just none at all. It's neutral. It's our hook which we use to manipulate in order for our designs to work.

Some believe that div is an element which shouldn't be used. It doesn't provide benefit to the interpreter, so it shouldn't be used. They believe the design should still be achievable using semantic mark-up. This is a purist thought in most cases. It's correct in many ways, though some people believe it being used only when absolutely necessary is acceptable. That is the method I prefer. Ruling it out altogether can make me spend more time restructuring and developing my mark-up than coding parts of a backend.

There is a third view on this. One that says divs could and should be used wherever possible, even if emulating a table-like structure. As fine as this is, it's removing a good part of what some believe web standards provide as a benefit -- page bloat and tag soup.

The way I see a div or span is that it's in there specifically as a hook for styling. I've heard it called a "division", but in every case, it's only been divided for styling reasons. A browser will be default not show any visual signs that something is wrapped within a div. A good sign that it's unnecessary for the browser to properly interpret the page unstyled.

The div truly can't be discounted though. It's a required element for most designs because the mark-up provided by XHTML doesn't cover anything for presentation or styling. The mark-up elements allowed are for defining content type whether it be an anchor, paragraph, quote or acronym. As soon as you want to do a complex columned layout, the semantic mark-up typically won't be enough allow it to work, especially in cross-browser situations.

The way I work with divs is that I try to do the mark-up without using any divs, then as I style, I insert them when I absolutely need them. It's something I've been practising more recently. It can be looked upon as a case where you have to not allow the technology being used to affect the design. In this case XHTML and its element-set.

So just as someone has looked for validation errors for people doing the CSS Reboot, it would just as interesting to see what percentage of people actually attempt semantic mark-up. Who wouldn't want to do it? It reduces your overall mark-up, providing more savings towards your storage and bandwidth.

Thanks AD2K for the interesting discussion regarding this the other day.

XHTML 1.1

Posted on September 8, 2005 at 12:34PM

Today in class we were going into the topic of doctypes and which ones we'll be using. Well, I've been using XHTML 1.1 for at least a few months now and the instructor was recommending XHTML 1.0 Strict. Out of curiousity, I asked what the difference between the two were. I didn't recieve an answer that said what it was, but pretty much a hint that I should go look it up on my own. So that's what I did.

After doing a quick Google query, I came up with the first result being at the W3 website. If you've been there, you know how technical they can be, so I was happy to see a changes since strict 1.0 link. After just a quick read of the page it made it very clear what the changes were:

  • Removal of deprecated features.
  • Lang attribute removed from every element.
  • Name attribute removed from a and map elements (tags).
  • Ruby elements added.

So now if you were wondering what the doctype difference is or whether you should use it not, you now know.

Tag Usage

Posted on September 3, 2005 at 10:09AM

While reading my wonderful Web Standards textbook (yes, I realize I don't start college for another 3 days) I've come across numerous areas where tag usage is either mixed up by people or they just don't realize why they're using a tag. Surely, I've learned a lot about the usage of tags, even the simple ones like <strong> and <em>. Did you know that they're not replacements for <b> and <i>? Well, neither did I... The simple truth is that they're designed for screen readers or assisting software. They change the pitch, volume and speed of the text when read. As a result, they also bold and italicize text, but that's a by-product. As for <b> and <i>, they're no longer used, but instead are replicated by CSS.

When you use the tags, there should be some meaning behind it. When using <strong> or <em>, there should be a reason to use them, and a good way to determine that is to actually say your sentence outloud to see if you emphasize part of it. The book uses an example with a number. A sentence saying something like "Your validation number is: <strong>423536</strong>." The reason the emphasis is useful in this case is that whoever is getting the information will hear the numbers being emphasized, rather than just normally. This will make it easier to write the number down or notice the importance of it.

There's plenty of other tags that are misused (or underused) by the general web designer community, including myself. For example, many people use <blockquote> to indent text, which great, you've accomplished your goal, but you've misused the tag. Instead, you should have used a <div> container and indented it with CSS. The <blockquote> tag is meant for long quotes and should only be used for them. On the topic of quotes, did you know that there's an inline quote tag? That's right, using the <q> tag, you can do inline quotes that have meaning behind them, rather than just a plain double or single quote system. What's great about it, is that embedded quotes are automatically parsed to give the right quote symbol.

The <cite> tag is great for titles of books or poems. The purpose of the tag is to reference a citation, so why not use it rather than simply putting it in italics (which is typically done for you with the <cite> tag)? Moving on, we have the <abbr> and <acronym> tags which are used for abbreviations and acronyms. Why use them? Well, they have some cool features in most browsers and they speak well with screen readers. Hey, this is looking like you're making your site more accessible by using these tags, great eh? I could go into a few more tags, but I'll finish with <code> which is used to display code, <samp> which is used to demonstrate script output and <var> which is used to show variables.

So why bring them up, even those this site doesn't take advantage of them? Well, I've decided to share from my learning. I do plan to implement all of these at some point or another, along with some other features, but with a lot of the site being tied into a BBCode function, it's very difficult to make all the existing entries look as they should, but nonetheless, it has to be done.

If you want to learn more about web standards and how to make your web site more accessible, check out http://www.amazon.com/exec/obidos/tg/detail/-/1590593812/104-7811758-6443127?v=glance

Styling your Table

Posted on September 1, 2005 at 05:00PM

Have some tabular data that you want to throw on your website? Well, that's great, but if you're going with standards, styling that table can be sort of tricky. Never fear though, there's an easy way to get around that and have your table looking spiffy in no time.

First, we have our table:

<table summary="A list of letter grades per annual">
<caption>School Grades</caption>
<thead>
<tr>
<th id="year">Year</th>
<th id="a_s">A's</th>
<th id="b_s">B's</th>
<th id="c_s">C's</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Total</td>
<td headers="a_s">6</td>
<td headers="b_s">6</td>
<td headers="c_s">3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td headers="year">2003</td>
<td headers="a_s">1</td>
<td headers="b_s">3</td>
<td headers="c_s">1</td>
</tr>
<tr>
<td headers="year">2004</td>
<td headers="a_s">2</td>
<td headers="b_s">2</td>
<td headers="c_s">1</td>
</tr>
<tr>
<td headers="year">2005</td>
<td headers="a_s">3</td>
<td headers="b_s">1</td>
<td headers="c_s">1</td>
</tr>
</tbody>
</table>

So now we have our table ready to go and style, it's simple and just shows the amount of letter grades achieved in each school year from 2003 to 2005. They're made up, so don't worry about those C's.

First of all, what we want to style is the border of the cells and table. Let's go with a one pixel solid gray one. In our stylesheet, we'll add this:

table {
border-top: 1px solid #999;
border-left: 1px solid #999;
}
td,th {
border-bottom: 1px solid #999;
border-right: 1px solid #999;
}

Simple right? The reason we style them by opposite sides is that if you don't, you tend to get some double borders that can be quite unattractive. But, we have some gaps, so let's get rid of them. We change the table css declaration slightly.

table {
border-top: 1px solid #999;
border-left: 1px solid #999;
border-collapse: collapse;
}
td,th {
border-bottom: 1px solid #999;
border-right: 1px solid #999;
padding: 5px;
}

Apply that change and you've suddenly got some nice borders. And since we added some padding to the cells, the contents have some room to be read more easily.

Now that our cells are styles how we want them, we can make our header and footer nicer to make them more seperated from the normal content. We'll add a bit more to our CSS.

thead th {
background-color: #ddd;
}
tfoot td {
background-color: #bbb;
font-weight: bold;
}

Excellent, we've now applied the final styling to our table to make it awesome. You can feel free to style the caption add background images to cells or whatever you wish, just remember that tables should only be used for tabular data and not for your layout.

See how it looks: http://haugland.ca/files/documents/table_styling.html

Validating Flash

Posted on April 14, 2005 at 12:57PM

Today while re-validating this site, I discovered that the Flash items in my portfolio weren't validating. This is the page that actually shows the Flash file. Didn't really understand why, it's the default stuff that Macromedia and 99% of websites use. Regardless, I had to solve it, because I like perfecting.

Anyhow, a google search revealed that I was write that the Macromedia code doesn't validate. Futher in my search I discovered a nice solution to make it validate.

Here's the code that makes it all work.

<object
type="application/x-shockwave-flash" data="movie.swf"
width="400" height="300">
<param name="movie" value="movie.swf" />
</object>

It works in IE, Mozilla, Netscape and Opera. So it's something worth checking out if you want to have your Flash files be validated in your XHTML.

Source: A List Apart

Haugland Designs

Posted on March 10, 2005 at 04:00PM

This is a site that I developed in order to provide web design services to local, provincial, national and international customers. It features a table-less layout, full PHP/mySQL backend, client section and more. Clients have the ability to sign-up for a client center where they can read F.A.Q, find contact information, start new projects, and discuss the current and future progress of their projects. Its layout and design make it easy to navigate, fast to load and viewable in the all the latest browsers. Efficient PHP programming prevents against SQL injection and other known exploits, making the site secure from script-kiddies.

How to validate your page

Posted on March 8, 2005 at 04:00PM

You've likely heard everyone talking about validation and standards. Yeah, they're great... But unless you've learned it in school, or done it before, you don't really know how to validate your page. Fortunately it's not too difficult.

To validate your page, you need to have a "DOCTYPE" declared at the top of your page. Depending on what level of XHTML or HTML you're using, the doctype will be different. You can see the various doctypes on W3School's doctype page.

After you've double-checked that you're using the corrent doctype, proceed to the validator to validate the page.

Here you'll have the choice of either inserting a URL or uploading a file from your hard drive. Choose your option, and hit the "check" button.

Now you should be at the results. If your page is valid, you'll get a nice notification letting you know, otherwise you'll have a list of all the errors on your page, what they are, and where they are.

When you have all these errors, it can sometimes be complex to figure them out, but usually you can just look at it, and you'll get the jist of what's wrong. Go back to your code, make the fix (upload or save it) and hit refresh or reload on your browser. It should then tell you if the errors are fixed or not. If you're stuck on an error, check out W3Schools to see if you can find more help.

Center an object using CSS

Posted on February 28, 2005 at 04:00PM

When using XHTML, you're going to be often make a switch from tables to divs as your platform for your layout. Unlike tables, there is no align option which you can use, so you have to improvise and use CSS.

First you make up your class (ID or tag will work too) in CSS, set a width, and margin properties.

.example {
width: 200px;
margin-left: auto;
margin-right: auto;
}

Then you apply the class to your div.

<div class="example">
Example text will go in here.
</div>

Your div should now be centered. Remember, you must set a width or it will not work. By default, a div is set to go the width of the parent container. Also, you can apply this to images, tables, text, or anything else.

Importance of Standards

Posted on January 15, 2005 at 05:44PM

When you think of standards, you're likely to think of the standards of which we now are supposed to use to design web sites. But that's not the only place where standards are being used. Computers themselves and the way they boot, that's a standard. I'll talk a bit about email standards, then jump into the web standards that seem to be first-in-line.

When you send or recieve an e-mail, your client is conforming to certain standards so that the servers know who sent it, and where it's going, along with all the other information behind the scenes. Why is that important? Well, if there weren't a standard to follow, things will get nice and screwed up all the time. Some emails wouldn't get sent, some not recieved. So all of the servers and clients need to follow the standards so that it can take place. Of course, with different protocols for email, they each have their own settings, but nonetheless, it requires standards to keep the Internet somewhat stable.

But yes, let's take a look at the standards that web designs should be using to build their sites. When you look at this site, it should validate as XHTML 1.0 Transitional. I coded it to do that. Why? Well, any modern browser is generally coded to render pages coded in the standards properly. If you look at this in a browser that doesn't support CSS, chances are you're going to leave it, as it's quite ugly looking (and hard to follow.)

Here's my theory about standards. When we can do whatever it is we want, and add new this or new that, we tend to create some facsinating ideas. Most of which end up duplicating and having multiple ways of doing it. With all these ways, it becomes hard for the client developers to keep up with them and implement them so that it can support as many methods as possible. This also makes the coding language sloppy, without structure as to how things should go. Once you start overlooking how things are done, you can choose the best ways and parse out the rest, leaving just one or two methods to accomplish something. Then you start looking at the language structure, and being conforming rules of where things should be placed, where they can be placed and how it will all work together. Once you get that all done, there's a guideline of which the coders can follow.

What puzzled me before was, "We have standards, why aren't they being used by everyone?" The answer came to me. It takes time, and implementation. Standards for web design have been around for a very long time, but it's only been the last 2 years that people have started to take them seriously. Many large sites are coded in a way that makes it so difficult to make the compliant, that they would have to recode the entire thing, salvaging pieces where they can. Another reason is the age group of coders. The coders that have been around for a very long time often don't like the switch to the new language, and find it difficult to trade off their old habits for the new ones. It's much easier to code HTML without worrying about whether it will validate or not. And even easier then if you don't care if it doesn't render outside the browser you use.

Practice will show that if you conform to the standards wherever possible, you'll be a lot better off. This doesn't mean you should break off and try something new. We need to ideas for web design. ActiveX is dying and and Flash isn't progressing much right now.

But remember, the less the visitor has to do in order to view your site, the more likely they'll enjoy the visit.

Displaying all 14 posts