The official website for the 2014 interactive fiction game Tales of Gods and Treachery: The Hunt for Bálbrandr which is also available on GitHub. The website was initially created as a part of the university course along with the game but was updated in April of 2017 for practice in web development. The site contents, however, have not been changed in any meaningful way. The focus was on improving the structure of source code, accessibility, look, and organization of the website as the original site was made in a rush and was not even completely valid HTML5. This repository does not represent the directory structure on the web server.
The website consists only of three static pages so the code base was kept to a minimum and no PHP framework such as Laravel was used even though it would have made development easier in the long run.
The core structure of the site is done using Bootstrap 3's grid system (CSS only) and is valid HTML5, validated with the W3C Nu Html Checker. Naturally styling is done with CSS3 with an attempt at achieving good browser compatibility.
JavaScript is used for analytics and accessibility features only and is not required for core site functionality. One of the goals of this website update project was to create a website conforming to the Web Content Accessibility Guidelines 2.0 level AA. (However, the website meets some AAA level requirements such as the 7:1 contrast ratio.) The WCAG 2.0 quick reference was used instead of the actual guidelines document when implementing accessibility features. Several tools were used to automatically assess conformance:
- A-Tester
- Some warning messages seem to contradict the guidelines.
For example the checker disallows
onclickevents on elements and refers to the guidelines section 2.1.1 where it is explicitly recommended to useonclickevents to make actions keyboard accessible.
- Some warning messages seem to contradict the guidelines.
For example the checker disallows
- Accessibility Bookmarklets
- AInspector Sidebar for Firefox
- Accessibility Developer Tools for Chrome
- NVDA screen reader
Every content page contains unique and comprehensive JSON-LD markup with the Schema.org schema to improve search engine visibility. Validation was done using Google's Structured Data Testing Tool.
Some PHP is used to reduce code duplication. The HTML head section, the page header and footer are inserted into and customized for each content page using PHP. The method by which this is done is not particularly pretty but it is functional.
The .htaccess file is primarily used for URL rewriting and redirection such as removing content page file extensions and cleaning up the URL as the content pages are not stored at the page root directory. Although the website would benefit from cache control, it is not used as the university web server does not seem support it. Note that the project contains separate .htaccess files for development and production environments.