1. Euer Portfolio: Konzeption & Design
2. Sketch, Adobe XD und Figam – spezielle Tools für Screen-Layouts (und Websites…)
3. Abfrage des bisherigen Wissen
4. Inspect Element
5. HTML-/CSS-Code validieren lassen
6. CSS Strategie
7. CSS Selektoren
8. CSS Box Model
9. CSS Padding, Margin & Zentrieren
10. Integration von Sound & Video
11. Canvas-Element
12. Sketch: Look & Feel Eurer Portfolio-Website
13. Übungen & Hausaufgaben

• Wie schaut Eure Site auf Desktop-PC und Smartphone aus?
• Wie navigiert man zwischen den verschiedenen Inhalten?
• Wo befindet sich das Navigationsmenü?
• …

Macht Euch dazu schon mal Gedanken!

Bitte stellt dabei auch dar, wie Eure Site auf einem Smartphone und auf einem Desktop-PC aussehen soll.

Templates

Ich habe entsprechende Templates als PDF erstellt, die Ihr gerne verwenden (ausdrucken & darauf scribbeln) könnt:

scribble_templates.pdf

Die Scribbles bitte abfotografieren, damit wir diese via Zoom/Screensharing besprechen können!

… die natürlich auch für die Konzeption und Gestaltung von Websites geeignet sind …

Online-Learning

Bitte entscheidet Euch für eines der drei Programme, die gleich vorgestellt werden, und macht dafür ein grundlegendes Tutorial durch!

Alle drei Programme erlauben es Euch, ziemlich schnell und intuitiv interaktive Prototypen Eurer Portfolio-Website zu erstellen. Diese benötigt Ihr spätestens bei unserer Zwischenpräsentation.

Sketch entwickelt sich gerade zum wichtigsten Tool für alle UI- und UX-DesignerInnen! Wer gerne in diesem Bereich arbeiten möchte, sollte das Programm kennen…

Sketch ist auf allen iMacs im Computer-Labor installiert – und es gibt eine kostenlose Testversion, die 30 Tage lang funktioniert.

Leider gibt es Sketch nicht für Windows-Rechner!

„Sketch Essential Training: The Basics“ bei linkedin Learning

Sketch is one of the most popular UX design tools around. This course can help designers of all skill levels be productive with its focused, comprehensive workflow. Follow along with Chris Converse and learn the ins and outs of the Sketch interface, and how to design modern user experiences with Sketch, starting with project setup and working through to interactive prototyping.

Figma ist mit Sketch vergleichbar, läuft aber direkt im Browserfenster und ist somit mit praktisch jedem Betriebssystem verwendbar.

Tutorial bei linkedin learning

Figma for UX Design

Adobe XD ist ein mit Sketch vergleichbares Tool, das auf Mac- und Windows-Rechnern läuft…

Tutorial bei linkedin learning

Auch hierfür gibt es ein Tutorial!

Was ist hier falsch?

HTML

<h3>Obst</h3>
<ul>
    <li>Bananen</li>
    <li>Äpfel</li>
    <ol>
        <li>Granny Smith</li>
        <li>Boskop</li>
        <li>Braeburn</li>
    </ol>
    <li>Orangen</li>
</ul>

1. Geordnete Listen dürfen nicht in ungeordnete Liste geschrieben werden
2. Die geordnete Liste muss zwischen <li> und </li> eingefügt werden

Für was verwendet man das Format „Gif“?

1. für Fotos
2. für kleine Bildschirmsymbole
3. für große Flächen, die wenige Farben enthalten

Es wird ein halbtransparentes Bild benötigt. Welches Bildformat ist geeignet?

1. gif
2. jpg
3. png

Es wird eine halbtransparente rote Hintergrund-Fläche benötigt. Wie lautet der CSS-Code dafür?

1. background-color: #ff0000;
2. background-color: rgb(255,0,0);
3. background-color: rgba(255,0,0,0.5);

Durch welche HTML5-Tags macht man deutlich, dass ein Bild eine Bild-Unterschrift hat?

1. <img> & <p>
2. <figure> & <figcaption>
3. <section> & <article>

Für was verwendet man HTML-Tabellen?

1. um für das Layout einer Website ein Raster verwenden zu können
2. um Text und Bild nebeneinander darstellen zu können
3. um tabellarische Daten richtig darzustellen
4. Tabellen darf man gar nicht mehr verwenden!

