mojoPortal Change Blog - Podcasts powered by Odiogo

CMS Awards 2009 - Don't Forget to Vote For mojoPortal

noreply@mojoportal.com (Joe Audette) — Thu, 29 Oct 2009 19:22:49 GMT

Hey mojoPortal friends, tomorrow (October 30, 2009) is the last day of voting in the 2009 CMS Awards by Packt Publishing.

If you haven't already voted please vote, we need your support!

Results wil be announced on November 10.

Joe Audette ...
Click here to play

mojoPortal 2.3.1.9 Released

noreply@mojoportal.com (Joe Audette) — Sun, 27 Sep 2009 13:22:52 GMT

I'm happy to announce the release of mojoPortal 2.3.1.9, available now on our download page.

Whats' New

Easy content animation/slide shows

Our Html Content feature now has content animation built in. You can enable it in the settings of an Html Content instance and it will create a slide show based on the content using cool transitions that you can also configure in the settings. The animation uses the jQuery Cycle Plugin. It can rotate images paragraphs or any html content. People often ask how to rotate images in their custom skins, so I've also added image rotation in the andreasvicklund-02-alt2 skin to give an example how to do this.

Integrated Image Cropping

We now have easy to use image cropping built into the image browser/uploader in our editors. We also have image cropping integrated into the user uploaded avatar system so users can upload a larger image then crop it to create their avatar. We used the jQuery jCrop plugin to implement the user interface for cropping.

Integrated Twitter Widgets

We now have built in widgets that can be used to show your tweets or twitter search results.

New Configuration file for TinyMCE

Due to community requests to have more control over which plugins and toolbar items are displayed, I've implemented an xml config file that gives you control over these items. The file mojoTinyMCE.config located in the root is used by default. To customize it you should copy and rename this file then change the setting in Web.config to point to your custom file.

Bulk Image Upload in the Image Gallery

We added bulk upload to the Folder Gallery in the last release and users have been asking for the same thing in the other Image Gallery so we have added it there as well.

Usability Improvements

Also due to community feedback and my own observation from support questions, the use of the gear icon for feature instance settings was changed to use a text link by default. Those who prefer the icons can add this to their user.config file to override the new default.
<add key="UseTextLinksForFeatureSettings" value="false" />
I wanted to make the same default change to use text links also for the main administration links but I found that forcing it globally could affect the layout of existing custom skins, so I kept the default to use the icons but added an option that can be specified on the StyleSheetCombiner control in the layout.master file of a skin to specify whether to use icons or text links:
<portal:StyleSheetCombiner id="StyleSheetCombiner" runat="server" UseIconsForAdminLinks="false" />
The default setting is to use icons, but for most of the included skins I changed it to use text links and updated the skin layout so that the text links could render without affecting the layout. Note that if you are upgrading and want to use the latest versions of the skins you will need to copy them from /Data/skins to /Data/Sites/1/skins after upgrading because we only update the skins in the library not in individual sites.

Miscellaneous

Updated Italian resources thanks to Diego Mora

Updated Spanish resources thanks to Matias Molleja

Various bug fixes for things reported in the forums since the last release.

Joe Audette ...
Click here to play

mojoPortal Is a Finalist in the 2009 CMS Awards

noreply@mojoportal.com (Joe Audette) — Tue, 22 Sep 2009 12:52:26 GMT

I'm happy to announce that thanks to your nominations, mojoPortal is a Finalist in the 2009 Open Source CMS Award sponsored by Packt Publishing.

So now we are in the voting stage and we need your vote. Don't be confused and think you already voted, that was just the nomination phase.

The Voting Stage ends on October 30, 2009 and winners will be announced on November 9, 2009, so please vote today. The award will be decided partly by voting and partly by judges who will vote based on their own evaluations.

We are competing for the "Best Other Open Source CMS Award", where "Other" means non-PHP technology. We won this category in 2007 and were a finalist in 2008. mojoPortal has improved so much over the last 2 years that I hope we can do well again this year, but to the extent that voting is involved its an uphill battle competing against projects with larger communities who may be able to generate more votes. So I hope you all will take a minute to cast your vote.

