Kategorien
Boilerplates & andere Tools Programmierung Sonstige Programmiersprachen Webdesign

Hologram: Kostenlose Mac-App für den geschmeidigen WebVR-Einstieg

Freelancer, die ihr Geld mit Kundenprojekten verdienen, haben wenig Zeit für brandneue Technologien. Mit Hologram kannst du einen Blick auf WebVR werfen, ohne dabei ganze Monatseinkommen zu verlieren.

Kategorien
Programmierung Sonstige Programmiersprachen Tipps, Tricks & Tutorials WordPress

PHP 7 und WordPress: Kannst Du den Turbo bereits zünden? [Infografik]

Seit dem dritten Dezember 2015 ist die neueste Version von PHP erhältlich. Um Altlasten zu beseitigen, entschied man sich dazu, teilweise die Abwärtskompatibilität aufzugeben. Für WordPress-User stellt sich nun die Frage, ob PHP7 bereits nutzbar ist und welche Vorteile die Nutzung bringen kann. Daher werfen wir einen kurzen Blick auf diese wichtigen Fragen.

PHP 7 und WordPress: Kannst Du es bereits einsetzen?

Ein kleiner Hinweis: Dieser Artikel befasst sich nur kurz und bündig mit PHP7 und WordPress, um die Frage zu klären, ob die neue Version bereits problemlos eingesetzt werden kann.

PHP7 und WordPress – ein Dreamteam?

PHP7 heißt der offizielle Nachfolger von PHP5 seit Dezember 2015. Verzichtet wurde bei der Entwicklung der Programmiersprache weitgehend auf die Abwärtskompatibilität. Es stellt sich die Frage, ob es bereits im Live-Betrieb einsetzbar ist oder nicht.

Der große Vorteil der neuen Version ist die um bis zu 30 Prozent geringere Ausführungszeit als PHP 5, da unter anderem Hashtabellen neu implementiert wurden. Das sollte einen ungeheuren Performance-Schub für deine WordPress-Website bedeuten.

PHP ist die Programmiersprache, mit der WordPress entwickelt wurde. PHP macht das Web erst zu dem, was es heute ist. Alle Funktionen und Elemente deiner Website werden von PHP generiert und ausgegeben. Ohne PHP wäre das Web statisch, es würden wahrscheinlich nur reine HTML-Seiten existieren können.

Ist ein PHP-Update wichtig?

PHP-Updates sind sehr selten, dafür aber um so wichtiger. Grundsätzlich kann man sagen, dass die Updates immer sicherheits- und performancerelevant sind. Sicherheitslücken werden geschlossen und ein Tick an Performance kommt hinzu. Daher ist es immer ratsam, die neueste Version von PHP einzusetzen, wenn die eigenen Webanwendungen damit problemlos laufen.

PHP7 = Eine erhebliche Steigerung der Performance

PHP7 bringt WordPress zum Rennen, weil die Ausnutzung der gegebenen Ressourcen bedeutend besser ist als zuvor. Alle PHP-Operationen benötigen mit der neuen Version erheblich weniger CPU-Rechenleistung, als es noch unter der alten Version 5.6 der Fall war. Es wird also Serverleistung im Normalbetrieb gespart, die der Website bei plötzlichem, sehr hohen Besucheraufkommen dann zur Verfügung steht.

WordPress benötigt wesentlich weniger Rechenpower, um das alte Speed-Niveau zu halten. Grob gesagt besitzt deine Website unter PHP7 eine bis zu doppelt so hohe Performance. Das haben eingehende Tests von Zend – dem Entwickler von PHP – gezeigt. Zend nutzte für seine Tests die WordPress-Version 4.1, unter der aktuellen Version 4.5.3 dürfte sich kein Unterschied ergeben. Weiter unten findest du die Infografik von Zend.

Ist PHP7 bereits einsetzbar?

Seit etlichen Wochen teste ich bereits die neue Version von PHP und konnte keinerlei Unverträglichkeiten feststellen. Bisher wurde im Netz immer Zurückhaltung geübt, wenn es um den Einsatz von PHP7 ging.

Ich jedoch konnte an zwei (wichtigen) Websites mit unterschiedlicher Bestückung von Plugins keinerlei Fehler feststellen. Ganz im Gegenteil, sofort nach Aktivierung der neuen Version von PHP waren meine Websites schneller. Kein Theme, kein Plugin zeigte eine Unverträglichkeit. Ebenfalls habe ich auch auf meinen Testseiten kein Problem feststellen können. Alles läuft absolut reibungslos und wirklich schnell.

Allein eine Kunden-Website wurde unter dem Einsatz von PHP7 langsamer als sie es zuvor war. Ich vermute stark, dass ein Problem mit den benutzerdefinierten Scripts für die Auslieferung von Werbeblöcken vorlag.

Viele Hoster haben heute bereits die aktuelle PHP-Version in den Einstellungen für die Hosting-Pakete, sie muss dann nur noch in den Einstellungen aktiviert werden. In meinem Managed-Root Cloud Server musste ich nur in der httpd.conf die neue Version aus- und die alte Version ein-kommentieren.

PHP7 ist im Live-Betrieb einsetzbar, wenn:

  • du die neueste Version von WordPress nutzt.
  • du alle Plugins immer aktualisierst.
  • du keine eigens entwickelten Plugins nutzt, die nicht weiterentwickelt werden.

Letztendlich bleibt nur eines: testen, testen, testen. Aktiviere PHP7 und schaue, was passiert. In geschätzt über 90 Prozent der Fälle läuft alles reibungslos, nur halt wesentlich schneller. Solltest du Probleme feststellen, können diese vielleicht schnell behoben werden. Oftmals reicht bereits eine Umstellung auf aktuelle WordPress-Funktionen, der Codex hilft schnell weiter.

Die Infografik von Zend

php7-infographic

Weitere relevante Artikel zur Optimierung der Ladegeschwindigkeit

Fazit

Der Einsatz von PHP7 ist absolut zu empfehlen. Du wirst kaum Gelegenheit bekommen, Probleme festzustellen. Wenn WordPress, deine Plugins und deine Themes immer auf dem neuesten Stand sind, wirst du einen erheblichen Performance-Schub feststellen und dich zu der Entscheidung des Einsatzes beglückwünschen.

(dpe)

Kategorien
JavaScript & jQuery Programmierung Sonstige Programmiersprachen

ECMAScript 6 besser verstehen: Template Strings

Willkommen zum zweiten Teil unserer Artikelserie zu ECMAScript 6. Eines der Features, das ich am neuen Microsoft Edge, der neuen Browser Rendering Engine von Microsoft, am meisten mag, ist ihre umfangreiche Unterstützung von ECMAScript 6. In dieser Serie stelle ich einige der coolen Dinge vor, die man mit ECMAScript 6 tun kann, vor allem, wenn man große Web-Anwendungen schreibt.

ECMAScript 6 besser verstehen: Template Strings

Im ersten Teil habe ich euch in das Thema Klassen und Vererbung eingeführt. In diesem Artikel konzentriere ich mich auf Template Strings, ausgehend von meinen eigenen Erfahrungen beim Erstellen von Embedded Expressions.

Eine Lösung für das „Line Return“-Problem

Wenn ich an babylon.js arbeite, habe ich mit Code für Shader zu tun. Für ein besseres Verständnis würde ich sagen, man könnte diesen Code am ehesten als einen Haufen Text beschreiben, der wie C aussieht.

Ein Beispiel dafür findet sich hier.

Das Problem bei sehr langen Texten in JavaScript ist der Zeilenwechsel. Wie oft haben wir Dinge wie diese hier geschrieben?

var myTooLongString = "A long time ago, in a galaxy far," +
                      "far away...." +
                      "It is a period of civil war." +
                      "Rebel spaceships, striking" +
                      "from a hidden base, have won" +
                      "their first victory against" + 
                      "the evil Galactic Empire.";

Bei mehr als 200 Zeilen langem Code für Shaders wird das richtig anstrengend.

Glücklicherweise besitzt ECMAScript 6 das neue Template Strings-Feature. Neben anderen schönen Erleichterungen, die dieses Feature bietet, unterstützt ein Template String vor allem direkt mehrzeilige Strings:

var myTooLongString = `A long time ago, in a galaxy far
far away....
It is a period of civil war.
Rebel spaceships, striking
from a hidden base, have won
their first victory against
the evil Galactic Empire`;

Weil innerhalb eines Template String alle Zeichen von Bedeutung sind, kann man keine Leerzeichen an den Anfang der Zeilen einfügen.

Als JavaScript-Entwickler haben wir drei Arten, um Strings zu definieren:

Und was ist daran nun ein Template?

Die Unterstützung mehrzeiligen Codes ist nicht das einzige Feature von Template Strings. So kann man Template Strings auch dafür nutzen, um Platzhalter mit Variablenwerten zu ersetzen, wie ihr es z.B. mit printf in C/C++ oder string.Format in C# sicher schon getan habt:

var items = [];
items.push("banana");
items.push("tomato");
items.push("light saber");

var total = 100.5;

result.innerHTML = `You have ${items.length} item(s) in your basket for a total of $${total}`;

Dieser Code führt zu folgender Ausgabe:

You have 3 item(s) in your basket for a total of $100.5

Ganz praktisch oder?
Hier zur Erinnerung, wie das mit ECMAScript 5 ging:

result.innerHTML = "You have " + items.length + " item(s) in your basket for a total of $" + total;

Mit Tags noch einen Schritt weiter gehen

Im letzten Schritt der Spezifikation von Template Strings geht es darum, vor dem String selbst eine eigene Funktion einzufügen (custom function), um einen Template String mit einem „Tag“ zu erstellen:

var myUselessFunction = function (strings,...values) {
    var output = "";
    for (var index = 0; index < values.length; index++) {
        output += strings[index] + values[index];
    }

    output += strings[index]
    return output;
}

result.innerHTML = myUselessFunction `You have ${items.length} item(s) in your basket for a total of $${total}`;

Die Funktion dient hier dazu, sowohl Zugang zu den konstanten Teilen des Strings als auch zu den Variablen-Werten zu bekommen.
Im vorhergehenden Beispiel sehen Strings und Werte (values) wie folgt aus:

  • strings[0] = “You have “
  • values[0] = 3
  • strings[1] = “items in your basket for a total of $”
  • values[1] = 100.5
  • strings[2] = “”

Wie wir sehen, ist jeder Value[n] umgeben von konstanten Strings (strings[n] und strings[n + 1]).

Das gibt uns Kontrolle darüber, wie der endgültige Output-String aufgebaut ist. Im vorigen Beispiel haben wir nur das grundsätzliche Verhalten von Template Strings reproduziert. Wir können aber auch noch weiter gehen und dem String eine coole Verarbeitung (processing) mitgeben.

