SlideShare ist ein Scribd-Unternehmen logo
1 von 283
Downloaden Sie, um offline zu lesen
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ße Hamburger Agenturen 
„HTML-Wireframing ist so spannend 
wie Rätsel lösen.“ 
3
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
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 lernen kann 
7
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 wechseln, HTML bleibt! 
11
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
”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 
erstellen 
Screens 
erstellen
Es kann unsere Arbeitsweise verbessern! 
Abstrakt und statisch 
Abstrakt 
Abstrakt und statisch 
13 
Heutige Arbeitsweise 
Technisch 
umsetzen 
Anforderungen 
klären 
Wireframes 
erstellen 
Screens 
erstellen
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
Es kann unsere Arbeitsweise verbessern! 
14 
Zukünftige Arbeitsweise
Es kann unsere Arbeitsweise verbessern! 
14 
Statische 
Dokumente 
• Brief 
• User Journeys 
• Sketching 
• Look & Feel 
Zukünftige Arbeitsweise
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
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
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
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
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 
20
HTML: Layout-Elemente 
• header, footer, aside, nav, main, article, section: 
"Sectioning elements" gruppieren inhaltlich 
• main: Einzigartig! Hauptinhalte kommen hier rein. 
20
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
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
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
Interaktiv: Inhaltselemente kennenlernen 
21
HTML: Inhaltselemente – Textinhalte 
• h1, h2: Heading. Pro section ein neues h1. 
• p: Absatz ("paragraph") 
• a: Link ("anchor"). Darf weitere Inhalte enthalten. 
22
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 
Bulletpoints oder Nummerierungen. 
Darf nur li-Elemente enthalten. 
23
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
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
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". 
• Ermöglicht Verschachtelung 
26
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
Tags: Verschachtelung 
<article> 
<h1>Welcome</h1> 
<p>Das ist mein Absatz, der <em>auch</em> 
verschachtelte Elemente enthält.</p> 
</article> 
27
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>
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>
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>
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>
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 unterschiedliche attributes
"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>
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; #jumpmark im gleichen Dokument 
29
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
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
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.com" target="_blank">Leave</a> 
30
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
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
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
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
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
Interaktiv: HTML-Elemente untersuchen 
www.developinguxd.com 
31
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
HTML: Dokument erstellen 
33
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
Interaktiv: Dokument erstellen 
rohrpostix ☛ Daten/Transfer/Developing UXD/ kopieren! 
Dann Schreibtisch ☛ Developing UXD/exercises/01_html_start 
öffnen 
35
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 Stylesheets 
36
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
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 
• stackoverflow.com – Fragen und Antworten 
38
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
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
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
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="logo" 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 
<img class="logo" src="img/logo.png" alt="IA Konferenz"> 
Durch das class-Attribut können wir das Element stylen 
43
<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: 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: 200px; 
height: 100px; 
} 
• Wir verwenden (fast) immer .class-Selektoren! 
44 
Selektoren: class
.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 
{ declaration block } 
bilden ein "Rule Set" 
Selektoren: class
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) 
• Element auswählen, class-Attribut hinzufügen und 
entfernen 
47
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
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, p, ul, div
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
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 draufgerechnet 
• Inline-Elemente bekommen kein margin-top und 
margin-bottom. 
• margin-left: auto; margin-right: auto; zentriert Block- 
Elemente horizontal. 
55
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-right: 10px; 
margin-bottom: 20px; 
margin-left: 3px;
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; 
margin: 5px 10px 5px 10px;
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;
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 
• stackoverflow.com – Fragen und Antworten 
59
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
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
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. 
64 
Was ist Bootstrap?
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: von Typographie und Links 
65
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
Demonstration: Das ist Bootstrap. 
getbootstrap.com 
66
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
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“) 
• Funktioniert über verschachtelte Klassen 
69
Bootstrap: Grid 
1. Klasse container 
container (fixed-width für Adaptive-Verhalten) 
oder container-fluid (full-width für Fluid-Verhalten) 
70
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
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 
Bootstrap: Grid
3. Klasse column (z.B. col-sm-6) 
für die Definition der Spaltenbreite, basierend auf 
einem 12-spaltigen Grid-System 
72 
Bootstrap: Grid
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
<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
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
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-
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.
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=„col-sm-4“>4 Spalten</div> 
<div class=„col-sm-4 col-md-offset-4“>4 Spalten</div> 
</div> 
</div> 
75
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
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!
Interaktiv: Bootstrap kennenlernen 
77
Bootstrap: Loslegen in 6 Schritten 
• Schritt 1: Download unter http://getbootstrap.com/ 
78 
downloads / bootstrap-3.3.0-dist 
Dieses, bitte!
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 Ordner 
css/bootstrap.css 
fonts 
js/bootstrap.js 
css/ 
Neuer Ordner: fonts 
Neuer Ordner: js
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
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
Bootstrap: Loslegen in 6 Schritten 
• Schritt 1: Download 
• Schritt 2: Dateistruktur anlegen 
• Schritt 3: Dateien verknüpfen 
81
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
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
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
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
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
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
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
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
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
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 Headlines im Aside 
91
Inhaltselemente: weitere Stylings 
• Breadcrumb 
• Buttons: aus dem Download-Link und dem „Buy now“-Link 
• Kleinere Headlines im Aside 
• Liste ohne Bulletpoints im Aside 
91
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
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 
• Individuell anpassbar ("Customize") 
94
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 gemeinsam durch Kreation und 
Frontend-Entwicklung 
99
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 
Mobile
Weiterlernen: viele wichtige Themen 
jQuery 
100 
HTML 
CSS 
Bootstrap 
DevTools 
holder.js 
GitHub 
Webfonts 
CodePen 
Emmet 
JavaScript 
Responsive 
Mobile
“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
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 besten Lernressourcen 
104
Developing UXD: Unsere Idee 
• Fest definiertes, gemeinsames Toolset 
• Moderne, erprobte Standards 
• Vorauswahl der besten Lernressourcen 
• Lebendige Plattform 
104
Developing UXD: Unsere Idee 
• Fest definiertes, gemeinsames Toolset 
• Moderne, erprobte Standards 
• Vorauswahl der besten Lernressourcen 
• Lebendige Plattform 
• Gemeinsam und Open Source 
104
Developing UXD: Unsere Idee 
• Fest definiertes, gemeinsames Toolset 
• Moderne, erprobte Standards 
• Vorauswahl der besten Lernressourcen 
• Lebendige Plattform 
• Gemeinsam und Open Source 
• Eigenentwicklungen 
104
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
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-Designer 
106
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
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://developinguxd.com/ 
110
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 naming convention 
• jQuery und JavaScript: Einbinden und laden 
114
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> 
115
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
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
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
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
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 
• Cmd+Shift+p: Zugriff auf alle Befehle 
117
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
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
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-nav__link: Unterelemente eines "Moduls" 
haben den Modulnamen als Prefix. 
118
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
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/holder.js"></script> 
119
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
Backlog: Bootstrap 
120
Bootstrap UI Editors 
• Eine Reihe von Editoren: für unterschiedliche 
Ansprüche 
• Siehe: http://thedesignblitz.com/the-best-bootstrap-ui-editors/ 
121
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
Backlog: Argumentationshilfe 
123
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
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
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
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
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
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
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
developinguxd.com 
@developinguxd 
facebook.com/developinguxd 
mail@developinguxd.com 
131

