By “web apps” (web applications) I am referring to software products that exhibit interactive features typically associated with native apps, while employing software files stored on a server and executed by a browser. Web Apps consist of elements defined by HTML code, having positions and appearances specified by style sheet code (CSS) and behavior determined by JavaScript code. The different code files are downloaded by the browser and assembled to produce web pages.

Thus, one’s ability to develop web apps requires a capability of producing meaningful HTML, CSS and JavaScript documents. Web development can be facilitated by exploiting various commercial or open source framework packages that are helpful following a learning curve.

Browsers (e.g., Chrome, Firefox, Safari, Edge, etc.) are remarkable software creations. In the background, browsers create a document object model (DOM) for each web page that they display. Manipulation of the DOM by JavaScript code is immediately reflected by changes in page display. Page appearance is defined by CSS code, which can be modified also by JavaScript to dynamically alter the displayed page.

Over the years I have developed a number of courseware web apps, exploiting various frameworks and DOM manipulations which have evolved over time. The following is a selected list of web apps including discussions of the development tools that I used:

 

ANS home page imageAutonomic Nervous System 2010 [http://vanat.cvm.umn.edu/ans/]. The gross anatomy and physiology/pharmacology of peripheral nerves that innervate viscera (cardiac & smooth muscle) are explained and illustrated. Sympathetic and parasympathetic efferent pathways to body regions are presented as tutorials and animated quizzes.

This web app uses Adobe FLASH to create and play animations of nerve impulses traversing schematic drawings and pop-up quiz answers. An Adobe Flash Builder application is used is used to produce the FLASH content and browsers must download a FLASH Player plug-in to play the content. FLASH content was widely popular before the advent of Apple’s iOS Phones and Tablets, which do not play FLASH content (Puffin iOS browsers do play FLASH).

 
App page.Canine Brain MRI Atlas 2018 [http://vanat.cvm.umn.edu/mriBrainAtlas/]. To facilitate MRI brain structure identification, this web app presents T1, T2 or Proton-weighted MRI images juxtaposed with corresponding stained brain tissue images. Labels can be toggled on/off.

This web app was originally developed in 2009 using Adobe FLASH. Because of the current limitations of FLASH plug-in usage, the app was redesigned in 2018, replacing FLASH movies with content placement and appearance defined by CSS and event driven behavior determine by JavaScript.

 

App Home PageEmbryology Highlights (Screencasts) 2011 [http://vanat.cvm.umn.edu/embryoHL/]. Veterinary developmental anatomy is presented through a series of narrated video presentations (screencasts), which together constitute an online introductory embryology course.

The screencasts were produced by assembling our lecture note PDFs and using Camtasia software to capture screen images, including mouse pointer movements, while narrating prepared scripts. Camtasia was used to edit the resultant video and generate .mp4 video clips of the embryology courseware. 

 

 

 

App page

 

Canine Head Transection. MRI & CT Images Side Show 2016 [http://vanat.cvm.umn.edu/headShow/]. Synchronized MRI & CT images of a canine head can be traversed manually via mouse or keyboard or advanced automatically at a prescribed rate. MRI images can be toggled on/off by the user.

This web app exploits CSS & JavaScript manipulation of the DOM. CSS aligns overlapping CT & MRI background images that are each 38 screen displays wide. In response to navigation events, both screens are shifted simultaneously but one is hidden via CSS modifications triggered by JavaScript in response to user mouse/keyboard interaction.

 

 

 

 

 

App page.Canine Brain Sections Tutor 2016 [http://vanat.cvm.umn.edu/brainTutor/]. Each of twelve brain images is overlaid with black dots and randomly ordered black terms. Clicking/tapping either a dot or a term identifies the corresponding pair with a distinct color, confirming the term-structure relationship for the student.

This web app exploits the “canvas” element of the DOM. Via JavaScript the dots and terms are drawn on a canvas element that overlays a brain background image. In response to a click/tap event, JavaScript repaints the corresponding dot & term in a distinct color.