HTML, CSS und Bootstrap für Designer

1. XING Workshop 2014
<Developing UXD>
So leicht ist Frontendentwicklung für
Konzepter und Designer heute

2. Conni und Jerry: Wer wir sind
2

3. Conni
Cornelia Erbs
Freelancerin als Senior User
Experience Architect
Davor Senior User Experience Architect
für große Hamburger Agenturen
„HTML-Wireframing ist so spannend
wie Rätsel lösen.“
3

4. Jerry
Jeremias Dombrowsky
Senior Frontend Engineer bei XING
Davor Creative Technologist für
namhafte Agenturen und Unternehmen
„Wenn UX Designer HTML und CSS
lernen, haben Entwickler mehr Zeit
zum Programmieren.“
4

5. Und wer seid ihr?
5
• Name
• Job
• Vorkenntnisse
• Wünsche an den Workshop

6. Ziele des Workshops
6

7. Ziele des Workshops
7

8. Ziele des Workshops
• Quellcode lesen und verstehen
7

9. Ziele des Workshops
• Quellcode lesen und verstehen
• Die erste Hürde des Selbst-Codens nehmen
7

10. Ziele des Workshops
• Quellcode lesen und verstehen
• Die erste Hürde des Selbst-Codens nehmen
• Wissen, wie man weiter lernen kann
7

11. Nach dem Workshop könnt ihr noch nicht:
8

12. Axure wegschmeißen
und direkt alle Wireframes
per Code erzeugen.
9

13. Einführung: Warum wir dazu lernen müssen
10

14. Warum sollten wir HTML und CSS lernen?
11

15. Warum sollten wir HTML und CSS lernen?
• Die Basis dessen, was wir gestalten, sollten wir kennen.
11

16. Warum sollten wir HTML und CSS lernen?
• Die Basis dessen, was wir gestalten, sollten wir kennen.
• Zumal: Die Tools wechseln, HTML bleibt!
11

17. Warum sollten wir HTML und CSS lernen?
• Die Basis dessen, was wir gestalten, sollten wir kennen.
• Zumal: Die Tools wechseln, HTML bleibt!
• Und: Eine neue Generation „native Developers“ kommt.
11

18. ”Coding is going to be
the literacy
of the 21st Century.“
ZACH SIMS
Co-Founder Codecademy

19. Es kann unsere Arbeitsweise verbessern!
13

20. Es kann unsere Arbeitsweise verbessern!
13
Heutige Arbeitsweise
Technisch
umsetzen
Anforderungen
klären
Wireframes
erstellen
Screens
erstellen

21. Es kann unsere Arbeitsweise verbessern!
Abstrakt und statisch
Abstrakt
Abstrakt und statisch
13
Heutige Arbeitsweise
Technisch
umsetzen
Anforderungen
klären
Wireframes
erstellen
Screens
erstellen

22. Es kann unsere Arbeitsweise verbessern!
Abstrakt und statisch
Abstrakt
Abstrakt und statisch
Echt Aber
13
Heutige Arbeitsweise
Technisch
umsetzen
Anforderungen
klären
Wireframes
erstellen
Screens
erstellen
anders

23. Es kann unsere Arbeitsweise verbessern!
14
Zukünftige Arbeitsweise

24. Es kann unsere Arbeitsweise verbessern!
14
Statische
Dokumente
• Brief
• User Journeys
• Sketching
• Look & Feel
Zukünftige Arbeitsweise

25. Es kann unsere Arbeitsweise verbessern!
Wireframes in
HTML + CSS
14
Statische
Dokumente
• Brief
• User Journeys
• Sketching
• Look & Feel
Prototypen
Zukünftige Arbeitsweise
Layout in
HTML + CSS

26. Es kann unsere Arbeitsweise verbessern!
Wireframes in
HTML + CSS
14
Statische
Dokumente
• Brief
• User Journeys
• Sketching
• Look & Feel
Prototypen
Zukünftige Arbeitsweise
Layout in
HTML + CSS

27. Es kann unsere Arbeitsweise verbessern!
Wireframes in
HTML + CSS
14
Statische
Dokumente
• Brief
• User Journeys
• Sketching
• Look & Feel
Prototypen
Zukünftige Arbeitsweise
Layout in
HTML + CSS
Entwicklung
Website

28. Es kann unsere Arbeitsweise verbessern!
Wireframes in
HTML + CSS
14
Statische
Dokumente
• Brief
• User Journeys
• Sketching
• Look & Feel
Prototypen
Zukünftige Arbeitsweise
Layout in
HTML + CSS
Entwicklung
Website

29. Ende der Einführung. Fragen?
15

30. Agenda
✓ Einführung
• HTML-Grundlagen
• CSS-Grundlagen
• Bootstrap
• Ausblick
16

31. HTML-Grundlagen
17

32. HTML: Aufbau und Inhalte einer Website
18

33. Interaktiv: Layout-Elemente kennenlernen
19

34. HTML: Layout-Elemente
20

35. HTML: Layout-Elemente
• header, footer, aside, nav, main, article, section:
"Sectioning elements" gruppieren inhaltlich
20

36. HTML: Layout-Elemente
• header, footer, aside, nav, main, article, section:
"Sectioning elements" gruppieren inhaltlich
• main: Einzigartig! Hauptinhalte kommen hier rein.
20

37. HTML: Layout-Elemente
• header, footer, aside, nav, main, article, section:
"Sectioning elements" gruppieren inhaltlich
• main: Einzigartig! Hauptinhalte kommen hier rein.
• article: Muss alleine stehen können (RSS-Feed, Pocket)
20

38. HTML: Layout-Elemente
• header, footer, aside, nav, main, article, section:
"Sectioning elements" gruppieren inhaltlich
• main: Einzigartig! Hauptinhalte kommen hier rein.
• article: Muss alleine stehen können (RSS-Feed, Pocket)
• nav: Nur für Navigation auf der Website
20

