1. Adjusting the Focus: Updating a Web Portal Using CSS, JavaScript, and AJAX Stephan Spitzer Lead Developer/DBA, Applied Medical Informatics James A. Zimble Learning Resource Center Uniformed Services University of the Health Sciences Stephan Spitzer Lead Developer/DBA, Applied Medical Informatics James A. Zimble Learning Resource Center Uniformed Services University of the Health Sciences 1MAC-MLA 2010

2. 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 20102

3. Current Portal - ER (circa 2006) MAC-MLA 20103

4. New Portal Design – ER Version 3 MAC-MLA 20104

5. Quick Title Example MAC-MLA 20105

6. Action Pop-Ups MAC-MLA 20106

7. Menu Revealed MAC-MLA 20107

8. Results: 8 Current Configuration ER 3 Configuration