Post direkt anzeigen, wenn nur ein Suchergebniss

Wenn der Benutzer nur einen einzigen Post findet mit einem entsprechenden Suchbegriff, macht es Sinn, den Benutzer direkt auf diesen Post weiterzuleiten. Der Besucher spart letztendlich einen Klick und kommt schneller an die gesuchte Information. Sollte die Suche mehr als ein Ergebnis liefern, macht dies natürlich weniger Sinn.

add_action('template_redirect', 'redirect_single_post');
function redirect_single_post() {
    if (is_search()) {
        global $wp_query;
        if ($wp_query->post_count == 1) {
            wp_redirect( get_permalink( $wp_query->posts['0']->ID ) );
        }
    }
}

Quelle: http://www.paulund.co.uk/redirect-…

Anzahl der Suchergebnisse festlegen

Standardmäßig zeigt WordPress maximal 10 Ergebnisse pro Suchanfrage auf einmal an. Diese Zahl ist für manche UseCases aber vielleicht zu wenig, deswegen gibt es die Möglichkeit, die Anzahl der Post pro Seite beliebig zu ändern. Dazu muss einfach nachfolgender Code in die functions.php geschrieben werden.

function limit_posts_per_search_page() {
	if ( is_search() )
		set_query_var('posts_per_archive_page', 20); 
}

add_filter('pre_get_posts', 'limit_posts_per_search_page');

Quelle: http://wordpress.org/support/topic…

Relevanssi

Relevanssi ist ein Plugin für WordPress, dass im Vergleich zu Standardsuche sehr viel kann. Eines der interessantesten Features von Relevanssi ist, dass Suchergebnisse nach Relevanz geordnet werden können, standardmäßig ordnet WordPress Ergebnisse nach Datum. Zusätzlich können ohne viel Aufwand auch Kommentare und Kategorien durchsucht werden. Wer sich also allgemein eine mächtigere Suche für WordPress wünscht, sollte einen Blick auf Relevanssi werfen.

Nur in einer bestimmten Kategorie suchen

Es ist auch ohne zusätzliche Plugins möglich, nur in bestimmten Kategorien zu suchen. Dazu muss folgendes Snippet in die functions.php eingefügt werden:

function SearchFilter($query) {  
  if ($query->is_search) {
    // Hier die entsprechende Kategorie wählen
    $query->set('cat', '8,9,12');   
  }  
  return $query;  
}     
add_filter('pre_get_posts','SearchFilter');  

Nur einen bestimmten Post Type durchsuchen

Wenn man auf seiner WordPress Seite mehrere Post Types verwendet (z.B. Artikel, News, Filme etc.) möchte man wahrscheinlich auch festlegen, in welchem Type gesucht werden soll. Dies funktioniert ganz analog zur Suche in einer bestimmten Kategorie.

function SearchFilter($query) {  
  if ($query->is_search) {  
    // Post Type angeben 
    $query->set('post_type', 'feeds');  
  }  
  return $query;  
}  
   
add_filter('pre_get_posts','SearchFilter');  

Verschiedene Themes — Stylesheet Switch

Es gibt Webseiten die bieten verschiedene Themes an, welche im besten Fall unkompliziert gewechselt werden können. So einen Themeswitcher mit jQuery zu basteln ist relativ einfach. Ein Browser arbeitet Stylesheets in der Reihenfolge ab, in der sie in die Seite eingebunden werden, dass heißt insbesondere, dass Styles die in einem anderen Stylesheet weiter oben definiert wurden, automatisch von nachfolgenden Stylesheets überschrieben werden.

$("#Theme1Switch").click(function() {
   $("link[media='screen']").attr("href", "Theme1.css");
 });
 
 $("#Theme2Switch").click(function() {
   $("link[media='screen']").attr("href", "Theme2.css");
 });
 
 $("#Theme3Switch").click(function() {
   $("link[@media='screen']").attr("href", "Theme3.css");
 });

Alternativ könnte man auch mit data-Attributen arbeiten und gewinnt somit noch etwas an Flexibilität.

$('.themeSwitcher').click(function() {
   var theme = $(this).data('theme-stylesheet');
    $("link[@media='screen']").attr("href", theme);

});

Eigenen Selektor definieren

Auf Element greift man bei jQuery im Allgmeinen per CSS Selektor zu, auf das Div-Element mit der ID haus z.B. greift man mit $('#haus') zu. Nun gibt es aber noch die Möglichkeit, eigene jQuery Selektoren zu definieren, mit denen wir z.B. jedes Element auswählen könnten, welches einen roten Rahmen hat.

$.extend($.expr[':'], {
    redBorder: function(el) {
        return $(el).css('borderColor') === 'red';
    }
});
 
$('.element:redBorder').click(function() {
    alert('Dieses Element hat einen roten Rahmen!');
});

Element vertikal und horizontal zentrieren

