Weshalb Bootstrap so angenehm für die Webentwicklung ist

Weshalb Bootstrap so angenehm für die Webentwicklung ist

Bist du noch in den Anfängen deiner Coder-Erfahrung und willst in ein gängiges sowie praktisches Web-Entwicklungstool reinschnuppern? Oder möchtest du einfach aus Interesse verstehen, was programmiertechnisch geschieht bei einer Webentwicklung? Willst du aus Ehrgeiz ein eigenes Web-Projekt selbstständig auf die Beine stellen? Dann kann diese erste Übersicht zu Bootstrap hilfreich für dich sein.

Zu allererstmal…

Was ist Bootstrap?

Es handelt sich hierbei um ein Framework, das von Twitter entwickelt wurde und Open Source ist, das heißt für jeden frei zugänglich und verwendbar. Es verbindet HTML, CSS und JavaScript miteinander und hält zahlreiche CSS und JavaScript basierte Gestaltungsvorlagen bereit. Mit diesen Grundlagen ermöglicht dir Bootstrap designtechnisch einiges aus deinem Webprojekt rauszuholen und kann mit zahlreichen Oberflächengestaltungselementen dienen.

Nutzerfreundlichkeit

Zudem ist es responsive. Das bedeutet, es passt sich der Bildschirmgröße an und präsentiert dir die Oberfläche der Website deinem Bildschirm entsprechend – egal ob du die Seite gerade auf deinem Computerbildschirm, auf deinem Smartphone oder auf einem Tablet anschaust, es wird immer passen und du musst nicht wie bei anderen Websites links und rechts rumscrollen bis du alles erfasst hast. Responsive Designs steigern die Nutzerfreundlichkeit ungemein und es gibt eigentlich nichts Fataleres als eine Website, die nur für einen Computerbildschirm gedacht ist. Damit verscheucht man jegliche User, die durch andere Endgeräte auf die Website gelangen und für diese die Inhalte der Website nur halb so anschaulich angezeigt werden. Somit ist Bootstrap für mobilfreundliche Websites geeignet.

Für jeden was dabei

Das Schöne an Bootstrap ist, dass man eine Auswahl an verschiedensten Styling Elementen hat, die man nach seinem Geschmack wählen kann. Die verschiedenen Themes, Navigationsbars, Covers und andere Gestaltungselemente bieten dir die Möglichkeit das Aussehen an deine Wünsche und Anforderungen anzupassen. Hier ein paar Beispiele:

   

 

Durch die vorgefertigt gestalteten Elemente spart man sich die viele Zeit alles selbst zu entwickeln, und hat um einiges Schneller das komplette Layout einer Homepage erstellt.

 

 

 

 

 

 

 

Unter https://getbootstrap.com/ kannst du ganz unkompliziert starten und kriegst alle nötigen Codes zum Einbinden und Loslegen.

Dort lädst du dir alle CSS, JavaScript-Dateien herunter – einmal in minimierter Form und einmal in der normalen, lesbaren Variante. Zur Info: Diese erkennst du jeweils an der Endung bootstrap.min.css für den minimierten Code und an bootstrap.css für die lesbare Variante.

Nicht zu vergessen ist die JavaScript Bibliothek jQuery, die du für Bootstrap brauchst. Hiermit hast du alle wesentlichen DOM-, Ereignis-, Effekt- und Ajax-Funktionen. Die müsstest du dir einzeln auf jQuery.com runterladen.

Wie beginne ich ein Projekt?

Erst einmal solltest du ein einfaches HTML-Dokument erstellen mit einem Beispielsatz deiner Wahl (oder wie hier mit dem klassichen „Hallo, Welt“ Satz.)

<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8″>
<meta name=“viewport“ content=“width=device-width, initial-scale=1″>
</head>
<body>
<h3>Hallo, Welt! <h3>
</body>
</html>

Dir fällt sicherlich auf, dass hier im Head ein sogenannter Viewport gesetzt ist. Dieser Tag sorgt dafür, dass andere mit mobilen Endgeräten deine Website ebenso sehen. Um diese soeben angepriesene Funktionalität jedoch auch benutzen zu können müsst ihr die bootstrap-responsive.css-Datei einbinden. Die JS-Dateien bindest du zum Schluss ein, damit optimierst du die Ladezeit.

