jQuery

'Why Study Languages' is a site which forms part of the Routes into languages initiative. It's aim is to provide fun materials to enhance language learning which teachers can use in the classroom.

The site was intended to remain fairly static once launched, so the Drupal CMS was selected as a base platform due to its familiarity to the content editors and the speed at which the site could be deployed. I translated the photoshop design to an XHTML and CSS Drupal theme, utlising jQuery for various interface enhancements including table-of-contents scrollers, image carousels and a floating social media box. The design specified some custom fonts, which I was able to implement by integrating the TypeKit font library into the site. Client-side integration with the twitter and facebook APIs was also included to help spread the word via online communities.

The site content made extensive use of video and Adobe Flash quiz content. The fancybox jQuery plugin was used to present this content in a popup (with a fallback link to the file for those without javascript). Looking to the future, video was implemented using the HTML5 video element for browsers supporting it, presenting both Theora (OGV) and H.264 (MP4) formats to support all current HTML5 video browser implementations. For older browsers with no HTML5 video support, the script falls back to the flowplayer flash video player using the same H.264 encoded video. Complex javascript and CSS was needed to keep the various popup and video overlay elements from conflicting with each other.

The Learning Object Creator (LOC) tool is a piece of e-learning software to enable educators to create re-usable online content (Learning Objects) to a specific educational template.

Starting off as a VB.NET desktop application, the LOC tool moved to a browser-based online version to make it cross platform and easier to teach during workshops. The tool provided a template for editors to follow and fill in, and then generate standards compliant HTML and CSS which could be published online or saved as a ZIP file. This included integration with the FCKeditor (and later CKeditor) wysiwyg tools. I supervised the development work on this version, coded in ASP.NET. The site consisted of the application itself, and a user community to create and share learning objects via the web.

In 2010, the application platform it was using reached end of life, so it was re-worked into a PHP drupal-based solution. This provided much greater development flexibility to add new features and was more robust and stable than the bespoke version which came before. As part of this work, I greatly improved the stabilisation of the tool by totally rewriting it into an AJAX application linked to drupal, using best practices in 'Object Oriented' javascript.

Other work included designs for the public facing part of the site, and creation of a drupal theme using semantic, standards-based XHTML and CSS. Wireframes were created to check the Information architecture and site navigation with the client

Routes into languages is a UK government funded project to increase the takeup of language learning among schoolchildren via providing increased support for language teachers and educators.

Working closely with the designer, I was responsible for selecting the CMS platform and implementing the technology for the basis of this site. I led a critical analysis of the client and end-user needs, and on this basis, evaluated a number of possible content management solutions. Important factors for this site were:

• The editing process needed to be very easy to use for the content editors, many of whom would not have web experience.
• The project included many partners often in other locations and organisations, and the system would need to support their remote login and access control.
• The site would need identical sections for each of the regional partners, with appropriate access control.
• The site would be a central database of events, resources etc. but registrations and content production would occur on the local level.

As a result of this analysis, the Drupal open source CMS platform was chosen for it's flexibility and ease of use for the project partners, many of whom would not have web experience.

The implementation included a custom drupal theme and extensive custom modules to support the remote registration features. All markup was designed with semantic web standards in mind.

A later update to this site via user testing and feedback brought improved navigation and graphical interest. At this point, I also implemented a jQuery image carousel into the home page.

I worked on this site over a four year period whilst employed at LLAS.

Originally a bespoke .NET CMS, I was initially responsible for the maintenance of this CMS and adding new features which involved extensive use of VB.NET and HTML/CSS. Significant work included rewriting the public facing part of this CMS from scratch to incorporate a page templating system to make the pages to be more consistently themed and easier to update. I also implemented a system for administrative staff to create monthly aggregate e-bulletins from existing material on the site.

In late 2008, the site received a major visual overhaul, and working in concert with the designer, I implemented new standards compliant and semantic XHTML and CSS for the design, incorporating strong use of jQuery for navigation and UI elements. This design incorporated a em based fluid width, which scaled the layout elements with font-size. Accessibility and standards compliance were important goals for this project. As part of this redesign, I also implemented this design as a google blogger theme which was used as an accompanying site.

In the winter of 2009, the ageing .NET CMS was beginning to show it's age and could not keep up with the client's modern requirements for it. I led a project to migrate the entire content and design into the open source content management system. This would enable the client to tap into the extensive array of community features provided for drupal, as well as provide much more flexibility for future feature requests. The migration involved extensive database migration from the old MSSQL database to a new MySQL based one, primarily through a custom drupal module to access the old database. Extensive work was also done to migrate the large taxonomies and metadata from the old system. I also reworked the HTML and CSS into a drupal theme. To ease compatibility and maintainable in the future, standard drupal modules such as views were used to generate most of the pages on the site.

As a drupal CMS, I also added several custom modules for the client, including modules to generate specific search pages per content-type, a new CCK field module with a textarea box and title, and to handle event registration. The drupal system also allowed the creation of more features desired by the client, including event registration, custom landing pages for important project themes, and integration with the University of Southampton online payments system to pay for events and conferences.