Für dieses Problem gibt es bereits einige jQuery Plugins, aber wir können auch schnell selber ein Plugin schreiben, dass Elemente horizontal und vertikal auf der Seite zentriert.

// jQuery Plugin "anlegen"
jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
}
 
// Das Plugin kann dann direkt verwendet werden.
$('.element').center();

Ähnliche Resultate sind auch rein mit CSS möglich, allerdings ist das vertikale Zentrieren nicht ganz so einfach wie das horizontale.

Mauskoordinaten bestimmen

Ab und an kann es vorkommen, dass man die Mauskoordinaten braucht und irgendwie weiterverarbeiten muss. Mit jQuery ist es kein Problem an diese Informationen zu kommen, wie nachfolgendes Script zeigt.

$(window).mousemove(function(e){
    var x_cord = e.pageX;
    var y_cord = e.pageY;
  //...
}); 

Prüfen ob Element in einem anderen Element ist

Wenn man prüfen möchte, ob ein bestimmtes Element Kind von einem anderen ist, kann man dies mit jQuery auf sehr einfache Weise tun.

if($(".parentElement").has(".childClass").length)){
//mach was....
}
else{
//mach ebenfalls was....
}

Sublime Text

Sublime Text kann von jedem heruntergeladen und getestet werden, wer eine Lizenz erwerben möchte muss aber 79$ bezahlen. Die kostenlose Sharewareversion kann aber ohne Einschränkungen und Zeitlimit verwendet werden. Trotzdem sind die 79$ sehr gut investiert, wenn man viel mit Editor arbeitet. Außerdem unterstützt man den Entwickler, der einen wirklich großartigen Job leistet.

Besonderheiten

Sublime Text erlaubt das Öffnen und Bearbeiten mehrer Dateien zur gleichen Zeit. Dies ist besonders praktisch, wenn man z.B. auf einer Seite das HTML Markup und auf der anderen Seite das zugehörige CSS Stylesheet offen hat. Je nach Bildschirmgröße sind auch 3 Spalten möglich, ohne dass der Editor unübersichtlich wirkt.

Ebenfalls sehr nützlich ist die Instant Project Switch  Funktion. Manchmal arbeitet man nicht nur an einem Projekt, sondern gleichzeitig an mehreren. Von großen IDEs wie z.B. Netbeans kennt man die Möglichkeit, unterschiedliche Projekte zu verwalten. Sublime Text bietet eine ähnliche Möglichkeit und erlaubt die Zuordnung von bestimmten Dateien zu Projekten. Somit kann man mit wenigen Mausklicks alle Dateien zu einem Projekt laden, aber auch wieder schließen.

Ein weiteres, sehr geniales Feature, ist die Möglichkeit der Multi-Selektion, d.h. es können mehrer Stellen im Dokument gleichzeitig angewählt und bearbeitet werden. Damit hat man die Möglichkeit in mehrere Zeilen gleichzeitig zu schreiben, oder eine Variable schnell im ganzen Dokument umzubenennen.

Plugins

Für Sublime Text gibt es jede Menge nützliche Plugins. Im Folgenden werden kurz drei sehr nützliche vorgestellt, natürlich gibt es noch eine Menge mehr!

Package Control
Dieses Plugin ist dazu da, um andere Plugins zu verwalten und sehr einfach installieren zu können. Mit Package Control ist es möglich, Plugins direkt aus dem Editor heraus zu installieren. Ebenso ist es möglich, andere Plugins ohne einen einzigen Mausklick binnen Sekunden zu installieren. Außerdem sorgt Package Control dafür, dass alle Plugins immer auf dem neusten Stand sind.

Emmet
Emmet ist eines meine Lieblingsplugins, mit Emmet ist es möglich sehr schnell HTML, CSS und Javascript Code zu erzeugen. Zum Thema Zen Coding gab es auf Staticfloat vor einiger Zeit bereits einen Artikel, Emmet ist nun der Nachfolger und bietet noch einiges mehr an Features.

So hat man nun die Möglichkeit, erstellte HTML Elemente direkt mit einem Platzhalter Inhalt zu befüllen. Lästiges Lorem Ipsum Copy und Paste, gehört damit der Vergangenheit an.

Beispiel: (+[TAB] steht für das Drücken der [TAB]-Taste)

p*4>lorem+[TAB]

Wird automatisch zu:
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!</p>
<p>Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque quos facere sequi unde optio aliquam!</p>
<p>Tenetur quod quidem in voluptatem corporis dolorum dicta sit pariatur porro quaerat autem ipsam odit quam beatae tempora quibusdam illum! Modi velit odio nam nulla unde amet odit pariatur at!</p>
<p>Consequatur rerum amet fuga expedita sunt et tempora saepe? Iusto nihil explicabo perferendis quos provident delectus ducimus necessitatibus reiciendis optio tempora unde earum doloremque commodi laudantium ad nulla vel odio?</p>

