tarent TechTalk: Bootstrap nutzen

56
Bootstrap nutzen TechTalk 05.05.2014

description

Ein tarent TechTalk von mir zum Thema Bootstrap. Gehalten am 05.05.2014.

Transcript of tarent TechTalk: Bootstrap nutzen

Page 1: tarent TechTalk: Bootstrap nutzen

Bootstrap nutzenTechTalk 05.05.2014

Page 2: tarent TechTalk: Bootstrap nutzen

12.04.2023 2

Agenda

1. Einführung

2. Design Prinzipien

3. Bootstrap

3.1 im Detail

3.2 Community

4. Alternativen

5. Bootstrap und evolvis Wikis

Page 3: tarent TechTalk: Bootstrap nutzen

12.04.2023 3

Agenda

1. Einführung

2. Design Prinzipien

3. Bootstrap

3.1 im Detail

3.2 Community

4. Alternativen

5. Bootstrap und evolvis Wikis

Page 4: tarent TechTalk: Bootstrap nutzen

12.04.2023 4

Das Web (HTML/CSS) ist überall

Wir sind, bis auf wenige Ausnahmen, alle keine DesignerEntwickler müssen oft (Web-)Oberflächen umsetzen– Zu häufig ohne konkrete Vorgaben

Verwendung von (guten) Frameworks spart kosten zu ist zukunftsorientiert

Wikis in evolvis bringen Bootstrap mit, so dass jeder davon profitieren kann

Einführung

Page 5: tarent TechTalk: Bootstrap nutzen

12.04.2023 5

Agenda

1. Einführung

2. Design Prinzipien

3. Bootstrap

3.1 im Detail

3.2 Community

4. Alternativen

5. Bootstrap und evolvis Wikis

Page 6: tarent TechTalk: Bootstrap nutzen

12.04.2023 6

Ziel: Informationen leicht zugänglich und leicht erfassbar darstellen– Nicht: Emotionen transportieren, Produktpräsentationen, etc.

Designer: Fast alles was sie anfassen sieht plötzlich gut aus

Aber was machen wir zahlenverliebten Nerds mit zwei linken Händen für das Basteln?

4 Grundregeln ermöglichen es jedem eine aufgeräumte und leicht zu nutzende Webseite zu entwerfen

Design Prinzipien

Page 7: tarent TechTalk: Bootstrap nutzen

12.04.2023 7

1. Nähe (proximity)

2. Ausrichtung (alignment)

3. Kontrast (contrast)

4. Wiederholung (repetition)

http://my.safaribooksonline.com/book/-/9783827330581/designprinzipien/13

Design Prinzipien

Page 8: tarent TechTalk: Bootstrap nutzen

12.04.2023 8

Elemente die mit geringen Abständen zueinander stehen, werden als zusammengehörig wahrgenommen.

Einander zugehörige Elemente sollten dicht nebeneinander angeordnet sein.

Wenn mehrere Elemente nahe beieinander platziert werden, sind sie keine getrennten Einheiten mehr, sondern sie werden zu einer visuellen Einheit.

So lassen sich Informationen leichter organisieren, das Layout wirkt nicht überfüllt und der Leser erhält eine klare strukturierte Seite.

Nähe (proximity)

Page 9: tarent TechTalk: Bootstrap nutzen

12.04.2023 9

Beispiel: Trennen durch Abstand und Gemeinsamkeiten herstellen

Nähe (proximity)

SIZESSmallMediumLargeX-LargeMATERIALWoodPlasticPaddedVeneerCOLORSWhiteBlackRedGreenBlueYellow

SIZESSmallMediumLargeX-Large

MATERIALWoodPlasticPaddedVeneer

COLORSWhiteBlackRedGreenBlueYellow

Page 10: tarent TechTalk: Bootstrap nutzen

12.04.2023 10

Beispiel: Kontext erzeugen durch gruppieren

Nähe (proximity)

Page 11: tarent TechTalk: Bootstrap nutzen

12.04.2023 11

