Applications & Web: Air Miles: Local Developer
This is an application I wrote for AIR MILES to manage the development and publication of hundreds of pages in the Inspired Living, My Planet and Rewards sections of airmiles.ca. It greatly enhanced the efficiency of web production by allowing web publishers to develop locally. It's benefits include:
- Allowing web publishers to preview their work instantly, instead of waiting 5 to 30+ minutes for their page(s) or image(s) to be uploaded into a content management system.
- Full emulation of CSS and JavaScript in airmiles.ca so that web publishers could work on just the code which is inserted between the header and footer, and instantly preview the full page.
- Emulation of links so that web publishers could quickly browse through the airmiles site locally, instead of waiting a long time for a page to load on the preproduction server. Navigation tools included a local forward and back button. Empty links were highlighted in red so that web publishers could instantly see which urls still needed to be filled on each page.
- Automatic removal and conversion of dozens of illegal characters to proper HTML code which is recognized by the content management system. This allowed web publishers to simply cut and paste text directly from a Microsoft Word file into their HTML code and all of the punctuation marks, accents, quotes, etc. appeared correctly.
- Automatic English to French conversion of common web elements, so that the user doesn't have to manually look up and convert navigation bars or other items that are repeated throughout the website to French.
- Organization of web pages into different projects, so that web publishers could quickly locate which assets they were working on, or instantly toggle between the French or English version of a page.
My Role: Developer and concept | Languages Used: Javascript
Screenshots
Previewing work with Local Developer was nearly identical to previewing pages on the actual website. The only difference was a horizontal toolbar which appeared at top of the page.
Usage
Options in Preview Mode:
or Emulates navigating backward and forward on the local website.
Opens an individual file to preview.
User can select a project to preview.
User can select from any page within the currently open project to preview.
or Previews the next or previous page in the current project.
Toggles the display of the English or French version of the current page.
Refreshes the page, so any changes that have been made in another text editor (e.g. Dreamweaver) are instantly updated in the browser.
Displays all of the code between the header and footer, along with more functions and tools to edit the page.
Searches for and highlights all empty links in current page.
Hides the tool bar, which is useful for taking screenshots of the current page without the toolbar in view. Tool bar can be restored by clicking at the top of the page.
Options in Edit Mode:
Automatically converts illegal characters to proper HTML code which the content management can display properly, and displays them in the large text box so that the text can be cut and paste to a destination.
Any modifications made to content in the large text box is instantly previewed in the browser.
Updates the code in the large text box to whichever page is currently open.
Converts common web elements such as navigation bars from English to French.
Converts code and links in large text box to HTML code for a full web page which can be open and viewed locally by a browser without Local Developer.
Closes the code window.