Auch komplexere Ausdrücke sind kein Problem. Wenn man möchte übernimmt Emmet auch das Vendor Prefixing von bestimmten CSS3 Eigenschaften automatisch.

Bracket Highlighter

Bracket Highlighter ist ein Plugin, dass einem Anfangs- und Endtags, Quotes und Klammerungen anzeigt. Zwar verfügt Sublime Text standardmäßig über ein ähnliches Feature, Bracket Highlighter geht aber noch einen Schritt weiter und hilft einem sehr dabei die Übersicht nicht zu verlieren.

Quelle: https://github.com/facelessuser/BracketHighlighter#bracket-plugin

Alternative Notepad++

Die wohl meistgenutzte Alternative (zumindest auf Windows) ist Notepad++. Notepad++ ist ebenfalls ein sehr guter Editor, der komplett kostenlos und frei zur Verfügung steht. Auch ich nutze Notepad++ noch ab und zu, muss aber sagen, dass meine Tendenz hin klar zu Sublime Text geht.

Sublime Text fühlt sich meiner Meinung nach einfach noch ein Stück flüssiger und performanter an. Zwar gibt es für Notepad++ auch viele Plugins, trotzdem gefällt mir persönlich die Handhabung bei Suplime Text besser.

Vorschau

Bei diesem Artikel handelt es sich um ein revisit, er wurde erstmals am 20. Januar 2012 veröffentlicht.

Bevor es an die Entwicklung geht schauen wir uns an, was wir überhaupt machen wollen. Der Chat besteht aus einem Header, einer Sidebar in der die Besucher angezeigt sowie gesucht werden können, die gerade online sind und einer Kanalauswahl. Der große rechte Teil wird von dem Chat selbst eingenommen, unten befindet sich ein Textfeld um Nachrichten zu schreiben.

Achtung! Es geht hier rein um das Template, also das CSS und HTML Markup der Seite, nicht um die Funktionalität auf Serverseite (diese folgt eventuell in einem anderen Tutorial).

Vorbereitung

Wie bereits in der Einleitung geschrieben, basiert das Template auf HTML5 Boilerplate (H5BP) und Twitter Bootstrap. Im ersten Schritt laden wir also beide Frameworks erst einmal runter.

Nach dem entpacken von H5BP sollte man folgende Ordnerstruktur vor sich haben:

In den CSS Ordner entpackt man dann die bootstrap.css Datei von Twitter. Nun muss dieses Stylesheet natürlich auch noch im Template eingebunden werden, dazu fügt man folgende Zeile in die index.php von H5BP ein.

  <!-- CSS: implied media=all -->
  <!-- CSS concatenated and minified via ant build script-->
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/bootstrap.css">

Alle nachfolgenden Änderungen und Code Snippets beziehen sich immer auf die index.php Datei.

Das HTML Markup

So nach Vorschau und Vorbereitung folgt nun der wirklich interessante Teil des Templates, nämlich das HTML Markup. H5BP liefert bereits eine fertige Grundstruktur, das gesamte folgende Markup befindet sich innerhalb des Containers mit der id="main".

Der Header

Der Header besteht in diesem Template nur aus dem Titel des Chats, weiterführend könnten hier auch noch Menüs und Buttons untergebracht werden. Achtung, hierfür muss das bootstrap.css Stylesheet auf jeden Fall eingebunden sein, da die Styles für die h1 Überschrift dort definiert sind.

<!-- bootstrap -->
    <div class="container">
      <div class="content">
        <div class="page-header">
          <h1>Staticfloat Chat</h1>
        </div>
      </div>
   </div>

Die Chatnachrichten

Der rechte Teil der Seite mit den Chatnachrichten nimmt mit Abstand am meisten Platz ein. Die Chatnachrichten selber werden untereinander ausgeben und bestehen wiederum jeweils aus 2 Teilen.

Rechts befinden sich Metainformationen zur Nachricht, also wann sie abgesendet wurde und von wem. Der Benutzername wird dabei als türkiser Button dargestellt, es soll ja möglich sein einzelne Benutzer anzuklicken um privat zu chatten.

Für den Button wird eine Vorlage von Twitter Boostrap verwendet, mit der Klasse btn und info.

Links steht die Nachricht selbst, um die beiden Teile exakt nebeneinander darzustellen wird eine Tabelle verwendet. Es wäre hier auch möglich ohne Tabelle auszukommen, jedoch spricht in diesem Fall auch nichts gegen eine Tabelle.

        <!-- chat messages start-->
          <div id="chat-messages" class="span10">
          <div class="chat-message">
          	<table>
          		<tr>
          			<td>
          			 <a class="btn info">Staticfloat.com</a>
          			 <small class="small-date"><time datetime="2011-02-14">Vor 15 Stunden</time></small>
          			</td>
          			<td>
          				Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

          			</td>
          		</tr>
          	</table>
          </div>
          </div>
          <!-- chat messages end-->

