Webseite erstellen mit Ruby On Rails #2 - Deutsch/German

Title : Webseite erstellen mit Ruby On Rails #2 - Deutsch/German
Duration : 09:20
Channel : Michael Mark
Label : Ruby On Rails (Software), Ruby (Programming Language), Deutsch, Bootstrap, Twitter, Github, Bootply, unsplash, webseite erstellen, applikation, Michael Mark

Webseite erstellen mit Ruby On Rails #2 - Deutsch/German

Die vollständigen Befehle unter: http://michael-mark.com/webseite-erst... Teil 1: https://www.youtube.com/watch?v=7mUQ_U_c3MM Teil 3: https://www.youtube.com/watch?v=568t3yvCz3w ☕ Alle Links und Befehle zum Projekt ☕ Einfache Navigation über Kapitelmarken ☕ Direkte Hilfe über die Kommentare ···················································································· Ubuntu Linux 14.04: http://www.ubuntu.com/download/desktop Texteditor: http://atom.io Bootstrap mehr Infos: https://getbootstrap.com Bootstrap Rails Gem File: https://github.com/seyhunak/twitter-b... Bootstrap Templates (kostenlose): http://www.bootply.com Lizenzfreie Bilder - Unsplash: http://www.unsplash.com ···················································································· Bootstrap ist ein simples und flexibeles Framework für HTML, CSS und Javascript. Also quasi für das Frontend gedacht. Es beinhaltet sogar die Unterstützung für mobile Endgeräte, dass heißt wenn wir das ganze hier minimieren und auf den Menübereich achten, sehen wir wie das Menü für mobile Devices umspringt, mit dem Sandwich-Menü. Wie können wir nun Bootstrap in unserer Railsapplikation verwenden? Eine Option ist über den Download Button und die Dateien in den app/assets Ordner zu ziehen. Eine bessere Option ist aber die Integration dieses Frameworks mit Hilfe eines Rubygems. Unter der Github Adresse "github.com/seyhunak/twitter-bootstrap-rails" finden wir eine Installationsanleitung. Hier finden wir bereits das Rubygem, darauf achten die ganze Zeile zu kopieren und zurück im Texteditor. Ins Gemfile unseres Projekts fügen wir das Twitter Bootstrap gem ein. Speichern nicht vergessen! Zurück in unserer Console / Termin laden wir uns mit dem Befehl "bundle install" alle nötigen gems herunter. Das gemfile wird überprüft und wir sind fertig. Wir sehen hier in der Anleitung mit dem Befehl "rails generate bootstrap:install static" können wir die Seite generieren bzw. Bootstrap initialisieren, wir geben dies in unseren Terminal ein. Hier sehen wir alle Dateien, die generiert worden sind und wir prüfen das ganze in unserem Texteditor. Sowohl in app/assets/stylesheets als auch in app/assets/javascript sind nu neue Dateien zu finden. Um die Änderungen zu prüfen starten wir unseren Server "rails server". Anhand der Veränderung des Designs (Schriftart) erkennt man, dass das Framework installiert ist. Wir fügen nun ein simples Template ein. Beispieltemplates bekommen wir kostenfrei auf der Seite bootply.com, hier gehen wir auf "play now" und wählen auf der linken Seite das Template "Carousel layout" aus. Das Template sieht so aus.. Diese Seite ermöglicht Zugriff auf: im unteren Bereich den HTML Code, Javascript falls vorhanden und der komplette CSS Code. Wir kopieren wir nun den kompletten HTML Code. STRG + A = alles auswählen. STRG + C = alles kopieren. In unserer App im Pfad app/views/pages/home.html.erb fügen wir diesen Code ein. Speichern. Wir aktualiseren unsere Seite und wie wir sehen haben wir schon einzelne Elemente hinzugefügt. Jedoch sieht es noch nicht ganz so aus wie auf der Beispielseite, dies liegt ganz einfach daran, weil noch der CSS Part fehlt. Hier machen wir das Gleiche, jedoch gehen wir in den Pfad assets/stylesheets/bootstrap_and_overrides.css hier fügen wir es ein. Speichern. Dadurch, dass wir unsere Stylesheet verändert haben, sollten wir zur Sicherheit unseren Server neu starten. In unserem Browser - aktualisieren und wir sehen die einzelnen Elemente sind exakt so wie auf der Beispielseite. Der einzige Unterschied ist das Hintergrundbild.

Download Video Webseite erstellen mit Ruby On Rails #2 - Deutsch/German