XING Workshop 2014 
<Developing UXD> 
So leicht ist Frontendentwicklung für 
Konzepter und Designer heute
Conni und Jerry: Wer wir sind 
2
Conni 
Cornelia Erbs 
Freelancerin als Senior User 
Experience Architect 
Davor Senior User Experience Architect 
für groß...
Jerry 
Jeremias Dombrowsky 
Senior Frontend Engineer bei XING 
Davor Creative Technologist für 
namhafte Agenturen und Unt...
Und wer seid ihr? 
5 
• Name 
• Job 
• Vorkenntnisse 
• Wünsche an den Workshop
Ziele des Workshops 
6
Ziele des Workshops 
7
Ziele des Workshops 
• Quellcode lesen und verstehen 
7
Ziele des Workshops 
• Quellcode lesen und verstehen 
• Die erste Hürde des Selbst-Codens nehmen 
7
Ziele des Workshops 
• Quellcode lesen und verstehen 
• Die erste Hürde des Selbst-Codens nehmen 
• Wissen, wie man weiter...
Nach dem Workshop könnt ihr noch nicht: 
8
Axure wegschmeißen 
und direkt alle Wireframes 
per Code erzeugen. 
9
Einführung: Warum wir dazu lernen müssen 
10
Warum sollten wir HTML und CSS lernen? 
11
Warum sollten wir HTML und CSS lernen? 
• Die Basis dessen, was wir gestalten, sollten wir kennen. 
11
Warum sollten wir HTML und CSS lernen? 
• Die Basis dessen, was wir gestalten, sollten wir kennen. 
• Zumal: Die Tools wec...
Warum sollten wir HTML und CSS lernen? 
• Die Basis dessen, was wir gestalten, sollten wir kennen. 
• Zumal: Die Tools wec...
”Coding is going to be 
the literacy 
of the 21st Century.“ 
ZACH SIMS 
Co-Founder Codecademy
Es kann unsere Arbeitsweise verbessern! 
13
Es kann unsere Arbeitsweise verbessern! 
13 
Heutige Arbeitsweise 
Technisch 
umsetzen 
Anforderungen 
klären 
Wireframes ...
Es kann unsere Arbeitsweise verbessern! 
Abstrakt und statisch 
Abstrakt 
Abstrakt und statisch 
13 
Heutige Arbeitsweise ...
Es kann unsere Arbeitsweise verbessern! 
Abstrakt und statisch 
Abstrakt 
Abstrakt und statisch 
Echt Aber 
13 
Heutige Ar...
Es kann unsere Arbeitsweise verbessern! 
14 
Zukünftige Arbeitsweise
Es kann unsere Arbeitsweise verbessern! 
14 
Statische 
Dokumente 
• Brief 
• User Journeys 
• Sketching 
• Look & Feel 
Z...
Es kann unsere Arbeitsweise verbessern! 
Wireframes in 
HTML + CSS 
14 
Statische 
Dokumente 
• Brief 
• User Journeys 
• ...
Es kann unsere Arbeitsweise verbessern! 
Wireframes in 
HTML + CSS 
14 
Statische 
Dokumente 
• Brief 
• User Journeys 
• ...
Es kann unsere Arbeitsweise verbessern! 
Wireframes in 
HTML + CSS 
14 
Statische 
Dokumente 
• Brief 
• User Journeys 
• ...
Es kann unsere Arbeitsweise verbessern! 
Wireframes in 
HTML + CSS 
14 
Statische 
Dokumente 
• Brief 
• User Journeys 
• ...
Ende der Einführung. Fragen? 
15
Agenda 
✓ Einführung 
• HTML-Grundlagen 
• CSS-Grundlagen 
• Bootstrap 
• Ausblick 
16
HTML-Grundlagen 
17
HTML: Aufbau und Inhalte einer Website 
18
Interaktiv: Layout-Elemente kennenlernen 
19
HTML: Layout-Elemente 
20
HTML: Layout-Elemente 
• header, footer, aside, nav, main, article, section: 
"Sectioning elements" gruppieren inhaltlich ...
HTML: Layout-Elemente 
• header, footer, aside, nav, main, article, section: 
"Sectioning elements" gruppieren inhaltlich ...
HTML: Layout-Elemente 
• header, footer, aside, nav, main, article, section: 
"Sectioning elements" gruppieren inhaltlich ...
HTML: Layout-Elemente 
• header, footer, aside, nav, main, article, section: 
"Sectioning elements" gruppieren inhaltlich ...
HTML: Layout-Elemente 
• header, footer, aside, nav, main, article, section: 
"Sectioning elements" gruppieren inhaltlich ...
Interaktiv: Inhaltselemente kennenlernen 
21
HTML: Inhaltselemente – Textinhalte 
• h1, h2: Heading. Pro section ein neues h1. 
• p: Absatz ("paragraph") 
• a: Link ("...
HTML: Inhaltselemente – Weitere Inhalte 
23
HTML: Inhaltselemente – Weitere Inhalte 
• img: "image" – Bildelement 
23
HTML: Inhaltselemente – Weitere Inhalte 
• img: "image" – Bildelement 
• ul, ol: "unordered/ordered list" – eine Liste mit...
HTML: Inhaltselemente – Weitere Inhalte 
• img: "image" – Bildelement 
• ul, ol: "unordered/ordered list" – eine Liste mit...
HTML: Inhaltselemente – Weitere Inhalte 
• img: "image" – Bildelement 
• ul, ol: "unordered/ordered list" – eine Liste mit...
Fragen soweit? 
24
HTML: Syntax 
25
Tags 
<p>Das ist mein Absatz</p> 
26
Tags 
Opening <tag> Closing </tag> 
<p>Das ist mein Absatz</p> 
26
Tags 
Opening <tag> Closing </tag> 
<p>Das ist mein Absatz</p> 
• Layout-Elemente haben "opening" und "closing tags". 
26
Tags 
Opening <tag> Closing </tag> 
<p>Das ist mein Absatz</p> 
• Layout-Elemente haben "opening" und "closing tags". 
• E...
Tags 
Opening <tag> Closing </tag> 
<p>Das ist mein Absatz</p> 
• Layout-Elemente haben "opening" und "closing tags". 
• E...
Tags: Verschachtelung 
<article> 
<h1>Welcome</h1> 
<p>Das ist mein Absatz, der <em>auch</em> 
verschachtelte Elemente ent...
Tags: Verschachtelung 
<article> 
<h1>Welcome</h1> 
<p>Das ist mein Absatz, der <em>auch</em> 
verschachtelte Elemente ent...
Tags: Verschachtelung 
<article> 
<h1>Welcome</h1> 
<p>Das ist mein Absatz, der <em>auch</em> 
verschachtelte Elemente ent...
Tags: Verschachtelung 
<article> 
<h1>Welcome</h1> 
<p>Das ist mein Absatz, der <em>auch</em> 
verschachtelte Elemente ent...
Tags: Verschachtelung 
<article> 
<h1>Welcome</h1> 
<p>Das ist mein Absatz, der <em>auch</em> 
verschachtelte Elemente ent...
28 
Attribute 
<img src="img/logo.png">
28 
Attribute 
attribute 
= Eigenschaft 
<img src="img/logo.png">
"value" 
= Wert der Eigenschaft 
28 
Attribute 
attribute 
= Eigenschaft 
<img src="img/logo.png">
"value" 
= Wert der Eigenschaft 
28 
Attribute 
attribute 
= Eigenschaft 
<img src="img/logo.png"> 
• Elemente haben unter...
"value" 
= Wert der Eigenschaft 
28 
Attribute 
attribute 
= Eigenschaft 
<img src="img/logo.png"> 
• Elemente haben unter...
29 
Attribute: Wichtige
29 
Attribute: Wichtige 
<input id="i-am-unique">
Attribute: Wichtige 
<input id="i-am-unique"> 
Kennzeichnet ein zwingend einzigartiges Element, z.B. 
input im Formular; #...
Attribute: Wichtige 
<input id="i-am-unique"> 
Kennzeichnet ein zwingend einzigartiges Element, z.B. 
input im Formular; #...
Attribute: Wichtige 
<input id="i-am-unique"> 
Kennzeichnet ein zwingend einzigartiges Element, z.B. 
input im Formular; #...
Attribute: Beispiele 
30
Attribute: Beispiele 
<img src="img/my-dog.jpg" alt="Caja"> 
30
Attribute: Beispiele 
<img src="img/my-dog.jpg" alt="Caja"> 
<a href="contact.html">Contact</a> 
30
Attribute: Beispiele 
<img src="img/my-dog.jpg" alt="Caja"> 
<a href="contact.html">Contact</a> 
<a href="http://google.co...
Attribute: Beispiele 
<img src="img/my-dog.jpg" alt="Caja"> 
<a href="contact.html">Contact</a> 
<a href="http://google.co...
Attribute: Beispiele 
<img src="img/my-dog.jpg" alt="Caja"> 
<a href="contact.html">Contact</a> 
<a href="http://google.co...
Attribute: Beispiele 
<img src="img/my-dog.jpg" alt="Caja"> 
<a href="contact.html">Contact</a> 
<a href="http://google.co...
Attribute: Beispiele 
<img src="img/my-dog.jpg" alt="Caja"> 
<a href="contact.html">Contact</a> 
<a href="http://google.co...
Attribute: Beispiele 
<img src="img/my-dog.jpg" alt="Caja"> 
<a href="contact.html">Contact</a> 
<a href="http://google.co...
Interaktiv: HTML-Elemente untersuchen 
www.developinguxd.com 
31
HTML-Elemente untersuchen 
• Google Chrome: "Chrome Developer Tools (DevTools)" 
• Rechtsklick auf Element: "Element unter...
HTML: Dokument erstellen 
33
Sublime Text 3 einrichten: komplett 
• Download: http://www.sublimetext.com/3 
• Einstellungen: "Default Settings" in "Use...
Interaktiv: Dokument erstellen 
rohrpostix ☛ Daten/Transfer/Developing UXD/ kopieren! 
Dann Schreibtisch ☛ Developing UXD/...
Dokument erstellen 
36
Dokument erstellen 
• Mit Emmet: html:5Tab 
36
Dokument erstellen 
• Mit Emmet: html:5Tab 
• HTML5 Doctype: <!doctype html> 
36
Dokument erstellen 
• Mit Emmet: html:5Tab 
• HTML5 Doctype: <!doctype html> 
• head: Metadaten, Dokumenttitel, Link zu St...
Dokument erstellen 
• Mit Emmet: html:5Tab 
• HTML5 Doctype: <!doctype html> 
• head: Metadaten, Dokumenttitel, Link zu St...
Interaktiv: HTML schreiben 
37
Weitere Ressourcen 
38
Weitere Ressourcen 
• codecademy.com – kostenloser Onlinekurs 
38
Weitere Ressourcen 
• codecademy.com – kostenloser Onlinekurs 
• developer.mozilla.org – MDN: alles zu HTML und CSS 
38
Weitere Ressourcen 
• codecademy.com – kostenloser Onlinekurs 
• developer.mozilla.org – MDN: alles zu HTML und CSS 
• sta...
Weitere Ressourcen 
• codecademy.com – kostenloser Onlinekurs 
• developer.mozilla.org – MDN: alles zu HTML und CSS 
• sta...
Weitere Ressourcen 
• codecademy.com – kostenloser Onlinekurs 
• developer.mozilla.org – MDN: alles zu HTML und CSS 
• sta...
Weitere Ressourcen 
• codecademy.com – kostenloser Onlinekurs 
• developer.mozilla.org – MDN: alles zu HTML und CSS 
• sta...
Das ist HTML. Fragen? 
39
Agenda 
✓ Einführung 
✓ HTML-Grundlagen 
• CSS-Grundlagen 
• Bootstrap 
• Ausblick 
40
CSS-Grundlagen 
41
CSS: Elemente finden und stylen 
42
Selektoren: class 
<img src="img/logo.png" alt="IA Konferenz"> 
43
Selektoren: class 
<img src="img/logo.png" alt="IA Konferenz"> 
Nicht jedes <img> soll gleich gestylt werden 
43
Selektoren: class 
<img src="img/logo.png" alt="IA Konferenz"> 
Nicht jedes <img> soll gleich gestylt werden 
<img class="...
Selektoren: class 
<img src="img/logo.png" alt="IA Konferenz"> 
Nicht jedes <img> soll gleich gestylt werden 
<img class="...
<img class="logo" src="img/logo.png" alt="IA Konferenz"> 
44 
Selektoren: class
<img class="logo" src="img/logo.png" alt="IA Konferenz"> 
.logo { 
width: 200px; 
height: 100px; 
} 
44 
Selektoren: class
<img class="logo" src="img/logo.png" alt="IA Konferenz"> 
.class-selector beginnt immer mit einem Punkt. 
.logo { 
width: ...
<img class="logo" src="img/logo.png" alt="IA Konferenz"> 
.class-selector beginnt immer mit einem Punkt. 
.logo { 
width: ...
.logo { 
width: 200px; 
height: 100px; 
} 
45 
Selektoren: class
.logo { 
width: 200px; 
height: 100px; 
} 
Eine "declaration" besteht 
aus property und value. 
45 
Selektoren: class
Selektoren: class 
.logo { 
width: 200px; 
height: 100px; 
} 
45 
: 
Eine "declaration" besteht 
aus property und value.
Selektoren: class 
.logo { 
width: 200px; 
height: 100px; 
} 
45 
: 
Eine "declaration" besteht 
aus property und value. 
...
.logo { 
width: 200px; 
height: 100px; 
} 
45 
: 
Eine "declaration" besteht 
aus property und value. 
; selector und 
{ d...
Interaktiv: CSS mit DevTools untersuchen 
www.developinguxd.com 
46
CSS untersuchen 
• Element auswählen, Declarations ein- und ausschalten, 
Werte ändern (auch mit Pfeiltasten und Shift) 
•...
CSS: Learnings durch DevTools 
• h1: "Element-Selektoren" nur für sehr allgemeine Styles, 
sind weniger spezifisch als Kla...
CSS: Wichtige Konzepte 
49
CSS: Block- und Inline-Elemente 
50 
Block-Elemente 
Stehen immer alleine pro 
Zeile und füllen den Platz 
aus. z. B. h1, ...
CSS: Block- und Inline-Elemente 
50 
Block-Elemente 
Stehen immer alleine pro 
Zeile und füllen den Platz 
aus. z. B. h1, ...
Demonstration: Block- und Inline-Elemente 
51
CSS: Box Model 
52
CSS: Box Model 
Element 
52 
Element
CSS: Box Model 
52 
Padding 
Element 
Element
CSS: Box Model 
52 
Padding 
Border 
Element 
Element
CSS: Box Model 
Padding 
Margin 
52 
Border 
Element 
Element
CSS: Box Model 
Padding 
Margin 
53 
Border 
Element 
Element
Demonstration: Box Model 
54
CSS: Learnings Box Model 
• Browser geben den Elementen Standard-Styles. 
• padding wird auf die width und height draufger...
Border, Margin und Padding: Werte 
56 
margin: 5px 10px 20px 3px;
Border, Margin und Padding: Werte 
56 
Oben 
margin: 5px 10px 20px 3px;
Border, Margin und Padding: Werte 
56 
Oben Rechts 
margin: 5px 10px 20px 3px;
Border, Margin und Padding: Werte 
56 
Oben 
Rechts 
margin: 5px 10px 20px 3px; 
Unten
Border, Margin und Padding: Werte 
56 
Oben 
Rechts 
margin: 5px 10px 20px 3px; 
Unten 
Links
Border, Margin und Padding: Werte 
56 
Oben 
Rechts 
margin: 5px 10px 20px 3px; 
Unten 
Links 
margin-top: 5px; 
margin-ri...
Border, Margin und Padding: Werte 
57
Border, Margin und Padding: Werte 
margin: 5px 10px 20px 3px; Oben Rechts Unten Links 
57
Border, Margin und Padding: Werte 
margin: 5px 10px 20px 3px; Oben Rechts Unten Links 
57 
margin: 5px 10px 20px 10px;
Border, Margin und Padding: Werte 
margin: 5px 10px 20px 3px; Oben Rechts Unten Links 
57 
margin: 5px 10px 20px 10px; 
ma...
Border, Margin und Padding: Werte 
margin: 5px 10px 20px 3px; Oben Rechts Unten Links 
57 
margin: 5px 10px 20px 10px; 
ma...
Interaktiv: CSS schreiben 
58 
03_css_start
Weitere Ressourcen 
59
Weitere Ressourcen 
• css-tricks.com – CSS Tutorials und Tipps 
59
Weitere Ressourcen 
• css-tricks.com – CSS Tutorials und Tipps 
• developer.mozilla.org – alles zu HTML und CSS 
59
Weitere Ressourcen 
• css-tricks.com – CSS Tutorials und Tipps 
• developer.mozilla.org – alles zu HTML und CSS 
• stackov...
Weitere Ressourcen 
• css-tricks.com – CSS Tutorials und Tipps 
• developer.mozilla.org – alles zu HTML und CSS 
• stackov...
Weitere Ressourcen 
• css-tricks.com – CSS Tutorials und Tipps 
• developer.mozilla.org – alles zu HTML und CSS 
• stackov...
Das ist CSS. Fragen? 
60
Agenda 
✓ Einführung 
✓ HTML-Grundlagen 
✓ CSS-Grundlagen 
• Bootstrap 
• Ausblick 
61
Bootstrap 
62
Bootstrap: Was ist das? 
63
Bootstrap is the most popular HTML, CSS, and JS 
framework for developing responsive, 
mobile first projects on the web. 
...
Wie funktioniert Bootstrap? 
65
Wie funktioniert Bootstrap? 
• Verknüpfung: von Bootstrap-CSS sowie -JS mit dem 
eigenen HTML 
65
Wie funktioniert Bootstrap? 
• Verknüpfung: von Bootstrap-CSS sowie -JS mit dem 
eigenen HTML 
• Automatisches Styling: vo...
Wie funktioniert Bootstrap? 
• Verknüpfung: von Bootstrap-CSS sowie -JS mit dem 
eigenen HTML 
• Automatisches Styling: vo...
Demonstration: Das ist Bootstrap. 
getbootstrap.com 
66
Bootstrap: CSS und Components 
67 
CSS 
Typography 
Code 
Tables 
Forms 
Buttons 
Images 
Helper classes 
Responsive utili...
Bootstrap: das Grid 
68
Bootstrap: Grid 
69
Bootstrap: Grid 
• Grid-System für Adaptive und Responsive Web Design 
69
Bootstrap: Grid 
• Grid-System für Adaptive und Responsive Web Design 
• Ist standardmäßig mobile first („scale up“) 
69
Bootstrap: Grid 
• Grid-System für Adaptive und Responsive Web Design 
• Ist standardmäßig mobile first („scale up“) 
• Fu...
Bootstrap: Grid 
1. Klasse container 
container (fixed-width für Adaptive-Verhalten) 
oder container-fluid (full-width für...
Bootstrap: Grid 
1. Klasse container 
container (fixed-width für Adaptive-Verhalten) 
oder container-fluid (full-width für...
2. Klasse row 
um Elemente nebeneinander anzuordnen 
71 
Bootstrap: Grid
2. Klasse row 
um Elemente nebeneinander anzuordnen 
<div class="container-fluid"> 
<div class="row"> 
</div> 
</div> 
71 ...
3. Klasse column (z.B. col-sm-6) 
für die Definition der Spaltenbreite, basierend auf 
einem 12-spaltigen Grid-System 
72 ...
3. Klasse column (z.B. col-sm-6) 
für die Definition der Spaltenbreite, basierend auf 
einem 12-spaltigen Grid-System 
<di...
<div class="container-fluid"> 
<div class="row"> 
<div class="col-sm-6">Halbe Reihe</div> 
<div class="col-sm-6">Halbe Rei...
Halbe Reihe Halbe Reihe 
<div class="container-fluid"> 
<div class="row"> 
<div class="col-sm-6">Halbe Reihe</div> 
<div c...
Bootstrap Grid: Columns 
74 
Extra small 
devices 
Phones 
<768px 
.col-xs- 
Small 
devices 
Tablets 
≥768px 
.col-sm- 
Me...
Bootstrap Grid: Columns 
74 
Extra small 
devices 
Phones 
<768px 
.col-xs- 
Small 
devices 
Tablets 
≥768px 
.col-sm- 
Me...
Bootstrap Grid: Columns mit Versatz 
4 Spalten 4 Spalten 
75
Bootstrap Grid: Columns mit Versatz 
4 Spalten 4 Spalten 
<div class="container-fluid"> 
<div class="row"> 
<div class=„co...
Bootstrap Grid: Columns mit Versatz 
4 Spalten 4 Spalten 
<div class="container-fluid"> 
<div class="row"> 
<div class=„co...
Responsive und Mobile first: nicht heute 
• Bootstrap ist von Haus aus responsive. 
• Spezielle Elemente: 
• Responsive ta...
Interaktiv: Bootstrap kennenlernen 
77
Bootstrap: Loslegen in 6 Schritten 
• Schritt 1: Download unter http://getbootstrap.com/ 
78 
downloads / bootstrap-3.3.0-...
Bootstrap: Loslegen in 6 Schritten 
• Schritt 1: Download unter http://getbootstrap.com/ 
79
Bootstrap: Loslegen in 6 Schritten 
• Schritt 1: Download 
• Schritt 2: Dateistruktur anlegen 
Lokaler Ordner
Bootstrap: Loslegen in 6 Schritten 
• Schritt 1: Download 
• Schritt 2: Dateistruktur anlegen 
getbootstrap.com Lokaler Or...
Bootstrap: Loslegen in 6 Schritten 
• Schritt 1: Download 
• Schritt 2: Dateistruktur anlegen 
getbootstrap.com Lokaler Or...
Bootstrap: Loslegen in 6 Schritten 
• Schritt 1: Download 
• Schritt 2: Dateistruktur anlegen 
getbootstrap.com Lokaler Or...
Bootstrap: Loslegen in 6 Schritten 
• Schritt 1: Download 
• Schritt 2: Dateistruktur anlegen 
• Schritt 3: Dateien verknü...
Bootstrap: Loslegen in 6 Schritten 
• Schritt 1: Download 
• Schritt 2: Dateistruktur anlegen 
• Schritt 3: Dateien verknü...
Bootstrap: Loslegen in 6 Schritten 
• Schritt 1: Download 
• Schritt 2: Dateistruktur anlegen 
• Schritt 3: Dateien verknü...
Bootstrap: Loslegen in 6 Schritten 
• Schritt 1: Download 
• Schritt 2: Dateistruktur anlegen 
• Schritt 3: Dateien verknü...
Erforderlich: Viewport meta Tag im head 
<meta name="viewport" content="width=device-width, 
initial-scale=1"> 
Ermöglicht...
Bootstrap: Loslegen in 6 Schritten 
• Schritt 1: Download 
• Schritt 2: Dateistruktur anlegen 
• Schritt 3: Dateien verknü...
Bootstrap: Loslegen in 6 Schritten 
• Schritt 1: Download 
• Schritt 2: Dateistruktur anlegen 
• Schritt 3: Dateien verknü...
Bootstrap: Loslegen in 6 Schritten 
• Schritt 1: Download 
• Schritt 2: Dateistruktur anlegen 
• Schritt 3: Dateien verknü...
Bootstrap: Loslegen in 6 Schritten 
• Schritt 1: Download 
• Schritt 2: Dateistruktur anlegen 
• Schritt 3: Dateien verknü...
Bootstrap: Loslegen in 6 Schritten 
• Schritt 1: Download 
• Schritt 2: Dateistruktur anlegen 
• Schritt 3: Dateien verknü...
Los gehts! 
05_bootstrap_start 
89
Inhaltselemente: Main navigation 
90
Inhaltselemente: Main navigation 
• Nav-Style 
90
Inhaltselemente: Main navigation 
• Nav-Style 
• Ausrichtung 
90
Inhaltselemente: Main navigation 
• Nav-Style 
• Ausrichtung 
• Textgröße 
90
Inhaltselemente: Main navigation 
• Nav-Style 
• Ausrichtung 
• Textgröße 
• Abstand nach unten 
90
Inhaltselemente: weitere Stylings 
91
Inhaltselemente: weitere Stylings 
• Breadcrumb 
91
Inhaltselemente: weitere Stylings 
• Breadcrumb 
• Buttons: aus dem Download-Link und dem „Buy now“-Link 
91
Inhaltselemente: weitere Stylings 
• Breadcrumb 
• Buttons: aus dem Download-Link und dem „Buy now“-Link 
• Kleinere Headl...
Inhaltselemente: weitere Stylings 
• Breadcrumb 
• Buttons: aus dem Download-Link und dem „Buy now“-Link 
• Kleinere Headl...
Inhaltselemente: weitere Stylings 
• Breadcrumb 
• Buttons: aus dem Download-Link und dem „Buy now“-Link 
• Kleinere Headl...
Bootstrap: Was noch zu sagen ist. 
92
Demonstration: JavaScript mit Bootstrap 
getbootstrap.com 
93
Warum Bootstrap? 
94
Warum Bootstrap? 
• Gute Dokumentation 
94
Warum Bootstrap? 
• Gute Dokumentation 
• Große Community 
94
Warum Bootstrap? 
• Gute Dokumentation 
• Große Community 
• Viele UI-Elemente 
94
Warum Bootstrap? 
• Gute Dokumentation 
• Große Community 
• Viele UI-Elemente 
• Responsive Web Design als Standard 
94
Warum Bootstrap? 
• Gute Dokumentation 
• Große Community 
• Viele UI-Elemente 
• Responsive Web Design als Standard 
• In...
Unser Boilerplate: für euch 
github.com/developinguxd/boilerplates 
95
Das ist Bootstrap. Noch Fragen? 
96
Agenda 
✓ Einführung 
✓ HTML-Grundlagen 
✓ CSS-Grundlagen 
✓ Bootstrap 
• Ausblick 
97
Ausblick 
98
Tipps: die tägliche Arbeit 
99
Tipps: die tägliche Arbeit 
• Start: Handscribbles 
99
Tipps: die tägliche Arbeit 
• Start: Handscribbles 
• Entscheidung: Ist die Projektart geeignet? 
99
Tipps: die tägliche Arbeit 
• Start: Handscribbles 
• Entscheidung: Ist die Projektart geeignet? 
• Doing: Prototyping gem...
Weiterlernen: viele wichtige Themen 
100
Weiterlernen: viele wichtige Themen 
100 
HTML 
CSS 
Bootstrap 
DevTools 
holder.js
Weiterlernen: viele wichtige Themen 
jQuery 
100 
HTML 
CSS 
Bootstrap 
DevTools 
holder.js 
JavaScript 
Responsive 
Mobil...
Weiterlernen: viele wichtige Themen 
jQuery 
100 
HTML 
CSS 
Bootstrap 
DevTools 
holder.js 
GitHub 
Webfonts 
CodePen 
Em...
“I think everybody in 
this country should 
learn how to program 
a computer because 
it teaches you how to 
think.“ 
STEV...
One more thing ... 
102
Developing UXD: Unsere Idee 
103
Developing UXD: Unsere Idee 
104
Developing UXD: Unsere Idee 
• Fest definiertes, gemeinsames Toolset 
104
Developing UXD: Unsere Idee 
• Fest definiertes, gemeinsames Toolset 
• Moderne, erprobte Standards 
104
Developing UXD: Unsere Idee 
• Fest definiertes, gemeinsames Toolset 
• Moderne, erprobte Standards 
• Vorauswahl der best...
Developing UXD: Unsere Idee 
• Fest definiertes, gemeinsames Toolset 
• Moderne, erprobte Standards 
• Vorauswahl der best...
Developing UXD: Unsere Idee 
• Fest definiertes, gemeinsames Toolset 
• Moderne, erprobte Standards 
• Vorauswahl der best...
Developing UXD: Unsere Idee 
• Fest definiertes, gemeinsames Toolset 
• Moderne, erprobte Standards 
• Vorauswahl der best...
Developing UXD: Unsere Idee 
• Fest definiertes, gemeinsames Toolset 
• Moderne, erprobte Standards 
• Vorauswahl der best...
105
developinguxd.com 
105
developinguxd.com 
@developinguxd 
facebook.com/developinguxd 
mail@developinguxd.com 
105
Developing UXD: Nächste Schritte 
106
Developing UXD: Nächste Schritte 
• Die besten Lernquellen im Web 
106
Developing UXD: Nächste Schritte 
• Die besten Lernquellen im Web 
• Lernpläne 
106
Developing UXD: Nächste Schritte 
• Die besten Lernquellen im Web 
• Lernpläne 
• Aufbau einer Community begeisterter UX-D...
Developing UXD: Nächste Schritte 
• Die besten Lernquellen im Web 
• Lernpläne 
• Aufbau einer Community begeisterter UX-D...
Vielen Dank! Happy coding! 
107
Euer Feedback: Wie wars? 
108
developinguxd.com 
@developinguxd 
facebook.com/developinguxd 
mail@developinguxd.com 
109
Cornelia Erbs, Jeremias Dombrowsky 
Lessers Passage 10 
22767 Hamburg 
+49 (0)151 23421980 
mail@developinguxd.com 
http:/...
Alle Icons in dieser Präsentation kommen von 
http://iconmonstr.com/ 
111
Backlog 
112
Backlog: Sublime, HTML, CSS, JS 
113
Backlog 
• Sublime: Shortcuts 
• Sublime: Emmet Shortcuts 
• HTML: Formulare 
• Holder.js: Img placeholders 
• CSS: BEM na...
Sublime Text 3: Emmet Shortcuts 
115
Sublime Text 3: Emmet Shortcuts 
• Selector-Syntax: e.g. article>h1+pTab wird zu 
<article> 
<h1></h1> 
<p></p> 
</article...
Sublime Text 3: Emmet Shortcuts 
• Selector-Syntax: e.g. article>h1+pTab wird zu 
<article> 
<h1></h1> 
<p></p> 
</article...
Sublime Text 3: Emmet Shortcuts 
• Selector-Syntax: e.g. article>h1+pTab wird zu 
<article> 
<h1></h1> 
<p></p> 
</article...
Sublime Text 3: Emmet Shortcuts 
• Selector-Syntax: e.g. article>h1+pTab wird zu 
<article> 
<h1></h1> 
<p></p> 
</article...
HTML: Formulare 
• form: Gruppiert zusammengehörige Formularelemente, 
darf auch andere Elemente enthalten. 
• input: Kann...
Sublime Text 3: Shortcuts 
117
Sublime Text 3: Shortcuts 
• TagnameTab: Autocomplete (Mehrfach für Sprungmarken) 
117
Sublime Text 3: Shortcuts 
• TagnameTab: Autocomplete (Mehrfach für Sprungmarken) 
• Cmd+p: Fuzzy-Search für Dateien 
117
Sublime Text 3: Shortcuts 
• TagnameTab: Autocomplete (Mehrfach für Sprungmarken) 
• Cmd+p: Fuzzy-Search für Dateien 
• Cm...
Sublime Text 3: Shortcuts 
• TagnameTab: Autocomplete (Mehrfach für Sprungmarken) 
• Cmd+p: Fuzzy-Search für Dateien 
• Cm...
Sublime Text 3: Shortcuts 
• TagnameTab: Autocomplete (Mehrfach für Sprungmarken) 
• Cmd+p: Fuzzy-Search für Dateien 
• Cm...
Selektoren: BEM naming convention 
118
Selektoren: BEM naming convention 
• .page-header: Einfacher Bindestrich bei 
zusammengesetzten Namen 
118
Selektoren: BEM naming convention 
• .page-header: Einfacher Bindestrich bei 
zusammengesetzten Namen 
• .page-nav, .page-...
Selektoren: BEM naming convention 
• .page-header: Einfacher Bindestrich bei 
zusammengesetzten Namen 
• .page-nav, .page-...
Holder.js: Img placeholders 
119
Holder.js: Img placeholders 
• Download: http://imsky.github.io/holder/ 
119
Holder.js: Img placeholders 
• Download: http://imsky.github.io/holder/ 
• JavaScript im <body> laden: 
<script src="js/ho...
Holder.js: Img placeholders 
• Download: http://imsky.github.io/holder/ 
• JavaScript im <body> laden: 
<script src="js/ho...
Backlog: Bootstrap 
120
Bootstrap UI Editors 
• Eine Reihe von Editoren: für unterschiedliche 
Ansprüche 
• Siehe: http://thedesignblitz.com/the-b...
Bootstrap: und andere Frameworks 
• Bootstrap http://twitter.github.io/bootstrap/ 
weit verbreitet, umfangreich 
• Foundat...
Backlog: Argumentationshilfe 
123
Backlog: Argumentationshilfe 
• Vorteile von HTML-Wireframes: für Kunden 
• Vorteile von HTML-Wireframes: für Agenturen 
•...
Kunde 
Vorteile: für Kunden 
• Vermitteln Funktionalität einer Website von Anfang an 
realistisch 
• Sind durch Interaktiv...
UX 
Vorteile: für Agenturen 1/2 
• Keine bzw. weniger Spezifikationen erforderlich 
• Integrierte Arbeitsweise wird geförd...
UX 
Vorteile: für Agenturen 2/2 
• Frühe Usertests sind möglich 
• Browser-Spezifika funktionieren automatisch 
(Scrollbar...
Grenzen des statischen Designs überwinden 
STATISCHES 
DESIGN 
• Liquid und responsive Layouts 
• Realistische Darstellung...
Wissen aufbauen 
• Neue Denkweisen trainieren 
• Neue Browserfeatures besser verstehen 
• Wissen, was möglich ist 
• Änder...
Zusammenarbeit verbessern 
• Besseres Verständnis für das Medium und für Frontend- 
Developer 
• Weniger Abhängigkeit von ...
developinguxd.com 
@developinguxd 
facebook.com/developinguxd 
mail@developinguxd.com 
131
Nächste SlideShare
Wird geladen in …5
×

Developing UXD - Workshop bei XING

426 Aufrufe

Veröffentlicht am

HTML, CSS und Bootstrap für Designer

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

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
426
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
3
Aktionen
Geteilt
0
Downloads
2
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Developing UXD - Workshop bei XING

  1. 1. XING Workshop 2014 <Developing UXD> So leicht ist Frontendentwicklung für Konzepter und Designer heute
  2. 2. Conni und Jerry: Wer wir sind 2
  3. 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. 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. 5. Und wer seid ihr? 5 • Name • Job • Vorkenntnisse • Wünsche an den Workshop
  6. 6. Ziele des Workshops 6
  7. 7. Ziele des Workshops 7
  8. 8. Ziele des Workshops • Quellcode lesen und verstehen 7
  9. 9. Ziele des Workshops • Quellcode lesen und verstehen • Die erste Hürde des Selbst-Codens nehmen 7
  10. 10. Ziele des Workshops • Quellcode lesen und verstehen • Die erste Hürde des Selbst-Codens nehmen • Wissen, wie man weiter lernen kann 7
  11. 11. Nach dem Workshop könnt ihr noch nicht: 8
  12. 12. Axure wegschmeißen und direkt alle Wireframes per Code erzeugen. 9
  13. 13. Einführung: Warum wir dazu lernen müssen 10
  14. 14. Warum sollten wir HTML und CSS lernen? 11
  15. 15. Warum sollten wir HTML und CSS lernen? • Die Basis dessen, was wir gestalten, sollten wir kennen. 11
  16. 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. 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. 18. ”Coding is going to be the literacy of the 21st Century.“ ZACH SIMS Co-Founder Codecademy
  19. 19. Es kann unsere Arbeitsweise verbessern! 13
  20. 20. Es kann unsere Arbeitsweise verbessern! 13 Heutige Arbeitsweise Technisch umsetzen Anforderungen klären Wireframes erstellen Screens erstellen
  21. 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. 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. 23. Es kann unsere Arbeitsweise verbessern! 14 Zukünftige Arbeitsweise
  24. 24. Es kann unsere Arbeitsweise verbessern! 14 Statische Dokumente • Brief • User Journeys • Sketching • Look & Feel Zukünftige Arbeitsweise
  25. 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. 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. 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. 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. 29. Ende der Einführung. Fragen? 15
  30. 30. Agenda ✓ Einführung • HTML-Grundlagen • CSS-Grundlagen • Bootstrap • Ausblick 16
  31. 31. HTML-Grundlagen 17
  32. 32. HTML: Aufbau und Inhalte einer Website 18
  33. 33. Interaktiv: Layout-Elemente kennenlernen 19
  34. 34. HTML: Layout-Elemente 20
  35. 35. HTML: Layout-Elemente • header, footer, aside, nav, main, article, section: "Sectioning elements" gruppieren inhaltlich 20
  36. 36. HTML: Layout-Elemente • header, footer, aside, nav, main, article, section: "Sectioning elements" gruppieren inhaltlich • main: Einzigartig! Hauptinhalte kommen hier rein. 20
  37. 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. 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. 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. 40. Interaktiv: Inhaltselemente kennenlernen 21
  41. 41. HTML: Inhaltselemente – Textinhalte • h1, h2: Heading. Pro section ein neues h1. • p: Absatz ("paragraph") • a: Link ("anchor"). Darf weitere Inhalte enthalten. 22
  42. 42. HTML: Inhaltselemente – Weitere Inhalte 23
  43. 43. HTML: Inhaltselemente – Weitere Inhalte • img: "image" – Bildelement 23
  44. 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. 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. 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. 47. Fragen soweit? 24
  48. 48. HTML: Syntax 25
  49. 49. Tags <p>Das ist mein Absatz</p> 26
  50. 50. Tags Opening <tag> Closing </tag> <p>Das ist mein Absatz</p> 26
  51. 51. Tags Opening <tag> Closing </tag> <p>Das ist mein Absatz</p> • Layout-Elemente haben "opening" und "closing tags". 26
  52. 52. Tags Opening <tag> Closing </tag> <p>Das ist mein Absatz</p> • Layout-Elemente haben "opening" und "closing tags". • Ermöglicht Verschachtelung 26
  53. 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. 54. Tags: Verschachtelung <article> <h1>Welcome</h1> <p>Das ist mein Absatz, der <em>auch</em> verschachtelte Elemente enthält.</p> </article> 27
  55. 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. 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. 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. 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. 59. 28 Attribute <img src="img/logo.png">
  60. 60. 28 Attribute attribute = Eigenschaft <img src="img/logo.png">
  61. 61. "value" = Wert der Eigenschaft 28 Attribute attribute = Eigenschaft <img src="img/logo.png">
  62. 62. "value" = Wert der Eigenschaft 28 Attribute attribute = Eigenschaft <img src="img/logo.png"> • Elemente haben unterschiedliche attributes
  63. 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. 64. 29 Attribute: Wichtige
  65. 65. 29 Attribute: Wichtige <input id="i-am-unique">
  66. 66. Attribute: Wichtige <input id="i-am-unique"> Kennzeichnet ein zwingend einzigartiges Element, z.B. input im Formular; #jumpmark im gleichen Dokument 29
  67. 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. 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. 69. Attribute: Beispiele 30
  70. 70. Attribute: Beispiele <img src="img/my-dog.jpg" alt="Caja"> 30
  71. 71. Attribute: Beispiele <img src="img/my-dog.jpg" alt="Caja"> <a href="contact.html">Contact</a> 30
  72. 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. 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. 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. 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. 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. 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. 78. Interaktiv: HTML-Elemente untersuchen www.developinguxd.com 31
  79. 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. 80. HTML: Dokument erstellen 33
  81. 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. 82. Interaktiv: Dokument erstellen rohrpostix ☛ Daten/Transfer/Developing UXD/ kopieren! Dann Schreibtisch ☛ Developing UXD/exercises/01_html_start öffnen 35
  83. 83. Dokument erstellen 36
  84. 84. Dokument erstellen • Mit Emmet: html:5Tab 36
  85. 85. Dokument erstellen • Mit Emmet: html:5Tab • HTML5 Doctype: <!doctype html> 36
  86. 86. Dokument erstellen • Mit Emmet: html:5Tab • HTML5 Doctype: <!doctype html> • head: Metadaten, Dokumenttitel, Link zu Stylesheets 36
  87. 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. 88. Interaktiv: HTML schreiben 37
  89. 89. Weitere Ressourcen 38
  90. 90. Weitere Ressourcen • codecademy.com – kostenloser Onlinekurs 38
  91. 91. Weitere Ressourcen • codecademy.com – kostenloser Onlinekurs • developer.mozilla.org – MDN: alles zu HTML und CSS 38
  92. 92. Weitere Ressourcen • codecademy.com – kostenloser Onlinekurs • developer.mozilla.org – MDN: alles zu HTML und CSS • stackoverflow.com – Fragen und Antworten 38
  93. 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. 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. 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. 96. Das ist HTML. Fragen? 39
  97. 97. Agenda ✓ Einführung ✓ HTML-Grundlagen • CSS-Grundlagen • Bootstrap • Ausblick 40
  98. 98. CSS-Grundlagen 41
  99. 99. CSS: Elemente finden und stylen 42
  100. 100. Selektoren: class <img src="img/logo.png" alt="IA Konferenz"> 43
  101. 101. Selektoren: class <img src="img/logo.png" alt="IA Konferenz"> Nicht jedes <img> soll gleich gestylt werden 43
  102. 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. 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. 104. <img class="logo" src="img/logo.png" alt="IA Konferenz"> 44 Selektoren: class
  105. 105. <img class="logo" src="img/logo.png" alt="IA Konferenz"> .logo { width: 200px; height: 100px; } 44 Selektoren: class
  106. 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. 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. 108. .logo { width: 200px; height: 100px; } 45 Selektoren: class
  109. 109. .logo { width: 200px; height: 100px; } Eine "declaration" besteht aus property und value. 45 Selektoren: class
  110. 110. Selektoren: class .logo { width: 200px; height: 100px; } 45 : Eine "declaration" besteht aus property und value.
  111. 111. Selektoren: class .logo { width: 200px; height: 100px; } 45 : Eine "declaration" besteht aus property und value. ;
  112. 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. 113. Interaktiv: CSS mit DevTools untersuchen www.developinguxd.com 46
  114. 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. 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. 116. CSS: Wichtige Konzepte 49
  117. 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. 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. 119. Demonstration: Block- und Inline-Elemente 51
  120. 120. CSS: Box Model 52
  121. 121. CSS: Box Model Element 52 Element
  122. 122. CSS: Box Model 52 Padding Element Element
  123. 123. CSS: Box Model 52 Padding Border Element Element
  124. 124. CSS: Box Model Padding Margin 52 Border Element Element
  125. 125. CSS: Box Model Padding Margin 53 Border Element Element
  126. 126. Demonstration: Box Model 54
  127. 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. 128. Border, Margin und Padding: Werte 56 margin: 5px 10px 20px 3px;
  129. 129. Border, Margin und Padding: Werte 56 Oben margin: 5px 10px 20px 3px;
  130. 130. Border, Margin und Padding: Werte 56 Oben Rechts margin: 5px 10px 20px 3px;
  131. 131. Border, Margin und Padding: Werte 56 Oben Rechts margin: 5px 10px 20px 3px; Unten
  132. 132. Border, Margin und Padding: Werte 56 Oben Rechts margin: 5px 10px 20px 3px; Unten Links
  133. 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. 134. Border, Margin und Padding: Werte 57
  135. 135. Border, Margin und Padding: Werte margin: 5px 10px 20px 3px; Oben Rechts Unten Links 57
  136. 136. Border, Margin und Padding: Werte margin: 5px 10px 20px 3px; Oben Rechts Unten Links 57 margin: 5px 10px 20px 10px;
  137. 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. 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. 139. Interaktiv: CSS schreiben 58 03_css_start
  140. 140. Weitere Ressourcen 59
  141. 141. Weitere Ressourcen • css-tricks.com – CSS Tutorials und Tipps 59
  142. 142. Weitere Ressourcen • css-tricks.com – CSS Tutorials und Tipps • developer.mozilla.org – alles zu HTML und CSS 59
  143. 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. 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. 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. 146. Das ist CSS. Fragen? 60
  147. 147. Agenda ✓ Einführung ✓ HTML-Grundlagen ✓ CSS-Grundlagen • Bootstrap • Ausblick 61
  148. 148. Bootstrap 62
  149. 149. Bootstrap: Was ist das? 63
  150. 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. 151. Wie funktioniert Bootstrap? 65
  152. 152. Wie funktioniert Bootstrap? • Verknüpfung: von Bootstrap-CSS sowie -JS mit dem eigenen HTML 65
  153. 153. Wie funktioniert Bootstrap? • Verknüpfung: von Bootstrap-CSS sowie -JS mit dem eigenen HTML • Automatisches Styling: von Typographie und Links 65
  154. 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. 155. Demonstration: Das ist Bootstrap. getbootstrap.com 66
  156. 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. 157. Bootstrap: das Grid 68
  158. 158. Bootstrap: Grid 69
  159. 159. Bootstrap: Grid • Grid-System für Adaptive und Responsive Web Design 69
  160. 160. Bootstrap: Grid • Grid-System für Adaptive und Responsive Web Design • Ist standardmäßig mobile first („scale up“) 69
  161. 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. 162. Bootstrap: Grid 1. Klasse container container (fixed-width für Adaptive-Verhalten) oder container-fluid (full-width für Fluid-Verhalten) 70
  163. 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. 164. 2. Klasse row um Elemente nebeneinander anzuordnen 71 Bootstrap: Grid
  165. 165. 2. Klasse row um Elemente nebeneinander anzuordnen <div class="container-fluid"> <div class="row"> </div> </div> 71 Bootstrap: Grid
  166. 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. 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. 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. 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. 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. 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. 172. Bootstrap Grid: Columns mit Versatz 4 Spalten 4 Spalten 75
  173. 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. 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. 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. 176. Interaktiv: Bootstrap kennenlernen 77
  177. 177. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download unter http://getbootstrap.com/ 78 downloads / bootstrap-3.3.0-dist Dieses, bitte!
  178. 178. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download unter http://getbootstrap.com/ 79
  179. 179. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download • Schritt 2: Dateistruktur anlegen Lokaler Ordner
  180. 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. 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. 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. 183. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download • Schritt 2: Dateistruktur anlegen • Schritt 3: Dateien verknüpfen 81
  184. 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. 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. 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. 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. 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. 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. 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. 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. 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. 193. Los gehts! 05_bootstrap_start 89
  194. 194. Inhaltselemente: Main navigation 90
  195. 195. Inhaltselemente: Main navigation • Nav-Style 90
  196. 196. Inhaltselemente: Main navigation • Nav-Style • Ausrichtung 90
  197. 197. Inhaltselemente: Main navigation • Nav-Style • Ausrichtung • Textgröße 90
  198. 198. Inhaltselemente: Main navigation • Nav-Style • Ausrichtung • Textgröße • Abstand nach unten 90
  199. 199. Inhaltselemente: weitere Stylings 91
  200. 200. Inhaltselemente: weitere Stylings • Breadcrumb 91
  201. 201. Inhaltselemente: weitere Stylings • Breadcrumb • Buttons: aus dem Download-Link und dem „Buy now“-Link 91
  202. 202. Inhaltselemente: weitere Stylings • Breadcrumb • Buttons: aus dem Download-Link und dem „Buy now“-Link • Kleinere Headlines im Aside 91
  203. 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. 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. 205. Bootstrap: Was noch zu sagen ist. 92
  206. 206. Demonstration: JavaScript mit Bootstrap getbootstrap.com 93
  207. 207. Warum Bootstrap? 94
  208. 208. Warum Bootstrap? • Gute Dokumentation 94
  209. 209. Warum Bootstrap? • Gute Dokumentation • Große Community 94
  210. 210. Warum Bootstrap? • Gute Dokumentation • Große Community • Viele UI-Elemente 94
  211. 211. Warum Bootstrap? • Gute Dokumentation • Große Community • Viele UI-Elemente • Responsive Web Design als Standard 94
  212. 212. Warum Bootstrap? • Gute Dokumentation • Große Community • Viele UI-Elemente • Responsive Web Design als Standard • Individuell anpassbar ("Customize") 94
  213. 213. Unser Boilerplate: für euch github.com/developinguxd/boilerplates 95
  214. 214. Das ist Bootstrap. Noch Fragen? 96
  215. 215. Agenda ✓ Einführung ✓ HTML-Grundlagen ✓ CSS-Grundlagen ✓ Bootstrap • Ausblick 97
  216. 216. Ausblick 98
  217. 217. Tipps: die tägliche Arbeit 99
  218. 218. Tipps: die tägliche Arbeit • Start: Handscribbles 99
  219. 219. Tipps: die tägliche Arbeit • Start: Handscribbles • Entscheidung: Ist die Projektart geeignet? 99
  220. 220. Tipps: die tägliche Arbeit • Start: Handscribbles • Entscheidung: Ist die Projektart geeignet? • Doing: Prototyping gemeinsam durch Kreation und Frontend-Entwicklung 99
  221. 221. Weiterlernen: viele wichtige Themen 100
  222. 222. Weiterlernen: viele wichtige Themen 100 HTML CSS Bootstrap DevTools holder.js
  223. 223. Weiterlernen: viele wichtige Themen jQuery 100 HTML CSS Bootstrap DevTools holder.js JavaScript Responsive Mobile
  224. 224. Weiterlernen: viele wichtige Themen jQuery 100 HTML CSS Bootstrap DevTools holder.js GitHub Webfonts CodePen Emmet JavaScript Responsive Mobile
  225. 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. 226. One more thing ... 102
  227. 227. Developing UXD: Unsere Idee 103
  228. 228. Developing UXD: Unsere Idee 104
  229. 229. Developing UXD: Unsere Idee • Fest definiertes, gemeinsames Toolset 104
  230. 230. Developing UXD: Unsere Idee • Fest definiertes, gemeinsames Toolset • Moderne, erprobte Standards 104
  231. 231. Developing UXD: Unsere Idee • Fest definiertes, gemeinsames Toolset • Moderne, erprobte Standards • Vorauswahl der besten Lernressourcen 104
  232. 232. Developing UXD: Unsere Idee • Fest definiertes, gemeinsames Toolset • Moderne, erprobte Standards • Vorauswahl der besten Lernressourcen • Lebendige Plattform 104
  233. 233. Developing UXD: Unsere Idee • Fest definiertes, gemeinsames Toolset • Moderne, erprobte Standards • Vorauswahl der besten Lernressourcen • Lebendige Plattform • Gemeinsam und Open Source 104
  234. 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. 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. 236. 105
  237. 237. developinguxd.com 105
  238. 238. developinguxd.com @developinguxd facebook.com/developinguxd mail@developinguxd.com 105
  239. 239. Developing UXD: Nächste Schritte 106
  240. 240. Developing UXD: Nächste Schritte • Die besten Lernquellen im Web 106
  241. 241. Developing UXD: Nächste Schritte • Die besten Lernquellen im Web • Lernpläne 106
  242. 242. Developing UXD: Nächste Schritte • Die besten Lernquellen im Web • Lernpläne • Aufbau einer Community begeisterter UX-Designer 106
  243. 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. 244. Vielen Dank! Happy coding! 107
  245. 245. Euer Feedback: Wie wars? 108
  246. 246. developinguxd.com @developinguxd facebook.com/developinguxd mail@developinguxd.com 109
  247. 247. Cornelia Erbs, Jeremias Dombrowsky Lessers Passage 10 22767 Hamburg +49 (0)151 23421980 mail@developinguxd.com http://developinguxd.com/ 110
  248. 248. Alle Icons in dieser Präsentation kommen von http://iconmonstr.com/ 111
  249. 249. Backlog 112
  250. 250. Backlog: Sublime, HTML, CSS, JS 113
  251. 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. 252. Sublime Text 3: Emmet Shortcuts 115
  253. 253. Sublime Text 3: Emmet Shortcuts • Selector-Syntax: e.g. article>h1+pTab wird zu <article> <h1></h1> <p></p> </article> 115
  254. 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. 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. 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. 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. 258. Sublime Text 3: Shortcuts 117
  259. 259. Sublime Text 3: Shortcuts • TagnameTab: Autocomplete (Mehrfach für Sprungmarken) 117
  260. 260. Sublime Text 3: Shortcuts • TagnameTab: Autocomplete (Mehrfach für Sprungmarken) • Cmd+p: Fuzzy-Search für Dateien 117
  261. 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. 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. 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. 264. Selektoren: BEM naming convention 118
  265. 265. Selektoren: BEM naming convention • .page-header: Einfacher Bindestrich bei zusammengesetzten Namen 118
  266. 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. 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. 268. Holder.js: Img placeholders 119
  269. 269. Holder.js: Img placeholders • Download: http://imsky.github.io/holder/ 119
  270. 270. Holder.js: Img placeholders • Download: http://imsky.github.io/holder/ • JavaScript im <body> laden: <script src="js/holder.js"></script> 119
  271. 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. 272. Backlog: Bootstrap 120
  273. 273. Bootstrap UI Editors • Eine Reihe von Editoren: für unterschiedliche Ansprüche • Siehe: http://thedesignblitz.com/the-best-bootstrap-ui-editors/ 121
  274. 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. 275. Backlog: Argumentationshilfe 123
  276. 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. 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. 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. 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. 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. 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. 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. 283. developinguxd.com @developinguxd facebook.com/developinguxd mail@developinguxd.com 131

×