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

<Developing UXD>So leicht ist Frontendentwicklung für

Konzepter und Designer heute

IA Konferenz 2014

Conni und Jerry: Wer wir sind

�2

Conni

Cornelia Erbs

�3

Freelancerin als Senior User Experience Architect

Davor Senior User Experience Architect für große Hamburger Agenturen

„HTML-Wireframing ist so spannend wie Rätsel lösen.“

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.“

Ziele des Workshops

�5

Ziele des Workshops

�6

Ziele des Workshops

• Quellcode lesen und verstehen

�6

Ziele des Workshops


• Die erste Hürde des Selbst-Codens nehmen

�6

Ziele des Workshops


• Die erste Hürde des Selbst-Codens nehmen

• Wissen, wie man weiter lernen kann

�6

Nach dem Workshop könnt ihr noch nicht:

�7

Axure wegschmeißenund direkt alle Wireframes per Code erzeugen.

�8

Einführung: Warum wir dazu lernen müssen

�9

Warum sollten wir HTML und CSS lernen?

�10


• Die Basis dessen, was wir gestalten, sollten wir kennen.

�10



• Zumal: Die Tools wechseln, HTML bleibt!

�10



• Zumal: Die Tools wechseln, HTML bleibt!

• Und: Eine neue Generation „native Developers“ kommt.

�10

”Coding is going to be the literacy of the 21st Century.“

ZACH SIMS Co-Founder Codecademy

Es kann unsere Arbeitsweise verbessern!

�12


�12

Heutige Arbeitsweise

Technisch umsetzen

Anforderungen klären

Wireframes erstellen

Screens erstellen


�12


Technisch umsetzen



Screens erstellen

Abstrakt und statisch

AbstraktAbstrakt und statisch


�12


Technisch umsetzen



Screens erstellen

Abstrakt und statisch

AbstraktAbstrakt und statisch

Echt Aber

anders


�13

Zukünftige Arbeitsweise


�13


Statische Dokumente

• Brief • User Journeys • Sketching • Look & Feel


�13


Statische Dokumente


Prototypen

Wireframes in HTML + CSS

Layout in HTML + CSS


�13


Statische Dokumente


Prototypen




�13


Statische Dokumente


Prototypen



Website

Entwicklung


�13


Statische Dokumente


Prototypen



Website

Entwicklung

Ende der Einführung. Fragen?

�14

Agenda

✓ Einführung

• HTML-Grundlagen

• CSS-Grundlagen

• Bootstrap

• Ausblick

�15

HTML-Grundlagen

�16

HTML: Aufbau und Inhalte einer Website

�17

Interaktiv: Layout-Elemente kennenlernen

�18

HTML: Layout-Elemente

�19


• header, footer, aside, nav, main, article, section:"Sectioning elements" gruppieren inhaltlich

�19



• main: Einzigartig! Hauptinhalte kommen hier rein.

�19




• article: Muss alleine stehen können ( RSS-Feed, Pocket)

�19





• nav: Nur für Navigation auf der Website

�19





• nav: Nur für Navigation auf der Website

• div: Gruppiert für Styling, nicht inhaltlich (semantisch)

�19

Interaktiv: Inhaltselemente kennenlernen

�20

HTML: Inhaltselemente – Textinhalte

• h1, h2: Heading. Pro section ein neues h1.

• p: Absatz ("paragraph")

• a: Link ("anchor"). Darf weitere Inhalte enthalten.

�21

HTML: Inhaltselemente – Weitere Inhalte

�22


• img: "image" – Bildelement

�22



• ul, ol: "unordered/ordered list" – eine Liste mit Bulletpoints oder Nummerierungen.Darf nur li-Elemente enthalten.

�22




• li: "List item" – darf andere Elemente enthalten.

�22




• li: "List item" – darf andere Elemente enthalten.

• audio, video, canvas, embed: Media-Inhalte

�22

Fragen soweit?

�23

HTML: Syntax

�24

Tags

<p>Das ist mein Absatz</p>

�25

Tags


Opening <tag> Closing </tag>

�25

Tags



�25

• Layout-Elemente haben "opening" und "closing tags"