Joe Audette ...
Click here to play

mojoPortal 2.3.1.7 Released

noreply@mojoportal.com (Joe Audette) — Thu, 10 Sep 2009 15:59:25 GMT

I'm happy to announce the release of mojoPortal 2.3.1.7, available now on our download page.

More Editor Improvements

The File Browser/Uploader that we implemented previously in TinyMCE is now also working in FCKeditor and CKeditor so that users have a common browse and upload experience in each of these editors. So we now have equivalent functionality in TinyMCE and FCKeditor but in CKeditor we do not yet have integration with our content template system or content style system.

New User Avatar System

We've had a lot of requests for an avatar system that allowed users to upload their own avatar. There is a new setting for Avatar System in Site Settings where you can choose User Upload or Gravatar. If user upload is enabled then an upload button will appear on the user profile page allowing them to upload an image. The image will be resized according settings in the Web.config file for AvatarMaxHeight and AvatarMaxWidth.

Image Gallery Improvements

We now have support for the Vertigo Slideshow which uses Silverlight to create a really nice slide show of images in the gallery. You can enable it from settings in the gallery. Since the Vertigo Slideshow can also consume images from your Flickr account, we also added a new Flickr Gallery Feature which also uses the Vertigo Slideshow.

Blog Improvements

We've added support for using IntenseDebate or Disqus for the comment system in the blog. For the moment I recommend IntenseDebate because there are some issues I encountered with Disqus. Specifically, I could not get it to work correctly n IE 8 though it works reasonably well in Firefox and Chrome. But even when using Firefox or Chrome it does not work correctly if you try to post a comment as an anonymous guest. The integration steps are trivial so I don't think I've done it wrong but believe the problem can be fixed on their end. I've let them know about it and hope they can resolve it. Give it a try if you like but be aware about these issues since at the time of this writing they are not resolved. I'm now using IntenseDebate in this blog. I implemented it such that if you have existing posts with comments in the internal comment system those posts will continue to use the internal comments but new posts will use the current setting.

Its now also possible to post future posts from Windows Live Writer. Previously it was ignoring the publish date passed in from Live Writer.

Its also now possible to require users to sign in to view the full blog post when using excerpts in the main blog page.

Re-Organized Css In Included Skins and a New Skin

Based on community feedback I've re-organised the css for included skins to make it easier to find what you are looking for. Previously we had things separated a little too cleverly with colors in one css, borders in another and text related settings in another. This made the css a little less approachable and less intuitive. I've combined those files into one style.css file and renamed some other css files so they sort together in the file system and are easier to find. You can of course organize the css files in a custom skin any way you like by listing which file to include in the style.config file. Ultimately they are all combined and minified into one request by our CSSHandler. The style config file for included skins now are including the following files:

<file csswebconfigkey="YUITabCss" imagebasewebconfigkey="YUISkinImagePath">none</file>
<file cssvpath="/ClientScript/oomph/oomph.css" imagebasevpath="/ClientScript/oomph/">none</file>
<file cssvpath="/Data/style/cluetip/jquery.cluetip.css" imagebasevpath="/Data/style/cluetip/">none</file>
<file>style.css</file>
<file>stylemenu.css</file>
<file>styletreeview.css</file>
<file>styleblog.css</file>
<file>styleforum.css</file>
<file>stylefeedmanager.css</file>
<file>styleformwizard.css</file>
<file>stylewebstore.css</file>
<file>styleaspcalendar.css</file>
<file>styledatacalendar.css</file>

so we still have some separation but the main style.css has most of the common css.

We also have a nice new skin with a cool menu style thanks to Joe Davis of i7Media

What Else?

Updated Polish Translation - thanks to Przemyslaw Luniewski.

Updated Italian Translation - thanks to Diego Mora.

A number of bug fixes for things reported in the forums since the last release.

Joe Audette ...
Click here to play

Some Cool New mojoPortal Sites

noreply@mojoportal.com (Joe Audette) — Mon, 07 Sep 2009 14:18:46 GMT

Just a quick post to highlight a few cool mojPortal sites that have com to my attention recently.

