code Blog

Skindiving into HTML 5

Written by tborzecki on January 26, 2011 — 1 Comment

With all the buzz and hubbub surrounding HTML 5, the web community has been pretty slow in adapting the next iteration of the HTML language. Yes, there is a growing selection of websites written in HTML 5, but it seems that most of them are websites about HTML 5. I think it’s time for web pros and amateurs alike to stop cautiously testing the water by creating HTML 5 canvas element demos and to start using HTML 5 markup in all their projects. The markup is supported fairly well in modern browsers and with the addition of some clever JavaScript will even work on IE 6.

If we want this standard to catch on, then there is no time to waste; let’s all start using it. I can’t wait for the day when all the buzz-word perpetuators simply call this language “HTML” again.

To help some of you get up to speed, I’ve written up a breakdown of the most common new elements.

Basic HTML 5 Bestiary – Some New Elements

Some of the new tags take a cue from magazines and print, in their meanings. This presents us with some interesting semantic interpretation, as well as new and more convenient ways to style pages. No more fussing about with semi-meaningful id attributes when there are lots of purpose-specific tags to use.

<!DOCTYPE html>

Finally a doctype designed for humans to remember. Those of you who used XHTML probably are familiar with its doctype, which looked like it was randomly generated by a computer from the 80′s. Memorizing that would be like memorizing PI to the 20th digit.

<section>

The section tag is like a dedicated-purpose div tag. The section defines an area of the page that is a functional unit of grouped content. This is a fairly broad description, but a chapter or a series of blog posts could technically be in a section tag. I interpret this as a container for related pieces of content, or articles.

<article>

The article tag defines a piece of content that could be on its own on a page. It is content on a specific topic, for example the blog post that you are now reading could be in an article tag. The idea is that if an article was syndicated on its own in a web feed, the content it contains should be complete and should make sense.

<header>

The header tag basically replaces what was normally done with <div id=”header”>. It represents the top section of a page, that usually contains branding and web site titles.

<footer>

Similarly, the footer tag basically replaces what would be done with <div id=”footer”>. It represents the bottom section of a page, that usually contains copyright info, site maps and links to website legal documentation.

<nav>

Also, the nav tag basically replaces <div id=”navigation”>. This would be a container for a navigation bar, normally done with a hyperlinked unordered list.

<aside>

An aside is a piece of content that could stand on its own, but is related to the main content that it is within close proximity of. This is a tag that could be used to create sidebars that support the main content and possibly a context-based navigation bar. Essentially anything that could be defined as adding supporting information to the main content.

<time>

This is a fairly random-seeming tag, however dates and times are often found on websites, yet there is no standard way to denote them. A blog post publication date/time could, for example, be placed within a time tag. This will make styling dates and times easier as well as make them stand out for software agents browsing website data.

Tags That Finally Died!

<center>,<font>,<frame>,<frameset>

There were some tags from early versions of HTML that were still being used by folks who just didn’t want to adapt and learn semantic HTML. These included center, font, frame and frameset. HTML 5 ends the reign of terror that these elements caused, as they have been removed from the HTML spec as obsolete tags. Good riddance! Finally creating frames is actually invalid HTML. Now if only the b and i tags would go…

Old Browser Support </shudder>

In order for older browsers to understand new HTML elements, some JavaScript magic tricks need to be performed. For example, IE6 will allow you to use arbitrary HTML elements, if you first create them in the DOM with the document.createElement method. Luckily some code-wrangling heroes from MIT have already done the hard work for us and created a JavaScript file that can simply be included in the page head. Here is a link to their work: HTML 5 Enabling Script

HTML 5 Resources

Tagged guide, html, markup, trends

Simple and Easy CSS Image Replacement

Written by tborzecki on November 5, 2010 — Leave a Comment

CSS Image Replacement I thought I’d summarize a quick, but very important CSS technique. This technique is best used when:

You need to use a really, really fancy typeface for headings … or a standard typeface with effects that can’t be replicated in CSS.
You need to place a layout image (one that isn’t a piece of content) into your page strategically.
You want to turn a button tag or hyperlink into an image-styled button.

In any of these cases, it is always helpful to be able to apply the image, which might contain text, while keeping the HTML text within your page. This will help search engines and other browsing agents, such as a screen reader to get to the appropriate content or keywords.
For the examples below, assume we are working with a heading, and the markup is as such:

Markup


<h1 id="the_title_to_replace">This is The Heading</h1>

There are basically two steps to this method:

Apply your graphic as a background image, to the appropriate element in the code. It is important to position and size the element appropriately while adjusting things like background-repeat.

Set the Background Image


#the_title_to_replace
{
   display: block;

   /* match the size of the image exactly */
   width: 200px;
   height: 80px;

   /* apply the image as a background to the element */
   background: url(../images/the_title_image.png) top left no-repeat;
}

Hide the original text that is in the HTML.

Hide the Text with No Additional Markup


/* quick method with no additional markup */
#the_title_to_replace
{
   ... see #1 above for this part of the code ...
   text-indent: -10000;
}

Hide the Text with Additional Markup


<h1 id="the_title_to_replace"><span>This is The Heading</span></h1>


/* More semantically correct, but extra markup (see above) required.
   This  hides the span which contains the heading text.
  */
#the_title_to_replace span
{
   display: none;
}

Tagged css, tutorial

What is Your Coding Style?

Written by tborzecki on October 22, 2010 — Leave a Comment

{[(

I “recently” realized that one of the most important things to do when writing any sort of code, is to develop a clean and consistent coding style. Everyone has a preference as to where brackets go, and these styles also evolve over time, especially with growing screen resolutions. A quick wikipedia search will show a couple of interesting articles on the subject, which actually categorize the main coding styles. Programming style and Indent Style (courtesy of Wikipedia).

Here is my coding style, which evolved by absorbing the styles of various people around me:


while( flash > noFlash )
{
     if( phoneOS == ANDROID )
     {
          var webEnjoyment = 1000;
          var hackingAndTinkering = true;
     }
     else{ trace( "Not switching back yet." );  }
}

So to summarize my coding style:

I use a single tab for an indent
- (From my Java/C++ coding experience at Ryerson)
Every code block enclosed in “curly brackets” is indented one level in
Every open “curly bracket” can be followed down the page to it’s closing bracket
- A code block with only one line (like the else above) has both brackets on one line
- (Also came from my coding experience at Ryerson)
Regular brackets have a single space inside each bracket, to make the conditions they contain less “claustrophobic” and a little easier to read
- (I picked this up from my Humber Rich Media ActionScript teacher)

I also use a variation of this style for X/HTML and CSS:


<html>
     <head>
          <title>One Sick Webpage</title>
     </head>
</html>


#wrapper
{
     width: 19000px;
     border: none;
     margin: 0 0 0 2px;
}

p span { content: ".";  }

In the end, it only really matters that you are consistent, and that your style doesn’t leave you prone to errors.
So here’s my question … how do you write your code, and why?

Tagged AS3, css, PHP, XHTML