A Web App for Teaching Gardens

This guest blog post was written by Aaron Sotala, an instructional designer for distance education at the University of Florida, College of Agricultural and Life Sciences. He specializes in web design and multimedia production. This post introduces a web app developed by UF/IFAS CALS to help environmental horticulture students learn about plants growing in two teaching gardens at the Indian River Research and Education Center in Ft. Pierce, Florida. The app consists of quick information sheets with photos of many of the gardens’ plants. The photos have have been placed online, and all of them are listed in a pair of indexes via their common and scientific names. A zoomable map of each garden is available to locate where plants can be found within the gardens. In addition, students can go into the gardens and scan QR codes beside the plants to pull up the plant pages. The tool allows them to work from either direction, beginning by researching a plant online and then locating it in the gardens, or starting in the gardens and then locating information about a plant.

The COLT (Center for Online Learning and Technology) office of the University of Florida’s College of Agricultural and Life Sciences recently created a web app, which may be of interest for those working with teaching gardens or other related learning environments. It is a prototype created for our Indian River Research and Education Center teaching gardens, to help environmental horticulture students become familiar with plants used in their profession.

The web app contains a collection of web pages, each one featuring basic information about one of the plants contained within the gardens that students need to learn, as well as photos to help confirm the identity, or show features not currently in season such as flowers or seeds.

Desktop Page View


Smartphone Page View


Previously some of this information had been provided on a standard web site, but there hadn’t been any way to easily bring the experience of being in the garden together with viewing the online information at the same time. In building a web app, we wanted to see if we could give them a web site, which could be accessed within the gardens to aid as both a way-finding device, as well as provide the desired plant information.

Students can find plant information, or locate where a plant is growing through one of three methods when using the tool. First, a pair of plant lists allows them to look up plants by scientific or common names. Second, a pair of zoomable maps allows them to locate where a plant is growing in the gardens, and access information via links in the maps. Third, next to each plant within the garden a QR code will be placed, allowing them to pull up information about a plant by scanning the code using a portable device such as a smart phone.

Plant Lists




QR Code


The tool uses a combination of QR codes, HTML5/CSS3, jQuery, and a mapping software called MAPublisher to create a web app that can be used on both computers and portable devices. It’s web based, which means it can be built and modified at minimal cost compared with dedicated apps, which require specialized and expensive programming for each computing system and device.

Development was made easier by utilizing coding strategies adapted from the book Building iPhone Apps with HTML, CSS, and JavaScript by Jonathan Stark. This was then combined with the MAPublisher software, which is a plug-in for Adobe Illustrator. It allows a zoomable map with embedded hyperlinks to be created with all the code written automatically. Only the ability to draw a map in Illustrator, and basic web coding skills are needed.

All taken together, it allows us to have a template tool which can be expanded or adapted for other uses with relative ease. The existing tool can be updated by anyone with basic knowledge of web coding, and the Adobe Illustrator and MAPublisher software, while the underlying code can be adapted by anyone with intermediate coding skills of HTML5/CSS 3 and a basic understanding of JavaScript.

Presentation Slides

Web App Link


Leave a Reply

Your email address will not be published. Required fields are marked *