Welchen HTML5-Tag soll man verwenden, um eine Randbemerkung semantisch richtig zu markieren?

1. <blockquote>
2. <header>
3. <aside>
4. <article>

Als was markiert man – fast immer – das Navigations-Menü?

1. als HTML-Tabelle
2. als Begriffe, die jeweils in ein <span>-Element eingefügt werden
3. als ungeordnete Liste

via „Right-Mouse-Click" auf dem gewünschten Element aktivieren

Damit kann man sehr schnell sehen, mit welchen HTML-Tags die angeklickte Stelle erstellt ist und welches CSS-Anweisungen dafür verwendet werden.

Man kann dort auch Werte/Einstellungen ändern und sofort sehen, wie sich dies auf der Website auswirken würde …

Online

Tutorial zum Web Inspector

Das Stylesheet soll logisch aufgebaut sein – vom Großem zum Kleinen

• Thematisch zusammengehörige Anweisungen auch zusammen schreiben – damit man die Übersicht nicht verliert!
• Kommentare verwenden, um Bereiche zu trennen und einfach findbar zu machen

CSS

/* ================== allgemeine Regeln am Anfang ================== */
body {
    font-family: Georgia,Times,Serif;
    font-size: 100%;
    line-height: 1.5;
    color: #444;
    background-color: #f0f0ea;
}

/* ================== links allgemein ================== */
a:link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted;
}

a:visited {
    color: #818181;
}

a:hover,
a:active,
a:focus {
    color: #000;
    border-style: solid;
}

main {
    width: 60em; /* knapp 960px */
    margin: 0 auto 0 auto;
    background-color: #fff;
    padding: 1em;
}

/* ================== header ================== */
header {
    height: 15em;
}

h1 {
    width: 7em;
    text-align: right;
    font-family: Verdana,Sans-Serif;
    line-height: 1;
    font-size: 700%;
    color: #f0f0e9;
}

/* ================== navigation ================== */
nav {
    width: 22%;
    margin-top: 2.2em;
    margin-left: .7em;
}

section {
    width: 66%;
}

/* ================== article ================== */
article {
    padding: 1.5em 0 3em 0;
}

figure {
    background: #dbdbcc;
    padding: .5em;
    width: 280px;
}

figcaption {
    text-align: center;
    font-size: 90%;
}

/* ================== footer ================== */
footer {
    background-color: #000;
    color: rgba(255, 255, 255, 0.56);
}

h2 {
    font-weight: bold;
    margin-right: .4em;
}

Schrittweise vom Vorschlaghammer zur Pinzette…

CSS

p {color:red;}
strong {color:blue;text-decoration:underline;background-color:grey;}
h1 {
   font-family:Arial;
   font-size:1.3em;
}

/* =============== Verallgemeinert =============== */

/* einzeilig */
Selektor {Eigenschaft: Wert;}
Selektor {Eigenschaft_1: Wert; Eigenschaft_2: Wert; Eigenschaft_3: Wert;}

/* mehrzeilig */
Selektor {
   /* hinter jedem Eigenschaft-Wert-Paar muss ein Bindestriche stehen! */
   Eigenschaft_1: Wert; 
   Eigenschaft_2: Wert;
   …
   Eigenschaft_x: Wert;
}

Tags mit gleichen (visuellen) Eigenschaften zusammenfassen
Zwischen den Tags muss dafür ein Komma stehen!

CSS

/* alle 3 Überschriften werden gleich dargestellt */
h1, h2, h3 {
    font-family: Verdana, Sans-Serif;
    font-size: 16px;
    color:red;
}

/* h3 wird aber blau, weil diese Anweisung nach der oben genannten eingelesen wird! */
h3 {
    color:blue;
}

Wie schreibt man das CSS, damit sowohl die H2-Überschrift als auch das <span>-Element einen blauen Hintergrund bekommen?

HTML

<h2>Sensation</h2>
<p>Eine Überschrift mit <span>blauem</span> Hintergrund!</p>

Wie schreibt man das CSS, damit sowohl die H2-Überschrift als auch das <span>-Element einen blauen Hintergrund bekommen?

HTML