39. HTML: Layout-Elemente
• header, footer, aside, nav, main, article, section:
"Sectioning elements" gruppieren inhaltlich
• main: Einzigartig! Hauptinhalte kommen hier rein.
• article: Muss alleine stehen können (RSS-Feed, Pocket)
• nav: Nur für Navigation auf der Website
• div: Gruppiert für Styling, nicht inhaltlich (semantisch)
20

40. Interaktiv: Inhaltselemente kennenlernen
21

41. HTML: Inhaltselemente – Textinhalte
• h1, h2: Heading. Pro section ein neues h1.
• p: Absatz ("paragraph")
• a: Link ("anchor"). Darf weitere Inhalte enthalten.
22

42. HTML: Inhaltselemente – Weitere Inhalte
23

43. HTML: Inhaltselemente – Weitere Inhalte
• img: "image" – Bildelement
23

44. HTML: Inhaltselemente – Weitere Inhalte
• img: "image" – Bildelement
• ul, ol: "unordered/ordered list" – eine Liste mit
Bulletpoints oder Nummerierungen.
Darf nur li-Elemente enthalten.
23

45. HTML: Inhaltselemente – Weitere Inhalte
• img: "image" – Bildelement
• ul, ol: "unordered/ordered list" – eine Liste mit
Bulletpoints oder Nummerierungen.
Darf nur li-Elemente enthalten.
• li: "List item" – darf andere Elemente enthalten.
23

46. HTML: Inhaltselemente – Weitere Inhalte
• img: "image" – Bildelement
• ul, ol: "unordered/ordered list" – eine Liste mit
Bulletpoints oder Nummerierungen.
Darf nur li-Elemente enthalten.
• li: "List item" – darf andere Elemente enthalten.
• audio, video, canvas, object: Media-Inhalte
23

47. Fragen soweit?
24

48. HTML: Syntax
25

49. Tags
<p>Das ist mein Absatz</p>
26

50. Tags
Opening <tag> Closing </tag>
<p>Das ist mein Absatz</p>
26

51. Tags
Opening <tag> Closing </tag>
<p>Das ist mein Absatz</p>
• Layout-Elemente haben "opening" und "closing tags".
26

52. Tags
Opening <tag> Closing </tag>
<p>Das ist mein Absatz</p>
• Layout-Elemente haben "opening" und "closing tags".
• Ermöglicht Verschachtelung
26

53. Tags
Opening <tag> Closing </tag>
<p>Das ist mein Absatz</p>
• Layout-Elemente haben "opening" und "closing tags".
• Ermöglicht Verschachtelung
• Es gibt Elemente ohne "closing tags". z.B. <img>
26

54. Tags: Verschachtelung
<article>
<h1>Welcome</h1>
<p>Das ist mein Absatz, der <em>auch</em>
verschachtelte Elemente enthält.</p>
</article>
27

55. Tags: Verschachtelung
<article>
<h1>Welcome</h1>
<p>Das ist mein Absatz, der <em>auch</em>
verschachtelte Elemente enthält.</p>
</article>
27
Opening <article>
Closing <article>

56. Tags: Verschachtelung
<article>
<h1>Welcome</h1>
<p>Das ist mein Absatz, der <em>auch</em>
verschachtelte Elemente enthält.</p>
</article>
27
Opening <article>
Closing <article>
Nested <h1>

57. Tags: Verschachtelung
<article>
<h1>Welcome</h1>
<p>Das ist mein Absatz, der <em>auch</em>
verschachtelte Elemente enthält.</p>
</article>
27
Opening <article>
Closing <article>
Nested <h1>
Nested <p>

58. Tags: Verschachtelung
<article>
<h1>Welcome</h1>
<p>Das ist mein Absatz, der <em>auch</em>
verschachtelte Elemente enthält.</p>
</article>
27
Opening <article>
Closing <article>
Nested <h1>
Nested <p>
Nested <em>

59. 28
Attribute
<img src="img/logo.png">

60. 28
Attribute
attribute
= Eigenschaft
<img src="img/logo.png">

61. "value"
= Wert der Eigenschaft
28
Attribute
attribute
= Eigenschaft
<img src="img/logo.png">

62. "value"
= Wert der Eigenschaft
28
Attribute
attribute
= Eigenschaft
<img src="img/logo.png">
• Elemente haben unterschiedliche attributes

63. "value"
= Wert der Eigenschaft
28
Attribute
attribute
= Eigenschaft
<img src="img/logo.png">
• Elemente haben unterschiedliche attributes
• Es gibt attributes ohne value
z.B. <input type="email" required>

64. 29
Attribute: Wichtige

65. 29
Attribute: Wichtige
<input id="i-am-unique">

66. Attribute: Wichtige
<input id="i-am-unique">
Kennzeichnet ein zwingend einzigartiges Element, z.B.
input im Formular; #jumpmark im gleichen Dokument
29

67. Attribute: Wichtige
<input id="i-am-unique">
Kennzeichnet ein zwingend einzigartiges Element, z.B.
input im Formular; #jumpmark im gleichen Dokument
<a class="nav-link nav-link--active">Home</a>
29

68. Attribute: Wichtige
<input id="i-am-unique">
Kennzeichnet ein zwingend einzigartiges Element, z.B.
input im Formular; #jumpmark im gleichen Dokument
<a class="nav-link nav-link--active">Home</a>
Wird fürs Styling verwendet. Elemente können mehrere
"class names" enthalten.
29

69. Attribute: Beispiele
30

70. Attribute: Beispiele
<img src="img/my-dog.jpg" alt="Caja">
30

71. Attribute: Beispiele
<img src="img/my-dog.jpg" alt="Caja">
<a href="contact.html">Contact</a>
30

