Site Administration
<a class="link" href="admin/index.php"><img src="pix/item.gif" alt="">Notifications</a>
<a class="link" href="admin/register.php"><img src="pix/item.gif" alt="">Registration</a>
<a class="link" href="admin/settings.php?section=optionalsubsystems"><img src="pix/item.gif" alt="">Advanced features</a>
<a href="#" name="d1"><img id="vh_div1indicator" src="pix/closed.gif" alt="Closed folder"> Users</a>
<a href="#" name="d5"><img id="vh_div5indicator" src="pix/closed.gif" alt="Closed folder"> Courses</a>
<a href="#" name="d6"><img id="vh_div6indicator" src="pix/closed.gif" alt="Closed folder"> Grades</a>
<a href="#" name="d8"><img id="vh_div8indicator" src="pix/closed.gif" alt="Closed folder"> Location</a>
<a href="#" name="d9"><img id="vh_div9indicator" src="pix/closed.gif" alt="Closed folder"> Language</a>
<a href="#" name="d10"><img id="vh_div10indicator" src="pix/closed.gif" alt="Closed folder"> Plugins</a>
<a href="#" name="d16"><img id="vh_div16indicator" src="pix/closed.gif" alt="Closed folder"> Security</a>
<a href="#" name="d17"><img id="vh_div17indicator" src="pix/open.gif" alt="Opened folder"> Appearance</a>
<a href="#" name="d18"><img id="vh_div18indicator" src="pix/open.gif" alt="Opened folder"> Themes</a>
<a class="link" href="admin/settings.php?section=themesettings"><img src="pix/item.gif" alt="">Theme settings</a>
<a class="link" href="theme/index.php"><img src="pix/item.gif" alt="">Theme Selector</a>
<a class="link" href="admin/settings.php?section=calendar"><img src="pix/item.gif" alt="">Calendar</a>
<a href="#" name="d19"><img id="vh_div19indicator" src="pix/closed.gif" alt="Closed folder"> HTML editor</a>
<a class="link" href="admin/settings.php?section=htmlsettings"><img src="pix/item.gif" alt="">HTML settings</a>
<a class="link" href="admin/settings.php?section=documentation"><img src="pix/item.gif" alt="">Moodle Docs</a>
<a class="link" href="admin/settings.php?section=mymoodle"><img src="pix/item.gif" alt="">My Moodle</a>
<a class="link" href="admin/settings.php?section=coursemanager"><img src="pix/item.gif" alt="">Course managers</a>
<a class="link" href="admin/settings.php?section=ajax"><img src="pix/item.gif" alt="">AJAX and Javascript</a>
<a class="link" href="tag/manage.php"><img src="pix/item.gif" alt="">Manage tags</a>
<a href="#" name="d20"><img id="vh_div20indicator" src="pix/closed.gif" alt="Closed folder"> Front Page</a>
<a href="#" name="d21"><img id="vh_div21indicator" src="pix/closed.gif" alt="Closed folder"> Server</a>
<a href="#" name="d22"><img id="vh_div22indicator" src="pix/closed.gif" alt="Closed folder"> Reports</a>
<a href="#" name="d23"><img id="vh_div23indicator" src="pix/closed.gif" alt="Closed folder"> Development</a>
Frank Ralf (talk | contribs) |
Frank Ralf (talk | contribs) |
||
Line 98: | Line 98: | ||
</code> | </code> | ||
== Discussion: The good, the bad, and the ugly == | |||
# No use of lists (semantic HTML) | # No use of lists (semantic HTML) | ||
Line 108: | Line 108: | ||
# Superfluous class of "link" for <nowiki><a></nowiki> tags. | # Superfluous class of "link" for <nowiki><a></nowiki> tags. | ||
# ... | # ... | ||
=== Some general rules of thumb === | |||
* DIV and SPAN are generic (block and inline) elements with no semantic meaning. | |||
* As such they should be used as sparsely as possible. | |||
* There's no need to wrap single elements in DIV or SPAN tags: | |||
: '''Example''': | |||
<code php></code> | |||
<div class="header"> | |||
<div class="title"> | |||
<h2>Site Administration</h2> | |||
</div> | |||
</div> | |||
</code> | |||
=== The modified code: "Look Ma, (nearly) no DIVs!" === | === The modified code: "Look Ma, (nearly) no DIVs!" === |
Revision as of 09:40, 6 May 2009
Anatomy of Site Admin Block
This is the original code for the Site Admin block plus some additional HTML to make the code valid an viewable in a browser.
This is a static HTML snapshot, created by using the browser's "Save page as..." function. The code, including the necessary CSS and image files, is available here: Site_Administration_2-0_Open_3.zip.
It should look like this:
The original code
<html>
<head>
<title>Site Adminstration - Open</title>
<link rel="stylesheet" type="text/css" href="styles.css"></link>
<link rel="stylesheet" type="text/css" href="styles_002.css"></link>
</head>
<body >
Moodle 2.0 - Site Administration (open) - Original Code
</body>
</html>
Discussion: The good, the bad, and the ugly
- No use of lists (semantic HTML)
- No semantic ids
- Repetitive information in "name" and "id" attributes
- Empty (unnecessary) <span> tags
- Inline images instead of list markers or background images via CSS
- Table with inline styles
- Superfluous class of "link" for <a> tags.
- ...
Some general rules of thumb
- DIV and SPAN are generic (block and inline) elements with no semantic meaning.
- As such they should be used as sparsely as possible.
- There's no need to wrap single elements in DIV or SPAN tags:
- Example:
Site Administration
The modified code: "Look Ma, (nearly) no DIVs!"
[TODO]
Here will be demonstrated how the code could be improved without changing it's rendition.
<a href="#sb-1" class="skip-block">Skip Site Administration</a>