forked from ontoportal/website
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
236 lines (217 loc) · 10.7 KB
/
index.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
---
title: Ontoportal
description: Deploy and use your Ontoportal repository
---
<section class="hero">
<div class="text-container">
<h1 class="editable">Ontoportal <strong>your semantic artefact repository</strong></h1>
<p class="subtext editable">Deploy and use your Ontoportal repository</p>
<div class="cta button alt"><a href="https://ontoportal.github.io/documentation/administration/steps/getting_started">Get Ontoportal</a></div>
<div>
<img src="{{ site.baseurl }}/images/ontoportal_home.png" alt="Screenshot" class="screenshot editable" />
</div>
</div>
</section>
<div class="content">
<section>
<div class="container flex">
<div class="text editable">
<h2>Upload and save your <strong>semantic artefacts</strong></h2>
<p>Ontoportal makes deploying and running your own semantic repository easier</p>
</div>
<div class="image">
<img src="{{ site.baseurl }}/images/repository_browser.png" alt="Screenshot" class="screenshot editable" />
</div>
</div>
</section>
<section>
<div class="container flex">
<div class="text editable">
<h2>Browse the <strong>content</strong> of your semantic resources</h2>
<p>Ontoportal comes with bunch components for visualizing and browsing yor content</p>
</div>
<div class="image">
<img src="{{ site.baseurl }}/images/content_browse.png" alt="Screenshot" class="screenshot editable" />
</div>
</div>
</section>
<section>
<div class="container flex">
<div class="text editable">
<h2> <strong>Search</strong> for terms</h2>
<p>All the semantic ressources content hosted in your Ontoportal is indexed and can easily be retrieved</p>
</div>
<div class="image">
<img src="{{ site.baseurl }}/images/repository_search.png" alt="Screenshot" class="screenshot editable" />
</div>
</div>
</section>
<section>
<div class="container">
<div class="text editable flex" style="justify-content: center; flex-direction: column; align-items: center;">
<h2> And <strong>a lot </strong> more</h2>
</div>
<ul class="staff">
<li>
<div class="service-circle square-image">Annotator</div>
<div class="name"></div>
<div class="position">Annotate your textual biomedical data with ontology terms.</div>
</li>
<li>
<div class="service-circle square-image">Mappings</div>
<div class="name"></div>
<div class="position">Explore mappings between ontology terms.</div>
</li>
<li>
<div class="service-circle square-image">Recommender</div>
<div class="name"></div>
<div class="position">Get ontology recommendations for annotation based on descriptions of your datasets.</div>
</li>
<li>
<div class="service-circle square-image">Ontology submission</div>
<div class="name"></div>
<div class="position">Give the possibility to your community to submit their own resources.</div>
</li>
<li>
<div class="service-circle square-image">Versioning</div>
<div class="name"></div>
<div class="position">Save and Archive multiple version of your resources</div>
</li>
</ul>
</div>
</section>
<section class="testimonial">
<div class="container flex" style="flex-wrap: wrap; overflow-wrap: anywhere">
<div class="text editable" style=" display: flex; justify-content: center; flex-direction: column; align-items: center;">
<h2>What Users Say</h2>
</div>
<div class="my-slider">
<div class="testimonial-block">
<blockquote>
<p class="editable">I rely on BioPortal for easy access to SNOMED and a number of other terminologies, particularly for when I just want to check the existence of specific terms. I love having a one-stop shop to find just about any ontology I might need.</p>
<p class="editable author">Jessie Tenenbaum - Duke University</p>
</blockquote>
</div>
<div class="testimonial-block">
<blockquote>
<p class="editable">When teaching on the role and importance of structured and standardized data, BioPortal is an indispensible reference. It demonstrates the sheer size and number of ontologies, and the cross-ontology search helps to appreciate gaps, overlaps and target areas of and between ontologies. The annotator, mappings, and SPARQL endpoint help to provide insight in the potentials and challenges of building and using the linked open data cloud in the domain of healthcare and life sciences.</p>
<p class="editable author">Ronald Cornet - Amsterdam UMC</p>
</blockquote>
</div>
<div class="testimonial-block">
<blockquote>
<p class="editable">I’m using BioPortal to browse and search different ontologies and vocabularies such as NDF-RT and SNOMED CT. I find codes for terms and restrictions on terms and I then copy them into clinical guideline representations so that I can use standard terminologies.</p>
<p class="editable author">Mor Peleg - University of Haifa</p>
</blockquote>
</div>
<div class="testimonial-block">
<blockquote>
<p class="editable">I am an ontology developer and often ontology consumer. The BioPortal web site and ontology repository are my go to place for both sharing ontologies and finding other’s ontologies relevant to my work in computational biology. In addition, I have used the excellent web API to do automated search and retrievals in the BioPortal repository for annotation of a variety of types of documents.</p>
<p class="editable author">James Sluka - Indiana University</p>
</blockquote>
</div>
<div class="testimonial-block">
<blockquote>
<p class="editable">The Neuroscience Information Framework and dkNet awards greatly benefitted from the good work at BioPortal. When building our ontologies, NIF always had the philosophy of reuse, a FAIR before the term was coined. However, reuse presupposes that the things you want to reuse are indeed findable, accessible and interoperable. BioPortal makes all submitted terminologies, including our own, FAIR and thus has helped to shape the ontology community. Thank you!</p>
<p class="editable author">Anita Bandrowski - SciCrunch</p>
</blockquote>
</div>
<div class="testimonial-block">
<blockquote>
<p class="editable">The Semantic Systems Biology group at NTNU has been a regular user of BioPortal for many years. BioPortal has been very helpful as a resource for identifying and downloading ontologies most suitable for our projects. In a complementary way, we have also used BioPortal for disseminating application ontologies developed in our group: the Cell Cycle Ontology (CCO), the Gene Expression Ontology (GeXO), the Regulation of Gene Expression Ontology (ReXO) and the Regulation of Transcription Ontology (ReTO). We are honestly grateful to all the members of the BioPortal team for the continuous support they provide to the research community.</p>
<p class="editable author">Vladimir Mironov - Norwegian University of Science and Technology</p>
</blockquote>
</div>
</div>
<script >
var slider = tns({
container: '.my-slider',
items: 1, // Set the number of items to show at once
slideBy: 'page', // Slide by page instead of by item
nav: false, // Hide the default pagination
autoplay: true,
speed: 750,
autoplayButtonOutput: false,
controlsPosition: 'bottom'
});
</script>
</div>
</section>
<section>
<div class="container flex" style="flex-direction: column; justify-content: center" >
<div class="text editable flex" style="justify-content: center; flex-direction: column; align-items: center; margin-top: 10px">
<h2>Be part of a <strong>community</strong></h2>
</div>
<ul class="staff">
{% for portal in site.alliance_members %}
<li>
<div style="height: 100px;background-color:{{portal.color}}" class="square-image"><img src="{% include relative-src.html src=portal.logo %}" alt="{{ portal.name }}" style="object-fit: contain;width: 200px; height: 100px"/></div>
<div class="name"><a target="_blank" href="{{ portal.link }}" style="color: black">{{ portal.name }}</a></div>
<div class="position">{{ portal.description }}</div>
</li>
{% endfor %}
</ul>
<div class="button"><a href="{{ site.baseurl }}/about">Get more information and join the alliance</a></div>
</div>
</section>
<section style="display: flex; justify-content: center">
<iframe title="Ontoportal tweets" style="border:none; margin: 10px; width: 80%; height: 100vh" data-tweet-url="https://twitter.com/ontoportal" src="data:text/html;charset=utf-8,%3Ca%20class%3D%22twitter-timeline%22%20href%3D%22https%3A//twitter.com/ontoportal%3Fref_src%3Dtwsrc%255Etfw%22%3ETweets%20by%20ontoportal%3C/a%3E%0A%3Cscript%20async%20src%3D%22https%3A//platform.twitter.com/widgets.js%22%20charset%3D%22utf-8%22%3E%3C/script%3E%0A">
</iframe>
</section>
<section class="bottom-cta">
<div class="container flex sponsorsFooter" style="flex-direction: column; justify-content: center" >
<div class="text editable flex" style="justify-content: center; flex-direction: column; align-items: center; margin-top: 10px">
<h2><span class="sponsorsFooter-Title">Our</span> <strong>sponsors</strong></h2>
</div>
<ul class="flex">
{% for sponsor in site.sponsors %}
<li data-group="{{ sponsor.portals }}">
<a href="{{sponsor.link}}" target="_blank"><img src="{{ sponsor.logo }}" alt="{{sponsor.acronym}} image"></a>
</li>
{% endfor %}
</ul>
<script>
const ul = document.querySelector(".sponsorsFooter ul");
const title = document.querySelector(".sponsorsFooter .sponsorsFooter-Title");
ul.querySelectorAll('li').forEach(li => {
const portals = li.getAttribute("data-group").toString().trim().split(',')
li.addEventListener("mouseenter", () => {
showPortals(ul,portals)
title.innerHTML = getTitle(portals)
})
li.addEventListener("mouseleave", () => {
title.innerHTML = "Our";
resetPortals(ul)
})
})
function getTitle(portals){
const length = portals.length
if (length === 1) {
return portals[0]
} else if (length === 2) {
return portals.join(' and ');
} else {
const last = portals.slice(-1)
const rest = portals.slice(0, - 1)
return rest.join(', ') + ', and ' + last
}
}
function showPortals(container,portals){
container.querySelectorAll('li').forEach(li => {
const currentPortals = li.getAttribute("data-group").toString().trim().split(',')
if(portals.every(item => currentPortals.includes(item))){
li.classList.add("hover")
container.classList.add("enter")
}
})
}
function resetPortals(container){
container.classList.remove("enter")
container.querySelectorAll('li').forEach(li => {
li.classList.remove("hover")
})
}
</script>
</div>
</section>
</div>