72. Attribute: Beispiele
<img src="img/my-dog.jpg" alt="Caja">
<a href="contact.html">Contact</a>
<a href="http://google.com" target="_blank">Leave</a>
30

73. Attribute: Beispiele
<img src="img/my-dog.jpg" alt="Caja">
<a href="contact.html">Contact</a>
<a href="http://google.com" target="_blank">Leave</a>
<label for="user-mail">Your email address:</label>
30

74. Attribute: Beispiele
<img src="img/my-dog.jpg" alt="Caja">
<a href="contact.html">Contact</a>
<a href="http://google.com" target="_blank">Leave</a>
<label for="user-mail">Your email address:</label>
<input id="user-mail" type="email"
30

75. Attribute: Beispiele
<img src="img/my-dog.jpg" alt="Caja">
<a href="contact.html">Contact</a>
<a href="http://google.com" target="_blank">Leave</a>
<label for="user-mail">Your email address:</label>
<input id="user-mail" type="email"
placeholder="me@me.io" required>
30

76. Attribute: Beispiele
<img src="img/my-dog.jpg" alt="Caja">
<a href="contact.html">Contact</a>
<a href="http://google.com" target="_blank">Leave</a>
<label for="user-mail">Your email address:</label>
<input id="user-mail" type="email"
placeholder="me@me.io" required>
<script src="js/scripts.js"></script>
30

77. Attribute: Beispiele
<img src="img/my-dog.jpg" alt="Caja">
<a href="contact.html">Contact</a>
<a href="http://google.com" target="_blank">Leave</a>
<label for="user-mail">Your email address:</label>
<input id="user-mail" type="email"
placeholder="me@me.io" required>
<script src="js/scripts.js"></script>
• Die Attribute von allen Elementen findet ihr
unter MDN (Mozilla Developer Network)
30

78. Interaktiv: HTML-Elemente untersuchen
www.developinguxd.com
31

79. HTML-Elemente untersuchen
• Google Chrome: "Chrome Developer Tools (DevTools)"
• Rechtsklick auf Element: "Element untersuchen"
(Profis drücken cmd+shift+c)
• Aufklappen, Auswählen, per "Brotkrumen" navigieren
• Text ändern, Elemente verschieben und löschen
32

80. HTML: Dokument erstellen
33

81. Sublime Text 3 einrichten: komplett
• Download: http://www.sublimetext.com/3
• Einstellungen: "Default Settings" in "User Settings"
kopieren und anpassen
• Package Control installieren für Erweiterungen
• cmd+shift+p "Package Install":
Emmet, SidebarEnhancements, BracketHighlighter,
Color Highlighter
34

82. Interaktiv: Dokument erstellen
rohrpostix ☛ Daten/Transfer/Developing UXD/ kopieren!
Dann Schreibtisch ☛ Developing UXD/exercises/01_html_start
öffnen
35

83. Dokument erstellen
36

84. Dokument erstellen
• Mit Emmet: html:5Tab
36

85. Dokument erstellen
• Mit Emmet: html:5Tab
• HTML5 Doctype: <!doctype html>
36

86. Dokument erstellen
• Mit Emmet: html:5Tab
• HTML5 Doctype: <!doctype html>
• head: Metadaten, Dokumenttitel, Link zu Stylesheets
36

87. Dokument erstellen
• Mit Emmet: html:5Tab
• HTML5 Doctype: <!doctype html>
• head: Metadaten, Dokumenttitel, Link zu Stylesheets
• body: Sichtbare Inhalte, Link zu JavaScripts am Ende
36

88. Interaktiv: HTML schreiben
37

89. Weitere Ressourcen
38

90. Weitere Ressourcen
• codecademy.com – kostenloser Onlinekurs
38

91. Weitere Ressourcen
• codecademy.com – kostenloser Onlinekurs
• developer.mozilla.org – MDN: alles zu HTML und CSS
38

92. Weitere Ressourcen
• codecademy.com – kostenloser Onlinekurs
• developer.mozilla.org – MDN: alles zu HTML und CSS
• stackoverflow.com – Fragen und Antworten
38

93. Weitere Ressourcen
• codecademy.com – kostenloser Onlinekurs
• developer.mozilla.org – MDN: alles zu HTML und CSS
• stackoverflow.com – Fragen und Antworten
• abookapart.com – Bücher zu HTML5, CSS3 und mehr
38

94. Weitere Ressourcen
• codecademy.com – kostenloser Onlinekurs
• developer.mozilla.org – MDN: alles zu HTML und CSS
• stackoverflow.com – Fragen und Antworten
• abookapart.com – Bücher zu HTML5, CSS3 und mehr
• amp-what.com – Sonderzeichen finden
38

95. Weitere Ressourcen
• codecademy.com – kostenloser Onlinekurs
• developer.mozilla.org – MDN: alles zu HTML und CSS
• stackoverflow.com – Fragen und Antworten
• abookapart.com – Bücher zu HTML5, CSS3 und mehr
• amp-what.com – Sonderzeichen finden
• codepen.io und jsbin.com – Online-Editoren
38

96. Das ist HTML. Fragen?
39

97. Agenda
✓ Einführung
✓ HTML-Grundlagen
• CSS-Grundlagen
• Bootstrap
• Ausblick
40

98. CSS-Grundlagen
41

99. CSS: Elemente finden und stylen
42

100. Selektoren: class
<img src="img/logo.png" alt="IA Konferenz">
43

101. Selektoren: class
<img src="img/logo.png" alt="IA Konferenz">
Nicht jedes <img> soll gleich gestylt werden
43

102. Selektoren: class
<img src="img/logo.png" alt="IA Konferenz">
Nicht jedes <img> soll gleich gestylt werden
<img class="logo" src="img/logo.png" alt="IA Konferenz">
43