Hier zum Beispiel ist ein Stückchen Code, welches Strings blockiert, die versuchen, benutzerdefinierte DOM-Elemente einzuschleusen:

var items = [];
items.push("banana");
items.push("tomato");
items.push("light saber");

var total = "Trying to hijack your site 
"; var myTagFunction = function (strings,...values) { var output = ""; for (var index = 0; index < values.length; index++) { var valueString = values[index].toString(); if (valueString.indexOf("<") !== -1) { // Far more complex tests can be implemented here :) return "String analyzed and refused!"; } output += strings[index] + values[index]; } output += strings[index] return output; } result.innerHTML = myTagFunction `You have ${items.length} item(s) in your basket for a total of $${total}`;

"Getaggte" Template Strings sind für viele Anwendungen geeignet, wie z.B. Sicherheit, Ortsbestimmung, das Erstellen einer eigenen, domain-spezifischen Sprache und mehr.

Raw Strings

Tagging-Funktionen haben eine besondere Option, wenn sie auf konstante Strings zugreifen: Sie nutzen strings.raw um "unescaped" String-Values zu erhalten. Das heißt z.B. im Fall von “\n” wird das nicht als einzelnes Zeichen betrachtet, sondern tatsächlich als zwei Zeichen “\” und “n”.

Hauptziel ist es, uns zu ermöglichen, auf den String zugreifen zu können, so wie er eingegeben wurde:

var myRawFunction = function (strings,...values) {
    var output = "";
    for (var index = 0; index < values.length; index++) {
        output += strings.raw[index] + values[index];
    }

    output += strings.raw[index]

    console.log(strings.length, values.length);
    return output;
}

result.innerHTML = myRawFunction `You have ${items.length} item(s) in your basket\n.For a total of $${total}`;

Dieser Code führt zu folgender Ausgabe:

You have 3 item(s) in your basket\n. For a total of $100.5

Man kann auch eine neue String-Funktion nutzen: String.raw(). Diese bereits eingebaute Funktion führt genau das aus, was unser voriges Beispiel bereits getan hat:

result.innerHTML = String.raw `You have ${items.length} item(s) in your basket\n.For a total of $${total}`;

Fazit

Microsoft Edge und die aktuellen Versionen von Chrome (41+), Opera(28+) and Firefox (35+) unterstützen Template Strings. In welcher Breite ECMAScript 6 allgemein unterstützt wird, kannst du hier nachschlagen. Wer Anwendungen für das moderne Web erstellen will, für den sind Template Strings eine sinnvolle Sache.

Einen vollständigen Überblick zu den neuen Web-Standards und Features, die Microsoft Edge mitbringt – wie z.B. WebAudio – bietet die Liste von http://dev.modern.ie/platform/status.

Mehr Tipps, Tricks und Hilfen rund um JavaScript

Microsoft hält eine ganze Reihe kostenloser Lehrangebote zu zahlreichen Open Source JavaScript-Themen bereit – und seit der Veröffentlichung von Microsoft Edge tun wir in diesem Bereich noch sehr viel mehr. Auch von mir gibt es Tutorials:

Außerdem haben wir da noch die Schulungsreihe unseres Teams:

Praktisch sind zudem die folgenden kostenlosen Tools: Visual Studio Community, Azure Trial und Cross Browser Testing Tools für Mac, Linux oder Windows.

Dieser Artikel ist Teil der Web-Dev Tech-Series von Microsoft. Wir freuen uns Microsoft Edge (früher Project Spartan genannt) und seine neue Rendering Engine mit euch zu teilen. Kostenlose Virtual Machines oder Remote Testings für Mac, iOS, Android oder Windows gibt es hier: @ dev.modern.IE.

(dpe)

Kategorien
(Kostenlose) Services Apps Boilerplates & andere Tools CMS Essentials Freebies, Tools und Templates JavaScript & jQuery Programmierung Sonstige Programmiersprachen Tipps, Tricks & Tutorials Webdesign WordPress

Codester: Neuer Marktplatz für Entwickler und Designer bietet faire Bedingungen und mehr

Heute möchte ich dir Codester vorstellen. Codester ist ein brandneuer Marktplatz für Entwickler und Designer. Hier kannst du Code Schnipsel, Skripte, Themes, Plugins und vieles mehr kaufen, um dein nächstes großes oder kleines Projekt aufzupolieren. Fertige Komponenten zu benutzen, spart Zeit und Zeit ist – wie wir alle wissen – Geld. Also nimm dir fünf Minuten und lies den folgenden Artikel.

Codester: Marktplatz für Designer und Entwickler

Codester: Ein kurzer Rundgang

Skript-Verzeichnisse waren eine große Sache Ende der Neunziger und noch zu Beginn des neuen Jahrtausends. Ich kann mich noch gut an das bekannteste von ihnen, HotScripts.com, erinnern. HotScripts war die Lösung für jede Aufgabe, dieirgendwas mit Programmierung zu tun hatte. Später wurde HotScripts dann von einem bekannten Websiteaufkäufer aufgekauft. Danach passierte leider nicht mehr viel. Und auch, wenn sie heute noch existieren, befinden sie sich seitdem in einem Stillstand. Besuch die Seite besser nicht, wenn du sie noch von früher kennst. Das würde nur deine nostalgischen Erinnerungen an vergangene Tage zerstören.

Ich bin im letzten Jahrzehnt keinem ähnlichen Service begegnet. Obwohl es keinen Mangel an Marktplätzen für Designer gibt, müssen Entwickler sich mit einer anderen Wahrheit auseinandersetzen. Aber: im Sommer diesen Jahres hat eine kleine Gruppe motivierter Entwickler eine Lösung für dieses Problem ersonnen. Willkommen, Codester.com, ein schnell wachsender, würdiger Nachfolger des vorher erwähnten Dinosauriers.

Codester spricht sowohl Designer als auch Entwickler an. Dabei haben jedoch alle angebotenen Elemente, zumindest zur Zeit, einen entwicklungsorientierten Touch. Nehmen wir die Grafikabteilung als Beispiel. Hier stellt Codester Benutzeroberflächen, Spiele-Code und Mockups neben Icons und Logos zur Verfügung. Das ist keine Spielzeugkiste für selbstverliebte Designer. Hier will keiner eine freundliche Bestätigung seines guten Geschmacks erheischen. Hier geht es darum, Arbeit zu erledigen. Dass Codester im Moment nicht allzu viele Dinge im Angebot hat, solltest du nicht als allzu großen Nachteil empfinden. Sie haben immerhin gerade erst angefangen.

Codester: Marktplatz für Designer und Entwickler

Wenn du dir die Hände wirklich schmutzig machen möchtest, wühl dich durch die Skript & Code-Abteilung, in der du Lösungen in PHP, JavaScript, Ruby, Python, Java, C, C++, C# und VB.Net finden wirst. Aktuell hat zwar nur die PHP-Kategorie eine nennenswerte Sammlung an Skripten anzubieten, aber die Leute hinter Codester arbeiten aktiv daran, das Portfolio schnell zu erweitern.

Wenn du ein App-Entwickler bist, solltest du den Bereich Mobile Apps besuchen, wo du vielleicht genau den einen Code-Schnipsel für iOS, Android, Unity, Corona oder Titanium findest, nach dem du die letzten fünf Nächte gesucht hast.

Heutzutage sind zwar einzelne Skripte immer noch nützlich und gefragt, aber die größere Nachfrage kommt von Entwicklern aus der CMS-Branche. Es ist sicherlich möglich, jedes gegebene Skript so zu verändern, dass es mit jedem CMS funktioniert. Das kann ich für WordPress fast uneingeschränkt bestätigen. Allerdings ist es effizienter, sich direkt für ein Skript-Modul, Plugin, Erweiterung, oder wie auch immer die Namenskonventionen deines CMS sein mögen, zu entscheiden und es in dem Umfeld, für das es gemacht wurde, zu benutzen.

Codester ist derselben Meinung und bietet eine Vielfalt an Plugins für WordPress, Joomla, Drupal, Magento, Prestashop, osCommerce, X-Cart und Opencart an. Themes, auch wenn sie sich mehr auf das Design beziehen, kombinieren Form und Funktion, um letztendlich die gewünschte Nutzererfahrung zu erreichen. Daher ist es konsequent, dass Codester einen separaten Abschnitt mit Themes, verfügbar für WordPress, Magento, Joomla, Drupal, Prestashop, Opencart, Muse, Tumblr und Ghost unterhält. Arbeitest du ganz ohne CMS, ist vielleicht die Sammlung von HTML-Templates am gleichen Ort interessant.

Codester: Vom Suchen und Finden

Codester ist auf Wachstum ausgerichtet und direkt so gebaut worden, dass es auch mit großen Beständen virtuos umgehen kann. Zurzeit kannst du einfach durch die Hauptabschnitte und Kategorien browsen. Darunter ist keine einzige, die man nicht innerhalb von ein paar Minuten durchscrollen kann. Sollte das Wachstum aber mit konstantem Tempo voranschreiten, wird sich das in wenigen Monaten deutlich verändert haben. Das Team hat vorgesorgt und den Service so strukturiert, dass es auch dann noch leicht sein wird, das benötigte Werkzeug zu finden, wenn es tausende Skripte, Themes oder was auch immer zu filtern gibt.

Codester: Marktplatz für Designer und Entwickler

Der offensichtlichste Weg, eine Lösung auf Codester zu suchen, ist es, die obere Suchleiste auf der Startseite zu verwenden. Gib deinen Suchbegriff ein und schau, was Codester dazu findet. Das ist nicht sehr effizient, sobald du bereits in der Lage bist, deine Parameter etwas einzuschränken, was bei einem typischen Entwicklungsprojekt höchstwahrscheinlich der Fall sein wird. Codester arbeitet nicht mit zusätzlichen Tags, um bestimmte zusammengehörende Inhalte zu gruppieren – zumindest nicht von der Suchleiste aus.

Daher ist der empfehlenswertere Weg an die Inhalte zu komme,n das Browsen durch die Kategorien. Sobald du eine beliebige Kategorie auswählst, wird dir ihr Inhalt in einer Rasterübersicht präsentiert. Von diesem Raster aus, kannst du die Detailseite eines jeden Elementes öffnen, um zu weiteren INformationen zu gelangen. Die wichtigsten Informationen findest du aber bereits direkt im Übersichtsgrid. Dort kannst du den Preis, ein Vorschaubild, eine kurze Beschreibung und die Zielplattform sehen. Videos und Live-Previews sind auch über das Raster zugänglich. Also kannst du deine Wahl schnell auf ein oder zwei Angebote einschränken, die dich wirklich interessieren.

Codester: Marktplatz für Designer und Entwickler

