S C R E E N D E S I G N Screendesign und Templategestaltung für
Werbung
S C R E E N D E S I G N
Screendesign und Templategestaltung für Online-Journalisten
Einführungsveranstaltung für das 1. Semester, WS 2010/2011, Bernd Helfert
A) Screendesign - was ist das und wozu ist es gut?
B) Gestaltungsprinzipien online-journalistischer Produkte
C) Einfache Erstellung von Webpages und Templates
D) Trennung von Präsentation und Inhalt
E) Umgang mit Content Management Systemen
Das Ziel dieser Übungsstunden
Sie sollen Ihren Sinn für die Wirkung und die Benutzbarkeit redaktioneller
Websites schärfen (sprich: Design und Usability beachten) und Ihre Aufmerksamkeit
auf das Layout von Webseiten richten.
Sie sollen verstehen, wie redaktionelle Seiten aufgebaut sind, wie ein Layout
visuell "funktioniert" und wie Seiten- und Textformatierung per HTML (Hypertext
Markup Language) und CSS (Cascading Style Sheets) erzeugt wird.
Sie lernen das Konzept der Trennung von Inhalt und Präsentation kennen.
Folgende Übungen sollen Sie diesem Ziel näherbringen:
1
- Sie setzen sich bewußt mit der Wirkung und der Benutzbarkeit von Websites
auseinander.
2 - Sie erstellen und nutzen Accounts bei vorinstallierten Webdiensten
(Blogsoftware, Twitter, ...) zur Veröffentlichung Ihrer Inhalte und konfigurieren
diese für Ihre Zwecke.
3 - Sie erstellen beispielhaft Seiten per HTML und CSS, um die Präsentation von
Inhalten im Webbrowser zu verstehen.
4
- Sie lernen das Konzept der Trennung von Inhalt und Präsentation kennen, das
in CMS (content management systems)/Redaktionssystemen zum Tragen kommt.
Ziel dieser Übung ist NICHT
aus Ihnen Webdesigner oder Webprogrammierer zu machen,
denn das sind eigene Berufsbilder. Allerdings sollen Sie deren grundsätzliche
Werkzeuge kennenlernen.
Sie sollen lernen, von professionellen Entwicklern erarbeitete Systeme zu nutzen,
für Ihre Zwecke zu konfigurieren und ggf. gestalterisch anzupassen. Dieser Kurs
soll aus Ihnen keine Hobbywebseitenbastler machen, sondern Ihnen an einfachen
Beispielen die grundsätzliche Funktionsweise redaktioneller Websites näherbringen.
A)
Screendesign - was ist das und wozu ist es gut?
Informationsvermittlung & Nutzerfreundlichkeit & Image
• Bewußte Kontrolle über die Darstellung von Inhalten am Bildschirm.
• Visuelle Organisation von Inhalten und Zugang dazu (Layout, Navigation)
• Visuelle Aufbereitung von Inhalten (für Information UND Wirkung)
Gestaltung als Mittel der Kommunikation
• visueller Eindruck, thematische Einordnung, Kontext
• Inhalte zugänglich machen
• Aufmerksamkeit erzeugen und leiten
• Aussagen akzentuieren
• Information verständlich machen
• Informationen illustrieren
• Informationen mit visuellen Assoziationen verbinden
• Image des Absenders transportieren
• Konventionen und Erwartungshaltung beachten/brechen
Gestaltungsmittel im Screendesign (Bild, Text, Layout, Stil, Kontraste)
• Bild:
Bilder und Bildwirkung, Formate, Bildbearbeitung
• Text, Schrift am Bildschirm:
Lesbarkeit, Wirkung, Formatierung visuell + technisch
• Layout:
Aufteilung funktionaler Bereiche, visuelle Gliederung der Inhalte, Akzente
• Stil, Visuelle Sprache:
Form- und Bildsprache, Metaphern, Klischees, Stereotypen,
Symbole, Zeichen, Foto/Illustration/Grafik,
Farbe (Palette, Kombinationen, Sättigung, Symbolismus ...)
• Gestalterische Pole und Kontraste:
akzentuierte Nutzerführung <=> gleichwertige Auswahl aller Inhalte
vertraut <=> neu
rational <=> emotional
ÜBUNG
Eigene Erfahrungen reflektieren, Beispiele finden, darüber austauschen.
Was ist „gut"?, Was fällt auf? Was gefällt? Was funktioniert? Was nervt?
Welche Eigenschaften kamen allgemein gut an, welche weniger?
B)
Gestaltungsprinzipien online-journalistischer Produkte
Design Basics für redaktionelle Inhalte
Bildschirm-Wahrnehmung:
Leserichtung, Lesegewohnheiten, Text-/Bild-Wahrnehmung, Bildschirm-Konventionen,
Aufmerksamkeit, Fokus, Redundanz
Vom Umgang mit Text am Bildschirm:
Webtext; am Bildschirm Lesen, Leserlichkeit
Schriftgrößen, Schriftarten, Kontraste, Satzart, Textgliederung,
Textakzentuierung
Orientierung – die Website als Interface (Bedienoberfläche):
• Layout der Website; Zusammenspiel der Elemente
• Ordnung, Struktur, Orientieren, Gewichtung, Akzentuieren
• Navigation, Nutzerführung, Steuerung des Inhalts
• Aussehen und Gesamtwirkung
visuelle Umsetzung von Inhalten:
• Layout eines Artikels; visuelle Informationen
• Gestaltung des Inhalts
• Verständlichmachen in Bild und Text
Usability (Anwenderfreundlichkeit und Nutzerführung):
• Orientierung (Startseite)
• Navigation
• Orientierung in der Website
• Wege, Erreichbarkeit, Hilfen
• Sichtbare und (vorerst) unsichtbare Inhalte
AKZENTE SETZEN!!!
Wenn Sie Inhalte (zB einen bestimmten Text auf der Startseite, oder Hinweise ..)
besonders hervorheben wollen, um die Aufmerksamkeit zu lenken, müssen Sie dies
auffallend gestalten. Dazu hilft es, wenn der Rest der Seite „ruhig“ wirkt.
• Störer/Blickfänge (wie farbiges Label „Eilmeldung“ u.ä.)
• Farbflächen, Rahmen, Linien, grafische Elemente
• Andere Schriftart, -größe, fett, kursiv, Großbuchstaben, Schriftfarbe
• Absätze, Einzüge, Abstände (Leerraum trennnt Grüppchen, leitet das Auge)
• Artikel auf Übersichtseiten mit/ohne Bilder, mit/ohne Teasertext
• Position und Größe (oben und groß = wichtig, unten Rand = Zusätzliches)
ÜBUNG
Eine Auswahl redaktioneller Websites unter diesen gestalterischen Gesichtspunkten
analysieren
Gestaltung und Wirkung, Funktionsweisen und Navigation, Inhaltsvermittlung,
Usability
C)
Einfache Erstellung von Webpages und Templates
Online-Kommunikation mit den verfügbaren technischen Möglichkeiten
Angesprochen:
Informationswege, wenn Sie Inhalte online kommunizieren (oder erhalten)
veröffentlicht
• Blog-Baukasten
• Website-Baukasten
• (Broadcasting: Audio, Video, streaming, podcast)
abonniert
• Mailingliste, Twitter, rss-Feeds
empfohlen/zusammengestellt
• google news/rivva, social bookmarks, Links, email
Interaktion und Feedbackmöglichkeiten
• Kommentare, Foren, Chat, Twitter, Messaging/Conferencing
kooperativ
• Wiki, Foren, Social Networks
ÜBUNG
Benutzen:
Blog anlegen (Baukasten, visuell anpassen)
Website anlegen (Baukasten, visuell anpassen)
Wiki benutzen
Twitteraccount anlegen
Social media-Erfahrungen besprechen
Vergleichen:
Was paßt wofür? Zweck und Art der Kommunikation.
Möglichkeiten der Zusammenarbeit. Was ergänzt sich?
Die Besonderheiten redaktioneller Websites.
D)
Trennung von Präsentation und Inhalt
Einführung in Seitenbeschreibung und Stilvorlagen mit
Hypertext Markup Language und Cascading Style Sheets
Angesprochen:
Ein Inhalt für verschiedene Kanäle?
(Stichworte: Hypertext, Internet, HTML, www ... Browser, reader, mobile Geräte,
messaging ... Browsertypen, Barrierefreiheit)
HTML - Hypertext Markup Language
Strukturieren von Texten, Bildern und Metainformationen
• HTML als Auszeichnungssprache
• HTML im Layout
Übung HTML
Seite anlegen, Text per HTML formatieren, Schriftdarstellung
tags, Ausrichtung, Verlinkung, Bilddarstellung
CSS - Cascading Style Sheets
Auslagern von Format- und Layout-Informationen
Format-Deklaration und Vererbung
• HTML-Ergänzungssprache CSS
• CSS als Auszeichnungssprache
• CSS-Layout
• Website CSS-Stilvorlage ändern
Übung CSS
Formatierung: Stilvorlagen einer HTML-Seite in CSS auslagern
Layout: 1 Seitenlayout Schritt für Schritt in CSS erstellen
HTML
Hypertext Markup Language
HTML steht für HyperText Markup Language
HTML dient der Verlinkung von Dokumenten und deren Darstellung in Webbrowsern.
Ein HTML-Dokument ist eine einfache .txt-Datei ... allerdings mit der Kennung
.html (oder wahlweise .htm). Diese Endung macht die Textdatei für Webbrowser als
.html-Datei kenntlich.
Das Konzept von HTML
HTML dient dazu, einen Text in Elemente gleicher Art (zB Headline, Zitat, Liste,
Link, ...) zu strukturieren. HTML zielt darauf ab, gleichartige Elemente
(Headline, normaler Text) oder Funktionen (Hyperlink) auf erkennbar gleiche Weise
darzustellen. Nicht unbedingt, die Inhalte im Sinne eines Design-Layouts exakt zu
formatieren.
Bevor es bessere Möglichkeiten per CSS gab, nutzten Webdesigner HTML-tags dennoch
zur Gestaltung von Websiten (z.B. Tabellen zur Positionierung von Bildern und
Texten). <tags>
Sogenannte "tags" in eckigen Klammern wie <html>...</html> oder <body>...</body>
oder <h1>...</h1> schließen Textstellen ein und sagen dem Webbrowser ob und wie
diese Inhalte dargestellt werden sollen. Zum Beispiel bedeutet das tag <h1> für den Webbrowser: "der nun folgende Text soll
wie eine große Headline dargestellt werden".
Wie ein bestimmter Browser eine große Headline darstellt, ist hier nicht
vorgegeben.
</h1> beendet diese Zuweisung.
Bsp für eine besonders einfache HTML-Seite
mit Seitentitel, Überschrift und Text:
-------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Hier steht der Titel der HTML-Seite</title>
</head>
<body>
<h1>Dies ist eine Headline</h1>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</body>
</html>
-------------------------
<html> bedeutet hierbei für einen Webbrowser: dies ist ein HTML-Dokument
<head> bedeutet: jetzt kommen Angaben für den Browser und Suchmaschinen zum
anzuzeigenden Inhalt
<body> bedeutet: jetzt kommt der sichtbare Inhalt dieses Dokumentes selbst
Mehrere Tags, die eine Textstelle/Inhalt umschließen, müssen in exakt der
umgekehrten Reihenfolge wieder geschlossen werden.
Beispiel:
<html><head></head><body><h1>Eine Headline</h1>Ein Text Text Text
Text</body></html>
Korrekt:
... <h1>Headline hier</h1><strong>Fetter Text</strong> Text Text Text ...
Falsch:
... <h1>Headline hier<strong></h1>Fetter Text</strong> Text Text Text ...
CSS
Cascading Style Sheets
Was bringen CSS?
Die Trennung von Inhalt und Design
Das Auslagern von Stilvorlagen in "Cascading Stylesheets" ermöglicht die Trennung
von Inhalt und Design einer Webseite. Inhalten und Bereichen werden so
Stilvorlagen zugeordnet. Diese Stilvorlagen können dann an einer Stelle, quasi
ausgelagert, das Aussehen der Inhalte ändern. (Zum Beispiel für ein „neues Design“
oder ein anderes Ausgabegerät.)
Ein HTML-Dokument gliedert sich mit <head> und <body> in 2 Bereiche:
----------------------------------------------------------<html>
<head>
... Header-Bereich mit Angaben für den Browser
</head>
<body>
... Body-Bereiches mit dem eigentlichen sichtbaren Seiten-Inhalt
</body>
</html>
----------------------------------------------------------
1) CSS-Angaben sind Angaben für den Browser und stehen im HEADER
<head> ... </head>
Im Header-Bereich finden sich alle Angaben, die sich an den Browser oder an
Suchmaschinen richten, selbst jedoch nicht optisch dargestellt werden (mit
Ausnahme Seitentitels). Per CSS kann man dem Browser Stilvorlagen für den Text/Inhalt vorgeben.
Diese CSS-Angaben können
- direkt im Headerbereich stehen oder
- als externe Datei ("irgendeinname.css") in den Header geladen werden.
CSS Syntax
Beispiel für eine Stilvorlagen-Definition per CSS:
Es können existierenden HTML-Tags oder von Ihnen frei definierten „Bezeichnern“
Eigenschaften zugeordnet werden:
Also a) ein
HTML-TAG {Eigenschaft: Wert}
oder b) ein
Bezeichner {Eigenschaft: Wert}
Bsp zu a) Eigenschaften eines HTML-Tags per CSS definieren
Headline-tag <h1>...</h1>
Alle <h1>-Headlines des HTML-Dokuments sollen automatisch eine bestimmte
Schriftgröße und -farbe haben sieht zB so aus:
h1 { font-size: 14pt; font-color: blue}
Bsp zu b) Einen von Ihnen festgelegten "Bezeichner" definieren
Alle mit ".fantasiename1" ausgezeichneten Bereiche des HTML-Dokuments bekommen die
Schriftfarbe „red“.
.fantasiename1 { font-color: red }
Hinweis:
Ein „HTML-tag“ (wie <h1>, <p>, <body>) oder ein „Bezeichner“ (wie „.meintextstil“)
kann sehr viel mehr als 1 Eigenschaft haben
Die Einbindung eines stylesheets im Header-Bereich
Beispiel einer CSS-Stilvorlage (style sheet) im Header-Bereich eines HTMLDokuments:
----------------------------------------------------------<head>
<style type="text/css">
<!-
h1 {
font-size: 14pt;
font-color: blue;
}
.fantasiename1 { font-color: red }
-->
</style>
</head>
Erklärung
----------------------------------------------------------<style type="text/css"><!--
bedeutet "jetzt kommt eine Stilvorlage“
(für die Browseransicht auskommentierter Text)
h1 { font-size: 14pt; }
bedeutet CSS: "H1-Headlines sind 14pt groß"
--></style>
bedeutet "Ende dieser Stilvorlage"
Hinweis:
Text innerhalb von Kommentar-Zeichen wird vom Webbrowser nicht angezeigt.
<!-- auskommentierter Text -->
<!-- zB für Stilvorlagen -->
<!-- oder für browserseitige Programmierung -->
Üblich ist es, die stylesheet-Vorgaben einer Website in 1 Datei auszulagern, die
dann jeweils in den Header-Bereich eines HTML-Dokumentes geladen wird.
<head>
<link rel="stylesheet" type="text/css" href="beispiel.css" />
</head>
Stildefinitionen per CSS gelten insbesondere für
- vordefinierte HTML-TAGs
wie Headlines <h1></h1> oder Textparagraphen <p></p> oder Listen <ul></ul>
- selbstdefinierte Klassen mit eigenem Namen wie
.fantasiename1 und .meinkleinstertext
2) BODY <body></body>
Im Body-Bereich steht der vom Browser sichtbar angezeigte Inhalt des Dokumentes.
Wie dieser Inhalt aussieht, kann oben im stylesheet stehen (zB Schriftarten,
Schriftgrößen und -farben, Abstände, Ausrichtung/Position ...).
Im Body-Bereich werden einzelne Blöcke, dh Bereiche mit unterschiedlichen
Stilvorgaben, untereinander angezeigt, zB:
-------------------<div class=".fantasiename1">
Text des ersten Blockbereichs, wie .fantasiename1 ihn
definiert, zB in Schriftfarbe rot
</div>
<div class=".fantasiename2">
Text des nächsten Blockbereichs, mit dem Aussehen wie
.fantasiename2 ihn definiert, zB in Schriftfarbe blau
</div>
<div class=".fantasiename1">
Text des nächsten Blockbereichs, wieder wie
.fantasiename1 ihn definiert
</div>
--------------------
Solche Blöcke können auch ineinander verschachtelt sein.
Deswegen auch der Name "cascading stylesheets", denn die Eigenschaften wie Farbe,
Schriftgröße o.ä. werden vererbt.
Falls eine Eigenschaft wie Farbe in geschachtelten Blöcken mehrfach definiert
wird, überschreiben die "inneren" Angaben üblicherweise die "äußeren".
Beispiel:
<body>
<div class=".fantasiename1">
Hier steht nun ein Text so wie .fantasiename2
ihn definiert, zB mit Schriftfarbe rot.
<p>
Hier steht innerhalb dieses div-Blocks ein Paragraph, der zudem so
aussieht wie Paragraphen evtl definiert wurden, zB mit Schriftfarbe
schwarz.
<span class=".fantasiename2>
Hier steht innerhalb des
div-Bereiches und innerhalb des Paragraphen ein Abschnitt, der
so aussieht wie .fantasiename2 vorgibt, zB Schriftfarbe blau
</span>
</p>
</div>
</body>
(Die Einrückungen dienen hier nur der Übersichtlichkeit der „Verschachtelung“)
Wichtige CSS-Elemente
STILVORLAGEN
Festlegung einer Stil-Eigenschaft
Bezeichner {Eigenschaft: Wert}
h1 {
font-size: 14pt;
font-color: blue;
}
.fantasiename1 { font-color: red }
BLOCKBEREICHE
Im HTML-Dokument definierte Bereiche
Bereiche/Blockelemente mit zugeordneten Stilvorlagen sind
DIV (vor allem für Blockbereiche, untereinander angezeigte Abschnitte)
SPAN (vor allem für Textbereiche, zB hervorgehobene Textpassagen)
einzelnen HTML-tags
wie Headlines <h1> oder Paragraphen <p> können im style sheet
bestimmte Eigenschaften zugeordnet werden.
AUFRUF VON STILVORLAGEN
Zu HTML-tags, DIV- und SPAN-Elementen wird geschaut, welche Stile gelten z.B.
<div id="box_1">...</div>
<p class="text-grau">...</p>
<span class="text-grau">...</span>
Hinweis:
CLASS (z.B. ="text-grau") verweist auf sich wiederholende Stilvorlagen
ID (z.B. „box_1“) eher auf einmalig vorkommende Elemente/Stilabweichungen
LAYOUT MIT CSS
Box Modell
(Abmessungen, Abstände, Rahmen und Farbe von Blockelementen definieren)
FLOAT-Element
(positionieren von Blockelementen statt einfach untereinander)
Übung:
Einfache Webseite mit Header, Navigationsbereich, Inhalt per CSS erstellen
(CSS für Layout UND Formatierung einsetzen)
E)
Umgang mit Content Management Systemen
Redaktionssysteme gehören technisch zu den Content Management Systemen (CMS). Sie
dienen der Verwaltung von Inhalten, meist Webseiten. Wesentliches Merkmal ist die
Trennung von Inhalten (Content), Datenstruktur und Design (Layout).
Typischer Aufbau eines CMS-geeigneten Webserver-Systems:
LAMP-WEBSERVER
( = Linux, Apache, mySQL, PHP )
Eine Softwarekombination, in der dynamische Webseiten und -anwendungen entwickelt
und im Internet bereitgestellt werden können.
Linux-Betriebssystem = stellt die Basisfunktionen des Computers
Apache-Webserver
= Software speziell für Datenanfragen aus dem Internet
mySQL-Datenbank
= Software, die Inhalte strukturiert speichert
(Daten, nicht fertige HTML-Seiten)
PHP
= serverseitige Programmiersprache
erzeugt dynamisch HTML-Seiten
Aus HTML-Templates/Programmierschnipseln, CSS-Vorgaben und Datenbankinhalten
werden sozusagen HTML-Dateien zusammmenfügt, die ein Webbrowser „versteht“ und
Benutzern anzeigen kann.
SIEHE AUCH: SCHAUBILD AUF KURS-BLOG
Übung
Wordpress-Blog: konfigurieren
Wordpress-Blog: CSS des Templates ansehen und ggf. anpassen
Artikel veröffentlichen
Dateien einbetten