Die Sidebar

In der Sidebar stehen sämtliche Benutzer die momentan im Chat aktiv sind und die Kanäle bzw. die einzelnen Chaträume. Auch hier werden wieder vordefinierte Styles für die Buttons aus Twitter Boostrap verwendet, dabei kommt es jedoch auch zu Klassenbelegungen welche semantisch nicht ganz korrekt klingen (z.B. danger für Kanäle).

Aber es ist ganz einfach mögliche weitere Klassen für Buttons hinzuzufügen und diese können dann auch passender benannt werden.

Die aktiven Nutzer und die Kanäle sind in ungeordneten Listen untereinander angeordnet. Ganz oben in der Sidebar befindet sich ein Formular, über das Benutzer gesucht werden können.

          <!-- sidebar start -->
          <div class="span4">
            <form>
            	<input type="text" placeholder="Suche"/>
            </form>
              <h6 style="text-align:center">online users (11 von 50)</h6>
            	<ul class="online-list">
            		<li class="btn success">Staticfloat</li>
               	</ul>

              <h6 style="text-align:center">Kanäle</h6>
              <ul class="online-list">
                <li class="btn danger">Channel</li>
                <li class="btn danger">CSS</li>
                <li class="btn danger">Javascript</li>
                <li class="btn danger">HTML</li>
                </ul>
          </div>
          <!-- sidebar end -->

Das Chatfenster

Ohne die Eingabemöglichkeit einer Nachricht, ist jeder Chat ziemlich sinnlos. Natürlich wäre es lästig, wenn das Chatfenster beim Hoch- und Runterscrollen der Nachrichten verschwinden würde weil es mitscrollt. Aus diesem Grund wird das Chatfenster am unteren Rand des Browserfenster mit der CSS Eigenschaft position:fixed fixiert.

Damit das Chatfenster nicht stört kommen später noch ein paar CSS Effekte hinzu, wie z.B. die dynamische Vergrößerung des Texfelds.

	      	<!--Chat message submit form-->
          	<div id="chat-box" class="row">
          	<form>
          	  <div class="message-input-wrapper">
          	  <input type="text" style="padding:5px;font-size:15px"/>
          	  </div>

          	  <div class="button-input-wrapper">
          		<button class="btn primary">Nachricht absenden</button>          		
          		
              </div>

          	</form>
          	</div>
          	<!-- form end -->

Die CSS Styles

Nun kommt der zweite wichtige Teil des Templates, nämlich die CSS Styles. H5BP und ganz besonders Twitter Boostrap übernehmen hier schon einen Großteil der Arbeit, d.h. wir müssen uns nicht um Buttons, Grids und andere Standardsachen kümmern.

Da diese CSS Styles nun nicht mehr H5BP oder Bootstrap spezifisch sind lagert man sie am besten in ein eigenes Stylesheet aus. Dieses muss man dann natürlich auch wieder im header der Seite einbinden.

Das Layout

Bevor es an die Sidebar, das Chatfenster und die Chatnachrichten geht müssen erst einmal ein paar grundlegende Dinge für das Layout definiert werden.

	  .container > footer p {
        text-align: center; 
      }
      .container {
        width: 820px; 
      }

      .content {
        background-color: #fff;
        padding: 20px;
        margin: 0 -20px; 
        -webkit-border-radius: 0 0 6px 6px;
           -moz-border-radius: 0 0 6px 6px;
                border-radius: 0 0 6px 6px;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
           -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
                box-shadow: 0 1px 2px rgba(0,0,0,.15);
      }

      .page-header {
        background-color: #f5f5f5;
        padding: 20px 20px 10px;
        margin: -20px -20px 20px;
      }


      .content .span10,
      .content .span4 {
        min-height: 500px;
      }

      .content .span4 {
        margin-left: 0;
        padding-left: 19px;
        border-left: 1px solid #eee;
      }

      .topbar .btn {
        border: 0;
      }

Das Chatfenster und die Nachrichten

Wie schon bereits angedeutet, sitzt das Chatfenster am unteren Rand fest am Browserfenster und die Größe des Textfeldes soll sich dynamisch verhalten. Um das dynamische Verhalten zu erreichen werden transitions verwendet, diese stehen erst ab CSS3 zur Verfügung. Mit Transitions können kleinere Animationen mit CSS erreicht werden, ohne Javascript zu verwenden.

      #chat-box{
      	position:fixed;
      	bottom:0px;
      	border:5px solid transparent;
      	left:25%;
      	background:#E0E0E0;
      	box-shadow:0px 0px 6px gray;
      	padding:5px;
      	-moz-transition:background 0.5s linear;
      }

      #chat-box:hover {
      	background:#C2C2C2;
      }

      #chat-messages{
        overflow: y-scroll;
        max-height:500px;
        height:500px;
      }

      #chat-box textarea{
        height:50px; 
        width:500px
      }

      #chat-box .message-input-wrapper{
        float: left;
      }

      #chat-box .button-input-wrapper{
        float:left;
        margin-left:10px;
      }

      #chat-box input[type="text"] {
        -moz-transition: width 0.5s linear;
        -webkit-transition: width 0.5s linear;
      }

      #chat-box input[type="text"]:focus {
        width:400px;
        color: #2f2f2f;
      }
      
      .small-date {
        color:gray;
        font-size:10px;
        display: block;
        margin-top:8px;
      }

