Folien - WebApp

Report
BRÜCKENSEMESTER
Kursthema: Frontend-Entwicklung für
Webapplikationen
M.Sc. Anna Prenzel, Sebastian Otto
Termine ab nächste Woche
• Mittwoch 8 Uhr – 11 Uhr GIV 1.14
•…
• Übrige Zeit: selbständiges Arbeiten
CSS Frameworks
Ausgangssituation
• Klassen können innerhalb einer Website
mehrfach verwendet werden  externes
stylesheet
• Wiederverwendbares CSS ist ein
Qualitätsmerkmal!
• Morgen: individuelles Feedback zur
Konferenz-Website auch mit Blick auf
Wiederverwendbarkeit
CSS Frameworks
Neue Situation
• Klassen können nicht nur für eine, sondern für
beliebig viele Websites wiederverwendet
werden
• Klassen können im Internet veröffentlicht
werden, sodass sie von allen Entwickler
genutzt werden können  z.B. auf
Github.com
 Es entsteht ein Framework!
CSS Frameworks
Framework
• Sammlung von Klassen, die häufig benötigt
werden
• z.B. Menüs, Carousel, Gridsystem
• Sie müssen nicht mehr bei 0 anfangen!
• Beschleunigt das Erstellen komplexer
Websites sehr stark.
CSS Frameworks
Eigenes CSS wird trotzdem benötigt
• ein Framework deckt niemals alle
Anforderungen des Kunden ab
• Mit dem Framework wird das Grundgerüst
der Seite aufgebaut  die Details werden
mit eigenem CSS-Code ergänzt
CSS Frameworks
Beispiele
• Bootstrap
• Foundation
• Compass
• Pure
• Profound Grid
CSS Frameworks
Beispiele
• Bootstrap
• Foundation
• Compass
• Pure
• Profound Grid
Ursprünglich internes
stylesheet des
Unternehmens „Twitter“
Bootstrap
• Blick in den Quellcode:
https://github.com/twbs/bootstrap
Bootstrap
Bootstrap ist ein Open Source – Projekt
• Quellcode ist zugänglich
• Quellcode kann frei verwendet, verändert und
weiter verbreitet werden
• In der Regel auch kommerzielle Nutzung
erlaubt
• Immer auf die jeweilige Lizenz achten:
http://getbootstrap.com/gettingstarted/#license-faqs
https://tldrlegal.com/search?q=gpl
Bootstrap
Bootstrap ist ein Open Source – Projekt
• Jeder kann den Quellcode verbessern!
https://github.com/twbs/bootstrap/blob/mast
er/CONTRIBUTING.md
http://oss-watch.ac.uk/resources/pullrequest
Bootstrap
Open Source Philosophie
• Großartige Software entsteht, wenn sich
möglichst viele hoch-motivierte Entwickler
(freiwillig) einbringen
• Vertrauen in die Software ist hoch 
Quellcode kann von jedem überprüft werden
• Gegenseitiges Geben und Nehmen:
• kostenlose Infos im Internet nutzen,
• als Gegenleistung einen (kleinen) Teil seiner
Arbeit frei zur Verfügung stellen
Bootstrap
Kleiner Hinweis
• Häufig sehen wir so etwas:
<nav class="navbar navbar-inverse“>
• Wenn mehrere Klassen gleichzeitig angewendet
werden sollen, werden sie durch Leerzeichen getrennt
• Auch möglich: eigene Klassennamen ergänzen, wie
z.B.:
<nav class="navbar navbar-inverse myclass"
role="navigation">
.myclass{ margin-bottom: 10px;}

similar documents