Sketch, Selektoren, Box Model, Multimedia / 2017-11-09 / © Matthias Edler-Golla


|



 



Online Prüfungsanmeldung

bitte nicht vergessen!


Kein Unterricht am 16.11.17

An diesem Tag bin ich auf einem Symposium des Forschungsverbunds ForChange…

Nutzt die Zeit und überlegt, wie Euer Online-Portfolio aussehen soll!


Themen heute

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

Sketch – the digital design toolkit

Sketch is a design toolkit built to help you create your best work — from your earliest ideas, through to final artwork

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 Raum M014 und M403 installiert – und es gibt eine kostenlose Testversion, die 30 Tage lang funktioniert.

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


Sketch Tutorials

Bitte beschäftigt Euch mit diesem tollen Programm – wenn Ihr die Grundlagen verstanden habt, könnt Ihr Eure Website-Layouts damit ziemlich schnell erstellen!

Sketch Grundkurs bei Lynda.com

In diesem umfangreichen Kurs führt Sie André Reinegger in alle wichtigen Funktionen von Sketch ein und entwickelt mit Ihnen Schritt für Schritt das komplette UI-Design einer App. Mit Sketch ist es möglich, Screendesigns flexibel, präzise und schnell umzusetzen. Dabei konzentrieren Sie sich auf Ihre Kernaufgabe: auf das Design. Lernen Sie die wichtigsten Werkzeuge und Funktionen von Sketch kennen, um Layouts für Desktop und mobile Endgeräte zu erstellen, die sofort umgesetzt werden können


Abfrage des bisherigen Wissen 1

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

Abfrage des bisherigen Wissen 2

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

Abfrage des bisherigen Wissen 3

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

  1. gif
  2. jpg
  3. png

Abfragen des bisherigen Wissen 4

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);

Abfrage des bisherigen Wissen 5

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

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

Abfrage des bisherigen Wissen 6

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!

Abfrage des bisherigen Wissen 7

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

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

Abfrage des bisherigen Wissen 8

http://www.hm.edu/

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

Web Inspector

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


HTML-Code online validieren

Der Validator ist Euer Freund! Er hilft Euch, (Leichtsinns-)Fehler zu finden und zu korrigieren …

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!


Validierungsergebnisse

Die Fehler immer von Oben nach Unten bearbeiten – manche Fehler fallen weg, wenn man die vorherigen korrigiert hat!

Wenn Fehler gefunden werden, bekommt man angezeigt, in welcher Zeile sich dieser befindet:

Ersten Fehler korrigieren, Datei speichern und wieder validieren – häufig fallen dann Fehler, die darunter aufgelistet sind, von alleine weg …

Bitte macht dies Validieren so lange, bis keine Fehler mehr gefunden werden!


CSS Strategie

CSS-Code, den man nicht mehr benötigt, sofort entfernen oder zumindest auskommentieren! Später weiss man nicht mehr, ob dieser noch gebraucht wird oder nicht!

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
  • Auch den CSS-Code via Validator überprüfen lassen – auch hier schleichen sich sehr schnell Fehler ein! Das geht genauso wie beim Validieren von HTML …

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;
}

CSS Selektoren

Bild von Wilson Bilkovich

Schrittweise vom Vorschlaghammer zur Pinzette…


CSS Selektoren (Wiederholung)

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;
}

CSS Selektoren (mehrere Tags)

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;
}

Syntax-Check (1)

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>

Syntax-Check (1) Lösung

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;}

CSS Selektoren (eigene Klassen)

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;}

Hier etwas Text.

Dieser ist besonders wichtig.

Wieder normaler Text…


CSS Selektoren (mehrere Klassen)

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…


Syntax-Check (2)

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>

Syntax-Check (2) Lösung

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;}

CSS Selektoren (IDs)

Achtung: „ID“ steht für Identität: Ein ID-Name (z.B. "slogan") darf nur einmal pro HTML-Dokument vergeben werden!

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


CSS Selektoren (IDs) 2

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…


Syntax-Check (3)

Was ist hier falsch?

HTML

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

Syntax-Check (3) Lösung

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

CSS Box Model

CSS Box Model von Jon Hicks

  • 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

Unterschied „Margin“ & „Padding“

Epidemic von Tony Alter

Margin ist der Abstand von einem Objekt zu einem anderen – Padding ist das „Polster“ innerhalb eines Objektes

Politisch nicht korrekt, aber gut merkbar …


Padding (= Innenabstand)

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%;
}

Lorem ipsum qui ex sale facilis, vel in quidam adolescens. Cum ut ludus homero liberavisse, ex nec lobortis scripserit reformidans. Ignota posidonium ea ius, eos atomorum pericula elaboraret eu. Mea inani deseruisse ea, at nam salutandi instructior, alii impetus dolorem cum at


Margin (= Außenabstand)

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;
}

Überschrift

Lorem ipsum qui ex sale facilis, vel in quidam adolescens. Cum ut ludus homero liberavisse


Codepen: Margin & Padding

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!


Negative Margins

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.


Zentrieren via „Auto“

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.


noch zwei neue HTML5-Tags

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

Einbinden von Sounds in HTML5

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!

HTML

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

Demo

Sound-Beispiel von der Website http://soundbible.com/royalty-free-sounds-1.html


Einbinden von Video in HTML5

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


Einbinden von Filmen von Vimeo oder Youtube

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>

Themenrelevante Artikel online

Bitte lest diesen! Der Artikel erklärt detaillierter, was ich heute zum CSS Boxmodel gesagt habe …


Übung/Hausaufgabe


Eigenes Portfolio

Serious von zoghal

Zwischenpräsentation (Konzeption und visuelle Gestaltung) am 14.12.17

  • 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 – und schaut Euch die Sketch-Tutorials bei Lynda.com an!


Konzept-Ideen und Scribbles Eures Portfolios

Bitte erstellt bis zum 23.11.17 Scribbles Eures Portfolios – analog auf Papier…

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


Übung „Fotografie“

  1. Die HTML-Datei ist schon vorhanden und darf nicht verändert werden
  2. Schreibt Eure CSS-Anweisungen in die (beigefügte) Datei „style.css“. Dort sind schon ein paar wichtige Angaben drinnen – nicht entfernen!
  3. Am Ende soll die Seite in schmalster Darstellung wie auf der Vorlage Fotografie_schmal.jpg aussehen.
  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


Danke!

Weitere Vorträge: