Web Design Under the Sea - Chris Matthews
- 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)