Mit einem Klick auf die Vorschau des Elements öffnet sich die Detail-Seite. Diese erfüllt das, was ihr Name verspricht. Hier findest du sämtliche wichtigen Information zum Produkt. Die Beschreibungen sind ausführlich, Screenshots gibt es wie Sand am Meer. Hier befindet sich auch eine Box mit zusätzlichen Tags, die das jeweilige Tool zusätzich kategorisieren. Ein Klick auf einen der Tags, öffnet ein weiteres Grid, das alle Produkte aus Codesters Portfolio zeigt, denen dasselbe Tag zugeordnet wurde.

Die Detail-Seite ist in vier Segmente eingeteilt, bei denen die Übersicht die Standardansicht nach dem Öffnen der Seite ist. Es gibt Tabs für Bewertungen, Support und FAQ. Der Support-Tab bietet eine direkte Support-Möglichkeit, ähnlich eines Kommentarbereiches in einem CMS. Jeder mit einem Account kann Fragen stellen, während nur tatsächliche Käufer eines Produktes Bewertungen zu diesem Produkt veröffentlichen können. Ein FAQ-Bereich beantwortet schon mal die häufigsten Fragen, um den Support-Bereich zu entlasten.

Codester: Marktplatz für Designer und Entwickler

Share-Buttons erlauben es dir, Codester-Inhalte auf Facebook, Twitter, Google+, Pinterest, LinkedIn oder per E-Mail zu teilen. Ein Partnerprogramm ist jedem zugänglich und bietet 10 Prozent Kommission für jeden Käufer, der auf deine Empfehlung hin gekauft hat.

Codesters Lizensen

Die Kosten der einzelnen Elemente variieren stark, die Lizensen aber nicht. Zur Wahl steht jeweils die reguläre und die erweiterte Lizenz. Die (günstigere) reguläre Lizenz erlaubt, das gekaufte Produkt in einem deiner Projekte, ob privat, kommerziell oder für einen Kunden, zu verwenden. Die erweiterte Lizenz bietet dasselbe, mit der Ausnahme, dass das Produkt bei dieser Lizenz für eine unbegrenzte Anzahl von Projekten benutzt werden kann. Du darfst lediglich die Produkte nicht als solche verkaufen, aber das sollte ohnehin selbstverständlich sein.

Codester: Verkaufe Deine Arbeit

Wie man es von einem Marktplatz erwartet, bietet Codester keine eigenen Produkte an, sondern arbeitet als eine Art Mittelsmann für talentierte Entwickler und Designer, die daran interessiert sind, ihre Skripte, Plugins, Themes, Quellcodes an die Welt zu verkaufen. Hier mitzumachen ist ganz einfach.

Codester hat sehr wenige, dabei sehr gerechte Bedingungen für Verkäufer. Verkäufer verdienen 70 Prozent von jedem Kauf. Es gibt keine Mindestanzahl an Verkäufen, ebenso keine Mindestmenge an aufgelaufenen Beträgen, bevor man eine Auszahlung anfordern kann, nichts. Die Bezahlung erfolgt über PayPal oder Wire am Ende jeden Monats. Es gibt keine zusätzlichen Gebühren oder andere Haken und Ösen.

Codester: Bild dir deine Eigene Meinung

Mir gefällt das Projekt. Codester ist eine gut gestaltete, sorgfältig geschriebene Marktplatzumgebung mit Fokus auf Entwickler und das ist eine gute Sache an sich. Codester braucht viel mehr Beteiligung durch die Community, sei es durch mehr Angebote in den verschiedenen Kategorien oder mehr Interaktion mit den bereits existierenden Angeboten. Hier kommst du ins Spiel. Schau dir Codester an und mach dir ein eigenes Bild. Unterstütz es, wenn es dir gefällt.

Kategorien
JavaScript & jQuery Programmierung Sonstige Programmiersprachen

ECMAScript 6 besser verstehen: Klassen und Vererbung

Hiermit möchte ich Sie zu einer Serie von Artikeln über ECMAScript 6 einladen, mit der ich nicht nur meine Begeisterung darüber teilen, sondern vor allem erklären will, wie man ECMAScript 6 am besten verwenden kann. Ich hoffe, Sie haben mindestens soviel Spaß beim Lesen, wie ich beim Schreiben hatte.

ecmascript01-teaser_DE

Zu meinem Hintergrund: Ich arbeite bei Microsoft an der Browser Rendering Engine für das Microsoft Edge, welche gegenüber der bisherigen Internet Explorer Engine, die wir im Lauf der Jahre ausgiebig kennen (und lieben?) gelernt haben, ein gewaltiger Schritt nach vorn ist. Mein persönliches Lieblings-Feature dabei ist, dass sie jede Menge ECMAScript 6 unterstützt. Das erleichtert das Schreiben von komplexen Web-Applikationen ungemein.

Laut http://kangax.github.io/compat-table/es6/ und ES6 on dev.modern.ie/platform/status haben wir derzeit fast 70% der ECMAScript 6 Features in Microsoft Edge.

Keine Frage, ich mag es mit JavaScript zu arbeiten, aber wenn ich an großen Projekten wie Babylon.js sitze, greife ich lieber auf TypeScript zurück, das jetzt auch Angular 2 antreibt. Der Grund ist, dass ich bei JavaScript (auch bekannt als ECMAScript 5) einige Syntax-Funktionen vermisse, die andere Programmiersprachen, mit denen ich große Projekte schreibe, mitbringen. Zum Beispiel fehlen mir Klassen und Vererbungen.

Wie Sie von JavaScript auf TypeScript umsteigen, erfahren Sie in diesem Artikel. Eine ausführliche Einführung in TypeScript erhalten Sie in diesem kostenlosen Online-Kurs der Microsoft Virtual Academy (MVA). Den kostenlosen Download zu TypeScript 1.4 für Visual Studio 2013 finden Sie hier.

Eine Klasse erstellen

JavaScript ist eine prototypen-basierte Sprache und mit ECMAScript 5 kann man Klassen und Vererbungen simulieren. Sie möchten die Performance Ihrer Webanwendung verbessern? Hier finden Sie praktische Tipps zur Verbesserung Ihres HTML/JavaScript Codes.

Die flexiblen Funktionen von JavaScript erlauben uns, eine Datenkapselung zu simulieren, als ob wir mit Klassen arbeiten würden. Um dies zu erreichen, erweitern wir den Prototyp eines Objekts:

var Animal = (function () {
    function Animal(name) {
        this.name = name;
    }
    // Methods
    Animal.prototype.doSomething = function () {
        console.log("I'm a " + this.name);
    };
    return Animal;
})();


var lion = new Animal("Lion");
lion.doSomething();

Deutlich wird hier, dass wir eine „Klasse“ mit „Eigenschaften“ und „Methoden“ definiert haben.

Der Konstruktor ist dabei durch die Funktion selbst definiert (function Animal). Dies ermöglicht uns die Instanziierung von Eigenschaften. Durch die Nutzung des Prototyps können wir Funktionen definieren, die wie Instanzmethoden behandelt werden.

Man kann es also durchaus so machen, muss aber Einiges von prototypischer Vererbung verstehen. Und wer an klassenbasierte Sprachen gewöhnt ist, findet das sicher alles etwas verwirrend. Etwas seltsam ist natürlich auch, dass in JavaScript zwar das Schlüsselwort Klasse existiert, es aber nichts bewirkt. ECMAScript 6 hingegen bringt dieses jetzt zum Laufen, und das Ganze auch noch mit einem einfacheren Code:

class AnimalES6 {
    constructor(name) {
        this.name = name;
    }

    doSomething() {
        console.log("I'm a " + this.name);
    }
}

var lionES6 = new AnimalES6("Lion");
lionES6.doSomething();

Am Ende haben wir das gleiche Ergebnis. Aber für Entwickler, die gewohnt sind, mit Klassen zu arbeiten, ist das Ganze weitaus leichter zu schreiben und zu lesen. Ein Prototyp ist dazu hier nicht nötig und und man nutzt einfach das Keyword „Constructor“ um den Konstruktor zu definieren.

Darüber hinaus bringen Klassen viel neue Semantik mit, die in ECMAScript 5 nicht vorhanden war. So kann ein Konstruktor nicht ohne das Keyword „new“ aufgerufen oder Methoden mit „new“ konstruiert werden. Eine weitere Veränderung: Methoden sind nicht aufzählbar.

Interessant ist jedoch: Beide Versionen können parallel genutzt werden.

Denn trotz der neuen Keywords, am Ende des Tages landen wir bei einer Funktion mit einem Prototyp, dem eine Funktion hinzugefügt wurde. Eine „Methode“ bezeichnet hier einfach eine Funktionseigenschaft des Objekts.

Eine weitere Kernfunktion klassenbasierter Entwicklung, "getter and setter", wird ebenfalls von ES6 unterstützt. Dadurch wird schnell deutlich, was der Sinn von Methoden ist und was sie tun sollen:

class AnimalES6 {
    constructor(name) {
        this.name = name;
        this._age = 0;
    }

    get age() {
        return this._age;
    }

    set age(value) {
        if (value < 0) {
            console.log("We do not support undead animals");
        }

        this._age = value;
    }

    doSomething() {
        console.log("I'm a " + this.name);
    }
}

var lionES6 = new AnimalES6("Lion");
lionES6.doSomething();
lionES6.age = 5;

Ganz praktisch, oder?

Gleichzeitig kommt hier einer der typischen Vorbehalte gegenüber JavaScript zum Vorschein: der gar nicht so vertrauliche „private Member“ (_age). Mehr zu diesem Thema schrieb ich in diesem Artikel.

Mit einer neuen Funktion von ECMAScript 6 haben wir nun einen eleganteren Weg, dies umzusetzen und zwar mithilfe von „Symbolen“:

var ageSymbol = Symbol();

class AnimalES6 {
    constructor(name) {
        this.name = name;
        this[ageSymbol] = 0;
    }

    get age() {
        return this[ageSymbol];
    }

    set age(value) {
        if (value < 0) {
            console.log("We do not support undead animals");
        }

        this[ageSymbol] = value;
    }

    doSomething() {
        console.log("I'm a " + this.name);
    }
}

var lionES6 = new AnimalES6("Lion");
lionES6.doSomething();
lionES6.age = 5;

Was also ist ein Symbol in diesem Zusammenhang? Es ist ein einzigartiger, unveränderlicher Datentyp, der es ermöglicht, eindeutige Objekteigenschaften zu definieren. Ohne das Symbol besteht kein Zugang zu den Eigenschaften.

Die Folge ist ein „persönlicherer“ Zugriff auf die Member. Oder zumindest ist dieser Zugriff jetzt nicht mehr so einfach. Symbole helfen zwar bei der Einzigartigkeit von Namen, aber diese Einzigartigkeit allein garantiert noch keinen Datenschutz. Es bedeutet nur: Wenn ein Schlüssel nötig ist, der mit einem anderen nicht kollidieren darf, erzeugen Sie ein neues Symbol.

