Pre-conceptions of museums and galleries are usually wrong. Meet the Fairfield Museum & Gallery – it’s probably not what you remember it being from your school excursions. Get to know us so that we can, hopefully in the near future, get to know you.
The database of choice for our website is a web forum on which users can communicate. It would work with the use of an account system, in which the database would require the users’ username, email, first name, last name and password to create them an account. Registering would then require users validate their account by clicking a link in an email to the listed email address. All of these details will initially be entered on a registration form page.
The forum will also be classified into main categories and sub categories, as indicated by the entity relationship model diagram. Each category AND sub-category will include a title, description and date. Each sub-category belongs to a single main-category. Posts uploaded to the forum will be attached to one unique user, and one sub-category (you can only post in sub-categories; the main categories merely contain the subs).
After registration, users will be able to use the forum each time they visit the site once they log in to the system by filling out a form asking for their username and password.
The forum will allow users to exchange information relating to potential upcoming events, the content on our website and recent occurences in the cyber-activist world. The primary objective of our including a forum is to create a community through our website, and in doing so encourage users to engage in cyber-activism.
@font-face { font-family: “Times”; }@font-face { font-family: “ＭＳ 明朝”; }@font-face { font-family: “Cambria Math”; }@font-face { font-family: “Cambria”; }p.MsoNormal, li.MsoNormal, div.MsoNormal { margin: 0cm 0cm 0.0001pt; font-size: 12pt; font-family: Cambria; }.MsoChpDefault { font-family: Cambria; }div.WordSection1 { page: WordSection1; }
Casimir Nolan 11245014
Callum Boaden 11237385
Mark Harding 11245836
Alexander Ellis 11224072
Jiaojiao Lu 10864181
@font-face { font-family: “Times”; }@font-face { font-family: “ＭＳ 明朝”; }@font-face { font-family: “Cambria Math”; }@font-face { font-family: “Cambria”; }p.MsoNormal, li.MsoNormal, div.MsoNormal { margin: 0cm 0cm 0.0001pt; font-size: 12pt; font-family: Cambria; }.MsoChpDefault { font-family: Cambria; }div.WordSection1 { page: WordSection1; }
Baird, K, 2012, Information Architecture for the Web, PowerPoint presentation, UTS, Sydney, < https://online.uts.edu.au/bbcswebdav/pid-795822-dt-content-rid-3891206_1/courses/58220/INFORMATION%20ARCHITECTURE.pdf>
@font-face { font-family: “Times”; }@font-face { font-family: “ＭＳ 明朝”; }@font-face { font-family: “Cambria Math”; }@font-face { font-family: “Cambria”; }p.MsoNormal, li.MsoNormal, div.MsoNormal { margin: 0cm 0cm 0.0001pt; font-size: 12pt; font-family: Cambria; }.MsoChpDefault { font-family: Cambria; }div.WordSection1 { page: WordSection1; }
Final Reflection Report
Overall, as a team, we are very pleased with the aesthetics, usability, accessibility and general functionality of our website. We not only acquired valuable skills in coding html, CSS and JavaScript but also learnt a lot about Hacktivism and the powerful effect it has on the modern world. The most difficult part of the assignment was learning new skills in coding and trying to correct any errors when something went wrong. But persistence paid off and the site works. We were able to put to work all of the information we learnt this semester about usability, accessibility, and web design in general. Our objective was met and we believe that the users we had in mind throughout this process would be happy with the site, even in its prototype stage. Similarly, our clients, GetUp.org and Julian Assange would be pleased with a website that encourages and provides the tools for positive change in the world through the medium of the Internet. The final product is a testament to our hard work and newfound knowledge and skills in web design.
Accessibility
Markup and semantics
The site’s code structure is semantically correct- the site is fully functional. Any faults in the semantic structure have been amended. The site employs an ‘html’ doctype and is successfully recognized by key internet browsers. It is therefore accessible by all key Internet browsing programs (IE8 inclusive). We did this to ensure people with any preference of web browser could access the site.
The ‘title’ element of the page includes both the title of the website (Hacktivate) and the classification of each page after it (e.g. Hacktivate | About). This, as well as allowing the website to be user-friendly and consistent in relation to standards of the web, should also be helpful to search engines. Additionally, the title attribute is consistently used on the website as a means of providing additional information.
The site avoids using any deprecated elements or attributes in its code, as they are ‘replaced by CSS rules that achieve similar results’ (Kaiser, S. p152, 2006) and will be eliminated by future versions of W3C recommendations. We did this to keep up with constantly evolving web standards.
Dreamweaver was the program of choice for converting the site’s text to HTML, ensuring appropriate rendering. As well as that, it was the most time and effort-efficient program available, and one our coder was familiar with.
Validation tests
The final CSS and markup (for HTML) validation tests provided us with minimal errors. Those that existed were superficial, and deemed by our coder to be insignificant in the scheme of the website operating as intended.
Separating content from presentation
The site employs external CSS files, to ensure efficiency and convenience. It also allowed us to make site-wide changes from the external style sheet. The site uses CSS for all of the website’s styling and presentation purposes, thanks to the increasing support from modern browsers for CSS.
@font-face { font-family: “Times”; }@font-face { font-family: “ＭＳ 明朝”; }@font-face { font-family: “Cambria Math”; }@font-face { font-family: “Cambria”; }p.MsoNormal, li.MsoNormal, div.MsoNormal { margin: 0cm 0cm 0.0001pt; font-size: 12pt; font-family: Cambria; }.MsoChpDefault { font-family: Cambria; }div.WordSection1 { page: WordSection1; }
Metadata
Metadata is vital to getting your website noticed by the public and for a subject such as hacktivism (which relies on large groups of people taking action) it is especially important. Unseen by the users of the site metadata is the application of key words and text necessary to being seen on a search engine. The more metadata we apply the more of a chance we have at being seen by a Hacktivist on a search engine.
@font-face { font-family: “Times”; }@font-face { font-family: “ＭＳ 明朝”; }@font-face { font-family: “Cambria Math”; }@font-face { font-family: “Cambria”; }p.MsoNormal, li.MsoNormal, div.MsoNormal { margin: 0cm 0cm 0.0001pt; font-size: 12pt; font-family: Cambria; }.MsoChpDefault { font-family: Cambria; }div.WordSection1 { page: WordSection1; }
Prototypes and feedback
Our initial prototype was not too far from the final version that you see today, we presented it to a group of our peers and received useful feedback. The differences between the prototype and the final product mirror the feedback we were given. Overall people approved of our minimal use of colour as well as the meaning behind the aesthetic choices.
Feedback
Most of the criticism came with spacing, margins and font choices. Our prototype originally had the boxes of paragraphs at a good distance from each other but too close to the sides of the website, we increased the margins and decreased the issue. Another problem that was brought up was that the titles were too similar to the paragraphs and there was an awkward distinction between the two. We changed this by enlarging the titles and adding more space between them and the paragraphs. Another issue was that, in our prototype, the sitemap was empty and it was just a blank white square at the bottom of the page, a befuddled member of our peers asked us to explain it to which we answered, it’s a sitemap, don’t worry it just hasn’t been filled with information yet. We were quite pleased with our original and we think our peers were too as they didn’t have too many queries or criticisms of the site. What feedback we did get was valuable as sometimes our group was so busy focusing on something else that we managed to overlook an issue that other people see straight away.
@font-face { font-family: “Times”; }@font-face { font-family: “ＭＳ 明朝”; }@font-face { font-family: “Cambria Math”; }@font-face { font-family: “Cambria”; }p.MsoNormal, li.MsoNormal, div.MsoNormal { margin: 0cm 0cm 0.0001pt; font-size: 12pt; font-family: Cambria; }.MsoChpDefault { font-family: Cambria; }div.WordSection1 { page: WordSection1; }
Interoperability and Web Standards
Cross-Browser Compatibility
An important aspect of the creation of our site was making sure that it was operable in different browsers and met web standards. There are a number of websites that helped us with this task. Obviously opening the site in different browsers and testing the operability was a necessary method to take but when it came to figuring out what the issue was it was helpful to have websites that cater to these specific needs. The websites were able to make sure our site was operable in different browsers and if there were any issues it was easy for us to find out what the issue was. This was extremely useful as the alternative to this is trawling through our html code and trying to find typos or figure out what is ill suited to a specific browser.
Web Standards
Similarly to the cross-browser compatibility tests we were able to make sure our site met web standards by using a number of websites that specialise in testing prototype sites. The ultimate goal is to make our site accessible to all on the web. While these web standards are not enforced laws or rules, they are an important series of regulations that ensure your website is credible. It helped that we used Dreamweaver to create the site, as its functionality is appropriate to the creation of a site that meets web standards. We created a concise, usable site and the resulting simplicity meant that there was not many issues in making the site meet web standards.
@font-face { font-family: “Times”; }@font-face { font-family: “ＭＳ 明朝”; }@font-face { font-family: “Cambria Math”; }@font-face { font-family: “Cambria”; }p.MsoNormal, li.MsoNormal, div.MsoNormal { margin: 0cm 0cm 0.0001pt; font-size: 12pt; font-family: Cambria; }p { margin-right: 0cm; margin-left: 0cm; font-size: 10pt; font-family: Times; }.MsoChpDefault { font-family: Cambria; }div.WordSection1 { page: WordSection1; }
Pre-design analysis
Aesthetic choices
Colour
We decided to create the site with a simple colour palette of five colours and try our best to keep everything within this palette. We used the Adobe Kuler website to pick palette that matched our needs. Kuler allows you to pick a colour theme and then match similar colours/compare with other palettes. The overall theme of the website (in terms of information) is ‘power to the people’. So we came up with the idea of making the overall aesthetic similar to that of communism.
Banners
In addition to this we added an image of a protest as the top and bottom banners on the website. Little details like the slow crossfade of this banners we believe adds to the professionalism of the site.
Title
The main title featured on the top left of the site is styled as though it has been spray painted or torn out of a magazine and roughly pasted on the site. The reasoning behind this design is to encourage the feeling of protest; the title looks like it could be a banner held up in a protest or stuck on the wall of a governmental building by an activist.
Slogan
The slogan, “Bringing Activism to the 21st Century” is featured top right of the site in an old style, handwritten typeface. This juxtaposes the main title and inspires feelings of the old times of activism. In a sense it acts as a member of the older generation of activists passing down the duties to the modern, Internet based generation.
Sitemap
The sitemap has been designed to be a little white poster held up by two hands. The fact that the poster is held by one man encourages an idea which is prevalent throughout our site; that one man can make a difference in the world. It also mirrors the idea of Activists holding up posters in protests.
Navigation choices
We followed a rather simple method of navigation for the site, as we believe that is most suited to our users. We feature a navigation bar across the top on a slight angle to add to the anti-conventional feeling evident in the site. The navigation bar across the top is on every page for basic navigation throughout the site. The ‘Hacktivate!’ page contains a number of internal pages that are not linked to from the main navigation bar. These links are available on the ‘Hacktivate!’ but in order to make them more accessible throughout the entire website we added a sitemap located at the bottom of each page. The sitemap includes all of the links to the pages. The simplicity of the navigation throughout the site creates a usable platform perfect for Hacktivists to find all the information the need.
Social media
We have implemented a live Twitter feed as well as a Facebook plugin to encourage the ‘Hacktivate’ site in the social networking sphere. As the Internet expands social networking proves to be a formidable catalyst of social and even political change. Egypt was subject to a massive rush of activism due to a group of Facebook and Twitter users, “Egypt’s activists understand better than anyone the advantages offered by these new technologies in such moments of crisis. Their importance should not be underestimated.” (Faris, 2008). By implementing a live Twitter feed Hacktivists can remain up to date with what other Hactivists are saying about current social and political news. The Facebook plugin allows Hacktivists to meet and communicate with each other and even band together on similar theories.
Faris, D, 2008, Revolutions without Revolutionaries? Network Theory, Facebook, and the Egyptian Blogoshpere, Oxford, UK.
 | markwilliamharding on Information Architecture / Con… |
 | Cas on Database Design |
| Cas on Basic Concept Map |
 | ellisalex on A few ideas for direction of… |
LlamaAcid 