Adjusting the Focus:Updating a Web Portal Using CSS, JavaScript, and AJAX

Stephan SpitzerLead Developer/DBA, Applied Medical InformaticsJames A. Zimble Learning Resource CenterUniformed Services University of the Health Sciences

1MAC-MLA 2010

P I M P M Y P O RTA L

P I M P M Y P O RTA L

P I M P M Y P O RTA L

Project Description Goals

◦ Cleaner Design◦ More Uniform User Experience◦ Tighten Code◦ Faster Access◦ Try Cool Stuff

Methods◦ Adopt from Professional Web Sites◦ CSS – Cascading Style Sheets◦ Test with Multiple Browsers/Platforms◦ JavaScript◦ Minimize Server Access:

Delay Delivering Data Until Requested AJAX – Asynchronous JavaScript and XML

◦ Firefox with Web Developer + Firebug + YSlow

MAC-MLA 2010 2

Current Portal - ER (circa 2006)

MAC-MLA 2010 3

New Portal Design – ER Version 3

MAC-MLA 2010 4

Quick Title Example

MAC-MLA 2010 5

Action Pop-Ups

MAC-MLA 2010 6

Menu Revealed

MAC-MLA 2010 7

Results:

MAC-MLA 2010 8

Current Configuration

ER 3 Configuration