Jedes Element sollte eine visuelle Verbindung mit einem anderen Seitenelement haben.

Es soll nichts zufällig auf der Seite platziert werden.

Bilden sich durch (imaginäre) horizontale Linien Spalten, so kann die Struktur der Seite sehr schnell erfasst werden.

Ausrichtung (alignment)

Page 12: tarent TechTalk: Bootstrap nutzen

12.04.2023 12

Beispiel: 2 imaginäre Linien an beiden Seiten

Ausrichtung (alignment)

Page 13: tarent TechTalk: Bootstrap nutzen

12.04.2023 13

Gegenbeispiel: Der Tetris Looser

Ausrichtung (alignment)

Page 14: tarent TechTalk: Bootstrap nutzen

12.04.2023 14

The Grid

Optimal ist der „Goldene Schnitt“

Einfacher:– Immer mit 3 Teilen

Ausrichtung (alignment)

Page 15: tarent TechTalk: Bootstrap nutzen

12.04.2023 15

Die Idee beim Kontrast ist die Vermeidung von Elementen, die sich zu ähnlich sind.

Wenn die Elemente (Schrift, Farbe, Größe, Linienstärke, Form, Abstand usw.) nicht gleich sind, dann müssen sie sehr unterschiedlich gestaltet werden.

Kontrast ist häufig der wichtigste visuelle Anreiz auf einer Seite – durch ihn erhält der Leser überhaupt erst einen Impuls, die Seite zu betrachten.

Sehr wichtig: Nicht nur ein bisschen Kontrast / Unterschied erzeugen, sondern deutlichen Kontrast einsetzten.

Kontrast (contrast)

Page 16: tarent TechTalk: Bootstrap nutzen

12.04.2023 16

Beispiel:Deutlichen Kontrast erzeugen

Kontrast (contrast)

Page 17: tarent TechTalk: Bootstrap nutzen

12.04.2023 17

Beispiel: Elemente mit Kontrast machen die Seite interessanter

Kontrast (contrast)

Page 18: tarent TechTalk: Bootstrap nutzen

12.04.2023 18

Elemente müssen wiederholt werden damit das Designs zu einem gesamten Layout wird

Es können sich Farben, Formen, Texturen, Abstände, Linienstärken, Schriften, Größen, grafische Konzepte usw. wiederholen

Damit unterstreicht man die Organisation und verstärken die Einheit

Wiederholung (repetition)

Page 19: tarent TechTalk: Bootstrap nutzen

12.04.2023 19

Beispiel: Erzeugen eines erkennbaren Layout durch wiederholende Elemente

Wiederholung (repetition)

Page 20: tarent TechTalk: Bootstrap nutzen

12.04.2023 20

Ergänzend: Farben

Design Prinzipien

Red – Adrenaline, blood pressure, anger, love.

Orange – Active, energetic, more informal, appetite

Green – Nature, soothing, growth, freshness, hope, less active

Blue – Openness, intelligence, faith, calming, reduce appetite

Purple – Royalty, power, innovation, wealthWhite – Clean, perfection, light, purity

Black – Death, evil, power, elegance

Page 21: tarent TechTalk: Bootstrap nutzen

12.04.2023 21

Ergänzend: Schriften / Typografie

Bitte:– keine Treppen– keine Kästen (Treppen-Gefahr)

Design Prinzipien

Page 22: tarent TechTalk: Bootstrap nutzen

12.04.2023 22

eirmod tempor invidunt ut labore et dolore magna aliquyam eratsed diam voluptuaAt vero eos et accusam et justo duo

Beispiel: Treppen und Kästen

Lorem ipsum dolor sit ametconsetetur sadipscing elitrsed diam nonumy

Wichtige InformationLorem ipsum dolor sit ametsed diam voluptuaAt vero eos et accusam et justo duo

Block 1 Block 2 Block 3

Page 23: tarent TechTalk: Bootstrap nutzen

12.04.2023 23

eirmod tempor invidunt ut labore et dolore magna aliquyam erat

