Auch Drupal 8 generiert einen Meta-Tag mit diesen Angaben. Dieser lässt sich jedoch mit wenigen Zeilen entfernen. Dazu eignet sich der Hook *_preprocess_page(&$variables) in der *.theme Datei. Das Sternchen steht dabei für den aktuellen Theme- oder Modulnamen. (In dem kommenden Beispiel „my_theme“.)

In den Zeilen 6-7 werden alle Meta-Tags selektiert und anschließend in einer Schleife durchlaufen. Entspricht eins der Namen dem Wort „Generator“, so wird dieses Element aus dem Array entfernt.

Die Funktion dump() ist intelligent genug und erkennt, ob anschließend ein die() kommt. Sollte klein die() folgen, so wird die Ausgabe in der Web Debug Toolbar unter dem Reiter „Dump()“ angezeigt. Wird anschließen die die() Funktion benutzt, so ist die Ausgabe wie bei var_dump().

Ausgabe von VarDumper in der Web Debug Toolbar

Ausgabe von VarDumper in der Web Debug Toolbar Panel

Die Komponente ist unter anderem auch in Twig nutzbar. Es wird das Tag {% dump %} sowie die Funktion {{ dump() }} zur Verfügung gestellt. Der Unterschied liegt bei dem Ausgabeort: {% dump my_var %} erzeugt die Ausgabe in der Web Debug Toolbar, während {{ dump() }} die von var_dump(my_var) gewohnte Ausgabe erzeugt.

Ausgabe von VarDumper im Inhaltsbereich

Installation – Symfony >= 2.6

Ab Symfony 2.6 ist die Komponente standardmäßig vorhanden und muss nur unter Umständen aktiviert werden. Dazu muss lediglich das DebugBundle in der AppKernel.php eingebunden werden:

Installation – Symfony < 2.6

Wird eine ältere Version von Symfony verwendet, so kann das Bundle bequem über Composer nachinstalliert werden.

Anschließend ebenfalls das DebugBundle in der AppKernel.php einbinden.

Verwendung außerhalb von Symfony

Wie jede Symfony Komponente, kann auch der VarDumper in jedem PHP-Projekt verwendet werden. Das Full-Stack Framework Symfony ist keine Voraussetzung für die Nutzung.

Die Bibliothek wird einfach per Composer installiert.

Ausgabe von VarDumper im Inhaltsbereich

Fazit

Die neue VarDumper-Komponente ist eine super Möglichkeit etwas schnell und unkompliziert zu debuggen, da es überall einsetzbar ist.

Diese man ich zum Anlass und entwickelte ein einfaches Drupal Modul, dass die Einbindung von Backlinkseller.de* erheblich vereinfacht. Das Modul stellt zwei Blöcke zur Verfügung: Einen für die Backlinks und einen für das Affiliate-Programm. Alle Parameter können bequem im Backend verwaltet werden.

Drupal nutzt normalerweise den Modulnamen für alle Klassen und IDs. Diese Ausgaben würden jedoch Goolge und den AdBlockern sofort auffallen. Somit werden alle Anzeichen (Pfade, Klasse und IDs) von dem Modul unterdrückt. So ist die Nutzung nicht im HTML erkennbar. Zusätzlich kann der Benutzer selbst Klassen und IDs definieren.

Aktuell gibt es das Modul nur für Drupal 7. Die Version für Drupal 8 ist schon in Arbeit und wird bald veröffentlicht. Sollte der Wunsch für eine Drupal 6 Version vorliegen, dann kontaktiert mich einfach. Das sollte dann zügig umsetzbar sein.

Installation

Die Installation läuft genauso ab, wie bei dem BeSimpleSoapClient. Alle Komponenten von BeSimpleSoap sind in einem Repository zusammengefasst.

SOAP Clients erzeugen