103. Selektoren: class
<img src="img/logo.png" alt="IA Konferenz">
Nicht jedes <img> soll gleich gestylt werden
<img class="logo" src="img/logo.png" alt="IA Konferenz">
Durch das class-Attribut können wir das Element stylen
43

104. <img class="logo" src="img/logo.png" alt="IA Konferenz">
44
Selektoren: class

105. <img class="logo" src="img/logo.png" alt="IA Konferenz">
.logo {
width: 200px;
height: 100px;
}
44
Selektoren: class

106. <img class="logo" src="img/logo.png" alt="IA Konferenz">
.class-selector beginnt immer mit einem Punkt.
.logo {
width: 200px;
height: 100px;
}
44
Selektoren: class

107. <img class="logo" src="img/logo.png" alt="IA Konferenz">
.class-selector beginnt immer mit einem Punkt.
.logo {
width: 200px;
height: 100px;
}
• Wir verwenden (fast) immer .class-Selektoren!
44
Selektoren: class

108. .logo {
width: 200px;
height: 100px;
}
45
Selektoren: class

109. .logo {
width: 200px;
height: 100px;
}
Eine "declaration" besteht
aus property und value.
45
Selektoren: class

110. Selektoren: class
.logo {
width: 200px;
height: 100px;
}
45
:
Eine "declaration" besteht
aus property und value.

111. Selektoren: class
.logo {
width: 200px;
height: 100px;
}
45
:
Eine "declaration" besteht
aus property und value.
;

112. .logo {
width: 200px;
height: 100px;
}
45
:
Eine "declaration" besteht
aus property und value.
; selector und
{ declaration block }
bilden ein "Rule Set"
Selektoren: class

113. Interaktiv: CSS mit DevTools untersuchen
www.developinguxd.com
46

114. CSS untersuchen
• Element auswählen, Declarations ein- und ausschalten,
Werte ändern (auch mit Pfeiltasten und Shift)
• Element auswählen, class-Attribut hinzufügen und
entfernen
47

115. CSS: Learnings durch DevTools
• h1: "Element-Selektoren" nur für sehr allgemeine Styles,
sind weniger spezifisch als Klassen.
• h1, .main-headline: Ein Rule Set kann mehrere
kommagetrennte Selektoren haben.
• .page-nav .page-nav__link: Mehrteilige Selektoren sind
spezifischer. Hohe Spezifität ist schwer überschreibbar.
• #register: Ids haben höhere Spezifität als Klassen.
48

116. CSS: Wichtige Konzepte
49

117. CSS: Block- und Inline-Elemente
50
Block-Elemente
Stehen immer alleine pro
Zeile und füllen den Platz
aus. z. B. h1, p, ul, div

118. CSS: Block- und Inline-Elemente
50
Block-Elemente
Stehen immer alleine pro
Zeile und füllen den Platz
aus. z. B. h1, p, ul, div
Inline-Elemente
Teilen sich eine Zeile.
z. B. a, em, img, span

119. Demonstration: Block- und Inline-Elemente
51

120. CSS: Box Model
52

121. CSS: Box Model
Element
52
Element

122. CSS: Box Model
52
Padding
Element
Element

123. CSS: Box Model
52
Padding
Border
Element
Element

124. CSS: Box Model
Padding
Margin
52
Border
Element
Element

125. CSS: Box Model
Padding
Margin
53
Border
Element
Element

126. Demonstration: Box Model
54

127. CSS: Learnings Box Model
• Browser geben den Elementen Standard-Styles.
• padding wird auf die width und height draufgerechnet
• Inline-Elemente bekommen kein margin-top und
margin-bottom.
• margin-left: auto; margin-right: auto; zentriert Block-
Elemente horizontal.
55

128. Border, Margin und Padding: Werte
56
margin: 5px 10px 20px 3px;

129. Border, Margin und Padding: Werte
56
Oben
margin: 5px 10px 20px 3px;

130. Border, Margin und Padding: Werte
56
Oben Rechts
margin: 5px 10px 20px 3px;

131. Border, Margin und Padding: Werte
56
Oben
Rechts
margin: 5px 10px 20px 3px;
Unten

132. Border, Margin und Padding: Werte
56
Oben
Rechts
margin: 5px 10px 20px 3px;
Unten
Links

133. Border, Margin und Padding: Werte
56
Oben
Rechts
margin: 5px 10px 20px 3px;
Unten
Links
margin-top: 5px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 3px;

134. Border, Margin und Padding: Werte
57

135. Border, Margin und Padding: Werte
margin: 5px 10px 20px 3px; Oben Rechts Unten Links
57

136. Border, Margin und Padding: Werte
margin: 5px 10px 20px 3px; Oben Rechts Unten Links
57
margin: 5px 10px 20px 10px;

137. Border, Margin und Padding: Werte
margin: 5px 10px 20px 3px; Oben Rechts Unten Links
57
margin: 5px 10px 20px 10px;
margin: 5px 10px 5px 10px;

138. Border, Margin und Padding: Werte
margin: 5px 10px 20px 3px; Oben Rechts Unten Links
57
margin: 5px 10px 20px 10px;
margin: 5px 10px 5px 10px;
margin: 5px 5px 5px 5px;

139. Interaktiv: CSS schreiben
58
03_css_start

140. Weitere Ressourcen
59

141. Weitere Ressourcen
• css-tricks.com – CSS Tutorials und Tipps
59

142. Weitere Ressourcen
• css-tricks.com – CSS Tutorials und Tipps
• developer.mozilla.org – alles zu HTML und CSS
59

143. Weitere Ressourcen
• css-tricks.com – CSS Tutorials und Tipps
• developer.mozilla.org – alles zu HTML und CSS
• stackoverflow.com – Fragen und Antworten
59

