HTML5 für Entwickler: Part 2, 2014

720 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
720
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
3
Aktionen
Geteilt
0
Downloads
6
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

HTML5 für Entwickler: Part 2, 2014

  1. 1. 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 HTML5 für Entwickler 2. Teil ! Markus Greve Für den Abendkurs der Typographischen Gesellschaft München, 2014 Kochan & Partner Brand Design Development
  2. 2. Organisatorisches 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-tho n 2013 2 Kochan & Partner Brand Design Development
  3. 3. Part 2 CSS 3 Kochan & Partner Brand Design Development
  4. 4. Selektoren Textfluss Transformationen Transitionen, Animationen 4 Kochan & Partner Brand Design Development
  5. 5. Selektoren CSS2.1 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"... 5 Kochan & Partner Brand Design Development
  6. 6. Selektoren CSS2.1: Demo 6 Kochan & Partner Brand Design Development
  7. 7. Selektoren CSS3 (1) 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 7 Kochan & Partner Brand Design Development
  8. 8. Selektoren CSS3 (2) 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>) 8 Invertierung von Selektionsbedingungen Kochan & Partner Brand Design Development
  9. 9. Selektoren CSS3: Demo 9 Kochan & Partner Brand Design Development
  10. 10. Selektoren für WebForms 2.0 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 10 Kochan & Partner Brand Design Development
  11. 11. Selektoren für WebForms 2.0: Demo 11 Kochan & Partner Brand Design Development
  12. 12. Selektoren Textfluss Transformationen Transitionen, Animationen 12 Kochan & Partner Brand Design Development
  13. 13. Textfluss 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 13 Kochan & Partner Brand Design Development
  14. 14. Textfluss: Demo 14 Kochan & Partner Brand Design Development
  15. 15. Selektoren Textfluss Transformationen Transitionen, Animationen 15 Kochan & Partner Brand Design Development
  16. 16. Transformationen Koordinatensystem, Perspektive, Perspektiv-Verhalten transform-style Hardware-Beschleunigung Kombinierbare Transformationen | Rotation | Skalierung | Translation | Neigung | Ursprung | Matrizen-Manipulation 16 Kochan & Partner Brand Design Development
  17. 17. Transformationen: Demo (1) 17 Kochan & Partner Brand Design Development
  18. 18. Transformationen: Demo (2) 18 Kochan & Partner Brand Design Development
  19. 19. Transformationen: Demo 2D 19 Kochan & Partner Brand Design Development
  20. 20. Selektoren Textfluss Transformationen Transitionen, Animationen 20 Kochan & Partner Brand Design Development
  21. 21. Transitions: Übergänge zwischen Property-Werten Properties all, none, <properties> Dauer Timing-Funktion linear, ease*, cubic-bezier Start-Verzögerung 21 Kochan & Partner Brand Design Development
  22. 22. Transitions: Beispiele Vollständige Notation transition-property: width; transition-duration: 2s; transition-timing-function: linear; transition-delay: .5s; Kurzschreibweise und multiple Übergänge transition: width 2s linear, height 1s ease-in, left .5s ease-in-out; 22 Kochan & Partner Brand Design Development
  23. 23. Transitions: Demo 23 Kochan & Partner Brand Design Development
  24. 24. Animationen Keyframe-Defintionen Start/Ende from, to oder Prozentwert 0 – 100% Animations-Property | Dauer | Anzahl Wiederholungen | Timing-Funktion | Richtung 24 Kochan & Partner Brand Design Development
  25. 25. Animationen: Demo 25 Kochan & Partner Brand Design Development
  26. 26. Zusammenfassung: CSS Selektoren CSS 2.1, CSS 3 Textfluss: Blocks, Mehrspaltigkeit, Textkürzung Transformationen 2D, 3D Übergänge mit Transitions Keyframe Animationen 26 Kochan & Partner Brand Design Development
  27. 27. Praxis Aufgaben 27 Kochan & Partner Brand Design Development
  28. 28. Praxis-Aufgaben Vorlage und Musterlösung http://www.kochan.de/html5/part2css.zip 28 Kochan & Partner Brand Design Development
  29. 29. Praxis-Aufgabe #1 2D Transformation: Rotation einer <div> 2D Transformation: Keyframe Animationen mit Position und Farbe 29 Kochan & Partner Brand Design Development
  30. 30. Praxis-Aufgabe #2 2D Transformationen #d1 ! ! #d2 ! ! #d3 #d4 ! 3D Transformation: »Banken–Bildung« ! ! ! ! ! Keyframe Animation »Ausfalten« 30 Kochan & Partner Brand Design Development
  31. 31. Vielen Dank! Kochan & Partner Brand Design Development © 2014 – Alle Rechte vorbehalten. ! Kochan & Partner GmbH
 Hirschgartenallee 25
 80639 München Telefon +49 89 178 49 78
 Fax +49 89 178 1235
 kontakt@kochan.de www.kochan.de !

×