diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index a608f13973e6148b782a71c33dfc356f8e3188ed..f7afbdc7e8531fc5ee6ad267081e77004dae31d6 100755
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -19,6 +19,7 @@ pages-master:
- cp -r help .public
- cp -r js .public
- cp *.html .public
+ - cp favicon.ico .public
- mv .public public
- cp -r public/* "$EXPORT_PAGES_DIR"
artifacts:
@@ -41,6 +42,7 @@ pages-devel:
- cp -r downloads .public
- cp -r help .public
- cp -r fonts .public
+ - cp favicon.ico .public
- cp *.html .public
- mv .public public
- cp -r public/* "$EXPORT_PAGES_DIR_TEST"
diff --git a/bwcloud.html b/bwcloud.html
index 165cd155517ddaa53d613acffdb87f6113690b67..f9f5247d539ffc9feff978e8a2c6e5c2b43cf3ad 100644
--- a/bwcloud.html
+++ b/bwcloud.html
@@ -17,14 +17,14 @@
<div>
<div class="container">
<div class="row">
- <div class="col-md-12" style="margin-bottom: 40px;"><img class="mx-auto" src="/img/bwcloud.png" width="100%"></div>
+ <div class="col-md-12 margin_bottom_40"><img class="mx-auto" src="/img/bwcloud.png" width="100%"></div>
</div>
</div>
</div>
<div>
<div class="container">
<div class="row">
- <div class="col-md-12" style="margin-bottom: 30px;">
+ <div class="col-md-12 margin_bottom_30">
<h4 class="text-center">Die Universität Karlsruhe bietet für teilnehmende Hochschulen und Universitäten in Baden-Württemberg den Dienst bwSync&Share an.
</h4>
</div>
@@ -34,17 +34,17 @@
<div>
- <div id="Jira Text" style="background-color: #dadada;margin-top: 40px;">
+ <div id="Jira Text"class="background_dadada margin_top_40">
<div class="container">
- <div class="row" style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
- <div class="col-lg-12" style="background-color: #feffff;">
- <h2 class="d-flex flex-column flex-shrink-1 order-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Features</strong></h2>
+ <div class="row" class="m_bottom_0 p_top_20 p_bottom_20">
+ <div class="col-lg-12 background_ffffff">
+ <h2 class="d-flex flex-column flex-shrink-1 order-1 justify-content-lg-start text-center heading p_top_15"><strong>bwSync&Share</strong></h2>
</div>
- <div class="col-auto col-md-4 col-lg-6 flex-row flex-grow-1 flex-fill order-1" style="background-color: #ffffff;">
+ <div class="col-auto col-md-4 col-lg-6 flex-row flex-grow-1 flex-fill order-1 background_ffffff">
<p>bwSync&Share bietet die Möglichkeit, Dateien miteinenader zu teilen und zu synchronisieren.</p>
</div>
- <div class="col-auto col-md-4 col-lg-6 text-center flex-row flex-grow-1 flex-fill justify-content-between flex-wrap order-2" style="background-color: #ffffff;">
- <div class="justify-content-between order-2" style="background-color: rgba(255,255,255,0);">
+ <div class="col-auto col-md-4 col-lg-6 text-center flex-row flex-grow-1 flex-fill justify-content-between flex-wrap order-2 background_ffffff">
+ <div class="justify-content-between order-2">
<p class="text-left d-flex d-md-flex flex-row flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-start align-content-start align-self-start flex-wrap order-1 justify-content-md-left align-items-md-start justify-content-lg-start">
Der Dienst baut dabei auf NextCloud und OnlyOffice auf und bietet Clienten für alle gängigen Betriebssysteme (Windows, Mac, Linux, Android und iOS)
</p>
@@ -53,22 +53,22 @@
</div>
</div>
</div>
- <div id="Access_Text" style="background-color: #dadada;margin-top: 0px;">
+ <div id="Access_Text" class="background_dadada m_top_0">
<div class="container">
- <div class="row" style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
- <div class="col-lg-12" style="background-color: #ffffff;">
- <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Zugang</strong></h2>
+ <div class="row" class="m_bottom_0 p_top_20 p_bottom_20">
+ <div class="col-lg-12 background_ffffff">
+ <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center heading p_top_15"><strong>Zugang</strong></h2>
</div>
- <div class="col-md-4 col-lg-6" style="background-color: #ffffff;">
+ <div class="col-md-4 col-lg-6 background_ffffff">
<p>Der Zugang für teilnehmende Institutionen erfolgt über Shibboleth</p>
<p>Kooperationspartner, die nicht ans Shibboleth angeschlossen sind, können als Gäste registriert werden. Gäste können Dateien bearbeiten, haben aber keinen eigenen Speicherplatz.</p>
</div>
- <div class="col-md-4 col-lg-6 text-center" style="background-color: #ffffff;">
- <div class="order-2" style="background-color: rgba(255,255,255,0);">
- <p class="text-left d-flex d-md-flex flex-row flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-start align-content-start align-self-start flex-wrap order-1 justify-content-md-center align-items-md-start justify-content-lg-start">Weitere Hilfe zur Benutzung von bwSync&Share finden sich in der zugehörigen <a href="https://help.bwsyncandshare.kit.edu/" style="display: contents;">Benutzerdokumentation</a> </p>
+ <div class="col-md-4 col-lg-6 text-center background_ffffff">
+ <div class="order-2">
+ <p class="text-left d-flex d-md-flex flex-row flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-start align-content-start align-self-start flex-wrap order-1 justify-content-md-center align-items-md-start justify-content-lg-start">Weitere Hilfe zur Benutzung von bwSync&Share finden sich in der zugehörigen <a href="https://help.bwsyncandshare.kit.edu/" class="display_contents">Benutzerdokumentation</a> </p>
</div>
- <a class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap order-3 mb-auto justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto"
- role="button" style="background-color: #E0001B;" href="https://bwsyncandshare.kit.edu/"><strong>Zugang zu bwSync&Share</strong></a>
+ <a class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap order-3 mb-auto justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto background_e0001b"
+ role="button" href="https://bwsyncandshare.kit.edu/"><strong>Zugang zu bwSync&Share</strong></a>
</div>
</div>
</div>
diff --git a/confluence.html b/confluence.html
index 8dc35c20512e55d30e5bd811b5e158fab27f390b..4e444320121e4fa5b524af81b75ad93bc40b7147 100644
--- a/confluence.html
+++ b/confluence.html
@@ -17,14 +17,14 @@
<div>
<div class="container">
<div class="row">
- <div class="col-md-12" style="margin-bottom: 40px;"><img class="mx-auto" src="/img/Wissensaustausch.jpg" width="100%"></div>
+ <div class="col-md-12 margin_bottom_40"><img class="mx-auto" src="/img/Wissensaustausch.jpg" width="100%"></div>
</div>
</div>
</div>
<div>
<div class="container">
<div class="row">
- <div class="col-md-12" style="margin-bottom: 30px;">
+ <div class="col-md-12 margin_bottom_30">
<h4 class="text-center">Das Transferportal bietet eine Möglichkeit für kollaborativen Wissensaustausch an. Dieses Angebot richtet sich insbesondere an Kollaborationsprojekte zwischen der HfT und externen Partnern.</h4>
</div>
</div>
@@ -33,18 +33,18 @@
<div>
- <div id="Confluence Text" style="background-color: #dadada;margin-top: 40px;">
+ <div id="Confluence Text" class="background_dadada margin_top_40">
<div class="container">
- <div class="row" style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
- <div class="col-lg-12" style="background-color: #feffff;">
- <h2 class="d-flex flex-column flex-shrink-1 order-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Confluence</strong></h2>
+ <div class="row" class="m_bottom_0 p_top_20 p_bottom_20">
+ <div class="col-lg-12 background_ffffff">
+ <h2 class="d-flex flex-column flex-shrink-1 order-1 justify-content-lg-start text-center heading p_top_15"><strong>Confluence</strong></h2>
</div>
- <div class="col-auto col-md-4 col-lg-6 flex-row flex-grow-1 flex-fill order-1" style="background-color: #ffffff;">
+ <div class="col-auto col-md-4 col-lg-6 flex-row flex-grow-1 flex-fill order-1 background_ffffff">
<p>Confluence ist ein Wiki-System der Firma Atlassian, welches an der Hochschule für Technik zum Einsatz kommt.</p>
<p>Über das Transferportal bieten wir eine Instanz an, auf der Projekte Bereiche anlegen können, über die sie Informationen und Wissen innerhalb des Projektes vernetzen können.</p>
</div>
- <div class="col-auto col-md-4 col-lg-6 text-center flex-row flex-grow-1 flex-fill justify-content-between flex-wrap order-2" style="background-color: #ffffff;">
- <div class="justify-content-between order-2" style="background-color: rgba(255,255,255,0);">
+ <div class="col-auto col-md-4 col-lg-6 text-center flex-row flex-grow-1 flex-fill justify-content-between flex-wrap order-2 background_ffffff">
+ <div class="justify-content-between order-2">
<p class="text-left d-flex d-md-flex flex-row flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-start align-content-start align-self-start flex-wrap order-1 justify-content-md-left align-items-md-start justify-content-lg-start">
Wichtige Features umfassen dabei:
<ul class="text-left">
@@ -54,26 +54,26 @@
<li>Vernetzung mit unserem Werkzeug zum <a href="/jira.html">Aufgabenmanagement</a>
</ul>
</p>
- </div><a class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap order-3 mb-auto justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto"
- role="button" style="background-color: #E0001B;" href="https://transfer.hft-stuttgart.de/confluence/"><strong>Zugang über das Transferportal</strong></a></div>
+ </div><a class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap order-3 mb-auto justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto background_e0001b"
+ role="button" href="https://transfer.hft-stuttgart.de/confluence/"><strong>Zugang über das Transferportal</strong></a></div>
</div>
</div>
</div>
- <div id="Access_Text" style="background-color: #dadada;margin-top: 0px;">
+ <div id="Access_Text" class="background_dadada m_top_0">
<div class="container">
- <div class="row" style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
- <div class="col-lg-12" style="background-color: #ffffff;">
- <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Zugang</strong></h2>
+ <div class="row" class="m_bottom_0 p_top_20 p_bottom_20">
+ <div class="col-lg-12 background_ffffff">
+ <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center heading p_top_15"><strong>Zugang</strong></h2>
</div>
- <div class="col-md-4 col-lg-6" style="background-color: #ffffff;">
+ <div class="col-md-4 col-lg-6 background_ffffff">
<p>Um Zugang zu Confluence zu erhalten, benötigen Sie einen Account am Portal. Dieser muss zunächst noch freigeschalten werden, wenden Sie sich dazu bitte an den Administrator.</p>
<p>Um einen Bereich für ein Projekt zu erhalten, wenden Sie sich bitte ebenfalls an den Administrator, der mit Ihnen dann das weitere Vorgehen abstimmen wird.</p>
</div>
- <div class="col-md-4 col-lg-6 text-center" style="background-color: #ffffff;">
- <div class="order-2" style="background-color: rgba(255,255,255,0);">
+ <div class="col-md-4 col-lg-6 text-center background_ffffff">
+ <div class="order-2">
<p class="text-left d-flex d-md-flex flex-row flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-start align-content-start align-self-start flex-wrap order-1 justify-content-md-center align-items-md-start justify-content-lg-start">Weitere Hilfe zur Benutzung von Confluence finden sich auf den <a href="https://confluence.atlassian.com/doc/confluence-data-center-and-server-documentation-135922.html">Seiten der Firma Atlassian</a></p>
- </div><a class="btn btn-primary text-center d-lg-flex justify-content-center align-items-center align-content-center align-self-center align-items-lg-end mx-auto" role="button" style="background-color: #E0001B;" href="mailto:support-transfer@hft-stuttgart.de"><strong>Zugang über Admin anfragen</strong></a></div>
+ </div><a class="btn btn-primary text-center d-lg-flex justify-content-center align-items-center align-content-center align-self-center align-items-lg-end mx-auto background_e0001b" role="button" href="mailto:support-transfer@hft-stuttgart.de"><strong>Zugang über Admin anfragen</strong></a></div>
</div>
</div>
</div>
diff --git a/css/help.css b/css/help.css
index 98736e2474383cc0149015b43c0fab764eb5e586..74054b407af03c16d981d89b41e2eef2080f6558 100644
--- a/css/help.css
+++ b/css/help.css
@@ -1,3 +1,24 @@
img{
padding-bottom: 20px;
}
+ol.innerlisthpchelp {
+ list-style-type: lower-alpha;
+ }
+
+.padding_top_bottom{
+ margin-bottom: 0;
+ padding-top: 20px;
+ padding-bottom: 20px;
+}
+.margin_top_bottom{
+ margin-top: 40px;
+ margin-bottom: 30px;
+}
+.margin_middle{
+ margin-top: 10px;
+ margin-bottom: 30px;
+}
+.borderblackblock{
+ border:1px solid black;
+ display: block;
+}
diff --git a/css/m4lab.css b/css/m4lab.css
index 04060f19f273f3d8e47ec130dd6418236cf4a63c..150a0abaed2ce56550135fa6ac9ec1a0e360f10d 100644
--- a/css/m4lab.css
+++ b/css/m4lab.css
@@ -149,7 +149,7 @@ h1, .h1 {
float: center;
background-color: darkgray;
width: 100%;
- height: auto;
+ height: 200px;
padding: 10px;
object-fit: contain;
margin-bottom: 20px;
@@ -354,7 +354,6 @@ justify-content:space-evenly;}
margin-bottom: 40px;
}
-
.m_top_0 {
margin-top: 0px;
}
@@ -367,8 +366,8 @@ justify-content:space-evenly;}
padding-top: 20px;
}
-.p_top_20 {
- padding-top: 20px;
+.p_bottom_20 {
+ padding-bottom: 20px;
}
.p_bottom_20 {
@@ -376,7 +375,7 @@ justify-content:space-evenly;}
}
.p_top_15 {
- padding-bottom: 15px;
+ padding-top: 15px;
}
.mailinglist_heading {
@@ -384,3 +383,208 @@ justify-content:space-evenly;}
color: #708090;
}
+.color_black {
+ color: #000000;
+}
+
+.color_red {
+ color:#ff0000;
+}
+
+.color_white {
+ color:#ffffff;
+}
+
+.display_none {
+ display: none;
+}
+
+.color_8a348b {
+ color: #8a348b;
+}
+
+.contact_foot_message {
+ background-color: #ffffff;
+ margin: 0px;
+ padding: 60px;
+ padding-top: 20px;
+ padding-bottom: 20px;
+}
+
+.background_eaeaea {
+ background-color: #eaeaea;
+}
+
+.p_bottom_35 {
+ padding-bottom: 35px;
+}
+
+.contact_send_btn {
+ background-color: #8a348b;
+ color: #ffffff;
+}
+
+.m_top_25 {
+ margin-top: 25px;
+}
+
+.contact_footer {
+ background-color: #eaeaea;
+ padding: 80px;
+ padding-top: 0px;
+}
+
+.mailinglist_activetable {
+ align-items:flex-start;
+}
+
+.height_200 {
+ height: 200px;
+}
+
+.background_f1f1f1 {
+ background-color: #f1f1f1;
+}
+
+.project_overview {
+ float:right;
+ margin-left:30px;
+ margin-bottom:0px;
+ width:50%;
+}
+
+.width_18 {
+ width: 18rem;
+}
+
+.no_text_decoration {
+ text-decoration: none
+}
+
+.p_left_5 {
+ padding-left: 5px;
+}
+
+.p_right_5 {
+ padding-right: 5px;
+}
+
+.mailingList_text {
+ background-color: #dadada;
+ margin-top: 0px;
+}
+
+.color_708090 {
+ color: #708090;
+}
+
+.m_top_15 {
+ margin-top: 15px;
+}
+
+.mailingList_aboText {
+ background-color: #dadada;
+ margin-top: 40px;
+}
+
+.m_top_10 {
+ margin-top: 10px;
+}
+
+.m_left_35 {
+ margin-left: 35px;
+}
+
+.m_right_35 {
+ margin-right: 35px;
+}
+
+.videoconference_jitsi {
+ padding-right: 5px;
+ padding-left: 0px;
+ margin-top: 15px;
+}
+
+.videoconference_gotomeeting_text {
+ margin-bottom: 0;
+ padding-top: 20px;
+ padding-bottom: 20px;
+}
+
+.videoconference_jitsi_text {
+ margin-bottom: 0;
+ padding-top: 20px;
+ padding-bottom: 20px;
+}
+
+.videoconference_gotomeeting {
+ padding-right: 0px;
+ padding-left: 5px;
+ margin-top: 15px;
+}
+
+.width_309 {
+ width: 309px;
+}
+
+.videoconference_more_info {
+ background-color: #e4e4e4;
+ color: #595959;
+ padding-bottom: 6px;
+ width: 309px;
+ margin-right: 0;
+ margin-bottom: 15px;
+}
+
+.info_partizipation_text {
+ margin-bottom: 0;
+ padding-top: 20px;
+ padding-bottom: 20px;
+}
+
+.jisi_text {
+ margin-bottom: 0;
+ padding-top: 20px;
+ padding-bottom: 20px;
+}
+
+.display_contents {
+ display: contents;
+}
+
+.background_708090 {
+ background-color: #708090;
+}
+
+.m_0 {
+ margin: 0px;
+}
+
+.p_0 {
+ padding: 0px;
+}
+
+.p_top_0 {
+ padding-top: 0px;
+}
+
+.index_foot_message {
+ background-color: #ffffff;
+ margin: 0px;
+ padding: 60px;
+ padding-top: 20px;
+ padding-bottom: 20px;
+}
+
+.index_neues_projekt {
+ background-color: #f2f2f2;
+ margin-top: 0px;
+ padding-top: 20px;
+ padding-bottom: 20px;
+}
+
+.index_project_overview {
+ background-color: #E0001B;
+ filter: invert(0%);
+ color: white;
+}
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..0d22a361be3c0ded20d52e1773e8c5dc6b7698cb
Binary files /dev/null and b/favicon.ico differ
diff --git a/help/gitlab-pages.html b/help/gitlab-pages.html
index e779bb5715688ee712928ac6f58a2576bcc115b6..3b27edc513ab12c207486904473b9fe00fb52458 100644
--- a/help/gitlab-pages.html
+++ b/help/gitlab-pages.html
@@ -16,37 +16,37 @@
<body>
- <div style="background-color: #dadada;">
+ <div class="background_dadada">
- <div class="container" style="background-color: #ffffff;margin-bottom: 30px;">
+ <div class="container background_ffffff margin_bottom_30">
<div class="row">
</div>
</div>
- <div id="Gitlab_Text" style="margin-top: 40px;margin-bottom: 30px;">
- <div class="container" style="background-color: #ffffff;">
- <div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+ <div id="Gitlab_Text" class="margin_top_bottom">
+ <div class="container background_ffffff">
+ <div class="padding_top_bottom">
<div class="col-lg-12">
- <h2 class="d-flex flex-column flex-shrink-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Gitlab-pages</strong></h2>
+ <h2 class="d-flex flex-column flex-shrink-1 justify-content-lg-start text-center mailinglist_heading"><strong>Gitlab-pages</strong></h2>
</div>
- <div class="col-auto flex-row flex-grow-1 flex-fill" style="background-color: #ffffff;">
+ <div class="col-auto flex-row flex-grow-1 flex-fill background_ffffff">
<p><a href="https://de.wikipedia.org/wiki/GitLab">GitLab</a> ist eine umfangreiche Webanwendung zur Versionsverwaltung für Softwareprojekte auf Basis von <a href="https://de.wikipedia.org/wiki/Git">Git</a> die auch Wiki-Funktionen und Issue Tracking bietet. Das Transferportal der HFT-Stuttgart betreibt eine eigene GitLab-Instanz für die Hochschule für Technik Stuttgart und ihre Kooperationspartner unter einer Open-Access-Lizenz. Mit <a href="https://docs.gitlab.com/ee/user/project/pages/">GitLab Pages </a> besteht für Angehörige der HFT die Möglichkeit, eine öffentliche statische Projektwebsite aus einem GitLab-Projekt heraus zu erzeugen.
</p><p>
Die URL, unter der die Seite dann zu finden ist, lautet: <br/> <br/>
- <p class="justify-content-lg-start text-center">https://transfer.hft-stuttgart.de/pages/PROJEKTNAME/</p>
+ <p class="justify-content-lg-start text-center">https://transfer.hft-stuttgart.de/pages/EIGENTUEMER/PROJEKTNAME/</p>
</p>
</div>
- <a class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap order-3 mb-auto justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto"
- role="button" style="background-color: #E0001B;" href="https://transfer.hft-stuttgart.de/gitlab/explore/projects"><strong>Zugriff auf Gitlab</strong></a>
+ <a class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap order-3 mb-auto justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto background_e0001b"
+ role="button" href="https://transfer.hft-stuttgart.de/gitlab/explore/projects"><strong>Zugriff auf Gitlab</strong></a>
</div>
</div>
</div>
- <div id="create_Text" style="margin-top: 10px;margin-bottom: 30px;">
- <div class="container" style="background-color: #ffffff;">
- <div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+ <div id="create_Text" class="margin_middle">
+ <div class="container background_ffffff">
+ <div class="padding_top_bottom">
<div class="col-lg-12">
- <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Gitlab-pages Projekte</strong></h2>
+ <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center mailinglist_heading"><strong>Gitlab-pages Projekte</strong></h2>
</div>
- <div class="col-auto" style="background-color: #ffffff;">
+ <div class="col-auto background_ffffff">
<div class="help">
<div class="card">
<div class="card-header">
@@ -55,7 +55,7 @@
<small>Gitlab-pages Projekt erstellen</small></a>
</h3>
</div>
- <div id="collapse1" class="card-body collapse" style="">
+ <div id="collapse1" class="card-body collapse">
<p>
Um ein eigenes Gitlab-pages Projekt zu erstellen und damit eine eigene Projektseite zu erstellen, führen Sie folgende Schritte aus:
</p>
@@ -63,25 +63,31 @@
<li> Legen Sie sich auf <a href="https://transfer.hft-stuttgart.de"> https://transfer.hft-stuttgart.de</a> ein Benutzerkonto an bzw. loggen Sie sich mit Ihren HFT-Nutzerdaten in das Transferportal ein.</li>
<li> Besuchen Sie die Website <a href="https://transfer.hft-stuttgart.de/gitlab/explore/projects">https://transfer.hft-stuttgart.de/gitlab/explore/projects</a></li>
<li> Loggen Sie sich mit ihren Anmeldedaten ein </li>
+ <li> Standardmäßig wird Ihr Projekt als persönliches Projekt veröffentlicht, es wird also an Ihren persönlichen Benutzernamen gekoppelt, der dann auch in der URL auftaucht. Wenn Sie dies nicht wünschen, erstellen Sie eine neue Gruppe, unter der Sie das Projekt erstellen. Klicken Sie dazu auf <em>Groups</em>, <em> Your Groups </em> und wählen <em> New group </em> aus. Hier können Sie nun der Gruppe einen entsprechenden Namen geben. <p> <strong> Wichtig: </strong> Dieser Name wird später auch in der URL auftauchen, unter der Ihre Seite aufrufbar ist.</p> Nach Klick auf <em>create group</em> wird Ihre Gruppe angelegt, und Sie werden automatisch zur Gruppenseite weitergeleitet.
+ <img src="/img/help/newgroup.png" width="95%"/>
+ </li>
<li> Legen Sie ein neues Projekt an, indem Sie auf den Button <em> New Project </em> klicken
<img src="/img/help/newproject.png" width="95%"/>
</li>
- <li> Wählen Sie <em> Create from template </em> aus und nutzen Sie das Template <em> </em> aus dem Bereich <em> Instance </em>, Klicken Sie dort auf <em> Use template</em> <img src="/img/help/fromtemplate.png" width="95%"/> <img src="/img/help/choosetemplate.png" width="95%"/> </li>
+ <li> Wählen Sie <em> Create from template </em> aus und nutzen Sie ein Template aus dem Bereich <em> Instance </em>, Klicken Sie dort auf <em> Use template</em> <img src="/img/help/fromtemplate.png" width="95%"/> <img src="/img/help/choosetemplate.png" width="95%"/> </li>
<li> Nun können Sie ihr Projekt befüllen. Tragen Sie mindestens die Grundinformationen wie <em> Project name </em> und <em> Project description </em> ein.<img src="/img/help/createproject.png" width="95%"/> </li>
<li> Klicken Sie auf <em> Create project</em></li>
<li>
- Ihr Projekt wird nun erstellt und enthält automatisch die notwendigen Grundeinstellungen für das Publizieren einer Website über die Funktion Pages. Vor allem wird im Repositorium der Ordner <em> Public </em> angelegt. <img src="/img/help/folderpublic.png" width="95%"/> <br/>
- In diesem Ordner befinden sich die Dateien <em> index.html, aktuelles.html </em>, <em> style.css </em> und <em>settings.js</em>. Diese sorgen für Inhalt (aktuelles.html, index.html) und Aussehen (style.css) der statischen Webseite und enthalten allgemeine Projektinformationen (settings.js). Direkt nach Projekterstellung enthalten sie zunächst nur allgemeine, grundsätzliche Informationen aus dem Template. <img src="/img/help/content_public.png" width="95%"/>
+ Ihr Projekt wird nun erstellt und enthält automatisch die notwendigen Grundeinstellungen für das Publizieren einer Website über die Funktion Pages. Vor allem wird im Repositorium der Ordner <em> Public </em> angelegt.
+ <img src="/img/help/folderpublic.png" width="95%"/> <br/>
</li>
<li>
Um Ihre eigenen Projektinhalte zu veröffentlichen, können Sie entweder eine komplett eigene HTML-Seite erzeugen oder sich an unseren Vorgaben aus dem Template orientieren. Eine Anleitung zur Verwendung unserer Vorlage finden Sie im Bereich <a href="#template_Text">Gitlab-pages Template benutzen</a>
</li>
- <li>
- Sobald Sie mit dem Inhalt der Seite zufrieden sind, und diese veröffentlichen wollen, informieren Sie den Administrator unter <a href="mailto:support-transfer@hft-stuttgart.de">support-transfer@hft-stuttgart.de</a>. Dieser wird dann Ihr Projekt das erste Mal auf den Server hochladen, für weitere Schritte gehen Sie zum nächsten Abschnitt.
+ <li id="li_url">
+ Sobald Sie Änderungen an Ihrer Seite vornehmen und diese in den Master-Branch eintragen (der Standard-Branch ihres Projektes), wird das Projekt veröffentlicht. Um den Link zu sehen, unter dem Sie Ihre Seite finden, gehen Sie in der Sitebar auf der linken Seite unter <em>CI / CD </em> auf <em>Jobs</em> und wählen den obersten Job mit den Namen <em> pages </em> aus. Im nun angezeigten Log finden Sie die Adresse, unter der Ihr Projekt ausgerollt wurde.
+ <img src="/img/help/show_jobs.png" width="95%">
+ <img src="/img/help/log_link.png" width="95%">
+ </li>
+ <li>
+ Für weitere Schritte gehen Sie zum nächsten Abschnitt.
</li>
</ol>
- <a class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap order-3 mb-auto justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto"
- role="button" style="background-color: #E0001B;" href="mailto:support-transfer@hft-stuttgart.de"><strong>Administratorkontakt</strong></a>
</div>
</div>
<br/>
@@ -92,7 +98,7 @@
<small>Gitlab-pages Projekt ändern</small></a>
</h3>
</div>
- <div id="collapse2" class="card-body collapse" style="">
+ <div id="collapse2" class="card-body collapse">
<p>
Nachdem Ihr Projekt das erste Mal veröffentlicht wurde, möchten Sie sicherlich Änderungen an der Seite vornehmen. Dafür gehen Sie wie folgt vor:
<ol>
@@ -125,42 +131,74 @@
</p>
</div>
</div>
+ <br/>
+ <div class="card">
+ <div class="card-header">
+ <h3 class="card-title">
+ <a class="collapsed" data-toggle="collapse" href="#collapsedel" aria-expanded="false" aria-controls="collapsedel">
+ <small>Gitlab-pages Seite entfernen</small></a>
+ </h3>
+ </div>
+ <div id="collapsedel" class="card-body collapse">
+ <p>
+ Um Ihre gitlab-pages Seite zu entfernen, gibt es zwei Möglichkeiten. Sie können entweder das gesamte Projekt löschen, oder aber nur die öffentliche Seite, das Projekt aber behalten, um daran Änderungen vorzunehmen. Um nur die Seite, nicht aber das Projekt an sich zu löschen, gehen Sie wie folgt vor:
+ <ol>
+ <li>
+ Klicken Sie in der linken Sitebar auf <em> Settings </em> und <em>pages </em>.
+ </li>
+ <li>
+ Klicken Sie in der sich nun öffnenden Konfigurationsansicht auf <em> Remove pages </em>. Dies entfernt die Seite von unserem Server, das Projekt an sich bleibt aber erhalten.
+ </li>
+ </ol>
+ </p>
+ </div>
+ </div>
+
</div>
</div>
</div>
</div>
</div>
- <div id="error_Text" style="margin-top: 10px;margin-bottom: 30px;">
- <div class="container" style="background-color: #ffffff;">
- <div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+ <div id="error_Text" class="margin_middle">
+ <div class="container background_ffffff">
+ <div class="padding_top_bottom">
<div class="col-lg-12">
- <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Häufige Fehlermeldungen und deren Korrektur</strong></h2>
+ <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center mailinglist_heading"><strong>Häufige Fragen und Probleme</strong></h2>
</div>
- <div class="col-auto" style="background-color: #ffffff;">
+ <div class="col-auto background_ffffff">
<p>
<ul>
<li>
- <h6> This job is stuck because you don't have any active runners online or available with any of these tags assigned to them: production </h6>
- <p> In diesem Fall ist Ihr Projekt höchstwahrscheinlich noch nicht registriert oder es liegt ein anderes Problem vor. Kontaktieren Sie den Administrator </p>
+ <h6> Pipeline schlägt beim Schritt <em> pages-test </em> fehl </h6>
+ <p> In diesem Fall ist Ihr Projekt noch nicht vollständig konfiguriert. Bitte konfigurieren Sie ihr Projekt entsprechend der Vorlage im nächsten Abschnitt </p>
+ </li>
+
+ <li>
+ <h6> Ich habe ein Gitlab-pages-Projekt erstellt, unter <em>Settings/ pages</em> steht aber eine kryptische URL der Form *.thishost.local:8090/*, die nicht funktioniert. </h6>
+ <p> Dies ist die interne Repräsentation des Projektes auf unserem Server und ist somit nicht von außerhalb ereichbar. Um die tatsächliche, von außen erreichbare URL Ihrer Seite zu finden, gehen Sie in der Sitebar auf der linken Seite unter <em>CI / CD </em> auf <em>Jobs</em> und wählen den obersten Job mit den Namen <em> pages </em> aus. Im nun angezeigten Log finden Sie die Adresse, unter der Ihr Projekt ausgerollt wurde.</p>
+ </li>
+ <li>
+ <h6> Ich möchte größere Projektdaten hochladen, wie groß darf mein Projekt maximal sein? </h6>
+ <p> Gegenwärtig ist die Gesamtgröße der ausgerollten Seite (Ordner <em> public </em>) auf 2 GB beschränkt.</p>
</li>
</ul>
</p>
</div>
- <a class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap order-3 mb-auto justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto"
- role="button" style="background-color: #E0001B;" href="mailto:support-transfer@hft-stuttgart.de"><strong>Administratorkontakt</strong></a>
+ <a class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap order-3 mb-auto justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto background_e0001b"
+ role="button" href="mailto:support-transfer@hft-stuttgart.de"><strong>Administratorkontakt</strong></a>
</div>
</div>
</div>
- <div id="template_Text" style="margin-top: 10px;margin-bottom: 30px;">
- <div class="container" style="background-color: #ffffff;">
- <div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+ <div id="template_Text" class="margin_middle">
+ <div class="container background_ffffff">
+ <div class="padding_top_bottom">
<div class="col-lg-12">
- <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Gitlab-pages Template benutzen</strong></h2>
+ <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center mailinglist_heading"><strong>Gitlab-pages Template <em>pages-basic</em> benutzen</strong></h2>
</div>
- <div class="col-auto" style="background-color: #ffffff;">
+ <div class="col-auto background_ffffff">
<p>
Wir stellen eine Vorlage für Projektwebseiten zur Verfügung.
</p>
@@ -172,7 +210,7 @@
<small>Erste Schritte</small></a>
</h3>
</div>
- <div id="collapse7" class="card-body collapse" style="">
+ <div id="collapse7" class="card-body collapse">
<p>
Um unsere Vorlage zu benutzen, müssen Sie folgende Schritte ausführen:
</p>
@@ -207,23 +245,18 @@
Klicken Sie anschließend auf <em> commit changes </em>, um die Änderungen zu speichern.
</p>
</li>
- <li>
- Nun können Sie den Administrator kontaktieren, der Ihr Projekt am Runner registriert, um das Projekt auf unserem Server auszurollen.
- </li>
</ol>
- <a class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap order-3 mb-auto justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto"
- role="button" style="background-color: #E0001B;" href="mailto:support-transfer@hft-stuttgart.de"><strong>Administratorkontakt</strong></a>
</div>
</div>
<br/>
<div class="card">
<div class="card-header">
<h3 class="card-title">
- <a class="collapsed" data-toggle="collapse" href="#collapse3" aria-expanded="false" aria-controls="collapse3">
+ <a class="collapsed" data-toggle="collapse" href="#collapse8" aria-expanded="false" aria-controls="collapse8">
<small>Logo hinzufügen</small></a>
</h3>
</div>
- <div id="collapse3" class="card-body collapse" style="">
+ <div id="collapse8" class="card-body collapse">
<p> Um ein eigenes Projektlogo zum Projekt hinzuzufügen, müssen Sie folgende Schritte ausführen:
<ol>
<li>
@@ -255,11 +288,11 @@
<div class="card">
<div class="card-header">
<h3 class="card-title">
- <a class="collapsed" data-toggle="collapse" href="#collapse4" aria-expanded="false" aria-controls="collapse4">
+ <a class="collapsed" data-toggle="collapse" href="#collapse9" aria-expanded="false" aria-controls="collapse9">
<small>Neue Seite hinzufügen</small></a>
</h3>
</div>
- <div id="collapse4" class="card-body collapse" style="">
+ <div id="collapse9" class="card-body collapse">
<p>
Um Ihrem Projekt neue Seiten hinzuzufügen, führen Sie folgende Schritte aus:
<ol>
@@ -273,34 +306,32 @@
<li>
Geben Sie einen Dateinamen (<b> wichtig: </b> Endung .html) an und fügen Sie folgenden Standardtext ein:
<textarea rows="28" cols="64" disabled="true">
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="generator" content="GitLab Pages">
- <title>Neue Seite</title>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <div id="topbar">
- <div id="menu" class="navbar"></div>
- </div>
- <div class="content">
- <h1 id='projectname'></h1> <!--Projektname kommt aus settings.js, hier nichts einfügen-->
+ <!DOCTYPE html>
+ <html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="generator" content="GitLab Pages">
+ <title>Neue Seite</title>
+ <link rel="stylesheet" href="style.css">
+ </head>
+ <body>
+ <div id="topbar">
+ <div id="menu" class="navbar"></div>
+ </div>
+ <div class="content">
+ <h1 id='projectname'></h1> <!--Projektname kommt aus settings.js, hier nichts einfügen-->
+
+ <!-- ÄNDERUNGEN NUR NACH DIESER ZEILE -->
+ <h2> Seitentitel: </h2>
+ <p>
+ Content
+ </p>
- <!-- ÄNDERUNGEN NUR NACH DIESER ZEILE -->
-
- <h2> Seitentitel: </h2>
-
- <p>
- Content
- </p>
-
- <!-- KEINE ÄNDERUNGEN NACH DIESER ZEILE -->
- </div>
- <script src="settings.js"> </script>
- </body>
-</html>
+ <!-- KEINE ÄNDERUNGEN NACH DIESER ZEILE -->
+ </div>
+ <script src="settings.js"> </script>
+ </body>
+ </html>
</textarea>
<img src="/img/help/editnewpage.png" width="95%"/>
</li>
@@ -309,7 +340,7 @@
</li>
<li>
Ihre Seite wird nun automatisch auf den Server übertragen und ist unter folgender Adresse erreichbar:
- <p>https://transfer.hft-stuttgart.de/pages/PROJEKTNAME/DATEINAME</p>
+ <p>https://transfer.hft-stuttgart.de/pages/EIGENTUEMER/PROJEKTNAME/DATEINAME</p>
</li>
</ol>
</p>
@@ -319,11 +350,11 @@
<div class="card">
<div class="card-header">
<h3 class="card-title">
- <a class="collapsed" data-toggle="collapse" href="#collapse5" aria-expanded="false" aria-controls="collapse5">
+ <a class="collapsed" data-toggle="collapse" href="#collapse10" aria-expanded="false" aria-controls="collapse10">
<small>Menü bearbeiten</small></a>
</h3>
</div>
- <div id="collapse5" class="card-body collapse" style="">
+ <div id="collapse10" class="card-body collapse">
<p>
Wenn Sie das Menü am oberen Seitenrand bearbeiten wollen, führen Sie folgende Schritte durch:
<ol>
@@ -363,11 +394,245 @@
</div>
</div>
</div>
-
- <div class="container" style="background-color: #ffffff;margin-bottom: 30px;">
- <div class="row">
+ <div id="template_Text" class="margin_middle">
+ <div class="container background_ffffff">
+ <div class="margin_top_bottom">
+ <div class="col-lg-12">
+ <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center mailinglist_heading"><strong>Gitlab-pages Templates <em>generic/ simple_raw / simple_thesis</em> benutzen</strong></h2>
+ </div>
+ <div class="col-auto background_ffffff">
+ <p>
+ Wir stellen mehrere Vorlagen für Projektwebseiten zur Verfügung.
+ </p>
+ <div class="help">
+ <div class="card">
+ <div class="card-header">
+ <h3 class="card-title">
+ <a class="collapsed" data-toggle="collapse" href="#collapse3t" aria-expanded="false" aria-controls="collapse3t">
+ <small>Erste Schritte</small></a>
+ </h3>
+ </div>
+ <div id="collapse3t" class="card-body collapse">
+ <p>
+ Eine Projektwebseite kann entweder aus einer einzelnen Seite oder aber aus mehreren Seiten mit einem Auswahlmenü bestehen.
+ Falls der Name eines Templates mit "simple" beginnt, handelt es sich um ein Template mit einer einzigen Seite. Die allgemeine Struktur eines Templates sieht wie folgt aus:
+
+ </p>
+ <img src="/img/help/content_public.jpg"/>
+ <p><em>assets</em> Ordner: In diesem Ordner platzieren Sie alle Dateien, die alle Ihre Seiten des gitlab templates gemeinsm haben. Hier kommen zum Beispiel persönliche Avatare oder Partnerlogos in die entsprechenden Unterordner (images, logos).</p>
+ <p><em>home</em> Ordner: Dies ist der Standardordner für Ihre Hauptseite.</p>
+ <p><em>settings.js</em>: In dieser Datei wählen Sie die Einstellungen für Ihre gitlab-Seite.</p>
+ <p>Sie sollten einige dieser Dateien anpassen.</p>
+ <img src="/img/help/content_public_colors.jpg"/>
+ <p>Rot: Diese Dateien sollten nicht geändert werden.</p>
+ <p>Orange: Diese Dateien sollten durch eigene Datein mit dem selben Dateinamen ersetzt werden. Ob Dateien ersetzt werden müssen, hängt vom Template ab.</p>
+ <p>Grün: Diese Dateien können Sie ändern</p>
+ <p>Blau: In diese Ordner können Sie zusätzliche Dateien platzieren. In den assets-Ordner zum Beispiel Bilder, Logos etc.; in den template-Ordner Ihr eigenes css, javascript oder weitere Dateien.</p>
+ <p>
+ Um unsere Vorlage zu benutzen, müssen Sie folgende Schritte ausführen:
+ </p>
+ <ol>
+ <li> Anpassen der Einstellungen in settings.js
+ <p>
+ Klicken Sie dazu im Ordner <em> public </em> auf die Datei <em> settings.js </em> und editieren Sie die Datei.
+ </p>
+ <img src="/img/help/select_settings_generic.png" width="95%"/>
+ <p>
+ Hier sehen Sie die Standardwerde für Soziale Netzwerke und persönliche Webseiten eines Teilnehmers sowie den Standardavatar. Es wird empfohlen, diese Werte nicht zu ändern, aber Sie können weitere Soziale Netzwerke hinzufügen.
+ </p>
+ <img src="/img/help/default_settings.png"/>
+ <p>Diese Schalter kontrollieren, welche Teile der gitlab-Seite angezeigt werden sollen. Wenn Sie also beispielsweise nur eine einzige Seite haben, benötigen Sie kein Menü und können den Wert für 'menu' auf OFF stellen.</p>
+ <img src="/img/help/switches.png"/>
+ <p>Hier ändern Sie das Projektlogo. Das Logo wird am oberen Rand der Seite mittig angezeigt. Wenn der Schalter für 'project logo' auf OFF steht, wird es nicht angezeigt.</p>
+ <img src="/img/help/pr_logo.png"/>
+ <p>Hier ändern Sie den Projektnamen. Wenn der Schalter auf 'OFF' steht, wird kein Projektname angezeigt.</p>
+ <img src="/img/help/pr_name.png"/>
+ <p>Hier ändern Sie das Menü Ihrer gitlab-Seite. Ein Menü kann entweder auf einen Unterordner/ template verweisen oder aber auf einen externen Link, z.B. eine Demo. Sie können Menüeinträge hinzufügen oder entfernen. Das Menü wird mit dem Schalter 'OFF' verborgen.
+ Vergessen Sie nicht den Schrägstrich am Ende eines Menülinks, wenn dieser auf einen Ordner zeigt.
+ </p>
+ <img src="/img/help/menu.png"/>
+ <p>Hier ändern Sie die Teilnehmenden. Sie können die Standardwerte für Soziale Netzwerke (diese beinhalten die HFT-Kanäle) oder Ihr eigenen Profile verwenden. Sie können auf Ihre persönliche Webseite verlinken. Sie können soziale Netzwerke hinzufügen oder entfernen. Sie können auch einen persönlichen Avatar oder den Standard-Avatar (DEFAULT.avatar) verwenden.
+ </p>
+ <img src="/img/help/partic.png"/>
+ <p>Hier ist ein Beispiel mit zwei Teilnehmenden:
+ </p>
+ <img src="/img/help/partic2.png"/>
+ <p>
+ Hier ändern Sie die Fußzeilenlogos z.B. zu denen von Projektpartnern. Wenn Sie das Logo nicht mit einer externen Webseite verlinken wollen, verwenden Sie EMPTY_LINK als Wert für href. Der Titel title wird bei Mouse-Hover über dem Logo erscheinen.
+ </p>
+ <img src="/img/help/f_logos.png"/>
+ <p>
+ Klicken Sie anschließend auf <em> commit changes </em>, um die Änderungen zu speichern.
+ </p>
+
+ <img src="/img/help/edit_settings_generic.png" width="95%"/>
+
+ </li>
+ </ol>
+ </div>
+ </div>
+ <br/>
+ <div class="card">
+ <div class="card-header">
+ <h3 class="card-title">
+ <a class="collapsed" data-toggle="collapse" href="#collapse4t" aria-expanded="false" aria-controls="collapse4t">
+ <small>Avatar hinzufügen</small></a>
+ </h3>
+ </div>
+ <div id="collapse4t" class="card-body collapse">
+ <p> Um einen persönlichen Avatar hinzuzufügen:
+ <ol>
+ <li>
+ Öffnen Sie den Ordner <em> public/assets/images </em>
+ </li>
+ <li>
+ Klicken Sie auf das + im Oberen Bereich, und anschließend auf <em> Upload File </em>
+ </li>
+ <li>
+ Wir empfehlen, dass das Bild quadratisch oder im Porträtformat ist. Zudem empfehlen wir keine allzu großen Bilder (>500px) hochzuladen.
+ </li>
+ </ol>
+ </p>
+ </div>
+ </div>
+ <br/>
+ <div class="card">
+ <div class="card-header">
+ <h3 class="card-title">
+ <a class="collapsed" data-toggle="collapse" href="#collapse5t" aria-expanded="false" aria-controls="collapse5t">
+ <small>Logo hinzufügen</small></a>
+ </h3>
+ </div>
+ <div id="collapse5t" class="card-body collapse">
+ <p> Um ein eigenes Projektlogo zum Projekt hinzuzufügen, müssen Sie folgende Schritte ausführen:
+ <ol>
+ <li>
+ Öffnen Sie den Ordner <em> public/assets/logos </em>
+ </li>
+ <li>
+ Klicken Sie auf das + im Oberen Bereich, und anschließend auf <em> Upload File </em>
+ <img src="/img/help/publicplus.png" width="95%"/>
+ </li>
+ <li>
+ <p>
+ Das Logo sollte quadratisch mit einer Auflösung von 300x300 pixel sein.
+ </p>
+ </li>
+ <li>
+ Fügen Sie die gewünschte Datei hinzu und klicken Sie auf <em> Upload File </em>
+ <img src="/img/help/upload_logo.png" width="95%"/>
+ </li>
+ <li>
+ Öffnen Sie nun im Ordner <em> public </em> die Datei <em> settings.js </em> und editieren diese.
+ <p>
+ In der Zeile mit <em>projectLogo</em> schreiben Sie nun DATEINAME in die Anführungszeichen, um den Pfad zum Logo anzugeben. Ein Klick auf <em> Commit changes </em> speichert die Datei.
+ </p>
+ <img src="/img/help/pr_logo.png"/>
+ </li>
+ <li>
+ Nun erscheint auf all Ihren Seiten das Projektlogo neben dem Logo der Hochschule.
+ </li>
+ </ol>
+ </p>
+ </div>
+ </div>
+ <br/>
+ <div class="card">
+ <div class="card-header">
+ <h3 class="card-title">
+ <a class="collapsed" data-toggle="collapse" href="#collapse6t" aria-expanded="false" aria-controls="collapse6t">
+ <small>Neue Seite hinzufügen</small></a>
+ </h3>
+ </div>
+ <div id="collapse6t" class="card-body collapse">
+ <p>
+ Um Ihrem Projekt neue Seiten hinzuzufügen, führen Sie folgende Schritte aus:
+ <ol>
+ <li>
+ Gehen Sie in den templates-Ordner und editieren Sie die Datei index.html. Wählen Sie den gesamten Text in dieser Datei aus und kopieren ihn. Dann Klicken Sie auf <em>cancel</em>.
+ </li>
+ <li>
+ Klicken Sie im Ordner <em> public </em> auf das +, das sich oben neben dem Pfad befindet
+ <img src="/img/help/publicplus.png" width="95%"/>
+ </li>
+ <li>
+ Klicken Sie dort auf <em> New File </em>
+ </li>
+ <li>Fügen Sie den Text, den Sie kopiert haben, ein</li>
+ <li>
+ Geben Sie die Dateinamen index.html (<b> wichtig: </b> Endung .html)
+
+ <img src="/img/help/editnewpage.png" width="95%"/>
+ </li>
+ <li>
+ Nun können Sie noch den Inhalt der Seite anpassen. Wenn Sie mit dem Inhalt der Seite zufrieden sind, speichern Sie sie durch Klick auf <em> Commit changes </em>
+ </li>
+ <li>
+ Ihre Seite wird nun automatisch auf den Server übertragen und ist unter folgender Adresse erreichbar:
+ <p>https://transfer.hft-stuttgart.de/pages/EIGENTUEMER/PROJEKTNAME/DATEINAME</p>
+ </li>
+ </ol>
+ </p>
+ </div>
+ </div>
+ <br/>
+
+ <div class="card">
+ <div class="card-header">
+ <h3 class="card-title">
+ <a class="collapsed" data-toggle="collapse" href="#collapse7t" aria-expanded="false" aria-controls="collapse7t">
+ <small>simple_raw Vorlage</small></a>
+ </h3>
+ </div>
+ <div id="collapse7t" class="card-body collapse">
+ <p>Dies is eine Vorlage mit einer einzigen Seite. Um den Inhalt anzupassen, ändern Sie die Datei index.html.</p>
+ </div>
+ </div>
+
+ <br/>
+
+ <div class="card">
+ <div class="card-header">
+ <h3 class="card-title">
+ <a class="collapsed" data-toggle="collapse" href="#collapse8t" aria-expanded="false" aria-controls="collapse8t">
+ <small>simple_thesis Vorlage</small></a>
+ </h3>
+ </div>
+ <div id="collapse8t" class="card-body collapse">
+ <p>
+ Diese Vorlage hat eine einzelne Seite und ist für die Präsentation einer Studienarbeit (Bachelor- / Masterarbeit) gedacht. Im Home-Ordner müssen Sie die Dateien für Ihre Titelseite und die pdf Ihrer Arbeit austauschen. Klicken Sie dazu auf den 'Replace'-Knopf
+ <img src="/img/help/cover_thesis.png" width="95%"/>
+ Anschließend müssen in der Datei index.html Ihr Name, das Jahr etc. angepasst werden.
+ </p>
+ </div>
+ </div>
+
+ <br/>
+
+ <div class="card">
+ <div class="card-header">
+ <h3 class="card-title">
+ <a class="collapsed" data-toggle="collapse" href="#collapse9t" aria-expanded="false" aria-controls="collapse9t">
+ <small>generic Vorlage</small></a>
+ </h3>
+ </div>
+ <div id="collapse9t" class="card-body collapse">
+ <p>
+ Wenn Sie die generic Vorlage wählen, finden Sie den zusätzlichen Ordner tempaltes. In diesem Ordner finden Sie die für Unterseiten verfügbaren Vorlagen.
+ Um eine solche Vorlage für eine Unterseite zu nutzen, kopieren Sie den Ordner aus templates/<template name> und kopieren Ihn unter neuem Namen in Ihrem root-Ordner. Bitte beachten Sie, dass dies nicht in Gitlabs Webclient geschehen kann, sondern Sie dazu lokal auf Ihren Rechner arbeiten müssen.
+ Wenn Sie nur den Inhalt der Datei index.html im Ordner templates/<template name > kopieren wollen, klicken Sie auf den 'Datei kopieren' Button:
+ <img src="/img/help/copy_content.png" width="95%"/>
+ Die Startseite deutet dabei immer auf den Ordner home, wenn Sie also die Startseite ändern wollen, müssen Sie den Ordner in 'home' umbenennen.
+ </p>
+ <img src="/img/help/generic.png"/>
+ </div>
+ </div>
+
+ </div>
+ </div>
</div>
- </div>
+ </div>
+
</div>
</div>
diff --git a/help/gitlab.html b/help/gitlab.html
index 18f21a602258a8e4b42fbd5e0bdf9c7efa1238a0..bc42162f949bae75882bce4d2e0511d669a8f5ab 100644
--- a/help/gitlab.html
+++ b/help/gitlab.html
@@ -16,34 +16,34 @@
<body>
- <div style="background-color: #dadada;">
+ <div class="background_dadada">
- <div class="container" style="background-color: #ffffff;margin-bottom: 30px;">
+ <div class="container background_ffffff margin_bottom_30">
<div class="row">
</div>
</div>
- <div id="Gitlab_Text" style="margin-top: 40px;margin-bottom: 30px;">
- <div class="container" style="background-color: #ffffff;">
- <div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+ <div id="Gitlab_Text" class="margin_top_bottom">
+ <div class="container background_ffffff">
+ <div class="padding_top_bottom">
<div class="col-lg-12">
- <h2 class="d-flex flex-column flex-shrink-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Gitlab</strong></h2>
+ <h2 class="d-flex flex-column flex-shrink-1 justify-content-lg-start text-center mailinglist_heading"><strong>Gitlab</strong></h2>
</div>
- <div class="col-auto flex-row flex-grow-1 flex-fill" style="background-color: #ffffff;">
+ <div class="col-auto flex-row flex-grow-1 flex-fill background_ffffff">
<p><a href="https://de.wikipedia.org/wiki/GitLab">GitLab</a> ist eine umfangreiche Webanwendung zur Versionsverwaltung für Softwareprojekte auf Basis von <a href="https://de.wikipedia.org/wiki/Git">Git</a> die auch Wiki-Funktionen und Issue Tracking bietet. Das Transferportal der HFT-Stuttgart betreibt eine eigene GitLab-Instanz für die Hochschule für Technik Stuttgart und ihre Kooperationspartner unter einer Open-Access-Lizenz.
</p>
</div>
- <a class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap order-3 mb-auto justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto"
- role="button" style="background-color: #E0001B;" href="https://transfer.hft-stuttgart.de/gitlab/explore/projects"><strong>Zugriff auf Gitlab</strong></a>
+ <a class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap order-3 mb-auto justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto background_e0001b"
+ role="button" href="https://transfer.hft-stuttgart.de/gitlab/explore/projects"><strong>Zugriff auf Gitlab</strong></a>
</div>
</div>
</div>
- <div id="help_Text" style="margin-top: 10px;margin-bottom: 30px;">
- <div class="container" style="background-color: #ffffff;">
- <div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+ <div id="help_Text" class="margin_middle">
+ <div class="container" class="background_ffffff">
+ <div class="padding_top_bottom">
<div class="col-lg-12">
- <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Hilfestellung zu Gitlab</strong></h2>
+ <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center mailinglist_heading" ><strong>Hilfestellung zu Gitlab</strong></h2>
</div>
- <div class="col-auto" style="background-color: #ffffff;">
+ <div class="col-auto" class="background_ffffff">
<div class="help">
<div class="card">
<div class="card-header">
@@ -52,7 +52,7 @@
<small>Möchten Sie die Projektinhalte ansehen oder herunterladen?</small></a>
</h3>
</div>
- <div id="collapse1" class="card-body collapse" style="">
+ <div id="collapse1" class="card-body collapse">
<p>
Dann klicken Sie auf diesen
<a href="https://transfer.hft-stuttgart.de/gitlab/explore/projects"><i class="fas fa-chevron-right">Link zu den Gitlab-Projekten</i></a>
@@ -70,7 +70,7 @@
<small>Möchten Sie zu einem Projekt beitragen?</small></a>
</h3>
</div>
- <div id="collapse2" class="card-body collapse" style="">
+ <div id="collapse2" class="card-body collapse">
<p>
Sie können mittels Issues dem Projekteigentümer eine Rückmeldung geben bzw. einen Fehler melden.
Darüberhinaus können Sie sich auch aktiv beteiligen. Dazu müssen Sie im Portal als Nutzer
@@ -120,7 +120,7 @@
bereitzustellen?</small></a>
</h3>
</div>
- <div id="collapse3" class="card-body collapse" style="">
+ <div id="collapse3" class="card-body collapse">
<p>
Vorraussetzung dazu ist, dass Sie aktives oder ehemaliges Mitglied der Hochschule für Technik sind,
d.h. eine (noch) gültige HFT-Emailadresse haben, und zudem im Portal als Nutzer registriert sein.
@@ -152,6 +152,21 @@
Erstellen Sie dann in Gitlab ein neues Projekt durch Klicken auf den grünen New Project-Knopf
und anschließendem Befolgen der Eingabemaske von Gitlab.
</li>
+ <li>
+ Um eine optimale Sichtbarkeit des Projekts zu ermöglichen, MUSS jedes Projekt eine kurze Projektbeschreibung und ein Bild/Logo haben.
+ </li>
+ <ul>
+ <li>
+ Um dem Projekt eine Projektbeschreibung hinzuzufügen, füllen Sie bitte beim Anlegen des Projekts das Feld <b>Project description</b> aus.
+ <img src="/img/help/projectlist-add-desc.png" width="85%" class="borderblackblock"/>
+ </li>
+ <li>
+ Um ein Bild/Logo hinzuzufügen, gehen Sie bitte in Ihrem Projekt auf <i>"Settings --> General"</i> und laden Sie das Bild/Logo unter <b>Project avatar</b> hoch.
+ <img src="/img/help/projectlist-setting-general.png" width="85%" class="borderblackblock"/>
+ <img src="/img/help/projectlist-add-avatar.png" width="85%" class="borderblackblock"/>
+ </li>
+ </ul>
+
</ol>
<p>
Weitere Hilfestellung zum Anlegen von Projekten in Gitlab finden Sie in der <a href="https://docs.gitlab.com/ee/gitlab-basics/create-project.html" target="_blank">Gitlab-Dokumentation</a>.
@@ -169,7 +184,7 @@
</div>
</div>
</div>
- <div class="container" style="background-color: #ffffff;margin-bottom: 30px;">
+ <div class="container background_ffffff margin_bottom_30">
<div class="row">
</div>
</div>
diff --git a/help/hpc.html b/help/hpc.html
new file mode 100644
index 0000000000000000000000000000000000000000..e7be6c5c0bfa88a7ffac4ac31b7cb0a2b65550d3
--- /dev/null
+++ b/help/hpc.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+ <title>Hilfe: Gitlab-Pages</title>
+ <link rel="stylesheet" href="/css/bootstrap.min.css">
+ <link rel="stylesheet" href="/css/m4lab.css">
+ <link rel="stylesheet" href="/fonts/font-awesome.min.css">
+ <link rel="stylesheet" href="/fonts/ionicons.min.css">
+ <link rel="stylesheet" href="/css/Testimonials.css">
+ <link rel="stylesheet" href="/css/help.css">
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
+</head>
+
+<body>
+
+ <div style="background-color: #dadada;">
+
+ <div class="container" style="background-color: #ffffff;margin-bottom: 30px;">
+ <div class="row">
+ </div>
+ </div>
+ <div id="help_Text" style="margin-top: 10px;margin-bottom: 30px;">
+ <div class="container" style="background-color: #ffffff;">
+ <div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+ <div class="col-lg-12">
+ <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Arbeiten mit der Hochleistungsrechenplattform</strong></h2>
+ </div>
+ <div class="col-auto" style="background-color: #ffffff;">
+ <div class="help">
+ <div class="card">
+ <div class="card-header">
+ <h3 class="card-title">
+ <a class="collapsed" data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
+ <small>Zugang zum Dienst</small></a>
+ </h3>
+ </div>
+ <div id="collapse1" class="card-body collapse" style="">
+ <p>
+ Um Zugang zum High Performance Computing zu bekommen, muss man sich beim jeweiligen Anbieter einer HPC Plattform registrieren. In unserem Fall können sich Mitglieder der HFT beim KIT registrieren, welches den vom Land Baden-Württemberg unterstützen HPC Cluster betreibt. Folgen Sie bitte diesem Link um sich zu <a href="https://wiki.bwhpc.de/e/BwUniCluster_2.0_User_Access" target="_blank">registrieren</a>.
+ </p>
+ <img style="width:100%" src="/img/hpc/bwhpc.jpg" alt="hpc picture here">
+ </div>
+ </div>
+ <br/>
+ <div class="card">
+ <div class="card-header">
+ <h3 class="card-title">
+ <a class="collapsed" data-toggle="collapse" href="#collapse2" aria-expanded="false" aria-controls="collapse1">
+ <small>Anbinden an den HPC Dienst</small></a>
+ </h3>
+ </div>
+ <div id="collapse2" class="card-body collapse" style="">
+ <p>
+ Um nach erfolgreicher Registrierung den HPC Dienst für Berechnungen nutzen zu können, muss man eine Verbindung zum HPC Cluster aufbauen. Hier gibt es zwei unterschiedliche Möglichkeiten. Sie können entweder ein von uns bereitgestelltes Template verwenden oder Sie programmieren eine eigene Verbindung. Für beide Möglichkeiten finden Sie im weiteren Hilfestellung.
+ </p>
+ </div>
+ </div>
+ <br/>
+ <div class="card">
+ <div class="card-header">
+ <h3 class="card-title">
+ <a class="collapsed" data-toggle="collapse" href="#collapse3" aria-expanded="false" aria-controls="collapse3">
+ <small>Verwenden eines Templates zur Anbindung an den HCP Dienst</small></a>
+ </h3>
+ </div>
+ <div id="collapse3" class="card-body collapse" style="">
+ <p>Das Template beruht auf einen neuartigen Ansatz, eine solche Verbindung zum HPC Dienst mittels der Gitlab-CI/CD Funktionalität weitestgehend zu automatisieren. Weitere Hintergrundinformationen zu diesem Ansatz können Sie folgender Publikation entnehmen:
+ <br/><a href="https://dl.acm.org/doi/abs/10.1145/3421537.3421539" target="_blank">Sharif et al. 2020</a>
+ <br/>
+ Das Vorgehen gestaltet sich wie folgt:
+ <ol>
+ <li>Im Gitlab befindet sich das Beispielprojekt <a href="https://transfer.hft-stuttgart.de/gitlab/sharif/m4labhpc" target="_blank">test_m4labhpc</a>. Bitte kopieren Sie dieses in ein eigenes Gitlab Projekt.</li>
+ <li> Konfigurieren Sie das Projekt, indem Sie Angaben für alle vorbereiteten und kommentierten Felder in der Datei XYZ machen, die für eine erfolgreiche Verbindung zum HPC Cluster erforderlich sind. Die dazu benötigten Informationen umfassen dabei insbesondere:
+ <br/>
+ <ol class="innerlisthpchelp">
+ <li>Login Informationen zum HPC cluster </li>
+ <li>Angabe der benötigten Module</li>
+ <li>Angabe des Repositoriums welches Ihren Programmcode enthält </li>
+ <li>.....</li>
+
+ </ol>
+
+ <br/>
+ Welche Informationen das genau sind, entnehmen Sie bitte der Datei im Template sowie der <a href="https://hft-stuttgart.de" target="_blank">Dokumentation</a> des KIT zur Verwendung von HPC. Zur ersten Orientierung können auch die unten gezeigten Informationen zum Anbinden ohne Template dienen.
+
+
+
+ </li>
+ <li>Starten Sie ihre Berechnungen von Ihrer Commandozeile, indem Sie </li>
+ </ol>
+ </p>
+ </div>
+ </div>
+ <br/>
+ <div class="card">
+ <div class="card-header">
+ <h3 class="card-title">
+ <a class="collapsed" data-toggle="collapse" href="#collapse4" aria-expanded="false" aria-controls="collapse4">
+ <small>Anbindung an den HPC Dienst ohne Template</small></a>
+ </h3>
+ </div>
+ <div id="collapse4" class="card-body collapse" style="">
+ <p>
+ Für eine Anbindung ohne das o.g. Template müssen Sie nach dem Login auf dem HPC Cluster verschiedene Schritte selbständig ausführen. Eine Anleitung mit genauen Hinweisen finden Sie in der <a href="https://wiki.bwhpc.de/e/Batch_Jobs" target="_blank"> Dokumentation des HPC Clusters</a>, welche auf Aspekte wie den benötigten und unterstützten Softwaremodulen, Compiler, Libraries usw. eingeht. Das folgende Bild gibt Ihnen einen ersten Überblick.
+ </p>
+ <img style="width:100%" src="/img/hpc/nontemp.png" alt="non template appraoch">
+ </div>
+ </div>
+ <br/>
+ <div class="card">
+ <div class="card-header">
+ <h3 class="card-title">
+ <a class="collapsed" data-toggle="collapse" href="#collapse5" aria-expanded="false" aria-controls="collapse5">
+ <small>Ausführen einer Simulation</small></a>
+ </h3>
+ </div>
+ <div id="collapse5" class="card-body collapse" style="">
+ <p>
+ Detaillierte Informationen wie man Simulationen auf dem HPC Cluster ausführt können Sie dem BwHPC Best Practices <a href="https://wiki.bwhpc.de/e/BwHPC_Best_Practices_Repository" target="_blank" >Repositorium</a> entnehmen. Um HPC effizient nutzen zu können, empfehlen wir ausreichende Kenntnisse in den Bereichen parallel-programming, batch jobs, software modules, compiler, und numerical libraries. Auch hier finden Sie im genannten Best Practices Repositorium weitere Unterstützung in Form der HPC best practice guides (BPG).
+ </p>
+
+ </div>
+ </div>
+
+ <br/>
+
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="container" style="background-color: #ffffff;margin-bottom: 30px;">
+ <div class="row">
+ </div>
+ </div>
+ </div>
+</div>
+
+<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>-->
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+<script src="/js/headfoot.js"></script>
+</body>
+
+</html>
diff --git a/help/index.html b/help/index.html
index 2f553fc715e48e1c596d425a9218d522730ee517..1c597a4adad0d13971d703a8a076a649d6398a38 100644
--- a/help/index.html
+++ b/help/index.html
@@ -16,8 +16,8 @@
<body>
- <div style="background-color: #dadada;">
- <div class="container" style="background-color: #ffffff;margin-bottom: 30px;">
+ <div class="background_dadada">
+ <div class="container background_ffffff margin_bottom_30">
<div class="row">
<div class="col-md-12">
<h4 class="text-center">Hilfethemen Ãœbersicht</h4>
@@ -25,13 +25,13 @@
</div>
</div>
</div>
- <div id="gitlab" style="margin-top: 40px;margin-bottom: 30px;">
- <div class="container" style="background-color: #ffffff;">
- <div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+ <div id="gitlab" class="margin_top_40 margin_bottom_30">
+ <div class="container background_ffffff">
+ <div class="m_bottom_0 p_top_20 p_bottom_20">
<div class="col-lg-12">
- <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Gitlab</strong></h2>
+ <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center heading p_top_15"><strong>Gitlab</strong></h2>
</div>
- <div class="col-auto" style="background-color: #ffffff;">
+ <div class="col-auto background_ffffff">
<ul>
<li>
<a href="/help/gitlab.html" target="_blank"> Projektverwaltung mittels Gitlab </a>
@@ -45,13 +45,13 @@
</div>
</div>
- <div id="videoconference" style="margin-top: 10px;margin-bottom: 30px;">
- <div class="container" style="background-color: #ffffff;">
- <div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+ <div id="videoconference" class="m_top_10 margin_bottom_30">
+ <div class="container background_ffffff">
+ <div class="m_bottom_0 p_top_20 p_bottom_20">
<div class="col-lg-12">
- <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Videokonferenzen</strong></h2>
+ <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center heading p_top_15"><strong>Videokonferenzen</strong></h2>
</div>
- <div class="col-auto" style="background-color: #ffffff;">
+ <div class="col-auto background_ffffff">
<ul>
<li>
<a href="/help/jitsi.html" target="_blank"> Videokonferenzen über Jitsi</a>
@@ -62,13 +62,13 @@
</div>
</div>
- <div id="videoconference" style="margin-top: 10px;margin-bottom: 30px;">
- <div class="container" style="background-color: #ffffff;">
- <div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+ <div id="mailinglists" class="m_top_10 margin_bottom_30">
+ <div class="container background_ffffff">
+ <div class="m_bottom_0 p_top_20 p_bottom_20">
<div class="col-lg-12">
- <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Mailinglisten</strong></h2>
+ <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center heading p_top_15"><strong>Mailinglisten</strong></h2>
</div>
- <div class="col-auto" style="background-color: #ffffff;">
+ <div class="col-auto background_ffffff">
<ul>
<li>
<a href="/help/mailinglists.html" target="_blank"> Mailinglisten erstellen und verwalten</a>
@@ -78,6 +78,23 @@
</div>
</div>
</div>
+
+ <div id="hpc" class="m_top_10 margin_bottom_30">
+ <div class="container background_ffffff">
+ <div class="m_bottom_0 p_top_20 p_bottom_20">
+ <div class="col-lg-12">
+ <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center heading p_top_15"><strong>High Performance Computing</strong></h2>
+ </div>
+ <div class="col-auto background_ffffff">
+ <ul>
+ <li>
+ <a href="/help/hpc.html" target="_blank">Arbeiten mit der Hochleistungsrechenplattform</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
diff --git a/help/jitsi.html b/help/jitsi.html
index 7d2f9057cbc5d7f875d37827603585a35de663e5..fcc7515793e7e6108ad3b9b57190ffb2d438befe 100644
--- a/help/jitsi.html
+++ b/help/jitsi.html
@@ -16,35 +16,35 @@
<body>
- <div style="background-color: #dadada;">
- <div class="container" style="background-color: #ffffff;margin-bottom: 30px;">
+ <div class="background_dadada">
+ <div class="container background_ffffff margin_bottom_30">
<div class="row">
</div>
</div>
- <div id="Jitsi" style="margin-top: 40px;margin-bottom: 30px;">
- <div class="container" style="background-color: #ffffff;">
- <div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+ <div id="Jitsi" class="margin_top_40 margin_bottom_30">
+ <div class="container background_ffffff">
+ <div class="jisi_text">
<div class="col-lg-12">
- <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Jitsi</strong></h2>
+ <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center heading p_top_15"><strong>Jitsi</strong></h2>
</div>
- <div class="col-auto" style="background-color: #ffffff;">
+ <div class="col-auto background_ffffff">
<p>
Jitsi ist ein Open-Source-Videokonferenz-System für HFT-interne und externe Nutzer. Es ermöglicht, Videokonferenzen direkt im Browser abzuhalten. Wir empfehlen hierbei die Nutzung von Chrome auf einem Desktopsystem oder Laptop. Die Verwendung des Internet Explorers hierfür ist leider nicht möglich, da Jitsi über diesen nicht aufgerufen werden kann. Da die Daten-Hauptlast bei diesem System clientseitig getragen wird, raten wir von einer Nutzung auf mobilen Endgeräten ab.
</p>
</div>
</div>
- <a class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap order-3 mb-auto justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto"
- role="button" style="background-color: #E0001B;" href="https://telemeeting.hft-stuttgart.de"><strong>Zugang über das Transferportal</strong></a>
+ <a class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap order-3 mb-auto justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto background_e0001b"
+ role="button" href="https://telemeeting.hft-stuttgart.de"><strong>Zugang über das Transferportal</strong></a>
</div>
</div>
- <div id="usage" style="margin-top: 10px;margin-bottom: 30px;">
- <div class="container" style="background-color: #ffffff;">
- <div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+ <div id="usage" class="m_top_10 margin_bottom_30">
+ <div class="container background_ffffff">
+ <div class="jisi_text">
<div class="col-lg-12">
- <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Jitsi verwenden</strong></h2>
+ <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center heading p_top_15"><strong>Jitsi verwenden</strong></h2>
</div>
- <div class="col-auto" style="background-color: #ffffff;">
+ <div class="col-auto background_ffffff">
<ol>
<li>Beim Transferportal als Organisator anmelden</li>
<li>Videokonferenz über Jitsi eröffnen</li>
@@ -57,7 +57,7 @@
</div>
</div>
- <div class="container" style="background-color: #ffffff;margin-bottom: 30px;">
+ <div class="container background_ffffff margin_bottom_30">
<div class="row">
</div>
</div>
diff --git a/img/help/commit_settings_generic.png b/img/help/commit_settings_generic.png
new file mode 100644
index 0000000000000000000000000000000000000000..6ea7efb8d0a01edc58828db44ff5d39da438614c
Binary files /dev/null and b/img/help/commit_settings_generic.png differ
diff --git a/img/help/content_index_marked.png b/img/help/content_index_marked.png
index c54492a44508edb71cefdf6ad99d4cd3517cce61..316ea7d379cba0e3a3b8038c034a6c204d7bcb4a 100644
Binary files a/img/help/content_index_marked.png and b/img/help/content_index_marked.png differ
diff --git a/img/help/content_public.jpg b/img/help/content_public.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..1838b2dff9f221870bf3a9cea6a49050dda46df7
Binary files /dev/null and b/img/help/content_public.jpg differ
diff --git a/img/help/content_public.png b/img/help/content_public.png
deleted file mode 100644
index 1b1c9ab14457f56294b5c7985848db81173e64ff..0000000000000000000000000000000000000000
Binary files a/img/help/content_public.png and /dev/null differ
diff --git a/img/help/content_public_colors.jpg b/img/help/content_public_colors.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6b3d9bbbd2b5c97a7b16061c3be1959bfa01a449
Binary files /dev/null and b/img/help/content_public_colors.jpg differ
diff --git a/img/help/copy_content.png b/img/help/copy_content.png
new file mode 100644
index 0000000000000000000000000000000000000000..f1fd5ef300a1c98e03e6cba72bf5a48b27d3ed8c
Binary files /dev/null and b/img/help/copy_content.png differ
diff --git a/img/help/cover_thesis.png b/img/help/cover_thesis.png
new file mode 100644
index 0000000000000000000000000000000000000000..df87f42d9015b23821a77669d4d691619d277c83
Binary files /dev/null and b/img/help/cover_thesis.png differ
diff --git a/img/help/default_settings.png b/img/help/default_settings.png
new file mode 100644
index 0000000000000000000000000000000000000000..b5e8e805822308b06773ab1d8cc37dfadc0f0570
Binary files /dev/null and b/img/help/default_settings.png differ
diff --git a/img/help/edit_contact.png b/img/help/edit_contact.png
deleted file mode 100644
index 5b4c4c9730b01043c2cbac2010f06d883edbd8b0..0000000000000000000000000000000000000000
Binary files a/img/help/edit_contact.png and /dev/null differ
diff --git a/img/help/edit_settings.png b/img/help/edit_settings.png
deleted file mode 100644
index 18ee119d079e08e62554de1a83fcaff734a8e8df..0000000000000000000000000000000000000000
Binary files a/img/help/edit_settings.png and /dev/null differ
diff --git a/img/help/edit_settings_generic.png b/img/help/edit_settings_generic.png
new file mode 100644
index 0000000000000000000000000000000000000000..b7261e942f0ae2151324e7afe4e46c9f2ac4f81e
Binary files /dev/null and b/img/help/edit_settings_generic.png differ
diff --git a/img/help/editnewpage.png b/img/help/editnewpage.png
index eadd4b3632b0cac9325b7ec57e59942013b85488..e57f6e38f894269be8facf5ff9dfb5df3c8892f9 100644
Binary files a/img/help/editnewpage.png and b/img/help/editnewpage.png differ
diff --git a/img/help/f_logos.png b/img/help/f_logos.png
new file mode 100644
index 0000000000000000000000000000000000000000..620c58792b7d4362a93a322585038d94f93f96e2
Binary files /dev/null and b/img/help/f_logos.png differ
diff --git a/img/help/generic.png b/img/help/generic.png
new file mode 100644
index 0000000000000000000000000000000000000000..32497460abdfbbabe4f3f7538ab84d7c79e59dd7
Binary files /dev/null and b/img/help/generic.png differ
diff --git a/img/help/menu.png b/img/help/menu.png
new file mode 100644
index 0000000000000000000000000000000000000000..ada3a1dacaebd3bb64ab6900cd6be4ee214deeb1
Binary files /dev/null and b/img/help/menu.png differ
diff --git a/img/help/partic.png b/img/help/partic.png
new file mode 100644
index 0000000000000000000000000000000000000000..05041efcbf3b42e1f8986b8cb07fc203f9d286fb
Binary files /dev/null and b/img/help/partic.png differ
diff --git a/img/help/partic2.png b/img/help/partic2.png
new file mode 100644
index 0000000000000000000000000000000000000000..d4fccc4208f715a951d2116bd64da1301120eb8b
Binary files /dev/null and b/img/help/partic2.png differ
diff --git a/img/help/pr_logo.png b/img/help/pr_logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..aee979e10bb2620b29c4cf0ad0c153335af85e73
Binary files /dev/null and b/img/help/pr_logo.png differ
diff --git a/img/help/pr_name.png b/img/help/pr_name.png
new file mode 100644
index 0000000000000000000000000000000000000000..fe610d512c67cf464dea5762e3ce9e0d99dcd252
Binary files /dev/null and b/img/help/pr_name.png differ
diff --git a/img/help/publicplus.png b/img/help/publicplus.png
deleted file mode 100644
index ad42dbc56b96a2ab02f419b38398789a5a1da26f..0000000000000000000000000000000000000000
Binary files a/img/help/publicplus.png and /dev/null differ
diff --git a/img/help/publicplus_generic.png b/img/help/publicplus_generic.png
new file mode 100644
index 0000000000000000000000000000000000000000..23a7c042bf52ad74184a0f6194a4fe163055d6d2
Binary files /dev/null and b/img/help/publicplus_generic.png differ
diff --git a/img/help/select_contact.png b/img/help/select_contact.png
deleted file mode 100644
index a6727c813d12323aea54048b0e061861077b3947..0000000000000000000000000000000000000000
Binary files a/img/help/select_contact.png and /dev/null differ
diff --git a/img/help/select_settings.png b/img/help/select_settings.png
deleted file mode 100644
index b2a165fe361c0f2861e5d08c012022ca53523037..0000000000000000000000000000000000000000
Binary files a/img/help/select_settings.png and /dev/null differ
diff --git a/img/help/select_settings_generic.png b/img/help/select_settings_generic.png
new file mode 100644
index 0000000000000000000000000000000000000000..2996ce8341133885329a0791502a33961bcb54d6
Binary files /dev/null and b/img/help/select_settings_generic.png differ
diff --git a/img/help/settings_logo.png b/img/help/settings_logo.png
deleted file mode 100644
index 86c5424fb67a514985a518262c535ed7fdb0126f..0000000000000000000000000000000000000000
Binary files a/img/help/settings_logo.png and /dev/null differ
diff --git a/img/help/switches.png b/img/help/switches.png
new file mode 100644
index 0000000000000000000000000000000000000000..1e63429dad3898e9395d7b8da3e276031a783f41
Binary files /dev/null and b/img/help/switches.png differ
diff --git a/img/hpc/.gitkeep b/img/hpc/.gitkeep
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/img/hpc/acoustic.png b/img/hpc/acoustic.png
new file mode 100644
index 0000000000000000000000000000000000000000..6fd0a9fcd1fbd2663d8168168188468493aad396
Binary files /dev/null and b/img/hpc/acoustic.png differ
diff --git a/img/hpc/bwhpc.jpg b/img/hpc/bwhpc.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..f4504542c156caaeb6b282f738887b94f068b87d
Binary files /dev/null and b/img/hpc/bwhpc.jpg differ
diff --git a/img/hpc/concept.png b/img/hpc/concept.png
new file mode 100644
index 0000000000000000000000000000000000000000..d0da50cd3ec0e14b7519828caee293f34077bf53
Binary files /dev/null and b/img/hpc/concept.png differ
diff --git a/img/hpc/gm4lab.jpg b/img/hpc/gm4lab.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..c9f1ab6095faaf242419b7ae4738350e3711778a
Binary files /dev/null and b/img/hpc/gm4lab.jpg differ
diff --git a/img/hpc/nontemp.jpg b/img/hpc/nontemp.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..12201763618e7bc71ace543f2316dcabbb7736bd
Binary files /dev/null and b/img/hpc/nontemp.jpg differ
diff --git a/img/hpc/nontemp.png b/img/hpc/nontemp.png
new file mode 100644
index 0000000000000000000000000000000000000000..fecf186435d5856ad4f12215c7141c3f4e0e7387
Binary files /dev/null and b/img/hpc/nontemp.png differ
diff --git a/img/hpc/tempapproach.png b/img/hpc/tempapproach.png
new file mode 100644
index 0000000000000000000000000000000000000000..f4177c1155a3a6e50e3fcc1a58d85a6fb0a5778b
Binary files /dev/null and b/img/hpc/tempapproach.png differ
diff --git a/img/hpc/ucicity2021.png b/img/hpc/ucicity2021.png
new file mode 100644
index 0000000000000000000000000000000000000000..c1b6f52ef8ee5c3b846e405e983e3a186995f323
Binary files /dev/null and b/img/hpc/ucicity2021.png differ
diff --git a/index.html b/index.html
index e7e4963e5321d4d9ab93095c2f222ec10cf497f6..649889756c578064f7e6aa259f769aec880dc3e0 100755
--- a/index.html
+++ b/index.html
@@ -17,7 +17,7 @@
<div>
<div class="container">
<div class="row">
- <div class="col-md-12" style="margin-bottom: 40px;"><img class="mx-auto" src="/img/Forschung_team1.jpg" width="100%"></div>
+ <div class="col-md-12 margin_bottom_40"><img class="mx-auto" src="/img/Forschung_team1.jpg" width="100%"></div>
</div>
</div>
</div>
@@ -25,16 +25,15 @@
<div class="container">
<div class="row">
<div class="col-lg-1"></div>
- <div class="col-md-6 col-lg-4" style="padding-right: 5px;padding-left: 5px;"><img class="d-inline-flex d-lg-flex justify-content-center align-items-center align-content-center align-self-center justify-content-lg-center align-items-lg-start mx-auto" src="/img/Icon_Informationen_Verlauf.png" width="150" style="margin: 0px;">
- <h2 class="text-center"
- style="color: #708090;"><strong>Informationen bereitstellen</strong><br></h2>
+ <div class="col-md-6 col-lg-4 p_left_5 p_right_5"><img class="d-inline-flex d-lg-flex justify-content-center align-items-center align-content-center align-self-center justify-content-lg-center align-items-lg-start mx-auto m_0" src="/img/Icon_Informationen_Verlauf.png" width="150">
+ <h2 class="text-center heading"><strong>Informationen bereitstellen</strong><br></h2>
<p class="text-left">Über das Transferportal können Sie <strong>Informationen</strong> und <strong>Daten</strong>, <strong>Dokumentationen</strong> und <strong>Software-Code</strong> von Open-Source Projekten an HFT-interne und externe Partner sowie
der breiten Öffentlichkeit zur Verfügung stellen. <br><br>Hierfür stehen eine Projektübersicht, ein Wiki, ein Ablagesystem für Dateien sowie die Nutzung unseres <a href="https://transfer.hft-stuttgart.de/gitlab/explore/projects" target="_blank"><strong>GitLab-Dienstes</strong></a> zur Softwareentwicklung bereit. <br></p>
</div>
<div class="col-lg-2"></div>
- <div class="col-md-6 col-lg-4" style="padding-right: 5px;padding-left: 5px;"><img class="d-flex d-lg-flex justify-content-center align-items-center align-content-center align-self-center justify-content-lg-center align-items-lg-start mx-auto" src="/img/Icon_Zusammenarbeiten_%20Verlauf.png" width="150px" style="margin: 0px;padding: 0px;">
+ <div class="col-md-6 col-lg-4 p_left_5 p_right_5"><img class="d-flex d-lg-flex justify-content-center align-items-center align-content-center align-self-center justify-content-lg-center align-items-lg-start mx-auto m_0 p_0" src="/img/Icon_Zusammenarbeiten_%20Verlauf.png" width="150px">
<h2
- class="text-center" style="color: #708090;"><strong>Zusammenarbeiten und Austauschen</strong><br></h2>
+ class="text-center heading"><strong>Zusammenarbeiten und Austauschen</strong><br></h2>
<p class="text-left">Für die Zusammenarbeit mit Projektpartnern können Sie verschiedene <a href="./videoconference.html"><strong>Videokonferenz-Systeme</strong></a> nutzen. Wir stellen sowohl für Mitglieder der HFT als auch für externe
Nutzer Möglichkeiten bereit.<br><br>Bleiben Sie im Kontakt mit Ihren Projektpartnern: Über unsere <a href="./mailinglists"><strong>Mailinglisten</strong></a> können Sie sich schnell zu Ihren Projektthemen austauschen. Kommunizieren
Sie Projektneuheiten und aktuelle<br>Anlässe an Ihre Nutzergruppe.<br></p>
@@ -43,27 +42,27 @@
</div>
</div>
</div>
-<div style="margin-top: 40px;margin-bottom: 40px;">
- <div style="background-color: rgba(255,255,255,0);">
+<div class="margin_top_40 margin_bottom_40">
+ <div class="background_ffffff">
<div class="container">
<div class="row">
- <div class="col-md-4 col-lg-1" style="margin-top: -0;padding-top: 0px;"></div>
- <div class="col-md-4 col-lg-10" style="background-color: #f2f2f2;margin-top: 0px;padding-top: 20px;padding-bottom: 20px;">
- <h2 class="text-center" style="color: #708090;"><strong>Neues Projekt anlegen</strong></h2>
- <p class="text-center">Im Transferportal der HFT Stuttgart können Sie die Inhalte Ihrer Projekte ablegen, bearbeiten und darstellen. </p><button class="btn btn-primary btn-lg d-inline-flex d-lg-flex justify-content-center align-items-center align-content-center align-self-center justify-content-lg-center align-items-lg-end mx-auto" type="button" style="background-color: #E0001B;filter: invert(0%);"><a href="/project" style="color:white"><strong>Zur Projektübersicht</strong></a></button></div>
+ <div class="col-md-4 col-lg-1 m_top_0 p_top_0"></div>
+ <div class="col-md-4 col-lg-10" class="index_neues_projekt">
+ <h2 class="text-center heading"><strong>Neues Projekt anlegen</strong></h2>
+ <p class="text-center">Im Transferportal der HFT Stuttgart können Sie die Inhalte Ihrer Projekte ablegen, bearbeiten und darstellen. </p><button class="btn btn-primary btn-lg d-inline-flex d-lg-flex justify-content-center align-items-center align-content-center align-self-center justify-content-lg-center align-items-lg-end mx-auto" type="button" class="index_project_overview"><a href="/project" class="color_white"><strong>Zur Projektübersicht</strong></a></button></div>
<div class="col-md-4 col-lg-1"></div>
</div>
</div>
</div>
</div>
<div>
- <div style="background-color: #708090;">
+ <div class="background_708090">
<div class="container">
<div class="row">
<div class="col-md-4 col-lg-2"></div>
<div class="col-md-4 col-lg-8">
- <div style="background-color: #feffff;margin: 0px;padding: 60px;padding-top: 20px;padding-bottom: 20px;"><img class="d-flex d-lg-flex justify-content-center justify-content-lg-center align-items-lg-start mx-auto" src="/img/Logo_TV1.png" width="100px" style="padding-bottom: 35px;">
- <h2 class="text-center" style="color: #708090;"><strong>Transferportal</strong></h2>
+ <div class="index_foot_message"><img class="d-flex d-lg-flex justify-content-center justify-content-lg-center align-items-lg-start mx-auto p_bottom_35" src="/img/Logo_TV1.png" width="100px">
+ <h2 class="text-center heading"><strong>Transferportal</strong></h2>
<p class="text-center">Das Transferportal entsteht in einem Teilprojekt der Innovativen <a href="https://www.hft-stuttgart.de"><strong>Hochschule für Technik Stuttgart</strong></a>. Im <a href="https://www.hft-stuttgart.de/forschung/innovative-hochschule-m4-lab"><strong>Innovationslabor M4_LAB</strong></a> wird das Transferportal als eine Webpräsenz entwickelt, welches Wissen, Lösungen und Dienste für HFT-Mitglieder, externe Partner und die allgemeine Öffentlichkeit bereitstellt.<br><br>Es ergänzt die Informationen der allgemeinen
HFT-Webseite durch konkrete Ergebnisse aus Forschung und Entwicklung, verfügbar in verschiedenster Form wie beispielsweise Daten, Dokumentationen und Software-Code.<br><br>Zudem stellt es Kollaborationsmittel für Projektpartner
und später auch Partizipationsmöglichkeiten für die breite Öffentlichkeit bereit.</p>
diff --git a/info_hpc.html b/info_hpc.html
new file mode 100644
index 0000000000000000000000000000000000000000..fc2e76ec0690f17feeb37da2ea5eef952b13b708
--- /dev/null
+++ b/info_hpc.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+ <title>Infos zur Hochleistungsrechnen</title>
+ <link rel="stylesheet" href="/css/bootstrap.min.css">
+ <link rel="stylesheet" href="/css/m4lab.css">
+ <link rel="stylesheet" href="/fonts/font-awesome.min.css">
+ <link rel="stylesheet" href="/fonts/ionicons.min.css">
+ <link rel="stylesheet" href="/css/Testimonials.css">
+ <link rel="stylesheet" href="/css/help.css">
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
+</head>
+
+<body>
+
+ <div style="background-color: #dadada;">
+
+ <div class="container" style="background-color: #ffffff;margin-bottom: 30px;">
+ <div class="row">
+ </div>
+ </div>
+ <div id="Gitlab_Text" style="margin-top: 40px;margin-bottom: 30px;">
+ <div class="container" style="background-color: #ffffff;">
+ <div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+ <div class="col-lg-12">
+ <h2 class="d-flex flex-column flex-shrink-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Hochleistungsrechnen</strong></h2>
+ </div>
+ <div class="col-auto flex-row flex-grow-1 flex-fill" style="background-color: #ffffff;">
+ <p> Das Hochleistungsrechen (englisch: high-performance computing, HPC) ist eine Technologie, die Rechenarbeiten ermöglicht, welche einen hohen Bedarf an Rechenleistung oder Speicherkapazität haben. Somit können umfangreiche Modelle, Algorithmen oder auch Simulationen in deutlich kürzerer Zeit ausgeführt werden als es auf herkömmlichen Computersystemen möglich ist.
+
+ Das Land BW stellt unter Beteiligung mehrerer Universitäten und Hochschulen – darunter auch der HFT Stuttgart – eine Hochleistungsrechenplattform bereit, den BW HPC Cluster.
+
+ </p>
+ </div>
+ <a class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap order-3 mb-auto justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto"
+ role="button" style="background-color: #E0001B;" href="https://www.bwhpc.de/"><strong>Zugriff auf die Hochleistungsrechnenplatform</strong></a>
+ </div>
+ </div>
+ </div>
+
+ <div id="Projects_Text" style="margin-top: 10px;margin-bottom: 30px;">
+ <div class="container" style="background-color: #ffffff;">
+ <div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+ <div class="col-lg-12">
+ <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Beispielprojekte der HFT Stuttgart auf der Hochleistungsrechnenplatform</strong></h2>
+ </div>
+ <div class="col-auto" style="background-color: #ffffff;">
+ <div class="help">
+ <div class="card">
+ <div class="card-header">
+ <h3 class="card-title">
+ <a class="collapsed" data-toggle="collapse" href="#collapse7" aria-expanded="false" aria-controls="collapse7">
+ <small>HPC: Vehicle Detection using Machine Listening and Deep Learning</small></a>
+ </h3>
+ </div>
+ <div id="collapse7" class="card-body collapse" style="">
+ <p align="justify">
+ In einer Masterarbeit in der Akustikgruppe der HFT Stuttgart wurde für eine Beurteilung des Verkehrsaufkommens der Einsatz einer automatischen Erkennung von Straßengeräuschen wie Motoren, Passanten und Umweltgeräuschen untersucht. Durch Verwendung des maschinellen Lernens, genauer dem s.g. Deep Learning, sollten unterschiedliche Fahrzeuge anhand der akustischen Signale erkannt und unterschiedlichen Fahrzeugkategorien (z.B. Leicht-, Mittel-, Schwerfahrzeuge, Schienenfahrzeuge, Zweiräder) zu geordnet werden. Um die Berechnungszeit für das Deep Learning zu verkürzen, wurden die Berechnungen auf dem HPC Cluster durchgeführt, wobei mittels paralleler Programmierung eine Vielzahl von Rechenknoten auf dem Cluster genutzt wurden. Mehr Informationen bitte klicken Sie <a href="https://transfer.hft-stuttgart.de/pages/sharif/akustikimobi/home/" > hier</a>
+ </p>
+ <img style="width:100%" src="/img/hpc/acoustic.png" alt="template based approach">
+ </div>
+ </div>
+ </br>
+ <div class="card">
+ <div class="card-header">
+ <h3 class="card-title">
+ <a class="collapsed" data-toggle="collapse" href="#collapse5" aria-expanded="false" aria-controls="collapse5">
+ <small>Bewertung von Freitextfragen mit Neuronalen Netzwerken (in Arbeit)</small></a>
+ </h3>
+ </div>
+ <div id="collapse5" class="card-body collapse" style="">
+ <p align="justify">
+ In der Hochschullehre liefern häufige kleine Tests den Studierenden und Lehrenden wichtige Rückmeldung zum Lernstand, bedeuten aber auch zusätzlichen Zeitaufwand für die Korrektur. Daher gibt es schon länger Ansätze zur automatischen oder automatisch gestützten Bewertung von kurzen Freitext-Antworten. Wir prüfen, ob die im Natural Language Processing (NLP) hoch erfolgreichen transformerbasierten neuronalen Modelle auch eine Qualitätsverbesserung bei der automatisierten Bewertung von Freitexten liefern können.Der Trainingsaufwand für das Anpassen der existierenden Modelle an die konkrete Aufgabe übersteigt bei weitem das auf einem üblichen PC realistisch leistbare. Daher nutzen wir die Ressourcen von bwHPC.
+ </p>
+ </div>
+ </div>
+ <br/>
+ <div class="card">
+ <div class="card-header">
+ <h3 class="card-title">
+ <a class="collapsed" data-toggle="collapse" href="#collapse6" aria-expanded="false" aria-controls="collapse6">
+ <small>Kontextabhängiges Smart2Charge (in Arbeit)</small></a>
+ </h3>
+ </div>
+ <div id="collapse6" class="card-body collapse" style="">
+ <p align="justify">
+ Die Elektromobilität hat einen tiefgreifenden wirtschaftlichen und ökologiscen Einfluss auf unsere Gesellschaft. Ein Großteil der Transformation im Mobilitätssektor wird durch die Digitalisierung vorangetrieben, indem diese echtzeitfähige Interaktionen zwischen den unterschiedlichen Beteiligten, wie z.B. Fahrzeugnutzern und Infrastrukturbetreiber, ermöglicht. In einer Studie wird ein neues, auf dem s.g. Deep Reinforcement Learning basierendes Konzept für die Optimierung solcher Interaktionen und Entscheidungsprozessen zwischen den Beteiligten in einem Smart-Mobility Ecosystem untersucht. Der hierbei entwickelte Algorithmus löst dabei kontextbezogene, beschränkte Optimierungsprobleme zur Erfüllung von Anfragen der Beteiligten. Dabei lernt der Algorithmus von der Umgebung und den Interaktionen bis sich für den jeweils betrachteten Kontext ein optimales Gleichgewicht bei der Erfüllung der Anfragen einstellt.
+Um dieses rechenintensive Problem zu lösen, läuft der Algorithmus auf dem HPC Cluster unter Verwendung des oben genannten, bereit gestellten Templates.
+
+
+ </p>
+ <img style="width:100%" src="/img/hpc/ucicity2021.png" alt="casmart2charge">
+
+ </div>
+ </div>
+ <br/>
+
+
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+ <div class="container" style="background-color: #ffffff;margin-bottom: 30px;">
+ <div class="row">
+ </div>
+ </div>
+</div>
+
+<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>-->
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+<script src="/js/headfoot.js"></script>
+</body>
+
+</html>
diff --git a/info_partizipation.html b/info_partizipation.html
index bd001d0cf7ee81ae323c29d79aaadb5af2311feb..8a6a06d4c4f775653fbd99a9bada804c794325e2 100644
--- a/info_partizipation.html
+++ b/info_partizipation.html
@@ -25,10 +25,10 @@
</div>
<div id="Gitlab_Text" class="margin_top_30 margin_bottom_30">
<div class="container background_ffffff">
- <div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+ <div class="info_partizipation_text">
<div class="col-lg-12">
- <h2 class="d-flex flex-column flex-shrink-1 justify-content-lg-start text-center"
- style="padding-top: 15px;color: #708090;"><strong>Beteiligungsplattform</strong></h2>
+ <h2 class="d-flex flex-column flex-shrink-1 justify-content-lg-start text-center heading p_top_15">
+ <strong>Beteiligungsplattform</strong></h2>
</div>
<div class="col-auto flex-row flex-grow-1 flex-fill background_ffffff">
<p> Die im M4_Lab entwickelte Beteiligungsplattform soll den Bürgern ermöglichen ihre Meinung in
@@ -36,20 +36,19 @@
Entwicklungsstadium.
</p>
</div>
- <a class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap order-3 mb-auto justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto"
- role="button" style="background-color: #E0001B;"
+ <a class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap order-3 mb-auto justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto background_e0001b"
+ role="button"
href="https://transfer.hft-stuttgart.de/partizipation/#/"><strong>Zugriff auf die
Beteiligungsplattform</strong></a>
</div>
</div>
</div>
- <div id="help_Text" style="margin-top: 10px;margin-bottom: 30px;">
+ <div id="help_Text" class="m_top_10 margin_bottom_30">
<div class="container background_ffffff">
- <div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+ <div class="info_partizipation_text">
<div class="col-lg-12">
- <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center"
- style="padding-top: 15px;color: #708090;"><strong>Funktionen der
- Beteiligungsplattform</strong></h2>
+ <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center heading p_top_15">
+ <strong>Funktionen der Beteiligungsplattform</strong></h2>
</div>
<div class="col-auto background_ffffff">
<div class="help">
@@ -143,13 +142,12 @@
</div>
</div>
</div>
- <div id="Projects_Text" style="margin-top: 10px;margin-bottom: 30px;">
+ <div id="Projects_Text" class="m_top_10 margin_bottom_30">
<div class="container background_ffffff">
- <div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+ <div class="info_partizipation_text">
<div class="col-lg-12">
- <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center"
- style="padding-top: 15px;color: #708090;"><strong>Projekte auf der
- Beteiligungsplattform</strong></h2>
+ <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center heading p_top_15">
+ <strong>Projekte auf der Beteiligungsplattform</strong></h2>
</div>
<div class="col-auto background_ffffff">
<div class="help">
diff --git a/jira.html b/jira.html
index 5305eb6a5987a26d024e1ed071cbcaa007228de1..808f4e9283b44d390edc5270b6c9483aa5ed9244 100644
--- a/jira.html
+++ b/jira.html
@@ -17,14 +17,14 @@
<div>
<div class="container">
<div class="row">
- <div class="col-md-12" style="margin-bottom: 40px;"><img class="mx-auto" src="/img/Aufgabenmanagement.png" width="100%"></div>
+ <div class="col-md-12 margin_bottom_40"><img class="mx-auto" src="/img/Aufgabenmanagement.png" width="100%"></div>
</div>
</div>
</div>
<div>
<div class="container">
<div class="row">
- <div class="col-md-12" style="margin-bottom: 30px;">
+ <div class="col-md-12 margin_bottom_30">
<h4 class="text-center">Das Transferportal bietet eine Möglichkeit zum Aufgabenmanagement innerhalb eines Projektes an. Dieses Angebot richtet sich insbesondere an Kollaborationsprojekte zwischen der HfT und externen Partnern.
</h4>
</div>
@@ -34,18 +34,18 @@
<div>
- <div id="Jira Text" style="background-color: #dadada;margin-top: 40px;">
+ <div id="Jira Text" class="background_dadada margin_top_40">
<div class="container">
- <div class="row" style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
- <div class="col-lg-12" style="background-color: #feffff;">
- <h2 class="d-flex flex-column flex-shrink-1 order-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Jira</strong></h2>
+ <div class="row" class="m_bottom_0 p_top_20 p_bottom_20">
+ <div class="col-lg-12 background_ffffff">
+ <h2 class="d-flex flex-column flex-shrink-1 order-1 justify-content-lg-start text-center heading p_top_15"><strong>Jira</strong></h2>
</div>
- <div class="col-auto col-md-4 col-lg-6 flex-row flex-grow-1 flex-fill order-1" style="background-color: #ffffff;">
+ <div class="col-auto col-md-4 col-lg-6 flex-row flex-grow-1 flex-fill order-1 background_ffffff">
<p>Jira ist ein System der Firma Atlassian zum operativen Projektmanagement. Es bietet vielfältige Möglichkeiten des Aufgaben-, Prozess- und Anforderungsmanagements.</p>
<p>Über das Transferportal bieten wir eine Instanz für Projekte an, die darüber ihre Prozesse und Workflows steuern und abwickeln können.</p>
</div>
- <div class="col-auto col-md-4 col-lg-6 text-center flex-row flex-grow-1 flex-fill justify-content-between flex-wrap order-2" style="background-color: #ffffff;">
- <div class="justify-content-between order-2" style="background-color: rgba(255,255,255,0);">
+ <div class="col-auto col-md-4 col-lg-6 text-center flex-row flex-grow-1 flex-fill justify-content-between flex-wrap order-2 background_ffffff">
+ <div class="justify-content-between order-2">
<p class="text-left d-flex d-md-flex flex-row flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-start align-content-start align-self-start flex-wrap order-1 justify-content-md-left align-items-md-start justify-content-lg-start">
Wichtige Features umfassen dabei:
<ul class="text-left">
@@ -55,26 +55,26 @@
<li>Vernetzung mit unserem Werkzeug zum <a href="/confluence.html">Wissensaustausch</a>
</ul>
</p>
- </div><a class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap order-3 mb-auto justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto"
- role="button" style="background-color: #E0001B;" href="https://transfer.hft-stuttgart.de/jira/"><strong>Zugang über das Transferportal</strong></a></div>
+ </div><a class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap order-3 mb-auto justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto background_e0001b"
+ role="button" href="https://transfer.hft-stuttgart.de/jira/"><strong>Zugang über das Transferportal</strong></a></div>
</div>
</div>
</div>
- <div id="Access_Text" style="background-color: #dadada;margin-top: 0px;">
+ <div id="Access_Text" class="background_dadada m_top_0">
<div class="container">
- <div class="row" style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
- <div class="col-lg-12" style="background-color: #ffffff;">
- <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Zugang</strong></h2>
+ <div class="row" class="m_bottom_0 p_top_20 p_bottom_20">
+ <div class="col-lg-12 background_ffffff">
+ <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center heading p_top_15"><strong>Zugang</strong></h2>
</div>
- <div class="col-md-4 col-lg-6" style="background-color: #ffffff;">
+ <div class="col-md-4 col-lg-6 background_ffffff">
<p>Um Zugang zu Jira zu erhalten, benötigen Sie einen Account am Portal. Dieser muss zunächst noch freigeschalten werden, wenden Sie sich dazu bitte an den Administrator.</p>
<p>Um ein Projekt in der Instanz zu platzieren, wenden Sie sich bitte ebenfalls an den Administrator, der mit Ihnen dann das weitere Vorgehen abstimmen wird.</p>
</div>
- <div class="col-md-4 col-lg-6 text-center" style="background-color: #ffffff;">
- <div class="order-2" style="background-color: rgba(255,255,255,0);">
+ <div class="col-md-4 col-lg-6 text-center background_ffffff">
+ <div class="order-2">
<p class="text-left d-flex d-md-flex flex-row flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-start align-content-start align-self-start flex-wrap order-1 justify-content-md-center align-items-md-start justify-content-lg-start">Weitere Hilfe zur Benutzung von Jira finden sich auf den <a href="https://confluence.atlassian.com/jira">Seiten der Firma Atlassian</a></p>
- </div><a class="btn btn-primary text-center d-lg-flex justify-content-center align-items-center align-content-center align-self-center align-items-lg-end mx-auto" role="button" style="background-color: #E0001B;" href="mailto:support-transfer@hft-stuttgart.de"><strong>Zugang über Admin anfragen</strong></a></div>
+ </div><a class="btn btn-primary text-center d-lg-flex justify-content-center align-items-center align-content-center align-self-center align-items-lg-end mx-auto background_e0001b" role="button" href="mailto:support-transfer@hft-stuttgart.de"><strong>Zugang über Admin anfragen</strong></a></div>
</div>
</div>
</div>
diff --git a/videoconference.html b/videoconference.html
index a68758fd0f3158a5ad6291e811862ea3b21b7f93..939371101624abfeb0b4756aba1961ad1dd2c6d1 100644
--- a/videoconference.html
+++ b/videoconference.html
@@ -18,7 +18,7 @@
<div>
<div class="container">
<div class="row">
- <div class="col-md-12" style="margin-bottom: 40px;"><img class="mx-auto" src="/img/Videokonferenzen.jpg"
+ <div class="col-md-12 margin_bottom_40"><img class="mx-auto" src="/img/Videokonferenzen.jpg"
width="100%"></div>
</div>
</div>
@@ -26,7 +26,7 @@
<div>
<div class="container">
<div class="row">
- <div class="col-md-12" style="margin-bottom: 30px;">
+ <div class="col-md-12 margin_bottom_30">
<h4 class="text-center">Das Transferportal bietet <strong>drei</strong> verschiedene Möglichkeiten
für Videokonferenzen:</h4>
</div>
@@ -36,15 +36,14 @@
- <div class="d-flex justify-content-lg-center align-items-lg-start flex-row"
- style="margin-right: 35px;margin-left: 35px;"></div>
+ <div class="d-flex justify-content-lg-center align-items-lg-start flex-row m_left_35 m_right_35"></div>
<div>
<div class="container">
<div
class="row flex-row justify-content-start align-items-start align-content-stretch align-self-stretch flex-wrap align-items-lg-start">
- <div class="col-md-6 text-center d-flex flex-column justify-content-center align-items-md-center"
- style="padding-right: 5px;padding-left: 0px;margin-top: 15px;">
- <h2 class="text-center" style="color: #708090;"><strong>Jitsi</strong><br></h2>
+ <div
+ class="col-md-6 text-center d-flex flex-column justify-content-center align-items-md-center videoconference_jitsi">
+ <h2 class="text-center heading"><strong>Jitsi</strong><br></h2>
<p class="text-center"><strong>Für alle Nutzer des Portals</strong><br><br></p>
<p class="text-left">Videokonferenzen direkt im Browser<br>OpenSource System<br></p>
<ul class="text-left">
@@ -53,14 +52,12 @@
<li>Chat-Funktion</li>
<li>Mobile Online-Meetings (App)</li>
</ul>
- <a class="btn btn-primary text-center flex-grow-1 flex-shrink-1 flex-fill justify-content-center"
- role="button"
- style="background-color: rgb(228,228,228);color: rgb(89,89,89);padding-bottom: 6px;width: 309px;margin-right: 0;margin-bottom: 15px;"
- href="#Jitsi_Text"><strong>Mehr Infos zu Jitsi</strong><i
+ <a class="btn btn-primary text-center flex-grow-1 flex-shrink-1 flex-fill justify-content-center videoconference_more_info"
+ role="button" href="#Jitsi_Text"><strong>Mehr Infos zu Jitsi</strong><i
class="fa fa-arrow-down d-lg-flex justify-content-lg-center"></i></a>
- <a class="btn btn-primary text-center d-lg-flex align-self-center justify-content-md-center align-items-md-end justify-content-lg-center align-items-lg-center justify-content-xl-center mx-auto"
- role="button" style="background-color: #E0001B;width: 309px;"
- href="https://telemeeting.hft-stuttgart.de/"><strong>Zugang über das Transferportal</strong></a>
+ <a class="btn btn-primary text-center d-lg-flex align-self-center justify-content-md-center align-items-md-end justify-content-lg-center align-items-lg-center justify-content-xl-center mx-auto background_e0001b width_309"
+ role="button" href="https://telemeeting.hft-stuttgart.de/"><strong>Zugang über das
+ Transferportal</strong></a>
</div>
<!-- <div class="col-md-6 col-lg-4 text-center flex-column justify-content-between"
style="padding-right: 5px;padding-left: 5px;margin-top: 15px;">
@@ -77,9 +74,9 @@
</ul><a class="btn btn-primary text-center flex-grow-1 flex-shrink-1 flex-fill justify-content-center" role="button" style="background-color: rgb(228,228,228);color: rgb(89,89,89);padding-bottom: 6px;width: 309px;margin-right: 0;margin-bottom: 15px;"
href="#AdobeConnect_Text"><strong>Mehr Infos zu Adobe Connect</strong><i class="fa fa-arrow-down d-lg-flex justify-content-lg-center"></i></a><a class="btn btn-primary text-center align-self-center mx-auto" role="button" style="background-color: #E0001B;width: 309px;"
href="https://webconf.vc.dfn.de/dfnvc/disco/index.html?entityID=https%3A%2F%2Fwebconf.vc.dfn.de%2Fshibboleth&return=https%3A%2F%2Fwebconf.vc.dfn.de%2FShibboleth.sso%2FLogin%3FSAMLDS%3D1%26target%3Dss%253Amem%253A91a559f6fe23a4cf2047736a346176afdde2eee7c554b2fb1cddbc35aea5aec6"><strong>Zugang über DFNconf</strong></a></div> -->
- <div class="col-md-6 text-center d-flex flex-column justify-content-center align-items-md-center"
- style="padding: 0;margin: 0;margin-right: 0px;margin-left: 0px;padding-right: 0px;padding-left: 5px;margin-top: 15px;">
- <h2 class="text-center" style="color: #708090;"><strong>GoToMeeting</strong><br></h2>
+ <div
+ class="col-md-6 text-center d-flex flex-column justify-content-center align-items-md-center videoconference_gotomeeting">
+ <h2 class="text-center heading"><strong>GoToMeeting</strong><br></h2>
<p class="text-center"><strong>Für Mitglieder der HFT</strong><br><br></p>
<p class="text-left">Videokonferenzen mit Lizenzanfrage über die Verwaltung<br></p>
<ul class="text-left">
@@ -90,14 +87,12 @@
<li>Aufzeichnung von Konferenzen und<br />Vorlesungen</li>
<li>Max. 150 Teilnehmer gleichzeitig</li>
</ul>
- <a class="btn btn-primary text-center flex-grow-1 flex-shrink-1 flex-fill justify-content-center"
- role="button"
- style="background-color: rgb(228,228,228);color: rgb(89,89,89);padding-bottom: 6px;width: 309px;margin-right: 0;margin-bottom: 15px;"
- href="#GoToMeeting_Text"><strong>Mehr Infos zu GoToMeeting</strong><i
+ <a class="btn btn-primary text-center flex-grow-1 flex-shrink-1 flex-fill justify-content-center videoconference_more_info"
+ role="button" href="#GoToMeeting_Text"><strong>Mehr Infos zu GoToMeeting</strong><i
class="fa fa-arrow-down d-lg-flex justify-content-lg-center"></i></a>
- <a class="btn btn-primary text-center d-lg-flex flex-column justify-content-center align-items-center align-content-center align-items-lg-center mx-auto"
- role="button" style="background-color: #E0001B;width: 309px;"
- href="mailto:support-transfer@hft-stuttgart.de"><strong>Zugang über Admin anfragen</strong></a>
+ <a class="btn btn-primary text-center d-lg-flex flex-column justify-content-center align-items-center align-content-center align-items-lg-center mx-auto background_e0001b width_309"
+ role="button" href="mailto:support-transfer@hft-stuttgart.de"><strong>Zugang über Admin
+ anfragen</strong></a>
</div>
</div>
</div>
@@ -107,15 +102,16 @@
<div>
- <div id="Jitsi_Text" style="background-color: #dadada;margin-top: 40px;">
+ <div id="Jitsi_Text" class="background_dadada margin_top_40">
<div class="container">
- <div class="row" style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
- <div class="col-lg-12" style="background-color: #feffff;">
- <h2 class="d-flex flex-column flex-shrink-1 order-1 justify-content-lg-start text-center"
- style="padding-top: 15px;color: #708090;"><strong>Jitsi</strong></h2>
+ <div class="row videoconference_jitsi_text">
+ <div class="col-lg-12 background_ffffff">
+ <h2
+ class="d-flex flex-column flex-shrink-1 order-1 justify-content-lg-start text-center heading p_top_15">
+ <strong>Jitsi</strong>
+ </h2>
</div>
- <div class="col-auto col-md-4 col-lg-6 flex-row flex-grow-1 flex-fill order-1"
- style="background-color: #ffffff;">
+ <div class="col-auto col-md-4 col-lg-6 flex-row flex-grow-1 flex-fill order-1 background_ffffff">
<p>Jitsi ist ein Open-Source-Videokonferenz-System für HFT-interne und externe Nutzer. Es
ermöglicht, Videokonferenzen direkt im Browser abzuhalten. Wir empfehlen hierbei die Nutzung
von Chrome auf einem Desktopsystem oder Laptop.
@@ -124,9 +120,9 @@
wird, raten wir von einer Nutzung auf
mobilen Endgeräten ab. <br /></p>
</div>
- <div class="col-auto col-md-4 col-lg-6 text-center flex-row flex-grow-1 flex-fill justify-content-between flex-wrap order-2"
- style="background-color: #ffffff;">
- <div class="justify-content-between order-2" style="background-color: rgba(255,255,255,0);">
+ <div
+ class="col-auto col-md-4 col-lg-6 text-center flex-row flex-grow-1 flex-fill justify-content-between flex-wrap order-2 background_ffffff">
+ <div class="justify-content-between order-2 background_ffffff">
<p
class="text-left d-flex d-md-flex flex-row flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-start align-content-start align-self-start flex-wrap order-1 justify-content-md-center align-items-md-start justify-content-lg-start">
Aktuelle Informationen und Tutorials zu Jitsi finden Sie auf den <a
@@ -136,9 +132,8 @@
</strong>
</p>
</div><a
- class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap order-3 mb-auto justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto"
- role="button" style="background-color: #E0001B;"
- href="https://telemeeting.hft-stuttgart.de/"><strong>Zugang über das
+ class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap order-3 mb-auto justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto background_e0001b"
+ role="button" href="https://telemeeting.hft-stuttgart.de/"><strong>Zugang über das
Transferportal</strong></a>
</div>
</div>
@@ -163,30 +158,31 @@
</div>
</div>
</div> -->
- <div id="GoToMeeting_Text" style="background-color: #dadada;margin-top: 0px;">
+ <div id="GoToMeeting_Text" class="background_dadada m_top_0">
<div class="container">
- <div class="row" style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
- <div class="col-lg-12" style="background-color: #ffffff;">
- <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center"
- style="padding-top: 15px;color: #708090;"><strong>GoToMeeting</strong></h2>
+ <div class="row videoconference_gotomeeting_text">
+ <div class="col-lg-12 background_ffffff">
+ <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center heading p_top_15">
+ <strong>GoToMeeting</strong>
+ </h2>
</div>
- <div class="col-md-4 col-lg-6" style="background-color: #ffffff;">
- <p>Auch über den Dienst GoToMeeting können Webkonferenzen<br />abgehalten werden. <br />Für eine
+ <div class=" col-md-4 col-lg-6 background_ffffff">
+ <p>Auch über den Dienst GoToMeeting können Webkonferenzen<br />abgehalten werden. <br />Für
+ eine
Nutzungsanfrage wenden Sie sich bitte an <a
href="mailto:support-transfer@hft-stuttgart.de">support-transfer@hft-stuttgart.de</a>.<br />
</p>
</div>
- <div class="col-md-4 col-lg-6 text-center" style="background-color: #ffffff;">
- <div class="order-2" style="background-color: rgba(255,255,255,0);">
+ <div class="col-md-4 col-lg-6 text-center background_ffffff">
+ <div class="order-2">
<p
class="text-left d-flex d-md-flex flex-row flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-start align-content-start align-self-start flex-wrap order-1 justify-content-md-center align-items-md-start justify-content-lg-start">
Aktuelle Informationen und Tutorials zu GoToMeeting finden Sie auf den<a
href="https://confluence.hft-stuttgart.de/display/DZ/Anleitung+GoToMeeting">Confluence-Seiten
der HFT Stuttgart (Intranet).</a></p>
</div><a
- class="btn btn-primary text-center d-lg-flex justify-content-center align-items-center align-content-center align-self-center align-items-lg-end mx-auto"
- role="button" style="background-color: #E0001B;"
- href="mailto:support-transfer@hft-stuttgart.de"><strong>Zugang über Admin
+ class="btn btn-primary text-center d-lg-flex justify-content-center align-items-center align-content-center align-self-center align-items-lg-end mx-auto background_e0001b"
+ role="button" href="mailto:support-transfer@hft-stuttgart.de"><strong>Zugang über Admin
anfragen</strong></a>
</div>
</div>