Bootstrap nutzen
TechTalk 05.05.2014
07.05.2014 2
Agenda
1. Einführung
2. Design Prinzipien
3. Bootstrap
3.1 im Detail
3.2 Community
4. Alternativen
5. Bootstr...
07.05.2014 3
Agenda
1. Einführung
2. Design Prinzipien
3. Bootstrap
3.1 im Detail
3.2 Community
4. Alternativen
5. Bootstr...
Das Web (HTML/CSS) ist überall
Wir sind, bis auf wenige Ausnahmen, alle keine Designer
Entwickler müssen oft (Web-)Oberflä...
07.05.2014 5
Agenda
1. Einführung
2. Design Prinzipien
3. Bootstrap
3.1 im Detail
3.2 Community
4. Alternativen
5. Bootstr...
Ziel: Informationen leicht zugänglich und leicht erfassbar darstellen
– Nicht: Emotionen transportieren, Produktpräsentati...
1. Nähe (proximity)
1. Ausrichtung (alignment)
1. Kontrast (contrast)
1. Wiederholung (repetition)
http://my.safaribookson...
Elemente die mit geringen Abständen zueinander stehen, werden als
zusammengehörig wahrgenommen.
Einander zugehörige Elemen...
Beispiel: Trennen durch Abstand und Gemeinsamkeiten herstellen
07.05.2014 9
Nähe (proximity)
SIZES
Small
Medium
Large
X-La...
Beispiel: Kontext erzeugen durch gruppieren
07.05.2014 10
Nähe (proximity)
Jedes Element sollte eine visuelle Verbindung mit einem anderen
Seitenelement haben.
Es soll nichts zufällig auf der Seite...
Beispiel: 2 imaginäre Linien an beiden Seiten
07.05.2014 12
Ausrichtung (alignment)
Gegenbeispiel: Der Tetris Looser
07.05.2014 13
Ausrichtung (alignment)
The Grid
Optimal ist der „Goldene Schnitt“
Einfacher:
– Immer mit 3 Teilen
07.05.2014 14
Ausrichtung (alignment)
Die Idee beim Kontrast ist die Vermeidung von Elementen, die sich zu ähnlich
sind.
Wenn die Elemente (Schrift, Farbe, Größ...
Beispiel:
Deutlichen Kontrast erzeugen
07.05.2014 16
Kontrast (contrast)
Beispiel: Elemente mit Kontrast machen die Seite interessanter
07.05.2014 17
Kontrast (contrast)
Elemente müssen wiederholt werden damit das Designs zu einem gesamten
Layout wird
Es können sich Farben, Formen, Texturen,...
Beispiel: Erzeugen eines erkennbaren Layout durch wiederholende Elemente
07.05.2014 19
Wiederholung (repetition)
Ergänzend: Farben
07.05.2014 20
Design Prinzipien
Red – Adrenaline, blood pressure, anger, love.
Orange – Active, energeti...
Ergänzend: Schriften / Typografie
Bitte:
– keine Treppen
– keine Kästen (Treppen-Gefahr)
07.05.2014 21
Design Prinzipien
07.05.2014 22
eirmod tempor
invidunt ut labore
et dolore magna
aliquyam erat
sed diam voluptua
At vero eos et
accusam et j...
07.05.2014 23
eirmod tempor invidunt
ut labore et dolore
magna aliquyam erat
sed diam voluptua
At vero eos et accusam
et j...
07.05.2014 24
Beispiel: Treppen und Kästen
eirmod tempor invidunt
ut labore et dolore
magna aliquyam erat
sed diam voluptu...
07.05.2014 25
Agenda
1. Einführung
2. Design Prinzipien
3. Bootstrap
3.1 im Detail
3.2 Community
4. Alternativen
5. Bootst...
Front-End-Framework für die Entwicklung von Projekten für das moderne Web
Fokus: responsive und mobile first Design (ab v3...
Wo es möglich ist erfüllt Bootstrap die Design Prinzipien
Nähe / Proximity
– Umgesetzt bei Design-Gruppen, Zuständigkeit d...
Grundsätzliches CSS Styling (Styles die auf die HTML-Elemente direkt wirken)
– Grid system
– Typography
– Tables
– Forms
–...
GUI „Effekte“ mit JavaScript
– Modal + Alert
– Dropdown + Button
– Scrollspy + Affix
– Tab
– Tooltip + Popover
– Collapse
...
Einbinden von Bootstrap:
http://getbootstrap.com/getting-started/#template
07.05.2014 30
Bootstrap
07.05.2014 31
Agenda
1. Einführung
2. Design Prinzipien
3. Bootstrap
3.1 im Detail
3.2 Community
4. Alternativen
5. Bootst...
07.05.2014 32
Typography
07.05.2014 33
Button
07.05.2014 34
Button Groups
07.05.2014 35
Alerts, Labels, Badges
07.05.2014 36
Navigation
07.05.2014 37
Navigation, Table
07.05.2014 38
Formulare
07.05.2014 39
Formulare
07.05.2014 40
Highlighting
Bootstrap hat ein Grid System das auf 12 Spalten basiert
Das Grid System ist eine Möglichkeit um eine solide Struktur zu b...
Beispiele
07.05.2014 42
The Grid
07.05.2014 43
Agenda
1. Einführung
2. Design Prinzipien
3. Bootstrap
3.1 im Detail
3.2 Community
4. Alternativen
5. Bootst...
http://bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources
07.05.2014 44
Community
07.05.2014 45
http://bootsnipp.com
07.05.2014 46
http://bootsnipp.com
07.05.2014 47
http://bootsnipp.com
07.05.2014 48
http://bootsnipp.com
07.05.2014 49
Agenda
1. Einführung
2. Design Prinzipien
3. Bootstrap
3.1 im Detail
3.2 Community
4. Alternativen
5. Bootst...
Nachteile von Bootstrap:
– Apps sehen fast alle gleich aus, wenn man das Design nicht anpasst
– „DIV bloat“, wenn man nich...
07.05.2014 51
Agenda
1. Einführung
2. Design Prinzipien
3. Bootstrap
3.1 im Detail
3.2 Community
4. Alternativen
5. Bootst...
07.05.2014 52
Überschriften
07.05.2014 53
Tabellen
07.05.2014 54
Seitenlayout
Versuche deine nächste Wikiseite mit Hilfe von Bootstrap ansprechend zu
gestallten!
Wiki: new page
Nutze die Ideen aus die...
Ingo Reinhart Mail: i.reinhart@tarent.de
Rochusstraße 2-4
53123 Bonn
Nächste SlideShare
Wird geladen in …5
×

tarent TechTalk: Bootstrap nutzen

899 Aufrufe

Veröffentlicht am

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

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

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
899
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
60
Aktionen
Geteilt
0
Downloads
16
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

tarent TechTalk: Bootstrap nutzen

  1. 1. Bootstrap nutzen TechTalk 05.05.2014
  2. 2. 07.05.2014 2 Agenda 1. Einführung 2. Design Prinzipien 3. Bootstrap 3.1 im Detail 3.2 Community 4. Alternativen 5. Bootstrap und evolvis Wikis
  3. 3. 07.05.2014 3 Agenda 1. Einführung 2. Design Prinzipien 3. Bootstrap 3.1 im Detail 3.2 Community 4. Alternativen 5. Bootstrap und evolvis Wikis
  4. 4. Das Web (HTML/CSS) ist überall Wir sind, bis auf wenige Ausnahmen, alle keine Designer Entwickler 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 07.05.2014 4 Einführung
  5. 5. 07.05.2014 5 Agenda 1. Einführung 2. Design Prinzipien 3. Bootstrap 3.1 im Detail 3.2 Community 4. Alternativen 5. Bootstrap und evolvis Wikis
  6. 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 07.05.2014 6 Design Prinzipien
  7. 7. 1. Nähe (proximity) 1. Ausrichtung (alignment) 1. Kontrast (contrast) 1. Wiederholung (repetition) http://my.safaribooksonline.com/book/-/9783827330581/designprinzipien/13 07.05.2014 7 Design Prinzipien
  8. 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. 07.05.2014 8 Nähe (proximity)
  9. 9. Beispiel: Trennen durch Abstand und Gemeinsamkeiten herstellen 07.05.2014 9 Nähe (proximity) SIZES Small Medium Large X-Large MATERIAL Wood Plastic Padded Veneer COLORS White Black Red Green Blue Yellow SIZES Small Medium Large X-Large MATERIAL Wood Plastic Padded Veneer COLORS White Black Red Green Blue Yellow
  10. 10. Beispiel: Kontext erzeugen durch gruppieren 07.05.2014 10 Nähe (proximity)
  11. 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. 07.05.2014 11 Ausrichtung (alignment)
  12. 12. Beispiel: 2 imaginäre Linien an beiden Seiten 07.05.2014 12 Ausrichtung (alignment)
  13. 13. Gegenbeispiel: Der Tetris Looser 07.05.2014 13 Ausrichtung (alignment)
  14. 14. The Grid Optimal ist der „Goldene Schnitt“ Einfacher: – Immer mit 3 Teilen 07.05.2014 14 Ausrichtung (alignment)
  15. 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. 07.05.2014 15 Kontrast (contrast)
  16. 16. Beispiel: Deutlichen Kontrast erzeugen 07.05.2014 16 Kontrast (contrast)
  17. 17. Beispiel: Elemente mit Kontrast machen die Seite interessanter 07.05.2014 17 Kontrast (contrast)
  18. 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 07.05.2014 18 Wiederholung (repetition)
  19. 19. Beispiel: Erzeugen eines erkennbaren Layout durch wiederholende Elemente 07.05.2014 19 Wiederholung (repetition)
  20. 20. Ergänzend: Farben 07.05.2014 20 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, wealth White – Clean, perfection, light, purity Black – Death, evil, power, elegance
  21. 21. Ergänzend: Schriften / Typografie Bitte: – keine Treppen – keine Kästen (Treppen-Gefahr) 07.05.2014 21 Design Prinzipien
  22. 22. 07.05.2014 22 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
  23. 23. 07.05.2014 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
  24. 24. 07.05.2014 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
  25. 25. 07.05.2014 25 Agenda 1. Einführung 2. Design Prinzipien 3. Bootstrap 3.1 im Detail 3.2 Community 4. Alternativen 5. Bootstrap und evolvis Wikis
  26. 26. Front-End-Framework für die Entwicklung von Projekten für das moderne Web Fokus: responsive und mobile first Design (ab v3.0) Einheitliche CSS + HTML Struktur Set an wichtigen Design-Elementen – Web Design und Layout Patterns : CSS – Widgets und Funktionalität: JavaScript Große Community Entwickler: Twitter Inc. Erscheinungsjahr: 2011 Aktuelle Version: 3.1.1 Programmiersprache: CSS (LESS), JavaScript Lizenz: MIT-Lizenz (vor Version 3.1.0 Apache License 2.0) CC BY 3.0 (Dokumentation, Icons) 07.05.2014 26 Bootstrap
  27. 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 07.05.2014 27 Bootstrap
  28. 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 07.05.2014 28 Bootstrap
  29. 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/ 07.05.2014 29 Bootstrap
  30. 30. Einbinden von Bootstrap: http://getbootstrap.com/getting-started/#template 07.05.2014 30 Bootstrap
  31. 31. 07.05.2014 31 Agenda 1. Einführung 2. Design Prinzipien 3. Bootstrap 3.1 im Detail 3.2 Community 4. Alternativen 5. Bootstrap und evolvis Wikis
  32. 32. 07.05.2014 32 Typography
  33. 33. 07.05.2014 33 Button
  34. 34. 07.05.2014 34 Button Groups
  35. 35. 07.05.2014 35 Alerts, Labels, Badges
  36. 36. 07.05.2014 36 Navigation
  37. 37. 07.05.2014 37 Navigation, Table
  38. 38. 07.05.2014 38 Formulare
  39. 39. 07.05.2014 39 Formulare
  40. 40. 07.05.2014 40 Highlighting
  41. 41. Bootstrap hat ein Grid System das auf 12 Spalten basiert Das Grid System ist eine Möglichkeit um eine solide Struktur zu bilden 07.05.2014 41 The Grid
  42. 42. Beispiele 07.05.2014 42 The Grid
  43. 43. 07.05.2014 43 Agenda 1. Einführung 2. Design Prinzipien 3. Bootstrap 3.1 im Detail 3.2 Community 4. Alternativen 5. Bootstrap und evolvis Wikis
  44. 44. http://bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources 07.05.2014 44 Community
  45. 45. 07.05.2014 45 http://bootsnipp.com
  46. 46. 07.05.2014 46 http://bootsnipp.com
  47. 47. 07.05.2014 47 http://bootsnipp.com
  48. 48. 07.05.2014 48 http://bootsnipp.com
  49. 49. 07.05.2014 49 Agenda 1. Einführung 2. Design Prinzipien 3. Bootstrap 3.1 im Detail 3.2 Community 4. Alternativen 5. Bootstrap und evolvis Wikis
  50. 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 07.05.2014 50 Alternativen
  51. 51. 07.05.2014 51 Agenda 1. Einführung 2. Design Prinzipien 3. Bootstrap 3.1 im Detail 3.2 Community 4. Alternativen 5. Bootstrap und evolvis Wikis
  52. 52. 07.05.2014 52 Überschriften
  53. 53. 07.05.2014 53 Tabellen
  54. 54. 07.05.2014 54 Seitenlayout
  55. 55. Versuche deine nächste Wikiseite mit Hilfe von Bootstrap ansprechend zu gestallten! Wiki: new page Nutze die Ideen aus diesem Vortrag Und natürlich: http://getbootstrap.com/css/ 07.05.2014 55 Übung macht den Meister
  56. 56. Ingo Reinhart Mail: i.reinhart@tarent.de Rochusstraße 2-4 53123 Bonn

×