Musste man bei dem Einsatz von dem SOAP-Client händisch Instanzen erzeugen und Parameter übergeben, so wird dieses von dem Bundle vereinfacht. Das Bundle stellt eine sehr gute Möglichkeit zur Verfügung, die Clients über die Konfiguration zu definieren.

Dabei wird in dem Namensraum be_simple_soap als Erstes das Caching konfiguriert.

Anschließend können die SOAP-Clients, inklusive der Classmap in einem Array unter be_simple_soap.clients registriert werden.

Alle SOAP-Clients werden dabei gleich als Services registriert und können somit von überall verwendet werden.

Ab hier ist die Arbeit genauso wie bei der Nutzung des Clients ohne das Bundle.

Ich wünsche euch viel Erfolg beim Ausprobieren!

Vorbereitungen

Als erstes muss natürlich jQuery und jQuery UI eingebunden werden.

Anschließend der Datepicker an einem Eingabefeld initiiert. Zusätzlich haben ich in diesem Beispiel alle Tage, an denen Veranstaltungen sind, in einem Array hinterlegt. (Natürlich macht es so in der Realität wenig Sinn, da es sehr viele Daten sein werden. Idealerweise holt man sich die Daten per Ajax.)

Tage hervorheben

Nun geht es an die eigentliche Aufgabe. Um die Tage hervorzuheben, müsste man den aktuell gerenderten Tag mit dem Array abgleichen. Ist der Tag im Array vorhanden, dann bekommt dieser eine zusätzliche Klasse für die Hervorhebung.

Dem Datepicker von jQuery UI kann ein Array mit Optionen übergeben werden. Darunter findet man auch die Option beforeShowDay. Dieser Option wird eine Funktion übergeben, die als Parameter den aktuellen Tag, der gerendert wird, übergeben bekommt. Nun ist es ein Leichtes zu prüfen, ob dieser Tag in dem Array mit den Veranstaltungen ist.

Anbei natürlich eine kleine Demo auf jsfiddle.

Fazit

Die Usability kann in den meisten Fällen durch sehr wenig Aufwand stark verbessert werden. So sieht der Benutzer gleich, an welchen Tagen Veranstaltungen stattfinden und an welchen nicht.

Für die folgenden Beispiele verwende ich den Bankleitzahlen Web Service. Dieser Service ermittelt zu einer Bankleitzahl den Namen des Kreditinstitutes, die Postleitzahl und den Ort. Wenn die BLZ nicht gefunden wird, dann wird ein Fehler zurückgegeben.

Installation

Am besten verwendet man, wie bei den meisten Komponenten, Composer für die Installation. Einfach die composer.json erweitern und ein Update ausführen. Anschließend die autoload.php aus dem vendor Verzeichnis einbinden. Schon kann man loslegen.

SOAP Client

Jetzt können wir eine neue Instanz von SoapClient erzeugen. Als ersten Parameter erwartet die Klasse die URL zu der WSDL-Datei.

Mit der Methode __getFunctions() kann man schnell alle verfügbaren Methoden des Services ausgeben lassen. In unserem Fall erhalten wir nur die Methode getBank().

Die Methode getBank() erwartet als Parameter eine Variable vom Typ getBankType. Schauen wir in die WSDL-Datei und suchen nach der Definition von getBankType, finden wir Folgendes:

Das bedeutet, dass die Methode getBank() ein Objekt mit dem Attribut blz als ersten Parameter erwartet. Dabei ist das blz Attribut ein String. Probieren wir es doch mal aus.

Nach der Ausführung erhalten wir ein Objekt, das auch die Informationen zu unserer Bank enthält.

Wieso ein Objekt?

Trotzdem fällt etwas auf: Wir erhalten ein Objekt. Eigentlich würde man an der Stelle doch XML erwarten. Und auch der Request sollte XML beinhalten und wir haben eine Klasse übergeben.