<h2>Sensation</h2>
<p>Eine Überschrift mit <span>blauem</span> Hintergrund!</p>

CSS

h2, span {background-color:blue;}

Um z.B. bei Paragraphen einen besonderen herauszugreifen…

Achtung: auch bei Klassen muss auf Gross- und Kleinschreibung geachtet werden und Klassen dürfen nicht mit Ziffern anfagen…

HTML

<p>Hier etwas Text.</p>
<p class="wichtig">Dieser ist besonders wichtig.</p>
<p>Wieder normaler Text…</p>

CSS

p {color:black;}

/* Klassen werden in CSS mit einem Punkt (.) gekennzeichnet! */
.wichtig {color:red;}

Ein HTML-Tag kann mehr als eine Klasse haben…
Achtung: Die Klassen werden in HTML ohne Komma, nur mit einem Leerzeichen voneinander getrennt!

HTML

<h3 class="einleser wichtig">Eine Überschrift</h3>

CSS

.einleser {
    color:red;
    border-bottom:3px solid;
}

.wichtig {
    background-color:black;
}

Das braucht Ihr vermutlich erst, wenn Eure CSS-Dateien komplexer werden…

We schreibt man das CSS, damit nur das <span>-Element mit der Klasse „hervorheben“ einen blauen Hintergrund bekommt?

HTML

<p>Dieser <span>Paragraph</span> enthät einen
<span class="hervorheben">blau hinterlegten</span> Abschnitt</p>

We schreibt man das CSS, damit nur das -Element mit der Klasse „hervorheben“ einen blauen Hintergrund bekommt?

HTML

<p>Dieser <span>Paragraph</span> enthät einen
<span class="hervorheben">blau hinterlegten</span> Abschnitt</p>

CSS

.hervorheben {background-color:blue;}

Es gibt einige Experten, die fordern, dass man IDs nicht für das CSS verwendet, sondern nur für Javascript…

HTML

<p>Hier etwas Text.</p>
<p id="slogan">Dieser ist besonders wichtig.</p>
<p>Wieder normaler Text…</p>

CSS

p {color:black;}

/* IDs werden in CSS mit dem Zeichen # markiert */
#slogan {color:red;}

Verwendet am Anfang lieber nur Klassen für Eure CSS-Anweisungen…

HTML-Elemente können sowohl einer Klasse zugehörig sein als auch eine eigene ID haben!

HTML

<h2 class="betont" id="startHeader">Erste Überschrift auf der Seite</h2>

CSS

.betont {color:red;}
#startHeader {text-transform:uppercase;}

Das braucht Ihr vermutlich auch erst, wenn Eure CSS-Dateien komplexer werden…

Was ist hier falsch?

HTML

<h3 class="23wichtig">Titel</h3>
<p class="größer">Es war einmal ein…</p>

Was ist hier falsch?

HTML

<h3 class="23wichtig">Titel</h3>
<p class="größer">Es war einmal ein…</p>

Antwort

1. Klassen dürfen nicht mit Ziffern anfangen
2. Klassen dürfen keine Sonderzeichen (hier „ö“ und „ß“) enthalten

• Jedes HTML-Block-Element (main, section, article, div, h1, h5, p, blockquote, ul, ol, dl …) ist eine Box
• Diese Box hat einen Rahmen (border) sowie Innenabstand (padding) als auch Außenabstand (margin)
• Zusätzlich kann die Box Hintergrundfarbe (background-color) und Hintergrund-Grafik (background-image) haben

Politisch nicht korrekt, aber gut merkbar …

Abstand vom Inhalt zur Kante des Objekts

CSS

div {
    /* Maßeinheiten können "gemischt" werden */
    padding-top:10px;
    padding-right:30%;
    padding-bottom:20px;
    padding-left: 20%;

    /* oder in Kurzschreibweise, im Uhrzeigersinn oben anfangend */
    padding: 10px 30% 20px 20%;
}

definiert den Abstand zwischen Elementen

CSS

h2 {
    /* Abstand innerhalb des roten Rahmens rundumlaufend */
    padding: 5px;
    /* Abstand der h2-Überschrift zum Rand des Divs 
    und zum darunter liegenden Paragraphen */
    margin: 20px 0 3em 10%;
    border: 1px solid red;
}

See the Pen padding_margin by Matthias Edler-Golla (@megolla) on CodePen.

