Instructional Design and Development

Below you will find highlights of my instructional design and development experience.

  • Generic placeholder image
    My Current Work in HPC EOT
    I work at the San Diego Supercomputer center and have been part of the HPC EOT community for more than 15 years.

Current Work in HPC EOT

UCSD - San Diego Supercomputer Center

WIFIRE CI Data Visualization and Public Education


WIFIRE Data Visualization

The WIFIRE CI integrates networked observations, e.g., heterogeneous satellite data and real-time remote sensor data, with computational techniques in signal processing, visualization, modeling and data assimilation to provide a scalable, technological, and educational solution to monitor weather patterns to predict a wildfire's Rate of Spread. My responsibilities include building both the public (Drupal) and private (Bootstrap, PHP, JavaScript) sites, weather data visualization using a combination of 2D (HTML5/CSS3/JavaScript/Canvas) and 3D (ANTz) visualization tools, as well as an education outreach site to help education the public about the WIFIRE project.  

SDSC Education, Outreach, and Training

I have twelve years of experience supporting education, outreach, and training for high-performance computing communities first for NPACI, then for the TeraGrid including two years supporting the TeraGrid Campus Champions program, with the last eight years at the San Diego Supercomputer Center on the UCSD campus. I currently work in the Education Division of SDSC’s Cyberinfrastructure Research, Education, and Development program (CIRED). My responsibilities and goals have focused on supporting CI communities at all levels of knowledge and experience. I am or have been responsible for the installation, maintenance, administration, and content for several education-related web sites and portals as described below. These sites are built with different content management systems including Cascade, Liferay, Drupal, Moodle, Wordpress, and Joomla. The choice of CMS has been based on the needs of the communities they serve.


Main SDSC Education Site


Description: The main SDSC Education site is developed with the Cascade content management system as well as pure XHTML/CSS. This site is not account-based. It is intended to provide general information about the SDSC Education program, with links to account-based sites such as the TeacherTECH, StudentTECH, and Discover Data education portals.

Cascade and XHTML/CSS


SDSC TeacherTECH Site




Description: One of the most important sites I support is the SDSC TeacherTECH site, which I recently redesigned using the Drupal content management system.


SDSC TeacherTECH Community Instructional Portal


Description: For the SDSC TeacherTECH program I also support the TeacherTECH Community Instructional Portal, I chose to implement the Moodle open-source learning management system so we can provide local K-16 educators with their own online courses when they have no other options for online instruction through their own school or district.


The SDSC StudentTECH Education Portal



Description: The SDSC StudentTECH Portal is a web resource for K-12 and undergraduate students to learn more about opportunities available to them as they pursue their interests in STEM and HASS. The SDSC StudentTECH Education Portal is built with the Joomla CMS. Much of the content of the StudentTECH portal has been developed by REHS interns under my supervision.

CE21 ComPASS (Computing Principles for All Students’ Success) and CS-CAVE (Creating a Village of CS Educators)





Description: The CE21 ComPASS and CS-CAVE programs are funded by the National Science Foundation with a mission to train K-12 teachers in a new computer science principles curriculum with an emphasis on an AP exam option to be available in 2015. My responsibilities include the installation, administration, and maintenance of three separate ComPASS-related sites including a Wordpress blog, a Moodle server, Bootstrap, and a Piazza discussion site.




The SDSC Discover Data Education Portal



Description: The SDSC Discover Data Education Portal was developed to provide a way for K-12 teachers and undergraduate professors to incorporate scientific data into their curricula. The goal is to select data from existing online freely available scientific data archives, some of which may be a challenge for students to use without assistance, and build a series of lessons around them designed to guide K-12 and undergraduate students through beginning, intermediate, and advanced scientific tools.

I installed, administered, maintained, and developed the curriculum for the portal. It uses the Moodle CMS and contains a series of lessons using a wide range of education technology tools (see below), including Adobe Flash, Director, Shockwave 3D, PHP, Excel, in addition to CSS/HTML.

Title: The SDSC Discover Data Education Portal – Selected Example

Macrozooplankton Data Visualization

Description: Lessons on macrozooplankton data include interactive 2-D and 3-D tools developed using PHP, Adobe Director, and the Lingo programming language (a precursor to ActionScript).


Star Structure and Function

Description: Lessons on Star Birth included interactive tools developed using Adobe Director and the Lingo programming language.


Title: The SDSC Discover Data Education Portal – Selected Example

Environmental Science Data Sharing and Analysis Tool

Description: The Data Sharing and Analysis tool allowed high school teachers and their students to upload and share environmental quality data using an embedded Yahoo map. Data included water temperature and pH, air temperature, soil content, and more. Users could upload images of the location where data was collected and graph and download their data. The tool was developed with PHP, Adobe Flash, the Flash/Yahoo Maps API (deprecated, no longer supported), PHP, a MySQL database. Because the Yahoo Maps API is no longer supported, this tool is no longer functional and has been removed from the portal. I am able to demonstrate the ActionScript 2.0 code behind the scenes.

Title: Data Exporter for Scientific Visualization