12th Street Sports Bar - Tim Cartwright of US Interactive did a great job with this site for the show on Fox College Sports TV Channel.

b square, a site designed by TEAK. Notice that they implemented multiple languages and a cool language switcher and this was done with no changes to the core of mojoPortal.

Yamisee.com designed by David Dean, as David describes the site, "Yamisee.com is a new concept that allows anyone who is an expert in a field to easily post course descriptions, and deliver live content in unique virtual rooms. The site is not even at an alpha stage, but early adopters can register and launch instant meetings or schedule online meetings for free. It's a webex like experience (that part is not mojo), with enhanced meeting rooms that allow for visual, non-verbal feedback coming soon."

Antioch Community Church designed by Joe Davis of i7 Media. I really like the menu design with 2 levels of horizontal menus. Joe has even made a free skin available to the community with a menu design like this.

Adamson UAE, submitted to our Success Stories Forum just this morning has a very nice design.

cmstream.net is a site brought to my attention recently. The most interesting thing is that the site is running on Linux using Mono.

If you're doing cool things with mojoPortal let us know, we'd love to hear from you.

On a side note, this site is running the latest code testing new features for the coming release. As you'll notice for this blog post I'm now using IntenseDebate for the comments. I've also implemented support for Disqus so you will have a choice to use that as well though I'm currently finding some issues with Disqus that I'm hoping they can fix on their end or advise me on what I can do. I've added a new setting in the blog where you can choose the comment system with options Internal, IntenseDebate, and Disqus. I also implemented it such that if you have existing posts with comments already made using the internal comment system, those posts will continue to use the internal comment system but new posts will use the currently selected comment system. So this is my first post using IntenseDebate. I look forward to seeing if this increases the amount of comments or not.

Joe Audette ...
Click here to play

mojoPortal 2.3.1.6 Released

noreply@mojoportal.com (Joe Audette) — Sat, 29 Aug 2009 15:37:45 GMT

I'm happy to announce the release of mojoPortal 2.3.1.6 available now on our download page.

More Improvements in our TinyMCE editor integration

This release comes fast on the heals of our 2.3.1.5 release and it is primarily focused on polishing up our Tiny MCE editor integration. Thanks to all who provided great feedback in the forums, especially Eric Stoffers who helped make our file browse layout a little prettier and more informative. Here is a screen shot of our file browser/uploader:

The most significant improvement is that we now have automatic image size adjustment for the web. Its optional, users may uncheck the box and no resizing will occur for cases where you are uploading images that you have already optimized for the web. The default resizing options come from the Web.config but users are able to override them by setting the Max Width or Max Height according to their own preferences. We've all seen our users upload huge images right from their 10 mega pixel cameras then just set a width and height on the img tag to make it display the right size. But the result of that is a page that loads very slow because it has the mega large images and disk space is consumed rapidly as well. So, our new solution is designed to make it easy to do it right but not take away control from more savvy users.

Also requested was an option to configure the skin used by TinyMCE. We now have a setting in Web.config that you can override in user.config to set the skin for TinyMCE.

To my eyes the default skin looks the best and cleanest of them.

I purposely remove some toolbar items from the editors because they are not suitable for a skinnable content management system. Items for selecting fnt size, font face, font color and background color, are all things that put hard coded styles into your content and then the content is not subject to skinning. In order to be able to completely change the look of your site by changing skins you need to avoid hard coding any kind of style into the content itself and always use CSS. Our style template system allows you to create items in the style drop down of the editor that corresponds to css classes in your skin. So you can make some pre-defined styles to help your users rather than let them hard code styles. Now I'm not trying to force this on anyone, I'm just trying to make it easy to do the right thing and a little more difficult to do the wrong thing. If you really want those hard coded style toolbar items in your editor you can enable it in Web.config/user.config with by changing this setting to true:

but, my opinion is that one day you will regret it when you decide to re-design your site with a new skin and none of this hard coded content looks right in the new design.

