Moving to HTML 5

Dateline 6/20/2010

Except for a brief placeholder in June of 2009, it has not been 2 years since I've added to this history blog. The website is now around 400 pages with the most growth in the "shop" section with a number of new machine tools and the like showing up there but I have slipped other stuff in as well, sometimes well identified as 'new' and sometimes not. Most often the updates to older pages involve slipping some additional photos on the page. Lately, I got a scanner that will scan slides and negatives, so I can go through some of the older things and add some more photos.

I continue to have a long term goal of reworking the site to retire the <FRAMES>, but I have put that on hold for the moment as the feature set of HTML 5 makes menuing an organic HTML feature, and I don't see a reason to Kludge up menus using the current markup language only to rework it again when HTML 5 is more widely supported. As for that we are getting there. I now believe most if not all of the major browsers except Microsoft explorer have significant HTML 5 support, and are adding it aggressively. As I write this IE has released a couple developer editions of IE9 but it is quite a ways from being complete. They are at least talking the talk of supporting HTML 5 and in particular HTML5 video. Unfortunately HTML 5 video isn't yet defined because the forces of nature are jockeying for position over the file formats.

The <VIDEO> is a big deal The Apple ipad is forcing the issue and hopefully I can avoid the use of flash by just holding out until the browsers agree on what to support. Firefox, Chrome, Safari, and Opera which together with IE have most of the browser market should rally around a common way of doing things pretty quickly once IE9 shows itself fully. IE 9 will not support windows XP which will require XP users to use a non IE product to get the benefits of the HTML 5 power.

I am expecting that by 2011 things will be much more settled as to HTML 5. As it turns out I haven't yet gotten the camera needed to take any video's so I don't have a budding library of videos to present anyway. I do have a sample video that can be viewed at Sample bulldozer video

Dateline June 25, 2011

It's hard to believe that it has been a year since I commented here on things. IE9 is out as is Firefox 4 and now Firefox 5 which seems to be nothing more than a minor bug fix of version 4. Google Chrome 6 is hanging around along with a version of Safari. All to varying degrees support HTML 5. I did get around to buy a camera that will make movie clips A Pentax K5 but there is still no consensus or resoution as to a proper file format to be used with the <VIDEO> element. I'm beginning to think that Flash will be with us for a long time to come.

My other long term goal has been to retire <FRAMES>, but the vehicle for doing so has not been obvious. The frames work so well for the way I have built this web site that moving away from them won't be easy. I've tried some menuing programs but haven't gotten one that works in all the browsers yet. I can get close to the functionality that I have by putting the left hand panel in an <IFRAME>, but since I'm continually adding to the site I need open ended submenus that can be added to as I add pages.

One change I will likely make going forward is to once again make my photos---the expanded version larger. When I started doing photos, I had a crummy scanner for traditional photos and a dial up modem and little editing capability. Collectively this assured that I couldn't get a good large photo. I'm how using a 16MP SLR camera and it's photos are being reduced to 25% of their native size for the expanded '1200' pixel display that I have been using for several years. With the continuing upwards trends in bandwidth, I'm inclined to make the photos a bit larger---perhaps 1500 pixels wide to more fully fill the larger screens that are now pretty common.

I just upgraded to "coffeecup" version 12 build 373. This is a supported HTML editor that I have used for several years since the Hotdog from sausage.com ceased to be supported. It came out in 1995, but by 2008 faded away.

Dateline: December 8, 2012

Achieved some success today. On the road to HTML 5, I have upgraded my CSS file, and have converted the "Farming Stuff" section of this website to exclusive use of HTML 5. It all passes the code checker for HTML 5 verification as does the CSS used. Supported browsers include IE-8 and later, as well as current versions of Chrome, Safari, and Firefox, and in keeping with the times, I've also tested it against the DROID smart phone.

