Archiv für den Autor: Christoph Paterok

Wirtschaftsauskunft im Internet

Online Wirtschaftsauskunft: Vertrauen ist gut – vorzeitige Kontrolle ist besser

Es gibt viele gutmütige Unternehmer, die glauben, sich auf ihren gesunden Menschenverstand verlassen zu können und keine Wirtschaftsauskunft in Anspruch nehmen, um Geschäftskontakte auf Herz und Nieren zu prüfen.. Wirklich einfach und zuverlässig kann eine Online Wirtsschaftauskunft so manchen Rechtsstreit im Vorfeld vermeiden. Mit wenig Aufwand hast Du innerhalb kurzer Zeit alle relevanten Daten auf […]

Es gibt viele gutmütige Unternehmer, die glauben, sich auf ihren gesunden Menschenverstand verlassen zu können und keine Wirtschaftsauskunft in Anspruch nehmen, um Geschäftskontakte auf Herz und Nieren zu prüfen.. Wirklich einfach und zuverlässig kann eine Online Wirtsschaftauskunft so manchen Rechtsstreit im Vorfeld vermeiden. Mit wenig Aufwand hast Du innerhalb kurzer Zeit alle relevanten Daten auf dem Tisch und kannst Dir ein genaues Bild von Deinem potenziellen Geschäftspartner machen. Ein vollständiges Profil vom Betrieb, Kundenreferenzen, Zahlungsmoral und andere Kriterien sprechen eine deutliche Sprache und können dir bei der Wahl der richtigen Kontakte eine wertvolle Hilfe sein.

Gewusst wo – wertvolles Insiderwissen

Ständiger Termindruck und steigender Wettbewerb machen es schwierig alle neuen Kontakte sorgfältig zu prüfen. Dabei sind es genau mangelnde Zeit und beruflicher Stress, die leider nicht selten die eigene Existenz gefährden.
Es ist für dich als Unternehmer kaum möglich wirklich alle Informationen über unterschiedliche Business-Bereiche zu recherchieren. Eine Online Wirtschaftsauskunft ist in der Regel so gut vernetzt, dass detaillierte Auskünfte absolut seriös sind. Davon kannst du profitieren, denn Du sparst Zeit und Geld, wenn Du diesen professionellen Service für Deine Belange nutzt. Jede professionelle onlne Wirtschaftsauskunft in Deutschland verfügt über neueste Daten der Insolvenz-Statistik und kann dich umfassend mit interessanten Informationen versorgen. Du hast sicherlich nicht die Zeit und finanziellen Mittel solch , kompaktes Wissen zu sammeln. Es empfiehlt sich besonders eine Online Wirtschaftsauskunft zu beauftragen, wenn der Geschäftspartner nicht bekannt ist.

Drum prüfe, wer sich bindet…

Nicht jede Option lässt sich realisieren – deshalb ist es wichtig, noch vor den ersten Verträgen eine umfassende Prüfung aller monetären Geschäftsgebaren im Vorfeld zu testen. Gerade bei neuen Geschäftspartnern hat sich die online Wirtschaftsauskunft bewährt. Mit Details über hunderte Unternehmen in der ganzen Welt ist die online Wa dein Schutz vor eventuellen Verlusten durch unlautere Firmen. Hier ist Vernunft ein gutes Ratgeber, denn gerade wer in die eigene Firma aufbaut, braucht mehr Schutz vor den schwarzen Schafen der Branche. Eine online Wirtschaftsauskunft kann alle Informationen einholen und national oder international nachforschen. Ein Service, den immer mehr junge Unternehmer für sich in Anspruch nehmen, bevor sie geschäftliche Bindungen eingehen. Das schützt deine Investitionen in die Zukunft.

reCAPTCHA Tutorial

reCAPTCHA: Der Spam-Schutz für Dein Kontaktformular

Lange lange hat es gedauert, endlich zeigen wir, wie es geht – reCAPTCHA: Der Spam-Schutz für Dein Kontaktformular. Wir zeigen heute, wie Du Dein Kontaktformular vor ungewollter Nutzung schützen kannst. Dies ist eine Erweiterung zu unserem Kontaktformular Tutorial.

Wer ein Kontaktformular auf seiner Webseite eingebaut hat und keinen Spam-Schutz integriert hat, kennt das Problem: Die Masse der Nachrichten, die ankommen, sind schlecht ausgefüllt und machen einfach keinen Sinn. Sie sind von so genannten Bots ausgefüllt und versendet.

Das sind meistens kleine Scripte, die sich durch das ganze Internet bewegen und solche Formulare suchen. Es wird dann meistens einfach Werbung verschickt. Sehr ärgerlich für den Webmaster wird es dann, wenn die erste echte Nachricht untergegangen ist, weil man sich denkt: “Ist doch eh nur Schrott”.

Die Entwicklung von Spam-Schutz für Formulare

Captcha

Abbildung 1: Herkömmliches Captcha

Irgendwann kamen die Entwickler auf die Idee, Formularen eine Art Passwort zu geben, welches zwar im Formular angezeigt wird, aber eben von Bots nicht gelesen werden kann. So entstanden die Captchas, die wie in Abbildung 1 oft ein schwer lesbares Bild anzeigen und man soll den Inhalt in das entsprechende Feld eingeben. Eine weitere Möglichkeit waren auch kleine Rechenaufgaben.

Allerdings hat es nicht besonders lange gedauert, bis die Bots auch diese Sachen ziemlich gut lesen und erkennen konnten. Ein Captcha in Form eines Bildes oder einer Rechenaufgabe einzubinden ist immer noch weit aus besser als nichts und kann die Masse der Bots davon abhalten das Formular abzusenden. Aber eben nicht alle.

Funfact:
Mit Captchas wurde / wird sogar richtig Geld verdient. Beim automatisierten Einscannen von Büchern kommt es oft vor, dass der innere Teil der Seite verschwommen und schlecht lesbar ist. Genau diese Abschnitte wurden oft als Captchas verwendet und jeder der so etwas ausgefüllt hat, hat quasi für die “Einscanner” gearbeitet.

Google reCAPCTHA: Jetzt wird es schwierig für die Bots

Ende 2014 kam Google mit einer neuen Möglichkeit: reCAPTCHA. Dabei muss beim Absenden des Formulars vom Nutzer kein unlesbarer Text mehr eingegeben werden, sondern lediglich eine Checkbox aktiviert werden.

Google reCAPTCHA

Abbildung 2: Google reCAPTCHA – Quelle: Google.com/reCAPTCHA

Durch das Einbinden eines zusätzlichen JavsScripts, überprüft Google anhand der IP-Adresse das Surf-Verhalten und die Mausbewegungen des Nutzers auf der Webseite. Ist sich Google unsicher, wird trotzdem noch eine kleine Aufgabe an den Nutzer ausgegeben (siehe Abbildung 3). Im Großen und Ganzen ist es von der Nutzererfahrung allerdings um Welten besser, als unlesbare Texte oder Rechenaufgaben.

Google reCAPTCHA Nachfrage

Abbildung 3: Wenn sich Google nicht ganz sicher ist, wird nochmal eine Aufgabe gestellt.

Tutorial: So bindet man reCAPTCHA in ein Kontaktformular ein

Dies ist die Erweiterung zu unserem Tutorial “Kontaktformular mit Bootstrap“.

Schritt 1: Anmeldung bei Google reCAPTCHA und Webseite registrieren

Um reCAPTCHA nutzen zu können, ist es notwendig sich bei diesem Google-Dienst zunächst zu registrieren: https://www.google.com/recaptcha/

Der Service ist natürlich wie beinahe alle Google Services kostenlos. Für die Registrierung wird lediglich ein Google Account benötigt, den wahrscheinlich jeder besitzen dürfte, der schon einmal eine Webseite veröffentlicht hat.

Nach der Anmeldung muss die Webseite registriert werden. Für jede neue Webseite, auf der reCAPTCHA genutzt werden möchte, muss diese Webseiten-Registrierung durchgeführt werden.

Webseite registrieren

Abbildung 4: Webseite bei reCAPTCHA registrieren

Im Feld “Label” wird einfach der Name der Webseite eingegeben. In dem Feld “Domains” wird die Domain eingegeben. Hier müssen auch Subdomains eingetragen werden, auf denen der Service genutzt werden möchte. Wenn die Checkbox “Benachrichtigungen” aktiviert ist, werden Nachrichten verschickt, sobald etwas nicht mehr funktioniert.

Schritt 2: Javascript einbinden

In der Übersicht der eingetragenen Webseiten, kann nun die Detail-Seite zur jeweiligen Webseite geöffnet werden. Klicke dazu einfach in der Liste auf den Namen der Webseite.

Nun muss zunächst das Javascript in die Seite eingebunden werden. Wichtig: Es muss vor dem schließenden <head>-Tag erfolgen:

...
     <script src='https://www.google.com/recaptcha/api.js'></script>
</head>
...

Schritt 3: reCAPTCHA in das Formular einbinden

Als nächstes muss folgendes HTML-Tag an die Stelle im Formular eingefügt werden, wo das reCAPTCHA erscheinen soll. Das kann zum Beispiel so aussehen:

<form method="POST" action="senden.php">
     ... <!-- Hier die Formularfelder -->
     <div class="g-recaptcha" data-sitekey="SITEKEY"></div>
     <button type="submit">Absenden</button>
</form>

Man sieht, dass das DIV mit der CSS-Klasse g-recaptcha dafür verantwortlich ist, das Captcha an der richtigen Stelle anzuzeigen. Wichtig ist, dass der richtige data-sitekey eingesetzt wird. Jede Webseite hat seinen eigenen Sitekey. Diesen findet man in der Detail-Seite der Webseite. Ersetzt “SITEKEY” einfach mit diesem.

Damit ist das Captcha eingebaut. Wer die Darstellung, etc. anpassen möchte, der sollte sich diese Dokumentation ansehen.

Schritt 4: Einbinden in unsere Formular-Kontrolle

Nun wollen wir natürlich nicht, dass das Formular abgesendet werden kann, wenn der User den Anti-Spam-Test nicht durchgeführt hat. Also erweitern wir unsere Formularkontrolle.

Wir müssen also von unserem reCaptcha Feedback erhalten, ob der Test ausgeführt wurde. Dafür legen wir eine neue Variable in unserer Formularkontrolle an:

var telefon = $('#telefon').val();
var nachricht = $('#nachricht').val();
var isHuman = grecaptcha.getResponse(); <!-- NEUE VARIABLE -->

Mit der Funktion getResponse() gibt uns das Google reCAPTCHA Feedback, ob der Test durchgeführt wurde. Ist der Test nicht durchgeführt worden oder fehlgeschlagen, ist der Inhalt dieser Variable leer. Deshalb können wir nun folgende if-Abfrage hinzufügen:

if(isHuman.length == 0) {
    formControl = false;
}

Somit haben wir nun auf der Client-Seite bereits überprüft, ob das Formular von einem echten Menschen oder einem Bot ausgefüllt wurde. Selbstverständlich sollte hier auch noch eine Fehlermeldung für den User ausgegeben werden. Wie das geht, steht im Tutorial Teil 1.

Wie bereits in unserem Kontakformular-Tutorial erwähnt, muss dieser Kontrolle auch nochmal auf dem Server stattfinden. Wichtig dabei ist deshalb, dass das Feedback von Google reCAPTCHA auch mit an das PHP-Script übergeben wird. Es muss also im AJAX-Call mitgegeben werden:

$.ajax({
    type: 'POST',
    url: 'php/absenden.php',
    data: { 
        vorname:vorname, 
        nachname:nachname, 
        email:email, 
        telefon:telefon, 
        nachricht:nachricht, 
        isHuman:isHuman 
    }
}).done(function(message) {
...

Schritt 5: Server-Seitige Formular-Kontrolle

Die Server-seitige Kontrolle findet in unserem PHP-Script statt. Zunächst prüfen wir, ob das reCAPTCHA überhaupt im Formular eingebunden war, als das Formular abgesendet wurde:

if(isset($_POST['isHuman'])) {
    $captcha = $_POST['isHuman'];
} else {
    die();
}

Ist also die Variable “isHuman” mitgesendet worden, speichern wir uns den Inhalt in eine neue Variable mit dem Name “captcha”.

Nun haben wir die Möglichkeit nochmal direkt bei Google nachzufragen, ob der Test denn wirklich erfolgreich war. Dies passiert über die reCAPTCHA-API wie folgt:

$ergebnis = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=DEIN_SECRET_KEY&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']);

Wie man sieht, wird hier einfach der Rückgabe-Wert einer URL abgefragt. So funktionieren übrigens APIs. Beim Aufruf der URL müssen folgende Variablen mitgeliefert werden:

  • secret = Der Secret-Key. Diesen findest Du im Google reCAPTCHA Login auf der Detail-Seite Deiner Webseite
  • response = Der Inhalt aus der Variable $captcha
  • remoteip = Die IP-Adresse des Users

Das Ergebnis der API-Abfrage wird in der Variable $ergebnis gespeichert. Nun können wir das Ergebnis wie folgt prüfen:

if($ergebnis.success == false) {
    die(); <!-- Es handelt sich um einen Bot -->
}

Das war’s dann mit den Bots

Jetzt haben wir eine wirklich gute Anti-Spam-Funktion in unser Formular eingebaut und bekommen im besten Falle gar keine Spam-Nachricht mehr über unser Kontaktformular

Ich hoffe es wurde alles verständlich und übersichtlich erklärt. In den nächsten Tagen wird noch ein Video folgen, auf dem wieder alles per Screencast umgesetzt wird.

Bootstrap Datatable

Datatables mit Bootstrap: Durchsuchbare Tabellen mit Javascript

Moderne Web-Technologien sorgen dafür, dass webbasierte Softwarelösungen nativen Lösungen beinahe in nichts mehr nachstehen. Die so genannten Datatables tragen dieser Entwicklung maßgeblich bei. Sie machen einfache Tabellen live sortier- und durchsuchbar und sorgen somit für eine gute Nutzererfahrung. Heute zeigen wir, wie sich diese Datatables mit einem einfachen Javascript-Plugin in Bootstrap umsetzen lassen.

Gerade bei der Umsetzung von Verwaltungstools für eine Webseite oder einer webbasierten Software-Lösung sind sie nicht mehr wegzudenken: Die so genannten Datatables. Sie bieten die Funktion, jegliche Tabellen live und sehr schnell zu sortieren und zu durchsuchen.

DataTables.js: Das einfache jQuery Plugin

Das eigene Umsetzen einer solchen Funktionalität wäre mit einem enormen Aufwand verbunden. Deshalb macht es Sinn hier auf ein einfaches und kostenloses jQuery Plugin zurückzugreifen: DataTables.js

DataTable.js

Abbildung 1: Webseite des DataTables.js Plugins

Einbinden der benötigten Dateien

Die benötigten Dateien können mit zwei verschiedenen Möglichkeiten in das eigene Projekt eingebunden werden.

  • Herunterladen der entsprechenden Dateien und manuelles einbinden in das eigene Projekt.
  • Einbinden der Dateien per CDN (Content-Delivery-Network)

Ich persönlich empfehle das Einbinden der entsprechenden Dateien per CDN. Dies hat den Vorteil, dass Webseiten und Software-Lösungen schneller geladen werden. Diese Art und Weise hat zwar den Nachteil, dass somit eine externe Abhängigkeit in das Projekt eingebunden wird, allerdings ist die Wahrscheinlichkeit des Server-Ausfalls eines CDN relativ gering und weniger wahrscheinlich als der Ausfall des eigenen Servers.

In den <head>-Bereich der Webseite sollte nach dem Bootstrap-Core-CSS das Stylesheet von DataTables.js eingebunden werden:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/bs-3.3.5/jq-2.1.4,dt-1.10.8/datatables.min.css"/>

Am Ende der Datei, und zwar nach dem Einbinden von jQuery und nach dem Einbinden der Bootstrap-Core-JS muss die Javascript-Datei von DataTables.js eingebunden werden:

<script type="text/javascript" src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script>

Die Daten als Tabelle bereitstellen

HTML-TabelleNachdem wir die Basis für unsere Datentabelle geschaffen haben und das DataTable.js Plugin in unser Projekt eingebunden haben, wird es Zeit Daten bereitzustellen. Auch das ist sehr simpel, denn es gilt lediglich eine ganz normale HTML-Tabelle zu erstellen. Die Anzahl der Spalten und Zeilen spielt dabei keine Rolle.

Der Vorteil beim Arbeiten mit Bootstrap ist, dass bereits perfekt gestylte Elemente zur Verfügung stehen. So auch bei den Tabellen. Welche Styles und Darstellungsmöglichkeiten es gibt, haben wir in unserem Handbuch-Eintrag zur Bootstrap Tabelle bereits ausführlich beschrieben.

Ist die Tabelle erstellt, sollte sie eine eindeutige ID erhalten. Dies kann ganz einfach wie folgt aussehen:

<table class="table" id="beispiel">
     <tr>
          <td>...
     ...

Seite fertig geladen – Datatable starten

Wir sind nun an dem Punkt, das jQuery Plugin mit unseren Daten zu verknüpfen und somit die Datentabelle zu erzeugen. Dies passiert wieder sehr einfach:

<script type="text/javascript" charset="utf-8">
     $(document).ready(function() { 
          $('#beispiel').DataTable(); 
     } );
</script>

Folgendes ist zu beachten:

  • Das Aufrufen der DataTable-Funktion darf erst nach dem Einbinden der DataTable.js erfolgen, denn sonst kennt unsere Software diese Funktion noch nicht.
  • Der Selektor muss richtig gesetzt werden. Dieser muss unsere Daten-Tabelle ansprechen.

Nun sollte die Datentabelle richtig geladen und dargestellt werden.

Deutsche Beschriftung aktivieren

Eine Sache mit der ich persönlich am Anfang etwas länger Zeit verbracht habe, war das Umstellen auf die deutsche Beschriftung. Deswegen möchte ich euch die Zeit sparen und hier gleich erklären, wie es funktioniert.

Selbstverständlich steht eine riesige Auswahl an Sprachdateien zur Verfügung: https://www.datatables.net/plug-ins/i18n/

Alle Sprachdateien stehen im JSON-Format zur Verfügung und können ebenfalls manuell heruntergeladen uns ins Projekt integriert werden oder per CDN eingebunden werden. Dazu muss die DataTable-Funktion einfach ein entsprechendes Attribut mit übergeben bekommen. Wenn wir also die deutsche Sprache nutzen möchten, dann sieht das Starten der DataTable-Funktion wie folgt aus:

<script type="text/javascript" charset="utf-8">
     $(document).ready(function() { 
          $('#beispiel').DataTable({
               "language": {
                    "url": "//cdn.datatables.net/plug-ins/1.10.10/i18n/German.json"
               }
          }); 
     } );
</script>

Wenn die Seite jetzt neu geladen wird, sind alle Button und Formular Texte in deutsch vorhanden.

Hat bei bei Dir alles geklappt? Hast Du noch Fragen? Wir freuen uns auf Deinen Kommentar.

Eigene Webseite planen und umsetzen

Wie erstelle ich meine eigene Webseite? – Planung und Umsetzung

Kleine- und mittelständische Unternehmen, oder auch Gründer, stehen auch heute noch vor der Herausforderung, die erste eigene Webseite für ihre Unternehmung zu erstellen. Um Kosten zu sparen wird die Erstellung des eigenen Internetauftritts häufig in Eigenleistung vollbracht. In diesem Artikel zeigen wir deshalb Tipps auf, wie man an die Planung und Umsetzung dieses Projekts herangehen kann um Zeitaufwand und Nerven zu schonen.

Welche Funktionen und Inhalte brauche ich wirklich?

Wer sich Gedanken zu seiner eigenen Webseite macht, dem kommen selbstverständlich sehr schnell viele Ideen. Und die Anzahl der Ideen findet schnell kein Ende. Wichtig ist es aber zu verstehen, dass das Ziel ist, eine Webseite online zu haben. Die Firmenpräsenz im Internet bringt nichts, wenn sie 1 Jahr lang in der Entstehung ist und kein Kunde sie jemals gesehen hat.

Mache dir deshalb genau Gedanken darüber, welche Funktionen und Inhalt auf deiner Firmen-Webseite wirklich benötigt werden. In den meisten Fällen reicht folgendes aus:

  • Eine Startseite, auf der kurz und knackig die Firma vorgestellt wird.
  • Eine Unterseite mit den Produkten / Dienstleistungen deiner Firma.
  • Eine “Über uns”-Seite, auf der die Firma etwas detaillierter vorgestellt wird.
  • Eine “Referenzen”-Seite, auf der Interessenten deine bisherigen Aufträge / Kunden einsehen können.
  • Wichtig: Ein Kontaktformular, um einfach und schnell mit dir Kontakt aufnehmen zu können.
  • Rechtliches: Ein Impressum und eine Datenschutzerklärung (Diese Aussage ist ohne Gewähr – informiere dich immer über die aktuellen rechtlichen Gegebenheiten)

Aus der Erfahrung heraus können wir sagen, dass das in den meisten Fällen für eine erste Version reicht.

Weniger ist meistens mehr – Eine funktionierende Webseite ist eine gute Webseite

Ein weiterer Grund dafür, dass die erste Webseite lieber auf das Wesentliche beschränkt sein sollte ist: du kannst dich auf die Funktionalität konzentrieren.

Responsive Design

Deine Webseite sollte auf allen Endgeräten einwandfrei funktionieren.

Funktionalität bedeutet, dass die Seite in allen gängigen Browsern und auf allen Endgeräten (Smartphones, Tablets und PCs) funktioniert. Hilfreich dabei kann übrigens das so genannte “Responsive Design”-Konzept sein, dessen Umsetzung übrigens auch mit dem Bootstrap-Framework von Twitter möglich ist.

Denke immer daran, dass deine Webseite meistens der erste Eindruck ist, den ein Interessent von deinem Unternehmen erhält. Sie repräsentiert dein Unternehmen an vorderster Front.

Man muss kein Profi sein: fertige Elemente und System benutzen

Viele Menschen, die vor der Herausforderung stehen zum ersten Mal eine Webseite zu erstellen, denken oft, dass das etwas mit Programmieren zu tun hat und das Rad sowieso immer neu erfunden werden muss. Nein!

Genauso wie es vorgefertigte Formulare für die Gehaltsabrechnung gibt, gibt es auch fertige und funktionierende Sachen für die eigene Webseite. Eine einfache Firmenpräsenz im Umfang, wie oben genannt, könnte zum Beispiel ohne jeglichen Programmieraufwand mit folgenden Systemen umgesetzt werden:

  • WordPress – Als Hauptsystem für die Webseite.
  • Ein fertiges WordPress-Design.
  • Das Ninja-Forms Plugin für WordPress um ein einfaches Kontaktformular zu erstellen.
  • Die rechtliche Seiten können mit einem Impressums-Generator erstellt werden.
  • Unsplash.com liefert kostenlose und tolle Bilder, die auf der eigenen Webseite verwendet werden können.

Keines der genannten Systeme oder Elemente kosten Geld. Alles kostenlos und genutzt von 100 tausenden von Menschen.

Die richtige Planung ist bereits die halbe Webseite

Bevor du jetzt hektisch anfängst die genannten Tools zu suchen und zu verwenden: Nimm dir Zeit und plane den Umfang deiner Seite und die nächsten Schritte. Das wird deine Zeit und Nerven enorm schonen.

Ich freue mich auf deinen Kommentar. Du hast deine eigene Webseite bereits erstellt? – Welche Probleme gab es? Du bist noch ganz am Anfang? – Welche Fragen hast Du noch?

Google Material Design

Google Material Design als kostenloses Bootstrap Theme

Google hat im Sommer 2014 seine neuen und aktuellen Design-Guidelines mit dem Namen “Material Design” vorgestellt. Dabei handelt es sich um ein Design, welches echtem Papier ähnelt. Mit Schatten und und Farben wird so umgegangen, dass alles danach aussieht, als würde Papier übereinanderliegen. Federico Zivolo, ein italienischer Web-Designer hat sich die Arbeit gemacht und die Design-Guidelines in ein kostenloses Bootstrap-Theme umgesetzt. Wir zeigen heute, wie man dieses Template einbinden und verwenden kann und wie es sich auf Deskop und mobilen Endgeräten verhält.

Inhaltsverzeichnis

Quick-Start

Da unsere Artikel hier auf Bootstrapaholic oft sehr lang sind, haben wir uns dazu entschieden ab sofort bei Erklär-Artikeln den “Quick-Start” einzuführen. Keine Lust alles zu lesen? Kein Problem, dann geht es hier direkt los.

Derzeit besteht die Möglichkeit das Bootstrap Material Design Theme über Bower und Meteor zu installieren oder die entsprechenden Dateien einfach aus dem GitHub Respository herunterzuladen und in das Projekt einzubinden.

Installation via Bower

bower install bootstrap-material-design

Bower ist übrigens ein so genanntes Paket-Verwaltungstool. Damit kann man per Kommandozeile einzelne Programmbibliotheken, wie in diesem Fall das Bootstrap Theme, installieren.

Installation via Meteor

meteor add fezvrasta:bootstrap-material-design

Meteor ist eine sehr ähnliche Software wie Bower. Wir werden in einem weiteren Artikel demnächst versuchen die beiden Dienste zu zeigen und zu erklären, wie man sie nutzt.

Dateien herunterladen und in das Projekt einbinden

Genauso gut, kann man allerdings die Dateien einfach aus dem GitHub Respository herunterladen und in das Projekt einbinden. Neben den Standard-Dateien, die bei jedem Bootstrap Projekt benötigt werden, müssen hier folgende Dateien aus dem “dist”-Ordner der Dateisammlung eingebunden werden:

Im Head-Bereich:

  • css/roboto.min.css (Google Font)
  • css/material-fullpalette.min.css
  • css/ripples.min.css

Im Footer-Bereich, nach bootstrap.min.js und jQuery:

  • js/ripples.min.js
  • js/material.min.js

Außerdem ist es notwendig, nach dem Einbinden der JavaScript-Dateien das Material-JavaScript einmalig beim Seitenaufruf zu initialisieren. Das funktioniert wie folgt:

$(function(){
     $.material.init();
});

Und schon kann es losgehen! Wenn Du jetzt doch noch weiter ins Detail gehen möchtest und mehr erfahren willst, dann kannst Du jetzt einfach weiterlesen.

Google Material Design – Was ist das?

Responsive Design

Abbildung 1: Google Material auf verschiedenen Endgeräten – Quelle: Phandroid.com

Im Sommer 2014 stellte Google auf seiner Entwicklerkonferenz in San Francisco erstmalig das Material Design vor. Es ist nicht einfach nur ein Design, sondern wird gerne auch als Googles Designsprache bezeichnet. Googles Ziel ist es, dieses Design auf all ihren Produkten anzuwenden. Dazu gehören beispielsweise:

  • Google Chrome
  • Android
  • Google Suche
  • Google Maps
  • Google Mail
  • Smartwatches
  • und viele weitere Produkte…

Das besondere an diesem Design ist, dass es eine Art Flat-Design ist, die Elemente jedoch nicht nur eine X- und Y-Koordinate haben, sondern auch eine Z-Koordinate, die die Tiefe der einzelnen Elemente bestimmt. Somit ist das Flat-Design ein Design mit 3D Effekt. Durch den Tiefeneffekt wirken die einzelnen Elemente wie Papierblätter, die übereinander gelegt werden.

Im folgenden Video stellt Google Material Design vor. Dabei werden die oben beschriebenen Design-Effekte besonders gut dargestellt:

Google hat auf dieser Webseite die Guidelines zur Verwendung des Material Designs veröffentlicht. Dort wird genauesten erklärt, welche Elemente es gibt und wie sie verwendet werden sollten. Hier geht es nicht um HTML oder CSS, sondern wirklich um das Design und dem Einsatzbereich. Die Guidelines stehen auch im PDF-Format zur Verfügung.

Warum solle man Material Design verwenden?

Grundsätzlich möchten wir nicht empfehlen, dieses von Google entwickelte Design zu verwenden, wenn es Dir nicht gefällt. Allerdings kann man sich gerade von den Google Projekten, design-technisch, sehr viel abschauen. Sie besitzen meistens eine perfekte User-Experience, denn kaum eine andere Firma hat so massiv viele Nutzerdaten, die ausgewertet werden und in nächste Versionen einfließen können.

Bedeutet also im Umkehrschluss, auch wenn einem das Design nicht gefällt, sollte man sich einzelne Elemente, Farben und Strukturen genau ansehen. Bei Google hat alles seinen Grund!

Farbpalette

Material Farben

Abbildung 2: 16 von 20 Farben der Material Farbpalette

Insgesamt stellt Google in seiner Designsprache 280 Farben zur Verfügung. Wobei die gesamte Farbpalette aus 20 Hauptfarben besteht, die in jeweils 14 Farbtönen abgestuft worden sind. Die jeweilige Hauptfarbe ist eine sehr klarer, aber trotzdem angenehmer Farbton. 16 der 20 Farben sind in Abbildung 2 zu sehen. Alle Farben können in den Design Guidelines angesehen werden.

Die Farben sind jeweils in einer Stärkenskala von 50 – 900 bzw. 100 – 700 unterteilt, wobei die Stärke 500 jeweils die, der Hauptfarbe ist. Hier eine Auflistung aller 20 Hauptfarben als Tabelle:

Name der Farbe Hexadezimal Farbcode
Red #F44336
Pink #E91E63
Purple #9C27B0
Deep Purple #673AB7
Indigo #3F51B5
Blue #2196F3
Light Blue #03A9F4
Cyan #00BCD4
Teal #009688
Green #4CAF50
Light Green #8BC34A
Lime #CDDC39
Yellow #FFEB3B
Amber #FFC107
Orange #FF9800
Deep Orange #FF5722
Brown #795548
Grey #9E9E9E
Blue Grey #607D8B
Black #000000

Typografie

Roboto

Abbildung 3: “Roboto” ist die Standard-Schriftart in Material Design

Seit der Android Version “Ice Cream Sandwich”, ist Roboto die Standardschriftart, auf Googles Betriebssystem für Smartphones. Es ist eine serifenlose und sehr klare Schriftart. Wer sie auf seiner Webseite ohne Material Design einsetzen möchte, der kann dies über die Google Fonts tun und die entsprechende CSS-Datei in seinen Header übernehmen. Weitere und detailliertere Informationen zur Schriftart “Roboto”, findet man auch auf Wikipedia.

Google Material Design ist also eine gut durchdachte Designsprache, die man sich, auch wenn sie einem nicht zusagt, dringend ansehen sollte. Der Aufbau der Elemente ist das Ergebnis aus unzähligen User-Statistiken von Google.

Material Design für Bootstrap

Wie bereits erwähnt hat sich der italienische Web-Entwickler Frederico Zivolo die Arbeit gemacht und das Material Design in ein Bootstrap-Theme geschrieben. Dafür hat er nicht nur eine ausführliche CSS-Datei erstellt, sondern sehr viele JavaScript Funktionen entwickelt, damit das Look & Feel von Material Design perfekt für Bootstrap verwendbar ist. Im folgenden Abschnitt, werden wir deshalb einige Elemente vorstellen, zeigen, wie man sie benutzt und wie sie im Browser aussehen.

Wer hat’s erfunden? – Frederico Zivolo!

Frederico Zivolo, auch bekannt als “Fez Vrasta”, lebt in Italien und ist professioneller Web-Designer und Entwickler. Er hat bereits einige sehr coole JavaScript Funktionen entwickelt, die auch in seinem Bootstrap Theme verwendet werden. Wer mehr über ihn erfahren möchte, der sollte auf seiner Webseite vorbeischauen oder in einfach mal auf Twitter folgen. Übrigens ist auch seine persönliche Webseite mit dem hier genannten Bootstrap Theme gemacht – es lohnt sich!

Wenn Du die Installation noch nicht durchgeführt hast, dann geh einfach nochmal zum Abschnitt “Quick-Start“.

Farben

Alle Material Design Farben sind bereits in der CSS-Datei vorbereitet und können über eine sinnvolle CSS-Klassen-Struktur angesprochen werden. Um beispielsweise einen einfachen Button in einer bestimmten Farbe zu erzeugen, muss folgende Klasse vergeben werden:

<button class="btn btn-material-red-50">Klick mich!</button>

Der Button hätte dann die Farbe “Red” mit der Stärke 50. Somit können alle Bootstrap Elemente, die über eine extra Klasse eine Farbzuweisung erhalten, mit den Material Farben versorgt werden.

Buttons

Buttons

Abbildung 4: Buttons im Material Style

Die normalen Bootstrap Buttons können wie gewohnt über die üblichen CSS Klassen eingebunden werden. Zusätzlich zu den normalen Buttons, gibt es eine Flat- und eine Raised-Version. Die Flat-Buttons haben quasi keinen Border, während die Raised-Buttons mit einem Schatten versehen sind, der sich vom Hintergrund stärker abhebt.

.btn-flat
.btn-raised

Formularfelder

Fomularfelder

Abbildung 5: Formularfeld im Material Design

Ein Highlight in diesem Bootstrap Theme sind unserer Meinung nach die Formularfelder. Wird der Focus auf das jeweilige Formularfeld gesetzt, erscheint eine Animation, die dann zu einer farbigen Linie unterhalb des schreibbaren Bereichs wird. Das Label kann entweder fest gesetzt werden, wie im ersten Input-Feld in Abbildung 5 zu sehen, oder ebenfalls animiert sein.

In der animierten Version ist das Label zunächst ein Placeholder. Wird der Focus dann gesetzt, wird es mit einer Animation zum Label. Wirklich sehr schön gelöst!

Das normale Formularfeld kann ohne extra CSS-Klassen folgendermaßen eingebunden werden:

<input type="text" class="form-control">

Das animierte Formularfeld funktioniert so:

<div class="form-control-wrapper">
     <input type="text" class="form-control empty">
     <div class="floating-label">Hier das Label</div>
     <span class="material-input"></span>
</div>

Folgende Feldarten stehen zur Verfügung:

  • Inputs
  • Textareas
  • Radio-Buttons
  • Checkboxen

Checkboxen

Checkboxen

Abbildung 6: Checkbox im Material Design

Screencast / Screenshot

<div class="checkbox">
     <label>
          <input type="checkbox"> Notifications
     </label>
</div>

Radio-Buttons

Radio Buttons

Abbildung 7: Radio Buttons im Google Style

<div class="radio radio-success">
     <label>
          <input type="radio" name="sample1" value="option1">
          Only when plugged in
     </label>
</div>

 JavaScript Plugins

Frederico hat in seinem Bootstrap Theme nicht nur das Design übernommen, sondern arbeitet auch ständig daran, weitere Elemente, die vor allem aus dem Betriebssystem Android bekannt sind, zu integrieren. So sind beispielsweise derzeit die Elemente “Snackbar” und “Toast” zum Einbinden bereit. Diese können als eine Art Push-Benachrichtung oder auch Erfolgsmeldung genutzt werden. Für die beiden Elemente gibt übrigens auch ein eigenes Repository auf GitHub.

Snackbar und Toast

Abbildung 8: Die Elemente Snackbar und Toast

Wie in Abbildung 8 zu sehen, handelt es sich bei der linken Notification mit den abgerundeten Ecken um den so genannten “Toast”. Unterhalb davon ist eine “Snackbar” zu sehen.

Die beiden Elemente können entweder bereits vorgefertigt im HTML-DOM bereitgestellt werden und dann per JavaScript angezeigt werden oder auch komplett per JavaScript generiert werden.

<span data-toggle=snackbar data-content="This is my awesome snackbar!">Click me</span>

$("#snackbarid").snackbar("show");
$("#snackbarid").snackbar("hide");
$("#snackbarid").snackbar("toggle");
var options =  {
    content: "Some text", // text of the snackbar
    style: "toast", // add a custom class to your snackbar
    timeout: 100 // time in milliseconds after the snackbar autohides, 0 is disabled
}

$.snackbar(options);

Viel Spaß mit diesem tollen Bootstrap Theme und ein großes Dankeschön an Frederico für seine Arbeit. Sollten euch Informationen fehlen oder ihr habt einfach nur Fragen, schreibt doch bitte einen Kommentar. Wir kümmern uns darum.

Ein Kontakformular mit PHP und Bootstrap

Kontakformular mit Bootstrap und PHP – Download und Tutorial

Das Kontaktformular ist eines der elementarsten Dinge auf einer Webseite. Egal ob einfache Firmenwebseite oder eine Ankündigung über den baldigen Start eines Projekts. Mit einem Kontakformular erleichtert man den Besuchern mit den Betreibern in Kontakt zu treten. Heute zeigen wir, wie man mit Bootstrap und ein wenig PHP ein einfaches Kontaktformular erstellt. Am Ende des Tutorials kann das gesamte Kontaktformular heruntergeladen werden.

Ein kleiner Hinweis vorweg: Dies ist ein sehr einfaches Beispiel für ein Kontaktformular. Die Art und Weise der Formularkontrolle kann theoretisch mit sehr viel weniger JavaScript erfolgen. Um allerdings den “Ich habe es Verstanden” Effekt beim Leser zu generieren, halten wir es persönlich für nützlich wie in diesem Tutorial vorzugehen.

UPDATE:
Wir haben das gesamte Tutorial nochmal als Video-Tutorial veröffentlicht. Viel Spaß damit!
Direkt zum Video

Tool Kontaktformular

Anforderungen an das Kontaktformular

Bevor wir anfangen, sollten wir uns Gedanken darüber machen, was unser Kontaktformular alles können muss. Die Planung ist ein wichtiger Teil der Entwicklung, denn das nachträgliche Hinzufügen von Funktionen kann im Nachhinein viel mehr Arbeit machen.

In unserem Beispiel werde wir ein Formular erstellen, dass die folgenden Eingabefelder berücksichtigt:

  • Name
  • Vorname
  • E-Mail Adresse
  • Nachricht

Pflichtfelder und Eingaben auf Richtigkeit überprüfen

Um qualifizierte Anfragen über das Bootstrap Kontaktformular zu erhalten, sollten wir die Möglichkeit berücksichtigen, dass bestimmte Eingabefelder als Pflichtfelder deklariert werden können. Bedeutet, dass der User die Anfrage nicht absenden kann, wenn die Pflichtfelder nicht bzw. nicht richtig ausgefüllt sind.

Beim Formularfeld “E-Mail Adresse” sollten wir außerdem kontrollieren, ob hier wirklich eine E-Mail Adresse eingegeben wurde und nicht einfach nur Text.

Neue Anfragen sollen dann per E-Mail an den Webmaster gesendet werden.

Spam vermeiden durch Captcha

Beispiel eines Captchas mit Buchstaben
Abbildung 1: Beispiel Captcha – Quelle: Captcha.net

Ein Kontaktformular ist meist ein gefundenes Fressen für automatisierte Anfragen und Spam. Um überprüfen zu können, ob es sich bei dem Anfragenden um einen echten Besucher handelt, bauen wir ein so genanntes Captcha ein.

Es gibt verschiedene Arten von Captchas. Meistens wird ein Bild verwendet, auf dem sich Buchstaben und Zahlen befinden, die theoretisch nur von Menschen lesbar sind. Der Benutzer muss diese Buchstaben dann in ein dafür vorgesehenes Eingabefeld eingeben. Nur wenn die Eingabe mit dem Inhalt des Bildes übereinstimmt, wird das Formular auch wirklich abgesendet.

Eine andere Art und Weise ist beispielsweise eine einfache Rechenaufgabe, deren Lösung der Benutzer dann in das Kontrollfeld eingeben muss. Diese Funktionsweise werden wir in diesem Beispiel verwenden.

UPDATE: Erweitertes Tutorial zum Einbau von Google reCAPTCHA

Tool Kontaktformular

Versenden des Formulars durch Asynchrones JavaScript (AJAX)

Das Bootstrap Framework stellt uns viele vorbereitete Elemente zur Verfügung, die die Nutzerfreundlichkeit (Usability) unseres Kontakformulars positiv beeinflussen kann. Ziel in diesem Tutorial ist es, die Daten des Formulars im Hintergrund abzusenden und am Ende eine Erfolgsmeldung anzuzeigen. Somit bleibt der User immer auf der gleichen Seite und wird nicht unnötig weitergeleitet.

Los geht’s: Das HTML-Grundgerüst

Da wir mit dem Bootstrap Standard CSS arbeiten, müssen wir uns über das Thema Design zunächst keine Gedanken machen, sondern können die bereits vorhandenen Klassen verwenden.

HTML des Bootstrap Kontaktformulars
Abbildung 2: Links das erzeugte Kontaktformular, rechts der dazugehörige HTML-Code

Die Eröffnung des Formulars beginnt wie folgt:

<form role="form" id="frmContact"> <!-- Formular Beginn -->
</form> <!-- Formular Ende -->

Eingabefelder

Der HTML-Code für die einzelnen Felder ist sehr ähnlich. Es wird eine Formular-Gruppe erstellt, in welches dann das Label (Bezeichnung des Formularfelds) sowie das eigentliche Eingabefeld geschrieben wird.

<div class="form-group" id="frmGrpVorname">
     <label for="vorname" class="control-label">Vorname</label>
     <input type="text" id="vorname" class="form-control" 
            placeholder="Ihr Vorname">
</div>

Jeder Formular-Gruppe gebe ich neben der CSS-Klasse “form-group” eine eigene ID um sie später identifizieren zu können, wenn im Eingabefeld nichts oder etwas falsches eingegeben wurde. Im Label schreibe ich eine kurze Bezeichnung zum jeweiligen Eingabefeld. Das Label erhält die Klasse “control-label”.

Das Eingabefeld wird als normales “Input” generiert. Dieses erhält die Zuweisung eines Typen, eine ID (sollte identisch sein mit dem “for”-Inhalt des Labels) sowie die Klasse “form-control”. Zusätzlich kann ich einen so genannten Placeholder vergeben. Dort kann genauer auf den gewünschten Inhalt des Eingabefelds eingegangen werden.

Während man sich die Funktion früher mit JavaScript selbst programmieren musste, kann HTML5 das heute selbst. Ist das Feld leer, wird nämlich der Placeholder angezeigt. Klickt der User in das Feld verschwindet der Text. Einfach, aber sehr nützlich für den User.

Senden-Button (Submit)

Auch den sogenannten “Submit-Button” packe ich in eine eigene Formular-Gruppe. Zusätzlich vergebe ich hier in der Formular-Gruppe zusätzlich die Klasse “text-right”, damit der Button dann am rechten äußeren Rand platziert wird. Das mach ich persönlich immer so, weil der User von link nach rechts liest.

<div class="form-group text-right">
     <button 
          type="submit" 
          id="submitBtn" 
          class="btn btn-primary btn-lg">
               Absenden
     </button>
 </div>

Nun haben wir das HTML-Grundgerüst unseres Kontaktformulars bereits erstellt und können mit dem Kontrollieren der eingegebenen Daten beginnen.

Tool Kontaktformular

Formularkontrolle

Die Formularkontrolle macht relativ viel Arbeit, da man hier auf alle Möglichkeiten vorbereitet sein sollte. Wie bereits bei der Planung festgelegt, ist es uns wichtig, dass Pflichtfelder ausgefüllt sind und das wirklich eine E-Mail Adresse in das entsprechende Feld eingegeben wurde. Erst dann soll im Hintergrund das Anfrage versendet werden.

Für die Kontrolle nutzen wir nun JavaScript mit der Bibliothek jQuery. Mit jQuery können wir sehr einfach bestimmte Prozesse abfangen und auswerten und zudem den HTML-Code modifizieren wenn möglich. Der JavaScript-Code sollte innerhalb des Body-Tags erfolgen und nach dem Einbinden der externen JavaScript-Dateien.

Abfangen des Absendens

<script>
     $( '#frmContact').submit( function() {
          var formControl = true;
          alert( 'Test!' ); <!-- Nur zum Testen -->
          return false;
     } );
</script>

Mit der jQuery-Funktion “submit()” können wir abfragen, wann der User das Formular absenden möchte. Über die ID “frmContact”, die im Form-Tag vergeben wurde, können wir das Abesenden von genau diesem Formular abfangen und unsere Kontrolle machen.

Um zunächst zu zeigen und zu testen, ob das Abfangen auch funktioniert, sollte sich nun ein kleines Fenster öffnen, welches den Inhalt “Test” hat. Die Zeile “return false;”, muss immer vorhanden sein. Würde hier nichts stehen oder “return true;”, dann würde die aktuelle Seite neu geladen werden. Die Variabel “formControl”, wird uns am Ende der Funktion sagen können, ob es Fehler bei den Eingaben gab oder nicht. Diese ist zunächst auf “true” gesetzt, da wir grundsätzlich davon ausgehen, dass alle Eingaben korrekt gemacht wurden.

Inhalt der Eingabefelder abfragen

var vorname = $( '#vorname' );
var nachname = $( '#nachname' );
var email = $( '#email' );
var nachricht = $( '#nachricht' );
var captcha = $( '#captcha' );

Da jedes Eingabefeld eine ID hat, können wir diese über den jQuery-Selektor sehr einfach identifizieren. Im nächsten Schritt können wir mit Hilfe einer “if”-Abfrage bereits anfangen die Inhalt der Formularfelder auszuwerten.

if(vorname.val() == '') {
     formControl = false;
}

Mit der jQuery-Funktion “val()” erhalten wir nun den Inhalt der Eingabefelder. Ist kein Inhalt vorhanden, wird die Variable “formControl” sofort auf “false” gesetzt. Diese if-Abfrage können wir nun für jedes Pflichtfeld wiederholen.

E-Mail Eingabe auf Richtigkeit überprüfen

Um die Eingabe im E-Mail Feld zu kontrollieren, benutzen wir eine extra Funktion. Diese werden wir hier nicht weiter kommentieren, da es den Umfang sprengen würde:

function validateEmail(email) { 
     var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
     return re.test(email);
} 

Die if-Abfrage sieht dann wie folgt aus:

if(validateEmail(email.val()) == false) {
     formControl = false;
}

Ausgeben einer Fehlermeldung

Bootstrap stellt uns wie bereits erwähnt viele CSS-Klassen und Elemente zur Verfügung, um die Nutzerfreundlichkeit sehr einfach zu wahren. Im nächsten Schritt, wollen wir, wenn ein Formularfeld falsch ausgefüllt wurde, dass dieses rot markiert wird. Dafür erweitern wir einfach unsere if-Funktion. Hier wird derzeit lediglich die Variable “formControl” auf “false” gesetzt.

if(vorname.val() == '') {
     formControl = false;
     $( '#frmGrpVorname' ).addClass( 'has-error' ); <!-- NEU** -->
}

Ist der Inhalt falsch, erhält die Formular-Gruppe zusätzlich die Klasse “has-error”, womit das Label und das Input-Feld rot markiert werden.

Zusätzlich müssen wir allerdings nun dafür sorgen, dass bei jedem Aufruf der Formularkontrolle die Klasse wieder entfernt wird, denn sonst bleibt sie immer rot.

$( '#frmGrpVorname' ).removeClass( 'has-error' );

Absenden der Daten via AJAX

Die Kontrolle der Eingaben ist somit erledigt. Hat die Variable “formControl”, nach dem Abarbeiten aller Kontrollen immer noch den Wert “true”, können wir das Formular also absenden. Die PHP-Datei erstellen wir im nächsten Schritt. Sie wird im folgenden Code allerdings bereits aufgerufen.

if(formControl) {
     $.ajax({
          type: "POST",
          url: "php/senden.php",
          data: { 
               vorname:vorname, 
               nachname:nachname, 
               email:email, 
               nachricht:nachricht 
          }
     }).done(function(msg) {
          $( '#message' ).addClass( 'alert' );
          $( '#message' ).addClass( 'alert-success' );
          $( '#message').html( msg );
     });
}

Wir fragen also zunächst ab, ob die Variable “formControl” noch den Wert “true” hat. Ist dies der Fall, wird die Funktion AJAX aufgerufen. Die Variablen werden mit dem Typ “POST” an die PHP-Datei gesendet. Mit “data”, werden die Variablen definiert, die gesendet werden sollen.

Am Ende soll eine Erfolgsmeldung erscheinen. Die Nachricht, die diese enthält, wird von der PHP-Datei an unser JavaScript gesendet und dann in ein DIV mit der ID “message” geschrieben. Das DIV kann überall auf der Seite enthalten sein. Sollte allerdings keinen Inhalt und keine CSS-Klasse haben. Nur dann ist das DIV zunächst nicht sichtbar.

Tool Kontaktformular

Die Anfrage per PHP an den Webmaster versenden

Die PHP-Datei werden wir in diesem Tutorial auch sehr kurz, knapp und einfach halten. Grundsätzlich gibt es noch einige Sicherheitsaspekte, die beachtet werden sollten. Dies würde aber den Rahmen dieses Tutorials etwas sprengen.

<?php
$empfaenger = "webmaster@beispiel.de"; //Hier die E-Mail
$absendername = "Kontaktformular";
$absendermail = $_POST['email'];
$betreff = "Neue Anfrage";
$text = "
     Vorname: ".$_POST['vorname']."\n
     Nachname: ".$_POST['nachname']."\n
     E-Mail: ".$_POST['email']."\n
     Nachricht: ".$_POST['nachricht']."\n";
mail($empfaenger, $betreff, $text, "From: $absendername <$absendermail>");

echo("Das Formular wurde erfolgreich versendet");
?>

Mit der PHP-Mail Funktion werden nun alle Daten des Formulars an die, bei $empfaenger festgelegten E-Mail Adresse, versendet. Das “echo()”, gibt den Text wieder, der dann in der Erfolgsmeldung erscheint.

Download der Dateien

Tutorial Bootstrap Kontakformular

Tutorial als Video

Wir freuen uns wie immer über Kommentare. Was würdet ihr besser machen? Was benötigt ein Kontaktformular noch? Haben wir was vergessen?

Bootstrap 3 Submenu

Bootstrap 3 Dropdown Submenu – Die Lösung

In der Version 2 von Twitter Bootstrap konnte mit der CSS-Klasse “dropdown-submenu” ganz einfach das so genannte Submenu erstellt werden. Seit dem Release der Version 3.0 gibt es diese Klasse nicht mehr. Wir erklären, wie man auch in der aktuellen Version das Submenu nutzen kann.

Um die Navigation einer Webseite oder einer Anwendung übersichtlich und leicht nutzbar zu machen, bietet es sich oft an, mit so genannten Submenus zu arbeiten. Das bedeutet, dass man die Navigation strukturiert aufbauen kann. Sobald ein Besucher mit der Maus auf einen Link im Menü klickt oder mit der Maus darauf zeigt, öffnet sich ein Menü mit weiteren Links. Auch dieses Untermenü kann dann nochmals unterteilt werden.

In der Version 2 von Twitter Bootstrap war dies eine Standard-Funktion, welche in der aktuellen Version leider nicht mehr vorhanden ist. Warum diese entfernt wurde, weiß man nicht. In diesem Artikel werden wir zeigen, wie man auch in Version 3 nicht darauf verzichten muss und sich das Submenu selber nachbauen kann.

In diesem Beispiel werden wir ein vertikales Menü erstellen, dass die Untermenüs beim “Hovern”, also wenn der Mauszeiger über dem übergeordneten Links ist, nach rechts hin öffnet.

HTML für das Submenu

Wir erstellen nun den gesamten HTML-Code für das Submenu. Dabei werden wird 3 Hauptlinks erzeugen, wobei der Dritte ein Untermenü enthält.

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"
   style="display: block; position: static; margin-bottom: 5px; width: 180px;">
     <li>
          <a href="#">Link 1</a>
     </li>
     <li>
          <a href="#">Link 2</a>
     </li>
     <li class="dropdown-submenu"> <!-- Neue CSS-Klasse .dropdown-submenu -->
          <a href="#">Link 3</a>
          <ul class="dropdown-menu">
               <li class="dropdown-submenu">
                    <a href="#">Link 3.1</a>
                    <ul class="dropdown-menu">
                         <li>
                              <a href="#">3.1.1</a>
                         </li>
                         <li>
                              <a href="#">3.1.2</a>
                         </li>
                    </ul>
               </li>
          </ul>
     </li>
</ul>

Mit diesem HTML-Schnippsel haben wir jetzt das folgende Menü erzeugt:

  • Link 1
  • Link 2
  • Link 3
    • Link 3.1
      • Link 3.1.1
      • Link 3.1.2

Wie man gut sehen kann, wird lediglich eine neue CSS-Klasse benötigt, um so viele Ebenen zu erzeugen, wie man möchte.

Die CSS-Klasse .dropdown-submenu

Wie bereits oft erwähnt, ist es am besten die eigenen CSS-Styles in einer neuen Datei bzw. im Head-Bereich der betreffenden Datei zu definieren. Die Standard-CSS Dateien von Bootstrap sollten immer so bleiben wie sie sind. Hier nun die CSS-Styles, die hinzugefügt werden müssen um das Submenu zu erzeugen.

.dropdown-submenu {
     position: relative;
}

Hiermit wird sichergestellt, dass sich das DIV, dass das Submenu erzeugt sich fließend in das bereits bestehende Dokument einbringt.

.dropdown-submenu>.dropdown-menu {
     top:0;
     left:100%;
     margin-top:-6px;
     margin-left:-1px;
     -webkit-border-radius:0 6px 6px 6px;
     -moz-border-radius:0 6px 6px 6px;
     border-radius:0 6px 6px 6px;
}

Hier wird das DIV angepasst, welches als ausklappendes Menü benutzt wird.

.dropdown-submenu:hover>.dropdown-menu {
     display:block;
}

Wird über ein DIV mit der Klasse .dropdown-submenu gehovert, wird das jeweilige Dropdown-Menu angezeigt.

.dropdown-submenu>a:after {
     display:block;
     content:" ";
     float:right;
     width:0;
     height:0;
     border-color:transparent;
     border-style:solid;
     border-width:5px 0 5px 5px;
     border-left-color:#cccccc;
     margin-top:5px;
     margin-right:-10px;
}

.dropdown-submenu:hover>a:after {
     border-left-color: #fff;
}
.dropdown-submenu.pull-left {
     float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
     left:-100%;
     margin-left:10px;
     -webkit-border-radius:6px 0 6px 6px;
     -moz-border-radius:6px 0 6px 6px;
     border-radius:6px 0 6px 6px;
}

Das sich öffnende Submenu erhält hierdurch eine Ausrichtung nach Links.

Ihr habt eine eigene Lösung für die Submenus in Bootstrap 3? Wir freuen uns auf Kommentare!

Tokenfield für Bootstrap

Formularfelder mit Tag-Funktion – Tokenfield für Bootstrap

Stichwörter, oder so genannte Tags, sind sehr nützlich. Egal ob in einem Content-Management-System oder einer einfachen Datenbankanwendung, überall helfen sie, um Inhalte schneller wieder zu finden oder zu filtern. Wer allerdings schon einmal probiert hat, ein Tag-System sinnvoll in einem Formular einzubinden, der merkt – so einfach ist das gar nicht. Tokenfield für Bootstrap soll das ändern und vereinfachen.

Inhaltsverzeichnis

Tokenfield.js für Bootstrap im Video erklärt

In diesem Video habe ich eine kurze Zusammenfassung darüber erstellt, wie Tokenfield.js funktioniert und wie die Benutzung aussieht. Mit der Verwendung dieser Bootstrap Erweiterung ist es trotzdem noch möglich, jegliche CSS-Klassen, die Bootstrap für Formulare bietet, zu nutzen. Im folgenden wird erklärt, wie Tokenfield.js installiert wird und wie man es benutzt.

Download der Dateien und Installation im eigenen Script

Den Link zum Download findet man auf der GitHub Projekt Seite von Tokenfield. Mit dem Klick auf den Button “Download Development”, wird ein komprimierter Ordner heruntergeladen, der sämtliche Projektdateien beinhaltet. Dieser Ordner sollte im nächsten Schritt entpackt werden. Keine Sorge: Wir brauchen nur einen Bruchteil der Dateien, die im Ordner sind um es in unser eigenes Bootstrap-Projekt zu implementieren.

Welche Dateien braucht man wirklich?

Wir gehen davon aus, dass Tokenfield in einem Bootstrap-Projekt verwendet wird. Somit ist jQuery, die Bootstrap JS-Datei und die Bootstrap CSS-Datei bereits vorhanden. Aus dem heruntergeladenen und entpackten Ordner werden nun folgende Dateien wirklich benötigt:

  • dist/bootstrap-tokenfield.min.js
  • dist/css/bootstrap-tokenfield.min.css
  • dist/css/tokenfield-typeahead.min.css

Ich verwende immer gerne die “min.css”-Dateien, da diese eine kleine Dateigröße haben und somit schneller geladen werden. Die kleinere Dateigröße ergibt sich dadurch, dass alle Leerzeichen und Leerzeilen einfach entfernt werden und das gesamte JavaScript oder CSS somit ein einziger Fließtext ist.

Die JavaScript-Datei kann nun in Deinen Javascript-Ordner und die CSS-Dateien in Deinen CSS-Ordner kopiert werden. Diese müssen nun im Script importiert werden.

CSS- und JavaScript-Dateien einbinden

Die CSS-Dateien müssen im Head-Bereich der Datei eingebunden werden. Zur Sicherheit sollten diese auch nach dem Bootstrap-CSS und, wenn vorhanden, nach den eigenen Stylesheets verlinkt werden.

<link href="css/bootstrap-tokenfield.min.css" rel="stylesheet">
<link href="css/tokenfield-typeahead.min.css" rel="stylesheet">

Wird mit der Typahead-Funktion gearbeitet (Autovervollständigung), muss man sich zwischen dem jQuery UI Autocomplete oder dem Twitter Typeahead entscheiden. Bei der jQuery UI Variante muss zusätzlich ein CSS eingebunden werden.

<!-- jQuery UI CSS -->
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" type="text/css" rel="stylesheet">

Diese Datei muss nicht auf dem eigenen Server liegen. Sie wird von jQuery online bereitgestellt. Dies hat Vorteile hinsichtlich der Ladezeit, welche wir in einem extra Artikel hier auf Bootstrapaholic.de demnächst vorstellen werden und erläutern werden.

Die JavaScript-Datei sollten am Ende der Datei eingebunden werden. Dies hat ebenfalls mit der Ladezeit zu tun, da diese erst geladen werden sollten, wenn der Großteil der Datei bereits heruntergeladen und gerendert wurde. Die folgende JS-Datei muss nach der “Bootstrap.min.js” importiert werden.

<script src="js/bootstrap-tokenfield.min.js"></script>

Über dieser Einbindung muss nun entweder jQuery UI Autocomplete oder Twitter Typeahead wie folgt eingebunden werden:

<!-- jQuery UI Autocomplate -->
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<!-- ODER(!) -->

<!-- Twitter Typeahead -->
<script type="text/javascript" src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>

Tokenfield.js in eigenen Formularen benutzen

Zur Veranschaulichung habe ich ein Beispiel-Formular erstellt, welches ein Input type text enthält.

Beispiel-Formular für Tokenfield.js
Abbildung 1: Beispiel-Formular um Tokenfield.js zu testen

Wichtig hierbei ist die ID des Feldes, dass via. Tokenfield.js zu einem Feld mit AutoComplete und Tag-Funktion werden soll. Dieses Input-Feld wird dann wie folgt mit einem JavaScript am Ende der Datei angesprochen.

Tokenfield per JavaScript ansprechen
Abbildung 2: Ansprechen des Input-Felds via JavaScript

Wie auf Abbildung 2 zu sehen ist, wird mit jQuery das Input-Feld mit der ID “tokenfield” angesprochen. Mit dem Wert “autocomplete” werden nun  in “source” die Daten vorgegeben, die als Autovervollständigung angezeigt werden sollen. Mit “delay” wir festgelegt, wie viel Zeit vergehen muss, damit die Autocomplete Funktion beginnt, also wann die Vorschläge angezeigt werden sollen. 100 ist hier ein guter Wert.

Verfügbare Attribute für die Funktion tokenfield()

Attribut Typ Standard Beschreibung
tokens String, Array [] Hiermit kann man beispielsweise einem bestimmten Text, der im Feld angezeigt wird, zusätzlich einen Wert zuweisen (bsp: ID in der Datenbank).
limit int 0 Maximale Anzahl der Tags, die in das Feld geschrieben werden können.
minLength int 0 Minimale Länge eines Tags
minWidth int 60 Minimale Größe des Input-Felds
autocomplete object {} Die Autocomplete Optionen für jQuery UI
showAutocompleteOnFocus boolean false Sollen bereits beim Klick in das Feld Vorschläge erscheinen oder erst nach dem Tippen? Funktioniert nur mit jQuery UI.
typeahead array [] Optionen für Twitter Typeahead
delimiter string, array “,” Mit welchem Zeichen sollen die einzelnen Stichwörter getrennt werden? Ist vor allem wichtig, wenn diese Daten dann per PHP ausgelesen werden sollen.
beautify boolean true Somit kann auch ein Leerzeichen nach dem Komma eingegeben werden, ohne, dass dieses mit in das Stichwort übernommen wird.

Fazit zu Tokenfields.js

Ein sehr schöne und einfache Lösung, für so eine doch recht komplexe Funktion. Die Verwendung auf mobilen Endgeräten funktioniert leider nicht ganz einwandfrei, kann jedoch selber für sich entscheiden, ob die Darstellung und Verwendung in Ordnung ist oder nicht.

Du hast selbst schon Tokenfields.js getestet oder hast Fragen dazu? Ich freue mich auf Deinen Kommentar.

Screenshot TWILLI Air

TWILLI Air – Minimalistische “One-Page” Landing Page

Wer auf der Suche nach einer modernen One-Page Landing Page ist, wird mit TWILLI Air von “TwilliThemes” sehr gut bedient sein. Durch ein minimalistisches Design mit Hintergrundbildern, die sich über die gesamte Bildschirmbreite erstrecken, macht dieses Bootstrap Theme einen professionellen Eindruck. Wir haben TWILLI Air näher unter die Lupe genommen und zeigen, was diese Landing Page alles kann.

Inhaltsverzeichnis

Design und Wirkung

TWILLI Air besticht durch sein minimalistisches Design, welches vor allem durch die Verwendung von wirkungsvollen Hintergrundbildern besticht. Das Theme ist eine klassische One-Page Landing Page, die auch durch das Verwenden von Parallax Scrolling sehr aufgeräumt und ruhig wirkt.

Im linken Bereich der Landing Page befindet sich das Menü, welches “fixed” ist, also sich immer am gleichen Platz des Bildschirms befindet. Der Hintergrund des Menüs ist ein Farbverlauf, der im Standard-Template Dunkelgrau ist und dessen Transparenz nach unten hin immer größer wird.

Der untere Bereich des Menüs
Abbildung 1: Copyright und Social Media

Im unteren Bereich des Menüs können Social Media Accounts, wie Facebook, Twitter und Google Plus, verlinkt werden (Siehe Abbildung 1). Für ein Copyright ist ebenfalls Platz. Für deutsche Webseiten-Betreiber könnte es sich hier auch anbieten den Link zum Impressum und der Datenschutzerklärung zu platzieren.

Das Webseiten-Logo kann im oberen Bereich des Menüs platziert werden. Im Beispiel-Content wird ein Logo im PNG-Format mit der Größe 117px x 53px und transparentem Hintergrund verwendet.

Hauptseite und Inhalte

Wie bereits erwähnt verwendet das Template das so genannte Prallax Scrolling. Vorteil dabei ist, dass der Besucher keine neue Seite aufrufen muss, sondern jegliche Inhalte auf einer Seite sind. Eine Besonderheit bei TWILLI Air ist, dass sich das Hintergrundbild ändert, wenn der Besucher die Webseite nach unten oder oben scrollt. Somit kann jedem Bereich ein eigenes Hintergrundbild gegeben werden.

Um die Ladezeit der Webseite in Maßen zu halten, wird beim Aufruf der Seite lediglich das erste Hintergrundbild geladen. Alle andere werden dann nach der Reihe im Hintergrundbild vorgeladen, so dass der Besucher dies, im Normalfall, nicht mitbekommt.

Ansonsten lassen sich mit TWILLI Air jegliche Bootstrap-Elemente wie gewohnt benutzen.

Sonstige Funktionen

Kontaktformular TWILLI Air
Abbildung 2: Kontakformular mit Captcha und Formular-Kontrolle

Im Template enthalten ist unter anderem ein fertiges Kontaktformular (siehe Abbildung 2). Die entsprechende PHP-Datei, die das Versenden der Nachricht an den Webmaster übernimmt ist ebenfalls mit dabei. Das Kontaktformular enthält außerdem ein Captcha und eine Formular-Kontrolle, um automatisierte Spam-Nachrichten zu vermeiden.

Die Felder “Name”, “E-Mail Adresse”, “Nachricht” und “Telefonnummer”, sind bereits vorgefertigt. Das Erweitern des Formulars um weitere Eingabefelder ist relativ einfach.

Darstellung auf mobilen Endgeräten

Wie für Bootstrap Themes üblich, ist auch TWILLI Air für die Darstellung auf mobilen Endgeräten wie Smartphones oder Tablets, durch responsives Webdesign, optimiert.

Smartphone

TWILLI Air auf dem SmartphoneAbbildung 3: TWILLI Air iPhone 5

Wie auf Abbildung 3 zu sehen, verschiebt sich das Menü in der mobilen Ansicht nach oben. Durch das Klicken auf das Quadrat werden die Links aus dem Menü nach unten hin herausgeschoben. Was etwas Schade ist, ist dass der Button “find out more”, nicht mehr ganz zu sehen ist. Hier ist natürlich auch die Länge des Textes verantwortlich.

Wer auf dem Desktop mehr Text, als auf dem Smartphone anzeigen möchte, kann ganz einfach zwei Texte vorbereiten und diese dann mit den folgenden Bootstrap-CSS-Klassen anzeigen lassen oder nicht.

.visible-xs <!-- Zeigt Inhalte nur auf dem Smartphone -->
.hidden-xs <!-- Verbirgt Inhalte nur auf dem Smartphone -->

Tablet

Screenshot TWILLI Air auf dem TabletAbbildung 4: TWILLI Air auf einem iPad 3

Wie auf Abbildung 4 zu sehen, wird die Landing Page auf Tablets genauso, wie auch auf dem Desktop angezeigt. TWILLI Air lässt sich auch so sehr gut benutzen.

Mögliche Einsatzbereich der Landing Page

Meiner Meinung nach kann TWILLI Air vor allem für kleine Firmen- oder auch Freelancer-Webseiten interessant sein. Durch die Galerie-Funktion können zum Beispiel Fotos der Mitarbeiter oder auch der Produkte und Referenzen gut abgebildet werden.

Das Kontaktformular sollte nach den eigenen Bedürfnissen angepasst werden und selbstverständlich “eingedeutscht” werden.

Bei der Auswahl der Hintergrundbilder sollte man sich Zeit lassen. Diese sind die elementaren “Wirker” dieser Landing Page. Wer gute Bilder sucht, die man frei verwenden kann (sogar ohne Angabe der Quelle), sollte übrigens auf Unsplash fündig werden.

Verwendete JavaScripts und Schriftarten

  • jQuery 1.11.1
  • Bootstrap 3.2.0
  • jQuery Easing 1.3
  • Backstretch
  • Owl Carousel 1.3.2
  • Detect Mobile Browsers
  • Google Fonts
  • Font Squirrel
  • Morguefile
  • iconmonstr
  • Font Awesome 4.2.0
  • Lightbox 2.7.1

Technische Daten des Themes

Bezeichnung Werte
Bootstrap-Version 3.2.x
Layout-Art Responsive
Browser-Unterstützung Internet Explorer 9+
Chrome
Firefox
Opera
Safari
Preis pro Lizenz $ 10
Anbieter WrapBootstrap.com

Fazit

TWILLI Air ist ein sauberes, minimalistisches Template, mit einfachen Funktionen, die viel hermachen. Das Anpassen an die eigenen Bedürfnisse, ist relativ einfach. Grundlagenwissen im Bereich Bootstrap, CSS und JavaScript sollte jedoch vorhanden sein.

Du hast bereits Erfahrung mit diesem Template, oder hast Fragen dazu? Ich freue mich auf Deinen Kommentar!

Bootstrap macht süchtig – man muss nur wissen wie…

Unter diesem Motto startet heute am 16.06.2014 Bootstrapaholic. Wer das einfache Handling von Twitters Framework Bootstrap einmal verstanden hat, der möchte es nicht mehr missen. Auf Bootstrapaholic erwarten Dich Tutorials, Erklärungen und Beispiele zu Boostrap auf Deutsch. Einsteiger und Fortgeschrittene sollen hier auf ihre Kosten kommen.

Seit nunmehr zwei Jahren arbeite ich mit Twitters Framework Bootstrap. Es gibt meiner Meinung nach kaum einfachere Methoden um responsive Webseiten und Webapplikationen zu erstellen. Die bereits enthaltenen Module und Komponenten erlauben es zudem auch Einsteigern an Thematiken wie beispielsweise User Experience zu denken und Ideen einfach und schnell umzusetzen.

Die Idee hinter Bootstrapaholic

Gerade bei meinen ersten “Gehversuchen” mit Bootstrap tat ich mich persönlich schwer das gesamte System hinter diesem Framework aus CSS und JavaScript zu verstehen. Das mag daran liegen, dass es mein erstes Framework war, mit dem ich gearbeitet habe, jedoch denke ich, dass es vielen Bootstrap Einsteigern so gehen wird.

Die Idee zu Bootstrapaholic kam mir bereits im August 2013. Meiner Meinung nach gab es bereits damals, wie auch jetzt, zu wenig deutschsprachige Ressourcen zum Thema. Bootstrapaholic soll deshalb eine dieser deutschsprachigen Ressourcen werden.

Nothing else but Bootstrap

Der “Markt” rund um Bootstrap ist in den letzten Monaten gerade zu explodiert. Bootstrap Skins, Bootstrap Plugins, Bootstrap Tools und vieles mehr. Mein Ziel ist es erwähnenswerte “Produkte” auf Bootstrapaholic genauer unter die Lupe zu nehmen und zu zeigen, wie man sie einbaut und verwendet.

Das Hauptaugenmerk möchte ich allerdings ganz klar auf Tutorials und Erklärungen rund um Twitter Bootstrap legen. Zu ausführlichen Bootstrap Tutorials möchte ich auf dem Bootstrapaholic YouTube Channel auch Videos machen, weil ich denke, dass diese einen sehr guten Lerneffekt haben.

Wann geht es los und was werden die ersten Themen sein?

An der ersten Tutorial Serie arbeite ich bereits gerade. Zu einem richtigen Blog zum Thema Bootstrap gehört natürlich auch ein echtes WordPress Theme, das eigens mit Bootstrap erstellt wurde. An diesem Theme arbeite ich gerade und dazu wird es eine zwei- bis vierteilige Tutorial Serie mit Videos geben. Der erste Teil wird bereits in dieser Woche das Licht der Welt erblicken.

Mitmachen erwünscht!

Auch wenn dieser Blog mich, allein durch das Schreiben ausführlicher Artikel zum Thema Bootstrap, persönlich weiterbringt, weil ich mich mit bestimmten Themen detailliert auseinandersetzen werde, soll er keinen Monolog darstellen. Mich würde es freuen, wenn Leser Fragen stellen, oder Vorschläge für Tutorials einreichen.

Bootstrapaholics, die ebenfalls Lust haben hier mitzuschreiben, sind herzlich eingeladen. Egal ob Gastartikel oder Co-Autoren – kontaktiert mich einfach.

Langfristig für neue Bootstrapaholics sorgen

Bootstrap entwickelt sich schnell weiter und wie bereits oben erwähnt, wird der Markt rund um dieses Framework, immer größer. Deshalb plane ich mit diesem Projekt auch langfristig. Ich freue mich auf zahlreiche Diskussionen und eine große Leserschaft.

Stay tuned!