Semantically Enhanced Interactions between Heterogeneous ...
Presenter: Richard Merrill, Autograff Inc.€¦ · File and Folder Naming Meta tags controlled and...
40
Presenter: Richard Merrill, Autograff Inc.
Transcript of Presenter: Richard Merrill, Autograff Inc.€¦ · File and Folder Naming Meta tags controlled and...
Presenter: Richard Merrill, Autograff Inc.
File and Folder Naming
Meta tags controlled and standardized
Semantically-rich spider searchable menus
Moving pages while preserving menus
Common folder and page names:
/bv/
pers.html
/2/
vcj.php?inf=1
/diffiles/
rntf .asp
/contracts/manufacture.html
/services/business.php
/insurance/liability.asp
If it’s easier for humans, it’s easier for spiders.
Human-readable system names:
Metadata Set controls data entry
Template region for text block
Text block with pass-through code
Meta Tags
Creating the Metadata Set
Hides meta tag fields from editors
Using the Metadata SetEssential meta tags not available to editor.
Any metadata can be hidden or shown.
<link href="/cms/renderfile/client/css/styles.css"media="all" rel="stylesheet" type="text/css"/>
href | media | rel | type
Elements in alphabetical order
< /> Tags created by Cascade:
<html xml:lang="en"><head><meta content="application/xhtml+xml; charset=utf-8"http-equiv="content-type"/>
<system-region name="headtags"/>
<link href=”/css/styles.css" rel="stylesheet"title="global styles" type="text/css"/><script language="Javascript"src=”/files/scripts/globalmenu.js" type="text/javascript"/></head>
System Region in Head Section
<!--#START-CODE<title>Title Here</title><meta name="description" content="description here"/><meta name="keywords" content="keyword list here"/>#END-CODE-->
Text block
Pure CSS Dropdown Menu
Why a CSS dropdown menu?
Unordered Lists use less HTML
Formatting with XSLT
Nested lists modular
More accessible
Search spiders read easily
Menu HTML
Unstructured:<a href="about.html">About</a> |<a href="services.html">Services</a> | …
Structured:<ul class="global">
<li><a href="about.html">About</a></li><li><a href="services.html">Services</a></li>
</ul>
Easily read by screen readers without access keysList gives semantic structure
XSLT formatsunordered lists
<ul class=”folder"> <li><a href="about.html">About</a></li> <li><a href="services.html">Services</a> <ul class=”page">
<li><a href="plumbing.html">Plumbing</a></li> <li class=“subpage”><a href="elec.html">Electric</a> <ul class=“subfolder”> <li><a href=“design.html”>Design</a></li> <li><a href=“wiring.html”>Wiring</a></li> </ul> </li>
</ul> </li></ul>
About
Services
Plumbing
Electrical
Design
Wiring
<html xml:lang="en"><head><meta content="application/xhtml+xml; charset=utf-8"http-equiv="content-type"/><system-region name="headtags"/>
<link href=”/site/css/styles.css" rel="stylesheet"title="global styles" type="text/css"/>
<script language="Javascript"src="/files/scripts/globalmenu.js" type="text/javascript"/></head>
Global Menu CSS
CSS Menu basic elementsul.folder { }ul.folder li { }ul.folder li:hover { } [also on mouse-out]ul.folder li a { }
ul.page { }ul.page li { }ul.page li:hover { } [also on mouse-out]ul.page li.subpage:hover { }ul.page li.subpage a { }
ul.subfolder { }ul.subfolder li { } [also on mouse-out]ul.subfolder li a { }
<html xml:lang="en"><head><meta content="application/xhtml+xml; charset=utf-8"http-equiv="content-type"/><system-region name="headtags"/><link href=”/site/css/styles.css" rel="stylesheet"title="global styles" type="text/css"/>
<script language="Javascript"src="/files/scripts/globalmenu.js"type="text/javascript"/>
</head>
IE6-Specific Javascript
Nested menu structure
Global MenuLocal Menu
Submenu
Global Menu <li>
Local Menu <li>
Submenu <li>
Menu Example
Go to Cascade example
Flyout menu usability
Natural path
Flyout menu usability
Natural pathintersects wrongdropdown item
Flyout menu usability
Natural path
Required path
Dropdown to include in Global Menu XSLT uses metadata set to include/not include folders/pages/links in global menu
Using the Metadata SetChoose to include in global menu
(property set in folders only)
Page and folderhierarchy
Basic page andfolder hierarchy:
Root folder
Main Category(global menu)
Subcategory page/ folder(local menu/dropdown)
Sub-subcategory(flyout menu)
XSLT for folder order
XSLT uses file/folder/link in first position in folder as index
XSLT uses folder order to order appearance of menu items
Menu and folder relationships 1
Change page name
Menu and folder relationships 2
Movepage
Menu and folder relationships 3
Changename,movepage
MakeReferenceto page,placein folder
Menu and folder relationships 4
Wrong order
Menu and folder relationships 5
Correct order
Menu and folder relationships 5
Page set not to index does notdisplay in dropdown.
Local menu on moved pages incorrect
Lists main category folders instead ofpages inside a category folder
New Local Menu Block for one Root Page
Local menu now correct
Apply page-specific block at page level:it now lists pages inside its folder
File and Folder Naming
Meta tags controlled and standardized
Semantically-rich spider searchable menus
Moving pages while preserving menus
Revisited
File and Folder Naming
Meta tags controlled and standardized
Semantically-rich spider searchable menus
Moving pages while preserving menus
Revisited
File and Folder Naming
Meta tags controlled and standardized
Semantically-rich spider searchable menus
Moving pages while preserving menus
Revisited
File and Folder Naming
Meta tags controlled and standardized
Semantically-rich spider searchable menus
Moving pages while preserving menus
Revisited
File and Folder Naming
Meta tags controlled and standardized
Semantically-rich spider searchable menus
Moving pages while preserving menus
Revisited
SEO goals met!
