<Developing UXD>
So leicht ist Frontendentwicklung für
Konzepter und Designer heute
IA Konferenz 2014
Conni und Jerry: Wer wir sind
2
Conni
Cornelia Erbs
3
Freelancerin als Senior User
Experience Architect
Davor Senior User Experience Architect
für große H...
Jerry
Jeremias Dombrowsky
4
Senior Frontend Engineer bei XING
Davor Creative Technologist für
namhafte Agenturen und Unter...
Ziele des Workshops
5
Ziele des Workshops
6
Ziele des Workshops
• Quellcode lesen und verstehen
6
Ziele des Workshops
• Quellcode lesen und verstehen
• Die erste Hürde des Selbst-Codens nehmen
6
Ziele des Workshops
• Quellcode lesen und verstehen
• Die erste Hürde des Selbst-Codens nehmen
• Wissen, wie man weiter le...
Nach dem Workshop könnt ihr noch nicht:
7
Axure wegschmeißen

und direkt alle Wireframes

per Code erzeugen.
8
Einführung: Warum wir dazu lernen müssen
9
Warum sollten wir HTML und CSS lernen?
10
Warum sollten wir HTML und CSS lernen?
• Die Basis dessen, was wir gestalten, sollten wir kennen.
10
Warum sollten wir HTML und CSS lernen?
• Die Basis dessen, was wir gestalten, sollten wir kennen.
• Zumal: Die Tools wechs...
Warum sollten wir HTML und CSS lernen?
• Die Basis dessen, was wir gestalten, sollten wir kennen.
• Zumal: Die Tools wechs...
”Coding is going to be
the literacy
of the 21st Century.“
ZACH SIMS
Co-Founder Codecademy
Es kann unsere Arbeitsweise verbessern!
12
Es kann unsere Arbeitsweise verbessern!
12
Heutige Arbeitsweise
Technisch
umsetzen
Anforderungen
klären
Wireframes
erstell...
Es kann unsere Arbeitsweise verbessern!
12
Heutige Arbeitsweise
Technisch
umsetzen
Anforderungen
klären
Wireframes
erstell...
Es kann unsere Arbeitsweise verbessern!
12
Heutige Arbeitsweise
Technisch
umsetzen
Anforderungen
klären
Wireframes
erstell...
Es kann unsere Arbeitsweise verbessern!
13
Zukünftige Arbeitsweise
Es kann unsere Arbeitsweise verbessern!
13
Zukünftige Arbeitsweise
Statische
Dokumente
• Brief
• User Journeys
• Sketching...
Es kann unsere Arbeitsweise verbessern!
13
Zukünftige Arbeitsweise
Statische
Dokumente
• Brief
• User Journeys
• Sketching...
Es kann unsere Arbeitsweise verbessern!
13
Zukünftige Arbeitsweise
Statische
Dokumente
• Brief
• User Journeys
• Sketching...
Es kann unsere Arbeitsweise verbessern!
13
Zukünftige Arbeitsweise
Statische
Dokumente
• Brief
• User Journeys
• Sketching...
Es kann unsere Arbeitsweise verbessern!
13
Zukünftige Arbeitsweise
Statische
Dokumente
• Brief
• User Journeys
• Sketching...
Ende der Einführung. Fragen?
14
Agenda
✓ Einführung
• HTML-Grundlagen
• CSS-Grundlagen
• Bootstrap
• Ausblick
15
HTML-Grundlagen
16
HTML: Aufbau und Inhalte einer Website
17
Interaktiv: Layout-Elemente kennenlernen
18
HTML: Layout-Elemente
19
HTML: Layout-Elemente
• header, footer, aside, nav, main, article, section:

