WebsitesAviya Technologies
Aviya Technologies (now Aviya Aerospace Systems) is an engineering company that provides testing frameworks for control systems. As such they do a bit of in-house software and hardware development. I had the privilege working at Aviya for a coop term during the summer of 2010. While my primary role was assisting the development of a test panel's control application, I also became attached to the web development team.
Short History
My interest in improving Aviya websites preceded the job interview. Although I was applied for an application development position, I realized it was feasible for me to work on the website simultaneously. In the time between the job interview and the first day of work, I created a proof-of-concept for a redesign based on Primary Access Node version 5. The original concept removed all the Flash and tabs; these later returned. The basic layout of the old design as retained, and this proved acceptable later.
I volunteered to join the web development team which, aside from the supervisor, consisted of only another coop student, Chelsea Marr. Ms. Marr had no previous programming experience. She subsequently did a good job creating a web-based PHP application to manage the news archive, including setting up the attendant MySQL tables; my contribution to that effort was minimal.
Not much was done until the end of June. This proved fortunate. Around that time I learned XSL transformations (XSLT), which was immediately applicable for markup generation. PAN version 5 used a custom-format data file interpreted by a PHP parser; the PHP parser was awkward to maintain and extend. PAN version 5 swapped out the parser with XSLT to create version 6. Development of the Aviya websites picked up once version 6 was available.
Most design and implementation work was delegated to me. Ms. Marr interfaced with management and provided a second opinion on UI design. In addition she did all the Flash work, including salvaging and altering the existing Flash navigation wheels; this was handily done even though, as PHP, she had never before programmed Flash applications.
The final result was well received by Mr. John Koumoundouros, the company's president; Ms. Marr and myself were personally commended by Mr. Koumoundouros.
What Did I Do?
Back End
Originally the main and career websites each used a different implementation to achieve a similar layout and functionality. The careers site was, on the outside, a Flash application to allow for background movies. The main site had a more conventional implementation since it did not include the background movies.
Although the original goal was to upgrade just the careers website, it quickly became apparent upgrading both sites was feasible using a back end based on the one used by the Primary Access Node. In the end both sites used identical back ends, and achieved identical layouts and functionality. Technically only the careers site has all of the features exhibited.
Layout
The previous design for the main site used pseudo-tabs with each "tab" opening a new web page. Thus, each web page was actually a group of pages. In addition, the dimensions of page elements was static.
The careers page was somewhat more dynamic since it was one large Flash application, however each page remained split across multiple HTML files.
Using the new back end, each page had a single XML data file from which its markup was generated. This instantly did away with needing multiple HTML files for each page. Furthermore, tabs truly became tabs using first the jQuery tabs plugin, and then later using the jQuery-based jVertTabs plugin. JvertTabs allowed for vertically aligned tabs which mitigated many of the issues arising from long tab labels, and from adding additional tabs.
A problem with the careers site was there was no way to open a specific tab by altering the address bar URI. This made it difficult to give links to specific parts of the site. jVertTabs provided no such functionality either. Additional JavaScript and extending jVertTabs achieved this.
Language
Aviya's sites are available in both French and English. The previous design produced four separate sites: an English main site, a French main site, an English careers site, and an French careers site.
The new design discarded the duplication. The back end was extended so each page could draw from one of multiple data files, with one data file per language. A query string field set the language, and the setting was stored in a cookie for use when no query string field was provided.
Backgrounds
One of the key challenges was retaining the capabilities of the old Flash application used for the careers site. On the careers site, each page had a Flash movie background. Normally, the movie was paused and appeared as a static background image. However, when the mouse moved over the navigation wheel, the wheel would expand to fill the entire page, and the movie would play and hide the content.
It was not immediately obvious to me how the automatic playing and pausing could be done, so I scrapped that part. A page would have either a video background, which would play once, or a static image background. Backgrounds were set in one XML data file per site, not per page data file; some page data files were shared between the sites and the same content could have a different background on a different site. Each page had one or two entries in the backgrounds data file, one for video and one for static image. Firefox 3.6 was unable to handle background movies gracefully, and user agent sniffing was used to ensure only static images were served to Firefox.
Documentation
Having had such an invasive hand in the design and implementation, writing the developer and user documentation was naturally my responsibility. The developer documentation included detailed descriptions of the XML file formats, and diagrams showing the markup generator's work flow.
Screenshots