Tags



�25


• Ermöglicht Verschachtelung

Tags



�25


• Ermöglicht Verschachtelung

• Elemente ohne "closing tags" heißen "Void Tags"

Tags: Verschachtelung

�26

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


�26


Opening <article>

Closing <article>


�26


Opening <article>

Closing <article>

Nested <h1>


�26


Opening <article>

Closing <article>

Nested <h1>

Nested <p>


�26


Opening <article>

Closing <article>

Nested <h1>

Nested <p>

Nested <em>

�27

Attribute

<img src="img/logo.png">

�27

Attribute


attribute = Eigenschaft

�27

Attribute



"value" = Wert der Eigenschaft

�27

Attribute




• Elemente haben unterschiedliche attributes

�27

Attribute




• Elemente haben unterschiedliche attributes

• Es gibt attributes ohne valuez.B. <input type="email" required>

�28

Attribute: Wichtige

�28

Attribute: Wichtige

<input id="i-am-unique">

�28

Attribute: Wichtige


Kennzeichnet ein zwingend einzigartiges Element, z.B. input im Formular; #jumpmark im gleichen Dokument

�28

Attribute: Wichtige



<a class="nav-link nav-link--active">Home</a>

�28

Attribute: Wichtige



<a class="nav-link nav-link--active">Home</a>

Wird fürs Styling verwendet. Elemente können mehrere "class names" enthalten.

Attribute: Beispiele

�29


�29

<img src="img/my-dog.jpg" alt="Caja">


�29

<img src="img/my-dog.jpg" alt="Caja"><a href="contact.html">Contact</a>


�29

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


�29

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


�29

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


�29

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


�29

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


�29

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

• Die Attribute von allen Elementen findet ihr unter MDN (Mozilla Developer Network)

https://developer.mozilla.org/en-US/docs/Web

Interaktiv: HTML-Elemente untersuchen

�30

HTML-Elemente untersuchen

• Google Chrome: "Chrome Developer Tools (DevTools)"

• Rechtsklick auf Element: "Element untersuchen" (Profis drücken cmd+shift+c)

• Aufklappen, Auswählen, per "Brotkrumen" navigieren

• Text ändern, Elemente verschieben und löschen

�31

HTML: Dokument erstellen

�32

Sublime Text 3 einrichten: komplett

• Download: http://www.sublimetext.com/3

• Einstellungen: "Default Settings" in "User Settings" kopieren und anpassen

• Package Control installieren für Erweiterungen

• cmd+shift+p "Package Install":Emmet, SidebarEnhancements, BracketHighlighter,Color Highlighter

�33

http://www.sublimetext.com/3

https://sublime.wbond.net/installation

Interaktiv: Dokument erstellen

�34

USB01_html_start

Dokument erstellen

�35

Dokument erstellen

• Mit Emmet: html:5Tab

�35

Dokument erstellen


• HTML5 Doctype: <!doctype html>

�35

Dokument erstellen



• head: Metadaten, Dokumenttitel, Link zu Stylesheets

�35

Dokument erstellen



• head: Metadaten, Dokumenttitel, Link zu Stylesheets

• body: Sichtbare Inhalte, Link zu JavaScripts am Ende

�35

Interaktiv: HTML schreiben

�36

Weitere Ressourcen

�37

Weitere Ressourcen

• codecademy.com – kostenloser Onlinekurs

�37

http://codecademy.com

http://developer.mozilla.org

http://stackoverflow.com

http://abookapart.com

http://html5weekly.com/

http://codepen.io

Weitere Ressourcen


• developer.mozilla.org – alles zu HTML und CSS

�37






http://codepen.io

Weitere Ressourcen



• stackoverflow.com – Fragen & Antworten

�37






http://codepen.io

Weitere Ressourcen




• abookapart.com – Bücher zu HTML5, CSS3 und mehr

�37






http://codepen.io

Weitere Ressourcen





• html5weekly.com – HTML News

�37






http://codepen.io

Weitere Ressourcen





• html5weekly.com – HTML News

• codepen.io – Online Frontend Code schreiben und teilen�37






http://codepen.io

Das ist HTML. Fragen?