Dass auch hier noch niemand so ganz "privat" ist, liegt an Object.getOwnPropertySymbols. Damit können andere auf die Symboleigenschaften zugreifen.

Mit Vererbungen arbeiten

Sobald wir Klassen haben, erwarten wir auch Möglichkeiten der Vererbung. Auch hier war es bisher schon möglich, Vererbung in ES5 zu simulieren, aber es war schon eine recht komplexe Angelegenheit.

So sah es zum Beispiel aus, wenn TypeScript Vererbung nachbildete:

var __extends = this.__extends || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};
var SwitchBooleanAction = (function (_super) {
     __extends(SwitchBooleanAction, _super);
     function SwitchBooleanAction(triggerOptions, target, propertyPath, condition) {
        _super.call(this, triggerOptions, condition);
        this.propertyPath = propertyPath;
        this._target = target;
     }
     SwitchBooleanAction.prototype.execute = function () {
        this._target[this._property] = !this._target[this._property];
     };
     return SwitchBooleanAction;
})(BABYLON.Action);

Nicht unbedingt sehr leicht zu lesen, oder? Die Alternative von ECMAScript 6 sieht da schon besser aus:

var legsCountSymbol = Symbol();
class InsectES6 extends AnimalES6 {
    constructor(name) {
        super(name);
        this[legsCountSymbol] = 0;
    }

    get legsCount() {
        return this[legsCountSymbol];
    }

    set legsCount(value) {
        if (value < 0) {
            console.log("We do not support nether or interstellar insects");
        }

        this[legsCountSymbol] = value;
    }

    doSomething() {
        super.doSomething();
        console.log("And I have " + this[legsCountSymbol] + " legs!");
    }
}

var spiderES6 = new InsectES6("Spider");
spiderES6.legsCount = 8;
spiderES6.doSomething();

Mithilfe des Keywords „extends“ lassen sich Klassen von einer anderen ableiten, also spezialisierte Klassen erzeugen („child“). Das Keyword „super“ stellt dann die Beziehung zur Basisklasse her.

Dank all dieser neuen Features können wir nun Klassen erzeugen und mit Vererbungen arbeiten, ohne uns Hilfe in Hogwarts holen zu müssen, um das Gleiche mit Prototypen zu erreichen.

Warum TypeScript noch relevanter ist als zuvor…

Nachdem wir nun die beschriebenen neuen Funktionen in unserem Browser haben, ist es meiner Meinung nach sogar noch sinnvoller als vorher, TypeScript zu nutzen, um JavaScript-Code zu erstellen.

Schließlich unterstützt TypeScript (1.4) jetzt ECMAScript 6 Code (mit let und const Keywords). Bereits existierender TypeScript-Code kann also weiter verwendet werden, man muss nur noch diese neue Option aktivieren, um ECMAScript 6 Code zu erstellen.

Und wer sich ein paar Zeilen TypeScript genauer anschaut, wird feststellen, dass sie aussehen wie ECMAScript 6 ohne die Typen. Wer heute TypeScript beherrscht, wird morgen also auch ECMAScript 6 schneller verstehen.

Daniel Meixner und Chris Heilmann sprechen in dieser Ausgabe des TechTalk ausführlich über die Neuerungen bei Edge, ECMAScript 2015 und TypeScript.

Fazit

Wer mit TypeScript arbeitet, kann die Funktionen in allen Browsern nutzen, der Code wird in ECMAScript 5 umgewandelt. Wer ECMAScript 6 direkt im Browser nutzen will, muss auf Windows 10 aktualisieren und dort die Rendering Engine von Microsoft Edge testen. Wem das jedoch zuviel Aufwand ist, weil er nur mal eben die neuen Browser-Funktionen ansehen will: remote.modern.ie bietet den Zugriff auf einen Windows 10 Computer mit Microsoft Edge. Das klappt auch mit MacOS oder Linux-Maschinen.

Klar, Microsoft Edge ist nicht der einzige Browser, der den offenen Standard ES6 unterstützt. Wie weit der Support anderer Browser inzwischen reicht, ist hier verzeichnet: http://kangax.github.io/compat-table/es6/

Und um noch einmal euphorisch zu werden: Ich denke die Zukunftsaussichten für JavaScript mit ECMAScript 6 sind wirklich glänzend und ich kann es kaum erwarten, dass es von möglichst vielen Browsern unterstützt wird.

Dieser Artikel ist Teil der Web Dev Tech Series von Microsoft. Wir freuen uns, Microsoft Edge und seine neue EdgeHTML Rendering Engine mit Ihnen zu teilen. Kostenlose Virtual Machines oder Remote Testings für Mac, iOS, Android oder Windows gibt es hier: dev.modern.IE.

Kategorien
Boilerplates & andere Tools JavaScript & jQuery Programmierung Sonstige Programmiersprachen

Neu und kostenlos: Microsofts Editor Visual Studio Code für Windows, Mac und Linux

Mehr denn je öffnet sich Microsoft der Außenwelt. Auf der hauseigenen Build-Konferenz präsentierte Microsoft den neuen Code-Editor „Visual Studio Code“, der kostenlos verteilt wird. Als kleine Sensation darf gewertet werden, dass der Editor nicht nur für Windows, sondern auch für Mac OS X und Linux erhältlich ist. Visual Studio Code versteht sich hierbei nicht als komplette Entwicklungsumgebung wie sein großer Bruder Visual Studio, sondern als „leichte“ Variante im Stil von Sublime Text oder Atom. Schon in der Vergangenheit hatte Microsoft solche kleinen Lösungen im Angebot, aber stets limitiert auf Windows-User und Microsoft-Sprachen. Damit ist nun offenbar Schluss…

Microsofts Code-Editor Visual Studio Code für alle Betriebssysteme

Microsoft Visual Studio Code

Microsoft öffnet sich immer weiter und entwickelt nun auch im Developerbereich Applikationen für andere Betriebssysteme. Auf der offiziellen Haus-Entwicklerkonferenz Build stellte Microsoft völlig überraschend den neuen Code-Editor „Visual Studio Code“ vor. Der Editor befindet sich noch im „Preview“-Status. Es sind also noch nicht alle Funktionen integriert und es funktioniert noch nicht alles 100%ig reibungslos. Doch der erste Eindruck ist schon mal recht positiv und der Funktionsumfang brauchbar. Auch wenn der Editor für die Bearbeitung von ASP.NET und Node.js angepriesen wird, so kann er doch bedeutend mehr.

Die HTML- und JavaScript-Dateien des Editors werden mittels Chromium gehostet, der Open-Source-Variante von Googles Webbrowser Chrome. Allerdings wird der Umweg über das quelloffene Electron-Framework gegangen, aus dem der Atom-Editor entstanden ist. Der Vorteil dieses Weges ist, dass man die App direkt starten kann und nicht installieren muss. Das funktioniert unter allen Betriebssystemen.

MacWinLinux2

An den Funktionsumfang von Visual Studio kommt Visual Studio Code natürlich nicht heran. Das ist naheliegenderweise auch nicht beabsichtigt. Entwickelt wurde der Code-Editor für das Entwickeln und Debuggen von Cloud- und Webanwendungen. Der zurzeit noch rudimentäre Debugger ist aktuell nur für Node.js-Projekte nutzbar.

Microsoft Visual Studio Code
Debugging mit Visual Studio Code

Visual Studio Code bietet bereits in der Preview-Version Syntax-Highlighting für mehr als 20 Sprachen, IntelliSense Auto-Vervollständigung, Bracket Matching, anpassbare Keyboard-Shortcuts, Steuerung per Kommandozeile, automatische Einrückung und Snippet-Support. Unter anderem werden HTML5, CSS 3 und PHP unterstützt.

Visual Studio Code – Look and Feel

Der Editor erinnert stark an den Sublime Text 2 Editor und kann ebenfalls auf persönliche Bedürfnisse angepasst werden. Sehr praktisch ist die Möglichkeit, das Editor-Fenster zu teilen, um mehr als eine Datei gleichzeitig bearbeiten zu können.

visual-studio-code-unterteilt

Visual Studio Code kommt zurzeit mit 2 Themes daher, einem dunklen und einem hellen. Diese lassen sich entweder über das Menü oder über die Kommando-Zeile abrufen und einstellen.

theme-wechsel

Die Code-Vervollständigung funktioniert reibungslos und schnell. Hier geht Microsoft den richtigen Weg. Allerdings ist anzumerken, dass die Vervollständigung nur mit der Sprache funktioniert, die das Dateiformat vorgibt. Bei PHP existieren noch grundsätzliche Schwächen, bei gemischten Dateien wie WordPress-Theme-Templates ist man leider noch auf überwiegende Handarbeit angewiesen. Vielleicht bietet die Zukunft eine Erweiterung für die WordPress-Theme-Entwicklung.

Sehr gut funktioniert die Code-Vervollständigung mit reinen CSS- oder HTML-Dateien.

css-vervollstaendigung

html-vervollstaendigung

Integrierte Git Versions-Kontrolle

Sehr hilfreich kann die integrierte Git-Versionskontrolle sein. Ein einfaches Erstellen von Branches, Push, Pull und Synchronisation ist kein Problem.

GitVersionControl

Visual Studio Code und der Datenschutz

Visual Studio Code befindet sich noch im offiziellen Vorschau-Status. Programmabstürze und Freezes  können daher noch vorkommen. Wer sich zu diesem Zeitpunkt den Editor herunterlädt, erklärt sich damit einverstanden, dass Absturz-Berichte automatisch an Microsoft gesendet werden. Microsoft bittet explizit darum, den Editor nicht herunterzuladen, wenn man damit nicht einverstanden ist.

Ein Ausblick auf die Zukunft von Visual Studio Code

Den Funktionsumfang möchte Microsoft noch deutlich erweitern. Angedacht ist die Erweiterbarkeit durch Dritte. Hier möchte Microsoft wohl einen ähnlichen Weg beschreiten, wie die Macher von Atom oder Sublime Text 2. Jedoch soll Visual Studio Code stets ein leichter Editor für Web- und Cloud-Anwendungen bleiben, und keine aufgeblasene Entwicklungsumgebung werden. Das Potential zu einem vielgenutzten und beliebten Code-Editor hat Visual Studio Code. Die Zukunft wird zeigen, wie beliebt der Editor werden kann.

Das Video zu Visual Studio Code

Fazit

Microsofts Visual Studio Code macht einen recht interessanten Eindruck, kann mich aber zum jetzigen Zeitpunkt nicht zum Wechsel veranlassen. Da der Code-Editor sich in einer frühen Entwicklungsphase befindet, kann noch viel geschehen. Gerade die zukünftige Möglichkeit der Erweiterung durch Dritte kann recht interessant werden. Meine Empfehlung ist, den Editor nicht aus den Augen zu verlieren.

