Sie sagen es, wir coden es!

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


Notice: A non well formed numeric value encountered in /www/htdocs/w01412ad/we-code-it.de/wecodeit_new/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /www/htdocs/w01412ad/we-code-it.de/wecodeit_new/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /www/htdocs/w01412ad/we-code-it.de/wecodeit_new/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /www/htdocs/w01412ad/we-code-it.de/wecodeit_new/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /www/htdocs/w01412ad/we-code-it.de/wecodeit_new/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /www/htdocs/w01412ad/we-code-it.de/wecodeit_new/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

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


Notice: A non well formed numeric value encountered in /www/htdocs/w01412ad/we-code-it.de/wecodeit_new/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /www/htdocs/w01412ad/we-code-it.de/wecodeit_new/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /www/htdocs/w01412ad/we-code-it.de/wecodeit_new/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /www/htdocs/w01412ad/we-code-it.de/wecodeit_new/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /www/htdocs/w01412ad/we-code-it.de/wecodeit_new/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /www/htdocs/w01412ad/we-code-it.de/wecodeit_new/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

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.

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.

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


Notice: A non well formed numeric value encountered in /www/htdocs/w01412ad/we-code-it.de/wecodeit_new/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /www/htdocs/w01412ad/we-code-it.de/wecodeit_new/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

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

Frontend

Backend

Hilfreiche jQuery/Javascript Plugins – Teil 2

Heute geht es weiter mit der JQuery/JS Plugin Reihe. Der Beitrag ist wieder in Frontend und Backend unterteilt.

Frontend:

Backend

Wie immer, wenn ihr weitere gute Plugins kennt einfach in die Kommentare schreiben.

Hilfreiche jQuery/Javascript Plugins – Teil 1

Heute fange ich eine neue Beitragsreihe an, in der ich euch ein paar handverlesene jQuery/Javascript Plugins vorstelle. Es sind Frontend- , als auch Backend-Plugins dabei, die einem das Leben viel leichter machen.

Frontend:

Backend:

Ihr habt weitere Plugins, die ihr erwähnenswert findet? Nennt sie doch in den Kommentaren, dann kommen sie vielleicht in den nächsten Teil dieser Reihe!