Tire kicker up to the line...

[weegillis]

We may as well start kicking tires for the benefit of understanding. I volunteer my first HTML5 effort, a 1990 book that is long out of print, and is cleared for reproduction. I have no design concept, only a general framework of sorts. The code is valid and it is on the right track, one would hope. There is AJAX so client side source code is best viewed in an inspector. Here it is -- let's kick some tires and toss some ideas around!

Transitions, the Web Edition (http://www.wainwrightdistrict.org/camp-wainwright/index.php)

[HTMLBasicTutor]

Using experimental feature: HTML5 Conformance Checker.

The validator checked your document with an experimental feature: HTML5 Conformance Checker. This feature has been made available for your convenience, but be aware that it may be unreliable, or not perfectly up to date with the latest development of some cutting-edge technologies. If you find any issues with this feature, please report them. Thank you.




[Line 10, Column 54: Bad value X-UA-Compatible for attribute http-equiv on element meta.
<meta http-equiv="X-UA-Compatible" content="chrome=1">

It is also broken (a bit) in IE8. You went to the trouble of using a conditional comment that didn't work. :-(

If you view the page with scripting turned off, the content is non existant. Look at the cached text view of the page. There is no content there for the bots to read either.

[weegillis]

<meta http-equiv="X-UA-Compatible" content="chrome=1">Jammed that in and have no way to test it. It seems that now it is a bit out of date, so I just dropped it.


It is also broken (a bit) in IE8. You went to the trouble of using a conditional comment that didn't work.Again, no way to test, but is is possible the Chrome Frame was interfering with the HTML5 shim in the conditional comment?


If you view the page with scripting turned off, the content is non existant. Look at the cached text view of the page. There is no content there for the bots to read either.This is intentional. When I first started building this, I wanted the bots to stay out. Still do, as a matter of fact. I want humans reading this, not machines. The SE's know the main URL, that's good enough for me.

[weegillis]

t is also broken (a bit) in IE8.Now that I look at it in XP (IE 8) it's easy to see what you mean by broken. Yuck.

And the bit I said about no way to test, my mind was on IE 6 and 7 when you clearly said IE 8. Must be losing it. I can test in 8, just not the others, except with browsershots, I suppose. My apologies.

Have to start working backwards and dig out where the problem is. My earlier version of a day or two ago worked fine, last I checked on this machine.

[rah]

Weegillis try this program out: http://www.my-debugbar.com/wiki/IETester/HomePage

I use it all the time to test things in older versions of IE. It sometimes crashes, but does the job.

[weegillis]

Matches what browsershots gave me, and what I'm seeing. Great tool, thanks, Rah.

Anybody have any suggestions as to why the background image is disappearing in IE (except 9)? It matters not whether if is set on #start or on the header for it to work in everything else. But even on #start, it doesn't appear. I'm totally perplexed.

[HTMLBasicTutor]

Anybody have any suggestions as to why the background image is disappearing in IE (except 9)? It matters not whether if is set on #start or on the header for it to work in everything else. But even on #start, it doesn't appear. I'm totally perplexed.
When your CSS is tested for compliance with CSS 2.1 and CSS 3 you have errors.

A bunch of them are your browser specific coding.

[weegillis]

A bunch of them are your browser specific coding. A bunch, like, all of them. Thanks for checking this, @HTMLBasicTutor. I'm so vain these days as to not bother validating my CSS any more. Mustn't get complacent.

For years I swore off browser specific CSS and then learned that it had some good in that it opened more doors than it closed. There were a few hacks in the day, but mostly I stayed on the straight and narrow, keeping the risky code at bay for another day. My CSS always validated. My HTML always validated. Straight, and normal. Blehh. This while Zen Garden was piling on the gorgeous sites, one after another. So I missed that creativity bus.

Same thing with JS. It was years before I really took myself to task and learned at least a smidgeon, which lead to the smidgeon of PHP, etc. that followed. Had I not written JS for a year before jumping into PHP I doubt that I would have any pages in it. So I shot myself in the foot by taking such a dim view toward JS in circa 1998. Not much has changed, but I still find/create script solutions for my needs, and have been quite happy with that.

Then along comes prototype followed by mootools followed by jQuery followed by whomever... (not sure I even have these in the correct order), coupled with HTML5 and level 3 CSS, well, this time I'm not sitting on the fence. Designer or not, I want to see what the average Joe can do with a text editor. I can see that it's a lot more than it was in 1998.

But we have to break the validator, for the time being, I'm afraid. It doesn't necessarily mean the browsers are breaking the page, owing that their makers work to their own agenda at their own pace and they add support along the way even though the validator isn't being updated. I suspect that once W3C and WHATWG are on the exact same page (three, er, two outta five right now isn't bad, eh?), a validator will appear AND the proprietary prefixes will be gone. Yes, it will take another couple of years, but it's in the pike. I trust that much.

The key here is that I appreciate that @HTMLBasicTutor validated both page and CSS, and save this as a reminder for future. However, there are going to be times when 2.1 validator just doesn't cut it, except to say that there were no 2.2, 2.1, or earlier errors in the list. Take away the bottom few lines and the couple of browser specific scroll properties and it is all valid 2.1. That's good to see. Up to now I just assumed it was so.

This is not enough reason to give up the ghost (the browser issue). Since there is no revenue stream with this project, I have nothing to gain or lose, as long as the content is here. It gets good traffic from a very focused audience, so I know it's getting seen by humans with an interest. (BTW, is this what we call 'conversion'?) My main concern is that it does not suffer at my hands. The content is too critical and important.

It makes for a perfect experimental site because we can all learn from it, especially since it's so stripped down. What I noticed is that even in IE 5.5, the content stood straight and tall in the middle of the screen, and was still selectable, scollable, etc. The navigation is a bit wonky, visually, yet it still works. We're really only talking rendering engines, here.

At the present time, I don't have a database, but use chapter folders to hold the txt files that correspond with their pages. My PHP spiders the current folder on each request to build the chapter navigation. From there it's just AJAX calls for the various page text. When I do go to database I want it under headings, not page numbers. This will be the time when I separate the web version from the print version. The flow of text and images (they will come along) will follow the book, but the interactive bits will traverse all parts.

[weegillis]

Robots actually see more than no scripting will allow since my entire navigation and file structure is wide open. They do have my entire list of files, but navigation requires a back button. If they read one, they hit a wall, and can't go on to the next one. This is a big issue, and will require back end coding so that I can include navigation in each page view. Trouble is, I still can't intuit that code, though I know it's in there somewhere.

It may be a while before Cynthia has her say on this site, but for the time, I at least know what she might say and go from there. The goal is be in ship shape when she is ready to assess the site using modern criteria, not 2006.

[weegillis]

After a day of clawing through every speck of code, I had still not recovered my header image in IE 6, 7 or 8. Surprisingly, IE 5.5 was seeing it at the end of the day!

Today I dropped in Rich Clark’s HTML5 Reset Stylesheet (http://html5doctor.com/html-5-reset-stylesheet/) and, bingo! The image is back in full glory. Will still need to adjust some margins, but on the whole, everything is back on the board. All it took was a day of rereading the stuff I read months ago, especially Dive Into Html5 - Chapter 3: Semantics (http://diveintohtml5.org/semantics.html).

On the table for enhancement is the main navigation menu in the header. Not really sure how one would animate it, but I would like to see it as glassy, with flyout (perhaps) descriptions on hover. I had temporarily used the old method of a hidden span on the anchor, that worked, but didn't really appeal to me, being so old fashioned. Any help or suggestions here would be greatly appreciated.

[weegillis]

Of all the browsers I'm testing in (latest of the big 4 for XP and WIndows 7), Firefox 5 gives the closest thing to the desired output and renders everything immaculately. Chrome is pulling up second place, which is hard to imagine, being as they are always tagged as being at the head of the pack.

Since starting this thread, the site has gone through significant rewrites, but I'm finally ready to settle on what it has now for markup. No DIV, and only a couple of class names that need to be reworked. CSS3 enhancements that have been applied so far are as follows:

1. Background gradients
a. Main content view port
b. Content navigation menu
c. Button face
d. Main navigation menu (fly out on mouse over)

2. Transitions
a. Content navigation menu
b. Button face
c. Main navigation menu

3. Box radius
a. Main content view port
b. Content navigation menu
c. Button face
d. Main navigation menu (fly out)

4. Box shadow
a. Main content view port
b. Content navigation menu

5. Text shadow
a. Content navigation menu
b. Main navigation menu (fly out)
c. Button face

6. Double columns on Main content view port.


Not being a designer, this is all very 'seat of the pants' and took some reading up and studying examples to get the main idea. It will be nice when the day rolls along that we don't need four or more lines of CSS to declare one property, but for now we'll just have to live with it.

I was reading up on the AJAX CRAWLING SCHEME as presented by Google. Anyone with experience at configuring a site for this? I could really use some help with this. On a good note, though, Google says it will not penalize sites for not creating HTML snapshots as they are working toward the day when search robots will behave more like browsers, and they will be able to see AJAX content. Chances are good that it will take me longer to implement the HTML snapshots, so that day couldn't come soon enough.

I've hoped that more issues would be raised by now, but don't see any takers. One issue is with the two columns not collapsing when the window width is shrunk. I'd like to know how to revert to one column at a certain width. Another is that as far as I can tell, this page is not very viewable on a smart phone. Any body care to supply a screen shot, or advice on how to repair this problem? As I see it, the Main Navigation is being buried by the Content navigation. Is there some way to detect this, and have the Main navigation drop down a line, into view?