Links zum Beitrag

(dpe)

Kategorien
JavaScript & jQuery Programmierung Sonstige Programmiersprachen Webdesign

Textures.js: SVG-Texturen für jede Oberfläche

Das SVG-Format stellt eine Vielzahl an Möglichkeiten bereit, um komplexe grafische Inhalte umzusetzen. Auch Texturen lassen sich mit dem „<pattern>“-Element erstellen und auf Formen anwenden. Aber gerade bei einfachen und gängigen Texturen ist der Aufwand, diese selbst per SVG auszuzeichnen, im Verhältnis zum Ergebnis recht hoch. Daher stellt die JavaScript-Bibliothek „Texture.js“ solche Texturen, die weitestgehend nur aus Linien und Punkten bestehen, für SVG-Elemente zur Verfügung. Mit wenigen Zeilen JavaScript kann man dann die einzelnen Formen einer SVG-Grafik mit unterschiedlichen Texturen versehen.

TEXTURE.JS

„Textures.js“ basiert auf „D3.js“

Da „Textures.js“ auf der JavaScript-Bibliothek „D3.js“ aufbaut, muss diese zusammen mit „Textures.js“ im HTML-Dokument eingebunden werden.

„D3.js“ hilft bei der Visualisierung von Daten verschiedenster Art. Man kann damit HTML- oder SVG-Elemente auswählen und nach bestimmten Vorgaben gestalten.

„D3.js“ sorgt im Zusammenspiel mit „Textures.js“ dafür, einzelne Formen innerhalb einer SVG-Grafik auszuwählen. Diese erhalten schließlich per „Textures.js“ ein Muster.

texturesjs

SVG-Grafik erstellen und mit Textur versehen

Zunächst einmal muss eine SVG-Grafik her. Diese wird im HTML-Dokument eingebettet und lässt sich fast nach Belieben gestalten. Nur eine Füllung für die Form darf nicht angegeben werden, da diese später per „Textures.js“ vergeben wird. Gibt man eine Füllung vor, wird diese später mit der Textur nicht überschrieben.

<svg width="225" height="150" id="grafik">
  <circle cx="75" cy="75" r="75" id="kreis1"></circle>
  <circle cx="150" cy="75" r="75" id="kreis2"></circle>
</svg>

Im Beispiel werden zwei einfache Kreise ausgezeichnet. Sowohl das „<svg>“- Element als auch die „<circle>“-Elemente erhalten eine ID, um sie später per „D3.js“ ansprechen zu können.

Das Prinzip von „Textures.js“ ist einfach erklärt. Die Bibliothek stellt per JavaScript eine Reihe unterschiedlicher Texturen bereit. Diese werden einem SVG-Element hinzugefügt. Dies geschieht, indem „Textures.js“ im SVG-Element für jedes Muster ein eigenes „<pattern>“-Element anlegt.

var svg = d3.select("#grafik");
var textur1 = textures.lines();
var textur2 = textures.circles();

svg.call(textur1);
svg.call(textur2);

Im Beispiel wird per „d3.select()“ zunächst die SVG-Grafik ausgewählt. Anschließend werden zwei Texturen erstellt. Im Beispiel fällt die Wahl auf die beiden Grundtexturen „lines()“ und „circles()“. Per „call()“ werden die Texturen dem SVG-Element hinzugefügt. Ab diesem Moment stehen die Muster innerhalb der Grafik bereit.

texturesjs_einfache-muster

Einfache Muster

Im letzten Schritt müssen die Texturen noch den beiden Kreisen zugeordnet werden.

var kreis1 = d3.select("kreis1");
var kreis2 = d3.select("kreis");

kreis1.style("fill", textur1.url());
kreis2.style("fill", textur2.url());

Auch hierbei werden die Kreise erst per „d3.select()“ ausgewählt. Anschließend weisen wir den Elementen per „style()“ die Eigenschaft „fill“ mit den URLs der beiden Muster zu. Die URLs des Musters ist jeweils eine ID, die von „Textures.js“ vergeben wird.

Texturen anpassen

„Textures.js“ kennt drei Grundformen: Linien, Kreise und Pfade. Dabei lässt sich jede Grundform anpassen. Bei Linien kann die Stärke, der Abstand und die Ausrichtung angegeben werden. Für jede Eigenschaft, die angepasst werden soll, gibt es eine Methode, die einfach an „lines()“ angehängt wird.

textures.lines().stroke("green").strokeWidth(1).size(5).orientation("2/8");

Im Beispiel wird per „stroke()“ die Farbe der Linien definiert. Per „strokeWidth()“ wird die Linienstärke und per „size()“ der Abstand der Linien zueinander festgelegt. Der Wert für „orientation()“ gibt die Ausrichtung der Linien an. Neben Werten wie „horizontal“, „vertical“ und „diagonal“ gibt es auch die Möglichkeit, die Ausrichtung als Achtelbruch auszugeben. „2/8“ entspricht hierbei einer diagonalen Ausrichtung, „4/8“ einer horizontalen Ausrichtung und „8/8“ einer vertikalen Ausrichtung.

texturesjs_angepasste-muster

Individuell angepasste Muster

Bei Kreisen gibt es keine Ausrichtung. Dafür besteht zusätzlich die Möglichkeit, eine Füllfarbe anzugeben.

textures.circles().fill("orange").radius(5).size(15);

Außerdem wird die Größe der Kreise per „radius()“ definiert. Mit der zusätzlichen Eigenschaft „complement()“ sorgen wir dafür, dass die Kreise nicht in Reihen und Spalten neben- und untereinander dargestellt werden, sondern jeweils versetzt.

texturesjs_angepasste-muster-versetzt

In Reih und Glied angeordenete Kreise sowie versetzt angeordnete Kreise

Mit den Pfadtexturen stehen einem noch eine Reihe weitere Muster zur Verfügung, die komplexer sind, als die einfachen Linien- und Kreismuster. Insgesamt sieben Pfadmuster – zum Beispiel Kreuze, Hexagone und Wellen – stehen zur Auswahl.

textures.paths().d("waves").stroke("blue");

Über die Eigenschaft „d()“ legen wir die Art des Musters fest. Anschließend lassen sich Farbe und Linienstärke, wie auch bei den anderen Mustern, festlegen.

texturesjs_weitere-muster

Pfadtexturen

Auch individuelle Muster möglich

Wem das Angebot an Texturen nicht ausreicht, der kann mit „Textures.js“ auch eigene Muster auf der Grundlage der Pfadtexturen erstellen. Dazu wird „d()“ eine Funktion übergeben, welche die Form des Musters beschreibt.

textures.paths().d(function(s) {
  return "M …";
}).stroke("blue");

Per „return“ werden innerhalb der Funktion die Koordinaten für die „d“-Eigenschaft eines SVG-Pfades ausgegeben.

Fazit und Link zum Beitrag

Mit „Textures.js“ stehen einem viele Muster zur Verfügung, die sich schnell SVG-Formen zuordnen lassen. Die Anwendung ist einfach und Anpassungen sind schnell erledigt. Textures.js steht unter der MIT-Lizenz zur kostenlosen Verwendung für private und kommerzielle Zwecke bereit. D3.js steht unter der ähnlich liberalen BSD-Lizenz.

(dpe)

Kategorien
Programmierung Sonstige Programmiersprachen

Customize Images: PHP-Script erlaubt die Manipulation von Bilddateien per URL-String

Es ist schon über ein Jahr her, dass wir Ihnen das PHP-Projekt Adaptive Images von Matt Wilcox vorgestellt haben. Mit Adaptive Images wird die automatische Anpassung der in eine Website eingebundenen Bilddateien auf den Viewport des Besucherbrowsers gewährleistet. Dario D. Müller ließ sich von Adaptive Images inspirieren, entwickelte aber mit Customize Images dennoch etwas völlig anderes. Customize Images erlaubt die gezielte Bildmanipulation per URL-String…

customize-images

Customize Images: Gezielte Eingriffsmöglichkeiten statt automatischer Auflösungsanpassung

Während der Anwendungsfall von Adaptive Images in Zeiten von responsivem Webdesign nahezu selbsterklärend ist, muss man dem Nutzen von Customize Images schon etwas nachspüren. Interessant an der Herangehensweise ist sicherlich die Bildanpassung über Parameter im Dateiaufruf.

So kann so ein Aufruf aussehen: http:://www.ihredomain.tld/files/bildname_w640_s.jpg

Was hier passiert ist folgendes. Die Datei bildname.jpg wird aufgerufen, jedoch über den Parameter _w640 auf 640 Pixel Breite geändert, wobei der zusätzliche Parameter _s sicherstellt, dass das Seitenverhältnis des Bildes gewahrt bleibt. Ähnlich funktionieren die Parameter _h250 oder _w640_h250. Ich denke, die Funktionsweise wird klar.

Die eigentlichen Funktionsdateien .htaccess, index.php, class.customize-images.php werden zweckmäßigerweise direkt mit im Ordner files abgelegt. Weitere Installationsschritte sind nicht erforderlich. Die .htaccess sorgt für die erforderlichen Umleitungen.

Neben dem Parameter _s für die Beibehaltung des Seitenverhältnis, bietet sich der Parameter _c an, der bei einem Bild, bei dem sowohl Breite wie Höhe definiert ist, dafür sorgt, dass das Seitenverhältnis durch Weglassen von Bildinhalten, also durch Cropping, Schneiden, gewahrt bleibt. Weniger sinnvoll erscheint allerdings der ebenfalls verfügbare Parameter _d, der das Bild anhand der übergebenen Breite und Höhe entsprechend verzerrt (_d = distort).

Die einmal behandelten – mit Ausnahme der verzerrt dargestellten – Bilder werden gecacht und stehen so für weitere Aufrufe ohne neuerliche Vorbehandlung zur Verfügung. Das Caching kann über den Parameter ?dev abgeschaltet werden.

Customize Images ist ein ganz frisches Projekt und erst am 15. August auf Github ins Leben gerufen worden. Es kann unter GNU GPL-Lizenz frei verwendet werden.

Links zum Beitrag:

  • Customize Images | Github
  • PHP-Projekt: Adaptive-Image als “Customize-Images” | Dario D. Müller
  • Adaptive Images: PHP-Script skaliert Bilder passend in responsiven Layouts | Dr. Web Magazin
Kategorien
Inspiration Programmierung Sonstige Programmiersprachen Tutorials

Tutorial für besseres PHP: The Right Way