Weitere ähnliche Inhalte

Ähnlich wie Developing UXD - Workshop bei XING

Was Sie schon immer über barrierefreies PDF wissen wollten (Revisited 2013) -...
Was Sie schon immer über barrierefreies PDF wissen wollten (Revisited 2013) -...Was Sie schon immer über barrierefreies PDF wissen wollten (Revisited 2013) -...
Was Sie schon immer über barrierefreies PDF wissen wollten (Revisited 2013) -...
Markus Erle
 
Javascript done right
Javascript done rightJavascript done right
Javascript done right
Dirk Ginader
 

Ähnlich wie Developing UXD - Workshop bei XING (20)

SEFD - Search Engine Friendly Design - SMX München 2015 Kai Spriestersbach
SEFD - Search Engine Friendly Design - SMX München 2015 Kai SpriestersbachSEFD - Search Engine Friendly Design - SMX München 2015 Kai Spriestersbach
SEFD - Search Engine Friendly Design - SMX München 2015 Kai Spriestersbach
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
 
SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016
 
Backend-Berechtigungen und 
Best Practices
Backend-Berechtigungen und 
Best PracticesBackend-Berechtigungen und 
Best Practices
Backend-Berechtigungen und 
Best Practices
 
Developing UXD - weitere Tipps, Tricks und Argumente
Developing UXD - weitere Tipps, Tricks und ArgumenteDeveloping UXD - weitere Tipps, Tricks und Argumente
Developing UXD - weitere Tipps, Tricks und Argumente
 
Was ist eigentlich SharePoint
Was ist eigentlich SharePointWas ist eigentlich SharePoint
Was ist eigentlich SharePoint
 
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftSharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
 
201903 seo campixx ur ls komprimieren - slideshare
201903 seo campixx   ur ls komprimieren - slideshare201903 seo campixx   ur ls komprimieren - slideshare
201903 seo campixx ur ls komprimieren - slideshare
 
SEO on TYPO3 homepage
SEO on TYPO3 homepageSEO on TYPO3 homepage
SEO on TYPO3 homepage
 
Agile Softwareentwicklung mit Rails
Agile Softwareentwicklung mit RailsAgile Softwareentwicklung mit Rails
Agile Softwareentwicklung mit Rails
 
Gutenberg Theme Entwicklung leicht gemacht
Gutenberg Theme Entwicklung leicht gemachtGutenberg Theme Entwicklung leicht gemacht
Gutenberg Theme Entwicklung leicht gemacht
 
Anforderungen klar kommunizieren
Anforderungen klar kommunizierenAnforderungen klar kommunizieren
Anforderungen klar kommunizieren
 
Was Sie schon immer über barrierefreies PDF wissen wollten (Revisited 2013) -...
Was Sie schon immer über barrierefreies PDF wissen wollten (Revisited 2013) -...Was Sie schon immer über barrierefreies PDF wissen wollten (Revisited 2013) -...
Was Sie schon immer über barrierefreies PDF wissen wollten (Revisited 2013) -...
 
KPI-driven Product Development - Lessons Learned (German)
KPI-driven Product Development - Lessons Learned (German)KPI-driven Product Development - Lessons Learned (German)
KPI-driven Product Development - Lessons Learned (German)
 
Baustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-phpBaustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-php
 
Javascript done right
Javascript done rightJavascript done right
Javascript done right
 
Brand My SharePoint
Brand My SharePointBrand My SharePoint
Brand My SharePoint
 
SEO-Workshop - by Heiko Stammel
SEO-Workshop - by Heiko StammelSEO-Workshop - by Heiko Stammel
SEO-Workshop - by Heiko Stammel
 
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
 
Warum SEO (auch) Deine Aufgabe ist - WebTechCon 2016
Warum SEO (auch) Deine Aufgabe ist - WebTechCon 2016Warum SEO (auch) Deine Aufgabe ist - WebTechCon 2016
Warum SEO (auch) Deine Aufgabe ist - WebTechCon 2016
 

