ReferenceIt Colophon
ReferenceIt is a site with a simple goal - making referencing better. It provides a single place for students to create and store references, which can then be used again, in different styles, as and when they are needed. This section of the site will deal more with the how of the site than with what the site is.
Executive Summary
ReferenceIt was created to solve a problem - referencing things quickly and easily. There are many resources out there for doing this but, on the whole, many are found wanting. I wanted to change this, to provide a single easy to use place to create, store and access references, regardless of referencing style.
To do this I have produced a site that uses modern standards and makes it easy for people to reference the sites they visit and the books they read, in a simple fashion. They can reference these things directly on the site or they can reference sites as they visit them using a bookmarklet. The site also supports multiple referencing styles (Harvard and APA currently) as well as both American and British date formats.
The current state of ReferenceIt is only a starting point in terms of what I think it is capable of, limited by the amount of time that is available on the IMD course. I intend to invest more of my time post-graduation and in the future to further develop ReferenceIt to provide more functionality to current users, and more referencing styles to people that don't use Harvard and APA styles.
In addition, I intend to provide the ability to reference more types of material, with the aim of bringing the same ease of generation to all references that is currently shown on the site. This, combined with additional reference styles, will make ReferenceIt increasingly useful to a wider range of students, as it will continue to make it easier for students to generate references regardless of which referencing system they use.
Designer Bio - All About David Turner
ReferenceIt was designed and developed by me, David Turner, a soon to be graduate student of the University of Ulster. Being close to graduation means that I have completed almost four years of study in Interactive Multimedia Design.
As a part of my design education I have already achieved a Foundation Degree in Multimedia from the University.
With over ten years of playing with HTML as a hobby before making it a primary focus of my education and career I have a tendency to play around with my code, seeing what shiny new things I can cook up.
With the growing popularity of CSS3 and it's support by modern browsers I've been playing around to see what I can do with it in terms of design, often times cutting out swathes of images by using CSS in their stead, all of which comes together to provide quickly loading pages on sites.
ReferenceIt came about as a solution to a problem I've always had, creating and storing references. Many sites get one aspect of this right, but I have yet to encounter a site that has achieved both.
ReferenceIt has become more than a solution to my own referencing problems though, providing a solution for students that use other referencing styles to easily create references and, if they so desire, switch between referencing styles. This is an area I intend to expand in the future.
Web Standards
In this day and age it would be madness to use anything but web standards. ReferenceIt makes use of several of the wonderful new tools afforded by HTML5 and CSS3, with fallbacks used as necessary to support "older" browsers (IE, we're lookin' at you here). I feel it's important to provide the best experience I can to people with more current browsers, without forgetting people that won't, or can't, update their older software.
The site is marked up using valid HTML5 code, but the CSS that is used doesn't currently validate, due to my abundant usage of browser-specific prefixes for CSS3 elements. This is to ensure that the embellishments on the site work as widely as possible, and doesn't impact the usability or function of the site.
Browser Support
As mentioned above I have done my best to ensure that the site works as well as possible in as many browsers as possible. The ReferenceIt site works in all current browsers as well as older counterparts such as Internet Explorer 6. Different browsers will receive different experiences and not all functionality will be identical in every browser.
In addition to desktop browsers I have done my best to ensure that the site is styled appropriately in mobile devices. Due to the nature of the site, and the design I have employed throughout, this has been quite easy to accomplish for the most part. There are, sadly, a few issues that still need worked out with the mobile styling, but they are minor issues that I will be working to resolve as site development continues.
Content Management
At the very core, ReferenceIt is a Content Management System. ReferenceIt isn't based on a publicly available CMS however, being based on a custom CMS I have developed over the past year (currently unnamed and unreleased). The original CMS used was entirely flat-file based, not using any database connections at all for storing data. Whilst this was a usable solution for the original purpose of the CMS I knew it wouldn't be suitable for usage with ReferenceIt.
To resolve this issue I have coded up a new element for the CMS to allow it to connect to and manipulate data stored in databases. This made the storing of references much easier, as they are stored in an easy to manipulate location, rather than being stored in flat files.
For actual page content I have opted to stick with the pre-existing tools afforded to me using my own CMS, using a flat-file system to handle individual pages. This is part ease of use and part security - the limited interaction with databases will provide less opportunity for people to maliciously affect site content, though data security has been a high priority throughout the development of the site.
Data Security
As the Content Management System is entirely hand coded by myself, I wanted to cover the topic of data security for any user that reads through ReferenceIt's Colophon. Throughout the development of this site I have always placed a high priority upon ensuring two things:
- I require as little information as possible
- That all information I am provided with is as secure as possible
To this end there is only one piece of information I ask users for when registering - an email address. They can optionally fill out a password if they want to use a specific one, but if they don't then a random password is generated. Regardless of whether they fill out the password field or have a password assigned both pieces of data are encrypted in such a way that I cannot immediately tell what email addresses have been used to register and passwords are encrypted in such a fashion that I can never decrypt them.
On the highly unlikely event that user's data is compromised, this means that there are two pieces of data that are related in some way to the user. The first is an encrypted email address, which can only be decrypted using a string of text that is stored in a hidden location on my server. This means that even the user's contact information is securely hidden away from people malicious intent.
In addition to this the password is encrypted multiple times, using several security methods, to ensure that the password I store is completely useless to anyone other than the user who created it. I can see the password that is stored but I can't see the password that the user has created.
Storing Data
In addition to user information that is securely stored away there are some extra pieces of data that are stored by the site. The first of which is pretty obvious, the references. The second bit might not be so obvious, the syntaxes of the references. Currently ReferenceIt supports both the Harvard and APA styles of referencing, and allows reference generation for both Books and Web Sites. What most users probably aren't aware of is the fact that the references generated can be quickly and easily switched between Harvard and APA (and any other styles in the future) quickly and easily.
How? This is where the syntaxes come in. ReferenceIt uses them to create references for users based on the information that has been provided to it. These pieces of information are used to create references, but are stored as individual pieces of information. This means that if a user needs to change referencing styles in the future that their references will automatically make the switch to the new style. No need to update things manually.
There were a few issues with some aspects of this. The biggest issue, by far, was accurately converting dates into different referencing styles. Is a date of 11/04/2010 intended as the 11th April 2010 (UK Date Format) or 4th November 2010 (US Date Format). Once this has been identified (or guessed) how do I ensure that the date is accurately converted from one format to another.
Fortunately there are a few things that came together to help me work around this issue. The first is the user settings I store. They are able to specify what date format they want their dates to be formatted using. This helps me identify the structure that is used when creating references. the second is the date_create_from_format()
function available in the latest versions of PHP.
This function allows me to create a timestamp from a date using a specific date structure. So, to go back to the previous date, I can identify the format of the date using the user's date structure and, using that information, I can create a timestamp of that date. This has proven to be a very useful piece of code for making references more flexible.
How does this function achieve that? A timestamp is a measurement of time from January 1, 1970. Because of this, I can structure dates in any format that I need, be it based on the user's settings (for creating/editing/viewing references) or as mandated by specific referencing syntaxes (APA requires a specific date, whilst Harvard does not).
Presenting Data
One of the things I wanted to ensure that ReferenceIt provided was a form of referencing that would work in as many mediums as possible. The three currently supported are Rich Text, HTML and Markdown.
Interestingly the order in which the different forms of references are generated is the reverse of the order in which I would prioritise them. Most users of ReferenceIt will want Rich Text, with others wanting HTML and a very few opting for Markdown. The references all start off as Markdown formatted references, being converted into the additional formats.
I have done this because it is much easier to take a Markdown reference and convert it than it is to take a Rich Text reference and convert it back. I also intend to make it possible for users to create personal reference styles and to suggest additional referencing styles for use in the site. Markdown provides a very simple syntax for helping users do this.
Site Functionality
Additional functionality is brought to the site in two ways using a mix of raw JavaScript and the JavaScript Library jQuery. The first of these is that a user can scroll through all of their references in one go, with jQuery loading in additional references as the user reaches the bottom of the page. This continues until the user has no more references. In the event that JavaScript is disabled the default functionality of the site is to provide a list of pages that the user can click through to visit specific pages.
The second piece of additional functionality is provided in the form of a JavaScript Bookmarklet. The purpose of this bookmarklet is to allow people to reference sites when they are visiting them. No need to copy and paste every piece of information from the site into a form. This cuts out the vast majority of the work from referencing material.
The bookmarklet itself does two things. The first thing that it does is embeds the latest version of the jQuery Library. I do this to ensure that I can make use of all of the functionality I need, which older versions of the library may lack. The second thing that it does is to then embed a custom JavaScript file, designed specifically for the purpose of Referencing sites and books. I chose to embed this file, rather than just have the JavaScript in the bookmarklet, so that I can easily push additional functionality out ReferenceIt users without having them delete and re-add the bookmarklet - this means that my users are always using the latest version.
The ReferenceIt JavaScript file is then used, currently, to do a few things. The first is that it gathers information about the page that would be necessary for all web based references. Additionally it then checks if the site is an Amazon site. If it is the bookmarklet then checks to see if there is an ISBN code listed anywhere. If it is the bookmarklet then identifies that you aren't referencing a site, you're referencing a book and acts accordingly.
In addition to the ease of use provided by the bookmarklet both Web and Book referencing have had considerable effort put into automatic generation of references based on partial information input by the user. This works much better with book references than it does with web references. This is because the information required by book references can be, almost entirely, generated using an ISBN code. This provides all but two pieces of information, and should be capable of providing them all.
Unfortunately the web isn't as organised. Web referencing information is based upon the URL of the page. HTML5 is making it easier to identify this information in web sites, but not everyone uses HTML5 currently. This means that it's very much hit and miss when it comes to pulling in data from external web sites. In a worst case situation ReferenceIt can generate everything but the published date and post author. In a best case situation it is now able to generate a complete reference based entirely upon the url of a page. This will (hopefully) become the norm in the future as people start to develop sites using HTML5 instead of xHTML and HTML4.
Design & Development of ReferenceIt
ReferenceIt was designed and developed using a select amount of awesome software, on a Macbook Pro. As my work has covered a broad scope as I have done the vast majority of site development myself, as opposed to using a pre-existing solution such as WordPress or Joomla.
When I initially started development of ReferenceIt it was my intention to learn how to use the Yii Framework. Unfortunately this did not happen, due to the complexity of Frameworks combined with the timeframe I had in order to develop ReferenceIt. I intend to revisit the base code and rework the site so that it makes use of a PHP Framework as it will greatly simplify expansion in the future.
I have also made use of pre-existing code that is freely available online. One of the great things with the design community is that it is very open and sociable. This works well for everybody involved in this area as people will gladly communicate ideas with one another and share awesome resources for the benefit of everyone. As such I have made use of a great deal of resources available online to speed up production times and avoid headaches.
I chose Google Webfonts over other alternatives, such as Typekit, because Google provides a solution that isn't JavaScript dependant. I wanted to provide as consistent a visual style across all browsers, regardless of their support for JavaScript and this is provided by Google Font's @font-face based solution. There are also no limits on how many hits I have before the font stops working. Oh, it's free too.
Whilst there are subtle differences across the various browsers, the site has remained usable in all browsers tested with only visual differences occurring based on the viewports used (on mobiles) and the different browser's support/implementation of CSS3 functionality.
Additionally, the site should function on older versions of these browsers, including Internet Explorer 6, but the capabilities of older browsers will further impact upon the visuals of the site. This will be particularly noticeable with Internet Explorer 6 as I haven't included any functionality to compensate for it's lack of support for alpha transparency of PNG files.
Site Typography
I have done my best to ensure that typography throughout ReferenceIt is as consistent as possible, providing several "font stacks" to ensure that, if one font doesn't work that there will always be a suitable fallback for the user.
To do this I have made use of default system fonts common to desktop computers and mobile devices. I didn't want to limit myself to the fonts made available by the devices that would access the site, and opted to use some fonts from Google's Webfonts Collection. The collection Google has put together contains some very nice fonts and I have made use of some of these to enhance the site for devices that support @font-face fonts which, at this point, seems to be the whole world.
Hosting
ReferenceIt is hosted by the most fantastic BigWetFish
Thank Yous
Whilst a lot of the work I have done has been from scratch, I'm not responsible for all of it. Much love goes to the people responsible for the following pieces of code:
- Markdown
- Markdown Extra
- Google Books API by Olivier Arteau (partially translated for personal ease of use)
- Simple HTML DOM by S.C. Chen (contributions by Yousuke Kumakura, Vadim Voituk, Antcs)
- Browser.php by Chris Schuld (not yet in use on the site, but will be implemented in the near future)
- Modernizr
- jQuery/jQuery UI
- Google Webfonts
In addition to these pieces of code, I wouldn't have created this site without the input of my friends and peers, and I want to make sure that their input has been a valuable part of ReferenceIt's development:
- Tami Olsen
- Tim Potter
- Christopher Murphy & Nicklas Persson
- Simon Fraser
- Dez Shearer
- Kyle Gawley
- Chris Grant
- Alex McRoberts
- Duane Jeffers
- Everyone who has actively tested the site and found bugs throughout the beta phase of the site.
- CSS Tricks for having a fantastic HTML5 site which served as a fantastic site to test my bookmarklet's functionality. More sites need to follow in Mr Coyier's footsteps.