PHP ist eine der populärsten serverseitigen Programmiersprachen. Da sich Webentwickler nicht selten autodidaktisch Programmiersprachen aneignen, wird nicht immer das beste PHP geschrieben. Was Strukturierung, Sicherheit und Performance betrifft, gibt es dann unter Umständen Ergebnisse, die zwar funktionieren, aber durchaus besser hätten aussehen können. „PHP: The Right Way“ ist ein Tutorial, welches sich zur Aufgabe macht, bessere PHP-Programmierung zu vermitteln.

Mehr Tutorials gefällig? Bitteschön!


„PHP: The Right Way“

PHP: The Right Way“ steht in Englisch und drei weiteren Sprachen zur Verfügung. Deutsch ist leider nicht dabei und derzeit auch nicht geplant. In mehreren Kapiteln wird auf Grundsätzliches zur Strukturierung des Quelltextes, auf verschiedene Ansätze der Programmierung sowie auf die Sicherheit programmierter Scripte eingegangen. Nicht immer geht das Tutorial ins Detail. Hier und da wird auf die offizielle PHP-Website oder – wenn es um die Erklärung allgemeiner Begriffe aus der Welt der Programmierung geht – auf Wikipedia-Artikel verwiesen.

Quelltext-Strukturierung und Programmieransätze

Neben einigen allgemeinen Grundsätzen zu Variablen, Operatoren und Strings gibt das Tutorial auch Auskunft über die empfohlene Strukturierung des PHP-Quelltextes. So werden die Coding-Standards vorgestellt, in denen geregelt ist, wie der Quelltext auszusehen hat. Das macht eine Programmierung erst einmal nicht sicherer oder performanter, aber übersichtlich und einheitlich. Gerade wenn Quelltext auch von anderen bearbeitet werden soll, ist eine einheitliche Struktur nicht unwichtig.

Außerdem werden im Tutorial unterschiedliche Programmieransätze vorgestellt. Bei komplexen Programmierprojekten ist es besonders wichtig, mit der Wahl des richtigen Ansatzes die Programmierung übersichtlich und leicht verwaltbar zu halten.

Sicherheit und Testumgebung

Ein weiterer Aspekt, mit dem sich das Tutorial befasst, ist die Sicherheit. Hier wird vor allem auf die Verschlüsselung von Passwörtern, Error-Reporting sowie der Umgang mit Fremdinhalten – also Benutzereingaben oder Inhalte externer Seiten – eingegangen.

Darüber hinaus gibt es ein Kapitel, das sich mit dem Testen von PHP-Scripten beschäftigt. Hier stehen eine Reihe von Links zu Tools und Frameworks bereit, die beim Testen von PHP-Programmierungen helfen können.

Fazit: „PHP: The Right Way“ ist keine klassische Dokumentation mit Sprachreferenz der einzelnen Funktionen. Vielmehr werden Themen behandelt, die grundsätzlicher Natur sind und zu besserem Code führen sollen. Lesen lohnt aber jedenfalls.

(dpe)

Kategorien
Programmierung Sonstige Programmiersprachen

Doodle Jump in HTML5 nachgebaut

Kushagra Agarwal stellt auf der recht neuen Showcase-Plattform CSSDeck einen nahezu originalgetreuen Nachbau des beliebten iOS-Games Doodle Jump vor. Unter Verwendung verschiedener HTML5 APIs und des Canvas-Elements tat er alles, um den eigentlichen Urhebern die Arbeit so leicht wie möglich zu machen ;-)

Doodle Jump HTML5: Vorerst experimentell

Ich bin nicht sicher, ob es Agarwal schlussendlich viel nützen wird, dass er die Erfinder des Spieles Doodle Jump mit mehr Credits als üblich versieht und sogar offensiv dazu auffordert, die Games für iOS und Android (samt Link zum jeweiligen App Store) zu installieren, sollte man Freude an der HTML5-Version haben. Denn Doodle Jump in HTML5 sieht exakt so aus wie das Original. Von Ähnlichkeit zu sprechen wäre schiere Untertreibung.

Allerdings konnte Agarwal bislang nicht alle Funktionen des Originals, etwa Sound, Monster oder Powerups, überführen, was er indes vage für die Zukunft andeutet. Gesteuert wird das Browser-Doodle-Jump mit den Pfeiltasten, die Leertaste initiiert einen Neustart. Die HTML5-Umsetzung ist gelungen, schnell und stabil.

Wagen Sie ein schnelles Spielchen oder kopieren sich den Quellcode zu Lernzwecken, solange es noch geht…

Kategorien
Programmierung Sonstige Programmiersprachen

PHP: Intelligente Bildbearbeitung im Live-Projekt mit PHPImageWorkshop

Bilder müssen für ein Webprojekt oft bearbeitet werden. Da ist es nötig, Bilder zuzuschneiden, zu verkleinern oder mit einem Wasserzeichen zu versehen. Vieles geschieht in Bildbearbeitungsprogrammen wie Photoshop. Hier und da ist es jedoch sinnvoll, die Bildbearbeitung automatisiert über ein Script laufen zu lassen. PHPImageWorkshop ist eine Bibliothek, die nützliche Funktionen zur serverseitigen Bildbearbeitung zur Verfügung stellt.


PHPImageWorkshop

Voraussetzung und Installation

PHPImageWorkshop besteht aus einer einzelnen PHP-Datei, die eingebunden werden muss, um die darin enthaltene Klasse „ImageWorkshop“ nutzen zu können. Da in der PHP-Datei der Namespace „PHPImageWorkshop“ definiert wurde, muss dieser beim Aufruf der Klasse immer mit angegeben werden:

require_once("ImageWorkshop.php");

$neuesbild = new \PHPImageWorkshop\ImageWorkshop();

Alternativ kann die Zeile mit der Namespace-Angabe auch auskommentiert werden. Dann kann die Klasse auch ohne diese Angabe verwendet werden. In der Dokumentation und den Beispielen wird immer ohne Verweis auf den Namespace gearbeitet:

$neuesbild = new ImageWorkshop();

Die Bildbearbeitung erfolgt über die GD-Library, die in den meisten PHP-Installationen von Haus aus mit dabei ist. Außerdem setzt PHPImageWorkshop die PHP-Version 5.3.x voraus.

Bilder skalieren und beschneiden

Oft wird eine serverseitige Bildbearbeitung eingesetzt, wenn ea darum geht, Bilder zu skalieren oder zu beschneiden – zum Beispiel für die Erzeugung von Thumbnails. PHPImageWorkshop bietet hierzu verschiedene Funktionen an. Um Bilder zu skalieren, gibt es die Funktionen resizeInPixel() und resizeInPourcent():

$thumbnail = new ImageWorkshop(array(
  "imageFromPath" => "bild.jpg"
));

$thumbnail->resizeInPixel(200, 100);

$bildausgabe = $thumbnail->getResult();

Zunächst wird einer Variablen eine neue Instanz der „ImageWorkshop“-Klasse inklusive Pfad zum Originalbild zugewiesen. Anschließend wird über resizeInPixel() das Bild auf 200 x 100 Pixel skaliert. Im letzten Schritt überführt man das skalierte Bild in die Variable $bildausgabe, welche dann über die PHP-Funktion imagejpeg() ausgegeben werden kann:

imagejpeg($bildausgabe, null, 95);

Statt einen Wert für Höhe und Breite anzugeben, kann auch nur einer der Werte angegeben werden. So verkleinert man das Bild proportional, wenn der zusätzliche dritte Parameter der Resize-Funktion auf true gesetzt ist:

$thumbnail->resizeInPixel(200, null, true);

Analog zur Funktion resizeInPixel() existiert die Variante resizeInPourcent(), die statt Angaben in Pixel Prozentwerte berücksichtigt.


Bilder skalieren

Bei den Resize-Funktionen wird immer der gesamte Bildinhalt dargestellt. Wenn es darum geht, das Seitenverhältnis des zu skalierenden Bildes zu ändern, ohne das Bild in seiner Darstellung zu verzerren oder nur einen Teilbereich eines Bildes zu zeigen, gibt es die Beschneidungsfunktionen cropInPixel() und cropInPourcent():

$thumbnail->cropInPixel(200, 200, 100, 200, "LT");

Angegeben werden die Maße des Bildes (hier 200 x 200 Pixel), die Start-Koordinaten des darzustellenden Bildausschnittes (hier 100 Pixel von links, 200 Pixel von oben) sowie die Position (hier „LT“).


Bilder beschneiden

Die Position gibt an, von welcher Stelle des Bildes aus der Ausschnitt gewählt werden soll. „LT“ steht für „left top“, also die linke obere Ecke des Bildes. Bei „RB“ („right bottom“) würde von der rechten unteren Ecke ausgegangen werden.

Bilder kombinieren

Neben dem Skalieren und Beschneiden ist auch das Kombinieren von mehreren Bildern eine oft verwendete Funktion bei der serverseitigen Bildbearbeitung. Auch hierzu bietet PHPImageWorkshop eine leicht zu verwendende Funktion:

$bild_mit_logo = new ImageWorkshop(array(
  "imageFromPath" => "bild.jpg",
));

$logo = new ImageWorkshop(array(
  "imageFromPath" => "logo.png",
));
$bild_mit_logo->addLayer(1, $logo, 10, 10, "LB");

$bildausgabe = $logo_mit_bild->getResult();


Bilder kombinieren

Im Beispiel werden zwei Bilddateien per ImageWorkshop Variablen zugewiesen. Anschließend wird die Logodatei per addLayer() auf das Bild gelegt. Dabei wird die Position sowie die Ausrichtung des Logos angegeben, im Beispiel jeweils 10 Pixel von der linken unteren Ecke („LB“) entfernt.

Fazit

PHPImageWorkshop ist schnell in ein Webprojekt eingebunden. Dabei ist die Datei keine 100 Kilobyte groß. Die Funktionen, die zur Verfügung stehen, lassen sich zwar auch mit PHP-Bordmitteln nachbauen. Mit PHPImageWorkshop geht es jedoch schneller und einfacher, da viele Zwischenschritte die ImageWorkshop-Klasse übernimmt und daher nicht manuell berücksichtigt werden müssen.

(dpe)

Kategorien
E-Business Programmierung Social Media Sonstige Programmiersprachen

Infinite Social Wall: Tumblr-artiger Pinterest-Lookalike mit PHP erstellen zum Selberhosten

Keine Sorge, meine Überschrift klingt sperriger als sich das Tool des amerikanischen Studenten Philip Bjorge tatsächlich darstellt. Auf der Basis von MySQL, PHP und einigen jQuery-Plugins liefert Bjorge einen Aggregator für alle persönlichen Aktivitäten. Auf der eigenen Website lassen sich so die persönlichen Social Media Streams, aber auch beliebige RSS-Feeds in einer Pinterest-ähnlichen Optik darstellen. Die Installation ist einfach.

