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 106: | Line 106: | ||
# Inline images instead of list markers or background images via CSS | # Inline images instead of list markers or background images via CSS | ||
# Table with inline styles | # Table with inline styles | ||
# Superfluous class of "link" for <nowiki><a></nowiki> tags. | |||
# ... | # ... | ||
Revision as of 16:30, 5 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.
- ...
The modified code
[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>