Die Sidebar

In der Sidebar muss nur die Liste und die Listenelemente gestyled werden. Bei der unsortierten Liste ist es wichtig, dass keine Aufzählungssymbole verwendet werden. Die Listenelemente werden als Blockelemente dargestellt, damit diese schön untereinander platziert werden.

      ul.online-list {
      	list-style-type:none;
        margin: 0 auto;


      }

      ul.online-list li{
      	padding:5px;
      	margin:5px 0px;
      	text-align:center;
      	background:#d6d6d6;
        display: block;
      }


      ul.online-list li:hover{
      	background:black;
      	color:white;
      }

Fazit

H5BP und Twitter Bootstrap bieten, mit einander kombiniert, eine extrem solide Grundlage für Templates oder ganze Webanwendungen. Das hier gezeigte Chat Template ist nur ein Beispiel und zeigt mit wie wenig Aufwand so etwas umzusetzen ist.

Download

Demo

Responsive Nav

Responsive Nav ist eine freie, Open Source Javascript Libary die nur 1,7kB groß ist und (wenn möglich) auf native CSS3 Eigenschaften zurückgreift. Dabei löst Responsive Nav einige Probleme, die allein mit CSS3 nicht möglich sind. So kann mittels CSS3 keine Animation der Höhe 0 auf die dynamische Höhe auto erfolgen. Die Libary steht unter der MIT Lizenz und kann damit für sämtliche Projekte, ohne Einschränkungen verwendet werden.

Features

Auf der offiziellen Plugin Seite sind alle Features von Responsive Nav aufgelistet, deswegen gebe ich hier nur noch einen kurzen Überblick.

• Minified und Gzipped nur ~1,7kB groß
• Benötigt keine anderen Libaries wie jQuery etc.
• Verwendet CSS3 Transitions und Touch Events, für beste Performance
• Entfernt die 300ms Delay, die zwischen einem Touch aufs Display und dem Auslösen des Click Events liegen
• Ermöglicht die Vernwedung von CSS3 Transitions mit height:auto
• Website wird nicht zerschossen, wenn Javascript deaktiviert ist
• Crossbrowser-kompatibel mit praktisch allen Browsern, selbst IE6+

Anwendung

Responsive Nav kann theoretisch mit einer Zeile Code verwendet werden. Zunächst aber müssen die notwendigen CSS und Javascript Files eingebunden werden.

<link rel="stylesheet" href="responsive-nav.css">
<script src="responsive-nav.js"></script>

Danach muss man nur noch das gewünschte Navigationsmenü an Responsive Nav binden.

// ohne Anpassung der Optionen
var navigation = responsiveNav("#nav");

// mit Anpassung der Optionen 
var navigation = responsiveNav("#nav", { // Selector: The ID of the wrapper
  animate: true, // Boolean: Use CSS3 transitions, true or false
  transition: 400, // Integer: Speed of the transition, in milliseconds
  label: "Menu", // String: Label for the navigation toggle
  insert: "after", // String: Insert the toggle before or after the navigation
  customToggle: "", // Selector: Specify the ID of a custom toggle
  openPos: "relative", // String: Position of the opened nav, relative or static
  jsClass: "js", // String: 'JS enabled' class which is added to <html> el
  init: function(){}, // Function: Init callback
  open: function(){}, // Function: Open callback
  close: function(){} // Function: Close callback
});

Zusätzlich stehen noch 2 öffentliche Methoden zur Verfügung, eine um Responsive Nav zu deaktvieren und eine, um das Navigationsmenü ein- und auszuklappen.

// Zerstören
navigation.destroy();

// Toggle
navigation.toggle();

Demo und Funktionsweise

Zu guter Letzt noch eine Demo, die zeigt, wie eine Navigation mit Hilfe von Responsive Nav aussehen könnte. Responsive Nav verändert keine HTML Struktur! Das Plugin ist nur  dafür da, die vorhandene Navigation zu verstecken und per Toggle wieder einzublenden. Dabei werden aber Probleme gelöst, die rein mit CSS3 nicht möglich wären.

Dropzone.js

Bevor es los geht werfen wir zuerst einmal einen Blick auf den fertigen Drag & Drop Uploader. In der Demo werden keinerlei Bilder gespeichert, es kann also ein wenig damit experimentiert werden.