Infinite Social Wall: Persönliches Backup der eigenen sozialen Aktivitäten

Auf seiner persönlichen Homepage verwendet Bjorge sein PHP-Script Infinite Social Wall als Startseite und aggregiert dort seine verschiedenen Aktivitäten aus sozialen Netzwerken wie Instagram, Google+ oder Reddit. Weitere nativ unterstützte soziale Dienste sind Github, Twitter, Stackoverflow und Pinterest. An letzterem orientiert sich auch die Optik der Lösung.

Grundsätzlich ist Infinite Social Wall nicht auf die nativ unterstützten Dienste limitiert, sondern kann mit allen Services genutzt werden, die einen RSS-Feed zur Verfügung stellen, was mittlerweile auch bei Facebook wieder der Fall ist.

Infinite Social Wall bringt keine Installationsroutine mit, stellt den interessierten Selbsthoster jedoch dennoch nicht vor große Probleme. Im Wesentlichen gilt es eine Tabelle in einer MySQL-Datenbank anzulegen, sowie innerhalb der config.php die auszulesenden Feeds und/oder Dienste zu definieren. So würde man eine Verbindung zu Github anlegen:

"github" => array(
    "user" => "philipbjorge",
    "url" => "http://atom2rss.semiologic.com/?atom=https://github.com/{USER}.atom"
),

Innerhalb der config.php muss natürlich eine Anpassung der Datenbankparameter auf die eigene Umgebung erfolgen. Die im Downloadpaket ebenfalls enthaltene demo.php stellt die eigentliche Funktionalität des Infinite Scrolling der eigenen Inhalte bereit, ist aber nur mit den nötigsten Aufrufen ausgestattet. Auf der Github-Seite zum Projekt erläutert Bjorge detailliert, wie man seine PHP-Seiten ausstatten muss, um Infinite Social Wall zum Laufen zu bringen. Die Optik wird – wie gewohnt – mittels CSS definiert.

Und so funktioniert das System: Bei Aufruf der demo.php werden die ersten 20 gefundenen Einträge aus den definierten sozialen Netzwerken in einen Div-Container geladen, der wiederum zur Anzeige gelangt. Die jQuery-Plugins Isotope und infinite-scroll werden auf diesen Container angewendet. Gleichzeitig startet ein Update-Request auf die in der config.php definierten Feeds. Deren Inhalte werden als HTML ausgelesen und in der MySQL-Datenbank abgelegt. Letzteres führt auf längere Sicht betrachtet zu einem umfangreichen, quasi lokal gespeicherten Backup der eigenen sozialen Aktivitäten. Jeder Besucher der Website wirkt wie ein Cronjob, so dass stets die aktuellsten Inhalte ausgegeben werden.

Infinite Social Wall ist erst wenige Tage alt und steht unter der MIT- und der BSD-Lizenz zum kostenfreien Einsatz zur Verfügung. Eine Einschränkung ergibt sich aus dem verwendeten Isotope, das lediglich für persönliche und nicht-kommerzielle Zwecke kostenfrei genutzt werden darf.

Das folgende Video zeigt die Funktionsweise:

Kategorien
Essentials Freebies, Tools und Templates Programmierung Sonstige Programmiersprachen

PHP: Detector erkennt, was der Besucherbrowser kann

Gerade beim Einsatz von HTML5 und CSS3 spielen nicht alle Browser gleichermaßen mit. Wer auf Nummer sicher gehen will und mit Fallback-Lösungen möglichst alle aktuellen und möglicherweise auch ältere Browser unterstützen möchte, muss die durch die Browser unterstützten Features kennen. Mit Detector steht eine umfangreiche PHP-Bibliothek bereit, welche die unterschiedlichen Browser und ihre Features erkennt.


Beispiel für die Möglichkeiten von Detector

Ist die PHP-Bibliothek auf den Server kopiert und sind die ensprechenden Schreibberechtigungen angelegt, muss die Bibliothek noch in jede PHP-Datei, in der Detector genutzt werden soll, eingebunden werden. Das geht so:

require_once("lib/Detector.php");

Über die Variable „$ua“ (für User Agent) können nun Browser, sowie die jeweils unterstützten Features abgefragt werden. Für jeden User Agent wird anhand eines eindeutigen Hashwertes ein JSON-Objekt mit allen Informationen angelegt.

Browser und Features abfragen

Die Abfrage einzelner Informationen zu Browser, Betriebssystem oder Features ist spielend einfach. Will man den Namen des verwendeten Browsers herausfinden, reicht folgende Zeile:

echo $ua->browser;

Ausgegeben wird hierbei ausschließlich der Browsername (zum Beispiel Chrome oder Firefox). Auf ähnliche Weise lassen sich auch Browserversion („version“), Betriebssystem („os“) und Betriebssystemversion („osVersion“) herausfinden.

Auch Informationen zum verwendeten Gerät können abgefragt werden. Auf der Grundlage verschiedener Werte findet Detector heraus, ob es sich um ein Desktop-, Tablet- oder sonstiges Mobilgerät handelt. Dies ist beispielsweise nützlich, um je nach Gerät unterschiedliche Inhalte auszugeben:

if ($ua->isComputer) {
  include_once("computer.php");
} else if($ua->isTablet) {
  include_once("tablet.php");
} else if($ua->isMobile) {
  include_once("computer.php");
}

Mit dem Parameter „touch“ kann ermittelt werden, ob es sich beim Gerät um eines mit Touchdisplay handelt.

Der viel interessantere Teil von Detector ist jedoch das Erkennen bestimmter Browserfeatures. Damit ist die Unterstützung konkreter HTML5-Elemente und CSS3-Eigenschaften gemeint. So lässt sich beispielsweise herausfinden, ob bestimmte HTML5-APIs unterstützt werden:

echo $ua->localstorage;

Auch andere APIs wie die Filesystem- oder Webworker-API können abgefragt werden. Ebenso ist es möglich, die Unterstützung der vielen neuen „type“-Attribute des INPUT-Elementes abzufragen:

echo $ua->inputtypes->email;

Analog dazu lässt sich die Unterstützung neuer CSS3-Eigenschaften, wie etwa Animationen, abfragen:

echo $ua->cssanimations;

Familien definieren und abfragen

Je nachdem, welche HTML5- oder CSS3-Features eingesetzt sind, werden innerhalb eines Webprojektes eventuell immer dieselben Abfragen gestellt, um sich eines gewissen Must-have-Standes zu vergewissern. Hier besteht mit Detector die Möglichkeit, alle erforderlichen Features in einer Familie zu bündeln.

Über ein JSON-Objekt fasst man alle Features, die ein Browser unbedingt unterstützen muss, in einer Familie zusammen:

{
  "css3features": { 
    "features": ["cssanimations", "csstransforms", "csstransitions"]
  }
}

Das JSON-Objekt muss als Datei im „config“-Ordner von Detector gespeichert werden. Anschließend kann es über die Variable „$ua“ abgefragt werden:

echo $ua->css3features;

Das Beispiel gibt „true“ beziehungsweise „1“ aus, wenn alle drei Features vom Browser unterstützt werden. Die Zusammenstellung von Familien kann auch komplexer ausfallen:

{
  "keinApple": { 
    "os": "!iOS",
    "browser": "Firefox||Chrome"
  }
}

Im Beispiel wird „true“ beziehungsweise „1“ ausgegeben, wenn das Betriebssystem nicht iOS („!“) und der Browser entweder Firefox oder Chrome („||“) ist.

Nutzung und Fazit

Detector von Dave Olsen kann uneingeschränkt  kostenlos genutzt werden. Detector bringt umfangreiche und nützliche Möglichkeit mit, um Browser und die jeweils unterstützten Features abzufragen. Vor allem beim Einsatz neuster HTML5- und CSS3-Techniken lohnt sich ein Blick auf die Bibliothek.

(dpe)

Kategorien
Design HTML/CSS Programmierung Sonstige Programmiersprachen

Dummy: Umfassendes PHP-Toolkit für das Rapid Prototyping von Websites

Wenn man täglich auf der Suche nach neuen, interessanten Technologien und Tools ist, die das Berufsleben eines Webworkers erleichtern und im besten Falle bereichern können, ist man einiges gewohnt und nicht mehr so leicht zu begeistern. Das PHP-Toolkit Dummy von David Kerns, um das es im folgenden Beitrag gehen soll, hat es dennoch geschafft. Dummy kann eine komplette Website mit flexiblen Inhalten versehen, die sich zudem bei jedem Browser-Reload ändern. Vergessen wir die ganzen statischen Platzhalter-Inhaltsdienste. Jetzt kommt Dummy!

PHP-Toolkit für Rapid Prototyping

PHP-Dummy: Prototyping mit dynamischen Inhalten

In den letzten Wochen stellten wir im Dr. Web Magazin eine ganze Reihe von Platzhalterdiensten vor. Mit diesen lassen sich Text- oder Bildinhalte generieren, die ein Layout mit Inhalten füllen, bevor es echte Kundeninhalte gibt. Derlei Dienste sind für erste Mockups nahezu unverzichtbar, will man nicht immer den gleichen Lorem Ipsum einkopieren und (pfui!) das gleiche 1-Pixel-Gif hoch skalieren. Ich weiß, letzteres macht keiner (mehr)…

Mit dem PHP-basierten Toolkit Dummy lassen sich sowohl Text-, wie auch Bildinhalte generieren und einfügen. Die verwendete Syntax ist dabei fast schon natürlich-sprachlich, jedenfalls leicht verständlich und lesbar. Neben der Generierung von Zufallsinhalten ist Dummy in der Lage, diese in Länge und/oder Ausführung zu variieren. Das ist insbesondere dann nützlich, wenn letztlich die echten Inhalte aus einer oder mehreren Datenbanken kommen werden. So lassen sich mit Dummy schon im Vorfeld sauber die Auswirkungen von sehr viel oder sehr wenig Content auf das Layout simulieren.

Das klingt alles extrem theoretisch, deshalb werde ich etwas in Detail gehen. Voraussetzung für die erfolgreiche Verwendung des Toolkit ist eine Apache-Installation mit PHP und GD-Support. Diese Konfiguration ist bei jedem mir bekannten Hoster Standard, so dass der Prototyp auch dem Kunden via Web gezeigt werden kann. Entwickelt wird selbstverständlich ausschließlich lokal.

Jedes Dokument, welches mit Dummy bestückt werden soll, erhält in der ersten Zeile folgenden Aufruf:

<? require_once("dummy/dummy.php") ?>

Dummy generiert Textinhalte

Dummy beherrscht eine ganze Reihe verschiedener Textinputs und kann so zielgenau Inhaltselemente bestücken. Eine Überschrift als Headline würde man so erzeugen:

<? dummy("text@headline") ?>