�38

Agenda

✓ Einführung

✓ HTML-Grundlagen

• CSS-Grundlagen

• Bootstrap

• Ausblick

�39

CSS-Grundlagen

�40

CSS: Elemente finden und verändern

�41

Selektoren: class

�42

<img src="img/logo.png" alt="IA Konferenz">

Selektoren: class

�42


Nicht jedes <img> soll gleich gestylt werden

Selektoren: class

�42



<img class="logo" src="img/logo.png" alt="IA Konferenz">

Selektoren: class

�42




Durch das class-Attribut können wir das Element stylen

Selektoren: class

�43


.logo { width: 200px; height: 100px; }

Selektoren: class

�43



Selektoren: class

�43

.class-selector beginnt immer mit einem Punkt (.logo).



Selektoren: class

�43

.class-selector beginnt immer mit einem Punkt (.logo).


• Wir verwenden (fast) immer .class-Selektoren!


Selektoren: class

�44


Selektoren: class

�44

Eine "declaration" besteht

aus property und value.


Selektoren: class

�44

:




Selektoren: class

�44

:



;


Selektoren: class

�44

:



; selector und

{ declaration block }

bilden ein "Rule Set"

Interaktiv: CSS untersuchen

�45

CSS untersuchen

• Element auswählen, Declarations ein- und ausschalten, Werte ändern (auch mit Pfeiltasten und Shift)

• Element auswählen, class-Attribut hinzufügen und entfernen

�46

CSS: Learnings durch DevTools

• h1: "Element-Selektoren" nur für sehr allgemeine Styles, sind weniger spezifisch als Klassen.

• h1, .main-headline: Ein Rule Set kann mehrere kommagetrennte Selektoren haben.

• .page-nav .page-nav__link: Mehrteilige Selektoren sind spezifischer. Hohe Spezifität ist schwer überschreibbar.

• #register: Ids haben höhere Spezifität als Klassen.

�47

CSS: Wichtige Konzepte

�48

CSS: Block- und Inline-Elemente

�49

Block-Elemente

Nehmen sich immer die ganze verfügbare Breite. z. B. h1, p, ul, li, div

CSS: Block- und Inline-Elemente

�49

Block-Elemente

Nehmen sich immer die ganze verfügbare Breite. z. B. h1, p, ul, li, div

Inline-Elemente

Teilen sich eine Zeile.z. B. a, em, img, span

Demonstration: Block- und Inline-Elemente

�50

CSS: Box Model

�51

CSS: Box Model

�51

Element

Element

CSS: Box Model

�51

Padding

Element

Element

CSS: Box Model

�51

BorderPadding

Element

Element

CSS: Box Model

Margin

�51

BorderPadding

Element

Element

Demonstration: Box Model

�52

CSS: Learnings Boxmodel

• Browser geben den Elementen Standard-Styles.

• padding wird auf die width und height draufgerechnet

• Inline-Elemente bekommen kein margin-top und margin-bottom.

• margin-left: auto; margin-right: auto; zentriert Block-Elemente horizontal.

�53

Border, Margin und Padding: Werte

�54

margin: 5px 10px 20px 3px;


�54


Oben


�54


Oben Rechts


�54


Oben

Unten

Rechts


�54


Oben

Unten

Rechts

Links


�54


Oben

Unten

Rechts

Links

margin-top: 5px; margin-right: 10px; margin-bottom: 20px; margin-left: 3px;


�55


�55

margin: 5px 10px 20px 3px; Oben UntenRechts Links


�55




�55





�55





Interaktiv: CSS schreiben

�56

USB03_css_start

Weitere Ressourcen

�57

Weitere Ressourcen

• css-tricks.com – CSS Tutorials und Tipps

�57

http://css-tricks.com



http://shop.smashingmagazine.com


http://codepen.io

Weitere Ressourcen



�57






http://codepen.io

Weitere Ressourcen




�57






http://codepen.io

Weitere Ressourcen




• shop.smashingmagazine.com – Smashing Library

�57






http://codepen.io

Weitere Ressourcen






�57






http://codepen.io

Weitere Ressourcen






• codepen.io – Online Frontend Code schreiben und teilen�57






