Posts Tagged ‘Web Standards’

Valid Flash Embed and Preloaders in Internet Explorer

Friday, June 18th, 2010

Hello once again, web friends. Today I bring tidings of Flash preloaders and validity.

You may have noticed that with the embed code from my YouTube article that Flash movie preloaders don’t work in Internet Explorer, and the movie has to load entirely before it even displays at all. This is because Internet Explorer requires a different attribute and the removal of another in the object tag to let preloaders work properly. However, with different attributes, the Flash movie will not display at all in Firefox, so we must use Internet Explorer’s conditional comments to utilize two different opening object tags. Behold:

<!--[if !IE]>--><object data="yourmovie.swf" type="application/x-shockwave-flash"
	width="320" height="240"><!--<![endif]-->
<!--[if IE]><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
	width="320" height="240"><![endif]-->
	<param name="movie" value="yourmovie.swf" />
	<param name="quality" value="high" />
</object>

The first line is the original that works in both IE and Firefox but doesn’t allow preloaders in IE. The second is the IE-only method that works with preloaders. Note the lack of a data attribute and the addition of a classid attribute.

Well, there you have it. Venture forth and embed Flash validly with preload animations!

—Kyle Blizzard

Tags: , , , , , , , ,
Posted in Web Standards | 1 Comment »

Semantic Markup – Why Should You Use It?

Thursday, March 4th, 2010

Your markup should have meaning. Markup your content appropriately (e.g. put your address and phone number in the address element) and it becomes much more readable to search engines and other software used for data extraction. Using only div and span elements leaves much to be desired, semantically speaking. These elements are certainly indispensable, however, there are some cases where there are more meaningful elements to use. For example:

  • Use h1 as your page title; use h2 and on appropriately as sub-headings on the page. This provides an outline of your document.
  • Use lists (dl, ol, ul) instead of manually placing numbers or bullets.
  • Use address for any contact information on your page, including physical address, email address, phone numbers, and whatever else you would consider to be contact info.
  • Use table on data best represented in rows and columns. Use thead and th to markup the column headings and tbody for the data itself.

Check the HTML spec for additional meaningful elements and get to work! :)

You can use the W3′s handy Semantic Data Extractor tool to test your new semantic web site to give you an idea of how it would be seen by software.

That does it for now. See you next time! Until then, read SEO and Validation.

—Kyle Blizzard

Tags: , , , , ,
Posted in Web Standards | 2 Comments »

Valid Flash Embed – Make That YouTube Embed Valid!

Wednesday, March 3rd, 2010

Hola! It’s been a while. I’ve got another gripe, and this time it’s with Flash embed code!

Most of the embed code I see for Flash movies is invalid, usually containing the non-existent embed element or some-such. Even the code provided by YouTube for embedding videos contains embed. This can easily be thrown out and will—probably most of the time—instantly make your code valid.

Here’s an example (in XHTML) of a valid Flash embed that works in at least IE6+, Firefox, and Safari:

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

That’s all there is to it. Adjust the parameters and add additional param elements as necessary. If your Flash movie requires variables, just add an extra param as follows:

<param name="flashvars" value="arg1=foo&amp;arg2=bar" />

If you place additional elements inside the object element, it will act as a fallback, displaying if the Flash plugin isn’t installed. For example:

<object data="flash.swf" type="application/x-shockwave-flash" width="320" height="240">
<param name="movie" value="flash.swf" />
<img src="fallback.jpg" alt="Flash Didn't Load!" />
</object>

That’s all for now. Happy coding!

—Kyle Blizzard

Tags: , , , , , , , ,
Posted in Web Standards | No Comments »

Web Standards Again

Thursday, April 9th, 2009

Greetings! Many times we have clients that have trouble understanding the role of web standards and why they are important. So I created this high level explanation that I hope will suffice. It is, by its very nature, simplified and incomplete, so don’t stone me to death. Here goes…

The World Wide Web Consortium (www.w3.org) is the standards body for the internet. They define the standard “language” or markup that web pages are written in. All of our documents are written in the strict flavor of XHTML (eXtensible Hypertext Markup Language) 1.0 which is very intolerant of errors. Conforming to these standards has several practical benefits. First, the site is easier to update since all of the content is easy to read and logically organized. This reduces cost for updates to the site. The W3 provides a validator to check pages against the XHTML standard and report any errors that it finds.

Secondly, strict XHTML mandates that the graphical presentation of the page (how it looks) be separated from the actual content of the page. So there is a separate file we create called a “stylesheet” that determines how the page will look. All of the graphics, colors, and layout are determined by this stylesheet. This is a benefit because it makes for smaller, faster loading pages which can rank higher in search engines than bloated pages that are slow to load. It also makes it easier to update how the site looks. For example, as autumn approaches you could change the entire look of the site by changing the colors in the stylesheet to fall colors. This is much more efficient than redesigning a site in the old days when each individual page had to be changed at great expense.

Lastly, search engines look for unique, relevant content that is organized well. By keeping all of the content in a separate file, the content can be organized so that the most important information is close to the top of the document while repetitive elements such as the navigation links are closer to the footer.

Be sure to read this post about HTML validation for SEO

There is a great FAQ on web standards and their importance at: http://www.webstandards.org/learn/faq/

Good Luck!

—Alan

Tags: , , ,
Posted in Web Standards | 1 Comment »

ASP.NET and XHTML Validation

Tuesday, January 13th, 2009

If you’ve ever created an XHTML 1.0 Strict page containing an ASP.NET form element and ran it through the W3 Validator, you’ve undoubtedly noticed it’s reported as being invalid no matter what you do and no matter how valid the code actually appears. This is because ASP.NET adjusts the way it renders markup according to the requesting user agent. ASP.NET pities the W3 Validator and sends it bad code. This can be fixed with a “browser” file. The file and instructions on its use are available from that page.

However, that’s not all. The validator will now see your pages the way you see them in your browser, but ASP.NET is still rendering an invalid name attribute on your form element! You need to add a line to the system.web section of your web.config file:

<xhtmlConformance mode="Strict" />

Now ASP.NET plays nice with the W3 Validator and renders a valid XHTML Strict form! Now you can stop using the XHTML Transitional doctype and start using the XHTML Strict doctype on your ASP.NET pages!

—Kyle Blizzard

Tags: , , ,
Posted in Web Platforms, Web Standards | No Comments »