144. Weitere Ressourcen
• css-tricks.com – CSS Tutorials und Tipps
• developer.mozilla.org – alles zu HTML und CSS
• stackoverflow.com – Fragen und Antworten
• shop.smashingmagazine.com – Smashing Library
59

145. Weitere Ressourcen
• css-tricks.com – CSS Tutorials und Tipps
• developer.mozilla.org – alles zu HTML und CSS
• stackoverflow.com – Fragen und Antworten
• shop.smashingmagazine.com – Smashing Library
• abookapart.com – Bücher zu HTML5, CSS3 und mehr
59

146. Das ist CSS. Fragen?
60

147. Agenda
✓ Einführung
✓ HTML-Grundlagen
✓ CSS-Grundlagen
• Bootstrap
• Ausblick
61

148. Bootstrap
62

149. Bootstrap: Was ist das?
63

150. Bootstrap is the most popular HTML, CSS, and JS
framework for developing responsive,
mobile first projects on the web.
64
Was ist Bootstrap?

151. Wie funktioniert Bootstrap?
65

152. Wie funktioniert Bootstrap?
• Verknüpfung: von Bootstrap-CSS sowie -JS mit dem
eigenen HTML
65

153. Wie funktioniert Bootstrap?
• Verknüpfung: von Bootstrap-CSS sowie -JS mit dem
eigenen HTML
• Automatisches Styling: von Typographie und Links
65

154. Wie funktioniert Bootstrap?
• Verknüpfung: von Bootstrap-CSS sowie -JS mit dem
eigenen HTML
• Automatisches Styling: von Typographie und Links
• Spezielles Styling: über das Einfügen von Klassen
65

155. Demonstration: Das ist Bootstrap.
getbootstrap.com
66

156. Bootstrap: CSS und Components
67
CSS
Typography
Code
Tables
Forms
Buttons
Images
Helper classes
Responsive utilities
Components
Glyphicons
Dropdowns
Button groups
Button dropdowns
Input groups
Navs
Navbar
Breadcrumbs
Pagination
Labels
Badges
Jumbotron
Page header
Thumbnails
Alerts
Progress bars
Media object
List group
Panels
Wells

157. Bootstrap: das Grid
68

158. Bootstrap: Grid
69

159. Bootstrap: Grid
• Grid-System für Adaptive und Responsive Web Design
69

160. Bootstrap: Grid
• Grid-System für Adaptive und Responsive Web Design
• Ist standardmäßig mobile first („scale up“)
69

161. Bootstrap: Grid
• Grid-System für Adaptive und Responsive Web Design
• Ist standardmäßig mobile first („scale up“)
• Funktioniert über verschachtelte Klassen
69

162. Bootstrap: Grid
1. Klasse container
container (fixed-width für Adaptive-Verhalten)
oder container-fluid (full-width für Fluid-Verhalten)
70

163. Bootstrap: Grid
1. Klasse container
container (fixed-width für Adaptive-Verhalten)
oder container-fluid (full-width für Fluid-Verhalten)
<div class="container-fluid">
</div>
70

164. 2. Klasse row
um Elemente nebeneinander anzuordnen
71
Bootstrap: Grid

165. 2. Klasse row
um Elemente nebeneinander anzuordnen
<div class="container-fluid">
<div class="row">
</div>
</div>
71
Bootstrap: Grid

166. 3. Klasse column (z.B. col-sm-6)
für die Definition der Spaltenbreite, basierend auf
einem 12-spaltigen Grid-System
72
Bootstrap: Grid

167. 3. Klasse column (z.B. col-sm-6)
für die Definition der Spaltenbreite, basierend auf
einem 12-spaltigen Grid-System
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">Halbe Reihe</div>
<div class="col-sm-6">Halbe Reihe</div>
</div>
</div>
72
Bootstrap: Grid

168. <div class="container-fluid">
<div class="row">
<div class="col-sm-6">Halbe Reihe</div>
<div class="col-sm-6">Halbe Reihe</div>
</div>
</div>
73
1. Container
2. Row
3. Columns
Bootstrap: Grid

169. Halbe Reihe Halbe Reihe
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">Halbe Reihe</div>
<div class="col-sm-6">Halbe Reihe</div>
</div>
</div>
73
1. Container
2. Row
3. Columns
Bootstrap: Grid

170. Bootstrap Grid: Columns
74
Extra small
devices
Phones
<768px
.col-xs-
Small
devices
Tablets
≥768px
.col-sm-
Medium
devices
Desktops
≥992px
.col-md-
Large
devices
Desktops
≥1200px
.col-lg-

171. Bootstrap Grid: Columns
74
Extra small
devices
Phones
<768px
.col-xs-
Small
devices
Tablets
≥768px
.col-sm-
Medium
devices
Desktops
≥992px
.col-md-
Large
devices
Desktops
≥1200px
.col-lg-
Eine Grid-Größe gilt immer für diese Größe und darüber:
sm gilt für sm, md und lg.

172. Bootstrap Grid: Columns mit Versatz
4 Spalten 4 Spalten
75

173. Bootstrap Grid: Columns mit Versatz
4 Spalten 4 Spalten
<div class="container-fluid">
<div class="row">
<div class=„col-sm-4“>4 Spalten</div>
<div class=„col-sm-4 col-md-offset-4“>4 Spalten</div>
</div>
</div>
75

174. Bootstrap Grid: Columns mit Versatz
4 Spalten 4 Spalten
<div class="container-fluid">
<div class="row">
<div class=„col-sm-4“>4 Spalten</div>
<div class=„col-sm-4 col-md-offset-4“>4 Spalten</div>
</div>
</div> Offset
75

175. Responsive und Mobile first: nicht heute
• Bootstrap ist von Haus aus responsive.
• Spezielle Elemente:
• Responsive tables
• Responsive images
• Responsive Utilities
(Sichtbarkeit toggeln)
76
Zu viele
Themen!