Das liegt daran, dass der SOAP Client das XML anhand der WSDL-Datei automatisch in Objekte umwandelt. Dabei werden Instanzen von stdClass, mit den in der WSDL-Datei definierten Attributen, verwendet.

Eigene Klassen für das Mapping

Die zurückgegebenen Objekte sind wirklich super und man kann damit viel besser arbeiten als mit XML, jedoch wäre es ganz praktisch, wenn man auch gegen eigene Klassen „mappen“ könnte. So könnte man z.B. den Namen der Bank im Getter modifizieren oder gleich neue Methoden angeben, um einen Link zu der Google Suche (getGoogleSearchLink) auszugeben. (Mit ist an der Stelle kein besseres Beispiel eingefallen. In einem Fall bekam ich immer einen langen Beschreibungstext. Für die Ausgabe im Frontend brauchte ich aber zusätzlich eine gekürzte Version als Vorschau.)

Der SOAP Client ermöglicht auch das. Als Erstes können alle komplexe Knoten als Klasse angelegt werden. In unserem Beispiel wären es GetBankResponseType und DetailsType.

• GetBankResponseType – Mit dem Attribut details (DetailsType)
• DetailsType – Mit den Attributen bezeichnung (string), bic (string), ort (string) und plz (string)

Nachdem die Klassen angelegt worden sind, muss man nur das Mapping definierten. Dafür muss man beim Initiieren der SoapClient Instanz die Option classmap übergeben. Die Option muss ein Array mit den WSDL-Typen als Schlüssel und den PHP-Klassennamen als Wert sein.

Nun erhalten wir nicht mehr eine „anonyme“ Objektstruktur und können gleich zusätzliche Methoden definieren.

Das sollte für den Anfang reichen. Im kommenden Artikel werde ich auf das BeSimpleSoapBundle für Symfony2 eingehen. Da ist die Verwendung teilweise noch einfacher.

Browserunterstützung

Das Web Notifications API wird im Moment nur von Chome >=22 (ab >= 5 mit Vendor-Präfix), Fitefox >= 22 und Safari >= 6.0 unterstützt.

Mit dem folgendem Code lässt sich herausfinden, ob der Browser das Web Notifications API unterstützt:

Zugriffserlaubnis einholen

Bevor die Benachrichtigungen angezeigt werden, muss der Benutzer die Erlaubnis dafür erteilen. Dies verhält sich genauso wie bei dem Geolocation API.

Der aktuelle Zustand ist in dem Attribut Notification.permission hinterlegt. Dieser kann dabei eines der drei Werte haben:

• denied – Der Benutzer hat den Zugriff auf das API abgelehnt.
• granted – Der Benutzer hat den Zugriff auf das API genehmigt.
• default – Es gab noch keine Entscheidung oder der Benutzer wurde noch nicht gefragt. (Verhält sich sonst wie denied.)

Um die Erlaubnis von dem Benutzer einzuholen, genügt der Aufruf der Notification.requestPermission() Methode:

Benachrichtigung ausgeben

Nun kann man Benachrichtigungen ausgeben. Dazu genügt es eine neue Instanz von Notification zu erzeugen und dem Konstruktor die Parameter title und options zu übergeben. Dabei muss der Parameter title übergeben werden. Der Parameter options ist optional und beinhaltet eine Reihe an zusätzlichen Informationen, die auch in der Benachrichtigung ausgegeben werden können:

• dir – Die Ausrichtung der Benachrichtigung. Folgende Optionen sind möglich: auto, ltr, rtl
• lang – Die Sprache der anzuzeigenden Benachrichtigung nach BCP 47.
• body – Ein, zum Titel, zusätzlicher Text.
• tag – Eine ID für die Benachrichtigung, um diese zu modifizieren.
• icon – Eine URL zu einem Icon, dass i.d.R. neben dem Text ausgegeben wird.

Events

