Since I wrote my last post Styling my WSRP portlets - does these CSS classes really give us common look-and-feel? I've been looking for recommendations and best practice on this field of web design. In this post I'll list some of the best sources I've found and compare with an example by Oracle.
Semantic (X)HTML
I hadn't heard of this before stumbling upon it, but the concept i straight forward and not to far away from projects I've worked on myself. There are several good references but one of best are The Early Bird Catches the CSS: Planning Structural HTML by Virginia DeBolt (on Wise-Women). Other great sources:
- Do Canonical Web Designs Exist?
- Canonical Web Design, Redux
- HTML as Self-Describing Data
- Explaining semantic mark-up
- Understanding and extending semantics in HTML
- Semantics in HTML
Where the last one has the full crossover to microformats.
The Oracle CSS Portlet
As an effort to enable/show WSRP 1.0 interoperability several of the member of that committee has exposed both producers and some simple portal pages consuming the different producers. One of the portlets exposed by Oracle are The Oracle CSS Portlet:
which can be found alongside others on the Hosted WSRP root page with "WSRP/JSR 168 Sample Portlets". This example portlet is perfect to get an idea on how to use the classes.
Before looking into the actual markup a run through W3C's Markup Validation Service gives:This page is not Valid HTML 4.01 Transitional! - Failed validation, 9 Errors. This is not that bad and most of the errors seem minor.
In the markup there's no rule as to where the portlets start, but in this example it's not so hard. Using the great Web Eeveloper add-on to Firefox, with "View style information" (under 'CSS') it looks like this:
This is a very resonale guess as to where the page template stops and the portlet starts. This is also of relevance as this concerns the use of section classes.
The first part of the template until the portlet part is like:
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <HTML dir="LTR" lang="da"> 3 <HEAD> 4 <TITLE>CSS Portlet</TITLE> 5 </HEAD> 6 <BODY bgcolor="#FFFFFF"> 7 <SCRIPT TYPE="text/javascript">function show_context_help(h) {window.open(h,"Help","menubar=1,toolbar=1,scrollbars=1,resizable=1,width=700,height=500").focus();}</SCRIPT> 8 <NOSCRIPT></NOSCRIPT> 9 <LINK REL=Stylesheet TYPE="text/css" 10 HREF="http://portalstandards.oracle.com/portal/pls/portal/PORTAL.wwui_api_body.render_wizard_css?p_version=10.1.4.0.0.594"> 11 <A HREF="#content"><IMG SRC="/images/pobtrans.gif" ALT="Spring over navigeringslinks" border=0></A> 12 <TABLE CELLSPACING="0" CELLPADDING="0" WIDTH="90%" align="CENTER" CLASS="OraWizBannerColor"> 13 <TR> 14 <TD ALIGN="LEFT" width="5%" valign=TOP rowspan=2><IMG SRC="/images/logo.gif" ALT="Oracle Portal" border=0></TD> 15 <TD ALIGN="RIGHT" valign="TOP"><IMG SRC="/images/pobtrans.gif" height=1 width=10 border=0 ALT=""> <A 16 HREF="http://portalstandards.oracle.com/portal/pls/portal/PORTAL.home" class="OraWizBannerLink">Startside</A> <IMG 17 SRC="/images/pobtrans.gif" height=1 width=10 border=0 ALT=""> <A 18 HREF="http://portalstandards.oracle.com/portal/page/portal/TOPLEVELSITE" class="OraWizBannerLink">Builder</A></TD> 19 </TR> 20 </TABLE> 21 <CENTER> 22 <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="90%"> 23 <TR> 24 <TD> 25 <TABLE WIDTH="100%" BORDER="0" CELLPADDING="0" CELLSPACING="0"> 26 <TR> 27 <TD width="3%" class="OraBgColorDark"> </TD> 28 <TD width="96%" class="OraBgColorDark"><FONT class="OraGlobalPageTitle">CSS Portlet</FONT></TD> 29 <TD class="OraBgColorDark"> </TD> 30 </TR> 31 </TABLE> 32 33 </TD> 34 </TR> 35 <TR> 36 <TD> 37 <TABLE border="0" cellpadding="0" cellspacing="0" width="100%"> 38 <TR> 39 <TD rowspan="2" valign="TOP"> 40 <TABLE border="0" cellpadding="0" cellspacing="0"> 41 <TR> 42 <TD valign="TOP" class="OraBgColorDark"><IMG src="/images/FFFFFFsl.gif" valign="TOP" border="0"></TD> 43 </TR> 44 </TABLE> 45 </TD> 46 <TD rowspan="2" valign="TOP"><IMG src="/images/compedit.gif" valign="TOP" border="0"></TD> 47 <TD align="right" valign="TOP" width="100%"> 48 <FORM> 49 <TABLE border="0" cellpadding="1" cellspacing="4"> 50 <TR> 51 <TD BGCOLOR="#999999"> 52 <BUTTON TYPE="button" 53 onClick="javascript:window.location='http://portalstandards.oracle.com/portal/page/portal/OracleHostedWSRPPortal/Samples'">Close</BUTTON> 54 55 </TD> 56 </TR> 57 </TABLE> 58 </FORM> 59 </TD> 60 </TR> 61 </TABLE> 62 </TD> 63 </TR> 64 </TABLE> 65 </CENTER> 66 <CENTER> 67 <TABLE WIDTH="90%" BORDER="0" CELLPADDING="0" CELLSPACING="0"> 68 <TR> 69 <TD> 70 <BLOCKQUOTE> 71 <BLOCKQUOTE>
Aiming to to be "4.01 Transitional" is a common choice, though strict would have been more correct in terms of the HTML 4.01 specification itself. The layout is clearly controlled by a tables and not through CSS2. The double nesting in <blockquote> elements is non-semantic.
The next markup section is the portlet markup, and it comes with an abvious change from uppercase to lowercase, supporting my guess that this in fact the content provided by the portlet:
72 <p class="portlet-section-header">This is a portlet section header - uses style "portlet-section-header"</p> 73 <p class="portlet-section-subheader">This is a portlet section sub-header - uses style "portlet-section-subheader"</p> 74 <p class="portlet-section-body">This is a portlet section body - uses style "portlet-section-body"</p> 75 76 <p class="portlet-section-alternate">This is an alternate row within this section - uses style 77 "portlet-section-alternate"</p> 78 <p class="portlet-section-footer">This is a portlet section footer - uses style"portlet-section-footer"</p> 79 <p class="portlet-font">This is regular text with in the portlet body - uses style "portlet-font"</p> 80 <p class="portlet-font-dim">This text uses style "portlet-font-dim"</p> 81 <p class="portlet-msg-status">This is a status message with in the portlet - uses style "portlet-msg-status"</p> 82 <p class="portlet-msg-info">Help: This is a Help message - uses style "portlet-msg-info"</span></p> 83 <p class="portlet-msg-error">Error: This is an error message - uses style "portlet-msg-error"</p> 84 <p class="portlet-msg-alert">Warning: This is a warning - uses style "portlet-msg-alert"</p> 85 <p class="portlet-msg-success">This text is a verification of the successful completion of a task - uses style 86 "portlet-msg-success"</p>
This part of the portlet covers the basic CSS classes for section which here is though the <p> element. Next comes the table:
87 88 <center> 89 <table width="87%" border="1"> 90 <tr class="portlet-table-header"> 91 <td>This is a table heading - uses style"portlet-table-header"</td> 92 <td colspan="2">Heading 1</td> 93 <td>Heading 2</td> 94 <td>Heading 3</td> 95 </tr> 96 <tr class="portlet-table-subheader"> 97 <td>This is a table sub-heading - uses style "portlet-table-subheader"</td> 98 <td>Sub-heading 1</td> 99 <td>Sub-heading 2</td> 100 <td> </td> 101 <td> </td> 102 </tr> 103 104 <tr class="portlet-table-body"> 105 <td>This is table body text - uses style "portlet-table-body"</td> 106 <td>Table body text</td> 107 <td>Table body text</td> 108 <td>Table body text</td> 109 <td>Table body text</td> 110 </tr> 111 <tr class="portlet-table-footer"> 112 <td colspan="5" align="center">This is a table footer - uses style "portlet-table-footer"</td> 113 </tr> 114 </table> 115 </center>
If I were to choose I would prefer using the corresponding table elements for header, body and footer. I can't figure out if the subheader is needed or could be done by <caption> and <thead>.
The last part is an example for forms:
116 <form> 117 <p align="center" class="portlet-section-header">A Sample Form</p> 118 119 <center> 120 <table> 121 <tr> 122 <td class="portlet-form-label" colspan="2">This is a form label - uses style "portlet-form-label"</td> 123 </tr> 124 <tr> 125 <td class="portlet-form-field-label">This is text for a form field - uses style "portlet-form-field-label"</td> 126 <td><input name="textfield" type="text" class="portlet-form-input-field" 127 value='This is user input in a text field - uses style"portlet-form-input-field"' /></td> 128 </tr> 129 <tr> 130 <td class="portlet-form-label" colspan="2" align="center"><input name="Submit" type="button" 131 class="portlet-form-button" value='This is text on a form button - uses style "portlet-form-button"' /></td> 132 </tr> 133 </table> 134 </center> 135 </form>
Like with the table part it seems redundant that the style classes repeat the element structure.
And from here it's back to the template with uppercasing:
136 </BLOCKQUOTE> 137 </BLOCKQUOTE> 138 </TD> 139 </TR> 140 </TABLE> 141 </CENTER> 142 <CENTER> 143 <TABLE border="0" cellpadding="0" cellspacing="0" width="90%"> 144 <TR> 145 <TD><IMG src="/images/pobtrans.gif" width="1" height="8"></TD> 146 </TR> 147 <TR> 148 <TD> 149 150 <TABLE width="100%" border="0" cellpadding="0" cellspacing="0"> 151 <TR> 152 <TD align="right"> 153 <TABLE border="0" cellpadding="0" cellspacing="0"> 154 <TR> 155 <TD align="right" class="OraBgColorDark"><IMG src="/images/FFFFFFbr.gif"></TD> 156 </TR> 157 </TABLE> 158 </TD> 159 </TR> 160 <TR> 161 <TD height="14" class="OraBgColorDark"> </TD> 162 </TR> 163 </TABLE> 164 </TD> 165 </TR> 166 </TABLE> 167 </CENTER> 168 169 </BODY> 170 </HTML>
Conclusion
Semantic XHTML is considered best practice but it's hard to find in the portlet CSS classes. It is very nice that Oracle has taken the time to create an example for how the classes should be used. The missing part to conclude on is the complexity of the example and even more the richness of the design. The design chosen here is quite minimal and that might make this example more forgiving, as to which variants in the portlet markup would look right.