Wenn einem dieser Uploader direkt so wie er ist gefällt, kann man alle dazu benötigten Files direkt auf der Github-Seite von Dropzone.js downloaden.

Dropzone.js ist eine unabhängige Libary, das heißt, dass jQuery nicht zwingend erforderlich ist um Dropzone zu verwenden. Wenn man aber sowieso jQuery benutzt, kann man Dropzone auch ähnlich wie ein Plugin für jQuery verwenden. Dazu später noch etwas mehr, als erstes müssen alle benötigten Files inkludiert werden.

<link href="css/dropzone.css" type="text/css" rel="stylesheet" /> 
<script src="dropzone.min.js"></script>
...
<!-- weiter unten irgendwann -->
<form action="upload.php" class="dropzone"></form>

Formulare mit der Klasse dropzone werden automatisch zu Drag & Drop Uploadern umgewandelt. Um weitere Formattribute wie enctype oder method muss man sich nicht kümmern, dies macht Dropzone automatisch, beziehungsweise kann über Dropzone auch manuell eingestellt werden.

Code

Die obigen 3 Zeilen reichen bereits aus, um Dateien hochzuloaden. Natürlich fehlt noch die Serverseite, um die Dateien zu speichern und zu validieren. Wenn man etwas flexibler sein möchte, kann man das Uploadformular auch per Javascript erzeugen. Wie vorher bereits angesprochen, kann Dropzone sowohl eigenständig als auch als jQuery Plugin verwendet werden.

// entweder mit jQuery
$("div#myId").dropzone({ url: "/file/post" });

// oder ohne jQuery
var myDropzone = new Dropzone("div#myId", { url: "/file/post"})

Auf bereits instanziierte “Dropzones” kann man über folgende Methode zugreifen:

var myDropzone = Dropzone.forElement("#my-dropzone");

Callbacks

Dropzone bietet auch die Möglichkeit bei praktisch jeder Aktion eine Callbackfunktion aufzurufen. Damit kann z.B. geprüft werden, ob der Name der Datei bestimmten Vorgaben entspricht oder ähnliches (ersetzt aber nicht serverseitige Prüfung!). Eine Übersicht über alle von Dropzone ausgelösten Events findet man auf Dropzonejs.com.

Datei kurz vor dem Senden

myDropzone.on("sending", function(file) {
  alert('Die Datei wird jeden Moment an den Server geschickt! WURDE ABER BISHER NOCH NICHT!');
});

Datei hinzugefügt

myDropzone.on("addedfile", function(file) {
  alert('Neue Datei wurde hinzugefügt.')
});

Datei vollständig hochgeladen

myDropzone.on("addedfile", function(file) {
  alert('Datei erfolgreich hochgeladen, oder Fehler!');
});

Validation

Validation behauptet von sich selbst, die großartigste Validierungsengine für PHP zu sein. Ob das stimmt schauen wir uns jetzt an, was ich aber schon vorweg nehmen kann ist, dass Validation seinen Job ziemlich gut macht.

Validation bietet über 30 verschiedene Validatoren mit denen fast alles validiert werden kann. Von einfachen Dingen wie der Prüfung, ob ein gegebener Wert ein Zahl ist, bis hin zu (in diesem Fall nicht wirklich) komplexeren Aufgaben, wie der Prüfung ob ein gegebener Wert positiv ist und in einem bestimmten Bereich liegt.

Validation liegt in einem eigenen Namespace, deswegen ist zwingend eine PHP Version erforderlich die Namespaces unterstützt (5.3). Um die Verwendung einfach zu machen importieren wir die Klasse in unser Script mit use .... as.

Verwendung

use Respect\Validation\Validator as v;

Nun können beliebige Werte validiert werden. Wenn man z.B. einen Wert auf eine Zahl prüfen möchte geht das folgendermaßen:

$number = 123;
v::numeric()->validate($number); //true

Es ist außerdem möglich, mehrere Prüfungskriterien miteinander zu verketten.

// Kein Whitespace und Länge zwischen 1 und 15 Zeichen
$usernameValidator = v::alnum()->noWhitespace()->length(1,15);
$usernameValidator->validate('alganet'); // true
$usernameValidator->validate('alg anet'); // false

Objektattribute

Auch komplette Objekte bzw. deren Attribute können validiert werden. Im folgenden Beispiel werden die Daten eines Benutzers geprüft, wie man sieht sind auch Dinge wie die Überprüfung eines Mindestalters anhand des Geburtsdatums kein Problem.

$user = new stdClass;
$user->name = 'Alexandre';
$user->birthdate = '1987-07-01';

$userValidator = v::attribute('name', v::string()->length(1,32))
                  ->attribute('birthdate', v::date()->minimumAge(18)); 

$userValidator->validate($user); //true

Negieren

