[Pro] Semantic Website?

I’m updating this website to give each page a semantic structure. However, I’m having a bit of a problem with the home page. I’d like to separate Landowners/Developers, We Love Realtors, and Service Request into it’s own grouping, but I don’t know how to do it.

Also, I’m not sure why I’m getting an Untitled Section. Here’s the tool I’m using to check the site semantics: HTML 5 Outliner

Any advice is greatly appreciated.

http://rcb.idealynx.com/index.php


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I also can’t figure out this page: http://rcb.idealynx.com/why-us.php

The 14 features in the table on this page are setup as an h5, yet they don’t appear in the HTML5 Outliner. Plus, I can’t figure out how to get “Why Choose Us?” first.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

See page 75 of Mr. Keith’s book for the answer. Content within TD, BLOCKQUOTE, and FIELDSET elements are immune to the outline algorithm. They will never appear in a semantic outline of the page.

Not to say they won’t be counted as content, but they won’t create their own context or participate in the larger context around them.

Walter


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Walter. What about my carousel h2 tags? Per your suggestion, I’ve put all of the carousel elements on a layered item. Why aren’t they showing up?

http://rcb.idealynx.com


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Probably because they are each in a separate element, without an H1. This outliner is looking for a run of related content, like this:

#The main headline
A paragraph about that, setting up the overall premise.

##A second header
A paragraph about that, setting up its specific content.

Another paragraph. Etc…

###A third header
A paragraph about that, setting up its specific content.

Another paragraph. Etc…

####A fourth header
A paragraph about that, setting up its specific content.

Another paragraph. Etc…

That, it can deal with.

Walter

On Oct 3, 2013, at 12:18 PM, RavenManiac wrote:

Thanks Walter. What about my carousel h2 tags? Per your suggestion, I’ve put all of the carousel elements on a layered item. Why aren’t they showing up?

http://rcb.idealynx.com


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

So, should I change the h2 tags to another h1’s instead?

I think I understand the concept of semantics, but if the amount of content on a page is limited, what’s the point?


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I think you may need to re-think this page in terms of how it’s structured. The Action isn’t doing you any favors here in this regard. While all the text is kept in the page, and thus is technically there for the search engine to consume, it’s not structured in any way that the outline checker can recognize. You have N separate (floating) DIVs, each containing an H2 and a little bit of text, and they aren’t nested into one another or in some outline structure that the outliner can grasp.

I wrote these carousel effects to take the kind of layout that Freeway can create easily and merge it into a whizzy effect. Ironically, the original Carousel was more semantic than the current iteration, because it actually horsed around with the elements on the page and moved them into “slide strip” structure:

div#outer
	div#slider
		div#pane1/
		div#pane2/
		div#pane3/
	/div
/div

The latest version was written at a time in Freeway 6’s development when Actions could not accurately see or change the CSS styling of an element on the page. I have since written a set of library code that makes this possible, although there are serious teething pains within it and I haven’t had time to sit down and sort that out. (It forces a full page republish every time a page it’s on is published – even with no changes at all.)

As a result, Carousel 2 uses JavaScript to rearrange the DOM at page load rather than Action mechanics during publishing. The page is a fragmented mess when published, but brought into the structure you see above after the JavaScript rearranges the DOM. Unfortunately, outliners can only see the source code, not what a browser makes out of it.

You could try building your carousel as an inline construction, with all of the panes inline within a parent wrapper DIV containing the main pane, and with that wrapper set to Overflow: hidden so the extra panes are not visible when the page loads. The JavaScript will still stir the page around and add the inner slider element, but if you started from here:

div#wrapper
	div#pane1/
	div#pane2/
	div#pane3/
	div#pane4/
/div

then the outliner would still see those h2s as meaningful members of a hierarchy of content.

Walter

On Oct 3, 2013, at 1:03 PM, RavenManiac wrote:

So, should I change the h2 tags to another h1’s instead?

I think I understand the concept of semantics, but if the amount of content on a page is limited, what’s the point?


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Okay, I just did a quick test on the same server and that worked. However, there’s a space a the top of the inline carousel that I can’t seem to get rid of. Any thoughts?


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Is this live at your original address?

On Oct 3, 2013, at 2:07 PM, RavenManiac wrote:

Okay, I just did a quick test on the same server and that worked. However, there’s a space a the top of the inline carousel that I can’t seem to get rid of. Any thoughts?


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

No, it on my development server here: http://rcb.idealynx.com/index.php

I found the spacing problem. It was a rogue inline box, which I’ve deleted. If you check the semantics now it’s not bad, but it’s not in the order I would like it. I take it semantics works from the top down, so I guess we may not be able to fix that. I was hoping the h1, h2, h3 designations would supersede the page flow, but apparently not.

The ONLY problem with this solution is the FWP page is a mess when overflow visible is on to edit the individual panes. However, if I set the carousel-wrapper div to a flexible height I can get a round that, provided it doesn’t screw up anything further down. :slight_smile:


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Okay, I tried setting the carousel-wrapper as both a section and an aside and it had no affect on the web page semantics. I also tried setting carousel-wrapper and content-wrapper both as sections, with no joy.

There must be something that will allow me to separate and group both sections semantically?. I wonder if the carousel-wrapper h tags need to be h1?


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Quite frankly the RCB home page is probably not a good example of how semantics works anyway, because everything is so fragmented. :slight_smile:


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I tried putting the carousel-wrapper and content-wrapper within another div but it had no effect on the page semantics.

Semantics seem to rely on a top down structure and carousels at the top of the page, which is normally where they live, don’t work well with that approach. Oh well. I’ll go with what I have. It’s better than no semantics. :slight_smile:


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Crap, I had it working, at least partially, and now I’ve screwed something up.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Remember, the Carousel and Carousel Pane lose their attachment with each other the moment you cut and paste something out of one context in the page and into another. Even if the picker still reads the same value (because there’s only one Carousel on the page, for example), you have to click on each picker to wake it up.

Walter

On Oct 3, 2013, at 3:38 PM, RavenManiac wrote:

Crap, I had it working, at least partially, and now I’ve screwed something up.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walter, the page and Carousel work fine.

The problem is I’ve lost my Carousel h2 tags when I run the W3C Semantic Data Extractor. They were showing up fine, albeit in the wrong place, a few minutes ago.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Got it back. I had to change the Carousel tags from h2 to h1.carousel. This semantic stuff sure is tricky. Still not crazy about the order though.

Outline of the document

The Lindsey Model
100% Satisfaction
Your Lot or Ours?
Quality Materials
American Made
See the Difference
Our iPad winner is...
Welcome to River City Builders
Landowners / Developers
We Love Realtors
Service Request
White Is Boring
Home Theaters Are Cool

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The ONLY problem with this solution is the FWP page is a mess when overflow visible is on to edit the individual panes. However, if I set the carousel-wrapper div to a flexible height I can get a round that, provided it doesn’t screw up anything further down. :slight_smile:

As it turns out this isn’t true, and I’m not sure why. I currently have the carousel-wrapper set to flexible with overflow visible and although I can see all of the carousel panes stacked in the FWP desktop, only one pane at a time shows up in the web browser. That works for me, but is that supposed to be happening?


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yes. The only reason you would do the overflow:hidden trick in Freeway is to make the visual layout make sense while you’re working on it. When the JavaScript runs at page load, it structures the page to add the slider element around the panes, and then it sets the overflow on the parent element to hidden. So whether you set that in Freeway or not, it will be done when the page loads.

Walter

On Oct 3, 2013, at 11:56 PM, RavenManiac wrote:

The ONLY problem with this solution is the FWP page is a mess when overflow visible is on to edit the individual panes. However, if I set the carousel-wrapper div to a flexible height I can get a round that, provided it doesn’t screw up anything further down. :slight_smile:

As it turns out this isn’t true, and I’m not sure why. I currently have the carousel-wrapper set to flexible with overflow visible and although I can see all of the carousel panes stacked in the FWP desktop, only one pane at a time shows up in the web browser. That works for me, but is that supposed to be happening?


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks for all your help Walter. Thanks to you, ernie, and Todd, I feel I’m much more enlightened about the use of semantics, and now that I understand the basic principles behind it I can start designing future websites with that in mind.

Just wish I could figure out how to reorder the semantics on the RCB home page. :slight_smile: Have a great weekend!


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options