Difference between revisions of "User talk:JProulx"

From Dreamwidth Notes
Jump to: navigation, search
Line 25: Line 25:
 
     * content -- Page contents that appear in the source based on order of "importance"
 
     * content -- Page contents that appear in the source based on order of "importance"
 
       * primary  -- Page specific content (entries, reading list, archive, etc)
 
       * primary  -- Page specific content (entries, reading list, archive, etc)
−
       * secondary -- Typically sidebar material  
+
       * secondary -- Typically sidebar material
 
       * tertiary  -- Another sidebar, or possibly a page-specific footer
 
       * tertiary  -- Another sidebar, or possibly a page-specific footer
 
       * quarterny -- quinary, As many columns/blocks that the style "wants"
 
       * quarterny -- quinary, As many columns/blocks that the style "wants"
−
     * navigation -- Main journal navigation links  
+
     * 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
 
     * footer -- footer links/info (not sure what to put here but it seems like style information + branding is on a lot of layouts
 
-->
 
-->
 
<html>
 
<html>
−
     <!-- Profiles for hcard/hcalendar/hatom -->
+
     <!-- 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">
 
     <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>
 
         <title>Page title</title>
Line 81: Line 81:
  
 
<!--
 
<!--
−
Sample page container with an hatom feed container
+
Recent/Read entries page container with an hatom feed container
 
-->
 
-->
 
<div id="entries" class="hfeed">
 
<div id="entries" class="hfeed">
−
    <div class="navigation">
+
<div class="inner">
−
        <div class="inner">
+
      <div class="navigation">
−
            <ul>
+
        <div class="inner">
−
                <li class="page-back">Navigate backwards</li>
+
            <ul>
−
                <li class="page-top">Top of page</li>
+
                <li class="page-back">Navigate backwards</li>
−
                <li class="page-forward">Navigate forwards</li>
+
<li class="page-forward">Navigate forwards</li>
−
            </ul>
+
</ul>
−
        </div>
+
</div>
−
    </div>
+
</div>
−
    <!-- Entries -->
+
<!-- Entries -->
−
    <div class="navigation">
+
<div class="navigation">
−
        <div class="inner">
+
          <div class="inner">
−
            <ul>
+
            <ul>
−
                <li class="page-back">Navigate backwards</li>
+
                <li class="page-back">Navigate backwards</li>
−
                <li class="page-top">Top of page</li>
+
<li class="page-top">Top of page</li>
−
                <li class="page-forward">Navigate forwards</li>
+
<li class="page-forward">Navigate forwards</li>
−
            </ul>
+
</ul>
−
        </div>
+
</div>
−
    </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>
 
</div>
  
Line 145: Line 325:
 
Entries:
 
Entries:
 
--------
 
--------
−
I'm not sure if/where there should be dilineation between header/footer content.  
+
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.
 
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.
 
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" id="entry_entryid">
+
<div class="entry-wrapper" id="entry-wrapper-$orderid">
−
    <div class="inner">
+
<div class="separator separator-pre"><div class="inner"></div></div>
−
        <div class="header">
+
<div class="entry" id="entry-$entryid">
−
            <h3 class="subject entry-title"><span>Entry Subject</span></h3>
+
    <div class="inner">
−
            <span class="trust-filter">Trust filter / security icon</span>
+
        <div class="header">
−
            <span class="published" title="2008-08-28T13:14:37-07:00"> <!-- Datetime title required for hatom -->
+
            <h3 class="subject entry-title"><span>Entry Subject</span></h3>
−
                <span class="date">Date</span>
+
<span class="trust-filter">Trust filter / security icon</span>
−
                <span class="time">Time</span>
+
<span class="restrictions">Adult filter / icons</span>
−
            </span>
+
<span class="published datetime" title="2008-08-28T13:14:37-07:00"> <!-- Datetime title required for hatom -->
−
        </div>
+
                  <span class="date">Date</span>
−
        <div class="contents">
+
<span class="time">Time</span>
−
            <div class="inner">
+
</span>
−
                <div class="entry-content">Entry text</div>
+
</div>
−
                <div class="postedto">
+
<div class="contents">
−
                    <div class="poster author"><!-- See user tag --></div>
+
              <div class="inner">
−
                    <div class="community"><!-- user tag for community --></div>
+
                <div class="entry-content">Entry text</div>
−
                </div>
+
<div class="meta">
−
            </div>
+
  <div class="postedto">
−
        </div>
+
    <div class="poster author"><!-- See user tag --></div>
−
        <div class="footer">
+
<div class="community"><!-- user tag for community --></div>
−
            <div class="inner">
+
</div>
−
                <div class="meta">
+
<div class="currents">
−
                    <!-- Currents, etc. Not sure how to structure these, dl maybe? -->
+
  <!-- Still need to figure out how to mark these up -->
−
                </div>
+
</div>
−
                <ul class="tags">
+
</div>
−
                    <li><a rel="tag">Tag 1</a></li>
+
</div>
−
                    <li><a rel="tag">Tag 2</a></li>
+
</div>
−
                    <li><a rel="tag">Tag 3</a></li>
+
<div class="footer">
−
                </ul>
+
  <div class="inner">
−
                <ul class="links">
+
<ul class="tags">
−
                    <li class="link-permanent"><a class="bookmark" rel="bookmark">permalink</a></li>
+
  <li><a rel="tag">Tag 1</a></li>
−
                    <li class="link-read">read</li>
+
<li><a rel="tag">Tag 2</a></li>
−
                    <li class="link-post">post</li>
+
<li><a rel="tag">Tag 3</a></li>
−
                    ..
+
</ul>
−
                </ul>
+
<ul class="links">
−
            </div>
+
  <li class="link-permanent"><a class="bookmark" rel="bookmark">permalink</a></li>
−
        </div>
+
<li class="link-read">read</li>
−
    </div>
+
<li class="link-post">post</li>
 +
..
 +
</ul>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="separator separator-post"><div class="inner"></div></div>
 
</div>
 
</div>
−
<div class="separator"><div class="inner"></div></div>
 
−
 
 
<!--
 
<!--
 
Modules:
 
Modules:
Line 206: Line 396:
 
-->
 
-->
 
<div class="module" id="module-moduleid1">
 
<div class="module" id="module-moduleid1">
 +
<div class="separator separator-pre"><div class="inner"></div></div>
 
     <div class="inner">
 
     <div class="inner">
 
         <div class="header">
 
         <div class="header">
Line 223: Line 414:
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 +
<div class="separator separator-post"><div class="inner"></div></div>
 
</div>
 
</div>
 
</source>
 
</source>

Revision as of 01:20, 24 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 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>
Retrieved from "http://wiki.dreamwidth.net/wiki/index.php?title=User_talk:JProulx&oldid=2409"