Manchmal ist es einfacher zu sagen wie es nicht sein soll, als zu sagen wie es sein soll. Deswegen bietet Validation die Möglichkeit jede Regel zu negieren.

$usernameValidator = v::not(v::alnum()->noWhitespace()->length(1,15));
$usernameValidator->validate('alganet'); // false
$usernameValidator->validate('alg anet'); // false (weil 1,15 Zeichen)
$usernameValidator->validate('123233 alg anet'); // true

Fehlermeldungen

Wenn man dem Benutzer mitteilen möchte was er falsch gemacht hat, bietet Validation auch hier die Möglichkeit dies zu tun – und zwar mit der Methode assert().

try {
   $usernameValidator->assert('really messed up screen#name');
} catch(\InvalidArgumentException $e) {
   echo $e->getFullMessage();
}

// Ausgabe
/*
\-All of the 3 required rules must pass
  |-"really messed up screen#name" must contain only letters (a-z) and digits (0-9)
  |-"really messed up screen#name" must not contain whitespace
  \-"really messed up screen#name" must have a length between 1 and 15
*/

Um eigene Fehlermeldungen zu setzen, manipuliert man den Array der Nachrichten entsprechend. Wobei {{name}} und {{input}} als Variablen zu Verfügung stehen und automatisch durch die entsprechenden Eingabedaten ersetzt werden.

$errors = $e->findMessages(array(
        'alnum'        => '{{name}} must contain only letters and digits',
        'length'       => '{{name}} must not have more than 15 chars',
        'noWhitespace' => '{{name}} cannot contain spaces'
    ));

Fazit

Validation ist eine sehr gute und einfach zu benutzende Bibliothek, wer also gerade eine Plattform entwickelt sollte nicht unbedingt seine Zeit in die Entwicklung einer Klasse zur Validierung von Formulardaten stecken. Denn erstens ist Validation Open Source und geprüft auf Sicherheitslücken und zweitens kostet es viel Zeit und man erfindet das Rad zum x-ten mal neu.

iCheck Custom Checkbox

Das erste Plugin ist iCheck von Damir Foy. Mit iCheck können Checkboxen und Radio Buttons auf jede erdenkliche Weise individualisiert werden. Das Plugin lässt sich zudem sehr einfach verwenden, nachdem alle benötigten Javascript und CSS Dateien inkludiert sind, sind nur noch wenige Zeilen Code notwendig. Zusätzlich kommt iCheck mit einer Reihe von Themes die ohne jegliche CSS Kenntnisse direkt verwendet werden können.

$(document).ready(function(){
    $('input').iCheck({
        checkboxClass: 'icheckbox_minimal',
        radioClass: 'iradio_minimal'
    });
});

jQuery Knob

jQuery Knob ist ein Plugin um input  Elemente in kreisrunde Statusanzeigen zu transformieren. Dazu verwendet das Plugin Canvas, weshalb ältere Browser nicht nativ unterstützt werden.

<input class="knob" data-width="100" data-cursor=true data-fgColor="#222222" data-thickness="0.4" value="50">

Pickadate.js

Pickdate ist wie der Name schon erahnen lässt ein Datepicker basierend auf jQuery. Das Plugin erzeugt mit einer Zeile Code einen Datepicker, der auch auf mobilen Geräten problemlos funktioniert. Der Datepicker kann mittels CSS an die eigenen Wünsche angepasst und individualisiert werden. Wer also in einem Projekt einen Datepicker einbauen möchte, macht mit Pickdate.js nichts falsch.

$('.datepicker').pickadate();

Toolbar.js

Toolbar.js ist ein jQuery Plugin das einem dabei hilft PopUp- bzw. Tooltip- Menüs zu erstellen. Das Plugin eignet sich also vor allem dann, wenn man nicht viel Platz zur Verwendung hat. Dies kann z.B. bei mobilen WebApplikationen der Fall sein.

$('#user-toolbar').toolbar({
	content: '#user-toolbar-options', 
	position: 'top'
});

jQuery Countdown

Das letzte Plugin dieser Liste ist jQuery Countdown. jQuery Countdown zeigt die verbleibenden Stunden, Minuten, Sekunden bis zu einem bestimmten Zeitpunkt an. Damit eignet sich das Plugin vor allem für “Coming Soon” Seiten. Die Verwendung ist extrem einfach und der Counter kann mit Hilfe der beiliegenden CSS Styles nach Belieben angepasst werden.