After switching to TinyMCE here on mojoportal.com I had noticed that the forums were starting to get juinked up due to things users paste into the editor. In FCKeditor I was already forcing paste as plain text in the forums but now I have implemented the same thing in TinyMCE. This helps avoid page validation problems when users copy and paste from word or html pages. You can get invalid markup and missing closing tags that can mess up the page. This was very common when pasting errors or code fragments.

Also there were two bugs reported about our TinyMCE integration and these have been fixed. The first was that although our file browser was always using urls relative to the root of the site, TinyMCE was changing them to relative to the current page and this could make links incorrect if you viewed the content on a different page like in the content manager. It also could prevent us from correctly restoring the absolute url on outbound feeds for images or links that were posted in the blog. This was merely a configuration issue, it is the default behavior of TinyMCE, but it was easily disabled once I realized it was doing that. The second bug was that when running mojoPortal as an application in a sub directory instead of as a root site, the file browser was incorrectly resolving the root for uploads at the root of the main site rather than the root of the mojoportal application. This has also been fixed.

This release also includes a minor enhancement in our content manager. It now shows the use count of content instances making it easy to spot content that is not published anywhere.

There was also a bug fixed in the search index where page titles and content instance titles were not causing a match in search results unless the content itself also had the search term.

A Note About Our Versioning Scheme

In a post on CMSREport.com, Bryan Ruby commented that

Although you wouldn't expect an application with the version number of 2.3.1.5 to contain anything but bug fixes, in the world of mojoPortal almost every release contains new features for the CMS.

I thank Bryan both for the coverage and the comment. I suppose my use of versions is a bit different than many other projects so its worth mentioning what my versioning strategy is based on and clear up any confusion about what if anything is implied in the version number.

For most projects I think versions come down to major.minor.build.revision and often features are targeted for a new major version number. We use the same kind of format like 2.3.1.6 but our versioning is simply incremental and is based on our upgrade system. Any time we need to run a new script for any of the db platforms we increment the version. We only use a single digit between each . so we never have versions like 2.3.90.20, its just simple incrementing. So as soon as I need to run a new script I will create the next script file named 2.3.1.7.config (different script with the same name for each db platform). I may not need to run a script against every db platform but I keep the versions the same and create an empty script file if needed since we have different sets of upgrade scripts for each db platform. I then change a version variable in the code also to version 2.3.1.7 and this is how mojoPortal determines that it needs to run upgrade scripts, because each script increments the schema version stored in the db itself, so if the code is a higher version than what the current schema shows it knows it needs to run upgrade scripts to get the schema to the same version as the code. This scheme makes it easier to sort the script files correctly to run them in the right order. Sometimes the version will increment several times between releases but it does just increment linearly and really has no special significance for implying some magnitude of release or major milestone. This corresponds to our incremental short release cycle. We target a few things for the next release, make a development sprint, and as soon as we feel its stable we make a new release.

Probably the biggest problem we have with our short release cycles is release fatigue. People do get tired of upgrading but its really up to them how frequently they upgrade. If the new release has new features or fixes that you're dying to have then you have the choice to upgrade. I think that is better than making you wait a long time for features that are ready or bugs that are already fixed. I don't sleep well at night if I know people are still downloading a version with a bug that I have already fixed. I mean some bugs are trivial but if its something that I think is causing a nuisance to people on a daily basis I like to get the fix out as quickly as possible.

Some of you may find it better to wait a bit after a new release and keep your eyes on the forums for bug reports, but then if everyone does that it just delays the feedback cycle so its helpful to me if many of you do try each new release. I'm always dogfooding the latest release and new builds in between releases on this site to try and find any bugs before making a new release. I don't have a team of Quality Assurance testers other than the testing that comes from the community. Those of you working with the latest releases and especially those of you working with the code from svn trunk and making your own builds and providing feedback in between releases are a huge help and I thank you for that.

Joe Audette ...
Click here to play

mojoPortal 2.3.1.5 Released

noreply@mojoportal.com (Joe Audette) — Mon, 24 Aug 2009 19:14:56 GMT

I'm happy to announce the release of mojoPortal 2.3.1.5, available now on our download page.

Whats New?

Tiny MCE Editor Rises To The Top

