Design and Development

Resources

A good place to learn about the fundamentals of webpage design is W3Schools. They offer a number of free tutorials on various subjects like HTML, XHTML, PHP and CSS, as well as links to validate your code, that will help you get started.

PHP is installed on the Department of Computing Science web server. PHP is a scripting language that is especially suited for web development and can be embedded into HTML documents.

Tools

There are a number of handy web design and development plugins for Firefox.

  • Colorzilla allows you to sample any colour from a webpage and it will give you the RGB values as well as the Hex colour code
  • Firebug is the ultimate web development tool - you can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page
  • Web Developer adds a menu and a toolbar with various web developer tools

Kuler is also a useful tool if you're having trouble picking a colour scheme.

Tips for good design

  • Use Headings to organize your content.
    Not only will it give your content structure, but formatting your content with heading tags will affect the searchability and and usability of your page by browsers.
  • Use lists (when appropriate) to make your content easier to read.
    Readers do a lot of scanning on the web – lists enable them to do this.
  • Include Alternative Text with your images.
    This is important to help keep your website accessible and valid.
  • Always close your html tags.
    Most start tags <b> are paired with matching end tags </b> in html.
  • Avoid inline styles.
    Inline styles end up making your pages look inconsistant and unprofessional. If you really need something styled a certain way, try creating a class for it (or styling the element) in a cascading style sheet.

Content management

A content management system (CMS) provides an easy way for you to update and manage your webpages without any advanced webmaster knowledge. These platforms often come with a number of tutorials and themes (the look and feel of your site) that you can readily use. The amount of customization you want to do is really up to you.

Please note that any site or CMS intalled in your webdocs directory is entirely your responsibility. You are responsible for the content and all software updates/patches.

Some widely used, open source content management systems are outlined below.

System Options Skill Level
DokuWiki is a standards compliant, easy to use wiki intended for collaboration
  • Download DokuWiki and install in your webdocs directory (webdocs.cs.ualberta.ca/~yourCSID)
Beginner
Wordpress is an easy-to-use cms for a basic website or blog
  • Download Wordpress and install in your webdocs directory (webdocs.cs.ualberta.ca/~yourCSID)
  • Sign up for a blog on wordpress.com
    (myname.wordpress.com or register and use a domain for $17 / year) This option is less flexible than your own install
  • If you would like an already configured (U of A branded) site for your CS research group, contact the webmaster to get your group set up on Spaces, the Faculty of Science's Wordpress portal (http://spaces.facsci.ualberta.ca/groupname)
    See the AMMI website as an example
Beginner
Drupal is a flexible and robust platform with a number of different modules available for you to customize your site Intermediate - Advanced

Most content management systems require some sort of database. Contact the Helpdesk to request a database.