Developing UXD - Workshop bei XING

  • 1. XING Workshop 2014 <Developing UXD> So leicht ist Frontendentwicklung für Konzepter und Designer heute
  • 2. Conni und Jerry: Wer wir sind 2
  • 3. Conni Cornelia Erbs Freelancerin als Senior User Experience Architect Davor Senior User Experience Architect für große Hamburger Agenturen „HTML-Wireframing ist so spannend wie Rätsel lösen.“ 3
  • 4. Jerry Jeremias Dombrowsky Senior Frontend Engineer bei XING Davor Creative Technologist für namhafte Agenturen und Unternehmen „Wenn UX Designer HTML und CSS lernen, haben Entwickler mehr Zeit zum Programmieren.“ 4
  • 5. Und wer seid ihr? 5 • Name • Job • Vorkenntnisse • Wünsche an den Workshop
  • 8. Ziele des Workshops • Quellcode lesen und verstehen 7
  • 9. Ziele des Workshops • Quellcode lesen und verstehen • Die erste Hürde des Selbst-Codens nehmen 7
  • 10. Ziele des Workshops • Quellcode lesen und verstehen • Die erste Hürde des Selbst-Codens nehmen • Wissen, wie man weiter lernen kann 7
  • 11. Nach dem Workshop könnt ihr noch nicht: 8
  • 12. Axure wegschmeißen und direkt alle Wireframes per Code erzeugen. 9
  • 13. Einführung: Warum wir dazu lernen müssen 10
  • 14. Warum sollten wir HTML und CSS lernen? 11
  • 15. Warum sollten wir HTML und CSS lernen? • Die Basis dessen, was wir gestalten, sollten wir kennen. 11
  • 16. Warum sollten wir HTML und CSS lernen? • Die Basis dessen, was wir gestalten, sollten wir kennen. • Zumal: Die Tools wechseln, HTML bleibt! 11
  • 17. Warum sollten wir HTML und CSS lernen? • Die Basis dessen, was wir gestalten, sollten wir kennen. • Zumal: Die Tools wechseln, HTML bleibt! • Und: Eine neue Generation „native Developers“ kommt. 11
  • 18. ”Coding is going to be the literacy of the 21st Century.“ ZACH SIMS Co-Founder Codecademy
  • 19. Es kann unsere Arbeitsweise verbessern! 13
  • 20. Es kann unsere Arbeitsweise verbessern! 13 Heutige Arbeitsweise Technisch umsetzen Anforderungen klären Wireframes erstellen Screens erstellen
  • 21. Es kann unsere Arbeitsweise verbessern! Abstrakt und statisch Abstrakt Abstrakt und statisch 13 Heutige Arbeitsweise Technisch umsetzen Anforderungen klären Wireframes erstellen Screens erstellen
  • 22. Es kann unsere Arbeitsweise verbessern! Abstrakt und statisch Abstrakt Abstrakt und statisch Echt Aber 13 Heutige Arbeitsweise Technisch umsetzen Anforderungen klären Wireframes erstellen Screens erstellen anders
  • 23. Es kann unsere Arbeitsweise verbessern! 14 Zukünftige Arbeitsweise
  • 24. Es kann unsere Arbeitsweise verbessern! 14 Statische Dokumente • Brief • User Journeys • Sketching • Look & Feel Zukünftige Arbeitsweise
  • 25. Es kann unsere Arbeitsweise verbessern! Wireframes in HTML + CSS 14 Statische Dokumente • Brief • User Journeys • Sketching • Look & Feel Prototypen Zukünftige Arbeitsweise Layout in HTML + CSS
  • 26. Es kann unsere Arbeitsweise verbessern! Wireframes in HTML + CSS 14 Statische Dokumente • Brief • User Journeys • Sketching • Look & Feel Prototypen Zukünftige Arbeitsweise Layout in HTML + CSS
  • 27. Es kann unsere Arbeitsweise verbessern! Wireframes in HTML + CSS 14 Statische Dokumente • Brief • User Journeys • Sketching • Look & Feel Prototypen Zukünftige Arbeitsweise Layout in HTML + CSS Entwicklung Website
  • 28. Es kann unsere Arbeitsweise verbessern! Wireframes in HTML + CSS 14 Statische Dokumente • Brief • User Journeys • Sketching • Look & Feel Prototypen Zukünftige Arbeitsweise Layout in HTML + CSS Entwicklung Website
  • 29. Ende der Einführung. Fragen? 15
  • 30. Agenda ✓ Einführung • HTML-Grundlagen • CSS-Grundlagen • Bootstrap • Ausblick 16
  • 32. HTML: Aufbau und Inhalte einer Website 18
  • 35. HTML: Layout-Elemente • header, footer, aside, nav, main, article, section: "Sectioning elements" gruppieren inhaltlich 20
  • 36. HTML: Layout-Elemente • header, footer, aside, nav, main, article, section: "Sectioning elements" gruppieren inhaltlich • main: Einzigartig! Hauptinhalte kommen hier rein. 20
  • 37. HTML: Layout-Elemente • header, footer, aside, nav, main, article, section: "Sectioning elements" gruppieren inhaltlich • main: Einzigartig! Hauptinhalte kommen hier rein. • article: Muss alleine stehen können (RSS-Feed, Pocket) 20
  • 38. HTML: Layout-Elemente • header, footer, aside, nav, main, article, section: "Sectioning elements" gruppieren inhaltlich • main: Einzigartig! Hauptinhalte kommen hier rein. • article: Muss alleine stehen können (RSS-Feed, Pocket) • nav: Nur für Navigation auf der Website 20
  • 39. HTML: Layout-Elemente • header, footer, aside, nav, main, article, section: "Sectioning elements" gruppieren inhaltlich • main: Einzigartig! Hauptinhalte kommen hier rein. • article: Muss alleine stehen können (RSS-Feed, Pocket) • nav: Nur für Navigation auf der Website • div: Gruppiert für Styling, nicht inhaltlich (semantisch) 20
  • 41. HTML: Inhaltselemente – Textinhalte • h1, h2: Heading. Pro section ein neues h1. • p: Absatz ("paragraph") • a: Link ("anchor"). Darf weitere Inhalte enthalten. 22
  • 42. HTML: Inhaltselemente – Weitere Inhalte 23
  • 43. HTML: Inhaltselemente – Weitere Inhalte • img: "image" – Bildelement 23
  • 44. HTML: Inhaltselemente – Weitere Inhalte • img: "image" – Bildelement • ul, ol: "unordered/ordered list" – eine Liste mit Bulletpoints oder Nummerierungen. Darf nur li-Elemente enthalten. 23
  • 45. HTML: Inhaltselemente – Weitere Inhalte • img: "image" – Bildelement • ul, ol: "unordered/ordered list" – eine Liste mit Bulletpoints oder Nummerierungen. Darf nur li-Elemente enthalten. • li: "List item" – darf andere Elemente enthalten. 23
  • 46. HTML: Inhaltselemente – Weitere Inhalte • img: "image" – Bildelement • ul, ol: "unordered/ordered list" – eine Liste mit Bulletpoints oder Nummerierungen. Darf nur li-Elemente enthalten. • li: "List item" – darf andere Elemente enthalten. • audio, video, canvas, object: Media-Inhalte 23
  • 49. Tags <p>Das ist mein Absatz</p> 26
  • 50. Tags Opening <tag> Closing </tag> <p>Das ist mein Absatz</p> 26
  • 51. Tags Opening <tag> Closing </tag> <p>Das ist mein Absatz</p> • Layout-Elemente haben "opening" und "closing tags". 26
  • 52. Tags Opening <tag> Closing </tag> <p>Das ist mein Absatz</p> • Layout-Elemente haben "opening" und "closing tags". • Ermöglicht Verschachtelung 26
  • 53. Tags Opening <tag> Closing </tag> <p>Das ist mein Absatz</p> • Layout-Elemente haben "opening" und "closing tags". • Ermöglicht Verschachtelung • Es gibt Elemente ohne "closing tags". z.B. <img> 26
  • 54. Tags: Verschachtelung <article> <h1>Welcome</h1> <p>Das ist mein Absatz, der <em>auch</em> verschachtelte Elemente enthält.</p> </article> 27
  • 55. Tags: Verschachtelung <article> <h1>Welcome</h1> <p>Das ist mein Absatz, der <em>auch</em> verschachtelte Elemente enthält.</p> </article> 27 Opening <article> Closing <article>
  • 56. Tags: Verschachtelung <article> <h1>Welcome</h1> <p>Das ist mein Absatz, der <em>auch</em> verschachtelte Elemente enthält.</p> </article> 27 Opening <article> Closing <article> Nested <h1>
  • 57. Tags: Verschachtelung <article> <h1>Welcome</h1> <p>Das ist mein Absatz, der <em>auch</em> verschachtelte Elemente enthält.</p> </article> 27 Opening <article> Closing <article> Nested <h1> Nested <p>
  • 58. Tags: Verschachtelung <article> <h1>Welcome</h1> <p>Das ist mein Absatz, der <em>auch</em> verschachtelte Elemente enthält.</p> </article> 27 Opening <article> Closing <article> Nested <h1> Nested <p> Nested <em>
  • 59. 28 Attribute <img src="img/logo.png">
  • 60. 28 Attribute attribute = Eigenschaft <img src="img/logo.png">
  • 61. "value" = Wert der Eigenschaft 28 Attribute attribute = Eigenschaft <img src="img/logo.png">
  • 62. "value" = Wert der Eigenschaft 28 Attribute attribute = Eigenschaft <img src="img/logo.png"> • Elemente haben unterschiedliche attributes
  • 63. "value" = Wert der Eigenschaft 28 Attribute attribute = Eigenschaft <img src="img/logo.png"> • Elemente haben unterschiedliche attributes • Es gibt attributes ohne value z.B. <input type="email" required>
  • 65. 29 Attribute: Wichtige <input id="i-am-unique">
  • 66. Attribute: Wichtige <input id="i-am-unique"> Kennzeichnet ein zwingend einzigartiges Element, z.B. input im Formular; #jumpmark im gleichen Dokument 29
  • 67. Attribute: Wichtige <input id="i-am-unique"> Kennzeichnet ein zwingend einzigartiges Element, z.B. input im Formular; #jumpmark im gleichen Dokument <a class="nav-link nav-link--active">Home</a> 29
  • 68. Attribute: Wichtige <input id="i-am-unique"> Kennzeichnet ein zwingend einzigartiges Element, z.B. input im Formular; #jumpmark im gleichen Dokument <a class="nav-link nav-link--active">Home</a> Wird fürs Styling verwendet. Elemente können mehrere "class names" enthalten. 29
  • 70. Attribute: Beispiele <img src="img/my-dog.jpg" alt="Caja"> 30
  • 71. Attribute: Beispiele <img src="img/my-dog.jpg" alt="Caja"> <a href="contact.html">Contact</a> 30
  • 72. Attribute: Beispiele <img src="img/my-dog.jpg" alt="Caja"> <a href="contact.html">Contact</a> <a href="http://google.com" target="_blank">Leave</a> 30
  • 73. Attribute: Beispiele <img src="img/my-dog.jpg" alt="Caja"> <a href="contact.html">Contact</a> <a href="http://google.com" target="_blank">Leave</a> <label for="user-mail">Your email address:</label> 30
  • 74. Attribute: Beispiele <img src="img/my-dog.jpg" alt="Caja"> <a href="contact.html">Contact</a> <a href="http://google.com" target="_blank">Leave</a> <label for="user-mail">Your email address:</label> <input id="user-mail" type="email" 30
  • 75. Attribute: Beispiele <img src="img/my-dog.jpg" alt="Caja"> <a href="contact.html">Contact</a> <a href="http://google.com" target="_blank">Leave</a> <label for="user-mail">Your email address:</label> <input id="user-mail" type="email" placeholder="me@me.io" required> 30
  • 76. Attribute: Beispiele <img src="img/my-dog.jpg" alt="Caja"> <a href="contact.html">Contact</a> <a href="http://google.com" target="_blank">Leave</a> <label for="user-mail">Your email address:</label> <input id="user-mail" type="email" placeholder="me@me.io" required> <script src="js/scripts.js"></script> 30
  • 77. Attribute: Beispiele <img src="img/my-dog.jpg" alt="Caja"> <a href="contact.html">Contact</a> <a href="http://google.com" target="_blank">Leave</a> <label for="user-mail">Your email address:</label> <input id="user-mail" type="email" placeholder="me@me.io" required> <script src="js/scripts.js"></script> • Die Attribute von allen Elementen findet ihr unter MDN (Mozilla Developer Network) 30
  • 78. Interaktiv: HTML-Elemente untersuchen www.developinguxd.com 31
  • 79. HTML-Elemente untersuchen • Google Chrome: "Chrome Developer Tools (DevTools)" • Rechtsklick auf Element: "Element untersuchen" (Profis drücken cmd+shift+c) • Aufklappen, Auswählen, per "Brotkrumen" navigieren • Text ändern, Elemente verschieben und löschen 32
  • 81. Sublime Text 3 einrichten: komplett • Download: http://www.sublimetext.com/3 • Einstellungen: "Default Settings" in "User Settings" kopieren und anpassen • Package Control installieren für Erweiterungen • cmd+shift+p "Package Install": Emmet, SidebarEnhancements, BracketHighlighter, Color Highlighter 34
  • 82. Interaktiv: Dokument erstellen rohrpostix ☛ Daten/Transfer/Developing UXD/ kopieren! Dann Schreibtisch ☛ Developing UXD/exercises/01_html_start öffnen 35
  • 84. Dokument erstellen • Mit Emmet: html:5Tab 36
  • 85. Dokument erstellen • Mit Emmet: html:5Tab • HTML5 Doctype: <!doctype html> 36
  • 86. Dokument erstellen • Mit Emmet: html:5Tab • HTML5 Doctype: <!doctype html> • head: Metadaten, Dokumenttitel, Link zu Stylesheets 36
  • 87. Dokument erstellen • Mit Emmet: html:5Tab • HTML5 Doctype: <!doctype html> • head: Metadaten, Dokumenttitel, Link zu Stylesheets • body: Sichtbare Inhalte, Link zu JavaScripts am Ende 36
  • 90. Weitere Ressourcen • codecademy.com – kostenloser Onlinekurs 38
  • 91. Weitere Ressourcen • codecademy.com – kostenloser Onlinekurs • developer.mozilla.org – MDN: alles zu HTML und CSS 38
  • 92. Weitere Ressourcen • codecademy.com – kostenloser Onlinekurs • developer.mozilla.org – MDN: alles zu HTML und CSS • stackoverflow.com – Fragen und Antworten 38
  • 93. Weitere Ressourcen • codecademy.com – kostenloser Onlinekurs • developer.mozilla.org – MDN: alles zu HTML und CSS • stackoverflow.com – Fragen und Antworten • abookapart.com – Bücher zu HTML5, CSS3 und mehr 38
  • 94. Weitere Ressourcen • codecademy.com – kostenloser Onlinekurs • developer.mozilla.org – MDN: alles zu HTML und CSS • stackoverflow.com – Fragen und Antworten • abookapart.com – Bücher zu HTML5, CSS3 und mehr • amp-what.com – Sonderzeichen finden 38
  • 95. Weitere Ressourcen • codecademy.com – kostenloser Onlinekurs • developer.mozilla.org – MDN: alles zu HTML und CSS • stackoverflow.com – Fragen und Antworten • abookapart.com – Bücher zu HTML5, CSS3 und mehr • amp-what.com – Sonderzeichen finden • codepen.io und jsbin.com – Online-Editoren 38
  • 96. Das ist HTML. Fragen? 39
  • 97. Agenda ✓ Einführung ✓ HTML-Grundlagen • CSS-Grundlagen • Bootstrap • Ausblick 40
  • 99. CSS: Elemente finden und stylen 42
  • 100. Selektoren: class <img src="img/logo.png" alt="IA Konferenz"> 43
  • 101. Selektoren: class <img src="img/logo.png" alt="IA Konferenz"> Nicht jedes <img> soll gleich gestylt werden 43
  • 102. Selektoren: class <img src="img/logo.png" alt="IA Konferenz"> Nicht jedes <img> soll gleich gestylt werden <img class="logo" src="img/logo.png" alt="IA Konferenz"> 43
  • 103. Selektoren: class <img src="img/logo.png" alt="IA Konferenz"> Nicht jedes <img> soll gleich gestylt werden <img class="logo" src="img/logo.png" alt="IA Konferenz"> Durch das class-Attribut können wir das Element stylen 43
  • 104. <img class="logo" src="img/logo.png" alt="IA Konferenz"> 44 Selektoren: class
  • 105. <img class="logo" src="img/logo.png" alt="IA Konferenz"> .logo { width: 200px; height: 100px; } 44 Selektoren: class
  • 106. <img class="logo" src="img/logo.png" alt="IA Konferenz"> .class-selector beginnt immer mit einem Punkt. .logo { width: 200px; height: 100px; } 44 Selektoren: class
  • 107. <img class="logo" src="img/logo.png" alt="IA Konferenz"> .class-selector beginnt immer mit einem Punkt. .logo { width: 200px; height: 100px; } • Wir verwenden (fast) immer .class-Selektoren! 44 Selektoren: class
  • 108. .logo { width: 200px; height: 100px; } 45 Selektoren: class
  • 109. .logo { width: 200px; height: 100px; } Eine "declaration" besteht aus property und value. 45 Selektoren: class
  • 110. Selektoren: class .logo { width: 200px; height: 100px; } 45 : Eine "declaration" besteht aus property und value.
  • 111. Selektoren: class .logo { width: 200px; height: 100px; } 45 : Eine "declaration" besteht aus property und value. ;
  • 112. .logo { width: 200px; height: 100px; } 45 : Eine "declaration" besteht aus property und value. ; selector und { declaration block } bilden ein "Rule Set" Selektoren: class
  • 113. Interaktiv: CSS mit DevTools untersuchen www.developinguxd.com 46
  • 114. CSS untersuchen • Element auswählen, Declarations ein- und ausschalten, Werte ändern (auch mit Pfeiltasten und Shift) • Element auswählen, class-Attribut hinzufügen und entfernen 47
  • 115. CSS: Learnings durch DevTools • h1: "Element-Selektoren" nur für sehr allgemeine Styles, sind weniger spezifisch als Klassen. • h1, .main-headline: Ein Rule Set kann mehrere kommagetrennte Selektoren haben. • .page-nav .page-nav__link: Mehrteilige Selektoren sind spezifischer. Hohe Spezifität ist schwer überschreibbar. • #register: Ids haben höhere Spezifität als Klassen. 48
  • 117. CSS: Block- und Inline-Elemente 50 Block-Elemente Stehen immer alleine pro Zeile und füllen den Platz aus. z. B. h1, p, ul, div
  • 118. CSS: Block- und Inline-Elemente 50 Block-Elemente Stehen immer alleine pro Zeile und füllen den Platz aus. z. B. h1, p, ul, div Inline-Elemente Teilen sich eine Zeile. z. B. a, em, img, span
  • 119. Demonstration: Block- und Inline-Elemente 51
  • 121. CSS: Box Model Element 52 Element
  • 122. CSS: Box Model 52 Padding Element Element
  • 123. CSS: Box Model 52 Padding Border Element Element
  • 124. CSS: Box Model Padding Margin 52 Border Element Element
  • 125. CSS: Box Model Padding Margin 53 Border Element Element
  • 127. CSS: Learnings Box Model • Browser geben den Elementen Standard-Styles. • padding wird auf die width und height draufgerechnet • Inline-Elemente bekommen kein margin-top und margin-bottom. • margin-left: auto; margin-right: auto; zentriert Block- Elemente horizontal. 55
  • 128. Border, Margin und Padding: Werte 56 margin: 5px 10px 20px 3px;
  • 129. Border, Margin und Padding: Werte 56 Oben margin: 5px 10px 20px 3px;
  • 130. Border, Margin und Padding: Werte 56 Oben Rechts margin: 5px 10px 20px 3px;
  • 131. Border, Margin und Padding: Werte 56 Oben Rechts margin: 5px 10px 20px 3px; Unten
  • 132. Border, Margin und Padding: Werte 56 Oben Rechts margin: 5px 10px 20px 3px; Unten Links
  • 133. Border, Margin und Padding: Werte 56 Oben Rechts margin: 5px 10px 20px 3px; Unten Links margin-top: 5px; margin-right: 10px; margin-bottom: 20px; margin-left: 3px;
  • 134. Border, Margin und Padding: Werte 57
  • 135. Border, Margin und Padding: Werte margin: 5px 10px 20px 3px; Oben Rechts Unten Links 57
  • 136. Border, Margin und Padding: Werte margin: 5px 10px 20px 3px; Oben Rechts Unten Links 57 margin: 5px 10px 20px 10px;
  • 137. Border, Margin und Padding: Werte margin: 5px 10px 20px 3px; Oben Rechts Unten Links 57 margin: 5px 10px 20px 10px; margin: 5px 10px 5px 10px;
  • 138. Border, Margin und Padding: Werte margin: 5px 10px 20px 3px; Oben Rechts Unten Links 57 margin: 5px 10px 20px 10px; margin: 5px 10px 5px 10px; margin: 5px 5px 5px 5px;
  • 139. Interaktiv: CSS schreiben 58 03_css_start
  • 141. Weitere Ressourcen • css-tricks.com – CSS Tutorials und Tipps 59
  • 142. Weitere Ressourcen • css-tricks.com – CSS Tutorials und Tipps • developer.mozilla.org – alles zu HTML und CSS 59
  • 143. Weitere Ressourcen • css-tricks.com – CSS Tutorials und Tipps • developer.mozilla.org – alles zu HTML und CSS • stackoverflow.com – Fragen und Antworten 59
  • 144. Weitere Ressourcen • css-tricks.com – CSS Tutorials und Tipps • developer.mozilla.org – alles zu HTML und CSS • stackoverflow.com – Fragen und Antworten • shop.smashingmagazine.com – Smashing Library 59
  • 145. Weitere Ressourcen • css-tricks.com – CSS Tutorials und Tipps • developer.mozilla.org – alles zu HTML und CSS • stackoverflow.com – Fragen und Antworten • shop.smashingmagazine.com – Smashing Library • abookapart.com – Bücher zu HTML5, CSS3 und mehr 59
  • 146. Das ist CSS. Fragen? 60
  • 147. Agenda ✓ Einführung ✓ HTML-Grundlagen ✓ CSS-Grundlagen • Bootstrap • Ausblick 61
  • 149. Bootstrap: Was ist das? 63
  • 150. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. 64 Was ist Bootstrap?
  • 152. Wie funktioniert Bootstrap? • Verknüpfung: von Bootstrap-CSS sowie -JS mit dem eigenen HTML 65
  • 153. Wie funktioniert Bootstrap? • Verknüpfung: von Bootstrap-CSS sowie -JS mit dem eigenen HTML • Automatisches Styling: von Typographie und Links 65
  • 154. Wie funktioniert Bootstrap? • Verknüpfung: von Bootstrap-CSS sowie -JS mit dem eigenen HTML • Automatisches Styling: von Typographie und Links • Spezielles Styling: über das Einfügen von Klassen 65
  • 155. Demonstration: Das ist Bootstrap. getbootstrap.com 66
  • 156. Bootstrap: CSS und Components 67 CSS Typography Code Tables Forms Buttons Images Helper classes Responsive utilities Components Glyphicons Dropdowns Button groups Button dropdowns Input groups Navs Navbar Breadcrumbs Pagination Labels Badges Jumbotron Page header Thumbnails Alerts Progress bars Media object List group Panels Wells
  • 159. Bootstrap: Grid • Grid-System für Adaptive und Responsive Web Design 69
  • 160. Bootstrap: Grid • Grid-System für Adaptive und Responsive Web Design • Ist standardmäßig mobile first („scale up“) 69
  • 161. Bootstrap: Grid • Grid-System für Adaptive und Responsive Web Design • Ist standardmäßig mobile first („scale up“) • Funktioniert über verschachtelte Klassen 69
  • 162. Bootstrap: Grid 1. Klasse container container (fixed-width für Adaptive-Verhalten) oder container-fluid (full-width für Fluid-Verhalten) 70
  • 163. Bootstrap: Grid 1. Klasse container container (fixed-width für Adaptive-Verhalten) oder container-fluid (full-width für Fluid-Verhalten) <div class="container-fluid"> </div> 70
  • 164. 2. Klasse row um Elemente nebeneinander anzuordnen 71 Bootstrap: Grid
  • 165. 2. Klasse row um Elemente nebeneinander anzuordnen <div class="container-fluid"> <div class="row"> </div> </div> 71 Bootstrap: Grid
  • 166. 3. Klasse column (z.B. col-sm-6) für die Definition der Spaltenbreite, basierend auf einem 12-spaltigen Grid-System 72 Bootstrap: Grid
  • 167. 3. Klasse column (z.B. col-sm-6) für die Definition der Spaltenbreite, basierend auf einem 12-spaltigen Grid-System <div class="container-fluid"> <div class="row"> <div class="col-sm-6">Halbe Reihe</div> <div class="col-sm-6">Halbe Reihe</div> </div> </div> 72 Bootstrap: Grid
  • 168. <div class="container-fluid"> <div class="row"> <div class="col-sm-6">Halbe Reihe</div> <div class="col-sm-6">Halbe Reihe</div> </div> </div> 73 1. Container 2. Row 3. Columns Bootstrap: Grid
  • 169. Halbe Reihe Halbe Reihe <div class="container-fluid"> <div class="row"> <div class="col-sm-6">Halbe Reihe</div> <div class="col-sm-6">Halbe Reihe</div> </div> </div> 73 1. Container 2. Row 3. Columns Bootstrap: Grid
  • 170. Bootstrap Grid: Columns 74 Extra small devices Phones <768px .col-xs- Small devices Tablets ≥768px .col-sm- Medium devices Desktops ≥992px .col-md- Large devices Desktops ≥1200px .col-lg-
  • 171. Bootstrap Grid: Columns 74 Extra small devices Phones <768px .col-xs- Small devices Tablets ≥768px .col-sm- Medium devices Desktops ≥992px .col-md- Large devices Desktops ≥1200px .col-lg- Eine Grid-Größe gilt immer für diese Größe und darüber: sm gilt für sm, md und lg.
  • 172. Bootstrap Grid: Columns mit Versatz 4 Spalten 4 Spalten 75
  • 173. Bootstrap Grid: Columns mit Versatz 4 Spalten 4 Spalten <div class="container-fluid"> <div class="row"> <div class=„col-sm-4“>4 Spalten</div> <div class=„col-sm-4 col-md-offset-4“>4 Spalten</div> </div> </div> 75
  • 174. Bootstrap Grid: Columns mit Versatz 4 Spalten 4 Spalten <div class="container-fluid"> <div class="row"> <div class=„col-sm-4“>4 Spalten</div> <div class=„col-sm-4 col-md-offset-4“>4 Spalten</div> </div> </div> Offset 75
  • 175. Responsive und Mobile first: nicht heute • Bootstrap ist von Haus aus responsive. • Spezielle Elemente: • Responsive tables • Responsive images • Responsive Utilities (Sichtbarkeit toggeln) 76 Zu viele Themen!
  • 177. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download unter http://getbootstrap.com/ 78 downloads / bootstrap-3.3.0-dist Dieses, bitte!
  • 178. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download unter http://getbootstrap.com/ 79
  • 179. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download • Schritt 2: Dateistruktur anlegen Lokaler Ordner
  • 180. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download • Schritt 2: Dateistruktur anlegen getbootstrap.com Lokaler Ordner css/bootstrap.css fonts js/bootstrap.js css/ Neuer Ordner: fonts Neuer Ordner: js
  • 181. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download • Schritt 2: Dateistruktur anlegen getbootstrap.com Lokaler Ordner css/bootstrap.css fonts js/bootstrap.js css/ Neuer Ordner: fonts Neuer Ordner: js jquery.com jquery.js In den js-Ordner
  • 182. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download • Schritt 2: Dateistruktur anlegen getbootstrap.com Lokaler Ordner css/bootstrap.css fonts js/bootstrap.js css/ Neuer Ordner: fonts Neuer Ordner: js jquery.com jquery.js In den js-Ordner imsky.github.io/holder/ holder.js In den js-Ordner
  • 183. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download • Schritt 2: Dateistruktur anlegen • Schritt 3: Dateien verknüpfen 81
  • 184. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download • Schritt 2: Dateistruktur anlegen • Schritt 3: Dateien verknüpfen: (a) CSS 82 bootstrap.css im head VOR dem eigenen CSS
  • 185. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download • Schritt 2: Dateistruktur anlegen • Schritt 3: Dateien verknüpfen: (b) JS 83 .js am Ende des bodys
  • 186. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download • Schritt 2: Dateistruktur anlegen • Schritt 3: Dateien verknüpfen • Schritt 4: Layout-Elemente einfügen z. B. Header, Primärnavigation, Hauptcontent, Marginalspalte und Footer 84
  • 187. Erforderlich: Viewport meta Tag im head <meta name="viewport" content="width=device-width, initial-scale=1"> Ermöglicht Responsive Web Design auf mobilen Geräten 85
  • 188. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download • Schritt 2: Dateistruktur anlegen • Schritt 3: Dateien verknüpfen • Schritt 4: Layout-Elemente einfügen • Schritt 5: Grid anlegen 86
  • 189. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download • Schritt 2: Dateistruktur anlegen • Schritt 3: Dateien verknüpfen • Schritt 4: Layout-Elemente einfügen • Schritt 5: Grid anlegen mit Hilfe der Bootstrap-Doku 86
  • 190. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download • Schritt 2: Dateistruktur anlegen • Schritt 3: Dateien verknüpfen • Schritt 4: Layout-Elemente einfügen • Schritt 5: Grid anlegen • Schritt 6: Inhaltselemente anlegen und stylen 87
  • 191. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download • Schritt 2: Dateistruktur anlegen • Schritt 3: Dateien verknüpfen • Schritt 4: Layout-Elemente einfügen • Schritt 5: Grid anlegen • Schritt 6: Inhaltselemente anlegen und stylen mit Hilfe der Code-Snippets aus der Bootstrap-Doku 87
  • 192. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download • Schritt 2: Dateistruktur anlegen • Schritt 3: Dateien verknüpfen • Schritt 4: Layout-Elemente einfügen • Schritt 5: Grid anlegen • Schritt 6: Inhaltselemente anlegen und stylen 88
  • 195. Inhaltselemente: Main navigation • Nav-Style 90
  • 196. Inhaltselemente: Main navigation • Nav-Style • Ausrichtung 90
  • 197. Inhaltselemente: Main navigation • Nav-Style • Ausrichtung • Textgröße 90
  • 198. Inhaltselemente: Main navigation • Nav-Style • Ausrichtung • Textgröße • Abstand nach unten 90
  • 200. Inhaltselemente: weitere Stylings • Breadcrumb 91
  • 201. Inhaltselemente: weitere Stylings • Breadcrumb • Buttons: aus dem Download-Link und dem „Buy now“-Link 91
  • 202. Inhaltselemente: weitere Stylings • Breadcrumb • Buttons: aus dem Download-Link und dem „Buy now“-Link • Kleinere Headlines im Aside 91
  • 203. Inhaltselemente: weitere Stylings • Breadcrumb • Buttons: aus dem Download-Link und dem „Buy now“-Link • Kleinere Headlines im Aside • Liste ohne Bulletpoints im Aside 91
  • 204. Inhaltselemente: weitere Stylings • Breadcrumb • Buttons: aus dem Download-Link und dem „Buy now“-Link • Kleinere Headlines im Aside • Liste ohne Bulletpoints im Aside • Icon hinter dem Top-Link im Footer 91
  • 205. Bootstrap: Was noch zu sagen ist. 92
  • 206. Demonstration: JavaScript mit Bootstrap getbootstrap.com 93
  • 208. Warum Bootstrap? • Gute Dokumentation 94
  • 209. Warum Bootstrap? • Gute Dokumentation • Große Community 94
  • 210. Warum Bootstrap? • Gute Dokumentation • Große Community • Viele UI-Elemente 94
  • 211. Warum Bootstrap? • Gute Dokumentation • Große Community • Viele UI-Elemente • Responsive Web Design als Standard 94
  • 212. Warum Bootstrap? • Gute Dokumentation • Große Community • Viele UI-Elemente • Responsive Web Design als Standard • Individuell anpassbar ("Customize") 94
  • 213. Unser Boilerplate: für euch github.com/developinguxd/boilerplates 95
  • 214. Das ist Bootstrap. Noch Fragen? 96
  • 215. Agenda ✓ Einführung ✓ HTML-Grundlagen ✓ CSS-Grundlagen ✓ Bootstrap • Ausblick 97
  • 217. Tipps: die tägliche Arbeit 99
  • 218. Tipps: die tägliche Arbeit • Start: Handscribbles 99
  • 219. Tipps: die tägliche Arbeit • Start: Handscribbles • Entscheidung: Ist die Projektart geeignet? 99
  • 220. Tipps: die tägliche Arbeit • Start: Handscribbles • Entscheidung: Ist die Projektart geeignet? • Doing: Prototyping gemeinsam durch Kreation und Frontend-Entwicklung 99
  • 222. Weiterlernen: viele wichtige Themen 100 HTML CSS Bootstrap DevTools holder.js
  • 223. Weiterlernen: viele wichtige Themen jQuery 100 HTML CSS Bootstrap DevTools holder.js JavaScript Responsive Mobile
  • 224. Weiterlernen: viele wichtige Themen jQuery 100 HTML CSS Bootstrap DevTools holder.js GitHub Webfonts CodePen Emmet JavaScript Responsive Mobile
  • 225. “I think everybody in this country should learn how to program a computer because it teaches you how to think.“ STEVE JOBS The Lost Interview
  • 226. One more thing ... 102
  • 229. Developing UXD: Unsere Idee • Fest definiertes, gemeinsames Toolset 104
  • 230. Developing UXD: Unsere Idee • Fest definiertes, gemeinsames Toolset • Moderne, erprobte Standards 104
  • 231. Developing UXD: Unsere Idee • Fest definiertes, gemeinsames Toolset • Moderne, erprobte Standards • Vorauswahl der besten Lernressourcen 104
  • 232. Developing UXD: Unsere Idee • Fest definiertes, gemeinsames Toolset • Moderne, erprobte Standards • Vorauswahl der besten Lernressourcen • Lebendige Plattform 104
  • 233. Developing UXD: Unsere Idee • Fest definiertes, gemeinsames Toolset • Moderne, erprobte Standards • Vorauswahl der besten Lernressourcen • Lebendige Plattform • Gemeinsam und Open Source 104
  • 234. Developing UXD: Unsere Idee • Fest definiertes, gemeinsames Toolset • Moderne, erprobte Standards • Vorauswahl der besten Lernressourcen • Lebendige Plattform • Gemeinsam und Open Source • Eigenentwicklungen 104
  • 235. Developing UXD: Unsere Idee • Fest definiertes, gemeinsames Toolset • Moderne, erprobte Standards • Vorauswahl der besten Lernressourcen • Lebendige Plattform • Gemeinsam und Open Source • Eigenentwicklungen • Unterstützung durch Frontend-Community 104
  • 236. 105
  • 239. Developing UXD: Nächste Schritte 106
  • 240. Developing UXD: Nächste Schritte • Die besten Lernquellen im Web 106
  • 241. Developing UXD: Nächste Schritte • Die besten Lernquellen im Web • Lernpläne 106
  • 242. Developing UXD: Nächste Schritte • Die besten Lernquellen im Web • Lernpläne • Aufbau einer Community begeisterter UX-Designer 106
  • 243. Developing UXD: Nächste Schritte • Die besten Lernquellen im Web • Lernpläne • Aufbau einer Community begeisterter UX-Designer • Entwicklung von Tools für Workflow-Optimierungen 106
  • 244. Vielen Dank! Happy coding! 107
  • 245. Euer Feedback: Wie wars? 108
  • 247. Cornelia Erbs, Jeremias Dombrowsky Lessers Passage 10 22767 Hamburg +49 (0)151 23421980 mail@developinguxd.com http://developinguxd.com/ 110
  • 248. Alle Icons in dieser Präsentation kommen von http://iconmonstr.com/ 111
  • 250. Backlog: Sublime, HTML, CSS, JS 113
  • 251. Backlog • Sublime: Shortcuts • Sublime: Emmet Shortcuts • HTML: Formulare • Holder.js: Img placeholders • CSS: BEM naming convention • jQuery und JavaScript: Einbinden und laden 114
  • 252. Sublime Text 3: Emmet Shortcuts 115
  • 253. Sublime Text 3: Emmet Shortcuts • Selector-Syntax: e.g. article>h1+pTab wird zu <article> <h1></h1> <p></p> </article> 115
  • 254. Sublime Text 3: Emmet Shortcuts • Selector-Syntax: e.g. article>h1+pTab wird zu <article> <h1></h1> <p></p> </article> • Ctrl+w: "Wrap with tag" 115
  • 255. Sublime Text 3: Emmet Shortcuts • Selector-Syntax: e.g. article>h1+pTab wird zu <article> <h1></h1> <p></p> </article> • Ctrl+w: "Wrap with tag" • Cmd+Shift+k: Tag ändern 115
  • 256. Sublime Text 3: Emmet Shortcuts • Selector-Syntax: e.g. article>h1+pTab wird zu <article> <h1></h1> <p></p> </article> • Ctrl+w: "Wrap with tag" • Cmd+Shift+k: Tag ändern • Cmd+': Element löschen 115
  • 257. HTML: Formulare • form: Gruppiert zusammengehörige Formularelemente, darf auch andere Elemente enthalten. • input: Kann von unterschiedlichem Typ sein: text, email, number, tel, color, date, checkbox, radio, ... • select: Enthält option-Elemente, die ein Dropdown bilden. 116
  • 258. Sublime Text 3: Shortcuts 117
  • 259. Sublime Text 3: Shortcuts • TagnameTab: Autocomplete (Mehrfach für Sprungmarken) 117
  • 260. Sublime Text 3: Shortcuts • TagnameTab: Autocomplete (Mehrfach für Sprungmarken) • Cmd+p: Fuzzy-Search für Dateien 117
  • 261. Sublime Text 3: Shortcuts • TagnameTab: Autocomplete (Mehrfach für Sprungmarken) • Cmd+p: Fuzzy-Search für Dateien • Cmd+Shift+p: Zugriff auf alle Befehle 117
  • 262. Sublime Text 3: Shortcuts • TagnameTab: Autocomplete (Mehrfach für Sprungmarken) • Cmd+p: Fuzzy-Search für Dateien • Cmd+Shift+p: Zugriff auf alle Befehle • Cmd+d: Weitere Instanz des markierten Texts auswählen 117
  • 263. Sublime Text 3: Shortcuts • TagnameTab: Autocomplete (Mehrfach für Sprungmarken) • Cmd+p: Fuzzy-Search für Dateien • Cmd+Shift+p: Zugriff auf alle Befehle • Cmd+d: Weitere Instanz des markierten Texts auswählen • Ausführliches Tutorial auf scotch.io 117
  • 264. Selektoren: BEM naming convention 118
  • 265. Selektoren: BEM naming convention • .page-header: Einfacher Bindestrich bei zusammengesetzten Namen 118
  • 266. Selektoren: BEM naming convention • .page-header: Einfacher Bindestrich bei zusammengesetzten Namen • .page-nav, .page-nav__link: Unterelemente eines "Moduls" haben den Modulnamen als Prefix. 118
  • 267. Selektoren: BEM naming convention • .page-header: Einfacher Bindestrich bei zusammengesetzten Namen • .page-nav, .page-nav__link: Unterelemente eines "Moduls" haben den Modulnamen als Prefix. • .button, .button--small, .button--cancel: Varianten sind als solche erkennbar. 118
  • 269. Holder.js: Img placeholders • Download: http://imsky.github.io/holder/ 119
  • 270. Holder.js: Img placeholders • Download: http://imsky.github.io/holder/ • JavaScript im <body> laden: <script src="js/holder.js"></script> 119
  • 271. Holder.js: Img placeholders • Download: http://imsky.github.io/holder/ • JavaScript im <body> laden: <script src="js/holder.js"></script> • Einsatz: <img src="holder.js/300x200"> <img src="holder.js/100x100/#000:#fff"> <img src="holder.js/300x200/text:hello world"> <img src="holder.js/200x200/auto/textmode:exact"> 119
  • 273. Bootstrap UI Editors • Eine Reihe von Editoren: für unterschiedliche Ansprüche • Siehe: http://thedesignblitz.com/the-best-bootstrap-ui-editors/ 121
  • 274. Bootstrap: und andere Frameworks • Bootstrap http://twitter.github.io/bootstrap/ weit verbreitet, umfangreich • Foundation http://foundation.zurb.com/ sehr umfangreich, komplex • Pure http://purecss.io/ sehr schlank • HTML Kickstart http://www.99lime.com/elements/ umfangreich, leicht 122
  • 276. Backlog: Argumentationshilfe • Vorteile von HTML-Wireframes: für Kunden • Vorteile von HTML-Wireframes: für Agenturen • Grenzen des statischen Designs überwinden • Wissen aufbauen • Zusammenarbeit verbessern 124
  • 277. Kunde Vorteile: für Kunden • Vermitteln Funktionalität einer Website von Anfang an realistisch • Sind durch Interaktivität einfacher zu verstehen • Produkt entwickelt sich vor den Augen des Kunden stetig weiter • Kein Bruch zwischen Kreations- und Entwicklung-sphase (keine Überraschungen) 125
  • 278. UX Vorteile: für Agenturen 1/2 • Keine bzw. weniger Spezifikationen erforderlich • Integrierte Arbeitsweise wird gefördert • Animationen und Interaktivität werden direkt berücksichtigt • Ansätze können direkt ausprobiert und dadurch Design-Entscheidungen leichter getroffen werden 126
  • 279. UX Vorteile: für Agenturen 2/2 • Frühe Usertests sind möglich • Browser-Spezifika funktionieren automatisch (Scrollbars, Button-Größen, Hover etc.) • Code kann in Teilen weiter verwendet werden 127
  • 280. Grenzen des statischen Designs überwinden STATISCHES DESIGN • Liquid und responsive Layouts • Realistische Darstellung von Typografie • Globale Anpassungen von Farben, Abständen, Größen • Animationen und Interaktionen 128
  • 281. Wissen aufbauen • Neue Denkweisen trainieren • Neue Browserfeatures besser verstehen • Wissen, was möglich ist • Änderungen auf Live-Websites direkt ausprobieren (Developer Tools) • Prototypen selbst bauen (z. B. mit Bootstrap) oder ändern/erweitern 129
  • 282. Zusammenarbeit verbessern • Besseres Verständnis für das Medium und für Frontend- Developer • Weniger Abhängigkeit von Frontend-Developern bei der Ideenfindung • Implementierungsaufwände besser einschätzen können • Gemeinsames (richtiges) Vokabular aufbauen • Gemeinsam an Prototypen arbeiten Kreation Frontend 130