http://codepen.io

Das ist CSS. Fragen?

�58

Agenda

✓ Einführung

✓ HTML-Grundlagen

✓ CSS-Grundlagen

• Bootstrap

• Ausblick

�59

Bootstrap

�60

Bootstrap: Was ist das?

�61

�62

The most popular front-end framework for developing responsive, mobile first projects on the web.

Was ist Bootstrap?

�62

„Millions of amazing sites across the web are being built with Bootstrap.“


Was ist Bootstrap?

�62


Sammlung von HTML, CSS und JS


Was ist Bootstrap?

�62

NEU in Bootstrap 3


Sammlung von HTML, CSS und JS


Was ist Bootstrap?

Wie funktioniert Bootstrap?

�63


• Verknüpfung: von Bootstrap-CSS sowie -JS mit dem eigenen HTML

�63



• Automatisches Styling: von Typographie und Links

�63



• Automatisches Styling: von Typographie und Links

• Spezielles Styling: über das Einfügen von Klassen

�63

Demonstration: Das ist Bootstrap.

�64

Bootstrap: CSS und Components

�65

CSS

Typography Code Tables Forms Buttons Images Helper Classes Responsive Utilities

Components

Glyphicons Dropdowns Button groups Button dropdowns Input groups Navs Navbar Breadcrumbs Paginations Labels

Badges Jumbotron Page header Thumbnails Alerts Progress bars Media object List group Panels Wells

Bootstrap: das Grid

�66

Bootstrap: Grid

�67

Bootstrap: Grid

• Grid-System für Adaptive und Responsive Web Design

�67

Bootstrap: Grid


• Ist standardmäßig mobile first („scale up“)

�67

Bootstrap: Grid


• Ist standardmäßig mobile first („scale up“)

• Funktioniert über verschachtelte Klassen

�67

Bootstrap: Grid

1. Klasse „Container“ .container (fixed-width für Adaptive-Verhalten) oder .container-fluid (full-width für Fluid-Verhalten)

�68

Bootstrap: Grid

1. Klasse „Container“ .container (fixed-width für Adaptive-Verhalten) oder .container-fluid (full-width für Fluid-Verhalten)

�68

<div class="container-fluid"> </div>

Bootstrap: Grid

2. Klasse „Row“ um Elemente nebeneinander anzuordnen

�69

Bootstrap: Grid

2. Klasse „Row“ um Elemente nebeneinander anzuordnen

�69

<div class="container-fluid"> <div class="row"> </div> </div>

Bootstrap: Grid

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

�70

Bootstrap: Grid

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

�70

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


Bootstrap: Grid

�71

1. Container

2. Row

3. Columns


Bootstrap: Grid

�71

1. Container

2. Row

3. Columns

Halbe Reihe Halbe Reihe

Bootstrap Grid: Columns

�72

Extra smalldevices

Phones

<768px

.col-xs-

Smalldevices

Tablets

≥768px

.col-sm-

Medium devices

Desktops

≥992px

.col-md-

Large devices

Desktops

≥1200px

.col-lg-

Bootstrap Grid: Columns

�72

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.

Bootstrap Grid: Columns mit Versatz

�73

4 Spalten 4 Spalten


�73

4 Spalten 4 Spalten

<div class="container-fluid"> <div class="row"> <div class=„col-md-4“>4 Spalten</div> <div class=„col-md-4 col-md-offset-4“>4 Spalten</div> </div> </div>


�73

4 Spalten 4 Spalten

<div class="container-fluid"> <div class="row"> <div class=„col-md-4“>4 Spalten</div> <div class=„col-md-4 col-md-offset-4“>4 Spalten</div> </div> </div> Offset

Responsive und Mobile first: nicht heute

• Bootstrap ist von Haus aus responsive.

• Spezielle Elemente:

• Responsive tables

• Responsive images

• Responsive Utilities(Sichtbarkeit toggeln)

�74

Zu viele Themen!

Interaktiv: Bootstrap kennenlernen

�75

Bootstrap: Loslegen in 6 Schritten

• Schritt 1: Download unter http://getbootstrap.com/

�76

