Commit ad493293 authored by Wolfgang Knopki's avatar Wolfgang Knopki
Browse files

Merge branch 'prepare_prod' into 'master'

Merging new template help section

See merge request !107
parents 7b89ecd4 dfd954cd
Pipeline #3804 passed with stage
in 13 seconds
......@@ -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"
......
......@@ -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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;Share</strong></a>
</div>
</div>
</div>
......
......@@ -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>
......
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;
}
......@@ -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;
}
favicon.ico

1.12 KB

This diff is collapsed.
......@@ -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>
......
<!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>
......@@ -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>
......
......@@ -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>
......
img/help/content_index_marked.png

40.3 KB | W: | H:

img/help/content_index_marked.png

12.2 KB | W: | H:

img/help/content_index_marked.png
img/help/content_index_marked.png
img/help/content_index_marked.png
img/help/content_index_marked.png
  • 2-up
  • Swipe
  • Onion skin
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment