User talk:JProulx
From Dreamwidth Notes
Revision as of 01:21, 24 February 2009 by 69.3.95.126 (Talk)
<!-- Notes: ------ * Major goal for this layout is semantic correctness and style flexibility * Marked up for hcard/hatom usefulness * "inner" classed divs are placed inside all major blocks for style hooks * Page source is construced in order of importance: header -> content -> navigation -> footer. This pushes the most logical content furthest up for screen readers, mobile devices with crappy browsers, etc * Sub classes/IDs are either written using markup inheritence or are as "parent-child", replacing spaces with dashes. Headers: -------- h1 -- journal title h2 -- journal subtitle h2 -- page title h3 -- entry subjects, year headings, etc h4 -- module titles Structure: ---------- * body -- has specific IDs for different views (page-entries, page-reader, page-archive, etc) * canvas -- wrapper around all contents * header -- Titles mostly, maybe we should add the convention of a "logo" * content -- Page contents that appear in the source based on order of "importance" * primary -- Page specific content (entries, reading list, archive, etc) * secondary -- Typically sidebar material * tertiary -- Another sidebar, or possibly a page-specific footer * quarterny -- quinary, As many columns/blocks that the style "wants" * navigation -- Main journal navigation links * footer -- footer links/info (not sure what to put here but it seems like style information + branding is on a lot of layouts --> <html> <!-- Profiles for hcard hatom xfn --> <head profile="http://www.w3.org/2006/03/hcard http://purl.org/uF/hAtom/0.1/ http://gmpg.org/xfn/11"> <title>Page title</title> </head> <body id="page-entries"> <div id="canvas"> <div class="inner"> <div id="header"> <div class="inner"> <h1 id="title"><span>Journal title</span></h1> <h2 id="subtitle"><span>Subtitle</span></h2> <h2 id="pagetitle"><span>Page title</span></h2> <p id="tagline">Tagline</p> </div> </div> <div id="content"> <div class="inner"> <div id="primary"><div class="inner">Page contents</div></div> <div id="secondary"><div class="inner">Sidebar/Modules/etc</div></div> <div id="tertiary"><div class="inner">More sidebars/page footer/etc</div></div> </div> </div> </div> <div id="navigation"> <div class="inner"> <!-- Order of these links can be set in style options --> <ul class="navigation-journal"> <li class="nav-profile">Profile</li> <li class="nav-recent">Recent</li> <li class="nav-archive">Archive</li> <li class="nav-read">Reading</li> <!-- etc --> </ul> </div> </div> <div id="footer"> <div class="inner"> <span id="copyright-notice">Copyright notice</span> <span id="site-branding"></span> <!-- DW/LJ branding, "powered by" etc --> <span id="style-name">Style name</span> <span id="style-author">Style author</span> <span id="style-information"></span> <!-- Not sure what this could mean, maybe load time? --> </div> </div> </div> </body> </html> <!-- Recent/Read entries page container with an hatom feed container --> <div id="entries" class="hfeed"> <div class="inner"> <div class="navigation"> <div class="inner"> <ul> <li class="page-back">Navigate backwards</li> <li class="page-forward">Navigate forwards</li> </ul> </div> </div> <!-- Entries --> <div class="navigation"> <div class="inner"> <ul> <li class="page-back">Navigate backwards</li> <li class="page-top">Top of page</li> <li class="page-forward">Navigate forwards</li> </ul> </div> </div> </div> </div> <!-- Archive page container --> <div id="archive-year"> <div class="inner"> <div class="navigation"> <div class="inner"> <ul> <!-- Either previous/next navigation, or list of years --> </ul> </div> </div> <div class="year"> <div class="inner"> <!-- Months as rendered below --> </div> </div> <div class="navigation"> <div class="inner"> <ul> <!-- Either previous/next navigation, or list of years --> </ul> </div> </div> </div> </div> <!-- Month page container --> <div id="archive-month"> <div class="inner"> <div class="navigation"> <div class="inner"> <ul> <li class="page-back">Navigate backwards</li> <li class="page-forward">Navigate forwards</li> </ul> </div> </div> <div class="month"> <div class="inner"> <dl> <dt>Day label</dt> <dd><a href="">Entry label</a></dd> <dd><a href="">Entry label</a></dd> <dd><a href="">Entry label</a></dd> <!-- etc --> </div> </div> </div> <div class="navigation"> <div class="inner"> <ul> <li class="page-back">Navigate backwards</li> <li class="page-top">Top of page</li> <li class="page-forward">Navigate forwards</li> </ul> </div> </div> </div> </div> <!-- Day Page container --> <div id="archive-day"> <div class="inner"> <div class="navigation"> <div class="inner"> <ul> <li class="page-back">Navigate backwards</li> <li class="page-forward">Navigate forwards</li> </ul> </div> </div> <div class="year"> <div class="inner"> <!-- Months as rendered below --> </div> </div> <div class="navigation"> <div class="inner"> <ul> <li class="page-back">Navigate backwards</li> <li class="page-top">Top of page</li> <li class="page-forward">Navigate forwards</li> </ul> </div> </div> </div> </div> <!-- Months as calendars Calendars are pretty obviously tabular data, so let's dust off some tables This header/contents/footer structure maybe overthinking it. Not sure. --> <div class="month-wrapper"> <div class="separator separator-pre"><div class="inner"></div></div> <div class="month"> <div class="inner"> <div class="header"> <h3><span>Month label</span></h3> </div> <div class="contents"> <div class="inner"> <table summary="Monthly calendar with links to each day's posts" class="month" cellspacing="0" cellpadding="0"> <caption>Month label</caption> <thead> <tr> <th>Sun</th> <th>Mon</th> <th>Tue</th> <!-- etc --> </tr> </thead> <tbody> <tr> <td></td> <td class="day day-has-entries"> <span class="label">1</span> <p> <a href="">Posts</a> </p> </td> <td class="day"> <span class="label">2</span> </td> <!-- etc --> </tr> </tbody> </table> </div> </div> <div class="footer"> <div class="inner"> <p><a href="">View this month's posts</a></p> </div> </div> </div> </div> <div class="separator separator-post"><div class="inner"></div></div> </div> <!-- Months as flat lists --> <div class="month-wrapper"> <div class="separator separator-pre"><div class="inner"></div></div> <div class="month"> <div class="inner"> <div class="header"> <div class="inner"> <h3><span>Month label</span></h3> </div> </div> <div class="contents"> <div class="inner"> <ol class="month"> <li><a href="">Day entry label link</a> <li><a href="">Day entry label link</a> <li><a href="">Day entry label link</a> </ol> </div> </div> <div class="footer"> <div class="inner"> <p><a href="">View this month's posts</a></p> </div> </div> </div> </div> <div class="separator separator-post"><div class="inner"></div></div> </div> <!-- User badges Policy: user icons link to allpics.bml Questions: we should use XFN for these, but on profile link or journal link? rel="acquaintance" for readers? rel="friends" for trusted+watched? rel="group" for communities rel="me" for profile module/website links vcard classes only really applies to P users, not communties --> <div class="user vcard"><!-- P user --> <div class="inner"> <div class="icon"> <a title="View all of this user's userpics"><img src="" alt="" longdesc="keyword" class="photo" /></a> </div> <span class="userlink"> <a title="View this user's profile"><img class="icon" alt="" /></a> <a class="url" title="View this user's journal"><span class="username fn nickname">username</span></a> </span> </div> </div> <div class="user"><!-- Community user --> <div class="inner"> <div class="icon"> <a title="View all userpics of this community"><img src="" alt="" longdesc="keyword" /></a> </div> <span class="userlink"> <a title="View this community's profile"><img class="icon" alt="" /></a> <a title="View this community's latest posts"><span class="username">username</span></a> </span> </div> </div> <!-- Entries: -------- I'm not sure if/where there should be dilineation between header/footer content. Things like currents and tags I can see being in both, links are typically located below (footer) but not always, bleh. Due to accessibility concerns with using abbr for hatom published dates, we should use spans instead. There's a difference between entryid and orderid: -- entryid = permalink, entry's global unique ID -- orderid = style reference, entry's local placement ID orderid is pretty much a css shortcut for complex adjacent selectors --> <div class="entry-wrapper" id="entry-wrapper-$orderid"> <div class="separator separator-pre"><div class="inner"></div></div> <div class="entry" id="entry-$entryid"> <div class="inner"> <div class="header"> <h3 class="subject entry-title"><span>Entry Subject</span></h3> <span class="trust-filter">Trust filter / security icon</span> <span class="restrictions">Adult filter / icons</span> <span class="published datetime" title="2008-08-28T13:14:37-07:00"> <!-- Datetime title required for hatom --> <span class="date">Date</span> <span class="time">Time</span> </span> </div> <div class="contents"> <div class="inner"> <div class="entry-content">Entry text</div> <div class="meta"> <div class="postedto"> <div class="poster author"><!-- See user tag --></div> <div class="community"><!-- user tag for community --></div> </div> <div class="currents"> <!-- Still need to figure out how to mark these up --> </div> </div> </div> </div> <div class="footer"> <div class="inner"> <ul class="tags"> <li><a rel="tag">Tag 1</a></li> <li><a rel="tag">Tag 2</a></li> <li><a rel="tag">Tag 3</a></li> </ul> <ul class="links"> <li class="link-permanent"><a class="bookmark" rel="bookmark">permalink</a></li> <li class="link-read">read</li> <li class="link-post">post</li> .. </ul> </div> </div> </div> </div> <div class="separator separator-post"><div class="inner"></div></div> </div> <!-- Modules: -------- Each module requires a unique ID Examples: --------- * Profile (About me) * Tag list / Tag cloud * Archive links * Link list * Friends list / Blogroll * etc --> <div class="module" id="module-moduleid1"> <div class="separator separator-pre"><div class="inner"></div></div> <div class="inner"> <div class="header"> <div class="inner"> <h4 class="title"><span>Module Title</span></h3> </div> </div> <div class="contents"> <div class="inner"> Module Contents </div> </div> <div class="footer"> <div class="inner"> Module footer </div> </div> </div> <div class="separator separator-post"><div class="inner"></div></div> </div>
