HTML 5

HTML 5 Markup Language

There are two major specifications competing to replace HTML 4 and XHTML 1. They are XHTML 2.0 and Web Applications 1.0, also known as HTML5. These coding languages take different approaches and will no doubt have different outcomes in terms of the future development and design.

html5

XHTML 2 is a bold step forward intended to create an architecture that will become the host language to many other W3C technologies already in use. XHTML 2 is based solely on XML, a technology that most believe will enable the Web to reach its full potential. XHTML 2 is driven by how markup should be used, rather than by how markup is currently used.

Live Writer Preview

Live Writer


View Space


Easily format text and images for any blogging platform. What I really like about Writer is the ease in which you can insert your images and choose from a wide range of effects to style them like rotate, multiple border options, reflections, rounded corners and drop shadow.

Full Feature List
Here’s a list including some of the new features added since Windows Live Writer 2008:

  • New border treatments (including Instant Photo)
  • Crop and tilt photos
  • Insert multiple photos with built in effects
  • Toolbar alignment commands enabled for images
  • Insert and publish video
  • Server-side tagging (for supported blogs)
  • Twitter, Digg and Flickr Plug-ins
  • Lightbox and Windows Live Spaces inline preview support
  • Improved category control: adding categories, type-down filtering
  • AutoLink previous posts with glossary
  • Smart quotes/typographic characters
  • Word count
  • Support for languages
  • Tabs for view switching

Writer makes posting photos and video to your blog even easier than before. This entry was posted from my desktop using Live Writer.

Easy Jquery Image Rotator

The other week I had a friend ask me for a simple script to rotate a few images on his web page. Sounded simple and I even assumed I would not have to re-invent the wheel, but after an hour of searching for a lightweight script I was surprised to find that unless you were willing to install rather large plug-ins along with jquery there were not allot of options for the simple rotation of images except out-dated scripts. So I decided to come up with my own image rotator that uses jquery's already built in effects.

Jquery Image Rotator Functionality Checklist.

What we need our Jquery image rotator to do:

  1. Rotate Images with Links.
  2. Valid XHTML.
  3. Lightweight Script.
The Rotator as I have come to call it will simply auto rotate through a list of images with a smooth fade effect without the need to include an extra plug-in on top of Jquery.

Let's look at the XHTML, CSS, and Jquery Javascript that makes it work.

Jquery Image Rotator, View Demo, Download Source.

Image Rotator

The HTML for our jquery image rotator gets placed in the body of your page.


<div class="rotator">
  <ul>
    <li class="show">
    <a href="javascript:void(0)">
    <img src="images/image-1.jpg" width="500" height="313"  alt="pic1" />
    </a>
    </li>
    <li>
    <a href="javascript:void(0)">
    <img src="images/image-2.jpg" width="500" height="313"  alt="pic2" />
    </a>
    </li>
    <li>
    <a href="javascript:void(0)">
    <img src="images/image-3.jpg" width="500" height="313"  alt="pic3" />
    </a>
    </li>
    <li>
    <a href="javascript:void(0)">
    <img src="images/image-4.jpg" width="500" height="313"  alt="pic4" />
    </a>
    </li>
  </ul>
</div>

The CSS

/* rotator in-page placement */
        div.rotator {
	position:relative;
	height:345px;
        display:none;
}
/* rotator css */
	div.rotator ul {
	margin:0;
	padding:0;
}
	div.rotator ul li {
	float:left;
	position:absolute;
	list-style: none;
}
/* rotator image style */	
	div.rotator ul li img {
	border:1px solid #ccc;
	padding: 4px;
	background: #FFF;
}
        div.rotator ul li.show {
	z-index:500;
}

The JavaScript

Include jquery and the below script in your page or in an attached file.



To activate jquery image rotator place the above code in your page head or an attached file. You can adjust the time before the next image appears by altering the setInterval value as well as the fade time itself by changing the animate duration.

Setup Facebook Connect Commenters on Movable type

Today we will explore how to install Facebook Connect Commenters with Movable Type 4.25 and the Mid Century Template Set, and actually get it to work. You can add Facebook Connect to any Movable Type blog, allowing Facebook users to sign in, comment, and share their actions. Facebook Connect, will automatically display a Facebook commenters name and photo next to their comment while allowing them to easily sign in to comment. The first step is to get and install the latest version of the facebook connect commenters plug in. (note: if you haven't upgraded Movable type to 4.25 I highly suggest going ahead and upgrading MT as you normally would with the community version that is now availabe at http://www.movabletype.com/download/ and grab the blogger version.)

Facebook Connect Commenter

After the plug in has bee installed you need to navigate to your mt blogs preferences Registration page, check Facebook as a registration method and click setup. This will take you to your mt blogs plugin page where you need to select the facebook connect commenters plugin settings area and "edit facebook app". This will take you to Facebook where you can sign in and create your app to communicate with Facebook Connect.

Creating the app is very simple. First under the basic tab give your app a name and email click save and than click the connect menu tab on the left side of the page. Once in the connect area you will need to enter the website url of your blog in the Connect URL box. You can also include a logo if you like in this same area.

Facebook Connect

Once complete save your changes and take note of your Api key and Secret as they will be entered into the Movable Type Facebook Connect Commenters plugin area. The next step is to do just that by entering your Facebook Api key and secret number into the Facebook Connect Commenter settings area and click save. At this point your facebook app is all set up and ready to go.

Now we need to make some template changes. The MT Facebook Connect Commenters plugin comes with a template example that does work but it really depends on your current blogs setup. The templates I will be discussing are for the Mid-century template set but can be adapted for other styles as well. Just be sure to compare templates carefully and make frequent backups. (note: If you haven't checked out the mid century template set your missing out on some really great movable type features.)

The first template change is to simply add <$MTGreetFacebookCommenters$> to your html head template so that is included in your pages. This will call all of the necessary code to allow facebook connect users to sign in, pull userpic photos and names.

The next template change is a 2 part step and is very important for enabling the facebook commenters userpic to be included. First go to your main entry template and remove onload="mtEntryOnLoad();" from the body tag as it will conflict with the facebook connect onload tag that is being used. Save your changes and next navigate go to your Comments template module and add this code in script tags.

mtAttachEvent("load", mtEntryOnLoad);
mtAttachEvent("unload", mtEntryOnUnload);


Without this step you will not be able to pull facebook userpic photos and will instead just get the facebook default user pic which look like a question mark.You can add the code just above your form or at the very bottom. As long as it is not included in the body tag itself but rather inside the body it will not conflict with facebook connects onload action. View my comments template

For our final step we will need to edit the mid century Individual Comments template to include the code for facebook connect commenter userpic photo, link and name. There are a few ways of doing this depending on your blogs setup but in this case we do not need to edit our Userpic module as all the necessary code will be included here. View my Individual Comments Template

Great job, all that's left to do is publish your blog to view your changes. To see the plug-in in action you can sign in with facebook connect and post a comment.

Movable type Facebook Connect Commenters templates.