Bearbeiten von „StuRa:Bildschirm im Foyer“

Zur Navigation springen Zur Suche springen
Warnung: Du bist nicht angemeldet. Deine IP-Adresse wird bei Bearbeitungen öffentlich sichtbar. Melde dich an oder erstelle ein Benutzerkonto, damit Bearbeitungen deinem Benutzernamen zugeordnet werden. Ein eigenes Benutzerkonto hat eine ganze Reihe von Vorteilen.

Die Bearbeitung kann rückgängig gemacht werden. Bitte prüfe den Vergleich unten, um sicherzustellen, dass du dies tun möchtest, und veröffentliche dann unten deine Änderungen, um die Bearbeitung rückgängig zu machen.

Aktuelle Version Dein Text
Zeile 41: Zeile 41:


=== Informationen Einreichen ===
=== Informationen Einreichen ===
 
<s>
* Die Dateien sollen bei [[website:stura/ref/oea/sns/monitor/]] oder nachrangig einem anderen erreichbaren Onlinespeicher abgelegt werden. ([[#Vorgaben für das Format zu Bildern]] beachtet!) Die Bilder werden anschließend auf dem Server (bei der [[HTW Dresden]]) für die Monitore abgelegt; Aber Redundanz erhöht die nachhaltige Verfügbarkeit für den StuRa und ggf. Transparenz für die Studentinnen.
* Die Dateien sollen bei [[website:stura/ref/oea/sns/monitor/]] oder nachrangig einem anderen erreichbaren Onlinespeicher abgelegt werden. ([[#Vorgaben für das Format zu Bildern]] beachtet!) Die Bilder werden anschließend auf dem Server (bei der [[HTW Dresden]]) für die Monitore abgelegt; Aber Redundanz erhöht die nachhaltige Verfügbarkeit für den StuRa und ggf. Transparenz für die Studentinnen.
* Per [[E-Mail]] an monitor@stura.htw-dresden.de mit verlinkten Dateien, Lauftext, Einstelldatum und ggf. Kontext-gebender Begründung senden.
* Per [[E-Mail]] an monitor@stura.htw-dresden.de mit verlinkten Dateien, Lauftext, Einstelldatum und ggf. Kontext-gebender Begründung senden.
Zeile 67: Zeile 67:
also erstmal zum Dateiformat der [http://wiki.stura.htw-dresden.de/index.php/Monitor_im_Foyer#Vorgaben_f.C3.BCr_das_Format_zu_Bildern Bilder]
also erstmal zum Dateiformat der [http://wiki.stura.htw-dresden.de/index.php/Monitor_im_Foyer#Vorgaben_f.C3.BCr_das_Format_zu_Bildern Bilder]


* PDF-Dateien sind zu vermeiden, <s>sieht scheiße aus</s>, da es nicht funktioniert
* PDF-Dateien sind zu vermeiden, sieht scheiße aus,
* <s>Filme (AVI, MP4, XVID, DIVX) haben in der Vergangenheit das Ding komplett lahmgelegt, also besser auch komplett sein lassen; weiß nicht ob es da was besseres gibt.</s>
* Filme (AVI, MP4, XVID, DIVX) haben in der Vergangenheit das Ding komplett lahmgelegt, also besser auch komplett sein lassen; weiß nicht ob es da was besseres gibt.
* bleibt im Wesentlichen: JPEG/JPG <s>und PNG</s>
* bleibt im Wesentlichen: JPEG/JPG und PNG


Und wie im Link beschrieben nur zwei Abmessungsvarianten:
Und wie im Link beschrieben nur zwei Abmessungsvarianten:
* <s>1920x960 px bei 72dpi + eine Laufschrift unten oder oben mit max. 35 Zeichen (z.B. eine URI, ugs. "Link")</s>
* 1920x960 px bei 72dpi + eine Laufschrift unten oder oben mit max. 35 Zeichen (z.B. eine URI, ugs. "Link")  
* 1920x1080 px bei 72dpi (gern auch höher. jedoch nicht mehr als max. 200)
* 1920x1080 px bei 72dpi  


====== Login ======
====== Login ======
Zeile 132: Zeile 132:
* in http://www.stura.htw-dresden.de/stura/ref/oea/sns/monitor/ als offline kennzeichnen
* in http://www.stura.htw-dresden.de/stura/ref/oea/sns/monitor/ als offline kennzeichnen
* Datum in Dateistruktur
* Datum in Dateistruktur
</s>


=== HTML/ CSS ===
=== Software ===
 
'''Quick-Guide zur Handhabung von HTML/ CSS für den Monitor'''
 
 
Es gibt zwei wesentliche Datein, um die Slideshow zu realisieren:
 
''index.html
style.css''
 
Wenn ihr etwas in den Datein veraendern wollt, nutzt am besten einen ganz einfachen Text-Editor. Sofern ihr euch mit anderweitigen HTML Programmen (etwa Adobe Dreamweaver oder Phase5) auskennt, nutzt ruhig diese.
 
''Index.html'' bildet lediglich das Grundgerüst, um später die Bilddateien in einem Loop anzuzeigen und gliedert sich in:
 
''<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="1800" >
<title>CSS Slideshow</title>
<link rel="stylesheet" href="style.css">
</head>''
 
Wobei der erste Meta-Tag die Zeichenkodierung für Unicode-Zeichen darstellt. Der zweite Meta-Tag gibt den Befehl nach einer bestimmten Anzahl von Sekunden die HTML neuzuladen. Auf Wunsch kann der Titel beliebig in ''<title>'' geändert werden, für die Slideshow allerdings nicht notwendig. Als letzter Tag findet sich noch eine Verlinkung zur CSS Datei, welche sich unbedingt im selben Ordner befinden, um Verlinkungsprobleme zu vermeiden.
 
Des Weiteren:
 
''<body>
 
<div class="container">
<div class="slider">
 
<div class="slide">
</div>
 
<div class="slide">
</div>
 
<div class="slide">
</div>
 
<div class="slide">
</div>
 
<div class="slide">
</div>
 
</div>
</div>
 
</body>''
 
Der Inhalt des Body bildet eine Art digitalen Dia-Projektor, der später zusammen mit den Verlinkungen in der CSS Datei die Inhalte anspielt. Der Tag ''<div class="container">'' stellt sozusagen die "Dia-Projektion" dar. Die untergeordneten div-Tags sind jeweils ein "Dia", welche zusammen als Bild-Schieber fungieren.
 
Der CSS- Teil kurz und knapp kommentiert:
 
@charset "utf-8";
'''/* CSS Document */'''
 
body
{
margin: 0;
padding: 0;
}
'''/* damit body im Vollbild angezeigt wird */'''
 
 
.container
{
width: 100%;
position: relative;
overflow-x: hidden;
}
'''/* "Diaprojektor" */'''
 
 
 
 
.slider
{
position: relative;
width: 500%;
animation: animate 120s linear infinite;
}
'''/* "Diaschieber" 500% da 5 Inhalte (100% pro Inhalt) */'''
 
 
.slide
{
position: relative;
width: 20%;
float: left;
height: 100vh;
}
'''/* "Dia" 20%, da ganze Slideshow 100% */'''
 
 
h1
{
margin: 0;
padding: 0;
position: absolute;
top: 50%;
transform: translate-Y (-50%);
text-align: center;
font-size: 6em;
width: 100%;
background: rgba(0,0,0,.6);
color: #fff;
font-family: sans-serif;
}
'''/* nicht relevant */'''
 
 
.slide
{
background-size: cover;
}
'''/* soll Anzeige des Dia regeln, funktioniert aktuell noch nicht,
deswegen Bedingung der Pixelmassen */'''
 
 
.slide:nth-child(1)
{
background: url(sommer.jpg);
}
 
.slide:nth-child(2)
{
background: url(sommer.jpg);
}
 
.slide:nth-child(3)
{
background: url(sommer.jpg);
}
 
.slide:nth-child(4)
{
background: url(sommer.jpg);
}
 
.slide:nth-child(5)
{
background: url(sommer.jpg);
}
 
'''/* je child eine Bilddatei (NAME.jpg), die Inhalte, die auf dem Bildschirm
erscheinen */'''
 
 
 
@keyframes animate
{
0%
{
left: 0;
}
16%
{
left: 0;
}
20%
{
left: -100%;
}
36%
{
left: -100%;
}
40%
{
left: -200%;
}
56%
{
left: -200%;
}
60%
{
left: -300%;
}
76%
{
left: -300%;
}
80%
{
left: -400%;
}
96%
{
left: -400%;
}
100%
{
left: 0;
}
}
'''/* die Animation ist 0% bis 100%; 0% bis -400% beschreibt die Position der "Dias" */'''


=== Daten ===
=== Daten ===
 
<s>
===== Vorgaben für das Format zu Bildern =====
===== Vorgaben für das Format zu Bildern =====


Im wesentlichen Im Format 16:9
Im wesentlichen Im Format 16:9


; Möglichkeit 1: <s> Bild mit Laufschrift
; Möglichkeit 1: Bild mit Laufschrift
Ein Bild (.jpeg, .png, ... ) 1920x960 px 72ppi + eine Laufschrift unten oder oben mit max. 35 Zeichen (z.B. eine URI, ugs. "Link")
Ein Bild (.jpeg, .png, ... ) 1920x960 px 72ppi + eine Laufschrift unten oder oben mit max. 35 Zeichen (z.B. eine URI, ugs. "Link")
</s>


; Möglichkeit 2:  
; Möglichkeit 2:  
Ein Bild (.jpeg, .png, ... ) 1920x1080 px 72ppi
Ein Bild (.jpeg, .png, ... ) 1920x1080 px 72ppi
</s>


== Bildschirm im Foyer der Hochschule ==
== Bildschirm im Foyer der Hochschule ==

Bitte beachte, dass alle Beiträge zu Wiki StuRa HTW Dresden von anderen Mitwirkenden bearbeitet, geändert oder gelöscht werden können. Reiche hier keine Texte ein, falls du nicht willst, dass diese ohne Einschränkung geändert werden können.

Du bestätigst hiermit auch, dass du diese Texte selbst geschrieben hast oder diese von einer gemeinfreien Quelle kopiert hast (weitere Einzelheiten unter StuRa HTW Dresden:Urheberrechte). ÜBERTRAGE OHNE GENEHMIGUNG KEINE URHEBERRECHTLICH GESCHÜTZTEN INHALTE!

Bitte beantworte die folgende Frage, um diese Seite speichern zu können (weitere Informationen):

Abbrechen Bearbeitungshilfe (wird in einem neuen Fenster geöffnet)
Abgerufen von „https://wiki.stura.htw-dresden.de/index.php?title=StuRa:Bildschirm_im_Foyer“