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 browser plugins for web design and development.

  • 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
  • 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 installed in your webdocs directory is entirely your responsibility. You are responsible for the content and all software updates/patches.

Some options available to you are outlined below.

System Options Skill Level
Google Sites provides a drag and drop interface that will allow you to create your own basic website. Beginner
Wordpress is an easy-to-use cms for a basic website or blog
  • The Faculty of Science hosts and maintains a WordPress server called Spaces. If you would like to set up a WordPress site for your research group (http://spaces.facsci.ualberta.ca/groupname), contact ScITech by e-mailing helpdesk@ualberta.ca and specifying your group name and that you want a new site on the spaces service.
    See the list of Computing Science Groups that are already using this service here.
 Beginner

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