Auf die gleiche Weise werden Teasertexte, ganze Absätze oder Infoschnipsel, wie Datum, Autor oder Zeit erzeugt. Innerhalb des Verzeichnisses dummy/assets/text finden sich alle verwendeten Texte im Nur-Text-Format. So können sie leicht verändert oder auf größere Projekte gezielt angepasst werden.

PHP-Toolkit für Rapid Prototyping
Per Dummy generierte Startseite eines potenziellen Nachrichtenmagazins

Dummy generiert Bildinhalte

In ähnlich lesbarer Weise werden mit Dummy Bildinhalte generiert. Hierzu wird Dummy bereits mit einer großen Zahl unter CC-Lizenz stehender Bilder ausgeliefert. Ähnlich wie bei den Texten, ist es aber auch hier möglich, eigene Bilder zu hinterlegen.

Im einfachsten Fall möchte man mit Dummy ein Bild einbinden, für das man die Ausrichtung Querformat und eine Größe von 480 x 320 Pixeln definiert. Das ginge so:

" />

Statt der Pixelwerte ist es auch möglich, nur Seitenverhältnisse, etwa 16:9, oder eine Mischung aus beiden zu verlangen. Pixelwerte können zudem auf Wunsch auch nur teilweise gesetzt werden, wie das folgende Beispiel zeigt:

" />

Hier wurde auch auf die zuvor getroffene Festlegung der Bildausrichtung verzichtet, diese ergibt sich aus dem Seitenverhältnis. Angefordert wird ein Bild im Format 16:9, das eine Breite von 640 Pixeln hat. Die Angabe des Seitenverältnisses wird mit einem Komma von der Angabe der Pixelwerte getrennt. In welcher Reihenfolge deklariert wird, ist egal.

Für die Einbindung von simulierten Werbeanzeigen führt Dummy ein eigenes Element und ist in der Lage, diese als Bild oder – wie immer noch in der Werbeindustrie üblich – als Flash zu platzieren.

<? dummy("ad@120x90") ?>

Dumb Luck: Dummys eigentliche Stärke

Dummy beschränkt sich nicht auf die zweifellos bereits ausreichend hohe Nützlichkeit der zuvor genannten Möglichkeiten. Mit der Funktion dumb_luck integriert es vielmehr eine wirklich mächtige Funktionalität, die generierten Inhalte nahezu beliebig zu manipulieren.

So ließen sich gezielt Tests fahren, wie ein Layout auf eine Veränderung, auch eine massive Veränderung der Inhalte reagieren wird. Zudem ist dumb_luck in der Lage, ein Element in beliebiger Zahl anzuzeigen. Das ist praktisch, wenn man beispielsweise eine Thumbnail-Galerie simulieren will.

Wir schauen uns wieder ein paar Beispiele an, um das Konzept zu verdeutlichen. In der einfachsten Variante des Funktionsaufrufs lassen sich mit dumb_luck Wahrscheinlichkeiten abbilden. So könnte man eine Art A/B-Test anlegen, bei dem mit einer Wahrscheinlichkeit von z.B. 50% ein Element im Layout enthalten ist.

<? if (dumb_luck("50%")): ?>
  Dieser Text, der auch ein Bild oder eine ganze Funktionseinheit sein könnte, wird in 50% aller Fälle angezeigt.
<? endif ?>

Dadurch, dass hier eine Standard-PHP-Syntax verwendet wird, können die Konstrukte beliebig komplex werden.

<? if (dumb_luck("95%")): ?>
  Das hier passiert fast immer.
<? else: ?>
  Dieses hier nur in 5% aller Fälle.
<? endif ?>

Will man beispielsweise eine Thumbnailgalerie in das Layout integrieren, wäre das in manueller Arbeit, speziell dann, wenn die Galerie eine nennenswerte Größe haben soll, ein ziemlicher Aufwand. Mit Dummy beschränkt sich der Aufwand auf eine einzelne Code-Zeile:

<? while (dumb_luck("50-100")): ?>
  <? dummy("image@35x35") ?>
<? endwhile ?>

Im Beispiel würde eine Bilddatei mit 35 x 35 Pixeln Größe zwischen 50 und 100 Mal in das Layout eingefügt. Durch die Dynamik lässt sich erkennen, wie sich mehr oder weniger Content auf das Design auswirkt.

In gleicher Weise würde man mit Text-Inhalten verfahren. Das folgende Beispiel erzeugt eine unsortierte Liste mit fünf bis zehn Eintragungen eines Textes aus der Kategorie Headline, bei denen eine 50%ige Wahrscheinlichkeit besteht, dass sie zusätzlich mit einem Link versehen sind.

<? else: ?>

    • <? dummy(„text@headline“) ?>

<? endif ?> <? endwhile ?>

Ich erwähnte es bereits eingangs, ich bin in der Tat von den Möglichkeiten begeistert und werde Dummy mit Sicherheit beim nächsten Prototypen eine Chance geben. Das Projekt steht auf GitHub zum kostenlosen Download bereit. Es wiegt derzeit rund 30MB, was vor allem an der Vielzahl der mitgelieferten, mit ihren Lizenzen dokumentierten Bildern liegt.

Links zum Beitrag:

Kategorien
Programmierung Sonstige Programmiersprachen

PHP 5.4 – Viele Änderungen und neue Möglichkeiten

Selten gab es so viele Kontroversen um eine neue Version von PHP. Dabei müssten schon auf den ersten Blick die meisten Entwickler mit der Version 5.4 durchaus zufrieden sein. Viele Altlasten wurden über Bord geworfen und potenzielle Sicherheitslücken geschlossen. Trotzdem, man mag das erstaunlich finden, hat dies kaum einen Einfluss auf die Lauffähigkeit bereits vorhandener Anwendungen.

PHP 5.4

Neu in PHP 5.4: Traits

PHP entwickelt sich merkbar in eine professionelle Richtung. Traits sorgen ab PHP 5.4 dafür, dass eine erweiterte Modularisierung und Kapselung bezüglich OOP ermöglicht wird. Traits bilden beispielhaft eine oder mehrere Methoden ab, die in verschiedenen Klassen verwendet werden können. Man sollte aber darauf achten, dass Methoden-Namen auch über mehrere Traits hinaus nicht den selben Namen verwenden sollten. Das Resultat wäre ein FATAL_ERROR (aber auch hier gibt es Möglichkeiten mittels insteadof). Für die Arbeit mit Traits wurde ebenfalls eine neue Magic Constant eingeführt. Mit __TRAIT__ kann der Name des Traits ausgegeben werden. Ein Trait ist wie folgt aufgebaut:

trait fruchtZubereiten {
  function schaelen();
  function schneiden();
}

class Steinfrucht extends Base {
  use fruchtZubereiten;
}

class Beere extends Base {
  use fruchtZubereiten;
}

$aprikose = new Steinfrucht();
$aprikose->schaelen();
$aprikose->schneiden();

$johannisbeere = new Beere();
$johannisbeere->schaelen();

Verschwinden, aber wohl weniger vermisst, werden globale Einstellungen wie der „safe_mode“ oder die „magic_quotes“. Dies sollte für die meisten Anwendungen kein allzu schmerzlicher Verlust sein. In den Changelogs von PHP wird hier richtigerweise darauf verwiesen, dass Anwendungen, die deswegen unter PHP 5.4 nicht mehr lauffähig sind, schon vor dem Hintergrund der Anwendungssicherheit ohnehin eine Überarbeitung benötigen.

Short Syntax für Arrays in PHP 5.4

Viele Entwickler, die in PHP arbeiten, kommen zwangsläufig auch mit JavaScript in Kontakt. PHP hat dieser „Symbiose“ Rechnung getragen und eine JavaScript-ähnliche „short array syntax“ eingeführt. Arrays können nun vereinfacht erstellt werden mit folgender Anweisung:

$a = [1,2,3,4]

oder auch

$b = ['Banane' => 'Gelb', 'Kiwi' => 'Grün']

für mehrdimensionale Arrays.
Bei Methoden bzw. Funktionsaufrufen kann, falls ein Array zurückgegeben wird, direkt auf die Werte in diesem Array zugegriffen werden:

function gibWertInArray(){
  $a = [Eins,Zwei,Drei,Vier];
  return $a;
}
print gibWertInArray()[3]; // Vier

Weiterhin ist es nun immer möglich, die vorherige php.ini-Option „short_open_tag“ zu nutzen, um beispielsweise Variablen innerhalb der HTML-Syntax schnell ausgeben zu können.

Closures unterstützen nun auch $this und Teile einer Klasse können direkt während der Instanzierung aufgerufen werden. Zum Beispiel kann direkt eine Methode wie folgt ausgeführt werden:

(new Frucht)->schaelen();

Zusätzlich wurden die Fehlermeldungen, Warnungen und Hinweise verbessert. So werden ab sofort alle Fehler angezeigt, auch E_STRICT-Meldungen. Das Standard-Charset ist ab 5.4 utf-8 und Zahlen können zusätzlich in der Binärform dargestellt werden:

0b[Binär]

Fortschritt bei Uploads und integrierter Webserver

Besonders erfreut war ich persönlich über die Möglichkeit, den Fortschritt bei Uploads abzubilden. Damit kann zum Beispiel mit Hilfe von Ajax der aktuelle Stand des Uploads in bestimmten Zeitabständen aufgerufen werden, woraus eine bessere Feedback-Option, gerade beim Upload von größeren Daten, ermöglicht wird. Der aktuelle Stand wird dabei in einer superglobalen $_SESSION-Variable gespeichert.

Eine weitere und lang erwartete Möglichkeit ist der direkt in PHP 5.4 verfügbare Webserver, der zu Testzwecken durchaus geeignet ist. Allerdings raten die Entwickler von PHP davon ab, diesen in einer produktiven Umgebung einzusetzen. Zum Starten des Servers auf der Kommandozeile muss man nur in das gewünschte Verzeichnis wechseln. Mit dem Befehl:

php -S localhost:8000

wird der Server lokal auf dem Port 8000 erreichbar sein.
Abschließend will ich noch die Möglichkeit, die Ausführungszeit eines Skriptes in Mikrosekunden angeben lassen zu können, erwähnen.

PHP befindet sich weiterhin auf dem richtigen Weg. Die Sprache wird immer professioneller. Man darf gespannt sein, was den PHP-Entwickler in Zukunft noch erwartet.

(dpe)

Kategorien
Programmierung Sonstige Programmiersprachen

Laravel PHP-Framework: Weg mit dem Spaghetti-Code!

PHP-Frameworks gibt es wie Bäume im Wald und bei dem dichten Laubwerk kann man schnell die Übersicht verlieren. Laravel, das seit April 2011 entwickelt wird, will sein Alleinstellungsmerkmal in sauberem Code und tief integrierter Active-Record-Unterstützung finden.