Beachte

Folgenden Code musst du in deinen Head setzen, um Bootstrap vollständig zu integrieren und dementsprechend alle Vorteile des Frameworks nutzen zu können:

<link rel=“stylesheet“ type=“text/css“href=“https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css“ />

<scripttype=“text/javascript“type=“https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js“></script>

Auf der Website kannst du nun alle Funktionen wie die Beispiele von oben einbinden. Alle Codes für Funktionen wie z.B. Buttons und vieles mehr sind auf der bootstrap-Homepage zu finden.

Hilfreiche jQuery/Javascript Plugins – Teil 5

Hilfreiche jQuery/Javascript Plugins – Teil 5

Heute setzen wir unsere Reihe zu jQuery Plugins fort und stellen euch ein paar praktische Neuheiten vor, die jede Website zum absoluten Hingucker machen.

iziToast

iziToast

Mit diesem Plugin könnt ihr schicke Notifications auf eurer Website einbinden. Diese sind nicht nur schlank und flexibel, sondern auch noch responsive. Dadurch lassen sich informative Mitteilungen auf der Seite einblenden, aber auch Aufforderungen zu einer Aktion oder Warnmeldungen. Das sieht nicht nur gut aus, sondern macht die Seite auch persönlicher und interaktiver für Nutzer.

Hier eine beispielhafte Vorschau des Codes:

Mirror Effect

Der Name „Mirror Effect“ sagt eigentlich schon alles: Hiermit könnt ihr hübsche Spiegeleffekte erzeugen. Das macht sich zum Beispiel besonders gut auf der Landing Page einer Website. Ein Bild wird entweder innerhalb einer Slideshow gespiegelt, oder einfach als Dekoration. Wichtig ist, dass dafür ein moderner Browser verwendet wird.

nanogallery2

nanogallery2

nanogallery2 ermöglicht das Erstellen schöner Bildergalerien mit einer Vielzahl an Effekten. Es stehen eine Reihe von Designoptionen zur Verfügung, mit denen ihr nach Belieben eine Galerie für eine Website oder einen Blog entwerfen könnt. Individuell angepasst werden können zum Beispiel das Layout, Hover Effekte für Thumbnails und der Darstellungsmodus. Auch die Navigation über Tags und die Einbindung von Bildern aus Services wie Flickr ist möglich.

Das sieht dann zum Beispiel so aus:

Paroller.js

Dieses Plugin macht Parallax Scrolling auf Websites möglich. Das sieht zum einen wirklich elegant aus und bringt zum anderen Leben in die Seite. Während des Scrollens können sich Elemente entweder horizontal oder vertikal bewegen. Der Code lautet dann beispielsweise so:

Außerdem ist das Plugin auch noch für mobile Geräte geeignet. Was will man mehr?

 

Hilfreiche jQuery / Javascript Plugins – Teil 4

Hilfreiche jQuery / Javascript Plugins – Teil 4

Heute stellen wir euch ein paar der jQuery Plugins für den Frontend Bereich vor, die wir persönlich für kreativ und nützlich erachten und warum.

  • Material Design Hierarchical Display
    Wenn ihr dem Link, unterlegt im Bild, folgt, seht ihr wie aus vielen verschiedenen Elementen, ein einziges großes entsteht. An den Beispielen könnt ihr euch mit den Animationseffekten ausprobieren. In jedem Fall ist hier ein einschlägiger Effekt gegeben, wenn man diese Plugins auf Internetshops als Logo oder auf Unternehmenswebsites nutzt. Der Kreativität sind dabei keine Grenzen gesetzt, denn sowohl Effekte als auch Elementenanordnung und ob man aus vielen kleinen überhaupt ein großes zusammenhängendes machen möchte, sind individuell gestaltbar.

Einen Einblick in den Code seht ihr hier:

