Difference between revisions of "User talk:JProulx"

From Dreamwidth Notes
Jump to: navigation, search
(New page: <source lang="html4strict"> <!-- Notes: ------ * Major goal for this layout is semantic correctness and style flexibility * Marked up for hcard/hatom usefulness * "inner" classed divs are ...)
 
Line 41: Line 41:
 
                 <div id="header">
 
                 <div id="header">
 
                     <div class="inner">
 
                     <div class="inner">
−
                         <h1 id="title">Journal title</h1>
+
                         <h1 id="title"><span>Journal title</span></h1>
−
                         <h2 id="subtitle">Subtitle</h2>
+
                         <h2 id="subtitle"><span>Subtitle</span></h2>
−
                         <h2 id="pagetitle">Page title</h2>
+
                         <h2 id="pagetitle"><span>Page title</span></h2>
 
                         <p id="tagline">Tagline</p>
 
                         <p id="tagline">Tagline</p>
 
                     </div>
 
                     </div>
Line 153: Line 153:
 
     <div class="inner">
 
     <div class="inner">
 
         <div class="header">
 
         <div class="header">
−
             <h3 class="subject entry-title">Entry Subject</h3>
+
             <h3 class="subject entry-title"><span>Entry Subject</span></h3>
 
             <span class="trust-filter">Trust filter / security icon</span>
 
             <span class="trust-filter">Trust filter / security icon</span>
 
             <span class="published" title="2008-08-28T13:14:37-07:00"> <!-- Datetime title required for hatom -->
 
             <span class="published" title="2008-08-28T13:14:37-07:00"> <!-- Datetime title required for hatom -->
Line 209: Line 209:
 
         <div class="header">
 
         <div class="header">
 
             <div class="inner">
 
             <div class="inner">
−
                 <h4 class="title">Module Title</h3>
+
                 <h4 class="title"><span>Module Title</span></h3>
 
             </div>
 
             </div>
 
         </div>
 
         </div>

Revision as of 20:07, 8 February 2009

<!--
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/hcalendar/hatom -->
    <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>
 
<!--
Sample page container with an hatom feed container
-->
<div id="entries" class="hfeed">
    <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>
    <!-- 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>
 
<!--
User badges
 
Should the icon link to allpics or journal? Style option? Link title should change appropriately
 
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 userpics used by user"><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.
-->
<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="published" 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="postedto">
                    <div class="poster author"><!-- See user tag --></div>
                    <div class="community"><!-- user tag for community --></div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="inner">
                <div class="meta">
                    <!-- Currents, etc. Not sure how to structure these, dl maybe? -->
                </div>
                <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"><div class="inner"></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="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>
Retrieved from "http://wiki.dreamwidth.net/wiki/index.php?title=User_talk:JProulx&oldid=2100"