176. Interaktiv: Bootstrap kennenlernen
77

177. Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download unter http://getbootstrap.com/
78
downloads / bootstrap-3.3.0-dist
Dieses, bitte!

178. Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download unter http://getbootstrap.com/
79

179. Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download
• Schritt 2: Dateistruktur anlegen
Lokaler Ordner

180. Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download
• Schritt 2: Dateistruktur anlegen
getbootstrap.com Lokaler Ordner
css/bootstrap.css
fonts
js/bootstrap.js
css/
Neuer Ordner: fonts
Neuer Ordner: js

181. Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download
• Schritt 2: Dateistruktur anlegen
getbootstrap.com Lokaler Ordner
css/bootstrap.css
fonts
js/bootstrap.js
css/
Neuer Ordner: fonts
Neuer Ordner: js
jquery.com
jquery.js In den js-Ordner

182. Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download
• Schritt 2: Dateistruktur anlegen
getbootstrap.com Lokaler Ordner
css/bootstrap.css
fonts
js/bootstrap.js
css/
Neuer Ordner: fonts
Neuer Ordner: js
jquery.com
jquery.js In den js-Ordner
imsky.github.io/holder/
holder.js In den js-Ordner

183. Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download
• Schritt 2: Dateistruktur anlegen
• Schritt 3: Dateien verknüpfen
81

184. Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download
• Schritt 2: Dateistruktur anlegen
• Schritt 3: Dateien verknüpfen: (a) CSS
82
bootstrap.css im head
VOR dem eigenen CSS

185. Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download
• Schritt 2: Dateistruktur anlegen
• Schritt 3: Dateien verknüpfen: (b) JS
83
.js am Ende des bodys

186. Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download
• Schritt 2: Dateistruktur anlegen
• Schritt 3: Dateien verknüpfen
• Schritt 4: Layout-Elemente einfügen
z. B. Header, Primärnavigation,
Hauptcontent, Marginalspalte
und Footer
84

187. Erforderlich: Viewport meta Tag im head
<meta name="viewport" content="width=device-width,
initial-scale=1">
Ermöglicht Responsive Web Design
auf mobilen Geräten
85

188. Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download
• Schritt 2: Dateistruktur anlegen
• Schritt 3: Dateien verknüpfen
• Schritt 4: Layout-Elemente einfügen
• Schritt 5: Grid anlegen
86

189. Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download
• Schritt 2: Dateistruktur anlegen
• Schritt 3: Dateien verknüpfen
• Schritt 4: Layout-Elemente einfügen
• Schritt 5: Grid anlegen
mit Hilfe der Bootstrap-Doku
86

190. Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download
• Schritt 2: Dateistruktur anlegen
• Schritt 3: Dateien verknüpfen
• Schritt 4: Layout-Elemente einfügen
• Schritt 5: Grid anlegen
• Schritt 6: Inhaltselemente anlegen und stylen
87

191. Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download
• Schritt 2: Dateistruktur anlegen
• Schritt 3: Dateien verknüpfen
• Schritt 4: Layout-Elemente einfügen
• Schritt 5: Grid anlegen
• Schritt 6: Inhaltselemente anlegen und stylen
mit Hilfe der Code-Snippets aus der Bootstrap-Doku
87

192. Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download
• Schritt 2: Dateistruktur anlegen
• Schritt 3: Dateien verknüpfen
• Schritt 4: Layout-Elemente einfügen
• Schritt 5: Grid anlegen
• Schritt 6: Inhaltselemente anlegen und stylen
88

193. Los gehts!
05_bootstrap_start
89

194. Inhaltselemente: Main navigation
90

195. Inhaltselemente: Main navigation
• Nav-Style
90

196. Inhaltselemente: Main navigation
• Nav-Style
• Ausrichtung
90

197. Inhaltselemente: Main navigation
• Nav-Style
• Ausrichtung
• Textgröße
90

198. Inhaltselemente: Main navigation
• Nav-Style
• Ausrichtung
• Textgröße
• Abstand nach unten
90

199. Inhaltselemente: weitere Stylings
91

200. Inhaltselemente: weitere Stylings
• Breadcrumb
91

201. Inhaltselemente: weitere Stylings
• Breadcrumb
• Buttons: aus dem Download-Link und dem „Buy now“-Link
91

202. Inhaltselemente: weitere Stylings
• Breadcrumb
• Buttons: aus dem Download-Link und dem „Buy now“-Link
• Kleinere Headlines im Aside
91

203. Inhaltselemente: weitere Stylings
• Breadcrumb
• Buttons: aus dem Download-Link und dem „Buy now“-Link
• Kleinere Headlines im Aside
• Liste ohne Bulletpoints im Aside
91

204. Inhaltselemente: weitere Stylings
• Breadcrumb
• Buttons: aus dem Download-Link und dem „Buy now“-Link
• Kleinere Headlines im Aside
• Liste ohne Bulletpoints im Aside
• Icon hinter dem Top-Link im Footer
91

205. Bootstrap: Was noch zu sagen ist.
92

206. Demonstration: JavaScript mit Bootstrap
getbootstrap.com
93

207. Warum Bootstrap?
94

208. Warum Bootstrap?
• Gute Dokumentation
94

209. Warum Bootstrap?
• Gute Dokumentation
• Große Community
94

210. Warum Bootstrap?
• Gute Dokumentation
• Große Community
• Viele UI-Elemente
94

211. Warum Bootstrap?
• Gute Dokumentation
• Große Community
• Viele UI-Elemente
• Responsive Web Design als Standard
94

212. Warum Bootstrap?
• Gute Dokumentation
• Große Community
• Viele UI-Elemente
• Responsive Web Design als Standard
• Individuell anpassbar ("Customize")
94

213. Unser Boilerplate: für euch
github.com/developinguxd/boilerplates
95

