-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathecology.html
349 lines (340 loc) · 14.7 KB
/
ecology.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Site Metadata + Description -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description"
content="As part of UCLA'S Institute of the Environment and Sustainability, we are researching how certain marine restoration projects, involving kelp forests and seagrass beds, can provide various benefits for both the planet and its inhabitants. Our practicum goal is to establish a scientific communications portal for students and researchers to utilize in future restoration efforts.">
<!-- Title -->
<title>Ecology | Stronger Shorelines</title>
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Overpass&display=swap" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/style.css" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<div class="container px-0">
<nav class="navbar navbar-expand-lg">
<!-- Logo -->
<a class="navbar-brand" href="index.html">
<img src="img/ioes-alt-caption.svg" class="img-fluid" id="logo" alt="UCLA IoES" />
</a>
<!-- Navigation Toggle -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navigation Links -->
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link active" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="tools.html">Tools</a>
</li>
<li class="nav-item">
<a class="nav-link" href="resources.html">Resources</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Explore
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="ecology.html">Ecology</a>
<a class="dropdown-item" href="methods.html">Methods</a>
<a class="dropdown-item" href="library.html">Library</a>
<a class="dropdown-item" href="team-2019-20.html">2019-2020 Team</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
<!-- Seagrass -->
<section>
<div class="container pb-1">
<div class="row">
<div class="col-xs-12 col-md-12 text-center">
<h1>Ecology</h1>
</div>
</div>
</div>
<div class="container-fluid py-5" id="ecograss">
<div class="row p-3 align-items-center">
<div class="col-xs-12 col-md-12 col-lg-6 pt-3 mb-3 bg-white bordered">
<h3 class="question">What are seagrasses?</h3>
<p>
Seagrasses are a group of underwater plant species
that resemble their terrestrial counterparts.
Seagrasses can be found all over the world, but are
generally limited to coastal waters since they are
restricted by depth due to an important need for
sunlight. Despite this, seagrasses are unrivaled in
terms of productivity, creating some of the most
unique and important ecosystems around the world.
</p>
<h3 class="question">Why are seagrasses important?</h3>
<p>
Seagrasses are known as “ecosystem engineers” due to
their impact on shaping and modifying their local
environments. One major service that seagrasses
provide to their environment is blue carbon
sequestration. Much in the same way trees remove
carbon dioxide from the atmosphere, the blue carbon
sequestration performed by seagrasses removes carbon
dioxide from the ocean, mitigating ocean
acidification. Dissolved carbon dioxide causes
increased ocean acidity, which harms aquatic life.
The blue carbon sequestered from coastal and marine
ecosystems into seagrasses effectively converts
harmful dissolved carbon dioxide into useful
vegetative biomass.
</p>
</div>
<div class="col-xs-12 col-md-12 col-lg-6 text-center">
<a href="#" data-target="#ecograss-img-1" data-toggle="modal" role="button">
<img src="img/ecology/distribution-web.jpg" class="img-fluid bordered zoom-in" alt="Seagrass Global Distribution" />
</a>
<!-- Modal -->
<div class="modal fade" id="ecograss-img-1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class='modal-header'>
<div class='modal-title'>Seagrass Global
Distribution</div><button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>×</span></button>
</div>
<div class="modal-body">
<img src="img/ecology/distribution-web.jpg" class="img-fluid" alt="Seagrass Global Distribution" />
<p class="pt-3">
Seagrass species distribution across
the world, as reported by the <a href="https://www.sciencedirect.com/science/article/pii/S002209810700305X" target="_blank">Journal of
Experimental Marine Biology and
Ecology</a>
</p>
</div>
</div>
</div>
</div>
<div class="caption pt-1">
<p>
Seagrass species distribution across the world,
as reported by the <a href="https://www.sciencedirect.com/science/article/pii/S002209810700305X" target="_blank">Journal of Experimental
Marine Biology and Ecology</a>
</p>
</div>
</div>
</div>
<div class="row pb-3 px-3">
<div class="col-xs-12 col-md-10 mx-auto pt-3 bg-white bordered">
<p>
Seagrasses play a critical role in maintaining the
health of local marine ecosystems. Due to carbon
sequestration, seagrass is a nutritious food source
for animals such as sea turtles, manatees, dugongs,
and migratory birds, thus influencing larger marine
ecosystems around the world. Moreover, seagrass
meadows serve as shelter for smaller marine animals
such as shrimp, crabs, and fish larvae. Countless
species rely on seagrasses, and many would find
their survival in jeopardy if seagrasses were
removed.
</p>
</div>
</div>
<div class="row p-3">
<div class="col-xs-12 col-md-12 col-lg-6 pt-3 mb-3 bg-white bordered">
<h3 class="question">What threatens seagrass health?
</h3>
<p>
Seagrasses are vulnerable to mass destruction and
eradication. Human activity contributes to climate
change, coastal development, and decreasing water
quality, which threaten both seagrass populations
and the species that rely on these marine
ecosystems. Eutrophication is one of the most
critical threats to seagrass. Eutrophication is the
excessive growth of algae in bodies of water due to
an influx of nutrients. Algal growth deoxygenates
the local environment (effectively suffocating the
local wildlife) and blocks sunlight to
photosynthetic plants. The loss of this keystone
species will damage all tiers of the ecosystem and also impact the organisms that rely on
its services. Additionally, the elimination of
seagrasses would have a significant economic impact,
valued at a loss of US $19,002 per hectare per
year.<sup><a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC3790674/" target="_blank">1</a></sup></p>
</p>
</div>
<div class="col-xs-12 col-md-12 col-lg-6 text-center">
<a href="#" data-target="#ecograss-img-2" data-toggle="modal" role="button">
<img src="img/ecology/threats-web.jpg" class="img-fluid bordered zoom-in" alt="Threats to Seagrass" />
</a>
<!-- Modal -->
<div class="modal fade" id="ecograss-img-2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class='modal-header'>
<div class='modal-title'>Threats to
Seagrass</div><button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>×</span></button>
</div>
<div class="modal-body">
<img src="img/ecology/threats-web.jpg" class="img-fluid" alt="Threats to Seagrass" />
<p class="pt-3">
Various threats to seagrass
ecosystems and the resulting
consequences of habitat destruction,
sourced from <a href="https://science.sciencemag.org/content/361/6401/446/tab-figures-data" target="_blank">ScienceMag</a>
</p>
</div>
</div>
</div>
</div>
<div class="caption pt-1">
<p>
Various threats to seagrass ecosystems and the
resulting consequences of habitat destruction,
sourced from <a href="https://science.sciencemag.org/content/361/6401/446/tab-figures-data" target="_blank">ScienceMag</a>
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Kelp -->
<section>
<div class="container-fluid py-5" id="kelp">
<div class="row p-3">
<div class="col-xs-12 col-md-12 col-lg-9 pt-3 bg-white bordered">
<h3 class="question">What are kelp forests?</h3>
<p>
Kelp are giant brown algae that live in shallow
waters close to the shoreline and thrive in cold,
nutrient-rich, clear waters that tend not to overlap
with other marine vegetation systems. While they
perform photosynthesis, kelp are not plants, as they
lack roots, stems, and leaves, they are instead part
of the algae family.
</p>
</div>
</div>
<div class="row p-3">
<div class="col-xs-12 col-md-12 col-lg-9 pt-3 bg-white bordered">
<h3 class="question">Why are kelp forests important?
</h3>
<p>
Kelp forests provide homes for fish, invertebrates,
and marine mammals in the same way forests do for
terrestrial species. Because kelp has such a rapid
growth rate (up to 18 inches per day), they create
dense canopies that enable some marine species to
use kelp forests to spawn offspring as a juvenile
nursery habitat.
</p>
<p>
A significant benefit of kelp is greenhouse gas
regulation. Kelp forests sequester carbon dioxide
and release oxygen, mitigating ocean acidification.
In addition to environmental benefits, kelp are also
used in many beauty products and supplements due to
both its rich nutritional value and its
anti-inflammatory and antioxidant properties.
</p>
</div>
</div>
<div class="row p-3">
<div class="col-xs-12 col-md-12 col-lg-8 pt-3 bg-white bordered">
<h3 class="question">What threatens kelp forests?</h3>
<p>
Kelp are severely threatened by climate change.
Longer, hotter summers and shorter winters mean
fewer available nutrients for kelp. Various human
activities such as coastal development,
sedimentation, overfishing, commercial harvesting,
and pollution also contribute to loss of kelp
populations. The degradation of water quality from
sewage, industrial disposal, and coastal runoff
further threaten kelp forests as this reduces growth
rates and reproductive success.
</p>
<p class="py-3">
<a href="https://www.youtube.com/watch?v=I8IRXMnnkGo&t=817s" target="_blank">Click here</a> to listen to Max
Calloway, from the Washington Department of Natural
Resources, express significant human impacts on kelp
forest habitats.
</p>
<p>
Other climate change-driven phenomena also threaten
kelp, such as high energy storms that can uproot
plants and destroy entire habitats. El Niño Southern
Oscillation events are examples of this kind of
storm, which contribute to high ocean temperatures
and strong wave energy, damaging many kelp forests
in California.
</p>
<p>
Due to kelp’s critical role in their respective
ecosystems, it is imperative to protect the forests
of our oceans. The numerous benefits that they
provide to ecosystems are crucial to the survival of
marine organisms. Kelp restoration is long-underway
and existing forests are being closely monitored by
some of the nation’s elite oceanic research
institutes.
</p>
</div>
</div>
</div>
</section>
<div class="spacer"></div>
<!-- Footer -->
<div id="seagrass"></div>
<footer>
<div class="container pt-4">
<div class="row">
<!-- Logo -->
<div class="col-xs-12 col-md-2 col-lg-1 pt-3">
<a href="index.html">
<img src="img/ioes-short.svg" id="logo-short" alt="UCLA IoES" />
</a>
</div>
<div class="col-xs-12 col-md-10 col-lg-11 pt-3" id="sitemap">
<div>UCLA IoES - Stronger Shorelines</div>
<a href="index.html">Home</a> |
<a href="tools.html">Tools</a> |
<a href="resources.html">Resources</a> |
<a href="ecology.html">Ecology</a> |
<a href="methods.html">Methods</a> |
<a href="library.html">Library</a> |
<a href="team-2019-20.html">2019-2020 Team</a> |
<a href="https://github.com/uclaioes/shorelines">GitHub</a> </div>
</div>
<div class="row py-3">
<!-- Copyright -->
<div class="col-xs-12 col-md-12 text-center">
<span id="copyright">Copyright 2020 © UCLA
IoES</span>
</div>
</div>
</div>
</footer>
<!-- JQuery JS -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>