"Sectioning elements" gruppieren inhaltlich
19
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
20
HTML: Inhaltselemente – Textinhalte
• h1, h2: Heading. Pro section ein neues h1.
• p: Absatz ("paragraph")
• a: Link ("anc...
HTML: Inhaltselemente – Weitere Inhalte
22
HTML: Inhaltselemente – Weitere Inhalte
• img: "image" – Bildelement
22
HTML: Inhaltselemente – Weitere Inhalte
• img: "image" – Bildelement
• ul, ol: "unordered/ordered list" – eine Liste mit
B...
HTML: Inhaltselemente – Weitere Inhalte
• img: "image" – Bildelement
• ul, ol: "unordered/ordered list" – eine Liste mit
B...
HTML: Inhaltselemente – Weitere Inhalte
• img: "image" – Bildelement
• ul, ol: "unordered/ordered list" – eine Liste mit
B...
Fragen soweit?
23
HTML: Syntax
24
Tags
<p>Das ist mein Absatz</p>
25
Tags
<p>Das ist mein Absatz</p>
Opening <tag> Closing </tag>
25
Tags
<p>Das ist mein Absatz</p>
Opening <tag> Closing </tag>
25
• Layout-Elemente haben "opening" und "closing tags"
Tags
<p>Das ist mein Absatz</p>
Opening <tag> Closing </tag>
25
• Layout-Elemente haben "opening" und "closing tags"
• Erm...
Tags
<p>Das ist mein Absatz</p>
Opening <tag> Closing </tag>
25
• Layout-Elemente haben "opening" und "closing tags"
• Erm...
Tags: Verschachtelung
26
<article>

<h1>Welcome</h1>

<p>Das ist mein Absatz, der <em>auch</em>
verschachtelte Elemente en...
Tags: Verschachtelung
26
<article>

<h1>Welcome</h1>

<p>Das ist mein Absatz, der <em>auch</em>
verschachtelte Elemente en...
Tags: Verschachtelung
26
<article>

<h1>Welcome</h1>

<p>Das ist mein Absatz, der <em>auch</em>
verschachtelte Elemente en...
Tags: Verschachtelung
26
<article>

<h1>Welcome</h1>

<p>Das ist mein Absatz, der <em>auch</em>
verschachtelte Elemente en...
Tags: Verschachtelung
26
<article>

<h1>Welcome</h1>

<p>Das ist mein Absatz, der <em>auch</em>
verschachtelte Elemente en...
27
Attribute
<img src="img/logo.png">
27
Attribute
<img src="img/logo.png">
attribute

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

= Eigenschaft
"value"

= Wert der Eigenschaft
27
Attribute
<img src="img/logo.png">
attribute

= Eigenschaft
"value"

= Wert der Eigenschaft
• Elemente haben unterschie...
27
Attribute
<img src="img/logo.png">
attribute

= Eigenschaft
"value"

= Wert der Eigenschaft
• Elemente haben unterschie...
28
Attribute: Wichtige
28
Attribute: Wichtige
<input id="i-am-unique">
28
Attribute: Wichtige
<input id="i-am-unique">
Kennzeichnet ein zwingend einzigartiges Element, z.B.
input im Formular; #...
28
Attribute: Wichtige
<input id="i-am-unique">
Kennzeichnet ein zwingend einzigartiges Element, z.B.
input im Formular; #...
28
Attribute: Wichtige
<input id="i-am-unique">
Kennzeichnet ein zwingend einzigartiges Element, z.B.
input im Formular; #...
Attribute: Beispiele
29
Attribute: Beispiele
29
<img src="img/my-dog.jpg" alt="Caja">
Attribute: Beispiele
29
<img src="img/my-dog.jpg" alt="Caja">
<a href="contact.html">Contact</a>
Attribute: Beispiele
29
<img src="img/my-dog.jpg" alt="Caja">
<a href="contact.html">Contact</a>
<a href="http://google.co...
Attribute: Beispiele
29
<img src="img/my-dog.jpg" alt="Caja">
<a href="contact.html">Contact</a>
<a href="http://google.co...
Attribute: Beispiele
29
<img src="img/my-dog.jpg" alt="Caja">
<a href="contact.html">Contact</a>
<a href="http://google.co...
Attribute: Beispiele
29
<img src="img/my-dog.jpg" alt="Caja">
<a href="contact.html">Contact</a>
<a href="http://google.co...
Attribute: Beispiele
29
<img src="img/my-dog.jpg" alt="Caja">
<a href="contact.html">Contact</a>
<a href="http://google.co...
Attribute: Beispiele
29
<img src="img/my-dog.jpg" alt="Caja">
<a href="contact.html">Contact</a>
<a href="http://google.co...
Interaktiv: HTML-Elemente untersuchen
30
HTML-Elemente untersuchen
• Google Chrome: "Chrome Developer Tools (DevTools)"
• Rechtsklick auf Element: "Element untersu...
HTML: Dokument erstellen
32
Sublime Text 3 einrichten: komplett
• Download: http://www.sublimetext.com/3
• Einstellungen: "Default Settings" in "User ...
Interaktiv: Dokument erstellen
34
U
SB
01_html_start
Dokument erstellen
35
Dokument erstellen
• Mit Emmet: html:5Tab
35
Dokument erstellen
• Mit Emmet: html:5Tab
• HTML5 Doctype: <!doctype html>
35
Dokument erstellen
• Mit Emmet: html:5Tab
• HTML5 Doctype: <!doctype html>
• head: Metadaten, Dokumenttitel, Link zu Style...
Dokument erstellen
• Mit Emmet: html:5Tab
• HTML5 Doctype: <!doctype html>
• head: Metadaten, Dokumenttitel, Link zu Style...
Interaktiv: HTML schreiben
36
Weitere Ressourcen
37
Weitere Ressourcen
• codecademy.com – kostenloser Onlinekurs
37
Weitere Ressourcen
• codecademy.com – kostenloser Onlinekurs
• developer.mozilla.org – alles zu HTML und CSS
37
Weitere Ressourcen
• codecademy.com – kostenloser Onlinekurs
• developer.mozilla.org – alles zu HTML und CSS
• stackoverflo...
Weitere Ressourcen
• codecademy.com – kostenloser Onlinekurs
• developer.mozilla.org – alles zu HTML und CSS
• stackoverflo...
Weitere Ressourcen
• codecademy.com – kostenloser Onlinekurs
• developer.mozilla.org – alles zu HTML und CSS
• stackoverflo...
Weitere Ressourcen
• codecademy.com – kostenloser Onlinekurs
• developer.mozilla.org – alles zu HTML und CSS
• stackoverflo...
Das ist HTML. Fragen?
38
Agenda
✓ Einführung
✓ HTML-Grundlagen
• CSS-Grundlagen
• Bootstrap
• Ausblick
39
CSS-Grundlagen
40
CSS: Elemente finden und verändern
41
Selektoren: class
42
<img src="img/logo.png" alt="IA Konferenz">
Selektoren: class
42
<img src="img/logo.png" alt="IA Konferenz">
Nicht jedes <img> soll gleich gestylt werden
Selektoren: class
42
<img src="img/logo.png" alt="IA Konferenz">
Nicht jedes <img> soll gleich gestylt werden
<img class="...
Selektoren: class
42
<img src="img/logo.png" alt="IA Konferenz">
Nicht jedes <img> soll gleich gestylt werden
<img class="...
Selektoren: class
43
<img class="logo" src="img/logo.png" alt="IA Konferenz">
.logo {

width: 200px;

height: 100px;

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

width: 200px;

height: 100px;

}
Selektoren: class
43
.class-selector beginnt immer mit einem Punkt (.logo).
<img...
.logo {

width: 200px;

height: 100px;

}
Selektoren: class
43
.class-selector beginnt immer mit einem Punkt (.logo).
<img...
.logo {

width: 200px;

height: 100px;

}
Selektoren: class
44
.logo {

width: 200px;

height: 100px;

}
Selektoren: class
44
Eine "declaration" besteht
aus property und value.
.logo {

width: 200px;

height: 100px;

}
Selektoren: class
44
:
Eine "declaration" besteht
aus property und value.
.logo {

width: 200px;

height: 100px;

}
Selektoren: class
44
:
Eine "declaration" besteht
aus property und value.
;
.logo {

width: 200px;

height: 100px;

}
Selektoren: class
44
:
Eine "declaration" besteht
aus property und value.
; sele...
Interaktiv: CSS untersuchen
45
CSS untersuchen
• Element auswählen, Declarations ein- und ausschalten,

Werte ändern (auch mit Pfeiltasten und Shift)
• E...
CSS: Learnings durch DevTools
• h1: "Element-Selektoren" nur für sehr allgemeine Styles,
sind weniger spezifisch als Klasse...
CSS: Wichtige Konzepte
48
CSS: Block- und Inline-Elemente
49
Block-Elemente
Nehmen sich immer die
ganze verfügbare Breite.
z. B. h1, p, ul, li, div
CSS: Block- und Inline-Elemente
49
Block-Elemente
Nehmen sich immer die
ganze verfügbare Breite.
z. B. h1, p, ul, li, div
...
Demonstration: Block- und Inline-Elemente
50
CSS: Box Model
51
CSS: Box Model
51
Element
Element
CSS: Box Model
51
Padding
Element
Element
CSS: Box Model
51
Border
Padding
Element
Element
CSS: Box Model
Margin
51
Border
Padding
Element
Element
Demonstration: Box Model
52
CSS: Learnings Boxmodel
• Browser geben den Elementen Standard-Styles.
• padding wird auf die width und height draufgerech...
Border, Margin und Padding: Werte
54
margin: 5px 10px 20px 3px;
Border, Margin und Padding: Werte
54
margin: 5px 10px 20px 3px;
Oben
Border, Margin und Padding: Werte
54
margin: 5px 10px 20px 3px;
Oben Rechts
Border, Margin und Padding: Werte
54
margin: 5px 10px 20px 3px;
Oben
Unten
Rechts
Border, Margin und Padding: Werte
54
margin: 5px 10px 20px 3px;
Oben
Unten
Rechts
Links
Border, Margin und Padding: Werte
54
margin: 5px 10px 20px 3px;
Oben
Unten
Rechts
Links
margin-top: 5px;
margin-right: 10p...
Border, Margin und Padding: Werte
55
Border, Margin und Padding: Werte
55
margin: 5px 10px 20px 3px; Oben UntenRechts Links
Border, Margin und Padding: Werte
55
margin: 5px 10px 20px 10px;
margin: 5px 10px 20px 3px; Oben UntenRechts Links
Border, Margin und Padding: Werte
55
margin: 5px 10px 20px 10px;
margin: 5px 10px 5px 10px;
margin: 5px 10px 20px 3px; Obe...
Border, Margin und Padding: Werte
55
margin: 5px 10px 20px 10px;
margin: 5px 10px 5px 10px;
margin: 5px 5px 5px 5px;
margi...
Interaktiv: CSS schreiben
56
U
SB
03_css_start
Weitere Ressourcen
57
Weitere Ressourcen
• css-tricks.com – CSS Tutorials und Tipps
57
Weitere Ressourcen
• css-tricks.com – CSS Tutorials und Tipps
• developer.mozilla.org – alles zu HTML und CSS
57
Weitere Ressourcen
• css-tricks.com – CSS Tutorials und Tipps
• developer.mozilla.org – alles zu HTML und CSS
• stackoverfl...
Weitere Ressourcen
• css-tricks.com – CSS Tutorials und Tipps
• developer.mozilla.org – alles zu HTML und CSS
• stackoverfl...
Weitere Ressourcen
• css-tricks.com – CSS Tutorials und Tipps
• developer.mozilla.org – alles zu HTML und CSS
• stackoverfl...
Weitere Ressourcen
• css-tricks.com – CSS Tutorials und Tipps
• developer.mozilla.org – alles zu HTML und CSS
• stackoverfl...
Das ist CSS. Fragen?
58
Agenda
✓ Einführung
✓ HTML-Grundlagen
✓ CSS-Grundlagen
• Bootstrap
• Ausblick
59
Bootstrap
60
Bootstrap: Was ist das?
61
62
The most popular front-end framework for developing
responsive, mobile first projects on the web.
Was ist Bootstrap?
62
„Millions of amazing sites
across the web are being
built with Bootstrap.“
The most popular front-end framework for dev...
62
„Millions of amazing sites
across the web are being
built with Bootstrap.“
Sammlung von
HTML, CSS und JS
The most popul...
62
NEU in Bootstrap 3
„Millions of amazing sites
across the web are being
built with Bootstrap.“
Sammlung von
HTML, CSS un...
Wie funktioniert Bootstrap?
63
Wie funktioniert Bootstrap?
• Verknüpfung: von Bootstrap-CSS sowie -JS mit dem
eigenen HTML
63
Wie funktioniert Bootstrap?
• Verknüpfung: von Bootstrap-CSS sowie -JS mit dem
eigenen HTML
• Automatisches Styling: von T...
Wie funktioniert Bootstrap?
• Verknüpfung: von Bootstrap-CSS sowie -JS mit dem
eigenen HTML
• Automatisches Styling: von T...
Demonstration: Das ist Bootstrap.
64
Bootstrap: CSS und Components
65
CSS
Typography
Code
Tables
Forms
Buttons
Images
Helper Classes
Responsive Utilities
Compo...
Bootstrap: das Grid
66
Bootstrap: Grid
67
Bootstrap: Grid
• Grid-System für Adaptive und Responsive Web Design
67
Bootstrap: Grid
• Grid-System für Adaptive und Responsive Web Design
• Ist standardmäßig mobile first („scale up“)
67
Bootstrap: Grid
• Grid-System für Adaptive und Responsive Web Design
• Ist standardmäßig mobile first („scale up“)
• Funkti...
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...
Bootstrap: Grid
2. Klasse „Row“

um Elemente nebeneinander anzuordnen
69
Bootstrap: Grid
2. Klasse „Row“

um Elemente nebeneinander anzuordnen
69
<div class="container-fluid">

<div class="row">
<...
Bootstrap: Grid
3. Klasse „Column“

für die Definition der Spaltenbreite, basierend auf
einem 12-spaltigen Grid-System
70
Bootstrap: Grid
3. Klasse „Column“

für die Definition der Spaltenbreite, basierend auf
einem 12-spaltigen Grid-System
70
<...
<div class="container-fluid">

<div class="row">
<div class="col-md-6">Halbe Reihe</div>
<div class="col-md-6">Halbe Reihe<...
<div class="container-fluid">

<div class="row">
<div class="col-md-6">Halbe Reihe</div>
<div class="col-md-6">Halbe Reihe<...
Bootstrap Grid: Columns
72
Extra small

devices
Phones
<768px
.col-xs-
Small

devices
Tablets
≥768px
.col-sm-
Medium

devi...
Bootstrap Grid: Columns
72
Extra small

devices
Phones
<768px
.col-xs-
Small

devices
Tablets
≥768px
.col-sm-
Medium

devi...
Bootstrap Grid: Columns mit Versatz
73
4 Spalten 4 Spalten
Bootstrap Grid: Columns mit Versatz
73
4 Spalten 4 Spalten
<div class="container-fluid">

<div class="row">
<div class=„col...
Bootstrap Grid: Columns mit Versatz
73
4 Spalten 4 Spalten
<div class="container-fluid">

<div class="row">
<div class=„col...
Responsive und Mobile first: nicht heute
• Bootstrap ist von Haus aus responsive.
• Spezielle Elemente:
• Responsive table...
Interaktiv: Bootstrap kennenlernen
75
Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download unter http://getbootstrap.com/

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

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

76
U
SB
downloads /
bootstrap-3.1...
Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download unter http://getbootstrap.com/

77
Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download
• Schritt 2: Dateistruktur anlegen
Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download
• Schritt 2: Dateistruktur anlegen
getbootstrap.com
css/bootstrap...
Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download
• Schritt 2: Dateistruktur anlegen
getbootstrap.com
css/bootstrap...
Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download
• Schritt 2: Dateistruktur anlegen
getbootstrap.com
css/bootstrap...
Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download
• Schritt 2: Dateistruktur anlegen
getbootstrap.com
css/bootstrap...
Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download
• Schritt 2: Dateistruktur anlegen U
SB
05_bootstrap_
start
getbo...
Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download
• Schritt 2: Dateistruktur anlegen
• Schritt 3: Dateien verknüpfe...
Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download
• Schritt 2: Dateistruktur anlegen
• Schritt 3: Dateien verknüpfe...
Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download
• Schritt 2: Dateistruktur anlegen
• Schritt 3: Dateien verknüpfe...
Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download
• Schritt 2: Dateistruktur anlegen
• Schritt 3: Dateien verknüpfe...
X
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üpfe...
Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download
• Schritt 2: Dateistruktur anlegen
• Schritt 3: Dateien verknüpfe...
Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download
• Schritt 2: Dateistruktur anlegen
• Schritt 3: Dateien verknüpfe...
Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download
• Schritt 2: Dateistruktur anlegen
• Schritt 3: Dateien verknüpfe...
Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download
• Schritt 2: Dateistruktur anlegen
• Schritt 3: Dateien verknüpfe...
Bootstrap: Grid anlegen für main
86
U
SB
05_bootstrap_
start
Bootstrap: Grid anlegen für main
• container und row sind bereits da
86
U
SB
05_bootstrap_
start
Bootstrap: Grid anlegen für main
• container und row sind bereits da
• Section „Jump Marks“ und „Articles“: col-sm-7
86
U
...
Bootstrap: Grid anlegen für main
• container und row sind bereits da
• Section „Jump Marks“ und „Articles“: col-sm-7
• Asi...
Bootstrap: Inhaltselemente stylen
87
Bootstrap: Inhaltselemente stylen
87
• Link „Einreichungsformular“: grüner Button

Link „Tickets kaufen“: großer, orangene...
Bootstrap: Inhaltselemente stylen
87
• Link „Einreichungsformular“: grüner Button

Link „Tickets kaufen“: großer, orangene...
Bootstrap: Inhaltselemente stylen
87
• Link „Einreichungsformular“: grüner Button

Link „Tickets kaufen“: großer, orangene...
Bootstrap: Inhaltselemente stylen
87
• Link „Einreichungsformular“: grüner Button

Link „Tickets kaufen“: großer, orangene...
Inhaltselemente: weitere Stylings
88
Inhaltselemente: weitere Stylings
• Liste in Main aside: ohne Bulletpoints („unstyled“)
88
Inhaltselemente: weitere Stylings
• Liste in Main aside: ohne Bulletpoints („unstyled“)
• Jump Marks: kleinere Textgröße
88
Inhaltselemente: weitere Stylings
• Liste in Main aside: ohne Bulletpoints („unstyled“)
• Jump Marks: kleinere Textgröße
•...
Bootstrap: Was noch zu sagen ist.
89
Demonstration: JavaScript mit Bootstrap
90
Warum Bootstrap?
91
Warum Bootstrap?
• Gute Dokumentation
91
Warum Bootstrap?
• Gute Dokumentation
• Große Community
91
Warum Bootstrap?
• Gute Dokumentation
• Große Community
• Viele UI-Elemente
91
Warum Bootstrap?
• Gute Dokumentation
• Große Community
• Viele UI-Elemente
• Responsive Web Design als Standard
91
Warum Bootstrap?
• Gute Dokumentation
• Große Community
• Viele UI-Elemente
• Responsive Web Design als Standard
• Individ...
Unser erstes Boilerplate: für euch
92
github.com/developinguxd/boilerplates
Das ist Bootstrap. Noch Fragen?
93
Agenda
✓ Einführung
✓ HTML-Grundlagen
✓ CSS-Grundlagen
✓ Bootstrap
• Ausblick
94
Ausblick
95
96
Tipps: die tägliche Arbeit
• Start: Handscribbles
96
Tipps: die tägliche Arbeit
• Start: Handscribbles
• Entscheidung: Ist die Projektart geeignet?
96
Tipps: die tägliche Arbeit
• Start: Handscribbles
• Entscheidung: Ist die Projektart geeignet?
• Doing: Prototyping gemeinsam durch Kreation und
Fron...
• Start: Handscribbles
• Entscheidung: Ist die Projektart geeignet?
• Doing: Prototyping gemeinsam durch Kreation und
Fron...
Weiterlernen: viele wichtige Themen
97
Weiterlernen: viele wichtige Themen
97
HTML
CSS
Bootstrap
DevTools
Weiterlernen: viele wichtige Themen
97
JavaScript
jQuery
Sass
holder.jsHTML
CSS
Bootstrap
DevTools
Weiterlernen: viele wichtige Themen
97
JavaScript
jQuery
Sass
holder.js GitHub
CodeKit
Webfonts
CodePen
HTML
CSS
Bootstrap...
“I think everybody in
this country should
learn how to program
a computer because
it teaches you how to
think.“
STEVE JOBS...
One more thing ...
99
Developing UXD: Unsere Idee
100
Developing UXD: Unsere Idee
101
Developing UXD: Unsere Idee
• Fest definiertes, gemeinsames Toolset
101
Developing UXD: Unsere Idee
• Fest definiertes, gemeinsames Toolset
• Moderne, erprobte Standards
101
Developing UXD: Unsere Idee
• Fest definiertes, gemeinsames Toolset
• Moderne, erprobte Standards
• Vorauswahl der besten L...
Developing UXD: Unsere Idee
• Fest definiertes, gemeinsames Toolset
• Moderne, erprobte Standards
• Vorauswahl der besten L...
Developing UXD: Unsere Idee
• Fest definiertes, gemeinsames Toolset
• Moderne, erprobte Standards
• Vorauswahl der besten L...
Developing UXD: Unsere Idee
• Fest definiertes, gemeinsames Toolset
• Moderne, erprobte Standards
• Vorauswahl der besten L...
Developing UXD: Unsere Idee
• Fest definiertes, gemeinsames Toolset
• Moderne, erprobte Standards
• Vorauswahl der besten L...
102
developinguxd.com
102
developinguxd.com
102
@developinguxd
facebook.com/developinguxd
mail@developinguxd.com
Developing UXD: Nächste Schritte
103
Developing UXD: Nächste Schritte
• Die besten Lernquellen im Web
103
Developing UXD: Nächste Schritte
• Die besten Lernquellen im Web
• Lernpläne
103
Developing UXD: Nächste Schritte
• Die besten Lernquellen im Web
• Lernpläne
• Aufbau einer Community begeisterter UX-Desi...
Developing UXD: Nächste Schritte
• Die besten Lernquellen im Web
• Lernpläne
• Aufbau einer Community begeisterter UX-Desi...
Vielen Dank! Happy coding!
104
Euer Feedback: Wie wars?
105
developinguxd.com
106
@developinguxd
facebook.com/developinguxd
mail@developinguxd.com
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/
108
Backlog
110
Backlog: Sublime, HTML, CSS, JS
111
Backlog
• Sublime: Shortcuts
• Sublime: Emmet Shortcuts
• HTML: Formulare
• Holder.js: Img placeholders
• CSS: BEM naming ...
Sublime Text 3: Emmet Shortcuts
113
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 v...
Sublime Text 3: Shortcuts
115
Sublime Text 3: Shortcuts
• TagnameTab: Autocomplete (Mehrfach für Sprungmarken)
115
Sublime Text 3: Shortcuts
• TagnameTab: Autocomplete (Mehrfach für Sprungmarken)
• Cmd+p: Fuzzy-Search für Dateien
115
Sublime Text 3: Shortcuts
• TagnameTab: Autocomplete (Mehrfach für Sprungmarken)
• Cmd+p: Fuzzy-Search für Dateien
• Cmd+S...
Sublime Text 3: Shortcuts
• TagnameTab: Autocomplete (Mehrfach für Sprungmarken)
• Cmd+p: Fuzzy-Search für Dateien
• Cmd+S...
Sublime Text 3: Shortcuts
• TagnameTab: Autocomplete (Mehrfach für Sprungmarken)
• Cmd+p: Fuzzy-Search für Dateien
• Cmd+S...
Selektoren: BEM naming convention
116
Selektoren: BEM naming convention
• .page-header: Einfacher Bindestrich bei
zusammengesetzten Namen
116
Selektoren: BEM naming convention
• .page-header: Einfacher Bindestrich bei
zusammengesetzten Namen
• .page-nav, .page-nav...
Selektoren: BEM naming convention
• .page-header: Einfacher Bindestrich bei
zusammengesetzten Namen
• .page-nav, .page-nav...
Holder.js: Img placeholders
117
Holder.js: Img placeholders
• Download: http://imsky.github.io/holder/
117
Holder.js: Img placeholders
• Download: http://imsky.github.io/holder/
• JavaScript im <body> laden:

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

<script src="js/hold...
Backlog: Bootstrap
118
Bootstrap UI Editors
• Eine Reihe von Editoren: für unterschiedliche
Ansprüche
• Siehe: http://thedesignblitz.com/the-best...
Bootstrap: und andere Frameworks
• Bootstrap http://twitter.github.io/bootstrap/

weit verbreitet, umfangreich
• Foundatio...
Backlog: Argumentationshilfe
121
Backlog: Argumentationshilfe
• Vorteile von HTML-Wireframes: für Kunden
• Vorteile von HTML-Wireframes: für Agenturen
• Gr...
Kunde
Vorteile: für Kunden
• Vermitteln Funktionalität einer Website von Anfang an
realistisch
• Sind durch Interaktivität...
UX
Vorteile: für Agenturen 1/2
• Keine bzw. weniger Spezifikationen erforderlich
• Integrierte Arbeitsweise wird gefördert
...
UX
Vorteile: für Agenturen 2/2
• Frühe Usertests sind möglich
• Browser-Spezifika funktionieren automatisch
(Scrollbars, Bu...
STATISCHES
DESIGN
Grenzen des statischen Designs überwinden
• Liquid und responsive Layouts
• Realistische Darstellung von...
Wissen aufbauen
• Neue Denkweisen trainieren
• Neue Browserfeatures besser verstehen
• Wissen, was möglich ist
• Änderunge...
FrontendKreation
• Besseres Verständnis für das Medium und für Frontend-
Developer
• Weniger Abhängigkeit von Frontend-Dev...
developinguxd.com
129
@developinguxd
facebook.com/developinguxd
mail@developinguxd.com
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Nächste SlideShare
Wird geladen in …5
×

Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)

4.695 Aufrufe

Veröffentlicht am

Build wireframes and prototypes in real HTML and CSS with the help of Bootstrap and become a "Coding UX Designer". Those are the slides form 2014's IA Konferenz in Berlin.

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
4.695
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2.987
Aktionen
Geteilt
0
Downloads
66
Kommentare
0
Gefällt mir
12
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)

  1. 1. <Developing UXD> So leicht ist Frontendentwicklung für Konzepter und Designer heute IA Konferenz 2014
  2. 2. Conni und Jerry: Wer wir sind 2
  3. 3. Conni Cornelia Erbs 3 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.“
  4. 4. Jerry Jeremias Dombrowsky 4 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.“
  5. 5. Ziele des Workshops 5
  6. 6. Ziele des Workshops 6
  7. 7. Ziele des Workshops • Quellcode lesen und verstehen 6
  8. 8. Ziele des Workshops • Quellcode lesen und verstehen • Die erste Hürde des Selbst-Codens nehmen 6
  9. 9. Ziele des Workshops • Quellcode lesen und verstehen • Die erste Hürde des Selbst-Codens nehmen • Wissen, wie man weiter lernen kann 6
  10. 10. Nach dem Workshop könnt ihr noch nicht: 7
  11. 11. Axure wegschmeißen
 und direkt alle Wireframes
 per Code erzeugen. 8
  12. 12. Einführung: Warum wir dazu lernen müssen 9
  13. 13. Warum sollten wir HTML und CSS lernen? 10
  14. 14. Warum sollten wir HTML und CSS lernen? • Die Basis dessen, was wir gestalten, sollten wir kennen. 10
  15. 15. Warum sollten wir HTML und CSS lernen? • Die Basis dessen, was wir gestalten, sollten wir kennen. • Zumal: Die Tools wechseln, HTML bleibt! 10
  16. 16. 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. 10
  17. 17. ”Coding is going to be the literacy of the 21st Century.“ ZACH SIMS Co-Founder Codecademy
  18. 18. Es kann unsere Arbeitsweise verbessern! 12
  19. 19. Es kann unsere Arbeitsweise verbessern! 12 Heutige Arbeitsweise Technisch umsetzen Anforderungen klären Wireframes erstellen Screens erstellen
  20. 20. Es kann unsere Arbeitsweise verbessern! 12 Heutige Arbeitsweise Technisch umsetzen Anforderungen klären Wireframes erstellen Screens erstellen Abstrakt und statisch Abstrakt Abstrakt und statisch
  21. 21. Es kann unsere Arbeitsweise verbessern! 12 Heutige Arbeitsweise Technisch umsetzen Anforderungen klären Wireframes erstellen Screens erstellen Abstrakt und statisch Abstrakt Abstrakt und statisch Echt Aber anders
  22. 22. Es kann unsere Arbeitsweise verbessern! 13 Zukünftige Arbeitsweise
  23. 23. Es kann unsere Arbeitsweise verbessern! 13 Zukünftige Arbeitsweise Statische Dokumente • Brief • User Journeys • Sketching • Look & Feel
  24. 24. Es kann unsere Arbeitsweise verbessern! 13 Zukünftige Arbeitsweise Statische Dokumente • Brief • User Journeys • Sketching • Look & Feel Prototypen Wireframes in HTML + CSS Layout in HTML + CSS
  25. 25. Es kann unsere Arbeitsweise verbessern! 13 Zukünftige Arbeitsweise Statische Dokumente • Brief • User Journeys • Sketching • Look & Feel Prototypen Wireframes in HTML + CSS Layout in HTML + CSS
  26. 26. Es kann unsere Arbeitsweise verbessern! 13 Zukünftige Arbeitsweise Statische Dokumente • Brief • User Journeys • Sketching • Look & Feel Prototypen Wireframes in HTML + CSS Layout in HTML + CSS Website Entwicklung
  27. 27. Es kann unsere Arbeitsweise verbessern! 13 Zukünftige Arbeitsweise Statische Dokumente • Brief • User Journeys • Sketching • Look & Feel Prototypen Wireframes in HTML + CSS Layout in HTML + CSS Website Entwicklung
  28. 28. Ende der Einführung. Fragen? 14
  29. 29. Agenda ✓ Einführung • HTML-Grundlagen • CSS-Grundlagen • Bootstrap • Ausblick 15
  30. 30. HTML-Grundlagen 16
  31. 31. HTML: Aufbau und Inhalte einer Website 17
  32. 32. Interaktiv: Layout-Elemente kennenlernen 18
  33. 33. HTML: Layout-Elemente 19
  34. 34. HTML: Layout-Elemente • header, footer, aside, nav, main, article, section:
 "Sectioning elements" gruppieren inhaltlich 19
  35. 35. HTML: Layout-Elemente • header, footer, aside, nav, main, article, section:
 "Sectioning elements" gruppieren inhaltlich • main: Einzigartig! Hauptinhalte kommen hier rein. 19
  36. 36. 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) 19
  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) • nav: Nur für Navigation auf der Website 19
  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 • div: Gruppiert für Styling, nicht inhaltlich (semantisch) 19
  39. 39. Interaktiv: Inhaltselemente kennenlernen 20
  40. 40. HTML: Inhaltselemente – Textinhalte • h1, h2: Heading. Pro section ein neues h1. • p: Absatz ("paragraph") • a: Link ("anchor"). Darf weitere Inhalte enthalten. 21
  41. 41. HTML: Inhaltselemente – Weitere Inhalte 22
  42. 42. HTML: Inhaltselemente – Weitere Inhalte • img: "image" – Bildelement 22
  43. 43. HTML: Inhaltselemente – Weitere Inhalte • img: "image" – Bildelement • ul, ol: "unordered/ordered list" – eine Liste mit Bulletpoints oder Nummerierungen.
 Darf nur li-Elemente enthalten. 22
  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. • li: "List item" – darf andere Elemente enthalten. 22
  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. • audio, video, canvas, embed: Media-Inhalte 22
  46. 46. Fragen soweit? 23
  47. 47. HTML: Syntax 24
  48. 48. Tags <p>Das ist mein Absatz</p> 25
  49. 49. Tags <p>Das ist mein Absatz</p> Opening <tag> Closing </tag> 25
  50. 50. Tags <p>Das ist mein Absatz</p> Opening <tag> Closing </tag> 25 • Layout-Elemente haben "opening" und "closing tags"
  51. 51. Tags <p>Das ist mein Absatz</p> Opening <tag> Closing </tag> 25 • Layout-Elemente haben "opening" und "closing tags" • Ermöglicht Verschachtelung
  52. 52. Tags <p>Das ist mein Absatz</p> Opening <tag> Closing </tag> 25 • Layout-Elemente haben "opening" und "closing tags" • Ermöglicht Verschachtelung • Elemente ohne "closing tags" heißen "Void Tags"
  53. 53. Tags: Verschachtelung 26 <article>
 <h1>Welcome</h1>
 <p>Das ist mein Absatz, der <em>auch</em> verschachtelte Elemente enthält.</p>
 </article>
  54. 54. Tags: Verschachtelung 26 <article>
 <h1>Welcome</h1>
 <p>Das ist mein Absatz, der <em>auch</em> verschachtelte Elemente enthält.</p>
 </article> Opening <article> Closing <article>
  55. 55. Tags: Verschachtelung 26 <article>
 <h1>Welcome</h1>
 <p>Das ist mein Absatz, der <em>auch</em> verschachtelte Elemente enthält.</p>
 </article> Opening <article> Closing <article> Nested <h1>
  56. 56. Tags: Verschachtelung 26 <article>
 <h1>Welcome</h1>
 <p>Das ist mein Absatz, der <em>auch</em> verschachtelte Elemente enthält.</p>
 </article> Opening <article> Closing <article> Nested <h1> Nested <p>
  57. 57. Tags: Verschachtelung 26 <article>
 <h1>Welcome</h1>
 <p>Das ist mein Absatz, der <em>auch</em> verschachtelte Elemente enthält.</p>
 </article> Opening <article> Closing <article> Nested <h1> Nested <p> Nested <em>
  58. 58. 27 Attribute <img src="img/logo.png">
  59. 59. 27 Attribute <img src="img/logo.png"> attribute
 = Eigenschaft
  60. 60. 27 Attribute <img src="img/logo.png"> attribute
 = Eigenschaft "value"
 = Wert der Eigenschaft
  61. 61. 27 Attribute <img src="img/logo.png"> attribute
 = Eigenschaft "value"
 = Wert der Eigenschaft • Elemente haben unterschiedliche attributes
  62. 62. 27 Attribute <img src="img/logo.png"> attribute
 = Eigenschaft "value"
 = Wert der Eigenschaft • Elemente haben unterschiedliche attributes • Es gibt attributes ohne value
 z.B. <input type="email" required>
  63. 63. 28 Attribute: Wichtige
  64. 64. 28 Attribute: Wichtige <input id="i-am-unique">
  65. 65. 28 Attribute: Wichtige <input id="i-am-unique"> Kennzeichnet ein zwingend einzigartiges Element, z.B. input im Formular; #jumpmark im gleichen Dokument
  66. 66. 28 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>
  67. 67. 28 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.
  68. 68. Attribute: Beispiele 29
  69. 69. Attribute: Beispiele 29 <img src="img/my-dog.jpg" alt="Caja">
  70. 70. Attribute: Beispiele 29 <img src="img/my-dog.jpg" alt="Caja"> <a href="contact.html">Contact</a>
  71. 71. Attribute: Beispiele 29 <img src="img/my-dog.jpg" alt="Caja"> <a href="contact.html">Contact</a> <a href="http://google.com" target="_blank">Leave</a>
  72. 72. Attribute: Beispiele 29 <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>
  73. 73. Attribute: Beispiele 29 <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"
  74. 74. Attribute: Beispiele 29 <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>
  75. 75. Attribute: Beispiele 29 <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>
  76. 76. Attribute: Beispiele 29 <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)
  77. 77. Interaktiv: HTML-Elemente untersuchen 30
  78. 78. 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 31
  79. 79. HTML: Dokument erstellen 32
  80. 80. 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 33
  81. 81. Interaktiv: Dokument erstellen 34 U SB 01_html_start
  82. 82. Dokument erstellen 35
  83. 83. Dokument erstellen • Mit Emmet: html:5Tab 35
  84. 84. Dokument erstellen • Mit Emmet: html:5Tab • HTML5 Doctype: <!doctype html> 35
  85. 85. Dokument erstellen • Mit Emmet: html:5Tab • HTML5 Doctype: <!doctype html> • head: Metadaten, Dokumenttitel, Link zu Stylesheets 35
  86. 86. Dokument erstellen • Mit Emmet: html:5Tab • HTML5 Doctype: <!doctype html> • head: Metadaten, Dokumenttitel, Link zu Stylesheets • body: Sichtbare Inhalte, Link zu JavaScripts am Ende 35
  87. 87. Interaktiv: HTML schreiben 36
  88. 88. Weitere Ressourcen 37
  89. 89. Weitere Ressourcen • codecademy.com – kostenloser Onlinekurs 37
  90. 90. Weitere Ressourcen • codecademy.com – kostenloser Onlinekurs • developer.mozilla.org – alles zu HTML und CSS 37
  91. 91. Weitere Ressourcen • codecademy.com – kostenloser Onlinekurs • developer.mozilla.org – alles zu HTML und CSS • stackoverflow.com – Fragen & Antworten 37
  92. 92. Weitere Ressourcen • codecademy.com – kostenloser Onlinekurs • developer.mozilla.org – alles zu HTML und CSS • stackoverflow.com – Fragen & Antworten • abookapart.com – Bücher zu HTML5, CSS3 und mehr 37
  93. 93. Weitere Ressourcen • codecademy.com – kostenloser Onlinekurs • developer.mozilla.org – alles zu HTML und CSS • stackoverflow.com – Fragen & Antworten • abookapart.com – Bücher zu HTML5, CSS3 und mehr • html5weekly.com – HTML News 37
  94. 94. Weitere Ressourcen • codecademy.com – kostenloser Onlinekurs • developer.mozilla.org – alles zu HTML und CSS • stackoverflow.com – Fragen & Antworten • abookapart.com – Bücher zu HTML5, CSS3 und mehr • html5weekly.com – HTML News • codepen.io – Online Frontend Code schreiben und teilen 37
  95. 95. Das ist HTML. Fragen? 38
  96. 96. Agenda ✓ Einführung ✓ HTML-Grundlagen • CSS-Grundlagen • Bootstrap • Ausblick 39
  97. 97. CSS-Grundlagen 40
  98. 98. CSS: Elemente finden und verändern 41
  99. 99. Selektoren: class 42 <img src="img/logo.png" alt="IA Konferenz">
  100. 100. Selektoren: class 42 <img src="img/logo.png" alt="IA Konferenz"> Nicht jedes <img> soll gleich gestylt werden
  101. 101. Selektoren: class 42 <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">
  102. 102. Selektoren: class 42 <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
  103. 103. Selektoren: class 43 <img class="logo" src="img/logo.png" alt="IA Konferenz">
  104. 104. .logo {
 width: 200px;
 height: 100px;
 } Selektoren: class 43 <img class="logo" src="img/logo.png" alt="IA Konferenz">
  105. 105. .logo {
 width: 200px;
 height: 100px;
 } Selektoren: class 43 .class-selector beginnt immer mit einem Punkt (.logo). <img class="logo" src="img/logo.png" alt="IA Konferenz">
  106. 106. .logo {
 width: 200px;
 height: 100px;
 } Selektoren: class 43 .class-selector beginnt immer mit einem Punkt (.logo). <img class="logo" src="img/logo.png" alt="IA Konferenz"> • Wir verwenden (fast) immer .class-Selektoren!
  107. 107. .logo {
 width: 200px;
 height: 100px;
 } Selektoren: class 44
  108. 108. .logo {
 width: 200px;
 height: 100px;
 } Selektoren: class 44 Eine "declaration" besteht aus property und value.
  109. 109. .logo {
 width: 200px;
 height: 100px;
 } Selektoren: class 44 : Eine "declaration" besteht aus property und value.
  110. 110. .logo {
 width: 200px;
 height: 100px;
 } Selektoren: class 44 : Eine "declaration" besteht aus property und value. ;
  111. 111. .logo {
 width: 200px;
 height: 100px;
 } Selektoren: class 44 : Eine "declaration" besteht aus property und value. ; selector und { declaration block } bilden ein "Rule Set"
  112. 112. Interaktiv: CSS untersuchen 45
  113. 113. 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 46
  114. 114. 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. 47
  115. 115. CSS: Wichtige Konzepte 48
  116. 116. CSS: Block- und Inline-Elemente 49 Block-Elemente Nehmen sich immer die ganze verfügbare Breite. z. B. h1, p, ul, li, div
  117. 117. CSS: Block- und Inline-Elemente 49 Block-Elemente Nehmen sich immer die ganze verfügbare Breite. z. B. h1, p, ul, li, div Inline-Elemente Teilen sich eine Zeile.
 z. B. a, em, img, span
  118. 118. Demonstration: Block- und Inline-Elemente 50
  119. 119. CSS: Box Model 51
  120. 120. CSS: Box Model 51 Element Element
  121. 121. CSS: Box Model 51 Padding Element Element
  122. 122. CSS: Box Model 51 Border Padding Element Element
  123. 123. CSS: Box Model Margin 51 Border Padding Element Element
  124. 124. Demonstration: Box Model 52
  125. 125. CSS: Learnings Boxmodel • 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. 53
  126. 126. Border, Margin und Padding: Werte 54 margin: 5px 10px 20px 3px;
  127. 127. Border, Margin und Padding: Werte 54 margin: 5px 10px 20px 3px; Oben
  128. 128. Border, Margin und Padding: Werte 54 margin: 5px 10px 20px 3px; Oben Rechts
  129. 129. Border, Margin und Padding: Werte 54 margin: 5px 10px 20px 3px; Oben Unten Rechts
  130. 130. Border, Margin und Padding: Werte 54 margin: 5px 10px 20px 3px; Oben Unten Rechts Links
  131. 131. Border, Margin und Padding: Werte 54 margin: 5px 10px 20px 3px; Oben Unten Rechts Links margin-top: 5px; margin-right: 10px; margin-bottom: 20px; margin-left: 3px;
  132. 132. Border, Margin und Padding: Werte 55
  133. 133. Border, Margin und Padding: Werte 55 margin: 5px 10px 20px 3px; Oben UntenRechts Links
  134. 134. Border, Margin und Padding: Werte 55 margin: 5px 10px 20px 10px; margin: 5px 10px 20px 3px; Oben UntenRechts Links
  135. 135. Border, Margin und Padding: Werte 55 margin: 5px 10px 20px 10px; margin: 5px 10px 5px 10px; margin: 5px 10px 20px 3px; Oben UntenRechts Links
  136. 136. Border, Margin und Padding: Werte 55 margin: 5px 10px 20px 10px; margin: 5px 10px 5px 10px; margin: 5px 5px 5px 5px; margin: 5px 10px 20px 3px; Oben UntenRechts Links
  137. 137. Interaktiv: CSS schreiben 56 U SB 03_css_start
  138. 138. Weitere Ressourcen 57
  139. 139. Weitere Ressourcen • css-tricks.com – CSS Tutorials und Tipps 57
  140. 140. Weitere Ressourcen • css-tricks.com – CSS Tutorials und Tipps • developer.mozilla.org – alles zu HTML und CSS 57
  141. 141. Weitere Ressourcen • css-tricks.com – CSS Tutorials und Tipps • developer.mozilla.org – alles zu HTML und CSS • stackoverflow.com – Fragen & Antworten 57
  142. 142. Weitere Ressourcen • css-tricks.com – CSS Tutorials und Tipps • developer.mozilla.org – alles zu HTML und CSS • stackoverflow.com – Fragen & Antworten • shop.smashingmagazine.com – Smashing Library 57
  143. 143. Weitere Ressourcen • css-tricks.com – CSS Tutorials und Tipps • developer.mozilla.org – alles zu HTML und CSS • stackoverflow.com – Fragen & Antworten • shop.smashingmagazine.com – Smashing Library • abookapart.com – Bücher zu HTML5, CSS3 und mehr 57
  144. 144. Weitere Ressourcen • css-tricks.com – CSS Tutorials und Tipps • developer.mozilla.org – alles zu HTML und CSS • stackoverflow.com – Fragen & Antworten • shop.smashingmagazine.com – Smashing Library • abookapart.com – Bücher zu HTML5, CSS3 und mehr • codepen.io – Online Frontend Code schreiben und teilen 57
  145. 145. Das ist CSS. Fragen? 58
  146. 146. Agenda ✓ Einführung ✓ HTML-Grundlagen ✓ CSS-Grundlagen • Bootstrap • Ausblick 59
  147. 147. Bootstrap 60
  148. 148. Bootstrap: Was ist das? 61
  149. 149. 62 The most popular front-end framework for developing responsive, mobile first projects on the web. Was ist Bootstrap?
  150. 150. 62 „Millions of amazing sites across the web are being built with Bootstrap.“ The most popular front-end framework for developing responsive, mobile first projects on the web. Was ist Bootstrap?
  151. 151. 62 „Millions of amazing sites across the web are being built with Bootstrap.“ Sammlung von HTML, CSS und JS The most popular front-end framework for developing responsive, mobile first projects on the web. Was ist Bootstrap?
  152. 152. 62 NEU in Bootstrap 3 „Millions of amazing sites across the web are being built with Bootstrap.“ Sammlung von HTML, CSS und JS The most popular front-end framework for developing responsive, mobile first projects on the web. Was ist Bootstrap?
  153. 153. Wie funktioniert Bootstrap? 63
  154. 154. Wie funktioniert Bootstrap? • Verknüpfung: von Bootstrap-CSS sowie -JS mit dem eigenen HTML 63
  155. 155. Wie funktioniert Bootstrap? • Verknüpfung: von Bootstrap-CSS sowie -JS mit dem eigenen HTML • Automatisches Styling: von Typographie und Links 63
  156. 156. 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 63
  157. 157. Demonstration: Das ist Bootstrap. 64
  158. 158. Bootstrap: CSS und Components 65 CSS Typography Code Tables Forms Buttons Images Helper Classes Responsive Utilities Components Glyphicons Dropdowns Button groups Button dropdowns Input groups Navs Navbar Breadcrumbs Paginations Labels Badges Jumbotron Page header Thumbnails Alerts Progress bars Media object List group Panels Wells
  159. 159. Bootstrap: das Grid 66
  160. 160. Bootstrap: Grid 67
  161. 161. Bootstrap: Grid • Grid-System für Adaptive und Responsive Web Design 67
  162. 162. Bootstrap: Grid • Grid-System für Adaptive und Responsive Web Design • Ist standardmäßig mobile first („scale up“) 67
  163. 163. Bootstrap: Grid • Grid-System für Adaptive und Responsive Web Design • Ist standardmäßig mobile first („scale up“) • Funktioniert über verschachtelte Klassen 67
  164. 164. Bootstrap: Grid 1. Klasse „Container“
 .container (fixed-width für Adaptive-Verhalten) oder .container-fluid (full-width für Fluid-Verhalten) 68
  165. 165. Bootstrap: Grid 1. Klasse „Container“
 .container (fixed-width für Adaptive-Verhalten) oder .container-fluid (full-width für Fluid-Verhalten) 68 <div class="container-fluid"> </div>
  166. 166. Bootstrap: Grid 2. Klasse „Row“
 um Elemente nebeneinander anzuordnen 69
  167. 167. Bootstrap: Grid 2. Klasse „Row“
 um Elemente nebeneinander anzuordnen 69 <div class="container-fluid">
 <div class="row"> </div> </div>
  168. 168. Bootstrap: Grid 3. Klasse „Column“
 für die Definition der Spaltenbreite, basierend auf einem 12-spaltigen Grid-System 70
  169. 169. Bootstrap: Grid 3. Klasse „Column“
 für die Definition der Spaltenbreite, basierend auf einem 12-spaltigen Grid-System 70 <div class="container-fluid">
 <div class="row"> <div class="col-md-6">Halbe Reihe</div> <div class="col-md-6">Halbe Reihe</div> </div> </div>
  170. 170. <div class="container-fluid">
 <div class="row"> <div class="col-md-6">Halbe Reihe</div> <div class="col-md-6">Halbe Reihe</div> </div> </div> Bootstrap: Grid 71 1. Container 2. Row 3. Columns
  171. 171. <div class="container-fluid">
 <div class="row"> <div class="col-md-6">Halbe Reihe</div> <div class="col-md-6">Halbe Reihe</div> </div> </div> Bootstrap: Grid 71 1. Container 2. Row 3. Columns Halbe Reihe Halbe Reihe
  172. 172. Bootstrap Grid: Columns 72 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-
  173. 173. Bootstrap Grid: Columns 72 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.
  174. 174. Bootstrap Grid: Columns mit Versatz 73 4 Spalten 4 Spalten
  175. 175. Bootstrap Grid: Columns mit Versatz 73 4 Spalten 4 Spalten <div class="container-fluid">
 <div class="row"> <div class=„col-md-4“>4 Spalten</div> <div class=„col-md-4 col-md-offset-4“>4 Spalten</div> </div> </div>
  176. 176. Bootstrap Grid: Columns mit Versatz 73 4 Spalten 4 Spalten <div class="container-fluid">
 <div class="row"> <div class=„col-md-4“>4 Spalten</div> <div class=„col-md-4 col-md-offset-4“>4 Spalten</div> </div> </div> Offset
  177. 177. Responsive und Mobile first: nicht heute • Bootstrap ist von Haus aus responsive. • Spezielle Elemente: • Responsive tables • Responsive images • Responsive Utilities
 (Sichtbarkeit toggeln) 74 Zu viele Themen!
  178. 178. Interaktiv: Bootstrap kennenlernen 75
  179. 179. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download unter http://getbootstrap.com/
 76
  180. 180. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download unter http://getbootstrap.com/
 76
  181. 181. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download unter http://getbootstrap.com/
 76 U SB downloads / bootstrap-3.1.1-dist Dieses, bitte!
  182. 182. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download unter http://getbootstrap.com/
 77
  183. 183. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download • Schritt 2: Dateistruktur anlegen
  184. 184. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download • Schritt 2: Dateistruktur anlegen getbootstrap.com css/bootstrap.css fonts js/bootstrap.js
  185. 185. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download • Schritt 2: Dateistruktur anlegen getbootstrap.com css/bootstrap.css fonts js/bootstrap.js Lokaler Ordner css/ Neuer Ordner: fonts Neuer Ordner: js
  186. 186. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download • Schritt 2: Dateistruktur anlegen getbootstrap.com css/bootstrap.css fonts js/bootstrap.js Lokaler Ordner css/ Neuer Ordner: fonts Neuer Ordner: js jquery.com jquery.js
  187. 187. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download • Schritt 2: Dateistruktur anlegen getbootstrap.com css/bootstrap.css fonts js/bootstrap.js Lokaler Ordner css/ Neuer Ordner: fonts Neuer Ordner: js jquery.com jquery.js In den js-Ordner
  188. 188. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download • Schritt 2: Dateistruktur anlegen U SB 05_bootstrap_ start getbootstrap.com css/bootstrap.css fonts js/bootstrap.js Lokaler Ordner css/ Neuer Ordner: fonts Neuer Ordner: js jquery.com jquery.js In den js-Ordner
  189. 189. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download • Schritt 2: Dateistruktur anlegen • Schritt 3: Dateien verknüpfen 79
  190. 190. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download • Schritt 2: Dateistruktur anlegen • Schritt 3: Dateien verknüpfen: (a) CSS 80 bootstrap.css im head VOR dem eigenen CSS
  191. 191. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download • Schritt 2: Dateistruktur anlegen • Schritt 3: Dateien verknüpfen: (b) JS 81 .js am Ende des bodys
  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
 82 z. B. Header, Primärnavigation, Hauptcontent, Marginalspalte und Footer
  193. 193. X 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
  194. 194. 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 83
  195. 195. 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 83 mit Hilfe der Bootstrap-Doku
  196. 196. 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 84
  197. 197. 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 84 mit Hilfe der Code-Snippets aus der Bootstrap-Doku
  198. 198. 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 85
  199. 199. Bootstrap: Grid anlegen für main 86 U SB 05_bootstrap_ start
  200. 200. Bootstrap: Grid anlegen für main • container und row sind bereits da 86 U SB 05_bootstrap_ start
  201. 201. Bootstrap: Grid anlegen für main • container und row sind bereits da • Section „Jump Marks“ und „Articles“: col-sm-7 86 U SB 05_bootstrap_ start
  202. 202. Bootstrap: Grid anlegen für main • container und row sind bereits da • Section „Jump Marks“ und „Articles“: col-sm-7 • Aside: col-sm-4 und col-sm-offset-1 86 U SB 05_bootstrap_ start
  203. 203. Bootstrap: Inhaltselemente stylen 87
  204. 204. Bootstrap: Inhaltselemente stylen 87 • Link „Einreichungsformular“: grüner Button
 Link „Tickets kaufen“: großer, orangener Button
  205. 205. Bootstrap: Inhaltselemente stylen 87 • Link „Einreichungsformular“: grüner Button
 Link „Tickets kaufen“: großer, orangener Button • Meta nav: „list-inline“ anordnen und „pull-right“ ausrichten
  206. 206. Bootstrap: Inhaltselemente stylen 87 • Link „Einreichungsformular“: grüner Button
 Link „Tickets kaufen“: großer, orangener Button • Meta nav: „list-inline“ anordnen und „pull-right“ ausrichten • Main navigation: gewünschte „nav“ hinzufügen (z. B. „Pills“), ausrichten („justified“), größere Schrift (z. B. „lead“) „IAK 2014“ ist „active“
  207. 207. Bootstrap: Inhaltselemente stylen 87 • Link „Einreichungsformular“: grüner Button
 Link „Tickets kaufen“: großer, orangener Button • Meta nav: „list-inline“ anordnen und „pull-right“ ausrichten • Main navigation: gewünschte „nav“ hinzufügen (z. B. „Pills“), ausrichten („justified“), größere Schrift (z. B. „lead“) „IAK 2014“ ist „active“ • Footer-Link: rechtsausgerichtetes Icon
  208. 208. Inhaltselemente: weitere Stylings 88
  209. 209. Inhaltselemente: weitere Stylings • Liste in Main aside: ohne Bulletpoints („unstyled“) 88
  210. 210. Inhaltselemente: weitere Stylings • Liste in Main aside: ohne Bulletpoints („unstyled“) • Jump Marks: kleinere Textgröße 88
  211. 211. Inhaltselemente: weitere Stylings • Liste in Main aside: ohne Bulletpoints („unstyled“) • Jump Marks: kleinere Textgröße • Headlines in Articles und Aside: kleinere Textgröße 88
  212. 212. Bootstrap: Was noch zu sagen ist. 89
  213. 213. Demonstration: JavaScript mit Bootstrap 90
  214. 214. Warum Bootstrap? 91
  215. 215. Warum Bootstrap? • Gute Dokumentation 91
  216. 216. Warum Bootstrap? • Gute Dokumentation • Große Community 91
  217. 217. Warum Bootstrap? • Gute Dokumentation • Große Community • Viele UI-Elemente 91
  218. 218. Warum Bootstrap? • Gute Dokumentation • Große Community • Viele UI-Elemente • Responsive Web Design als Standard 91
  219. 219. Warum Bootstrap? • Gute Dokumentation • Große Community • Viele UI-Elemente • Responsive Web Design als Standard • Individuell anpassbar ("Customize") 91
  220. 220. Unser erstes Boilerplate: für euch 92 github.com/developinguxd/boilerplates
  221. 221. Das ist Bootstrap. Noch Fragen? 93
  222. 222. Agenda ✓ Einführung ✓ HTML-Grundlagen ✓ CSS-Grundlagen ✓ Bootstrap • Ausblick 94
  223. 223. Ausblick 95
  224. 224. 96 Tipps: die tägliche Arbeit
  225. 225. • Start: Handscribbles 96 Tipps: die tägliche Arbeit
  226. 226. • Start: Handscribbles • Entscheidung: Ist die Projektart geeignet? 96 Tipps: die tägliche Arbeit
  227. 227. • Start: Handscribbles • Entscheidung: Ist die Projektart geeignet? • Doing: Prototyping gemeinsam durch Kreation und Frontend-Entwicklung 96 Tipps: die tägliche Arbeit
  228. 228. • Start: Handscribbles • Entscheidung: Ist die Projektart geeignet? • Doing: Prototyping gemeinsam durch Kreation und Frontend-Entwicklung • Ergänzende Dokumentation: via Screenshots des Prototypen im gewohnten Programm 96 Tipps: die tägliche Arbeit
  229. 229. Weiterlernen: viele wichtige Themen 97
  230. 230. Weiterlernen: viele wichtige Themen 97 HTML CSS Bootstrap DevTools
  231. 231. Weiterlernen: viele wichtige Themen 97 JavaScript jQuery Sass holder.jsHTML CSS Bootstrap DevTools
  232. 232. Weiterlernen: viele wichtige Themen 97 JavaScript jQuery Sass holder.js GitHub CodeKit Webfonts CodePen HTML CSS Bootstrap DevTools
  233. 233. “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
  234. 234. One more thing ... 99
  235. 235. Developing UXD: Unsere Idee 100
  236. 236. Developing UXD: Unsere Idee 101
  237. 237. Developing UXD: Unsere Idee • Fest definiertes, gemeinsames Toolset 101
  238. 238. Developing UXD: Unsere Idee • Fest definiertes, gemeinsames Toolset • Moderne, erprobte Standards 101
  239. 239. Developing UXD: Unsere Idee • Fest definiertes, gemeinsames Toolset • Moderne, erprobte Standards • Vorauswahl der besten Lernressourcen 101
  240. 240. Developing UXD: Unsere Idee • Fest definiertes, gemeinsames Toolset • Moderne, erprobte Standards • Vorauswahl der besten Lernressourcen • Lebendige Plattform 101
  241. 241. Developing UXD: Unsere Idee • Fest definiertes, gemeinsames Toolset • Moderne, erprobte Standards • Vorauswahl der besten Lernressourcen • Lebendige Plattform • Gemeinsam und Open Source 101
  242. 242. Developing UXD: Unsere Idee • Fest definiertes, gemeinsames Toolset • Moderne, erprobte Standards • Vorauswahl der besten Lernressourcen • Lebendige Plattform • Gemeinsam und Open Source • Eigenentwicklungen 101
  243. 243. 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 101
  244. 244. 102
  245. 245. developinguxd.com 102
  246. 246. developinguxd.com 102 @developinguxd facebook.com/developinguxd mail@developinguxd.com
  247. 247. Developing UXD: Nächste Schritte 103
  248. 248. Developing UXD: Nächste Schritte • Die besten Lernquellen im Web 103
  249. 249. Developing UXD: Nächste Schritte • Die besten Lernquellen im Web • Lernpläne 103
  250. 250. Developing UXD: Nächste Schritte • Die besten Lernquellen im Web • Lernpläne • Aufbau einer Community begeisterter UX-Designer 103
  251. 251. 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 103
  252. 252. Vielen Dank! Happy coding! 104
  253. 253. Euer Feedback: Wie wars? 105
  254. 254. developinguxd.com 106 @developinguxd facebook.com/developinguxd mail@developinguxd.com
  255. 255. Cornelia Erbs, Jeremias Dombrowsky Lessers Passage 10 22767 Hamburg ! +49 (0)151 23421980 ! mail@developinguxd.com http://developinguxd.com/ 107
  256. 256. Alle Icons in dieser Präsentation kommen von http://iconmonstr.com/ 108
  257. 257. Backlog 110
  258. 258. Backlog: Sublime, HTML, CSS, JS 111
  259. 259. Backlog • Sublime: Shortcuts • Sublime: Emmet Shortcuts • HTML: Formulare • Holder.js: Img placeholders • CSS: BEM naming convention • jQuery und JavaScript: Einbinden und laden 112
  260. 260. Sublime Text 3: Emmet Shortcuts 113
  261. 261. Sublime Text 3: Emmet Shortcuts • Selector-Syntax: e.g. article>h1+pTab wird zu
 <article>
 <h1></h1>
 <p></p>
 </article> 113
  262. 262. 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" 113
  263. 263. 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 113
  264. 264. 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 113
  265. 265. 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. 114
  266. 266. Sublime Text 3: Shortcuts 115
  267. 267. Sublime Text 3: Shortcuts • TagnameTab: Autocomplete (Mehrfach für Sprungmarken) 115
  268. 268. Sublime Text 3: Shortcuts • TagnameTab: Autocomplete (Mehrfach für Sprungmarken) • Cmd+p: Fuzzy-Search für Dateien 115
  269. 269. Sublime Text 3: Shortcuts • TagnameTab: Autocomplete (Mehrfach für Sprungmarken) • Cmd+p: Fuzzy-Search für Dateien • Cmd+Shift+p: Zugriff auf alle Befehle 115
  270. 270. 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 115
  271. 271. 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 115
  272. 272. Selektoren: BEM naming convention 116
  273. 273. Selektoren: BEM naming convention • .page-header: Einfacher Bindestrich bei zusammengesetzten Namen 116
  274. 274. Selektoren: BEM naming convention • .page-header: Einfacher Bindestrich bei zusammengesetzten Namen • .page-nav, .page-nav__link: Unterelemente eines "Moduls" haben den Modulnamen als Prefix. 116
  275. 275. 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. 116
  276. 276. Holder.js: Img placeholders 117
  277. 277. Holder.js: Img placeholders • Download: http://imsky.github.io/holder/ 117
  278. 278. Holder.js: Img placeholders • Download: http://imsky.github.io/holder/ • JavaScript im <body> laden:
 <script src="js/holder.js"></script> 117
  279. 279. 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"> 117
  280. 280. Backlog: Bootstrap 118
  281. 281. Bootstrap UI Editors • Eine Reihe von Editoren: für unterschiedliche Ansprüche • Siehe: http://thedesignblitz.com/the-best-bootstrap-ui- editors/ 119
  282. 282. 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 120
  283. 283. Backlog: Argumentationshilfe 121
  284. 284. 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 122
  285. 285. 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) 123
  286. 286. 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 124
  287. 287. 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 125
  288. 288. STATISCHES DESIGN Grenzen des statischen Designs überwinden • Liquid und responsive Layouts • Realistische Darstellung von Typografie • Globale Anpassungen von Farben, Abständen, Größen • Animationen und Interaktionen 126
  289. 289. 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 127
  290. 290. FrontendKreation • 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 Zusammenarbeit verbessern 128
  291. 291. developinguxd.com 129 @developinguxd facebook.com/developinguxd mail@developinguxd.com

×