tarent TechTalk: Bootstrap nutzen

download tarent TechTalk: Bootstrap nutzen

of 56

  • date post

    01-Jun-2015
  • Category

    Internet

  • view

    413
  • download

    3

Embed Size (px)

description

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

Transcript of tarent TechTalk: Bootstrap nutzen

  • 1. Bootstrap nutzen TechTalk 05.05.2014

2. 07.05.2014 2 Agenda 1. Einfhrung 2. Design Prinzipien 3. Bootstrap 3.1 im Detail 3.2 Community 4. Alternativen 5. Bootstrap und evolvis Wikis 3. 07.05.2014 3 Agenda 1. Einfhrung 2. Design Prinzipien 3. Bootstrap 3.1 im Detail 3.2 Community 4. Alternativen 5. Bootstrap und evolvis Wikis 4. Das Web (HTML/CSS) ist berall Wir sind, bis auf wenige Ausnahmen, alle keine Designer Entwickler mssen oft (Web-)Oberflchen umsetzen Zu hufig 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 Einfhrung 5. 07.05.2014 5 Agenda 1. Einfhrung 2. Design Prinzipien 3. Bootstrap 3.1 im Detail 3.2 Community 4. Alternativen 5. Bootstrap und evolvis Wikis 6. Ziel: Informationen leicht zugnglich und leicht erfassbar darstellen Nicht: Emotionen transportieren, Produktprsentationen, etc. Designer: Fast alles was sie anfassen sieht pltzlich gut aus Aber was machen wir zahlenverliebten Nerds mit zwei linken Hnden fr das Basteln? 4 Grundregeln ermglichen es jedem eine aufgerumte und leicht zu nutzende Webseite zu entwerfen 07.05.2014 6 Design Prinzipien 7. 1. Nhe (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. Elemente die mit geringen Abstnden zueinander stehen, werden als zusammengehrig wahrgenommen. Einander zugehrige 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 berfllt und der Leser erhlt eine klare strukturierte Seite. 07.05.2014 8 Nhe (proximity) 9. Beispiel: Trennen durch Abstand und Gemeinsamkeiten herstellen 07.05.2014 9 Nhe (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. Beispiel: Kontext erzeugen durch gruppieren 07.05.2014 10 Nhe (proximity) 11. Jedes Element sollte eine visuelle Verbindung mit einem anderen Seitenelement haben. Es soll nichts zufllig auf der Seite platziert werden. Bilden sich durch (imaginre) horizontale Linien Spalten, so kann die Struktur der Seite sehr schnell erfasst werden. 07.05.2014 11 Ausrichtung (alignment) 12. Beispiel: 2 imaginre Linien an beiden Seiten 07.05.2014 12 Ausrichtung (alignment) 13. Gegenbeispiel: Der Tetris Looser 07.05.2014 13 Ausrichtung (alignment) 14. The Grid Optimal ist der Goldene Schnitt Einfacher: Immer mit 3 Teilen 07.05.2014 14 Ausrichtung (alignment) 15. Die Idee beim Kontrast ist die Vermeidung von Elementen, die sich zu hnlich sind. Wenn die Elemente (Schrift, Farbe, Gre, Linienstrke, Form, Abstand usw.) nicht gleich sind, dann mssen sie sehr unterschiedlich gestaltet werden. Kontrast ist hufig der wichtigste visuelle Anreiz auf einer Seite durch ihn erhlt 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. Beispiel: Deutlichen Kontrast erzeugen 07.05.2014 16 Kontrast (contrast) 17. Beispiel: Elemente mit Kontrast machen die Seite interessanter 07.05.2014 17 Kontrast (contrast) 18. Elemente mssen wiederholt werden damit das Designs zu einem gesamten Layout wird Es knnen sich Farben, Formen, Texturen, Abstnde, Linienstrken, Schriften, Gren, grafische Konzepte usw. wiederholen Damit unterstreicht man die Organisation und verstrken die Einheit 07.05.2014 18 Wiederholung (repetition) 19. Beispiel: Erzeugen eines erkennbaren Layout durch wiederholende Elemente 07.05.2014 19 Wiederholung (repetition) 20. Ergnzend: 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. Ergnzend: Schriften / Typografie Bitte: keine Treppen keine Ksten (Treppen-Gefahr) 07.05.2014 21 Design Prinzipien 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 Ksten 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. 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 Ksten 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. 07.05.2014 24 Beispiel: Treppen und Ksten 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. 07.05.2014 25 Agenda 1. Einfhrung 2. Design Prinzipien 3. Bootstrap 3.1 im Detail 3.2 Community 4. Alternativen 5. Bootstrap und evolvis Wikis 26. Front-End-Framework fr die Entwicklung von Projekten fr 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 Funktionalitt: JavaScript Groe 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. Wo es mglich ist erfllt Bootstrap die Design Prinzipien Nhe / Proximity Umgesetzt bei Design-Gruppen, Zustndigkeit des Designer Ausrichtung / Alignment 12 Spalten Fluid Grid (anpassbar) Wiederholung / Repetition Standard Typographie, Elemente, Normalisiert, Zustndigkeit des Designer Kontrast / Contrast Zustndigkeit des Designer, Elemente haben guten Kontrast 07.05.2014 27 Bootstrap 28. Grundstzliches CSS Styling (Styles die auf die HTML-Elemente direkt wirken) Grid system Typography Tables Forms Buttons Images Komponenten die hufige Anwendungsflle 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. 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 Gre http://getbootstrap.com/customize/ 07.05.2014 29 Bootstrap 30. Einbinden von Bootstrap: http://getbootstrap.com/getting-started/#template 07.05.2014 30 Bootstrap 31. 07.05.2014 31 Agenda 1. Einfhrung 2. Design Prinzipien 3. Bootstrap 3.1 im Detail 3.2 Community 4. Alternativen 5. Bootstrap und evolvis Wikis 32. 07.05.2014 32 Typography 33. 07.05.2014 33 Button 34. 07.05.2014 34 Button Groups 35. 07.05.2014 35 Alerts, Labels, Badges 36. 07.05.2014 36 Navigation 37. 07.05.2014 37 Navigation, Table 38. 07.05.2014 38 Formulare 39. 07.05.2014 39 Formulare 40. 07.05.2014 40 Highlighting 41. Bootstrap hat ein Grid System das auf 12 Spalten basiert Das Grid System ist eine Mglichkeit um eine solide Struktur zu bilden 07.05.2014 41 The Grid 42. Beispiele 07.05.2014 42 The Grid 43. 07.05.2014 43 Agenda 1. Einfhrung 2. Design Prinzipien 3. Bootstrap 3.1 im Detail 3.2 Community 4. Alternativen 5. Bootstrap und evolvis Wikis 44. http://bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources 07.05.2014 44 Community 45. 07.05.2014 45 http://bootsnipp.com 46. 07.05.2014 46 http://bootsnipp.com 47. 07.05.2014 47 http://bootsnipp.com 48. 07.05.2014 48 http://bootsnipp.com 49. 07.05.2014 49 Agenda 1. Einfhrung 2. Design Prinzipien 3. Bootstrap 3.1 im Detail 3.2 Community 4. Alternativen 5. Bootstrap und evolvis Wikis 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 grer Weiter: G5, Ink, Terrific 07.05.2014 50 Alternativen 51. 07.05.2014 51 Agenda 1. Einfhrung 2. Design Prinzipien 3. Bootstrap 3.1 im Detail 3.2 Community 4. Alternativen 5. Bootstrap und evolvis Wikis 52. 07.05.2014 52 berschriften 53. 07.05.2014 53 Tabellen 54. 07.05.2014 54 Seitenlayout 55. Versuche deine nchste Wikiseite mit Hilfe von Bootstrap ansprechend zu gestallten! Wiki: new page Nutze die Ideen aus diesem Vortrag Und natrlich: http://getbootstrap.com/css/ 07.05.2014 55 bung macht den Meister 56. Ingo Reinhart Mail: i.reinhart@tarent.de Rochusstrae 2-4 53123 Bonn