http://getbootstrap.com/



�76




�76

USBdownloads / bootstrap-3.1.1-dist

Dieses, bitte!




�77



• Schritt 1: Download • Schritt 2: Dateistruktur anlegen



getbootstrap.com

css/bootstrap.css fonts js/bootstrap.js



getbootstrap.com


Lokaler Ordner

css/ Neuer Ordner: fonts Neuer Ordner: js



getbootstrap.com


Lokaler Ordner


jquery.com

jquery.js



getbootstrap.com


Lokaler Ordner


jquery.com

jquery.js In den js-Ordner


• Schritt 1: Download • Schritt 2: Dateistruktur anlegen USB

05_bootstrap_start

getbootstrap.com


Lokaler Ordner


jquery.com

jquery.js In den js-Ordner


• Schritt 1: Download • Schritt 2: Dateistruktur anlegen • Schritt 3: Dateien verknüpfen

�79


• Schritt 1: Download • Schritt 2: Dateistruktur anlegen • Schritt 3: Dateien verknüpfen: (a) CSS

�80

bootstrap.css im head VOR dem eigenen CSS


• Schritt 1: Download • Schritt 2: Dateistruktur anlegen • Schritt 3: Dateien verknüpfen: (b) JS

�81

.js am Ende des bodys


• Schritt 1: Download • Schritt 2: Dateistruktur anlegen • Schritt 3: Dateien verknüpfen • Schritt 4: Layout-Elemente einfügen

�82

z. B. Header, Primärnavigation, Hauptcontent, Marginalspalte und Footer

�X

Erforderlich: Viewport Meta Tag im head

<meta name="viewport" content="width=device-width,

initial-scale=1">

Ermöglicht Responsive Web Designauf mobilen Geräten


• Schritt 1: Download • Schritt 2: Dateistruktur anlegen • Schritt 3: Dateien verknüpfen • Schritt 4: Layout-Elemente einfügen • Schritt 5: Grid anlegen

�83


• Schritt 1: Download • Schritt 2: Dateistruktur anlegen • Schritt 3: Dateien verknüpfen • Schritt 4: Layout-Elemente einfügen • Schritt 5: Grid anlegen

�83

mit Hilfe der Bootstrap-Doku


• Schritt 1: Download • Schritt 2: Dateistruktur anlegen • Schritt 3: Dateien verknüpfen • Schritt 4: Layout-Elemente einfügen • Schritt 5: Grid anlegen • Schritt 6: Inhaltselemente anlegen und stylen

�84



�84

mit Hilfe der Code-Snippets aus der Bootstrap-Doku



�85

Bootstrap: Grid anlegen für main

�86

USB05_bootstrap_start


• container und row sind bereits da

�86




• Section „Jump Marks“ und „Articles“: col-sm-7

�86




• Section „Jump Marks“ und „Articles“: col-sm-7

• Aside: col-sm-4 und col-sm-offset-1

�86


Bootstrap: Inhaltselemente stylen

�87


�87

• Link „Einreichungsformular“: grüner ButtonLink „Tickets kaufen“: großer, orangener Button


�87


• Meta nav: „list-inline“ anordnen und „pull-right“ ausrichten


�87



• Main navigation: gewünschte „nav“ hinzufügen (z. B. „Pills“), ausrichten („justified“), größere Schrift (z. B. „lead“)„IAK 2014“ ist „active“


�87



• Main navigation: gewünschte „nav“ hinzufügen (z. B. „Pills“), ausrichten („justified“), größere Schrift (z. B. „lead“)„IAK 2014“ ist „active“

• Footer-Link: rechtsausgerichtetes Icon

Inhaltselemente: weitere Stylings

�88


• Liste in Main aside: ohne Bulletpoints („unstyled“)

�88



• Jump Marks: kleinere Textgröße

�88



• Jump Marks: kleinere Textgröße

• Headlines in Articles und Aside: kleinere Textgröße

�88

Bootstrap: Was noch zu sagen ist.

�89

Demonstration: JavaScript mit Bootstrap

�90

Warum Bootstrap?

�91

Warum Bootstrap?

• Gute Dokumentation

�91