$('#countdown').countdown({
    timestamp   : new Date(2014, 0, 5) // 5 Januar 2014
}

Noch mehr Plugins?

Wer ein Plugin kennt das in dieser Liste eigentlich nicht fehlen darf, immer her damit!

Custom Scrollbar Dateien

Bevor wir loslegen können, muss zuerst das Plugin heruntergeladen werden. Wer dem englischen mächtig ist, findet auf der Plugin-Seite eine detaillierte Anleitung und auch viele Demos. Für alle anderen gibt es hier einen kleinen Quickstartguide.

Das Plugin besteht aus einem Script und einem Stylesheet, beide Dateien müssen eingebunden werden damit die Scrollbars funktionieren. Zunächst sollte man das Stylesheet direkt in den Headerbereich der Website einbinden.

<link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />

Als nächstes muss das Script eingebunden werden, wo das Ganze passiert ist eigentlich egal, es ist nur wichtig, dass jQuery vor dem Script eingebunden wird. Aus Performancegründen sollte man Javascript Dateien immer im unteren Bereich des HTML Dokuments einbinden. Wer wissen möchte warum das so ist, kann sich den Artikel Javascript Best Practices durchlesen.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.mCustomScrollbar.concat.min.js"></script>

Scrollbar aktivieren

Nachdem alle notwendigen Dateien eingebunden sind können die Scrollbars auch direkt verwendet werden. Dazu ruft man die Methode mCustomScrollbar() für das Element auf, zu dem man die Scrollbar hinzufügen möchte. Damit sichergestellt wird, dass die Methode auch erst ausgeführt wird, wenn alle benötigten Dateien geladen sind, greift man auf die jQuery ready() Methode zurück.

(function($){
        $(window).load(function(){
            $(".content").mCustomScrollbar();
        });
    })(jQuery);

Es gibt unzählige Möglichkeiten, die Scrollbars nach eigenem Belieben einzustellen. Im Folgenden werden einige der wichtigsten vorgestellt, eine detaillierte Auflistung aller möglichen Optionen, gibts auf der offiziellen Seite.

Hierbei passt sich die Scrollbar automatisch und dynamisch an die Größe des Containers an.

$(".content").mCustomScrollbar({
    advanced:{
        updateOnContentResize: true
    }
});

Es gibt auch die Möglichkeit horizontale Scrollbars zu verwenden.

$(".content").mCustomScrollbar({
    horizontalScroll:true
});

Je nach Websitedesign stehen verschiedene Themes zur Verfügung.

$(".content").mCustomScrollbar({
    theme:"light"
});

Natürlich ist es auch möglich, sämtliche verfügbare Optionen miteinander zu kombinieren.

Das Problem

Bei Scripten die auf einem anderen Server liegen kann man nie mit Sicherheit sagen, wie lange die Ladezeit ist. Sollte der Server im schlimmsten Fall sogar down sein, muss man die komplette Zeit bis zum Timeout abwarten. Beim normalen laden eines Scripts kommt es zu zwei Problemen, die die Ladezeit der Website beeinflussen. Zum einem wird der Parser geblock d.h. alles was nach dem Script im Markup steht wird erst geparst und angezeigt, wenn das Script vollständig geladen und geparst wurde. Dies ist außerdem auch ein Grund, warum man aus performancetechnischer Sicht, Scripte immer erst am Ende des Markups einbinden sollte.

Das zweite Problem ist, dass wenn ein Script geladen wird keine weiteren Ressourcen gleichzeitig geladen werden. Dieses Problem ist bei vielen neuen Browsern aber nicht mehr so schlimm, der IE7 hingegen lädt aber z.B. keine andere Ressource, bis das Script fertig geladen ist. Dies kann dann natürlich im Falle, dass der Server nur sehr schlecht erreichbar ist zu sehr langen Ladezeiten der eigenen Website führen.

Javascript asynchron laden

Der bekannte Webentwickler Nicolas Gallagher hat mit der Hilfe der Community eine Javascript Methode vorgestellt, mit der Scripte über bestimmte Browser hinweg asynchron geladen werden können.

(function(doc, script) {
    var js, 
        fjs = doc.getElementsByTagName(script)[0],
        add = function(url, id) {
            if (doc.getElementById(id)) {return;}
            js = doc.createElement(script);
            js.src = url;
            id && (js.id = id);
            fjs.parentNode.insertBefore(js, fjs);
        };
 
    // Hier stehen die Scripte die async geladen werden sollen:
    // Google Analytics
    add(('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js', 'ga');
    // Google+ button
    add('https://apis.google.com/js/plusone.js');
    // Facebook SDK
    add('//connect.facebook.net/en_US/all.js', 'facebook-jssdk');
    // Twitter SDK
    add('//platform.twitter.com/widgets.js', 'twitter-wjs');
}(document, 'script'));

Diese Technik eignet sich vor allem für Social Buttons und wird z.B. auch hier auf Staticfloat eingesetzt. Für Browser die eine weitreichende HTML5 Unterstützung haben, gibt es noch eine einfachere Methode.

<script async src="http://example.com/resource.js"></script>

HTML5 bietet mit dem Attribut async eine Möglichkeit dem Browser zu sagen, dass es sich um eine Ressource handelt die asynchron geladen werden soll. Mit dem IE10 unterstützen mittlerweile auch praktisch alles relevanten Browser diese Methode.