Description: This is a tool developed for a government contract using Adobe Flash, ActionScript 3.0, and exported as an AIR application. The tool incorporates a range of Flash components including menus, lists, sliders, and color palettes. It also includes a Hex-to-RGB conversion algorithm I wrote with AS3. Examples of visualizations with the Antz Visualization Tool (see may be seen below the tool’s interface. Demonstrations available on request.

Interactive Instructional Design and Development

Title: Tijuana River Watershed Image Atlas


Description: This project was developed in 2002 (before Google Maps) in collaboration with the SDSU Institute for Regional Studies of the Californias. It uses an interactive map and  geo-referenced images to educate users on the many different issues impacting the Tijuana River watershed.

It was developed using Macromedia Flash (before being bought by Adobe) and PHP. Image data is stored in a flat-file database.

Browse Thumbnails

Search Images

Bilingual Support

Browse Map

Title: Making Weighty Decisions

Interactive CDROM for SDSU Math Teacher Education Program


Description: This program was developed in 1998 in collaboration with Dr. Janet Bowers from SDSU, Helen Doerr and Joanna Masingila from Syracuse University, and Kay McClain from Vanderbilt University. The development tools include Adobe (at the time Macromedia) Director, QuickTime, Photoshop. The tool included:

·        a searchable transcript synchronized with the video,

·        a bookmarking feature which allowed users to save and share bookmarks

·        a notebook for compiling useful notes on various aspects of the videos

·        an ‘Issues Matrix’ allowing interactive exploration of specific exemplary events in the video

The over-arching goal of this project was to better understand how multimedia case studies can be used to support the development of effective practice among pre-service mathematics teachers. As pre-service teachers enter into the professional practice of teaching, they are developing their own models of pedagogical reasoning, grounded in part in their growing base of experience as practitioners. The case-based reasoning used by experienced teachers is a combination of decision-making in action and an integrated base of pedagogical content knowledge built through practice. We are investigating how multimedia case studies of classroom teaching can support the development of case-based reasoning among pre-service teachers. Demonstrations are available on request.

Title: Interactive Cardiac Ischemia Animation


Description: This interactive animation was developed back in 1998 in collaboration with Dr. Roger Sabbadini from the SDSU Biology Department. It was intended as a demonstration to investors of a new method for early detection of cardiac ischemia. It was developed with Adobe Flash and Actionscript 2.0. It is no longer being used but is still available for demonstration only.

Title: Heart Sounds


Description: This tool was developed back in 1993 in collaboration with Dr. Leonard Werner of Loma Linda University’s School of Medicine. It was intended to help teach cardiac auscultation to second-year medical students. It was developed with Macromedia Director and is included on the CDROM of the standard internal medicine textbook. Since the development of this initial version, there have been two subsequent updates.

Title: Interactive Mitosis Animation


Description: This interactive mitosis animation was developed back in 1997 in collaboration with Dr. Kathleen Fisher of the SDSU Biology Department. It was intended to help first-year biology students learn the basic processes involved in cell-division. It uses both visual and auditory stimuli to reinforce learning. It was developed with Macromedia Director.

Title: The Carlsbad Watershed: Interactive 3D Kiosk


Description: This is a prototype of a tool designed for an interactive learning kiosk to be located at the learning center of the Agua Hedionda Lagoon Foundation. The tool was never officially funded so the prototype was never completed. It was developed with Adobe Director and Shockwave 3D. The interface components including buttons, panels, etc. were created and rendered as 3D objects in Bryce and exported to Director. Title text and satellite imagery were preprocessed in Photoshop. Navigation features included flying, walking, and lookaround. It also included the ability for users to add and remove plant objects from the world, to play videos and slide shows in the world, and to record and playback paths through the world.

Community Portals for Education, Outreach, and Training


The Campus Champions Community Portal



Description: The Campus Champions Community Portal was developed using the Liferay* content management system within the larger TeraGrid portal. This site was designed to support the needs of the Campus Champions community and their Director, Kay Hunt. We implemented communications tools for the Champions to share experiences, best practices, tips, and resources to help them represent the TeraGrid community on their own campuses. The site included several important community-building resources such as discussion forums, wikis, document archives, training material, and a calendar specifically for CC events.  

*Liferay continues to be the CMS being used by XSEDE.


The MSI-CIEC Community Portal




Description: The Minority-Serving-Institution Cyberinfrastructure Empowerment Coalition (MSI-CIEC) Community Portal was developed using the Joomla content management system. The MSI-CIEC portal serves a large community of Hispanic, African-American, and Native Americans seeking to empower students, educators, and researcher with CI tools and resources.

iDASH Online Patient Informed Consent


Description: This project is funded by the NIH and is currently under development. The iDASH Online Patient Informed Consent Portal allows patients to consent to having their medical data made available for research. No such form currently exists exclusively for research. The iDASH project has a larger goal of establishing a data repository for clinical research.

The online form uses Drupal for the framework with custom PHP code embedded in Drupal nodes. The patient’s electronic signature is captured using an HTML5 canvas and the data is base-64 encoded and transferred via JavaScript to PHP and stored in a MySQL database as well as converted into a PNG image and saved on the server. The electronic signature is then embedded into a PDF using the TCPDF library. A digital signature is also embedded into the PDF document; it is signed by the researcher, encrypted and saved to the server for future reference.



Electronically and digitally-signed PDF document for patient informed consent.

Edworlds Instructional Design Services

If you like what you see and are interesting in learning more, please ...


Edworlds Instructional Design Services is a one-person company offering creative design and development for any online instructional requirements.