| Aktuelle Version |
Dein Text |
| 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 86: |
Zeile 86: |
|
| |
|
| Um neues Bild upzuloaden | | Um neues Bild upzuloaden |
| # Dateiname anpassen, mit letzten Datum (Format YYMMDD, also 170120 für den 20. Januar 2017) beginnen (nachdem eine Ankündigung obsolet wird)
| | 1. Dateiname anpassen, mit letzten Datum (Format YYMMDD, also 170120 für den 20. Januar 2017) beginnen (nachdem eine Ankündigung obsolet wird) |
| # Register "Medien", Kategorie "Bild", Verzeichnis "Stura", passenden Pfad (FSR, Projekt o.ä.) schrittweise auswählen oder erstellen
| | 2. Register "Medien", Kategorie "Bild", Verzeichnis "Stura", passenden Pfad (FSR, Projekt o.ä.) schrittweise auswählen oder erstellen |
| # auf die Schaltfläche (grünes Plus) "Hinzufügen" klicken
| | 3. auf die Schaltfläche (grünes Plus) "Hinzufügen" klicken |
| # im rechten Bereich mit der Schaltfläche "Auswählen" das Bild auswählen
| | 4. im rechten Bereich mit der Schaltfläche "Auswählen" das Bild auswählen |
| # mit der Schaltfläche "Upload" hochladen
| | 5. mit der Schaltfläche "Upload" hochladen |
|
| |
|
| ====== Publizieren ====== | | ====== Publizieren ====== |
|
| |
|
| Um neue Session anzulegen | | Um neue Session anzulegen (Es handelt sich mit Absicht um einen großen |
| : Es handelt sich mit Absicht um einen großen Block der kein Enddatum hat!
| | Block der kein Enddatum hat!) |
| # Zeitplan - Block markieren
| | 1. Zeitplan - Block markieren |
| # Inhalt bearbeiten
| | 2. Inhalt bearbeiten |
| # auf's Plus klicken - Sequenz passenden Namen geben - LayoutVorlage - Formatvorlage ändern (entweder ohne Laufschrift 1800x1020 oder mit laufschrift siehe Formatlink)
| | 3. auf's Plus klicken - Sequenz passenden Namen geben - LayoutVorlage - Formatvorlage ändern (entweder ohne Laufschrift 1800x1020 oder mit laufschrift siehe Formatlink) |
| #* bearbeiten - entsprechendes Bild über Reiter auswählen - übernehmen
| | - bearbeiten - entsprechendes Bild über Reiter auswählen - übernehmen |
| #* Inhalte speichern
| | - Inhalte speichern |
| : SEQUENZ IST EINGEFÜGT
| | SEQUENZ IST EINGEFÜGT |
|
| |
|
| Zeitgesteuertes Ereignis auswählen (wichtig!) | | Zeitgesteuertes Ereignis auswählen (wichtig!) |
| : im Normalfall 15 Sek. einstellen und Klick zur nächsten Sequenz (oder eben Sprung zum Anfang, kommt logischerweise auf Reihenfolge an, soll sich immer wiederholen)
| | im Normalfall 15 Sek. einstellen und Klick zur nächsten Sequenz (oder eben Sprung zum Anfang, kommt logischerweise auf Reihenfolge an, soll sich immer wiederholen) |
| : aktivieren anklicken
| | aktivieren anklicken |
| * Event speichern
| | Event speichern |
|
| |
|
| ====== De-Publizieren ====== | | ====== De-Publizieren ====== |
|
| |
|
| # Zeitplan anklicken
| | 1. Zeitplan anklicken |
| # Inhalt bearbeiten
| | 2. Inhalt bearbeiten |
| # Bild anwählen
| | 3. Bild anwählen |
| # auf das Minus klicken und Sicherheitsabfrage beantworten
| | 4. auf das Minus klicken und Sicherheitsabfrage beantworten |
| # Speichern & beenden
| | 5. Speichern & beenden |
|
| |
|
| ====== Abmelden bitte nicht vergessen! ====== | | ======= Abmelden bitte nicht vergessen! ======= |
|
| |
|
| Und keine Rückinformation an die Hersteller der eingestellten Anzeige ist hilfreich. Genauso wie den Termin für das Herausehmen zu setzen. | | Und keine Rückinformation an die Hersteller der eingestellten Anzeige ist hilfreich. Genauso wie den Termin für das Herausehmen zu setzen. |
| Zeile 123: |
Zeile 123: |
|
| |
|
| Hierher könnt ihr schreiben... | | Hierher könnt ihr schreiben... |
| | |
| * monitor@ | | * monitor@ |
| * oea@ | | * oea@ |
| Zeile 133: |
Zeile 134: |
| * Datum in Dateistruktur | | * Datum in Dateistruktur |
|
| |
|
| === 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 === |
| Zeile 339: |
Zeile 142: |
| 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: |
| Zeile 358: |
Zeile 160: |
|
| |
|
| == Weblinks == | | == Weblinks == |
| <s>
| |
| * [http://roadshow2.rz.htw-dresden.de:8802/ enlogic.show server- Webfrontend] | | * [http://roadshow2.rz.htw-dresden.de:8802/ enlogic.show server- Webfrontend] |
| </s>
| |
|
| |
|
| [[Kategorie:Öffentlichkeitsarbeit]] | | [[Kategorie:Projekt]] |