the major structural change is that I disposed of traditional frames, and us Iframes to display the common menus. (the stuff with the yellow background on the left and bottom of each page.) It has not required extensive editing. I've simply created an Iframe for the left hand menu and inserted it at the top of each page in the section. Code clean up includes moving all the deprecated attributes to CSS which primarily only exist in the Iframe statements and a few in the tables that display the images. Only a couple cosmetic changes will be visible. Specifically, in IE-8 only, there is no way to suppress the 'frameborder' in Iframe. It goes away with the use of a 'border' statement in CSS, but this is not supported in IE-8. As the use of 'frameborder' is not proper HTML 5 code, if you have a computer running on XP and still use IE-8 you will see frameborders.

The other cosmetic change is that the menu list on the left is no longer of infinite length. It will be long enough to display the list of pages, but will have a defined length, and beyond that text of the main page can wrap around it. Additionally, since the menu list is effectively a part of the display page, when the display page goes away to display the enlarged photo which you click on a photo thumbnail the whole screen will be available to display the photo, not just the righthand portion of the screen.

In other minor cosmetic changes, previously the cell padding and cell margins in the tables was not consistent and was hard coded. This is all moved to CSS so the tables holding photos will be all the same as to their display properties. In a bow to the really small screens of the DROID, the floating right side photos are being minimized as they have some display issues in small formats. I've by design put more space between the list items in the menu in recognition that crowded lists are difficult for fat fingers on a small touch screen.

Dateline: December 14, 2012

Well, I figured out one thing didn't work---and that was moving the photos to the left. After doing it do a bunch of them I figured out that moving them all to the right was the way to go. It made for a better looking page all around. The little screens as on the DROID won't put text all the way to the right of the screen no matter what but will put photos over there, so all photos are going on the right. I'm using the <CLEAR> property on that table along with <FLOAT> which when used together will line up successive tables without clustering. Previously and had scattered the photo tables all over the screen so they didn't cluster as screen sizes changed, but now I'm forcing them all in a row on the right.

Historically, I have had very few local styles, and as I go through I am moving all of them to the common CSS file. This will make for uniform display throughout the web site. I am avoiding any file name changes so as to avoid breaking any links that others may have to the site.

The modifications to HTML 5 are pretty straight forward for HTML 4.01 compliant pages. changes are for the most part only in the HEAD section when the META structures are different and of course the the <DOCTYPE> declaration itself. Otherwise, The remaining <table> attributes, and <iframe> attributes that I had not previously moved to CSS are now being moved.

Completed with conversion to 12/31/12 are:

This is the lsit of what is not done as of 12/31/12.

Hello HTML 5

Dateline: 2/3/13It is done. Or at least close enough to claim completion. The dreaded <FRAMES> are now completely gone... The menus and the navbox at the screen bottom continue to be in an <IFRAME>, but everything is done in an HTML 5 compliant manner.

I had last reworked the site in the spring of 2008 when I upgraded the HTML to "HTML 4.01-Loose". Now that HTML 5 claims to be the HTML to end all HTMLs, no further version upgrades should ever be necessary. Part of the motive for the rework was to attempt to make the site friendly to small screens. I've looked at it on both a tablet and a smart phone. I enlarged the thumbnails as I went through the site where feasible, but unfortunately cannot upgrade the early photos some of which are fairly bad scans of film based photos. The advent of digital cameras have made it possible for much better photography with respect to the things photographed in the last 10 years or so. I'm on my 3rd generation digital camera, and each generation has been much better than the previous ones so there is a trend in the digital as well, but not as pronounced as in the pre-digital materials. It must be remembered that this site was started about 1996 and a lot of the photos date to the pre-digital age. It's not not easy to tell which pages are that old, as I didn't start recording 'update' dates on the pages until 2001 when I did a major revision.

The work I did in 2008 to make all my code 4.01 compliant really paid off. Then I introduced styles into the code and moved as much stuff as I could into the style sheet. The elapsed time has presented far more compliant browsers. I have attempted to move nearly all of the styles to a CSS file. This has enforced good programming practice in preparing every page in a consistent fashion.

CoffeeCup - HTML and Web Design Software
- - Updated 12/08/2012
- - Updated 06/25/2011
- - Updated 6/20/2010