developing uxd - workshop bei xing
DESCRIPTION
HTML, CSS und Bootstrap für DesignerTRANSCRIPT
![Page 1: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/1.jpg)
<Developing UXD>So leicht ist Frontendentwicklung für
Konzepter und Designer heute
XING Workshop 2014
![Page 2: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/2.jpg)
Conni und Jerry: Wer wir sind
2
![Page 3: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/3.jpg)
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.“
![Page 4: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/4.jpg)
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.“
![Page 5: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/5.jpg)
Und wer seid ihr?
5
• Name
• Job
• Vorkenntnisse
• Wünsche an den Workshop
![Page 6: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/6.jpg)
Ziele des Workshops
6
![Page 7: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/7.jpg)
Ziele des Workshops
7
![Page 8: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/8.jpg)
Ziele des Workshops
• Quellcode lesen und verstehen
7
![Page 9: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/9.jpg)
Ziele des Workshops
• Quellcode lesen und verstehen
• Die erste Hürde des Selbst-Codens nehmen
7
![Page 10: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/10.jpg)
Ziele des Workshops
• Quellcode lesen und verstehen
• Die erste Hürde des Selbst-Codens nehmen
• Wissen, wie man weiter lernen kann
7
![Page 11: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/11.jpg)
Nach dem Workshop könnt ihr noch nicht:
8
![Page 12: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/12.jpg)
Axure wegschmeißenund direkt alle Wireframes per Code erzeugen.
9
![Page 13: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/13.jpg)
Einführung: Warum wir dazu lernen müssen
10
![Page 14: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/14.jpg)
Warum sollten wir HTML und CSS lernen?
11
![Page 15: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/15.jpg)
Warum sollten wir HTML und CSS lernen?
• Die Basis dessen, was wir gestalten, sollten wir kennen.
11
![Page 16: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/16.jpg)
Warum sollten wir HTML und CSS lernen?
• Die Basis dessen, was wir gestalten, sollten wir kennen.
• Zumal: Die Tools wechseln, HTML bleibt!
11
![Page 17: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/17.jpg)
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
![Page 18: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/18.jpg)
”Coding is going to be the literacy of the 21st Century.“
ZACH SIMS Co-Founder Codecademy
![Page 19: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/19.jpg)
Es kann unsere Arbeitsweise verbessern!
13
![Page 20: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/20.jpg)
Es kann unsere Arbeitsweise verbessern!
13
Heutige Arbeitsweise
Technisch umsetzen
Anforderungen klären
Wireframes erstellen
Screens erstellen
![Page 21: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/21.jpg)
Es kann unsere Arbeitsweise verbessern!
13
Heutige Arbeitsweise
Technisch umsetzen
Anforderungen klären
Wireframes erstellen
Screens erstellen
Abstrakt und statisch
AbstraktAbstrakt und statisch
![Page 22: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/22.jpg)
Es kann unsere Arbeitsweise verbessern!
13
Heutige Arbeitsweise
Technisch umsetzen
Anforderungen klären
Wireframes erstellen
Screens erstellen
Abstrakt und statisch
AbstraktAbstrakt und statisch
Echt Aber
anders
![Page 23: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/23.jpg)
Es kann unsere Arbeitsweise verbessern!
14
Zukünftige Arbeitsweise
![Page 24: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/24.jpg)
Es kann unsere Arbeitsweise verbessern!
14
Zukünftige Arbeitsweise
Statische Dokumente
• Brief • User Journeys • Sketching • Look & Feel
![Page 25: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/25.jpg)
Es kann unsere Arbeitsweise verbessern!
14
Zukünftige Arbeitsweise
Statische Dokumente
• Brief • User Journeys • Sketching • Look & Feel
Prototypen
Wireframes in HTML + CSS
Layout in HTML + CSS
![Page 26: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/26.jpg)
Es kann unsere Arbeitsweise verbessern!
14
Zukünftige Arbeitsweise
Statische Dokumente
• Brief • User Journeys • Sketching • Look & Feel
Prototypen
Wireframes in HTML + CSS
Layout in HTML + CSS
![Page 27: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/27.jpg)
Es kann unsere Arbeitsweise verbessern!
14
Zukünftige Arbeitsweise
Statische Dokumente
• Brief • User Journeys • Sketching • Look & Feel
Prototypen
Wireframes in HTML + CSS
Layout in HTML + CSS
Website
Entwicklung
![Page 28: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/28.jpg)
Es kann unsere Arbeitsweise verbessern!
14
Zukünftige Arbeitsweise
Statische Dokumente
• Brief • User Journeys • Sketching • Look & Feel
Prototypen
Wireframes in HTML + CSS
Layout in HTML + CSS
Website
Entwicklung
![Page 29: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/29.jpg)
Ende der Einführung. Fragen?
15
![Page 30: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/30.jpg)
Agenda
✓ Einführung
• HTML-Grundlagen
• CSS-Grundlagen
• Bootstrap
• Ausblick
16
![Page 31: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/31.jpg)
HTML-Grundlagen
17
![Page 32: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/32.jpg)
HTML: Aufbau und Inhalte einer Website
18
![Page 33: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/33.jpg)
Interaktiv: Layout-Elemente kennenlernen
19
![Page 34: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/34.jpg)
HTML: Layout-Elemente
20
![Page 35: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/35.jpg)
HTML: Layout-Elemente
• header, footer, aside, nav, main, article, section:"Sectioning elements" gruppieren inhaltlich
20
![Page 36: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/36.jpg)
HTML: Layout-Elemente
• header, footer, aside, nav, main, article, section:"Sectioning elements" gruppieren inhaltlich
• main: Einzigartig! Hauptinhalte kommen hier rein.
20
![Page 37: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/37.jpg)
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
![Page 38: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/38.jpg)
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
![Page 39: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/39.jpg)
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
![Page 40: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/40.jpg)
Interaktiv: Inhaltselemente kennenlernen
21
![Page 41: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/41.jpg)
HTML: Inhaltselemente – Textinhalte
• h1, h2: Heading. Pro section ein neues h1.
• p: Absatz ("paragraph")
• a: Link ("anchor"). Darf weitere Inhalte enthalten.
22
![Page 42: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/42.jpg)
HTML: Inhaltselemente – Weitere Inhalte
23
![Page 43: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/43.jpg)
HTML: Inhaltselemente – Weitere Inhalte
• img: "image" – Bildelement
23
![Page 44: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/44.jpg)
HTML: Inhaltselemente – Weitere Inhalte
• img: "image" – Bildelement
• ul, ol: "unordered/ordered list" – eine Liste mit Bulletpoints oder Nummerierungen.Darf nur li-Elemente enthalten.
23
![Page 45: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/45.jpg)
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
![Page 46: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/46.jpg)
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
![Page 47: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/47.jpg)
Fragen soweit?
24
![Page 48: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/48.jpg)
HTML: Syntax
25
![Page 49: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/49.jpg)
Tags
<p>Das ist mein Absatz</p>
26
![Page 50: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/50.jpg)
Tags
<p>Das ist mein Absatz</p>
Opening <tag> Closing </tag>
26
![Page 51: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/51.jpg)
Tags
<p>Das ist mein Absatz</p>
Opening <tag> Closing </tag>
26
• Layout-Elemente haben "opening" und "closing tags".
![Page 52: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/52.jpg)
Tags
<p>Das ist mein Absatz</p>
Opening <tag> Closing </tag>
26
• Layout-Elemente haben "opening" und "closing tags".
• Ermöglicht Verschachtelung
![Page 53: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/53.jpg)
Tags
<p>Das ist mein Absatz</p>
Opening <tag> Closing </tag>
26
• Layout-Elemente haben "opening" und "closing tags".
• Ermöglicht Verschachtelung
• Es gibt Elemente ohne "closing tags". z.B. <img>
![Page 54: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/54.jpg)
Tags: Verschachtelung
27
<article> <h1>Welcome</h1> <p>Das ist mein Absatz, der <em>auch</em> verschachtelte Elemente enthält.</p></article>
![Page 55: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/55.jpg)
Tags: Verschachtelung
27
<article> <h1>Welcome</h1> <p>Das ist mein Absatz, der <em>auch</em> verschachtelte Elemente enthält.</p></article>
Opening <article>
Closing <article>
![Page 56: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/56.jpg)
Tags: Verschachtelung
27
<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>
![Page 57: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/57.jpg)
Tags: Verschachtelung
27
<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>
![Page 58: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/58.jpg)
Tags: Verschachtelung
27
<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>
![Page 59: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/59.jpg)
28
Attribute
<img src="img/logo.png">
![Page 60: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/60.jpg)
28
Attribute
<img src="img/logo.png">
attribute = Eigenschaft
![Page 61: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/61.jpg)
28
Attribute
<img src="img/logo.png">
attribute = Eigenschaft
"value" = Wert der Eigenschaft
![Page 62: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/62.jpg)
28
Attribute
<img src="img/logo.png">
attribute = Eigenschaft
"value" = Wert der Eigenschaft
• Elemente haben unterschiedliche attributes
![Page 63: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/63.jpg)
28
Attribute
<img src="img/logo.png">
attribute = Eigenschaft
"value" = Wert der Eigenschaft
• Elemente haben unterschiedliche attributes
• Es gibt attributes ohne valuez.B. <input type="email" required>
![Page 64: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/64.jpg)
29
Attribute: Wichtige
![Page 65: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/65.jpg)
29
Attribute: Wichtige
<input id="i-am-unique">
![Page 66: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/66.jpg)
29
Attribute: Wichtige
<input id="i-am-unique">
Kennzeichnet ein zwingend einzigartiges Element, z.B. input im Formular; #jumpmark im gleichen Dokument
![Page 67: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/67.jpg)
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>
![Page 68: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/68.jpg)
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.
![Page 69: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/69.jpg)
Attribute: Beispiele
30
![Page 70: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/70.jpg)
Attribute: Beispiele
30
<img src="img/my-dog.jpg" alt="Caja">
![Page 71: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/71.jpg)
Attribute: Beispiele
30
<img src="img/my-dog.jpg" alt="Caja"><a href="contact.html">Contact</a>
![Page 72: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/72.jpg)
Attribute: Beispiele
30
<img src="img/my-dog.jpg" alt="Caja"><a href="contact.html">Contact</a><a href="http://google.com" target="_blank">Leave</a>
![Page 73: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/73.jpg)
Attribute: Beispiele
30
<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>
![Page 74: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/74.jpg)
Attribute: Beispiele
30
<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"
![Page 75: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/75.jpg)
Attribute: Beispiele
30
<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="[email protected]" required>
![Page 76: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/76.jpg)
Attribute: Beispiele
30
<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="[email protected]" required><script src="js/scripts.js"></script>
![Page 77: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/77.jpg)
Attribute: Beispiele
30
<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="[email protected]" required><script src="js/scripts.js"></script>
• Die Attribute von allen Elementen findet ihr unter MDN (Mozilla Developer Network)
![Page 79: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/79.jpg)
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
![Page 80: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/80.jpg)
HTML: Dokument erstellen
33
![Page 81: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/81.jpg)
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
![Page 82: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/82.jpg)
Interaktiv: Dokument erstellen
35
rohrpostix ☛ Daten/Transfer/Developing UXD/ kopieren! Dann Schreibtisch ☛ Developing UXD/exercises/01_html_start öffnen
![Page 83: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/83.jpg)
Dokument erstellen
36
![Page 84: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/84.jpg)
Dokument erstellen
• Mit Emmet: html:5Tab
36
![Page 85: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/85.jpg)
Dokument erstellen
• Mit Emmet: html:5Tab
• HTML5 Doctype: <!doctype html>
36
![Page 86: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/86.jpg)
Dokument erstellen
• Mit Emmet: html:5Tab
• HTML5 Doctype: <!doctype html>
• head: Metadaten, Dokumenttitel, Link zu Stylesheets
36
![Page 87: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/87.jpg)
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
![Page 88: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/88.jpg)
Interaktiv: HTML schreiben
37
![Page 89: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/89.jpg)
Weitere Ressourcen
38
![Page 90: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/90.jpg)
Weitere Ressourcen
• codecademy.com – kostenloser Onlinekurs
38
![Page 91: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/91.jpg)
Weitere Ressourcen
• codecademy.com – kostenloser Onlinekurs
• developer.mozilla.org – MDN: alles zu HTML und CSS
38
![Page 92: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/92.jpg)
Weitere Ressourcen
• codecademy.com – kostenloser Onlinekurs
• developer.mozilla.org – MDN: alles zu HTML und CSS
• stackoverflow.com – Fragen und Antworten
38
![Page 93: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/93.jpg)
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
![Page 94: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/94.jpg)
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
![Page 95: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/95.jpg)
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
![Page 96: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/96.jpg)
Das ist HTML. Fragen?
39
![Page 97: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/97.jpg)
Agenda
✓ Einführung
✓ HTML-Grundlagen
• CSS-Grundlagen
• Bootstrap
• Ausblick
40
![Page 98: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/98.jpg)
CSS-Grundlagen
41
![Page 99: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/99.jpg)
CSS: Elemente finden und stylen
42
![Page 100: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/100.jpg)
Selektoren: class
43
<img src="img/logo.png" alt="IA Konferenz">
![Page 101: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/101.jpg)
Selektoren: class
43
<img src="img/logo.png" alt="IA Konferenz">
Nicht jedes <img> soll gleich gestylt werden
![Page 102: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/102.jpg)
Selektoren: class
43
<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">
![Page 103: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/103.jpg)
Selektoren: class
43
<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
![Page 104: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/104.jpg)
44
<img class="logo" src="img/logo.png" alt="IA Konferenz">
Selektoren: class
![Page 105: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/105.jpg)
.logo { width: 200px; height: 100px; }
44
<img class="logo" src="img/logo.png" alt="IA Konferenz">
Selektoren: class
![Page 106: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/106.jpg)
.logo { width: 200px; height: 100px; }
44
.class-selector beginnt immer mit einem Punkt.
<img class="logo" src="img/logo.png" alt="IA Konferenz">
Selektoren: class
![Page 107: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/107.jpg)
.logo { width: 200px; height: 100px; }
44
.class-selector beginnt immer mit einem Punkt.
<img class="logo" src="img/logo.png" alt="IA Konferenz">
• Wir verwenden (fast) immer .class-Selektoren!
Selektoren: class
![Page 108: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/108.jpg)
.logo { width: 200px; height: 100px; }
45
Selektoren: class
![Page 109: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/109.jpg)
.logo { width: 200px; height: 100px; }
45
Eine "declaration" besteht
aus property und value.
Selektoren: class
![Page 110: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/110.jpg)
.logo { width: 200px; height: 100px; }
45
:
Eine "declaration" besteht
aus property und value.
Selektoren: class
![Page 111: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/111.jpg)
.logo { width: 200px; height: 100px; }
45
:
Eine "declaration" besteht
aus property und value.
;
Selektoren: class
![Page 112: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/112.jpg)
.logo { width: 200px; height: 100px; }
45
:
Eine "declaration" besteht
aus property und value.
; selector und
{ declaration block }
bilden ein "Rule Set"
Selektoren: class
![Page 114: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/114.jpg)
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
![Page 115: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/115.jpg)
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
![Page 116: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/116.jpg)
CSS: Wichtige Konzepte
49
![Page 117: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/117.jpg)
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
![Page 118: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/118.jpg)
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
![Page 119: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/119.jpg)
Demonstration: Block- und Inline-Elemente
51
![Page 120: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/120.jpg)
CSS: Box Model
52
![Page 121: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/121.jpg)
CSS: Box Model
52
Element
Element
![Page 122: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/122.jpg)
CSS: Box Model
52
Padding
Element
Element
![Page 123: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/123.jpg)
CSS: Box Model
52
BorderPadding
Element
Element
![Page 124: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/124.jpg)
CSS: Box Model
Margin
52
BorderPadding
Element
Element
![Page 125: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/125.jpg)
Margin
53
BorderPadding
Element
Element
CSS: Box Model
![Page 126: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/126.jpg)
Demonstration: Box Model
54
![Page 127: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/127.jpg)
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
![Page 128: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/128.jpg)
Border, Margin und Padding: Werte
56
margin: 5px 10px 20px 3px;
![Page 129: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/129.jpg)
Border, Margin und Padding: Werte
56
margin: 5px 10px 20px 3px;
Oben
![Page 130: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/130.jpg)
Border, Margin und Padding: Werte
56
margin: 5px 10px 20px 3px;
Oben Rechts
![Page 131: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/131.jpg)
Border, Margin und Padding: Werte
56
margin: 5px 10px 20px 3px;
Oben
Unten
Rechts
![Page 132: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/132.jpg)
Border, Margin und Padding: Werte
56
margin: 5px 10px 20px 3px;
Oben
Unten
Rechts
Links
![Page 133: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/133.jpg)
Border, Margin und Padding: Werte
56
margin: 5px 10px 20px 3px;
Oben
Unten
Rechts
Links
margin-top: 5px; margin-right: 10px; margin-bottom: 20px; margin-left: 3px;
![Page 134: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/134.jpg)
57
Border, Margin und Padding: Werte
![Page 135: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/135.jpg)
57
margin: 5px 10px 20px 3px; Oben UntenRechts Links
Border, Margin und Padding: Werte
![Page 136: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/136.jpg)
57
margin: 5px 10px 20px 10px;
margin: 5px 10px 20px 3px; Oben UntenRechts Links
Border, Margin und Padding: Werte
![Page 137: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/137.jpg)
57
margin: 5px 10px 20px 10px;
margin: 5px 10px 5px 10px;
margin: 5px 10px 20px 3px; Oben UntenRechts Links
Border, Margin und Padding: Werte
![Page 138: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/138.jpg)
57
margin: 5px 10px 20px 10px;
margin: 5px 10px 5px 10px;
margin: 5px 5px 5px 5px;
margin: 5px 10px 20px 3px; Oben UntenRechts Links
Border, Margin und Padding: Werte
![Page 139: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/139.jpg)
Interaktiv: CSS schreiben
58
03_css_start
![Page 140: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/140.jpg)
Weitere Ressourcen
59
![Page 141: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/141.jpg)
Weitere Ressourcen
• css-tricks.com – CSS Tutorials und Tipps
59
![Page 142: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/142.jpg)
Weitere Ressourcen
• css-tricks.com – CSS Tutorials und Tipps
• developer.mozilla.org – alles zu HTML und CSS
59
![Page 143: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/143.jpg)
Weitere Ressourcen
• css-tricks.com – CSS Tutorials und Tipps
• developer.mozilla.org – alles zu HTML und CSS
• stackoverflow.com – Fragen und Antworten
59
![Page 144: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/144.jpg)
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
![Page 145: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/145.jpg)
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
![Page 146: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/146.jpg)
Das ist CSS. Fragen?
60
![Page 147: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/147.jpg)
Agenda
✓ Einführung
✓ HTML-Grundlagen
✓ CSS-Grundlagen
• Bootstrap
• Ausblick
61
![Page 148: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/148.jpg)
Bootstrap
62
![Page 149: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/149.jpg)
Bootstrap: Was ist das?
63
![Page 150: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/150.jpg)
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
64
Was ist Bootstrap?
![Page 151: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/151.jpg)
Wie funktioniert Bootstrap?
65
![Page 152: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/152.jpg)
Wie funktioniert Bootstrap?
• Verknüpfung: von Bootstrap-CSS sowie -JS mit dem eigenen HTML
65
![Page 153: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/153.jpg)
Wie funktioniert Bootstrap?
• Verknüpfung: von Bootstrap-CSS sowie -JS mit dem eigenen HTML
• Automatisches Styling: von Typographie und Links
65
![Page 154: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/154.jpg)
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
![Page 156: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/156.jpg)
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
![Page 157: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/157.jpg)
Bootstrap: das Grid
68
![Page 158: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/158.jpg)
Bootstrap: Grid
69
![Page 159: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/159.jpg)
Bootstrap: Grid
• Grid-System für Adaptive und Responsive Web Design
69
![Page 160: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/160.jpg)
Bootstrap: Grid
• Grid-System für Adaptive und Responsive Web Design
• Ist standardmäßig mobile first („scale up“)
69
![Page 161: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/161.jpg)
Bootstrap: Grid
• Grid-System für Adaptive und Responsive Web Design
• Ist standardmäßig mobile first („scale up“)
• Funktioniert über verschachtelte Klassen
69
![Page 162: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/162.jpg)
Bootstrap: Grid
1. Klasse containercontainer (fixed-width für Adaptive-Verhalten) oder container-fluid (full-width für Fluid-Verhalten)
70
![Page 163: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/163.jpg)
Bootstrap: Grid
1. Klasse containercontainer (fixed-width für Adaptive-Verhalten) oder container-fluid (full-width für Fluid-Verhalten)
70
<div class="container-fluid"> </div>
![Page 164: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/164.jpg)
2. Klasse rowum Elemente nebeneinander anzuordnen
71
Bootstrap: Grid
![Page 165: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/165.jpg)
2. Klasse rowum Elemente nebeneinander anzuordnen
71
<div class="container-fluid"> <div class="row"> </div> </div>
Bootstrap: Grid
![Page 166: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/166.jpg)
3. Klasse column (z.B. col-sm-6) für die Definition der Spaltenbreite, basierend auf einem 12-spaltigen Grid-System
72
Bootstrap: Grid
![Page 167: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/167.jpg)
3. Klasse column (z.B. col-sm-6) für die Definition der Spaltenbreite, basierend auf einem 12-spaltigen Grid-System
72
<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>
Bootstrap: Grid
![Page 168: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/168.jpg)
<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
![Page 169: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/169.jpg)
<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
Halbe Reihe Halbe Reihe
Bootstrap: Grid
![Page 170: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/170.jpg)
Bootstrap Grid: Columns
74
Extra smalldevices
Phones<768px
.col-xs-
Smalldevices
Tablets ≥768px
.col-sm-
Medium devices
Desktops≥992px
.col-md-
Large devices
Desktops≥1200px
.col-lg-
![Page 171: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/171.jpg)
Bootstrap Grid: Columns
74
Extra smalldevices
Phones<768px
.col-xs-
Smalldevices
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.
![Page 172: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/172.jpg)
Bootstrap Grid: Columns mit Versatz
75
4 Spalten 4 Spalten
![Page 173: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/173.jpg)
Bootstrap Grid: Columns mit Versatz
75
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>
![Page 174: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/174.jpg)
Bootstrap Grid: Columns mit Versatz
75
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
![Page 175: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/175.jpg)
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!
![Page 176: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/176.jpg)
Interaktiv: Bootstrap kennenlernen
77
![Page 177: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/177.jpg)
Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download unter http://getbootstrap.com/
78
downloads / bootstrap-3.3.0-distDieses, bitte!
![Page 178: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/178.jpg)
Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download unter http://getbootstrap.com/
79
![Page 179: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/179.jpg)
Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download • Schritt 2: Dateistruktur anlegen
Lokaler Ordner
![Page 180: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/180.jpg)
Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download • Schritt 2: Dateistruktur anlegen
Lokaler Ordnergetbootstrap.com
css/bootstrap.css fonts js/bootstrap.js
css/ Neuer Ordner: fonts Neuer Ordner: js
![Page 181: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/181.jpg)
Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download • Schritt 2: Dateistruktur anlegen
Lokaler Ordnergetbootstrap.com
css/bootstrap.css fonts js/bootstrap.js
css/ Neuer Ordner: fonts Neuer Ordner: js
jquery.com
jquery.js In den js-Ordner
![Page 182: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/182.jpg)
Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download • Schritt 2: Dateistruktur anlegen
Lokaler Ordnergetbootstrap.com
css/bootstrap.css fonts js/bootstrap.js
css/ Neuer Ordner: fonts Neuer Ordner: js
jquery.com
jquery.js In den js-Ordnerimsky.github.io/holder/
holder.js In den js-Ordner
![Page 183: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/183.jpg)
Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download • Schritt 2: Dateistruktur anlegen • Schritt 3: Dateien verknüpfen
81
![Page 184: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/184.jpg)
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
![Page 185: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/185.jpg)
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
![Page 186: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/186.jpg)
Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download • Schritt 2: Dateistruktur anlegen • Schritt 3: Dateien verknüpfen • Schritt 4: Layout-Elemente einfügen
84
z. B. Header, Primärnavigation, Hauptcontent, Marginalspalte und Footer
![Page 187: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/187.jpg)
85
Erforderlich: Viewport meta Tag im head
<meta name="viewport" content="width=device-width,
initial-scale=1">
Ermöglicht Responsive Web Designauf mobilen Geräten
![Page 188: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/188.jpg)
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
![Page 189: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/189.jpg)
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
mit Hilfe der Bootstrap-Doku
![Page 190: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/190.jpg)
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
![Page 191: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/191.jpg)
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
mit Hilfe der Code-Snippets aus der Bootstrap-Doku
![Page 192: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/192.jpg)
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
![Page 193: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/193.jpg)
Los gehts!
89
05_bootstrap_start
![Page 194: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/194.jpg)
Inhaltselemente: Main navigation
90
![Page 195: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/195.jpg)
Inhaltselemente: Main navigation
• Nav-Style
90
![Page 196: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/196.jpg)
Inhaltselemente: Main navigation
• Nav-Style
• Ausrichtung
90
![Page 197: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/197.jpg)
Inhaltselemente: Main navigation
• Nav-Style
• Ausrichtung
• Textgröße
90
![Page 198: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/198.jpg)
Inhaltselemente: Main navigation
• Nav-Style
• Ausrichtung
• Textgröße
• Abstand nach unten
90
![Page 199: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/199.jpg)
Inhaltselemente: weitere Stylings
91
![Page 200: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/200.jpg)
Inhaltselemente: weitere Stylings
• Breadcrumb
91
![Page 201: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/201.jpg)
Inhaltselemente: weitere Stylings
• Breadcrumb
• Buttons: aus dem Download-Link und dem „Buy now“-Link
91
![Page 202: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/202.jpg)
Inhaltselemente: weitere Stylings
• Breadcrumb
• Buttons: aus dem Download-Link und dem „Buy now“-Link
• Kleinere Headlines im Aside
91
![Page 203: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/203.jpg)
Inhaltselemente: weitere Stylings
• Breadcrumb
• Buttons: aus dem Download-Link und dem „Buy now“-Link
• Kleinere Headlines im Aside
• Liste ohne Bulletpoints im Aside
91
![Page 204: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/204.jpg)
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
![Page 205: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/205.jpg)
Bootstrap: Was noch zu sagen ist.
92
![Page 207: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/207.jpg)
Warum Bootstrap?
94
![Page 208: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/208.jpg)
Warum Bootstrap?
• Gute Dokumentation
94
![Page 209: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/209.jpg)
Warum Bootstrap?
• Gute Dokumentation
• Große Community
94
![Page 210: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/210.jpg)
Warum Bootstrap?
• Gute Dokumentation
• Große Community
• Viele UI-Elemente
94
![Page 211: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/211.jpg)
Warum Bootstrap?
• Gute Dokumentation
• Große Community
• Viele UI-Elemente
• Responsive Web Design als Standard
94
![Page 212: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/212.jpg)
Warum Bootstrap?
• Gute Dokumentation
• Große Community
• Viele UI-Elemente
• Responsive Web Design als Standard
• Individuell anpassbar ("Customize")
94
![Page 213: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/213.jpg)
Unser Boilerplate: für euch
95
github.com/developinguxd/boilerplates
![Page 214: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/214.jpg)
Das ist Bootstrap. Noch Fragen?
96
![Page 215: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/215.jpg)
Agenda
✓ Einführung
✓ HTML-Grundlagen
✓ CSS-Grundlagen
✓ Bootstrap
• Ausblick
97
![Page 216: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/216.jpg)
Ausblick
98
![Page 217: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/217.jpg)
99
Tipps: die tägliche Arbeit
![Page 218: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/218.jpg)
• Start: Handscribbles
99
Tipps: die tägliche Arbeit
![Page 219: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/219.jpg)
• Start: Handscribbles
• Entscheidung: Ist die Projektart geeignet?
99
Tipps: die tägliche Arbeit
![Page 220: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/220.jpg)
• Start: Handscribbles
• Entscheidung: Ist die Projektart geeignet?
• Doing: Prototyping gemeinsam durch Kreation und Frontend-Entwicklung
99
Tipps: die tägliche Arbeit
![Page 221: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/221.jpg)
Weiterlernen: viele wichtige Themen
100
![Page 222: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/222.jpg)
Weiterlernen: viele wichtige Themen
100
HTML
CSS
Bootstrap
DevTools
holder.js
![Page 223: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/223.jpg)
Weiterlernen: viele wichtige Themen
100
HTML
CSS
Bootstrap
DevTools
holder.js
JavaScript
jQuery
Responsive
Mobile
![Page 224: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/224.jpg)
Weiterlernen: viele wichtige Themen
100
HTML
CSS
Bootstrap
DevTools
holder.js
GitHub
Webfonts
CodePen
Emmet
JavaScript
jQuery
Responsive
Mobile
![Page 225: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/225.jpg)
“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
![Page 226: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/226.jpg)
One more thing ...
102
![Page 227: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/227.jpg)
Developing UXD: Unsere Idee
103
![Page 228: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/228.jpg)
Developing UXD: Unsere Idee
104
![Page 229: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/229.jpg)
Developing UXD: Unsere Idee
• Fest definiertes, gemeinsames Toolset
104
![Page 230: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/230.jpg)
Developing UXD: Unsere Idee
• Fest definiertes, gemeinsames Toolset
• Moderne, erprobte Standards
104
![Page 231: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/231.jpg)
Developing UXD: Unsere Idee
• Fest definiertes, gemeinsames Toolset
• Moderne, erprobte Standards
• Vorauswahl der besten Lernressourcen
104
![Page 232: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/232.jpg)
Developing UXD: Unsere Idee
• Fest definiertes, gemeinsames Toolset
• Moderne, erprobte Standards
• Vorauswahl der besten Lernressourcen
• Lebendige Plattform
104
![Page 233: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/233.jpg)
Developing UXD: Unsere Idee
• Fest definiertes, gemeinsames Toolset
• Moderne, erprobte Standards
• Vorauswahl der besten Lernressourcen
• Lebendige Plattform
• Gemeinsam und Open Source
104
![Page 234: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/234.jpg)
Developing UXD: Unsere Idee
• Fest definiertes, gemeinsames Toolset
• Moderne, erprobte Standards
• Vorauswahl der besten Lernressourcen
• Lebendige Plattform
• Gemeinsam und Open Source
• Eigenentwicklungen
104
![Page 235: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/235.jpg)
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
![Page 236: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/236.jpg)
105
![Page 237: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/237.jpg)
developinguxd.com
105
![Page 239: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/239.jpg)
Developing UXD: Nächste Schritte
106
![Page 240: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/240.jpg)
Developing UXD: Nächste Schritte
• Die besten Lernquellen im Web
106
![Page 241: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/241.jpg)
Developing UXD: Nächste Schritte
• Die besten Lernquellen im Web
• Lernpläne
106
![Page 242: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/242.jpg)
Developing UXD: Nächste Schritte
• Die besten Lernquellen im Web
• Lernpläne
• Aufbau einer Community begeisterter UX-Designer
106
![Page 243: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/243.jpg)
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
![Page 244: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/244.jpg)
Vielen Dank! Happy coding!
107
![Page 245: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/245.jpg)
Euer Feedback: Wie wars?
108
![Page 247: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/247.jpg)
Cornelia Erbs, Jeremias Dombrowsky Lessers Passage 10 22767 Hamburg
+49 (0)151 23421980
[email protected] http://developinguxd.com/
110
![Page 249: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/249.jpg)
Backlog
112
![Page 250: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/250.jpg)
Backlog: Sublime, HTML, CSS, JS
113
![Page 251: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/251.jpg)
Backlog
• Sublime: Shortcuts
• Sublime: Emmet Shortcuts
• HTML: Formulare
• Holder.js: Img placeholders
• CSS: BEM naming convention
• jQuery und JavaScript: Einbinden und laden 114
![Page 252: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/252.jpg)
Sublime Text 3: Emmet Shortcuts
115
![Page 253: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/253.jpg)
Sublime Text 3: Emmet Shortcuts
• Selector-Syntax: e.g. article>h1+pTab wird zu<article> <h1></h1> <p></p></article>
115
![Page 254: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/254.jpg)
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
![Page 255: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/255.jpg)
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
![Page 256: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/256.jpg)
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
![Page 257: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/257.jpg)
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
![Page 258: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/258.jpg)
Sublime Text 3: Shortcuts
117
![Page 259: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/259.jpg)
Sublime Text 3: Shortcuts
• TagnameTab: Autocomplete (Mehrfach für Sprungmarken)
117
![Page 260: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/260.jpg)
Sublime Text 3: Shortcuts
• TagnameTab: Autocomplete (Mehrfach für Sprungmarken)
• Cmd+p: Fuzzy-Search für Dateien
117
![Page 261: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/261.jpg)
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
![Page 262: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/262.jpg)
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
![Page 263: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/263.jpg)
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
![Page 264: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/264.jpg)
Selektoren: BEM naming convention
118
![Page 265: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/265.jpg)
Selektoren: BEM naming convention
• .page-header: Einfacher Bindestrich bei zusammengesetzten Namen
118
![Page 266: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/266.jpg)
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
![Page 267: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/267.jpg)
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
![Page 268: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/268.jpg)
Holder.js: Img placeholders
119
![Page 269: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/269.jpg)
Holder.js: Img placeholders
• Download: http://imsky.github.io/holder/
119
![Page 270: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/270.jpg)
Holder.js: Img placeholders
• Download: http://imsky.github.io/holder/
• JavaScript im <body> laden:<script src="js/holder.js"></script>
119
![Page 271: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/271.jpg)
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
![Page 272: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/272.jpg)
Backlog: Bootstrap
120
![Page 273: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/273.jpg)
Bootstrap UI Editors
• Eine Reihe von Editoren: für unterschiedliche Ansprüche
• Siehe: http://thedesignblitz.com/the-best-bootstrap-ui-editors/
121
![Page 274: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/274.jpg)
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
![Page 275: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/275.jpg)
Backlog: Argumentationshilfe
123
![Page 276: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/276.jpg)
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
![Page 277: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/277.jpg)
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
![Page 278: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/278.jpg)
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
![Page 279: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/279.jpg)
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
![Page 280: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/280.jpg)
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
128
![Page 281: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/281.jpg)
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
![Page 282: Developing UXD - Workshop bei XING](https://reader036.vdocuments.site/reader036/viewer/2022062304/559e03b81a28ab086a8b47a7/html5/thumbnails/282.jpg)
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
130