» jQuery we {code} it

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:

<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.

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

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:

iziToast.show({
    title: 'Hey',
    message: 'What would you like to add?'
});

1

2

3

4

iziToast.show({

title: 'Hey',

message: 'What would you like to add?'

});

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 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:

<body>
  <div id="my_nanogallery2" 
    data-nanogallery2='{ "userID": "34858669@N00", "kind": "flickr", "thumbnailHeight": 150, "thumbnailWidth": 150 }'>
  </div>
</body>

1

2

3

4

5

<body>

<div id="my_nanogallery2"

data-nanogallery2='{ "userID": "34858669@N00", "kind": "flickr", "thumbnailHeight": 150, "thumbnailWidth": 150 }'>

</div>

</body>

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:

$(window).paroller({ factor: '0.5', type: 'foreground', direction: 'horizontal' });

1	$(window).paroller({ factor: '0.5', type: 'foreground', direction: 'horizontal' });

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

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.

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:

<!-- It is parent element -->
<div data-animation="hierarchical-display">
<!-- All children (regardless of the tag name) in parent element would be animated, after plugin starts -->
</div>

1

2

3

4

</div>

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:

XHTML

<div id="container1"> <img src="sample-before.png"> <img src="sample-after.png"> </div>

1
2
3
4

<div id="container1">
<img src="sample-before.png">
<img src="sample-after.png">
</div>

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:

 $("#slider").roundSlider({
        min: 0,
        max: 100,
        step: 1,
        value: null,
        radius: 85,
        width: 16,
        handleSize: "+0",
        startAngle: 0,
        endAngle: "+360",
        animation: true,
        showTooltip: true,
        editableTooltip: true,
        readOnly: false,
        disabled: false,
        keyboardAction: true,
        mouseScrollAction: false,
        sliderType: "default",
        circleShape: "full",
        handleShape: "round",
        lineCap: "square",

        // events
        beforeCreate: null,
        create: null,
        start: null,
        drag: null,
        change: null,
        stop: null,
        tooltipFormat: null
    });

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

$("#slider").roundSlider({

min: 0,

max: 100,

step: 1,

value: null,

radius: 85,

width: 16,

handleSize: "+0",

startAngle: 0,

endAngle: "+360",

animation: true,

showTooltip: true,

editableTooltip: true,

readOnly: false,

disabled: false,

keyboardAction: true,

mouseScrollAction: false,

sliderType: "default",

circleShape: "full",

handleShape: "round",

lineCap: "square",

// events

beforeCreate: null,

create: null,

start: null,

drag: null,

change: null,

stop: null,

tooltipFormat: null

});

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.

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

Hamburgers

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:

<button class="hamburger hamburger--collapse is-active" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>

1

2

3

4

5

</span>

</button>

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

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

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

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.

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

Frontend:

JinvertScroll

Adieu langweiliges Scroll-Down, ahoi innovatives Side Scrolling. Das Plugin ermöglicht es einem mit wenig Aufwand einen Sidescroll Effekt zu erzeugen, der etwas an das Metro Menü in Windows 8 erinnert. Das Ganze hat auch einen Parallax Effekt und wirkt somit umso schöner.
Animsition

Ihr habt es satt auf einen Link zu klicken und einen normalen Seitenaufbau zu sehen? Animsition tut etwas dagegen. Mit diesem kleinen Plugin ist es möglich Webseiten beim Laden einen CSS Effekt ausführen zu lassen. Derzeit sind 58 Effekte vordefiniert, die verschiedene Fade Effekte beinhalten, als auch Rotate und Flip. Es lohnt sich reinzuschauen!
Photopile JS

Jeder kennt sie, jeder nutzt sie aber will sie auch jeder? Es geht um die Imagegallery, meistens ein Grid mit mehreren Bildern. Photopile schafft diese Mechanik ab und erstellt einen zusammengewürfelten Haufen aus Fotos, der schön animiert ist. Sehr empfehlenswert für unkonventionelle Fotoausstellungen.
Splitchar

Einfarbige Fonts sind gestern gewesen. Splitchar erlaubt es euch euren Fonts mehrere Farben zu geben und das sowohl vertikal als auch horizontal.

Backend

BttrLazyLoading

Dieses Plugin ist schwer in einem der beiden Bereiche einzuordnen. Die Hauptfunktion ist ein verzögertes Laden von Bilder. Diese werden erst dann geladen, wenn sie in den Viewport kommen. Das hat den Vorteil, dass Webseiten sich viel schneller aufbauen und bei mobilen Endgeräten das Datenvolumen gespart werden kann. Es ist komplett responsiv und Retina ready. Weiterhin gibt es diverse Einstellungen, die man tätigen kann um die Effekte von der Bildanzeige anzupassen. Sehr gelungenes Plugin!
Face Detection