214. Das ist Bootstrap. Noch Fragen?
96

215. Agenda
✓ Einführung
✓ HTML-Grundlagen
✓ CSS-Grundlagen
✓ Bootstrap
• Ausblick
97

216. Ausblick
98

217. Tipps: die tägliche Arbeit
99

218. Tipps: die tägliche Arbeit
• Start: Handscribbles
99

219. Tipps: die tägliche Arbeit
• Start: Handscribbles
• Entscheidung: Ist die Projektart geeignet?
99

220. Tipps: die tägliche Arbeit
• Start: Handscribbles
• Entscheidung: Ist die Projektart geeignet?
• Doing: Prototyping gemeinsam durch Kreation und
Frontend-Entwicklung
99

221. Weiterlernen: viele wichtige Themen
100

222. Weiterlernen: viele wichtige Themen
100
HTML
CSS
Bootstrap
DevTools
holder.js

223. Weiterlernen: viele wichtige Themen
jQuery
100
HTML
CSS
Bootstrap
DevTools
holder.js
JavaScript
Responsive
Mobile

224. Weiterlernen: viele wichtige Themen
jQuery
100
HTML
CSS
Bootstrap
DevTools
holder.js
GitHub
Webfonts
CodePen
Emmet
JavaScript
Responsive
Mobile

225. “I think everybody in
this country should
learn how to program
a computer because
it teaches you how to
think.“
STEVE JOBS
The Lost Interview

226. One more thing ...
102

227. Developing UXD: Unsere Idee
103

228. Developing UXD: Unsere Idee
104

229. Developing UXD: Unsere Idee
• Fest definiertes, gemeinsames Toolset
104

230. Developing UXD: Unsere Idee
• Fest definiertes, gemeinsames Toolset
• Moderne, erprobte Standards
104

231. Developing UXD: Unsere Idee
• Fest definiertes, gemeinsames Toolset
• Moderne, erprobte Standards
• Vorauswahl der besten Lernressourcen
104

232. Developing UXD: Unsere Idee
• Fest definiertes, gemeinsames Toolset
• Moderne, erprobte Standards
• Vorauswahl der besten Lernressourcen
• Lebendige Plattform
104

233. Developing UXD: Unsere Idee
• Fest definiertes, gemeinsames Toolset
• Moderne, erprobte Standards
• Vorauswahl der besten Lernressourcen
• Lebendige Plattform
• Gemeinsam und Open Source
104

234. Developing UXD: Unsere Idee
• Fest definiertes, gemeinsames Toolset
• Moderne, erprobte Standards
• Vorauswahl der besten Lernressourcen
• Lebendige Plattform
• Gemeinsam und Open Source
• Eigenentwicklungen
104

235. Developing UXD: Unsere Idee
• Fest definiertes, gemeinsames Toolset
• Moderne, erprobte Standards
• Vorauswahl der besten Lernressourcen
• Lebendige Plattform
• Gemeinsam und Open Source
• Eigenentwicklungen
• Unterstützung durch Frontend-Community
104

236. 105

237. developinguxd.com
105

238. developinguxd.com
@developinguxd
facebook.com/developinguxd
mail@developinguxd.com
105

239. Developing UXD: Nächste Schritte
106

240. Developing UXD: Nächste Schritte
• Die besten Lernquellen im Web
106

241. Developing UXD: Nächste Schritte
• Die besten Lernquellen im Web
• Lernpläne
106

242. Developing UXD: Nächste Schritte
• Die besten Lernquellen im Web
• Lernpläne
• Aufbau einer Community begeisterter UX-Designer
106

243. Developing UXD: Nächste Schritte
• Die besten Lernquellen im Web
• Lernpläne
• Aufbau einer Community begeisterter UX-Designer
• Entwicklung von Tools für Workflow-Optimierungen
106

244. Vielen Dank! Happy coding!
107

245. Euer Feedback: Wie wars?
108

246. developinguxd.com
@developinguxd
facebook.com/developinguxd
mail@developinguxd.com
109

247. Cornelia Erbs, Jeremias Dombrowsky
Lessers Passage 10
22767 Hamburg
+49 (0)151 23421980
mail@developinguxd.com
http://developinguxd.com/
110

248. Alle Icons in dieser Präsentation kommen von
http://iconmonstr.com/
111

249. Backlog
112

250. Backlog: Sublime, HTML, CSS, JS
113

251. Backlog
• Sublime: Shortcuts
• Sublime: Emmet Shortcuts
• HTML: Formulare
• Holder.js: Img placeholders
• CSS: BEM naming convention
• jQuery und JavaScript: Einbinden und laden
114

252. Sublime Text 3: Emmet Shortcuts
115

253. Sublime Text 3: Emmet Shortcuts
• Selector-Syntax: e.g. article>h1+pTab wird zu
<article>
<h1></h1>
<p></p>
</article>
115

254. Sublime Text 3: Emmet Shortcuts
• Selector-Syntax: e.g. article>h1+pTab wird zu
<article>
<h1></h1>
<p></p>
</article>
• Ctrl+w: "Wrap with tag"
115

255. Sublime Text 3: Emmet Shortcuts
• Selector-Syntax: e.g. article>h1+pTab wird zu
<article>
<h1></h1>
<p></p>
</article>
• Ctrl+w: "Wrap with tag"
• Cmd+Shift+k: Tag ändern
115

256. Sublime Text 3: Emmet Shortcuts
• Selector-Syntax: e.g. article>h1+pTab wird zu
<article>
<h1></h1>
<p></p>
</article>
• Ctrl+w: "Wrap with tag"
• Cmd+Shift+k: Tag ändern
• Cmd+': Element löschen
115

257. HTML: Formulare
• form: Gruppiert zusammengehörige Formularelemente,
darf auch andere Elemente enthalten.
• input: Kann von unterschiedlichem Typ sein: text,
email, number, tel, color, date, checkbox, radio, ...
• select: Enthält option-Elemente, die ein Dropdown
bilden.
116