Selbstverständlich kann man auf Events reagieren. So ist es z.B. möglich die Klicks auf Benachrichtigungen zu tracken, in dem man auf das onclick-Event lauscht. Oder man markiert die Benachrichtigung in der Datenbank als gelesen, wenn diese angezeigt wird. Dazu steht eine Reihe an Events zur Verfügung:

• Notification.onclick – Wird jedes Mal ausgelöst, wenn auf die Benachrichtigung geklickt wird.
• Notification.onshow – Wird ausgelöst, wenn die Benachrichtigung eingeblendet wird.
• Notification.onerror – Wird ausgelöst, wenn es bei der Ausgabe der Benachrichtigung zu einem Fehler kommt.
• Notification.onclose – Wird ausgelöst, wenn die Benachrichtigung ausgeblendet wird.

jQuery Plugin

Das Arbeiten mit solchen APIs ist immer etwas mühsam, da man immer die alten Implementierungen und Verdor-Präfixe berücksichtigen muss. Zum Glück gibt es fast immer eine kleine Bibliothek, die die Verwendung normalisiert und vereinfacht. So auch im Fall von Web Notifications.

Mikhail Davydov, ein Yandex Mitarbeiter, hat einen Webkit Notification API jQuery Wrapper geschrieben, der ein einfaches Interface für das API bietet:

 Fazit

Das Web Notifications API ist eine gute Möglichkeit die Web Anwendung noch ein Stück näher an eine Desktop  Anwendung zu bringen. So könnte man eine Intranet Anwendung im Vollbild Modus laufen lassen und durch die Web Notifications das Gefühl einer Desktop  Anwendung verstärken.

Browserunterstützung

Das API wird in allen modernen Desktop Browsern, inklusive Internet Explorer 11, unterstützt. (Firefox >= 10, Chrome >= 20, Opera >= 12.10, Safari >= 5.1) Bei mobilen Browsern sieht es ganz anders aus. Wenige (Chrome >= 28, Firefox >= 10) unterstützen das Fullscreen API. Das ist aber auch nicht weiter tragisch, da die meisten mobilen Browser sowieso im Vollbild laufen.

Alle Methoden der Fullscreen API sind im Moment noch mit Vendor-Präfixen versehen.

Mit dem folgendem Code lässt sich herausfinden, ob der Browser das Fullscreen API unterstützt:

Vollbild Modus aufrufen

Mit der Methode requestFullscreen kann man das gewünschte Element in Vollbild anzeigen lassen:

 Vollbild Modus verlassen

Mit der Methode exitFullscreen wird der Vollbild Modus beendet. Dabei ist wichtig anzumerken, dass exitFullscreen auf das document Objekt anwenden lässt. Eine Übergabe des Elements ist nicht notwendig.

Eigenschaften und Events

Auch die Eigenschaften des APIs sind mit Vendor-Präfixen versehen.

• document.fullscreenEnabled – Diese Eigenschaft gibt true zurück, wenn das API verfügbar ist.
• document.fullscreenElement – Diese Eigenschaft gibt das Element zurück, das gerade im Vollbild angezeigt wird.
• fullscreenchange – Dieses Event wird gefeuert, wenn der Vollbild-Modus gestartet oder verlassen wird.
• fullscreenerror – Diese Event wird gefeuert, wenn ein Element nicht im Vollbild angezeigt werden kann. Zum Beispiel ein IFrame ohne ein allowfullscreen Attribut.

CSS

Mit CSS kann man die Optik ein wenig verändern. Dabei stehen einem die folgenden Selektoren zur Verfügung.

• :fullscreen – Mit diesem Selektor kann das Aussehen des Elements, im Vollbild, verändert werden.
• ::backdrop – Mit diesem Selektor kann der Hintergrund im Vollbild verändert werden.

Fazit

Durch die vielen HTML5 APIs (z.B. Battery Status API,  Page Visibility API, Vibration API) wird die tägliche Arbeit immer abwechslungsreicher und macht somit deutlich mehr Spaß. Die Kunden profitieren von schnelleren Umsetzungszeiten und die Entwickler vom wartbaren Code.

