Commit 646a8ba1 authored by Axel Dürkop's avatar Axel Dürkop

Updates

parent a48b4d34
Pipeline #64556 passed with stages
in 1 minute and 8 seconds
......@@ -111,15 +111,9 @@ layout: default
<li>Diskussion: Dr. Ulrike Franke (Politikwissenschaftlerin, ECFR, Uni Oxford) und Johanna Polle
(Politikwissenschaftlerin, UHH)</li>
</ul>
<h3 id="textvertiefung">Textvertiefung</h3>
<p>Begleitend werden während des Semesters Texte online zur Verfügung gestellt, die in einer für die
Veranstaltung
eingerichteten Gruppe mit dem Tool <a target="_blank" href="https://web.hypothes.is/"><em>Hypothesis</em></a>
annotiert und diskutiert werden können. Allen
Interessierten
kann ein Zugang zu dieser Gruppe gewährt werden; eine Beteiligung an den Diskussionen und Annotationen ist
ausdrücklich gewünscht. Da es sich aber um keine offene Gruppe handelt, bitten wir um Anmeldung per Email an
lars.schmeink@hcu-hamburg.de oder axel.duerkop@tuhh.de</p>
<h3 id="textvertiefung">Kollaborative Textarbeit</h3>
<p>Begleitend werden während des Semesters Texte online zur Verfügung gestellt, die in einer für die Veranstaltung eingerichteten Gruppe gelesen und diskutiert werden können. Allen Interessierten kann ein Zugang zu dieser Gruppe gewährt werden; eine Beteiligung an den Diskussionen und Annotationen ist ausdrücklich gewünscht.</p>
<a class="button" href="/lesen-und-diskutieren-zugete.html">Mitmachen beim Lesen und Diskutieren!</a>
</div>
......@@ -168,7 +162,7 @@ layout: default
<article id="team">
<h1>Team</h1>
<h2>Team</h2>
<p>Das <em>tekethics</em>-Team erstellt und kuratiert offenes Bildungsmaterial zu aktuellen technischen Themen und
unterstützt mediendidaktisch die kritisch-konstruktive Auseinandersetzung mit ethischen Fragestellungen unserer
Zeit.</p>
......@@ -295,6 +289,32 @@ layout: default
</p>
</div>
</div>
<div class="resource-container">
<figure class="video">
<a target="_blank" href="https://www.youtube.com/playlist?list=PL2UvS33NZ0fdn2ZAEdJRD57ueig4Te6WS"><img style="max-width: 200px" src="/assets/images/tekethics-playlist-mirko.png" alt="Screenshot aus der Playlist" /></a>
</figure>
<div class="description">
<h3>tekethics - Begleitende Videos zum Booklet (en)</h3>
<p>
Dr. Mirko Garasic spricht über die Themen des Booklets (Playlist).
</p>
</div>
</div>
<div class="resource-container">
<figure class="video">
<a target="_blank" href="https://www.youtube.com/playlist?list=PL2UvS33NZ0fcZM4gCTKPbjHu9mXnZ5EnJ"><img style="max-width: 200px" src="/assets/images/tekethics-playlist-workshop.png" alt="Screenshot aus der Playlist" /></a>
</figure>
<div class="description">
<h3>tekethics - Vorträge des veranstaltungsbegleitenden Workshops (en)</h3>
<p>
Dr. Mirko Garasic, Prof. Dr. Mario De Caro und Dr. Steffen Steinert sprechen über ausgewählte philosophische Themen (Playlist).
</p>
</div>
</div>
</article>
</section>
\ No newline at end of file
......@@ -51,4 +51,4 @@ $on-laptop: 1050px !default;
// Import partials.
@import "partials/base", "partials/layout", "partials/timeline",
"partials/stoerer", "partials/team", "partials/events", "partials/resources";
"partials/stoerer", "partials/team", "partials/events", "partials/resources", "partials/lesen-und-diskutieren";
......@@ -3,9 +3,20 @@
padding: 20px;
margin-bottom: 40px;
a.button {
display: inline-block;
text-align: center;
padding: 10px;
border-radius: 5px;
background: #afd85c;
color: #003756;
margin-bottom: 15px 0;
}
#zugete-flyer {
border: 1px solid #ddd;
margin: 10px 0 20px 0;
width: 100%;
}
#bib-image {
......
......@@ -7,39 +7,36 @@
background-size: cover;
position: relative;
display: grid;
grid-template-rows:150px 220px 1fr 50px;
grid-template-columns:40% 20% 40%;
grid-template-rows: 150px 220px 1fr 50px;
grid-template-columns: 40% 20% 40%;
/* stoerer */
grid-template-areas:
"nav nav nav"
"headline headline headline"
"symbols symbols symbols"
". arrow ."
;
"nav nav nav"
"headline headline headline"
"symbols symbols symbols"
". arrow .";
/* ++++++ */
height: 950px;
@include media-query($on-palm) {
height: auto;
}
@include media-query($on-palm) {
grid-template-rows:170px 220px 1fr 50px;
grid-template-rows: 170px 220px 1fr 50px;
/* stoerer */
grid-template-areas:
"nav nav nav"
"headline headline headline"
"symbols symbols symbols"
". arrow ."
;
"nav nav nav"
"headline headline headline"
"symbols symbols symbols"
". arrow .";
/* ++++++ */
}
.navigation{
.navigation {
grid-area: nav;
transition: all 0.4s ease;
display: flex;
......@@ -47,12 +44,12 @@
position: fixed;
width: 70%;
padding-top: 2%;
top:0;
top: 0;
left: 50%;
transform: translateX(-50%);
#hoou_logo{
margin-top: .8rem;
#hoou_logo {
margin-top: 0.8rem;
height: 4rem;
}
......@@ -60,7 +57,7 @@
width: 90%;
}
.nav-wrapper{
.nav-wrapper {
display: flex;
width: 100%;
justify-content: space-between;
......@@ -73,18 +70,18 @@
flex-wrap: nowrap;
flex-direction: column;
#hoou_logo{
#hoou_logo {
margin-top: 0.5rem;
}
}
.logo{
.logo {
margin: 0.4rem 0;
height: 5rem;
}
}
&.scroll{
&.scroll {
z-index: 999;
box-sizing: border-box;
width: 100%;
......@@ -95,7 +92,7 @@
.page-link {
border-right: 2px solid $grey-color-light;
&:last-of-type{
&:last-of-type {
border: 0;
}
}
......@@ -107,7 +104,7 @@
}
}
h3{
h3 {
grid-area: headline;
align-self: center;
justify-content: center;
......@@ -116,11 +113,12 @@
font-style: italic;
font-weight: 600;
padding: 0;
margin: 0;
margin: 50px 0 50px 0;
line-height: 1.2em;
}
/* stoerer */
#stoerer{
#stoerer {
grid-area: stoerer;
justify-self: end;
margin-right: 15%;
......@@ -136,39 +134,39 @@
}
/* ++++++ */
.symbols_wrapper{
.symbols_wrapper {
grid-area: symbols;
align-self: start;
display:flex;
justify-content:space-around;
display: flex;
justify-content: space-around;
@include media-query($on-laptop) {
flex-wrap: wrap;
}
.symbolbox{
.symbolbox {
width: 280px;
justify-content: center;
display: flex;
flex-direction: column;
align-items: center;
&:hover{
&:hover {
text-decoration: none;
color: $hoou_gold;
}
span{
span {
margin-bottom: -50px;
.circle{
background-color:white;
border-radius:50%;
background-color: rgba(255,255,255,0.8);
.circle {
background-color: white;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.8);
}
}
h2{
background-color: rgba(255,255,255,0.8);
h2 {
background-color: rgba(255, 255, 255, 0.8);
padding: 2rem;
line-height: 1.5;
padding-top: 4.8rem;
......@@ -178,14 +176,14 @@
}
}
.arrowBox{
.arrowBox {
text-align: center;
grid-area: arrow;
.downArrow {
a{
a {
color: rgba($brand-color, 0.8);
&:hover{
&:hover {
color: $brand-color;
}
}
......@@ -193,14 +191,14 @@
}
}
nav{
nav {
line-height: $base-line-height * $base-font-size * 2.25;
.nav-trigger {
display: none;
}
.trigger{
.trigger {
display: flex;
height: 100%;
align-items: center;
......@@ -222,11 +220,11 @@ nav{
padding-right: 1rem;
border-right: 2px solid white;
&:last-of-type{
&:last-of-type {
border: 0;
}
&:hover{
&:hover {
color: $hoou_gold;
text-decoration: none;
}
......@@ -294,7 +292,7 @@ nav{
* Site content
*/
.video-wrapper{
.video-wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
......@@ -322,7 +320,7 @@ nav{
* Site footer
*/
footer{
footer {
background-color: $brand-color;
border-top: 2px solid lighten($brand-color, 15%);
display: flex;
......@@ -330,78 +328,78 @@ footer{
align-items: center;
padding: $spacing-unit 15%;
p{
p {
width: 30%;
color: white;
}
.logo-widget{
.logo-widget {
display: flex;
width: 50%;
justify-content: space-around;
a:first-child img{
a:first-child img {
height: 3rem;
}
a:last-child img{
a:last-child img {
height: 2.8rem;
}
}
a{
a {
@include relative-font-size(1);
line-height: 1;
color: white !important;
margin-bottom: 1rem;
&:hover{
&:hover {
color: $grey-color;
text-decoration: underline;
}
}
#footer-nav{
#footer-nav {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
@include media-query($on-laptop) {
flex-wrap: wrap;
a:first-child{
a:first-child {
margin-bottom: 2rem;
}
p{
p {
width: 100%;
}
.logo-widget{
.logo-widget {
flex-direction: column;
margin-top: 1rem;
}
#footer-nav{
#footer-nav {
align-items: flex-end;
}
}
@include media-query($on-palm) {
p, .logo-widget, #footer-nav{
p,
.logo-widget,
#footer-nav {
width: 100%;
}
.logo-widget{
.logo-widget {
align-items: center;
margin: 2rem 0;
}
#footer-nav{
#footer-nav {
flex-direction: row;
justify-content: space-around;
align-items: center;
......@@ -409,8 +407,6 @@ footer{
}
}
/**
* Page content
*/
......@@ -441,8 +437,6 @@ footer{
@include relative-font-size(1.5);
}
/**
* Posts
*/
......@@ -462,13 +456,19 @@ footer{
.post-content {
margin-bottom: $spacing-unit;
width: 100%;
.copy {
font-weight: bold;
}
h1,h2,h3,h4,h5 {
h1,
h2,
h3,
h4,
h5 {
color: darken($brand-color, 5%);
margin: 20px 0;
}
h1 {
......@@ -495,6 +495,7 @@ footer{
@include media-query($on-laptop) {
@include relative-font-size(1.125);
}
font-weight: 600;
}
ul li {
......@@ -503,7 +504,8 @@ footer{
.flex-list {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
justify-content: space-between;
ul {
}
......@@ -514,33 +516,32 @@ footer{
* Imprint
*/
#imprint-header{
#imprint-header {
background: $brand-color url(../images/LaborBG.jpg) no-repeat center -500px fixed;
background-size: cover;
padding-bottom: 10rem;
#hoou_logo{
#hoou_logo {
margin-top: 1.4rem;
height: 2.3rem;
}
.logo{
.logo {
margin: 0.6rem 0;
height: 4rem;
}
.imprint-wrapper{
.imprint-wrapper {
background-color: white;
display: flex;
justify-content: space-between;
padding: 0 15%;
.page-link {
border-right: 2px solid $grey-color-light;
@include relative-font-size(1.000);
@include relative-font-size(1);
&:last-of-type{
&:last-of-type {
border: 0;
padding-right: 0;
}
......@@ -551,22 +552,22 @@ footer{
padding: 0 2%;
}
@include media-query($on-palm){
@include media-query($on-palm) {
flex-wrap: nowrap;
flex-direction: column;
#hoou_logo{
#hoou_logo {
margin: 0.6rem 0;
}
.logo{
.logo {
margin-bottom: 0;
}
}
}
}
#info-box{
#info-box {
margin-top: 2rem;
background-color: $hoou_lightblue;
padding: 1.5rem;
......@@ -574,17 +575,17 @@ footer{
text-align: center;
font-weight: 600;
h3{
h3 {
display: inline-block;
margin-left: 1rem;
}
ul{
ul {
list-style-type: none;
margin: 0;
padding: 0;
li{
li {
display: block;
padding: 1rem;
text-align: center;
......@@ -595,10 +596,13 @@ footer{
}
}
#worldmap{
#worldmap {
margin: 1rem 0;
}
#start, #course, #team, #download {
#start,
#course,
#team,
#download {
margin-bottom: 80px;
}
\ No newline at end of file
}
.resource-container {
border: 2px solid #ddd;
display: flex;
flex-wrap: wrap;
padding: 8px 20px;
margin-bottom: 30px;
......@@ -28,7 +29,7 @@
}
a {
display: inline;
width: 350px;
// width: 350px;
text-align: center;
padding: 10px;
border-radius: 5px;
......
a.button {
display: inline-block;
text-align: center;
padding: 10px;
border-radius: 5px;
background: #afd85c;
color: #003756;
margin-bottom: 15px 0;
}
\ No newline at end of file
---
layout: imprint
---
<h1>Lesen und diskutieren über Zukunft, Gesellschaft und Technologie</h1>
Um den Raum eigener Fragestellung und Gedanken zu erweitern, werden zu jedem Film gemeinsam vertiefende Texte gelesen und online diskutiert.
## Wie richte ich meine Online-Lernumgebung ein?
### Annahme eines Alias
Wir schlagen vor, dass Sie sich einen Fantasienamen zulegen, mit dem Sie in unserer Veranstaltung online agieren. Ihr neuer Name kann helfen, online mutiger zu sein, sich zu trauen, die eigenen Gedanken im Internet zu äußern.
Nutzen Sie z.B. den Generator [Behind the Name](https://www.behindthename.com/random/). Mit [diesen Einstellungen](https://www.behindthename.com/random/random.php?number=2&sets=1&gender=u&surname=&showextra=yes&all=yes) erzeugen Sie schnell passable Ergebnisse. Selbstverständlich können Sie sich auch einfach so einen Namen ausdenken.
<a class="button" target="_blank" href="https://www.behindthename.com/random/random.php?number=2&sets=1&gender=u&surname=&showextra=yes&all=yes">Einen Alias generieren</a>
### Verantwortung übernehmen
Wir wissen, dass es **Mut** braucht, um die eigene Meinung und die eigenen Gedanken im Web zu äußern. Ihr Alias soll Ihnen dabei helfen. Selbstverständlich können Sie auch mit Ihrem wirklichen Namen agieren.
Wie auch immer, seien Sie bitte **respektvoll** anderen gegenüber. Freuen Sie sich darüber, wenn andere nicht Ihrer Meinung sind, denn dann können Sie sich im **Argumentieren üben**. Treten Sie aber gleichzeitig Hass, Verschwörungstheorien und jeglicher Form von Vorurteilen und Diskriminierung (Rassismus, Sexismus etc.) entschieden entgegen.
Melden Sie sich bei den Veranstaltern Lars Schmeink und Axel Dürkop, wenn Sie sich in der Diskussion unwohl fühlen.
### Aufnahme in die Lerngruppe
Schreiben Sie eine Mail an Lars Schmeink und Axel Dürkop, um in die Lerngruppe aufgenommen zu werden.
Schreiben Sie in der Mail,
- wie Ihr Fantasiename lautet
- wie Sie _wirklich_ heißen
- ob und wenn ja, zu welcher Hochschule Sie gehören
- was Sie an der Veranstaltung interessiert
<a class="button" target="_blank" href="mailto:axel.duerkop@tuhh.de;lars.schmeink@hcu-hamburg.de?subject=Ich möchte an der Veranstaltung teilnehmen!">Mail an Lars und Axel schreiben</a>
### Einrichtung und Nutzung von Hypothesis
Hypothesis ist ein freies und kostenloses Werkzeug, das die gemeinsame Diskussion an Texten im Browser ermöglicht. Verwenden Sie bei der erstmaligen Registrierung Ihren neuen Fantasienamen.
<a class="button" target="_blank" href="https://web.hypothes.is/start/">Bei Hypothesis registrieren</a>
Machen Sie sich vertraut mit den Funktionen von Hypothesis. [Ein englischsprachiger Artikel](https://web.hypothes.is/help/annotation-basics/) beschreibt die Oberfläche von Hypothesis sehr genau. Bei Problemen finden Sie Hilfe [auf der Website von Hypothesis](https://web.hypothes.is/help/).
[^1]: Hypothesis wird in den USA gehostet und [hält sich an die Anforderungen der DSGVO](https://web.hypothes.is/privacy/).
Um alle Texte der Veranstaltung schnell zugänglich zu haben und die Aktivität der Diskussion zu verfolgen, richten Sie im Folgenden noch das unterstützende Tool **Zocurelia** ein.
### Nutzung von Zocurelia
Zocurelia ist ein Tool, das Hypothesis-Diskussionen zu verschiedenen Texten übersichtlicher macht. Um Zocurelia zu verwenden, müssen Sie bei Hypothesis angemeldet sein.
<a class="button" target="_blank" href="https://zocurelia.com/de/list?groupID=2343885&list_collections=1">Ausgewählte Literatur auf Zocurelia ansehen</a>
### Weiterführende Literatur bei Zotero ansehen
Wir haben für Sie die gesamte Literatur von "Zukunft \| Gesellschaft \| Technologie" in einer offen zugänglichen Gruppe bei Zotero hinterlegt. Zotero ist ein freies Tool zum Verwalten wiss. Literatur und Medien.
Während bei Zocurelia nur die Texte angezeigt werden, die wir gemeinsam lesen und diskutieren wollen, finden Sie in der Zotero-Gruppe noch weiterführende Literatur.
<a class="button" target="_blank" href="https://www.zotero.org/groups/2343885/zukunft__gesellschaft__technologie/items">Weiterführende Literatur ansehen</a>
## Wie kann ich mit anderen an den Texten arbeiten?
Alle Interessierten können sich <a href="https://zocurelia.com/de/list?groupID=2343885&list_collections=1" target="_blank">unter diesem Link</a> an der Diskussion beteiligen.
Wir empfehlen Ihnen, immer über Zocurelia in die Textarbeit einzusteigen. Dort haben Sie alle Texte, an denen wir arbeiten, im Überblick und gelangen direkt zur Diskussion in Hypothesis. **Speichern Sie sich diesen Link am besten als Lesezeichen im Browser ab.**
<a class="button" target="_blank" href="https://zocurelia.com/de/list?groupID=2343885&list_collections=1">Auf Zocurelia an der Diskussion teilnehmen</a>
## Studien- und Prüfungsleistungen für Studierende der HafenCity Universität und der Technischen Universität Hamburg
Um für den Kurs an der HCU (Q-Studies) oder der TUHH (NTA) Credit Points zu erhalten, erwarten wir folgenden Studien- und Prüfungsleistungen von Ihnen. Wie bei anderen (regulären) Seminarveranstaltungen erwarten wir von Studierenden eine regelmäßige Teilnahme, eine kritisch-reflexive Vorbereitung des Lehrmaterials und eine aktive Beteiligung an den Diskussionen des Seminars. Auch wenn diese zum Teil in den Raum des Internet ausgelagert ist, gelten selbstverständlich die Regeln wissenschaftlicher Arbeit, wie auch die Regeln des respektvollen Umgang mit anderen Teilnehmenden.
### Studienleistung
- Anwesenheit (Einführungs- und Abschlussveranstaltung an der Uni, sieben Kinoabende): Wie bei anderen Veranstaltungen dürfen Sie max. 20% Fehlzeiten haben
- Anmeldung bei Hypothesis (weitere Tools: Zotero und Zocurelia)
- Aktive Teilnahme an den Diskussionen sowohl der vorbereitenden Texte als auch in den Expert\*innenrunden, mindestens:
- ein substantieller Beitrag zur Diskussion via Hypothesis pro Thema/Text
- ein Beitrag zu den Diskussionen mit den Expert\*innen im Laufe des Semesters
- Recherchieren Sie einen Text, der zur Library des Kurses bei Zotero für alle Interessierten hinzugefügt werden kann (Abgabe per Mail vor dem Abschlusstermin 27./28.01.2020)
- achten Sie auf die Wissenschaftlichkeit
- achten Sie auf die Zugangsbeschränkungen
- reflektieren Sie, warum der Text gut geignet ist bzw. welchen Beitrag er zur Diskussion leistet (ein kurzer Absatz in der Mail)
### Prüfungsleistung
- ein Essay (5-7 Seiten Textkorpus, zzgl. Abbildungen, Titelblatt, Bibliografie etc.) nach wissenschaftlichen Standards geschrieben und unter Bezug auf Sekundärliteratur, in dem Sie eines der behandelten Themen diskutieren