Goal: Discuss some critical elements of good websites
Goal: Talk about producing and maintaining such websites
Not talking about glitzy HTML/CSS, graphic design, etc
Focus on sites for research and senior design projects, events, organizations & clubs, personal professional page, etc
Basic plan for the day:
Some very simple rules to live and die by:
Pretty much everybody focuses on page layout
theminiaturespage.com---barebones layout, really popular
Keep in mind: You will spend as much time doing basic maintenance on your site as you do on layout & content
Those costs are directly proportional to complexity
Prepare yourself for migration, updating
Characteristics for one class of sites:
Wikis are well suited for these sites; basic ideas:
Too many people conflate "Wiki" software w/ Wikipedia
Not all Wikis are world writable
Wiki downsides are host requirements, code lifecycle
Most have simple template language for customization:
<!-- LEFT SIDEBAR -->
<div class="sidebar" style="width:128px; position:absolute;
padding:4pt; font-size:8pt; background-color:#ffffff">
<!--wiki:{$Group}.SideBar {$SiteGroup}.SideBar--></td>
</div>
<!-- MAIN CONTENT -->
<div style="margin-left:140px; padding:4pt;">
<div class="topnav" style="float:right">[
<a href='{$PageUrl}?action=print' target='_blank'>$[Print]</a> |
<a href='{$PageUrl}?action=diff'>$[History]</a> |
<a href='{$PageUrl}?action=edit'>$[Edit]</a> ]</div>
<div class="pageTitle" style="font-size:7pt">
<a href='{$ScriptUrl}/{$Group}'>{$Group}</a> / {$Title}<br/>
</div>
<!--PageText-->
<div style="font-size:7pt; text-align:right"><span class="modText">$[Page
last modified on {$LastModified}]</span></div>
<div style="background-color:#9f9d8c; height:1px"> </div>
<div class='topnav' style="text-align:center;">[
<a href='{$PageUrl}?action=print' target='_blank'>$[Print]</a> |
<a href='{$PageUrl}?action=diff'>$[History]</a> |
<a href='{$PageUrl}?action=edit'>$[Edit]</a> ]</div>
</div>
</div>
Another class of sites:
Extensible Stylesheet Language Transformations (XSLT)
Joe's "Official" Page---typical academic page on surface
Bibliography kept in BiBTeX derived XML format
Format adapted from http://bibtexml.sf.net/
<bibtex:entry id="kopena:asme2006">
<bibtex:inproceedings>
<bibtex:author>
<bibtex:person>
<bibtex:first>Joseph B.</bibtex:first>
<bibtex:last>Kopena</bibtex:last>
</bibtex:person>
<bibtex:person>
<bibtex:first>Joshua</bibtex:first>
<bibtex:last>Shaffer</bibtex:last>
</bibtex:person>
<bibtex:person>
<bibtex:first>William C.</bibtex:first>
<bibtex:last>Regli</bibtex:last>
</bibtex:person>
</bibtex:author>
<bibtex:title>{CAD} Archives Based on {OAIS}</bibtex:title>
<bibtex:booktitle>{ASME} International Design Engineering Technical Conference,
Computers and Information in Engineering</bibtex:booktitle>
<bibtex:year>2006</bibtex:year>
<download>http://gicl.cs.drexel.edu/people/tjkopena/publications/tjkopena-asme2
006.pdf</download>
</bibtex:inproceedings>
</bibtex:entry>
BibTeX output:
@inproceedings{kopena:asme2006,
author={Joseph B. Kopena and Joshua Shaffer and William C. Regli},
title={{CAD} Archives Based on {OAIS}},
booktitle={{ASME} International Design Engineering Technical Conference,
Computers and Information in Engineering},
year={2006},
}
HTML listing output:
<p id="kopena:asme2006">
<div id="layer1">
<a href="http://gicl.cs.drexel.edu/people/tjkopena/publications/tjkopena-asme2006.pdf">
<img style="border-style:none; position:relative;left:590px; top:10px"
alt="More Info/Download" src="art/disk-icon.png"></a>
</div>
<div style="text-indent:-2em; margin-left:2em">
Joseph B. Kopena, Joshua Shaffer, and William C. Regli. <i>CAD Archives Based
on OAIS.</i> In Proceedings of ASME International Design Engineering Technical
Conference, Computers and Information in Engineering, 2006.
</div>
</p>
Rules to extract authors, properly adding commas to raw list:
<xsl:template match="bibtex:person">
<xsl:value-of select="bibtex:first" />
<xsl:text> </xsl:text>
<xsl:value-of select="bibtex:last" />
</xsl:template>
<xsl:template match="bibtex:author">
<xsl:apply-templates select="bibtex:person[1]" />
<xsl:for-each select="bibtex:person[position()>1]">
<xsl:if test="last() > 1">
<xsl:text>, </xsl:text>
</xsl:if>
<xsl:if test="position() = last()">
<xsl:text> and </xsl:text>
</xsl:if>
<xsl:apply-templates select="." />
</xsl:for-each>
</xsl:template>
Easiest way to use XSLT: Transformer built into Apache Ant
<project name="tjkopena-site" default="site" basedir=".">
<property name="styles.bibtex" value="bibtexml-ex2bibtex.xsl" />
<property name="styles.pub-high" value="pub-highlights.xsl" />
<property name="dirs.cnt" value="cnt/" />
<property name="dirs.dest" value="../" />
<target name="init"> <tstamp/> </target>
<target name="publications" depends="init">
<xslt in="${dirs.cnt}bibtex.xml"
out="${dirs.dest}tjkopena.bib"
style="${styles.bibtex}">
</xslt>
</target>
<target name="site" depends="init, publications" />
</project>
Transformation can take a fair amount of processing
Can be cumbersome to work on collaboratively
Nearly guaranteed long-term existence of technology
Powerful, rapid programming paradigm
Content and activity are key features of all websites
Have to determine easiest approach to keep your site updated
Minimalism is key!
This presentation produced entirely in HTML using slightly modified W3C Slidy stylesheets; example slide description:
<div class="slide"> <h1>The End</h1> <p>For more information, suggestions, comments, contact: <div style="margin-left:1em"> <a href="http://gicl.cs.drexel.edu/people/tjkopena/">Joe Kopena</a><br/> <a href="mailto:tjkopena@cs.drexel.edu"> tjkopena@cs.drexel.edu</a> </div> </p> <p style="padding-top:2em; text-align:center"> <i>Thanks!</i> </p> </div>
For more information, suggestions, comments, contact:
Thanks!