258. Sublime Text 3: Shortcuts
117

259. Sublime Text 3: Shortcuts
• TagnameTab: Autocomplete (Mehrfach für Sprungmarken)
117

260. Sublime Text 3: Shortcuts
• TagnameTab: Autocomplete (Mehrfach für Sprungmarken)
• Cmd+p: Fuzzy-Search für Dateien
117

261. Sublime Text 3: Shortcuts
• TagnameTab: Autocomplete (Mehrfach für Sprungmarken)
• Cmd+p: Fuzzy-Search für Dateien
• Cmd+Shift+p: Zugriff auf alle Befehle
117

262. Sublime Text 3: Shortcuts
• TagnameTab: Autocomplete (Mehrfach für Sprungmarken)
• Cmd+p: Fuzzy-Search für Dateien
• Cmd+Shift+p: Zugriff auf alle Befehle
• Cmd+d: Weitere Instanz des markierten Texts auswählen
117

263. Sublime Text 3: Shortcuts
• TagnameTab: Autocomplete (Mehrfach für Sprungmarken)
• Cmd+p: Fuzzy-Search für Dateien
• Cmd+Shift+p: Zugriff auf alle Befehle
• Cmd+d: Weitere Instanz des markierten Texts auswählen
• Ausführliches Tutorial auf scotch.io
117

264. Selektoren: BEM naming convention
118

265. Selektoren: BEM naming convention
• .page-header: Einfacher Bindestrich bei
zusammengesetzten Namen
118

266. Selektoren: BEM naming convention
• .page-header: Einfacher Bindestrich bei
zusammengesetzten Namen
• .page-nav, .page-nav__link: Unterelemente eines "Moduls"
haben den Modulnamen als Prefix.
118

267. Selektoren: BEM naming convention
• .page-header: Einfacher Bindestrich bei
zusammengesetzten Namen
• .page-nav, .page-nav__link: Unterelemente eines "Moduls"
haben den Modulnamen als Prefix.
• .button, .button--small, .button--cancel: Varianten sind als
solche erkennbar.
118

268. Holder.js: Img placeholders
119

269. Holder.js: Img placeholders
• Download: http://imsky.github.io/holder/
119

270. Holder.js: Img placeholders
• Download: http://imsky.github.io/holder/
• JavaScript im <body> laden:
<script src="js/holder.js"></script>
119

271. Holder.js: Img placeholders
• Download: http://imsky.github.io/holder/
• JavaScript im <body> laden:
<script src="js/holder.js"></script>
• Einsatz:
<img src="holder.js/300x200">
<img src="holder.js/100x100/#000:#fff">
<img src="holder.js/300x200/text:hello world">
<img src="holder.js/200x200/auto/textmode:exact">
119

272. Backlog: Bootstrap
120

273. Bootstrap UI Editors
• Eine Reihe von Editoren: für unterschiedliche
Ansprüche
• Siehe: http://thedesignblitz.com/the-best-bootstrap-ui-editors/
121

274. Bootstrap: und andere Frameworks
• Bootstrap http://twitter.github.io/bootstrap/
weit verbreitet, umfangreich
• Foundation http://foundation.zurb.com/
sehr umfangreich, komplex
• Pure http://purecss.io/ sehr schlank
• HTML Kickstart http://www.99lime.com/elements/
umfangreich, leicht
122

275. Backlog: Argumentationshilfe
123

276. Backlog: Argumentationshilfe
• Vorteile von HTML-Wireframes: für Kunden
• Vorteile von HTML-Wireframes: für Agenturen
• Grenzen des statischen Designs überwinden
• Wissen aufbauen
• Zusammenarbeit verbessern
124

277. Kunde
Vorteile: für Kunden
• Vermitteln Funktionalität einer Website von Anfang an
realistisch
• Sind durch Interaktivität einfacher zu verstehen
• Produkt entwickelt sich vor den Augen des Kunden
stetig weiter
• Kein Bruch zwischen Kreations- und Entwicklung-sphase
(keine Überraschungen)
125

278. UX
Vorteile: für Agenturen 1/2
• Keine bzw. weniger Spezifikationen erforderlich
• Integrierte Arbeitsweise wird gefördert
• Animationen und Interaktivität werden direkt
berücksichtigt
• Ansätze können direkt ausprobiert und dadurch
Design-Entscheidungen leichter getroffen werden
126

279. UX
Vorteile: für Agenturen 2/2
• Frühe Usertests sind möglich
• Browser-Spezifika funktionieren automatisch
(Scrollbars, Button-Größen, Hover etc.)
• Code kann in Teilen weiter verwendet werden
127

280. Grenzen des statischen Designs überwinden
STATISCHES
DESIGN
• Liquid und responsive Layouts
• Realistische Darstellung von Typografie
• Globale Anpassungen von Farben, Abständen, Größen
• Animationen und Interaktionen
128

281. Wissen aufbauen
• Neue Denkweisen trainieren
• Neue Browserfeatures besser verstehen
• Wissen, was möglich ist
• Änderungen auf Live-Websites direkt ausprobieren
(Developer Tools)
• Prototypen selbst bauen (z. B. mit Bootstrap) oder
ändern/erweitern
129

282. Zusammenarbeit verbessern
• Besseres Verständnis für das Medium und für Frontend-
Developer
• Weniger Abhängigkeit von Frontend-Developern bei der
Ideenfindung
• Implementierungsaufwände besser einschätzen können
• Gemeinsames (richtiges) Vokabular aufbauen
• Gemeinsam an Prototypen arbeiten
Kreation Frontend
130

283. developinguxd.com
@developinguxd
facebook.com/developinguxd
mail@developinguxd.com
131