sed diam voluptua

At vero eos et accusam et justo duo

Beispiel: Treppen und Kästen

Lorem ipsum dolor sit amet

consetetur sadipscing elitr

sed diam nonumy

Wichtige Information

Lorem ipsum dolor sit amet

sed diam voluptua

At vero eos et accusam et justo duo

Block 1 Block 2 Block 3

Page 24: tarent TechTalk: Bootstrap nutzen

12.04.2023 24

Beispiel: Treppen und Kästen

eirmod tempor invidunt ut labore et dolore magna aliquyam erat

sed diam voluptua

At vero eos et accusam et justo duo

Lorem ipsum dolor sit amet

consetetur sadipscing elitr

sed diam nonumy

Wichtige Information

Lorem ipsum dolor sit amet

sed diam voluptua

At vero eos et accusam et justo duo

Block 1 Block 2 Block 3

Page 25: tarent TechTalk: Bootstrap nutzen

12.04.2023 25

Agenda

1. Einführung

2. Design Prinzipien

3. Bootstrap

3.1 im Detail

3.2 Community

4. Alternativen

5. Bootstrap und evolvis Wikis

Page 26: tarent TechTalk: Bootstrap nutzen

12.04.2023 26

Front-End-Framework für die Entwicklung von Projekten für das moderne WebFokus: responsive und mobile first Design (ab v3.0)

Einheitliche CSS + HTML StrukturSet an wichtigen Design-Elementen – Web Design und Layout Patterns : CSS– Widgets und Funktionalität: JavaScriptGroße Community

Entwickler: Twitter Inc.Erscheinungsjahr: 2011 Aktuelle Version: 3.1.1Programmiersprache: CSS (LESS), JavaScriptLizenz: MIT-Lizenz

(vor Version 3.1.0 Apache License 2.0)CC BY 3.0 (Dokumentation, Icons)

Bootstrap

Page 27: tarent TechTalk: Bootstrap nutzen

12.04.2023 27

Wo es möglich ist erfüllt Bootstrap die Design Prinzipien

Nähe / Proximity – Umgesetzt bei Design-Gruppen, Zuständigkeit des Designer

Ausrichtung / Alignment– 12 Spalten Fluid Grid (anpassbar)

Wiederholung / Repetition– Standard Typographie, Elemente, Normalisiert, Zuständigkeit des Designer

Kontrast / Contrast– Zuständigkeit des Designer, Elemente haben guten Kontrast

Bootstrap

Page 28: tarent TechTalk: Bootstrap nutzen

12.04.2023 28

Grundsätzliches CSS Styling (Styles die auf die HTML-Elemente direkt wirken)– Grid system– Typography– Tables– Forms– Buttons– Images

Komponenten die häufige Anwendungsfälle abdecken(Gruppen von HTML-Elementen die durch Bootstrap-CSS formatiert werden)– Glyphicons– Dropdowns + Button groups + dropdowns– Navs + Navbar – Breadcrumbs + Pagination – Labels + Badges– Thumbnails– Alerts + Panels + List / Input groups

Bootstrap

Page 29: tarent TechTalk: Bootstrap nutzen

12.04.2023 29

GUI „Effekte“ mit JavaScript– Modal + Alert– Dropdown + Button– Scrollspy + Affix– Tab– Tooltip + Popover– Collapse– Carousel

Anpassen / Customizing– Erweitern und überschrieben mit eigener CSS-Datei– LESS / SASS– Angepasster Build zum reduzieren der Größe

http://getbootstrap.com/customize/

Bootstrap

Page 30: tarent TechTalk: Bootstrap nutzen

12.04.2023 30

Einbinden von Bootstrap:

http://getbootstrap.com/getting-started/#template

Bootstrap

Page 31: tarent TechTalk: Bootstrap nutzen

12.04.2023 31

Agenda

1. Einführung

2. Design Prinzipien

3. Bootstrap

3.1 im Detail

3.2 Community

4. Alternativen

5. Bootstrap und evolvis Wikis