Bitte klickt auf „Edit on Codepen“ – dort könnt Ihr den Code verändern und seht sofort, was geschieht!

Damit kann man ein Element über ein anderes „ziehen“…

CSS

p {
    /* „-10px“ zieht den Paragraphen nach oben! */
    margin-top:-10px;
    padding:5px;
    border:1px solid white;
    color: white;

    /* halbtransparente Farbfläche dank „0.5“ */
    background-color:rgba(255,0,0,0.5)
}

CodePen

See the Pen negative_margins by Matthias Edler-Golla (@megolla) on CodePen.

Der gesamte Inhalt einer Website kann mit Margin zentriert werden – dazu muss jedoch eine Breite angegeben werden!

CSS

main {
    width:70%;
    /*
    oben und unten: 20px der Browserfenster-Höhe
    links und rechts: automatische Berechnung = Zentriert
    */
    margin:20px auto;
}

Demo dazu

CodePen

See the Pen margin_auto_zentrieren by Matthias Edler-Golla (@megolla) on CodePen.

für die früher jeweils Browser-Plugins (z.B. „Flash“ notwendig waren …)

1. <audio> zum Abspielen von Sound-Dateien
2. <video> zum Abspielen von Filmen

controls = Steuerelemente (Play, Stop usw.) werden dargestellt
autobuffer = läd den Sound schon mal vor, damit dieser gleich losspielen kann…
autoplay = der Sound fängt sofort von alleine an zu spielen – bitte nicht einbauen!
loop = Sound läuft immer wieder ab

HTML

<!-- relative Pfadangaben beachten! -->
<audio autobuffer controls loop>
     <source src="sounds/kater-schnurrt.mp3">
</audio>

Demo

width = Breite des Films
height = Höhe des Films
controls = Steuerelemente (Play, Stop usw.) werden dargestellt
autobuffer = läd den Film schon mal vor, damit dieser gleich losspielen kann…
poster = Vorschaubild, kann man selber erstellen und dann festlegen – Pfadangaben beachten!

autoplay = der Film fängt sofort von alleine an zu spielen – bitte nicht einbauen!

HTML

<!-- „poster“ ist ein Vorschaubild, das man selber festlegen kann! -->
<video controls width="640" height="360" autobuffer poster="video/popeye_shuteye_popeye.jpg">
    <source src="video/popeye_shuteye_popeye.mp4" type="video/mp4">
</video>

Demo

Filmquelle: https://archive.org/details/popeye_shuteye_popeye

Dazu einfach den auf der Site angebotenen Code kopieren und auf der eigenen Site einfügen – man muss somit die Film-Datei nicht herunterladen, sie bleibt auf den Servern der Video-Anbieter!

HTML

<iframe src="//player.vimeo.com/video/59237572" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

• The CSS layout model: borders, boxes, margins and padding

1. Schreibt Eure CSS-Anweisungen in die (beigefügte) Datei „style.css“. Dort sind schon ein paar wichtige Angaben drinnen – nicht entfernen!
2. Am Ende soll die Seite in schmalster Darstellung wie auf der Vorlage Fotografie_schmal.jpg aussehen.
3. Die Hintergrundbilder (Meer, Sand, Stadt) sollen jeweils bis an die Ränder des Browserfensters gehen – egal, wie breit das Browserfenster aufgezogen wird!
4. Zieht man das Browserfenster breiter, soll die Seite wie bei Fotografie_breit.jpg aussehen
5. Bitte verwendet wieder die in der Zip-Datei hinterlegten Dateien und behaltet die Dateistruktur bei!
6. Bindet bei „Ansel Adams“ folgenden Film ein: https://vimeo.com/60926156

Tip: Schaut mal nach, was die CSS-Anweisungen „max-width“ und „min-width“ bewirken – für die Hintergrund-Bilder ist die Anweisung: „background-size: cover“ sehr praktisch…

Download

Das Übungspaket „Fotografie“ zum Herunterladen

bitte nicht vergessen!

Dazu muss die Web Developer Extension installiert sein! Diese gibt es z.B. für den Firefox und Google Chrome.

Im Raum M014 ist die Web Developer Extension bei Google Chrome installiert …

Genauso könnt Ihr auch Eure CSS-Dateien testen lassen!