TriWest Healthcare Alliance
Project: Modal Media Center
Built nearly pixel-for-pixel from Photoshop comps it uses rapid, efficient initial delivery of content
from server-side code while maintaining elegant client-side interactions. Ongoing styling
and development benefit from highly-flexible HTML/CSS-based UI, utilizing callbacks and event
listeners to communicate with the Flash-based video player.
Additional details:
- .NET: XML transform of library and video list on page/modal load
- jQuery: XML transform after page load, modal/lightbox via Thickbox plugin, click event
and DOM manipulation on UI for video controls (slider is jQuery UI) - Longtail Video, JWPlayer: flash video (FLV) playback, Javascript callbacks
- If the modal fails to instantiate, failover is a standard page with the video player
Project: Medal of Honor - Speak Out!
A third-party agency delivered a website built on Drupal for an initiative, in partnership with Congressional Medal
of Honor recipients, imploring service members to seek help for their behavioral health. The homepage used an
"off-the-shelf" Drupal module for YouTube videos, but immediately prior to launch senior leadership decided they
did not want to utilize YouTube. So, using jQuery, I was able to quickly recreate the behavior of the module,
including the back-end administration, to serve up videos from Brightcove, communicating requests
and events via the Javascript API.
(As of August 9, 2011 the site is still live and using my solution, as confirmed be the source code.)
Project: SharePoint Intranet
My role for the launch phase of this large, complex project was "branding", meaning I translated the Photoshop mockups,
created by my (then) supervisor, into the appropriate HTML, CSS, and images for the Master Pages, Page Layouts, and various Web Parts.
Post-launch, I was the primary resource for all ongoing design and front-end development tasks, working with
communications specialists on daily features and various promotional campaigns for corporate initiatives, which would involve custom
page designs that worked well within the constraints of the site-wide template and would often incoroprate fun and engaging interactive elements,
such as a movable TV remote that contolled a Flash video player through Javascript callbacks, or simply pencils and erasers that could be dragged and dropped.
Due to the confidential nature of the site, there is very little I can show aside from some simple animations,
driven purely by jQuery and promoting participation in an employee survey.
(The screen capture does not present the animation as smooth, though it was in practice. Audio was used in production.)
Experiments
SCTV (video player) - Launch »
A personal code playground.
Details:
- Uses jQuery for DOM manipulation, effects, and events
- LongTail Video JW Player (with JavaScript API communication)
- Content fed by YouTube playlist
- All visual elements are HTML, including video player UI
Browser "dimmer switch" in minutes with jQuery
Simple proof of concept demo
Code: http://pastebin.com/ui4fZbes