Mit 2 Zeilen ist diese Codierung also recht kurz und simpel gehalten, erzielt aber einen einschlägigen Effekt für einen professionellen Internet-Auftritt.

  • TwentyTwenty

    Das perfekte Plugin, um einen Vergleich zwischen zwei Aspekten visuell hervorzuheben.
    Das Tool sorgt dafür, dass man zwei Bilder übereinander legen kann, ohne dass man zwei Bilder nebeneinander posten muss. Dabei kann man ganz einfach mittels eines Sliders das obere Bild schieben, um das untere zu sehen. Das eignet sich optimal für Vergleiche, in dem man diverse Änderungen an Gebäuden beispielsweise darstellen möchte. Durch den Slider bestimmt man selbst bis zu welchem Abschnitt man das obere Bild zur Seite schiebt und wie viel man vom anderen, unten gelegenen, offenbart. Somit kann man ganz genau Stück für Stück die übereinander liegenden Bilder live miteinander vergleichen. Für einen Vorher/Nachher-Effekt ideal.
    Hier der Code dazu:
  • RoundSlider

Hier haben wir einen Slider, den man ebenfalls individuell designen kann und für verschiedene Zwecke für sich nutzen kann. Auch hier sind Online-Shops als Beispiel zu nennen. Diese haben des Öfteren Funktionen, mit denen man die Mindest- sowie Maximal-Preishöhe einstellen kann. Dafür sind die modern gestalteten Slider ein Blickfang. Auch bei Abbildungen von Prozentzahlen können die Slider eine innovative Darstellungsform bieten, sodass man sich von anderen digitalen Präsenzen unterscheidet.
Hier könnt ihr euch die verschiedenen Optionen der Slides ansehen:

Das waren einige wenige Plugin Beispiele, in die man sich sowohl von der Programmierer-Seite als auch von einem unternehmerischen Standpunkt aus einarbeiten kann. Simple Codierung mit prägnantem Effekt durch Animation und Design ergeben Plugins, die jede digitale Präsenz nach Außen entsprechend vermarkten. In der heutigen Zeit ist das Visuelle aller anderen Vermarktung voraus. Daher lohnt es sich mit den einfachsten Mitteln auf Blickfang zu setzen.

 

Hilfreiche jQuery/Javascript Plugins – Teil 3

Hilfreiche jQuery/Javascript Plugins – Teil 3

Willkommen zum dritten Teil unserer JS/jQuery Reihe. Wie immer gibt es eine Aufteilung zwischen Front- und Backend.

Frontend

  • Hamburgers

    null
    Hamburger, Cheeseburger, Big Mac! Hamburgers ist ein JS Plugin, das einem verhilft den berühmten Hamburger Button zu erstellen. Man hat eine große Vielfalt an vordefinierten Buttons mit schönen Animationen. Alles ist CSS basierend und somit gut anpassbar. Das Beste daran ist die Länge und Komplexität des Codes:

  • superplaceholder

    superplaceholder
    Sehr schönes Plugin, womit man mit wenig Code das Befüllen von Feldern animieren kann. Es ist sehr gut animiert und dazu kleiner als 1 kb. Ein nützliches Gimmick für Seiten mit Suchfunktionen.

  • vivus

    vivus
    Wir haben zwar bereits ein SVG Plugin vorgestellt, doch dieses ist einfach genial. Es besitzt 3 verschiedene Animationstypen (Delayed, Asnyc und OneByOne), die jede Darstellung von SVGs zu einem Erlebnis machen. Sogar das Problem, des richtigen Timings wird von dem Plugin gelöst. Es gibt diverse Timing Funktionen, die sich an das SVG anpassen lassen und die Animation perfekt aussehen lassen. Ein Blick darauf lohnt sich!

  • A-FRAME

    A-Frame
    Virtual Reality, eine Technik die in aller Munde ist. Mit A-Frame kann jeder VR auf seine Seite integrieren, und das so unglaublich simpel. Es gibt eine große Anzahl an vordefinierten 3D-Formen, die man mit zwei Zeilen Code einbinden kann. Weiterhin kann man selbst Formen erstellen, 3D Bilder animieren und, und, und. Mit diesem Plugin kann man definitiv Aufmerksamkeit erregen.

Backend

  • clipboard.js

    clipboard.js
    Die wirklich einfachste Methode dem Benutzer einen „Copy to Clipboard“ Button zu geben. Der User muss nicht immer und immer wieder Texte markieren, alles per Knopfdruck, direkt in seine „Clipboard“. Sehr nützlich für Seiten, bei denen die Markierfunktion unterdrückt wird.