Die Zeitungsproduktion
|
|
- Mona Weiner
- vor 8 Jahren
- Abrufe
Transkript
1 HTW Chur FS15 Power of Content 20. Juli 2015 Die Zeitungsproduktion Projekt «explorativ und kreativ» Sybille Hofer 1 / 8
2 INHALTSVERZEICHNIS Workflow des gesammten Projekts...3 Erste Entwürfe (Skizzen)...3 Storyboard...4 Technsche Dokumentaton...7 Aufbau von index.html Scrollfunktion eigene JavaScript Funktion Sybille Hofer 2 / 8
3 WORKFLOW Workflow des gesammten Projekts 1. Recherche: Teilnahme an einer Führung beim Tages Anzeiger (Redaktion und Druckzentrum) 2. Konzeption: erste Skizzen und Aufsetzen der Story mit Fokus auf das Vorkommen der Informatik in den einzelnen Arbeitsschritten. 3. Design: Erstellung der grafischen Elemente (Mausicon, Computerbildschrim, Zeitungsbogen, Buttons, PopUps) und Umsetzung des Storyboards in Illustrator 4. Erlernen der Technik: Tutorial ( 5. Umsetzung der Site: Fokus auf Desktop, vorbereitet um in einem weiteren Schritt responsive gemacht zu werden Erste Entwürfe (Skizzen) Sybille Hofer 3 / 8
4 STORYBOARD Storyboard Startscreen Hier erfährt der User erstmal in welchem Rahmen das Projekt entstanden ist, um welches Thema es sich handelt und was ihn auf dieser Site erwartet: Die Zeitungsproduktion von A-Z. Aufgezeigt anhand eines Tagesablaufs. Von Redaktion über Druck bis Spedition. Timeline Sobald der User weiterscrollt (dazu aufgefordert durch das Mausicon), wechselt die Hintergrundfarbe zu Grün und eine Timeline erscheint. Mit der Redaktionssitzung, morgens um 9:00 Uhr, beginnt die Zeitungsproduktion. Redaktion Der Laptop symbolisiert die Redaktion. Bevor die Zeitung gedruckt werden kann, muss recherchiert, fotographiert, gezeichnet und geschrieben werden. Solange sich der User im Bereich mit grünem Hintergrund befindet, dreht sich alles um die Redaktion (9:00-23:15 Uhr) Scrollen des Users Beim Scrollen erscheinen Stück für Stück mehr Inhalte. Mit seiner Scrollgeschwindigkeit bestimmt der User also selbst, wie schnell er durch die Story hindurch navigieren will. Sybille Hofer 4 / 8
5 STORYBOARD Popup-Boxen In den automatisch erscheinenden Popup-Boxen erfährt der User um welchen Arbeitsschritt es sich handelt, was dort passiert und welche Rolle die Informatik dabei spielt. Bei manchen Arbeitsschritten können bei Interesse zusätzliche Informationen via den kleineren Button rechts unten aufgerufen werden. Arbeitsschritte Der Reihe nach erscheinen die Buttons, welche die verschiedenen Arbeitsschritte bei der Zeitungsproduktion symbolisieren. Meilensteine Während sich der User durch den Ablauf der Produktion scrollt, erscheinen ab und zu neue Zeitangaben auf der Timeline. Es wird kurz erklärt, was zu diesem Zeitpunkt geschieht (z.b. Mittagskonferenz, Redaktionsschluss etc.), danach gehts weiter mit der nächsten Arbeitsstation. Druck Sobald der User bei 23:15Uhr (Redaktionsschluss) ankommt, wechselt die Hintergrundfarbe zu blau und eine Zeitung erscheint. Diese symbolisiert den Druck, sprich alle Arbeitsschritte die nötig sind um die eigentliche Zeitung herzustellen. Sybille Hofer 5 / 8
6 STORYBOARD bis Spedition Auch in der Druck-Section werden alle Arbeitsschritte von Druckplattenproduktion über Bündelung bis hin zur Spedition Schritt für Schritt eingeblendet und erklärt. Impressum Ganz unten an der Seite stehen die Kontaktdaten inkl. Adresse damit der User die Möglichkeit hat, bei Fragen oder Anregungen sofort Kontakt aufzunehmen. Sybille Hofer 6 / 8
7 TECHNISCHE DOKUMENTATION Technsche Dokumentaton Aufbau von index.html <head> <body <header>: Die Zeitungsproduktion <section>: Redaktion <aside>: Timeline <!-- Icons --> <!-- PopUps --> </section> <section>: Druck <aside>: Timeline <!-- Icons --> <!-- PopUps --> </section> <footer>: Kontaktdaten <script>: alle JavaScript Dateien </body> Scrollfunktion Für die gewünschte Scrollfunktion habe ich die JavaScript Library scrollr.js ( com/prinzhorn/skrollr ) gewählt. Mit Scrollr kann man die numerischen CSS Eigenschaften jedes Elements für entsprechende Scrollpositionen definieren. Dafür müssen den Elementen im HTML Code Keyframes zugeordnet werden. Für mein Projekt habe ich jeweils die CSS Eigenschaft «opacity» definiert um die Elemente ein- und auszublenden. «data-1299-start» definiert den Startpunkt der Animation Pixel unterhalb der Oberkante der Seite. Bei 1300 Pixel ist die Animation komplett, sprich die Deckkraft des Elements beträgt 100%. Um dasselbe Element wieder auszublenden, benötigen wir erneut zwei Attribute. Bei «data start beginnt die Animation, bei «data-3370-start» ist sie zu Ende, sprich die Deckkraft beträgt wieder 0%. Scrollr bietet viele weitere Möglichkeiten um Keyframes zu setzen, diese sind in folgender Übersicht zusammengefasst. Sybille Hofer sybillehofer@gmx.ch 7 / 8
8 TECHNISCHE DOKUMENTATION eigene JavaScript Funktion Der «+»-Button bietet dem Nutzer die Möglichkeit, per Klick zusätzliche Informationen zum aktuellen Produktionsschritt einzublenden. Hierfür habe ich folgende JavaScript Funktion geschrieben. Wird der «trigger» (#druckerbtnmehr) geklickt, wird die Klasse «hidden» des «fensters» (#druckermehr) entfernt und das «div» mit dem zusätzlichen Text wird sichtbar. Bei erneutem Klicken des Buttons wird die Klasse «hidden» wieder hinzugefügt und das «div» somit ausgeblendet. Sybille Hofer 8 / 8