Upload
ingo-reinhart
View
420
Download
3
Embed Size (px)
DESCRIPTION
Ein tarent TechTalk von mir zum Thema Bootstrap. Gehalten am 05.05.2014.
Citation preview
Bootstrap nutzenTechTalk 05.05.2014
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
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
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
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
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
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
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)
12.04.2023 9
Beispiel: Trennen durch Abstand und Gemeinsamkeiten herstellen
Nähe (proximity)
SIZESSmallMediumLargeX-LargeMATERIALWoodPlasticPaddedVeneerCOLORSWhiteBlackRedGreenBlueYellow
SIZESSmallMediumLargeX-Large
MATERIALWoodPlasticPaddedVeneer
COLORSWhiteBlackRedGreenBlueYellow
12.04.2023 10
Beispiel: Kontext erzeugen durch gruppieren
Nähe (proximity)
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)
12.04.2023 12
Beispiel: 2 imaginäre Linien an beiden Seiten
Ausrichtung (alignment)
12.04.2023 13
Gegenbeispiel: Der Tetris Looser
Ausrichtung (alignment)
12.04.2023 14
The Grid
Optimal ist der „Goldene Schnitt“
Einfacher:– Immer mit 3 Teilen
Ausrichtung (alignment)
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)
12.04.2023 16
Beispiel:Deutlichen Kontrast erzeugen
Kontrast (contrast)
12.04.2023 17
Beispiel: Elemente mit Kontrast machen die Seite interessanter
Kontrast (contrast)
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)
12.04.2023 19
Beispiel: Erzeugen eines erkennbaren Layout durch wiederholende Elemente
Wiederholung (repetition)
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
12.04.2023 21
Ergänzend: Schriften / Typografie
Bitte:– keine Treppen– keine Kästen (Treppen-Gefahr)
Design Prinzipien
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
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
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
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
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
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
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
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
12.04.2023 30
Einbinden von Bootstrap:
http://getbootstrap.com/getting-started/#template
Bootstrap
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
12.04.2023 32
Typography
12.04.2023 33
Button
12.04.2023 34
Button Groups
12.04.2023 35
Alerts, Labels, Badges
12.04.2023 36
Navigation
12.04.2023 37
Navigation, Table
12.04.2023 38
Formulare
12.04.2023 39
Formulare
12.04.2023 40
Highlighting
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
12.04.2023 42
Beispiele
The Grid
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
12.04.2023 44
http://bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources
Community
12.04.2023 45
http://bootsnipp.com
12.04.2023 46
http://bootsnipp.com
12.04.2023 47
http://bootsnipp.com
12.04.2023 48
http://bootsnipp.com
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
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
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
12.04.2023 52
Überschriften
12.04.2023 53
Tabellen
12.04.2023 54
Seitenlayout
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
Ingo Reinhart Mail: [email protected]
Rochusstraße 2-453123 Bonn