2007-07-13t21:44:12 Z | TAGS:
Blogging, Cyber Life, My Stuff, Programming, SQL, TECH
Sprinkling parental breadcrumbs
Computers are a great tool for procrastination. Instead of writing stuff for my site, I've been fiddling with some of the technology behind the site. In my defense, this is something that has been on my to do list for quite a while and this write up about it counts as writing too, eh? What I've done is reworked my site navigation so that it has a database back end and uses "parental breadcrumbs", plus I also increased my site's accessibility.
The database backend was super easy. (Filling it with data will be laborious —hence I'll have to find something else to procrastinate with). The database consists of two tables. The first table is a basic ID and parent ID table used for tree structures. The PageName is the file name, while the PageTitle is the user friendly title of the page. The PageListOrder is used to change the order of a the sub-pages of a page if it differs from an alphabetical listing by PageTitle.
-- MySQL code to make the tables create table Page( PageID int not null auto_increment primary key, PageParentID int, PageName varchar(127), PageTitle varchar(255), PagePath text, PageListOrder varchar(4), PageDescription varchar(255), PageModified datetime ); create table PageTag( PageTagID int not null auto_increment primary key, PageTagOnID int, PageTagValue varchar(255) );
The second table simply has tags for the first table, i.e. Page has a one-to-many relationship with PageTag. I could've made a third table to make a many-to-many relationship since the same tag (EG: "Tech") may be used for many pages. While the 1-to-m solutions takes up more storage space, the m-2-m solution produces more rows and more code. The 1-to-m solution in this case is cleaner and easier to administer.
Breadcrumbs [W] are used to provide navigation in user interfaces. EG: "Home > Fruits > Bananas", where each word is also a link that will take you to that directory or topic. In contrast "parental breadcrumbs" do the same thing but in a visual interface, each of the breadcrumb links would also provide a drop down menu of its sub-pages or "kids", where each is clickable.
In the screenshot of my new parental breadcrumbs. In the dropdown, I always have the child in bold in the dropdown list of its parent's kids. EG: In the screenshot, the page is "Color", its parent is "Miscellany", and "Color" is marked bold in the dropdown of the kids of "Miscellany". That behaviour is carried "up" the tree, hence "Miscellany" would be marked bold in the dropdown list under "George Hernandez". (BTW: I think I like the contrast of all the luxurious white space in the upper left with all the data density on the right.)
Technically, this was created using a bit of recursive code to make a set of HTML lists, and then those lists were converted into the usual dropdowns via CSS and Javascript.
<% 'ASP Classic code in JS to make lists. Should be easy to rewrite as PHP.
Response.Write(" <ul id="nav">\r\n");
Response.Write(GetParentAndKids(PageID, ""));
Response.Write(" </ul>\r\n");
function GetParentAndKids(ChildID, YoungerBreadcrumb) {
var sqlParent="select * from Page where PageID in (select PageParentID from Page where PageID="+ChildID+");";
var rstParent=Server.CreateObject("ADODB.Recordset");
rstParent.Open(sqlParent, gCNN);
if (rstParent.EOF) {
rstParent.Close();
} else {
var ThisBreadcrumb=" <li><a href=""
+String(rstParent("PagePath"))+String(rstParent("PageName"))
+"" title=""+String(rstParent("PageDescription"))
+"">"+String(rstParent("PageTitle"))
+" »</a>\r\n";
var ParentID=String(rstParent("PageID"));
}
var sqlKids="select * from Page where PageParentID="+ParentID+" order by PageListOrder, PageTitle;";
var rstKids=Server.CreateObject("ADODB.Recordset");
rstKids.Open(sqlKids, gCNN);
if (rstKids.EOF) {
rstKids.Close();
} else {
ThisBreadcrumb+=" <ul>\r\n";
while (!rstKids.EOF) {
if (rstKids("PageID")==ChildID) {
ThisBreadcrumb+=" <li><a href=""
+String(rstKids("PagePath"))+String(rstKids("PageName"))
+"" title=""+String(rstKids("PageDescription"))
+"" style="font-weight:bold;">"
+String(rstKids("PageTitle"))+"</a></li>\r\n";
} else {
ThisBreadcrumb+=" <li><a href=""
+String(rstKids("PagePath"))+String(rstKids("PageName"))
+"" title=""+String(rstKids("PageDescription"))+"">"
+String(rstKids("PageTitle"))+"</a></li>\r\n";
}
rstKids.MoveNext();
}
ThisBreadcrumb+=" </ul>\r\n";
ThisBreadcrumb+=" </li>\r\n";
ThisBreadcrumb+=YoungerBreadcrumb;
}
if (ParentID=="1" || ParentID==1) {
return ThisBreadcrumb;
} else {
return GetParentAndKids(ParentID, ThisBreadcrumb);
}
}
%>
As far as the CSS drop downs, I used Son of Suckerfish Dropdowns [http://www.htmldog.com/articles/suckerfish/dropdowns/], but I suppose you could use whatever you wanted.
The nice thing about parental breadcrumbs is that they give almost the full power of a navigation tree, while visually taking up very little space. It's like a condensed version of the Mac OS horizontal hierarchy navigation. Now mind you, I'm not the first to have done "parental breadcrumbs". Windows Media Player and Windows Vista use parental breadcrumbs, but I don't know what they call it so I came up with the name "parental breadcrumbs" while writing this post. As far as I know, I'm the first person to implement parental breadcrumbs on a website. It would've been easier if I had seen someone else do this and they had given me the basics of the code, but, well, that's one of the reasons that I'm writing this post. I any of y'all use this, the please give me some credit!
While I was designing this stuff, I reanalyzed my site for accessibility by going through Dive into Accessibility [http://diveintoaccessibility.org/] again. I'm doing stuff like using the PageDescription field to fill in the TITLE attribute in the navigation. I used labels on my search form controls (I was a good boy and I was already using access keys :-). The new parental breadcrumbs also
Here are some other things that I have to make habitual:
Implementing more accessibility is easier with tools that facilitate them. The industry should push this more.
I'm also trying to tweak my site CSS. EGs:
Implementng this new database-based parenteal breadcrumbs navigation system means that I'll have to do the following for nearly every page of my site:
Also I have a few other things that I can do related to this new system:
That's a lot of work! More reasons to either procrastinate or do little bits at a time.
Page Modified: (Auto noted: 2010-02-18 19:27:43Z)