Warum Bootstrap?


• Große Community

�91

Warum Bootstrap?



• Viele UI-Elemente

�91

Warum Bootstrap?




• Responsive Web Design als Standard

�91

Warum Bootstrap?




• Responsive Web Design als Standard

• Individuell anpassbar ("Customize")

�91

Unser erstes Boilerplate: für euch

�92

github.com/developinguxd/boilerplates

Das ist Bootstrap. Noch Fragen?

�93

Agenda

✓ Einführung

✓ HTML-Grundlagen

✓ CSS-Grundlagen

✓ Bootstrap

• Ausblick

�94

Ausblick

�95

�96

Tipps: die tägliche Arbeit

• Start: Handscribbles

�96



• Entscheidung: Ist die Projektart geeignet?

�96




• Doing: Prototyping gemeinsam durch Kreation und Frontend-Entwicklung

�96




• Doing: Prototyping gemeinsam durch Kreation und Frontend-Entwicklung

• Ergänzende Dokumentation: via Screenshots des Prototypen im gewohnten Programm

�96


Weiterlernen: viele wichtige Themen

�97


�97

HTML

CSS

Bootstrap

DevTools


�97

JavaScript

jQuery

Sass

holder.jsHTML

CSS

Bootstrap

DevTools


�97

JavaScript

jQuery

Sass

holder.js GitHub

CodeKit

Webfonts

CodePen

HTML

CSS

Bootstrap

DevTools

“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 ...

�99

Developing UXD: Unsere Idee

�100


�101


• Fest definiertes, gemeinsames Toolset

�101



• Moderne, erprobte Standards

�101




• Vorauswahl der besten Lernressourcen

�101





• Lebendige Plattform

�101






• Gemeinsam und Open Source

�101







• Eigenentwicklungen

�101







• Eigenentwicklungen

• Unterstützung durch Frontend-Community

�101

�102

developinguxd.com

�102

developinguxd.com

�102

@developinguxd facebook.com/developinguxd [email protected]

Developing UXD: Nächste Schritte

�103


• Die besten Lernquellen im Web

�103



• Lernpläne

�103



• Lernpläne

• Aufbau einer Community begeisterter UX-Designer

�103



• Lernpläne

• Aufbau einer Community begeisterter UX-Designer

• Entwicklung von Tools für Workflow-Optimierungen

�103

Vielen Dank! Happy coding!

�104

Euer Feedback: Wie wars?

�105

developinguxd.com

�106


Cornelia Erbs, Jeremias Dombrowsky Lessers Passage 10 22767 Hamburg !

+49 (0)151 23421980 !

[email protected] http://developinguxd.com/

�107

http://developinguxd.com/

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

�108

http://iconmonstr.com/

Backlog

�110

Backlog: Sublime, HTML, CSS, JS

�111

Backlog

• Sublime: Shortcuts

• Sublime: Emmet Shortcuts

• HTML: Formulare

• Holder.js: Img placeholders

• CSS: BEM naming convention

• jQuery und JavaScript: Einbinden und laden�112

Sublime Text 3: Emmet Shortcuts

�113


• Selector-Syntax: e.g. article>h1+pTab wird zu<article> <h1></h1> <p></p></article>

�113



• Ctrl+w: "Wrap with tag"

�113




• Cmd+Shift+k: Tag ändern

�113




• Cmd+Shift+k: Tag ändern

• Cmd+': Element löschen�113

HTML: Formulare

• form: Gruppiert zusammengehörige Formularelemente, darf auch andere Elemente enthalten.

• input: Kann von unterschiedlichem Typ sein: text, email, number, tel, color, date, checkbox, radio, ...

• select: Enthält option-Elemente, die ein Dropdown bilden.

�114

Sublime Text 3: Shortcuts

�115


• TagnameTab: Autocomplete (Mehrfach für Sprungmarken)

�115

http://scotch.io/bar-talk/the-complete-visual-guide-to-sublime-text-3-getting-started-and-keyboard-shortcuts



• Cmd+p: Fuzzy-Search für Dateien

�115





• Cmd+Shift+p: Zugriff auf alle Befehle

�115






