1. Web design under the sea: Autonomous underwater vehicles
and the Controlled, Agile, and Novel Observing Network
Christopher Matthews, University of California Santa Cruz
Mentor: Nancy Barr
Summer 2010
Keywords: website; Controlled, Agile, and Novel Observing Network; harmful algal
blooms (HABs); autonomous underwater vehicles (AUVs); artificial intelligence
ABSTRACT
Autonomous underwater vehicles (AUVs) are becoming increasingly important for
oceanographic research. AUVs are far less costly compared to research vessels and can
go places where planes, moorings, ships, and other platforms cannot. They can be
programmed to conduct in situ measurements such as chlorophyll concentrations from
algae and the ocean’s temperature. The Controlled, Agile, and Novel Observing Network
(CANON) is an initiative to develop new ocean-observing systems to gain a better
understanding of the dynamics of phytoplankton ecology. The CANON team aims to
eventually understand the dynamics of phytoplankton communities and their complex
interactions with the environment by using predictive modeling. The World Wide Web
allows for Monterey Bay Aquarium Research Institute (MBARI) to effectively
disseminate information on important research to the public, fellow researchers, policy
makers, and the media. The newly developed website sections for CANON and AUVs
contain background material, figures, graphs, slideshows, and videos to explain the
progress MBARI has made in these two areas of research and technology. In total, I
developed, updated, and created 51 web pages that are now live at the AUV website
(http://www.mbari.org/auv/) and the CANON website (http://www.mbari.org/canon/).

2. INTRODUCTION
CANON is the Controlled, Agile, and Novel Observing Network, an MBARI institutional
initiative that brings together a number of research groups to study the dynamics of the
ocean microbial community. The initial research focus is on complex aspects of
phytoplankton ecology, including how plankton interact with their environment.
Researchers intend to develop a better understanding by creating new ocean observation
systems that can better track, sample, and analyze in situ water masses and oceanic
conditions. Observation systems include a variety of fixed and mobile platforms such as
research vessels, autonomous underwater vehicles, moorings, airplanes, and satellites.
Technological advancements in observation systems will allow researchers to closely
follow the evolution of microbial communities. For instance, researchers could
theoretically predict, monitor, and analyze harmful algal blooms (HABs). Researchers
can also address broader issues, such as how climate change, which causes ocean
acidification and rising ocean temperatures, will affect the interaction of microbial
communities with the environment.
An autonomous underwater vehicle (AUV) is an autonomous mobile platform that can
travel deep in the ocean. AUVs can measure the physical characteristics of the water,
such as salinity and temperature, detect chlorophyll concentrations from microbial
communities, and even measure color dissolved organic matter fluorescence (CDOM),
which could indicate possible oil plumes. AUVs can map the seafloor and collect images
of organisms in the deep sea. AUVs are more cost-effective than research vessels and can
go deeper into the ocean than some other mobile platforms. AUVs are becoming
increasingly vital instruments for oceanographers to explore and sample the ocean.
For my 2010 summer internship project, I developed two sections for the MBARI
external website. My original project was to further develop the existing AUV website,
but since the CANON Initiative strongly correlates with the operation of AUVs, my
mentor and I decided to develop both the CANON and AUV websites simultaneously.
Furthermore, the CANON Initiative did not yet have a public website, so this was an
opportunity for MBARI researchers to disseminate information related to their important

3. research on the dynamics of microbial communities. The existing AUV website did not
contain any information on the-upper-water-column vehicle, imaging AUV, and the long-
range AUV. There was a substantial amount of information on the mapping AUV, which
I updated with current information and figures. I also added information related to
autonomy and artificial intelligence systems that help guide the AUV to sample optimal
targets.
One important aspect of my internship project was compiling clear and comprehensive
scientific information. I needed to present information that could be understood by an
educated public, but also be detailed enough to answer inquiries presented by researchers
and the media. I created and/or adapted many figures, scientific illustrations, slideshows,
and videos to show the incredible technological progress MBARI has made with AUVs
and research developments made by the CANON team.
MATERIALS AND METHODS
SOURCES
The 2009 MBARI Annual Report
(http://www.mbari.org/news/publications/ar/2009ann_rpt.pdf), included information on
all aspects of the CANON Initiative. Previous annual reports
(http://www.mbari.org/news/publications/pubs.html) also contained information on the
operating systems for the AUVs, including the long-range AUV and the imaging AUV.
Members of the CANON team provided material from a CANON workshop held in
April, a report on synoptic AUV mapping, the linkage between harmful algal blooms and
higher animals, and the upcoming CANON 2010 fall experiment. Team members also
provided written and visual materials regarding the decision support system and the
Autonomous Ocean Sampling Network and how they are relevant to the CANON
Initiative. My mentor, Nancy Barr, also provided me with information on the principal
investigators’ individual contributions to the CANON Initiative.
For the AUV website, engineers and technicians provided a poster on the long-range
AUV, papers on AUV operations, and images of the mapping AUV. They also provided

4. new figures and information related to the mapping AUV, vehicle specifications and the
purpose of the imaging AUV, and an image and detailed article on the artificial
intelligence system within the AUV. I was able to gather information about significant
missions that the AUV has participated in from past MBARI news releases and annual
reports.
I was given access to the institute’s image archive, where I found images and videos for
both websites. I had several meetings with those involved with the CANON Initiative as
well as AUVs: John Ryan, regarding the CANON fieldwork; Thomas Hoover, regarding
the long-range AUV; Kanna Rajan, regarding the decision support system (DSS) and T-
REX; David Caress and Jenny Paduan, for the mapping AUV figures, captions, and
information; and MBARI visiting scientist Jnaneshwar Das to try a demonstration of the
DSS interface. I met regularly with my mentor, Nancy Barr, to thoroughly edit, add, and
replace content for both the AUV and CANON web pages. Two cruises on the R/V
Zephyr gave me the opportunity to take hundreds of photos and some video of the AUV
operations, many of which can be found on the AUV website.
WEB DESIGN
Adobe Dreamweaver CS3 is an intuitive and extremely powerful web-design program
that can be used by those with limited or advanced computer coding skills. It allowed me
to quickly create new content and to efficiently organize existing content into
comprehensive web pages. Dreamweaver allowed me to easily insert images, links,
videos, and slideshows that would otherwise take a vast amount of time to write with
HTML.
One issue to keep in mind thing when designing a website is user accessibility. For
instance, the images should have alternate (alt) text, such as “Upper-water-column
vehicle in Monterey Bay” (<img src="image.JPG" alt="Upper-water-column vehicle in
Monterey Bay">). This alternate text does not show up on the webpage, but it does allow
people with visual impairments to hear a brief description of the image. All of the
hyperlinks need to be updated, current, and not broken. Users will leave the site if they
cannot access the information they want. It is important to have clear and easy to use

5. navigation so that users can access easily access information. The websites should be
compatible on multiple web browsers, so that users can fully access all of the sites’
features. Since I was creating a site within the MBARI external site, I was obligated to
follow the MBARI website guidelines, using the same fonts, colors, layout, and template
as the other MBARI web pages. This ensures the MBARI website has a consistent look
and feel.
ADDITIONAL SOFTWARE
I used a software program suite called Adobe Web Premium CS3. This suite contains
multiple programs used for web design including: Dreamweaver, Photoshop, Illustrator,
and Media Encoder. I also used Apple QuickTime 7 Professional, which is a basic video
editing program. I frequently used Adobe Photoshop CS3 to edit, resize, and crop images.
Images were kept at less than 150 kilobytes each to reduce the delay of a webpage’s
loading time. I also briefly used Adobe Illustrator to improve a diagram on the website.
I used Apple QuickTime 7 Professional to combine four videos I shot onboard the
research vessel Zephyr into one compressed video and to insert an MBARI watermark
onto the video. The video was a .mov file, which is the native QuickTime file format. It
was over 100 megabytes (MB), which is far too large to put on a single web page. So I
used Adobe Media Encoder CS3 to convert the QuickTime video to a Flash video. This
greatly compressed the video to approximately 10MB. A program called Soundslides
Plus worked well for compiling slideshows. It allowed me to customize the layout of the
slides, background color, and how the captions would appear. I decided to have a black
background with white captions. It took some time to figure out how to put the
slideshow on the website and to customize the parameters so that all of the functions
worked. Adobe Acrobat Professional allowed me to view, edit, and create Portable
Document Format files (PDFs). I was able to copy text and images from MBARI
publications for the website. I also created several PDFs from what were originally
PowerPoint presentations. In fact, I used Adobe Acrobat Professional to convert this
report from a Microsoft Word document into a PDF.

6. EQUIPMENT
During the Zephyr cruises, I used a Nikon Coolpix 5400 camera and a Sony MiniDV
Camcorder.
RESULTS
WEBSITE OVERVIEW
I produced, created, and edited 20 web pages for the Controlled, Agile, and Novel
Observing Network website (http://www.mbari.org/canon/). I uploaded approximately 50
images for the CANON website, created a slideshow that consists of nine images, and
uploaded two Flash video animations. I included 88 hyperlinks in the CANON website,
(approximately 95 percent link within the MBARI website and five percent link to
outside sources). I also referenced information from six different publications/reports.
Figure 1. The CANON home page. The image illustrates how the CANON team wants to follow the
evolution of the microbial community.

7. Figure 2. The decision support system (DSS) slideshow, which explains how this tool will
augment situational awareness for ocean science field experiments.
Figure 3. A still image from the animation of the Regional Ocean Model System. It displays the effect that
ocean eddies have on the ocean’s temperature from the years 1993-2007.

8. Figure 4. Conceptual model showing how CANON draws environmental information
from diverse sources such as the decision support system.
I produced, created, and edited 31 web pages for the autonomous underwater vehicle
website. I uploaded approximately 92 images for this website, created two slideshows,
uploaded four videos, one of which I shot onboard the research vessel Zephyr
(http://www.mbari.org/auv/LARSvideo.htm). I included 133 hyperlinks in the AUV
website, (approximately 95 percent link to other pages on the MBARI website and five
percent link to outside sources). I also referenced information from 10 different
publications and reports.

9. Figure 5. The AUV home page. The image shows the AUV being lowered into Monterey Bay
from the research vessel Zephyr.
Figure 6. Web page dedicated to the recent mission where MBARI sent an AUV to the Gulf of
Mexico following the catastrophic Deepwater Horizon oil spill.

10. Figure 7. The AUV slideshow includes a series of images showing the Zephyr, various AUV operation
systems, and the launch and recovery system onboard the Zephyr.
Figure 8. Still image of a Flash video showing the AUV being lowered into the water from the research
vessel Zephyr.

11. DISCUSSION
The development of the AUV and CANON websites allows MBARI researchers to show
the technological progress on current projects. This information is enhanced by engaging
multimedia features, including images, videos, animations, and slideshows. In-depth
information is presented about current and past experiments, fieldwork, missions, and
publications. Posters created for science and engineering conferences are presented in
electronic form, offering further details about some aspects of the project. For those who
wish to find more information about CANON and AUVs, there are links to news articles
about MBARI’s latest developments and other background information.
CONTROLLED, AGILE, AND NOVEL OBSERVING NETWORK
Visitors to the CANON website are first directed to the home page, which contains a
graphic illustration of the “biological pump”, as well as a diagram showing CANON’s
collaborative efforts with other organizations, and a description of the CANON Initiative.
A navigation bar on the left side of the website contains links to information on the
MBARI sampling workshop, fieldwork, process studies, the Environmental Sample
Processor, AUVs, data and information management, societal relevance, Autonomous
Ocean Sampling Network (AOSN), contact information, and related links and
publications. Visitors can access information regarding a workshop hosted by MBARI
that reviews the need for various types of autonomous water sampling systems in marine
science. Five case studies presented at the workshop, each on a different sampling
system, are discussed. Fieldwork contains information on the upcoming 2010 fall
experiment, which aims to gain knowledge of the dynamics of microbial populations in
the coastal environment.
AUTONOMOUS UNDERWATER VEHICLES
Visitors to the AUV website are first directed to the home page, which contains an
introduction to AUVs, including their purpose and roles, and an explanation of the
Dorado-class AUV. The navigation bar on the left side of the website contains links to
pages on the upper-water-column vehicle, mapping vehicle, imaging AUV, long-range
AUV, autonomy/artificial intelligence, docking system, R/V Zephyr, day of operations,
missions, news, a slideshow and videos, contact information, and related links. Visitors
will be able to learn about past AUV missions with the different vehicles in different

12. parts of the world. An article detailing the day-to-day operations of the AUV, which
involves mission planning and deploying the AUV from the research vessel Zephyr, helps
the visitor get a feel for the typical AUV deployment.
CONCLUSIONS/RECOMMENDATIONS
The CANON team now has its own external website to share information with peers,
policy makers, the general public, and the media. Those working on AUVs can now show
just how far MBARI’s technology and innovation has progressed over the last few years,
particularly with regards to efficiency and artificial intelligence. There is also a need to
ensure that the websites are continually updated so the material reflects the latest
accomplishments.
For the CANON site, one idea would be to incorporate a live Google Earth DSS display
that would allow visitors to see the real-time positioning of the Zephyr, AUVs, and
various mobile and fixed platforms in Monterey Bay. This DSS display could be viewed
not only from a computer, but from a phone or another small handheld mobile device.
Other scientists could use this display as a tool for collaboration with MBARI scientists
to learn more about the dynamics of phytoplankton ecology. The slideshow program that
I used, Soundslides Plus, has an audio track capability. It would be nice to interview one
of the principal investigators of CANON, incorporate some images, and publish an audio
slideshow introducing this initiative effort. Another recommendation would be to further
develop the data and information management page, by creating an animation/video that
shows how environmental information from diverse sources is used to learn more about
the dynamics of the microbial community.
One idea for the AUV site would be to create an animation showing how the Teleo-
Reactive Executive system works. The T-REX system is quite complex; additional
diagrams, illustrations, and animations would help explain the concept. The AUV
mission page should be continually updated to incorporate future missions. This task will
be increasingly important as AUVs play a more prominent role in the field of
oceanography. The contact information for both websites should be updated at least
annually.

13. ACKNOWLEDGEMENTS
I would like to give special thanks to my mentor, Nancy Barr, who invited me to work on
the web design project for the MBARI internship. She had very high standards and
expectations for the web pages and met with me weekly to ensure that I was on track to
complete my project over the 10-week period. She helped set up Dreamweaver on my
computer and taught me how to teach other interns to develop their own personal web
pages. She assisted me with HTML, page design/layout, correctly wrapping text around
images, cascading style sheets (CSS), thoroughly editing all the web pages, and helped
arrange two research vessel cruises for me.
I would also like to thank Linda Kuhnz, who personally assisted me with using the Video
Lab and the computer lab. She also helped all the interns with logistics and coordinated
intern involvement in events such as the MBARI Open House. She also edited my entry
for the 2010 MBARI summer intern blog. (http://mbari2010interns.wordpress.com/).
Special thanks goes out to Todd Walsh, who assisted me in learning the basics of a
simple but powerful Google software photo management program called Picasa; to Susan
von Thun, who significantly compressed videos into flash videos that could be uploaded
to the website; and Lonny Lundsten, who taught me how to edit videos using QuickTime
and convert them into flash videos that could be uploaded onto the website.
I would like to thank my co-worker Kim Fulton-Bennett, who helped me access some
important images and provided great feedback on both the CANON and AUV websites.
For the CANON website, I would like to thank the following people for their support and
time: Francisco Chavez, John Ryan, James Bellingham, Kanna Rajan, Jnaneshwar Das,
and others involved in the CANON Initiative. Francisco Chavez met with me to discuss
changes and John Ryan was very helpful with providing images, publications, and
significant feedback for the fieldwork section. Kanna Rajan gave me important
information on the decision support system and the Teleo-Reactive Executive (T-REX)
system.

14. For the AUV website, I would like to thank Brett Hobson, who invited me on an imaging
AUV cruise onboard the research vessel Zephyr, provided images, and talked to me in
detail about the specifications of the AUV. Jenny Paduan, David Clague, and David
Caress all helped me to update the mapping vehicle section. I met with Thomas Hoover
who contributed information with regards to the long-range autonomous underwater
vehicle. I would like to give a special mention to those on the Zephyr, including Duane
Thompson, Hans Thomas, Aaron Gregg, and Greg Maudlin. Duane Thompson helped me
put together a page detailing the mission planning and day operations of the AUV.
Special thanks to fellow interns Rebecca Hunter and Hana Hashim who started the
MBARI 2010 summer internship blog and to Roman Marin, who helped the interns settle
in and move out of their apartments to their new ones after week seven. Hana also
coordinated the design and production of the 2010 MBARI T-shirts. Infinite thanks to our
fantastic internship coordinator, George Matsumoto, who helped me to get this
internship, coordinated and set up all of these wonderful internship events including a
behind-the-scenes tour of Monterey Bay Aquarium, and helped with transportation,
housing, and presentations. Finally, thanks to the David and Lucile Packard Foundation
and to Monterey Bay Aquarium Research Institute for hosting this fantastic summer
internship program.
References:
AUV website (http://www.mbari.org/auv/)
AUV Contact Page (http://www.mbari.org/auv/contact.htm)
AUV Related Links (http://www.mbari.org/auv/relatedlinks.htm)
CANON website (http://www.mbari.org/canon/)
CANON Team Page (http://www.mbari.org/canon/contacts.htm)
CANON Related Links (http://www.mbari.org/canon/relatedlinks.htm)
MBARI Annual Reports (http://www.mbari.org/news/publications/pubs.html)
MBARI Peer-reviewed publications (http://www.mbari.org/news/publications/pr-
pubs.html)