1.1 Einführung Screendesign

Einführung Screendesign
Medientechnologien und angewandte Informatik
HTBLVA Graz-Ortweinschule
Grafik- und Kommunikationsdesign
3. Klasse (3AHGK)

›Warum denn Screendesign, warum HTML?‹

  • Wenn man Layouts für das Web erstellt, sollte man wissen, was technisch möglich ist. Nur dann kann man sinnvoll gestalten.
  • Nur wenn man als Gestalter grundlegende technische Kenntnisse hat kann man Web-Developern (›Das geht technisch nicht‹) als kompetenter und selbstbewusster Projektpartner gegenübertreten (so wie als Printdesigner auch Kenntnisse über den Druck vonnöten sind)
  • Die digitale Realität prägt unseren Lebensalltag. Genauso wie man über die physikalische Umwelt durch Biologie, Physik oder Geographie Kenntnisse erlangen sollte, so sollte man, um seine Umwelt zu verstehen, wissen, was Soziale Medien oder Handy-Apps im Innersten zusammenhält.
  • Screen- und Webdesigner verdienen mehr als Printdesigner

1. GRUNDLAGEN

Editoren

Online
codepen

Offline
Textwrangler
Smultron
Adobe Dreamweaver

HTML

Die Hypertext Markup Language (HTML) ist eine textbasierte Auszeichnungssprache zur Strukturierung von Inhalten wie Texten, Bildern und Hyperlinks in Dokumenten. HTML-Dokumente sind die Grundlage des World Wide Web und werden von einem Webbrowser dargestellt. HTML-Dokumente können in einem Texteditor wie Textwrangler oder auch in einer komplexeren Entwicklungsumgebung wie Adobe Dreamweaver erstellt und bearbeitet werden.

Syntax von HTML-Tags

HTML-Tags sind die ›Befehle‹ von HTML. Sie bestehen aus einem Begriff oder manchmal auch nur aus einem einzelnen Buchstaben der in spitze Klammern (die auf der Tastatur eigentlich ein mathematisches Größer- und Kleinerzeichen darstellen) gefasst ist:


<p>

In den meisten Fällen werden sie geöffnet und wieder geschlossen. Sie markieren so einen bestimmten Bereich des Textes (›Markup Language‹) und weisen ihm so eine Funktion zu. Mit dem a-Tag wird ein Textabschnitt beispielsweise als Link definiert:


<a>Text</a>

Parameter

Mitunter benötigen HTML-Tags zusätzliche Angaben um sinnvoll zu funktionieren. Wenn in obigem Beispiel durch den a-Tag ein Link um das Wort ›Text‹ gelegt wird, so ist noch nichts darüber gesagt, wohin dieser Link verweisen soll. Dafür braucht der a-Tag den Parameter href. Parametern stehen innerhalb der spitzen Klammern:


<a href="http://www.ortweinschule.at">Text</a>

Grundstruktur eines HTML-Dokuments

Ein HTML-Dokument besteht aus vielen HTML-Tags, die in einer bestimmten Grundstruktur angeordnet sind. Eine gewöhnliche HTML-Datei besteht grundsätzlich aus folgenden Teilen:

  • Dokumenttyp-Deklaration (Angabe zur verwendeten HTML-Version)
  • Das HTML-Wurzelelement < html >, und darin
  • Header (Kopfdaten. z.B. Angaben zu Titel u.ä.)
  • Body (Körper - anzuzeigender Inhalt, also Text mit Überschriften, Verweisen, Grafikreferenzen usw.)


<!DOCTYPE html>
<html>
	<head>
		<title>Hello World!</title>
		<meta charset="UTF-8">
		<meta name="keywords" content="Zeichnungen, Design, Portfolio, Kunst"> 
		<link href='stylesheet.css' rel='stylesheet' type='text/css'>
	</head> 
	<body>
    	In den body-Bereich werden alle Tags und Inhalte geschrieben, die später im Browserfenster angezeigt werden sollen.  
	</body> 
</html>	
    

Man sieht, dass auch das HTML-Dokument selbst mit einem HTML-Tag ›geöffnet‹ wird und am Ende der Datei dieser Tag html wieder geschlossen wird. Genauso verhält es sich mit den Beiden Hauptbereichen head und body