Ich wünsche euch viel Spaß beim Ausprobieren und hinterlasst gerne eure Meinungen in den Kommentaren.

Wie wäre es, wenn man den Benutzer über etwas per Vibration informiert? Zum Beispiel, wenn eine neue Nachricht (PM) ankommt. Hier kommt das Vibration API zum Einsatz.

Browserunterstützung

Im Moment unterstützen nur die letzten Versionen von Firefox (ab Version 16) und Chrome das Vibration API. Frühere Versionen (Firefox ab Version 11) verwendeten den webkit, bzw. moz Präfix.

Mit dem folgendem Code lässt sich herausfinden, ob der Browser oder das Gerät das Vibration API unterstützt:

Anwendung

Die Dauer der Vibration kann in Millisekunden an die vibrate() Methode übergeben werden.

Alternativ kann auch ein Array mit Werten übergeben werden. Dabei wird die Vibrationsdauer und Pause in Millisekunden abwechselnd angegeben. In dem Folgebeispiel vibriert das Gerät 300ms, macht 200ms Pause und vibriert weitere 800ms.

Eine Vibration abbrechen kann man, indem man eine Null an die Methode übergibt.

Die Vibrationen blockieren dabei die Ausführung von JavaScript nicht.

Fazit und Demo

Mit HTML5 bekommen die Webentwickler immer mehr Möglichkeiten für die Realisierung von Web-Apps. Dabei ist das Vibration API von HTML5 nur ein keiner Bestandteil. (Battery Status API)

Auch wenn wir solche Möglichkeiten bekommen, sollte man immer stets überlegen, ob das Feature wirklich notwendig ist. Benutzer könnten sich belästigt fühlen, wenn Webseiten anfangen die Geräte vibrieren zu lassen. Außerdem darf der zusätzliche Stromverbrauch nicht außer Acht gelassen werden. Solche Features sollten Web-Apps und Online-Spielen vorbehalten bleiben.

Demo: http://jsfiddle.net/abogomolov/4RN4e/

Ich wünsche euch viel Spaß beim Ausprobieren und hinterlasst gerne eure Meinungen in den Kommentaren.

Installation

Die Installation erfolgt an schnellsten mit Composer. Einfach die folgende Zeile zu den Requirements hinzufügen und composer update aufrufen.

Anschließend nur noch die autoload.php im vendors Verzeichnis einbinden und es kann losgehen.

Verwendung

Als Nächstes erzeugen wir eine neue Instanz der Finder-Klasse. Der Rest ist durch das Fluent Interface recht selbsterklärend. Man kann auswählen, ob man nach Dateien oder Verzeichnissen suchen möchte und nach welchen Kriterien gefiltert und sortiert werden soll.

Filter

Die Finder-Komponente bietet eine Menge an Filterkriterien, wie Ort, Name, Dateiinhalt, Dateigröße und Änderungsdatum. Die Filter können dabei auch mit Ausnahmen definiert werden. So ist es möglich, die Dateien der Versionskontrolle im Vorfeld auszuschließen.

Tiefe

Die Suche wird standardmäßig immer rekursiv durchgeführt. Dieses Verhalten kann mit dem Tiefenfilter (Depth) verändert werden. Es kann sowohl die Anfangsebene als auch die maximale Tiefe definiert werden.

Sortierung

Die Ergebnisse lassen sich dabei auch nach Dateinamen, Änderungsdatum und Dateityp sortieren. Weitere Sortier- oder Filterfunktionen können recht simpel hinzugefügt werden.

Fazit

Mit dieser Komponente kann man schnell und einfach Dateien suchen und den Inhalt ausgeben. Für Anwendungen, die viel mit Dateien arbeiten, sollte der Symfony2 Finder ein Muss sein.