For a long time now the FCKeditor has been the best editor available out of the box in mojoPortal. It was the only one with the ability to browse and upload images and files, it was the only one with integration for our Content Template System and Content Style System, and it was the only one with a spelling checker. Not anymore! I had not upgraded the Tiny MCE editor in a long time, I had tried to once and it broke and I was busy so I reverted to the working version. But recently we've been having some issues with FCKeditor so I decided to give the Tiny MCE upgrade another try. At did not work as before but I pursued it and debugged it and found how to make it work. Then I began looking closer at the documentation and found it was really good, it even described the basic steps to build your own image browser/uploader and integrate it. I also learned how to integrate our content templates and styles. Implementing the file browse and upload was both challenging and fun. I used the jQuery File Tree, which I then extended to be able to monitor folder selection in addition to file selection, and to pre expand to the current folder after a full postback/redirect which we do when uploading files or creating folders. Then I found that they actually provide .NET code in their library to implement spell checking against the google spelling checker services. The code was very easy to integrate and it works so much nicer than the spelling checker in FCKeditor. You basically click the spell checker button and it puts squiggly lines under suspect words, you right click it and it suggests a correction. So nice! I'm notorious for typos in my blog posts, this is going to help!

CKeditor 3.0

So where does this leave us with FCKeditor you might ask. Well, the makers of FCKeditor are moving forward with a revamped version named CKeditor and they just made the first release of CKeditor 3.0. It's also already integrated with mojoPortal and I've enabled it in the new release for you to check it out. It does not have image browse or upload and it is no integrated with our content templates or styles, but it does work. The biggest problem is there is not yet enough good documentation to figure out how to do those things, but it looks very promising and I'm sure the documentation will get there at some point.

New Permissions Tab In Site Settings

In polishing up the image browse and upload experience I decided to move some settings that were previously in Web.config into Site Settings to make it easier to manage. Specifically we now have a Roles That Can Browse and Upload setting. Users in the selected roles can browse and upload starting at the /Data/Sites/[SiteID]/media folder. This is appropriate for content authors. Admins and Content Admins can browse from the /Data/Sites/[SiteID]/ folder as before. There is also a separate Roles That Can Upload and Browse to a User Specific Location. This is appropriate for users who you don't want to be able to browse your media but can upload and broswe images and other files. For example you can allow forum users to upload files if they are in these roles. The allowed file extensions are controlled from Web.config. You will find these settings in a new tab named "Permissions" under the Site Settings > Security Tab.

NeatUpload 1.3.18 Upgrade

I also upgraded to the latest version of NeatUpload. But even better, I read the documentation again and noticed something I should have noticed a long time ago. Dean Brettle, the author of NeatUpload has built in an easy to use Multi-File upload, so I have integrated it into the File Manager, Shared Files, Image Gallery, and Folder Gallery features to allow you to batch upload files. If you have Flash 8 or higher you can even ctrl-select files all at once. Pretty sweet! NeatUpload is really the best upload component for ASP.NET and its free.

Changed The DOCTYPE to Html 5 for included skins

I was tempted to do this last release but after more experiments with Html 5 I decided to do it this release. If you don't agree its easy enough to change it back to Html 1.0 Transitional in the layout.master file of your skin. This only applies to the skins I ship, if you are upgrading and have an existing skin using Xhtml it will continue to be the same. Be aware that I'm aware that there are a few places where pages do not validate as Html 5 including the login and registration pages. If you have a problem with that then please just keep using Xhtml doctype. Html 5 is still just a draft so I'm not going to get too worried about a few places where it doesn't validate, the spec may change before it becomes a standard. It validates on most pages. The things that don't validate are iframes with frameborder and scrolling attributes. Making them validate would make the page ugly and it has zero impact on any user if the page doesn't validate there, it works in all known browsers.

Minor Blog Enhancement

Added a new setting for the default allowed comment days in a blog. Previously if comments were enabled it just defaulted to 90 days and if you wanted something different you had to edit the setting on each post. Now you can set your own default.

Removed Site Office

