html5 für entwickler: part 2, 2014

31
Kochan & Partner Brand Design Development HTML5 für Entwickler 2. Teil Markus Greve Für den Abendkurs der Typographischen Gesellschaft München, 2014 markup, noun. A markup language is a modern system for annotating a document in a way that is syntactically distinguishable from the text. The idea and terminology evolved from the »marking up« of manuscripts —Wikipedia

Upload: markus-greve

Post on 27-Jun-2015

287 views

Category:

Technology


1 download

DESCRIPTION

In dieser zweiten Ausgabe für 2014 sind neben dem Theorie-Teil (Selektoren, Textfluss, Transformationen, Transitionen und Animationen) zwei praktische Aufgaben enthalten. Neben einer Vorlage zum starten werden auch zwei exemplarische Musterlösungen bereitgestellt.

TRANSCRIPT

Page 1: HTML5 für Entwickler: Part 2, 2014

Kochan & PartnerBrandDesignDevelopment

HTML5 für Entwickler 2. Teil !Markus Greve Für den Abendkurs der Typographischen

Gesellschaft München, 2014

markup, noun. A markup language is a modern

system for annotating a document in a way that is

syntactically distinguishable from the text. The idea

and terminology evolved from the »marking up« of

manuscripts

—Wikipedia

Page 2: HTML5 für Entwickler: Part 2, 2014

Kochan & Partner Brand Design Development

Organisatorisches

2

30.01. Einführung Hidden Gems Part 1: Markup !06.02. Part 2: CSS

13.02. Part 3: Javascript

20.02. Hack-a-thon: Thema offen!

Hack-a-thon 2013

Page 3: HTML5 für Entwickler: Part 2, 2014

Kochan & Partner Brand Design Development 3

Part 2 CSS

Page 4: HTML5 für Entwickler: Part 2, 2014

Kochan & Partner Brand Design Development 4

Selektoren Textfluss Transformationen Transitionen, Animationen

Page 5: HTML5 für Entwickler: Part 2, 2014

Kochan & Partner Brand Design Development

Selektoren CSS2.1

5

Pseudo-Klassen

:first-child Genau das erste Kind

:last-child Genau das letzte Kind

Attribut-spezifische Selektion

element[attribute] element mit Attribut attribute

a[target="_blank"] Anchor mit Attribut target und Attributwert exakt "_blank"

div[class~="copytext"] Division mit einer mindestens der Klasse copytext (= div.copytext)

div[lang|="de"] Division mit Attribut lang matcht alle Werte, die von links mit de beginnen, z.B. lang="de", lang="de-de, de-at"...

Page 6: HTML5 für Entwickler: Part 2, 2014

Kochan & Partner Brand Design Development

Selektoren CSS2.1: Demo

6

Page 7: HTML5 für Entwickler: Part 2, 2014

Kochan & Partner Brand Design Development

Selektoren CSS3 (1)

7

Pseudo-Klassen

:root Das root-Element des Dokuments, body

:nth-child(n) Das n-te Kind, z.B. nth-child(7), nth-child(odd)oder nth-child(even)

:nth-last-child(n) dito, umgekehrte Zählung

:first-of-type Selektiert nur das erste zutreffende Element

:last-of-type dito, umgekehrte Zählung

:nth-of-type(n) dito, n-tes zutreffendes Element

:nth-last-of-type(n) (…)

:only-child Ein Einzelkind

:empty Ein leeres Element

:enabled, :disabled Ein- oder ausgeschaltetes Element, z.B. Button

:checked Markiertes Element, z.B. Checkbox oder Radiobox

Page 8: HTML5 für Entwickler: Part 2, 2014

Kochan & Partner Brand Design Development

Selektoren CSS3 (2)

8

Pseudo-Elemente

:first-line Die erste Zeile des Textes

:first-letter Der erste Buchstabe des Textes

:before Generierter Inhalt vor dem Element

:after Generierter Inhalt nach dem Element

Attribut-spezifische Selektion

div[lang^="de"] Attributwert beginnt mit "de"

div[lang$="de"] Attributwert endet mit "de"

div[lang*="de"] Attributwert beinhaltet "de"

Negation

:not(<CSS 3 Selector>) Invertierung von Selektionsbedingungen

Page 9: HTML5 für Entwickler: Part 2, 2014

Kochan & Partner Brand Design Development

Selektoren CSS3: Demo

9

Page 10: HTML5 für Entwickler: Part 2, 2014

Kochan & Partner Brand Design Development

Selektoren für WebForms 2.0

10

Pseudo-Elemente

:default Default-submit Button des Formulars

:indeterminate Unbestimmte Check- und Radioboxen

:valid Gültiger Wert

:invalid Ungültiger Wert

:in-range Innerhalb des Wertebereichs

:out-of-range Außerhalb des Wertebereichs

:required Pflichtfeld

:optional Elemente ohne required und ohne Validierung

:read-only Schreibgeschützte Elemente

:read-write Elemente ohne Schreibschutz

