Web Design Under the Sea - Chris Matthews

14
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/ ).

Transcript of Web Design Under the Sea - Chris Matthews

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/).

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

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

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

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.

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.

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.

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.

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.

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.

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

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.

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.

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)