Site Office was a prototype UI and plug-in system that was disabled by default and included no real working features that plugged in just a few stubs to demonstrate the plug-in system. It was designed for more of an application style UI rather than public web site UI. I originally built it using ExtJs but they changed licenses and I could no longer get upgrades. I've done some preliminary work to re-implement it using YUI but its not finished. I decided to remove it because the ExtJs javascript was about 9MB on disk so this reduced the size of our download packages. Developers who still want to use it can still get it from svn and deploy it themselves.

New and Updated Translations

New Hebrew translation thanks to Daniel Szasz

New Polish translation thanks to Przemyslaw Luiewski

Updated German translation thanks to Jan Aengenvoort

Bug Fixes

There were a number of bug fixes, primarily issues with some features when used in folder based child sites. A few issues that only affected pgsql. Thanks to all who reported these issues!

Joe Audette ...
Click here to play

New Training Videos Thanks to Expression Studio

noreply@mojoportal.com (Joe Audette) — Tue, 11 Aug 2009 19:53:48 GMT

Recently, Microsoft announced the release of Expression Studio 3. I was very excited about this because I noticed that my MSDN subscription included it whereas in the past all I had access to was Expression Blend and Expression Web. Kudos to Microsoft for making the whole of Expression Studio available to MSDN subscribers. I don't know if it applies to all subscription levels but whatever I have now includes it and its awesome!

The new parts for me are the Expression Screen Capture and Expression Encoder. I was heavily involved with streaming Windows Media Video years ago like 2003-2005 ish but the new Silverlight technology is so much nicer today. Anyway, the Expression Screen Capture tool is like Camtasia and Wink and other screen capture tools but its pretty darn easy to use and the Expression Encoder can encode the resulting screen capture into various formats, especially .wmv that is optimised for Silverlight, but also formats like mp4 suitable for upload to YouTube or Facebook etc.

I've found some issues with the audio getting out of sync with the video on YouTube but don't really know if its some fault of the mp4 file I upload or the conversion process to Flash that YouTube does. Some of the videos I uploaded to YouTube are better than others in this regard, but the Silverlight versions are consistently good.

There is even free hosting for some Silverlight files up to 1 GB total on http://silverlight.live.com/ and I'm serving my Silveright training videos from there. Expression Encoder can generate an html page to host the video and its easy enough to modify it to point to the video on the silverlight.live.com site.

So I spent the last 2 days doing some screen capture tutorials for mojoPortal using these new tools. For most of the files I uploaded alternatives on YouTube that don't require the Silverlight plugin, but as mentioned a few of them have audio video sync problems but not real bad. Best if you can watch them using Silverlight though and one of them, the Introduction to the mojoPortal Source Code is 20 minutes long so it was too long to upload to YouTube as they limit you to 10 minutes.

Here is a list of the video tutorials I made in the last 2 days:

I was long overdue to make some more video tutorials and having these nice new tools inspired me to spend a few days on it and it was kind of fun. Hope you find them useful and informative. Now back to regularly scheduled development ;-)

Joe Audette ...
Click here to play

mojoPortal 2.3.1.3 Released

noreply@mojoportal.com (Joe Audette) — Mon, 03 Aug 2009 18:39:06 GMT

I'm happy to announce the release of mojoPortal 2.3.1.3, available now on our download page.

What's New

Content Workflow!

Huge thanks go out to Kevin Needham! He did a great job implementing Content Workflow for mojoPortal. Currently its only supported in the Html Content feature but it is extensible so we can use it in other features going forward. Kevin did a great job figuring out where things needed to go, it showed he really understands the mojoPortal code. People have been asking for a better way to have a content approval process for a long time and it certainly wasn't trivial coming up with a plan and implementing it so it fit in well with the existing architecture. He proposed a strategy that made sense up front before he began and then was able to implement it without much involvement from me. He setup a private demo site so I could review the functionality for usability before he submitted the code. The code he submitted was very high quality, I implemented the alternate database support and did a little re-factoring here and there but he pretty much nailed it. I hope he will continue to be involved with the project as it was a pleasure working with him to get his work integrated into the core of mojoPortal.

Web Store Improvements