Page 11: HTML5 für Entwickler: Part 2, 2014

Kochan & Partner Brand Design Development

Selektoren für WebForms 2.0: Demo

11

Page 12: HTML5 für Entwickler: Part 2, 2014

Kochan & Partner Brand Design Development 12

Selektoren Textfluss Transformationen Transitionen, Animationen

Page 13: HTML5 für Entwickler: Part 2, 2014

Kochan & Partner Brand Design Development

Textfluss

13

Eingebundene Block-Darstellung display: inline-block

Mehrspaltiger Textfluss column-count, column-rule, column-gap

Textkürzung text-overflow: ellipsis Hinweis! white-space: nowrap nicht vergessen

Page 14: HTML5 für Entwickler: Part 2, 2014

Kochan & Partner Brand Design Development

Textfluss: Demo

14

Page 15: HTML5 für Entwickler: Part 2, 2014

Kochan & Partner Brand Design Development 15

Selektoren Textfluss Transformationen Transitionen, Animationen

Page 16: HTML5 für Entwickler: Part 2, 2014

Kochan & Partner Brand Design Development

Transformationen

16

Koordinatensystem, Perspektive, Perspektiv-Verhalten transform-style

Hardware-Beschleunigung

Kombinierbare Transformationen

| Rotation

| Skalierung

| Translation

| Neigung

| Ursprung

| Matrizen-Manipulation

Page 17: HTML5 für Entwickler: Part 2, 2014

Kochan & Partner Brand Design Development

Transformationen: Demo (1)

17

Page 18: HTML5 für Entwickler: Part 2, 2014

Kochan & Partner Brand Design Development

Transformationen: Demo (2)

18

Page 19: HTML5 für Entwickler: Part 2, 2014

Kochan & Partner Brand Design Development

Transformationen: Demo 2D

19

Page 20: HTML5 für Entwickler: Part 2, 2014

Kochan & Partner Brand Design Development 20

Selektoren Textfluss Transformationen Transitionen, Animationen

Page 21: HTML5 für Entwickler: Part 2, 2014

Kochan & Partner Brand Design Development

Transitions: Übergänge zwischen Property-Werten

21

Properties all, none, <properties>

Dauer

Timing-Funktion linear, ease*, cubic-bezier

Start-Verzögerung

Page 22: HTML5 für Entwickler: Part 2, 2014

Kochan & Partner Brand Design Development

Transitions: Beispiele

22

transition-property: width; transition-duration: 2s; transition-timing-function: linear; transition-delay: .5s;

Vollständige Notation

transition: width 2s linear, height 1s ease-in, left .5s ease-in-out;

Kurzschreibweise und multiple Übergänge

Page 23: HTML5 für Entwickler: Part 2, 2014

Kochan & Partner Brand Design Development

Transitions: Demo

23

Page 24: HTML5 für Entwickler: Part 2, 2014

Kochan & Partner Brand Design Development

Animationen

24

Keyframe-Defintionen Start/Ende from, to oder Prozentwert 0 – 100%

Animations-Property

| Dauer

| Anzahl Wiederholungen

| Timing-Funktion

| Richtung

Page 25: HTML5 für Entwickler: Part 2, 2014

Kochan & Partner Brand Design Development

Animationen: Demo

25

Page 26: HTML5 für Entwickler: Part 2, 2014

Kochan & Partner Brand Design Development

Zusammenfassung: CSS

26

Selektoren CSS 2.1, CSS 3

Textfluss: Blocks, Mehrspaltigkeit, Textkürzung

Transformationen 2D, 3D

Übergänge mit Transitions

Keyframe Animationen

Brand Design Development

Page 27: HTML5 für Entwickler: Part 2, 2014

Kochan & Partner Brand Design Development 27

Praxis Aufgaben

Page 28: HTML5 für Entwickler: Part 2, 2014

Kochan & Partner Brand Design Development

Praxis-Aufgaben

28

Vorlage und Musterlösung

http://www.kochan.de/html5/part2css.zip

Brand Design Development

Page 29: HTML5 für Entwickler: Part 2, 2014

Kochan & Partner Brand Design Development

Praxis-Aufgabe #1

29

2D Transformation: Rotation einer <div>

2D Transformation: Keyframe Animationen mit Position und Farbe

Brand Design Development

Page 30: HTML5 für Entwickler: Part 2, 2014

Kochan & Partner Brand Design Development

Praxis-Aufgabe #2

30

2D Transformationen

!!!!!3D Transformation: »Banken–Bildung«

!!!!!Keyframe Animation »Ausfalten«

Brand Design Development

#d1#d2

#d3#d4

Page 31: HTML5 für Entwickler: Part 2, 2014

Kochan & PartnerBrandDesignDevelopment

Vielen Dank!

© 2014 – Alle Rechte vorbehalten. !Kochan & Partner GmbHHirschgartenallee 2580639 München Telefon +49 89 178 49 78Fax +49 89 178 [email protected] www.kochan.de !