<head> – Der Kopfbereich des HTML-Dokuments. Hier werden allgemeine Einstellungen getroffen. Inhalte aus dem head-Bereich erscheinen später selbst nicht im Browserfenster als Inhalte.
<title> – Hier wird der auch im Browser-Tab später sichtbare Titel des HTML-Dokuments angegeben.
<meta> – Meta-Tags haben unterschiedliche Aufgaben. Mit charset="UTF-8" wird die Zeichenkodierung des Dokument engegeben. Dies genauer zu erklären würde an dieser Stelle zu weit führen, wir merken uns zunächst, dass UTF-8 super ist. Mit name="Keywords" werden für die Website charakteristische Begriffe angegeben, die Google zur Indizierung der Website und für spätere Suchanfragen verwendet (daneben sind andere Eigenschaften der Website wichtig, um im Netz gefunden zu werden – aber auch dazu später mehr).
<<link> – An dieser Stelle wird eine externe Datei eingebunden. Es handelt sich hier um das Stylesheet, das die CSS-Anweisungen für die Site enthält. Was CSS ist wird gleich im nächsten Abschnitt erklärt.
<body> – Der body-Bereich ist nach dem head-Bereich der zweite Hauptteil eines HTML-Dokuments. Hier schreiben wir alles, was später im Browserfenster sichtbar sein soll.

Grundlegende HTML-Tags

Tag Funktion
p Text-Absatz (Paragrapph)
a Link (Anchor)
br Zeilenumbruch (break)
h1 - h9 Überschriften (header)
img Bild einfügen (img)
div Container

Dies stellt eine Auswahl an grundlegenden Tags dar, es existieren viele weitere. Eine Übersicht der HTML-Tags findet sich hier.

Kommentare

Kommentare helfen, Programmierung besser zu verstehen. In HTML-Dokumenten werden Kommentare durch die Zeichenfolge <!--begonnen und durch die Zeichenfolge --> beendet.


<a href="http://www.ortweinschule.at">Ortweinschule</a>  <!--Mein erster Kommentar: links ein Link!-->

HTML: Online Tutorials und Lernseiten im Web

Website Link
w3schools.com w3schools
wiki.selfhtml.org selfHTML
CSS-Tricks CSS-Tricks

Beispiel: Bilder verwenden

Dateiformate, die im Internet verwendet werden: jpg, gif, png, svg (Vektoren).
Bilder werden durch den -Tag in HTML-Dokumente eingefügt. Um zu definieren, welches Bild geladen werden soll, muss der Pfad zum Bild angegeben sein. Dieser kann sich auf ein Bild im Web oder auf dem eigenen Rechner beziehen und wird über den Parameter src angegeben:


<img src="bilder/image-1.jpg">

Bei einem Pfad zu einer Web-Datei muss stets http:// vor der URL verwendet werden, ansonsten erkennt der Browser nicht, dass der Pfad auf eine Adresse im Web verweist.

Beispiel: Links

Wie bereits gelernt, können Links durch den a-Tag angelegt werden. Dieser hat die Parameter href und target, wobei target festlegt, ob der Link im gleichen Tab (_self) oder in einem neuen Tab (_blank) geöffnet werden soll.


<a href="http://www.ortweinschule.at" target="_blank">Ortweinschule</a> 

Links können nicht nur um Worte oder Texte gelegt werden, sondern auch um Buttons oder Bilder:


<a href="http://www.ortweinschule.at" target="_blank"><img src="bilder/image-1.jpg"></a> 

Aufgabe:
Erstelle eine Linkliste mit den folgenden Links:

w3schools.com -> www.w3schools.com
Wikipedia: JavaScript -> https://de.wikipedia.org/wiki/JavaScript
jQuery -> https://jquery.com/
selfHTML -> https://selfhtml.org/


Alle Links sollen sich in einem eigenen Tab öffnen.

Styling mit CSS

Mit den HTML-Tags wird Struktur und Inhalt einer Website festgelegt. Welcher Text soll gezeigt werden? Welche Bilder? Welche Inhalte sind Links und wohin verlinken sie?
Damit ist außer der Reihenfolge der Inhalte noch wenig über das visuelle Erscheinungsbild der Website gesagt. Mit reinem HTML ist ein solches Styling nicht möglich. Daher benötigt man die zusätzlichen Definitionen der Cascading Stylesheets (CSS). Mit ihnen lässt sich festlegen, in welcher Schriftart ein Text gesetzt sein soll, welche Farbe Links haben, wie die Abstände zwischen Layoutblöcken sind – und viele andere Dinge.

CSS-Definitionen werden meist in einer eigenen Datei gespeichert. Oft heisst diese ›stylesheet.css‹. In dieser Datei ist das Aussehen der Website gespeichert und lässt sich von dieser zentralen Datei für alle Unterseiten der Website festlegen.

Syntax von CSS-Anweisungen

CSS-Anweisungen haben die folgende Struktur:
Anweisung Doppelpunkt Wert Semikolon
Der Wert bzw. seine Einheit differieren dabei je nach Anweisung und Zweck: Pixel, Punkt, Prozent, …

Einige Beispiele:


margin: 4px;
width: 300px;
background: green; 


Im CSS-File müssen die CSS-Anweisungen stets auf bestimmte HTML-Tags bezogen werden: Welcher Teil des HTML-Dokuments soll eine andere Farbe oder eine andere Schriftart bekommen?
Im folgenden CSS-Anweisungsblock wird definiert, dass die p-Tags eines HTML-Dokuments eine Textgröße (Anweisung ›font-size‹) von 14 Pixel und die Farbe Rot erhalten sollen:


p {
	font-size: 14px;
	color: red;
}

Der Anweisungsblock wird mit einer öffnenden geschweiften Klammer begonnen und mit einer schließenden geschweiften Klammer beendet. Im Block befinden sich zwei Anweisungen, es können sich jedoch theoretisch beliebig viele Anweisungen im Block befinden. In externer Datei vs. im Dokument

Grundlegende CSS-Anweisungen

Anweisung Funktion
width Breite eines Elements festlegen
height Höhe eines Elements festlegen
color Farbe einstellen
background Hintergrundfarbe oder -muster
font-family Schriftart
font-size Schriftgröße

Aufgabe:
Erstelle mit den bereits bekannten HTML-Tags und CSS-Anweisungen ein Bildübersicht mit Bildunterschriften und Infotext. Anordnung: siehe Schultafel!

Software für Screendesign

Photoshop

Vorteile von Photoshop als Screendesign-Tool:

  • Da beim Screendesign zwangsläufig letztendlich Pixel auf einem Display dargestellt werden ist Photoshop als Bearbeitungsprogramm für Bitmap-Bilder grundsätzlich gut geeignet
  • Großer allgemeiner Funktionsumfang

Nachteile

  • Photoshop bietet wenige Funktionen, die speziell auf Screendesign ausgerichtet sind.
  • Für Screendesign viele grafische Einzelobjekte notwendig, deren Bearbeitung und Organisation in Ebenen in Photoshop mitunter umständlicher ist als bspw. in Illustrator

Illustrator

Obwohl Illustrator vektorbasiert ist lässt es sich für Screendesign-Layouts verwenden. Öffnet man ein neues Dokument, so muss man bei ›Profil‹ Web einstellen, die Einheit sollte auf Pixel gestellt werden, der Farbmodus auf RGB, die Rastereffekte auf Bildschirmauflösung (72dpi).

Opening an Illustrator Dokument for Screendesign

Anschließend empfiehlt es sich, im Menü ›Ansicht‹ die Pixelvorschau zu aktivieren. So werden alle Vektorobjekte in Pixelauflösung dargestellt, was für Screendesign sehr sinnvoll ist:

Opening an Illustrator Dokument for Screendesign

Über die Palette CSS-Eigenschaften können Objekteigenschaften wie Farbe und Größe direkt für CSS-Files genutzt werden.

CSS_Properties in Illustrator

Vorteile von Illustrator als Screendesign-Tool:

  • Objekte leicht duplizierbar. Praktisch, da in Web-Layouts für Userinterface-Elemente usw. oft wiederkehrende Elemente auftreten (dafür z.B. auch Verwendung von selbst erstellten Symbolen.
  • Grafische Elemente flexibel bearbeitbar
  • Visuelle Eigenschaften von Objekten lassen sich direkt über die Palette CSS-Eigenschaften copy&pasten

Nachteile

  • Bitmaps wie Texturen oder ähnlichem sind nur umständlich zu verwenden

Sketch

https://sketchapp.com/

Aufgabe:
Erstelle mit Illustrator ein Layout für die in der vorigen Übung erstellten Bildübersicht.
Breite: 960 Pixel. Adaptiere die Bildübersicht für Dein neues Layout. Achte also beim anfertigen Deines Screendesigns, dass es nicht kompliziert ist und mit unseren bisher einfachen Mitteln umsetzbar ist.

Tipp: Die Schriftart wird mit der CSS-Anweisung "font-family" eingestellt, die Schriftgröße mit "font-size".