As mentioned in my previous blog post, the Web Store now supports teaser files for download products. The main use case I focused on was the ability to sell mp3 files with a teaser file and media player so musicians can use mojoPortal to sell their own mp3 files on their own web site using PayPal or any of the other supported payment options. It should be useful for other use cases as well, like selling pdf e-books and maybe having 1 free chapter or table of contents as a teaser file. It could also support a trial version for selling software downloads.

Additionally I implemented a back end order entry system so an admin can create orders. This is useful for situations where the customer does not want to purchase directly on the web site. Recently a school system inquired about buying my products with a PO number and having me invoice them, so I whipped this feature up so that I could create the order after receiving payment by check.

Miscellaneous

We've also added a setting to the blog for the default comments allowed days. Previously it always defaulted to 90 days and you would have to change it on each new post if that was not the desired setting, but now you can set a default preference.

Updated Italian Resources thanks to Diego Mora
Updated French Resources thanks to Thomas Nicolaïdès
Updated Japanese Resources thanks to Suzuki Teko

Its now possible to use Html 5 doctype easily if you choose to as mentioned in this previous post.

Various minor bug fixes as reported in the forums since the last release.

Note: You should add this to the style.config file in your skins:

to support a new jQuery tooltip we use in the content workflow.

Joe Audette ...
Click here to play

Issues and Strategies for Moving to Html 5

noreply@mojoportal.com (Joe Audette) — Sun, 02 Aug 2009 12:56:11 GMT

Primer on Html 5

There has been a lot of buzz in the blogosphere about HTML 5 lately, from google endorsing it as the future to the W3c dropping efforts on XHTML 2 to focus on HTML 5. The consensus seems to be that HTML 5 is the future and we should start planning on using it in the future and can even use it now. It should be noted however that HTML 5 is not a standard yet, but only a draft and is subject to change before it becomes a standard and current browser support is a mixed bag.

Some useful links:

23 Essential Resources for Html 5

Misunderstanding Markup - comic that explains HTML 5 vs XHTML.

Real World Issues for a Content Management Systems To Switch to Html 5

So from reading the above linked articles and others it seems like we can easily change to the HTML 5 DocType and things will be pretty much compatible at least as long as we don't use any of the new HTML 5 elements that might not be supported in all browsers yet. In mojoPortal the doctype is declared in the layout.master file of a skin so it can be a personal choice wheether to change to the Html 5 doctype now or not. Currently the doctype in our skins is XHTML 1.0 Transitional, so to switch to HTML 5 we would just change this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

to this:

<!DOCTYPE html>
<html>

In fact I've done that here on mojoPortal.com, though I'm running a newer build than the current release (dogfooding for the coming release), so you should probably wait for the next release to do this if you want to. One of the things I've added is an option on our validator link to configure it for HTML 5 instead of XHTML like this in layout.master:

<portal:XhtmlValidatorLink id="lnkw3cValidator" runat="server" UseImage="false" Html5="true" />

This Html5=true merely changes the label and/or image on the validator link to HTML 5. I've also added a property IncludeHtml5Script to our IEStyleIncludes control

<portal:IEStyleIncludes id="IEStyleIncludes1" runat="server" IncludeHtml5Script="true" />

