Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

HTML5 für Entwickler: Part 2, 2014

861 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
  • Als Erste(r) kommentieren

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 !

×