Facetagging gesucht, Facetagging gefunden! Mit Face Detection könnt ihr mit extrem wenig Code die Gesichter auf Bilder auslesen. Das Plugin liefert euch ein “Face” Objekt mit Koordinaten, Höhe und Breite. Diese können für verschiedene Dinge genutzt werden, wie im Bild zu sehen ist.
SVGMagic

SVGMagic ist zwar sehr simpel aber trotzdem sehr mächtig. Es ist ein Muss für Webseiten, die ältere Browser supporten sollen. Das Plugin checkt ob der Browser SVG Bilder unterstützt, wenn dem nicht so ist wandelt es alle Bilder direkt in PNG Bilder um und das im Grunde genommen ohne Qualitätsverlust.

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

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:

Menu-Aim

Menu Aim ist ein kleines Plugin, mit großem Nutzen. Wer kennt das nicht? Man klickt auf ein Dropdown Menü, geht dann auf einen Menüpunkt und es öffnet sich ein seitliches Submenü. Will man nun einen Menüpunkt im Submenü anklicken und rutscht mit der Maus etwas zu weit nach oben oder unten, dann ist das Submenü weg. Dieses Plugin ist genau für diesen Fall entwickelt und löst ihn auch tadellos.
Scroll Path

jQuery Scroll Path erlaubt es euch eigene Scroll Pfade zu erstellen. D.h. man ist nicht mehr an das altbekannte Hoch- und Herunterscrollen gebunden. Es entstehen Effekte, die bspw. Text beim Scrollen von links nach rechts wandern lassen. Bilder drehen sich in einem bestimmten Winkel oder bewegen sich einen bestimmten Pfad entlang. Das Plugin ist sehr gut für kreative Köpfe geeignet.
tubular

Richtig eingesetzt ist tubular ein Schmankerl für die Augen. Dieses Plugin gibt euch die Möglichkeit auf eine einfache Art und Weise YouTube Videos als Background für eure Seite setzen. Beispielsweise YouTuber, die bloggen, könnten somit sehr einfach ihre Videos präsentieren. Schaut euch einfach die gelungene Demo an!
turn.js

turn.js ist ein schmales Pulgin (10 Kb) und es erstellt aus HTML Seiten Touch-optimierte Magazine. Das Ganze geht auf eine unglaublich simple Art und Weise und sieht dennoch sehr professionell aus. Man kann den Aufbau der Seiten selbst in HTML konfigurieren und büßt somit nicht an Flexibilität ein. Sehr empfehlenswert für Restaurants oder jegliche Art von Unternehmen, die einen Katalog haben.
Animate Plus

Animate Plus ist eine starke Javascript Bibliothek zur Erstellung von Animationen. Es ist auf CSS und SVG basierend und bietet eine Vielfalt von Einstellungsmöglichkeiten, um eigene Animationen zu erstellen. Von sich wandelnden Buttons, bis hin zu 3D animierten Elementen: alles kein Problem!

Backend:

Long Press

Long Press ist ein praktisches Plugin, das die Texteingabe für den Benutzer sehr erleichtert. Hält man während einer Texteingabe eine bestimmte Taste gedrückt, so erscheint eine Auswahl an Special Characters, die man unkompliziert einfügen kann. ASCII Code Eingabe über ALT+CODE war gestern!
Complexify

Goodbye langer Algorithmus zur Passwortsicherheit, Hello Complexify! Mit diesem Plugin kann man ganz einfach mit Attributen einen Mindestwert von Passwortsicherheit einsetzen, alles andere regelt das Plugin und zeigt es auch dem Benutzer an.
jQuery-Tabledit

Tabledit ist ein praktisches Plugin, mit dem man Live Tabelleneinträge editieren kann. Es bedarf nur sehr wenig Codeaufwand und man erhält komplett editierbare Tabellen. Sehr praktisch für das Verwalten von kleineren Datenbanken durch mehrere User.

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!

Sie sagen es, wir coden es!

Weshalb Bootstrap so angenehm für die Webentwicklung ist

Hilfreiche jQuery/Javascript Plugins – Teil 5

Hilfreiche jQuery / Javascript Plugins – Teil 4

Hilfreiche jQuery/Javascript Plugins – Teil 3

Frontend

Hamburgers

superplaceholder

vivus

A-FRAME

Backend

clipboard.js

Hilfreiche jQuery/Javascript Plugins – Teil 2

Frontend:

JinvertScroll

Animsition

Photopile JS

Splitchar

Backend

BttrLazyLoading

Face Detection

SVGMagic

Hilfreiche jQuery/Javascript Plugins – Teil 1

Frontend:

Menu-Aim

Scroll Path

tubular

turn.js

Animate Plus

Backend:

Long Press

Complexify

jQuery-Tabledit