if set to true we inject the javscript as mentioned in this article inside IE browser comments to make it possible to use some of the new HTML 5 elements in IE 8 (though I'm not actually using them yet to avoid compatibility issues you could use them in custom features). So it renders in the page like this:

Ok But Aren't There Any Gotchas?

I got kind of excited about changing the doctype to Html 5 just in preparation for the future even though ~~we can't use the new Html 5 elements yet without breaking some browser compatibility, especially for IE 6~~. I'm sick of caring about IE 6 myself and admittedly some of our skins are a little funky in IE 6 today and I don't care enough to fix them though some of them work pretty well too. Its long overdue for users of IE 6 to upgrade. But its still in wide enough use that many web site owners do care and you can make skins that work well in IE 6 using mojoPortal its just more work tweaking the IESpecific.css file and testing in IE 6. Anyway after changing to HTML 5 doctype on mojoportal.com and testing in IE 6 and not seeing any major problems I thought I would change the included skins to HTML 5 for the next release. I did this yesterday but reverted it today. I had been testing using the wc3 validator using the direct input method, viewing the source of the page and pasting it into the validator and was happy because it was reporting it as valid HTML 5. However after testing some pages on mojoportal.com using the validator link or using the url input method I got different results. It seems there is a bug in the w3c validator where if you use direct input it passes things that should not pass but when you use the url it finds problems on the same page it validated as direct input.

Specifically what I ran into was border is not a valid attribute on img and frameborder and scrolling are not valid attributes on iframe, however the presence of these attributes does not seem to be detected correctly with the direct input validation but it is detected using url validation. I reported this bug to the w3c public mailing list tis morning. Fixing the border on img was fairly easy so I did that, you can easily set the border on img using css so its really not needed to use border="0" to remove a border for example. However the iframe issue is a lot more of a problem. If you remove frameborder="0" from an iframe there is no way to remove the 3d border that is rendered in current browsers using CSS. I don't think there is a working CSS alternative to scrolling="no" either. So for the moment I choose to just live with it that a few pages on mojoportal.com won't validate but for the skins included in mojoPortal I decided it was pre-mature for me to change the doctype to HTML 5 and changed it back and leave it up to users if they want to do that.

As previously mentioned, HTML 5 is currently just a draft so I don't want to get too concerned with validation against it while its still draft. Who knows since current browsers don't ~~work well~~ look right with iframes that don't use frameborder=0 and scrolling=no, maybe they will change their minds about dropping these attributes or give us an HTML 5 Transitional to validate against that will allow these for backward compatibility.

So where does that leave us?

Well I think we have to proceed cautiously and very slowly toward HTML 5 but we are very limited in what we can do in mojoPortal without breaking compatibility especially for public facing features. If I were to start using new elements and attributes of HTML 5 it will break validation for those who choose to continue using the XHTML 1.0 Transitional doctype in their skins and it would probably break functionaility and visual layout in some browsers. Potentially we could move forward in the admin pages and other non public facing pages but the benefits would be minimal. The real value of HTML 5 will be when we can use it for public facing pages, the improved semantics available using the new elements like header, footer, section, nav, article, aside etc will be of most value in public facing pages, but we really can't move there yet because of the mixed browser support. Once HTML 5 graduates to a Standard instead of a draft and browser support for the new elements is more widespread it will be tempting but we will still be faced with that fact that many people use old browsers, perhaps even we will be waiting for the end of life of the current crop of browsers anxiously like we are waiting for IE 6 to go away today. The benefits of changing to HTML 5 doctype today are minimal and there is the minor downside of losing validation on some pages where we are using iframes and maybe other issues that I have not bumped into yet. HTML 5 does indeed look like the future but the future is not here yet unless you are willing to ~~give up support for IE 6 and possibly even IE 7 as I'm not sure if the javascript trick for lighting up the new elements in IE works in IE 7 as it does in IE 8~~. (update it does work) I for one don't see the merit in building browser specific applications, the huge benefit of the web has been the ability to write apps that work in all browsers though of course there have been bumps along the way like supporting Netscape 4 was back in the day and like supporting IE 6 is today, it takes some extra work. I don't want to try and move forward too fast and find myself battling to get things working in all browsers. I'm tempted to change my doctype on this site back to Xhtml 1.0 Transitional since I'm not really getting any benefit from changing to HTML 5 doctype though I have not had any major problems other than some validation issues everything seems to work the same and nothing is visually different in any of the browsers I tested.

UPDATE 2009-08-03

I actually tried this javascript create element technique with IE 6 and it seems to work! So even though the article says IE 8, it seems it should also work for IE 6 and 7. So maybe it is possible to switch to Html 5 and use the new elements. So the remaining issues would be that there will be some things that don't validate like framborder=0 and scrolling=no that we would still need to use. And the problem still remains that if I were to start using the new html5 elements that would mean that all users of mojoPortal would need to change to the Html 5 doctype because the new html 5 elements are not valid for Xhtml.

Joe Audette ...
Click here to play