Page 32: tarent TechTalk: Bootstrap nutzen

12.04.2023 32

Typography

Page 33: tarent TechTalk: Bootstrap nutzen

12.04.2023 33

Button

Page 34: tarent TechTalk: Bootstrap nutzen

12.04.2023 34

Button Groups

Page 35: tarent TechTalk: Bootstrap nutzen

12.04.2023 35

Alerts, Labels, Badges

Page 36: tarent TechTalk: Bootstrap nutzen

12.04.2023 36

Navigation

Page 37: tarent TechTalk: Bootstrap nutzen

12.04.2023 37

Navigation, Table

Page 38: tarent TechTalk: Bootstrap nutzen

12.04.2023 38

Formulare

Page 39: tarent TechTalk: Bootstrap nutzen

12.04.2023 39

Formulare

Page 40: tarent TechTalk: Bootstrap nutzen

12.04.2023 40

Highlighting

Page 41: tarent TechTalk: Bootstrap nutzen

12.04.2023 41

Bootstrap hat ein Grid System das auf 12 Spalten basiert

Das Grid System ist eine Möglichkeit um eine solide Struktur zu bilden

The Grid

Page 42: tarent TechTalk: Bootstrap nutzen

12.04.2023 42

Beispiele

The Grid

Page 43: tarent TechTalk: Bootstrap nutzen

12.04.2023 43

Agenda

1. Einführung

2. Design Prinzipien

3. Bootstrap

3.1 im Detail

3.2 Community

4. Alternativen

5. Bootstrap und evolvis Wikis

Page 44: tarent TechTalk: Bootstrap nutzen

12.04.2023 44

http://bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources

Community

Page 45: tarent TechTalk: Bootstrap nutzen

12.04.2023 45

http://bootsnipp.com

Page 46: tarent TechTalk: Bootstrap nutzen

12.04.2023 46

http://bootsnipp.com

Page 47: tarent TechTalk: Bootstrap nutzen

12.04.2023 47

http://bootsnipp.com

Page 48: tarent TechTalk: Bootstrap nutzen

12.04.2023 48

http://bootsnipp.com

Page 49: tarent TechTalk: Bootstrap nutzen

12.04.2023 49

Agenda

1. Einführung

2. Design Prinzipien

3. Bootstrap

3.1 im Detail

3.2 Community

4. Alternativen

5. Bootstrap und evolvis Wikis

Page 50: tarent TechTalk: Bootstrap nutzen

12.04.2023 50

Nachteile von Bootstrap:– Apps sehen fast alle gleich aus, wenn man das Design nicht anpasst– „DIV bloat“, wenn man nicht aufpasst

ZURB Foundation– Mehr Design Element bei Bootstrap– Bootstrap: px; Foundation: REM (em)– Grid System ist fast identisch– Foundation: erst mobile– Community ist bei Bootstap viel größer

Weiter: G5, Ink, Terrific

Alternativen

Page 51: tarent TechTalk: Bootstrap nutzen

12.04.2023 51

Agenda

1. Einführung

2. Design Prinzipien

3. Bootstrap

3.1 im Detail

3.2 Community

4. Alternativen

5. Bootstrap und evolvis Wikis

Page 52: tarent TechTalk: Bootstrap nutzen

12.04.2023 52

Überschriften

Page 53: tarent TechTalk: Bootstrap nutzen

12.04.2023 53

Tabellen

Page 54: tarent TechTalk: Bootstrap nutzen

12.04.2023 54

Seitenlayout

Page 55: tarent TechTalk: Bootstrap nutzen

12.04.2023 55

Versuche deine nächste Wikiseite mit Hilfe von Bootstrap ansprechend zu gestallten!

Wiki: new pageNutze die Ideen aus diesem VortragUnd natürlich: http://getbootstrap.com/css/

Übung macht den Meister

Page 56: tarent TechTalk: Bootstrap nutzen

Ingo Reinhart Mail: [email protected]

Rochusstraße 2-453123 Bonn