• Cmd+d: Weitere Instanz des markierten Texts auswählen

�115






• Cmd+d: Weitere Instanz des markierten Texts auswählen

• Ausführliches Tutorial auf scotch.io

�115


Selektoren: BEM naming convention

�116


• .page-header: Einfacher Bindestrich bei zusammengesetzten Namen

�116



• .page-nav, .page-nav__link: Unterelemente eines "Moduls" haben den Modulnamen als Prefix.

�116



• .page-nav, .page-nav__link: Unterelemente eines "Moduls" haben den Modulnamen als Prefix.

• .button, .button--small, .button--cancel: Varianten sind als solche erkennbar.

�116

Holder.js: Img placeholders

�117


• Download: http://imsky.github.io/holder/

�117



• JavaScript im <body> laden:<script src="js/holder.js"></script>

�117



• JavaScript im <body> laden:<script src="js/holder.js"></script>

• Einsatz:<img src="holder.js/300x200"><img src="holder.js/100x100/#000:#fff"><img src="holder.js/300x200/text:hello world"><img src="holder.js/200x200/auto/textmode:exact">

�117

Backlog: Bootstrap

�118

Bootstrap UI Editors

• Eine Reihe von Editoren: für unterschiedliche Ansprüche

• Siehe: http://thedesignblitz.com/the-best-bootstrap-ui-editors/

�119

http://thedesignblitz.com/the-best-bootstrap-ui-editors/

Bootstrap: und andere Frameworks

• Bootstrap http://twitter.github.io/bootstrap/ weit verbreitet, umfangreich

• Foundation http://foundation.zurb.com/ sehr umfangreich, komplex

• Pure http://purecss.io/ sehr schlank

• HTML Kickstart http://www.99lime.com/elements/ umfangreich, leicht

�120

http://twitter.github.io/bootstrap/

http://foundation.zurb.com/

http://purecss.io/

http://www.99lime.com/elements/

Backlog: Argumentationshilfe

�121

Backlog: Argumentationshilfe

• Vorteile von HTML-Wireframes: für Kunden

• Vorteile von HTML-Wireframes: für Agenturen

• Grenzen des statischen Designs überwinden

• Wissen aufbauen

• Zusammenarbeit verbessern

�122

Kunde

Vorteile: für Kunden

• Vermitteln Funktionalität einer Website von Anfang an realistisch

• Sind durch Interaktivität einfacher zu verstehen

• Produkt entwickelt sich vor den Augen des Kunden stetig weiter

• Kein Bruch zwischen Kreations- und Entwicklung-sphase (keine Überraschungen)

�123

UX

Vorteile: für Agenturen 1/2

• Keine bzw. weniger Spezifikationen erforderlich

• Integrierte Arbeitsweise wird gefördert

• Animationen und Interaktivität werden direkt berücksichtigt

• Ansätze können direkt ausprobiert und dadurch Design-Entscheidungen leichter getroffen werden

�124

UX

Vorteile: für Agenturen 2/2

• Frühe Usertests sind möglich

• Browser-Spezifika funktionieren automatisch (Scrollbars, Button-Größen, Hover etc.)

• Code kann in Teilen weiter verwendet werden

�125

STATISCHES

DESIGN

Grenzen des statischen Designs überwinden

• Liquid und responsive Layouts

• Realistische Darstellung von Typografie

• Globale Anpassungen von Farben, Abständen, Größen

• Animationen und Interaktionen

�126

Wissen aufbauen

• Neue Denkweisen trainieren

• Neue Browserfeatures besser verstehen

• Wissen, was möglich ist

• Änderungen auf Live-Websites direkt ausprobieren (Developer Tools)

• Prototypen selbst bauen (z. B. mit Bootstrap) oder ändern/erweitern

�127

FrontendKreation

• Besseres Verständnis für das Medium und für Frontend-Developer

• Weniger Abhängigkeit von Frontend-Developern bei der Ideenfindung

• Implementierungsaufwände besser einschätzen können

• Gemeinsames (richtiges) Vokabular aufbauen

• Gemeinsam an Prototypen arbeiten

Zusammenarbeit verbessern

�128

developinguxd.com

�129
