Kategorien
(Kostenlose) Services Design Essentials Programmierung

Webfieldmanual: Zentrale Anlaufstelle für Designer und Coder

Der Service Webfieldmanual.com ist eine wachsende Sammlung rund um die Themen Design und Coding. Neben der Informationsfülle sticht vor allem das bemerkenswert gut gelungene Design des Dienstes selbst ins Auge.

Hast du dein Webfieldmanual? Yes, Sir!

Das Webfieldmanual.com bietet nicht zufällig optische Reminiszenzen an militärische Zusammenhänge. Der Begriff Field Manual selber stammt aus dem militärischen Sprachgebrauch und bezeichnet eine Art Handbuch, das Soldaten im Kampfeinsatz mit sich führen sollten. Das Field Manual stellt somit die essentielle Wissensbasis auf dem Schlachtfeld dar.

Webfieldmanual.com: Landing Page (Screenshot: Dr. Web)

Und wenn man es etwas martialisch liebt, findet man sich als freelancender Webdesigner und Coder vielleicht ganz gerne in dem Bild des Einzelkämpfers in der harten Web-Industrie wieder. Auf jeden Fall erhebt ein Field Manual als solches stets den Anspruch, das unverzichtbare Tool im Alltag zu sein, ohne das man es nicht unversehrt zurück ins Basislager schafft.

Das Webfieldmanual.com gibt sich große Mühe, diesem hohen Anspruch gerecht zu werden und bietet tatsächlich eine Fülle an Knowhow-Ressourcen und kleinen Tools, ohne die das Überleben im Web-Alltag schwerer als nötig ist.

Der Service wird betrieben vom US-amerikanischen Designer-Trio Jon Yablonski, Garrett Wieronski und Geoff Tice. Ergänzt wird die Website durch einen gleichnamigen Twitter-Account, über den du dich über Neuzugänge im Portfolio unterrichtet halten kannst. Bist du eher ein Freund traditioneller Informationswege, wird dich eventuell ein Abonnement des E-Mail-Newsletters reizen, der dich mit einer wöchentlichen Zusammenfassung ebenfalls auf dem Laufenden hält.

Webfieldmanual: Design | Code | Tools

Die einfachste und komfortabelste Zugangsmöglichkeit zum wirklich beeindruckend umfassenden Fundus des Dienstes ist die Freitextsuchfunktion, die sich hinter dem Lupen-Piktogramm rechts oben im Browserfenster befindet. Sobald du beginnst, einen Suchbegriff in das Feld zu schreiben, erscheinen darunter in Echtzeit Ergebnisvorschläge. Das funktioniert rasend schnell und äußerst präzise.

Webfieldmanual.com: Freitextsuche (Screenshot: Dr. Web)
Webfieldmanual.com: Freitextsuche (Screenshot: Dr. Web)

Wenn du nicht genau weißt, wonach du eigentlich suchst, oder einfach nur mal stöbern willst, brauchst du dich lediglich zu entscheiden, ob du in Design- oder Codethemen schwelgen willst. Innerhalb dieser beiden Hauptkategorien findest du dann jeweils lange vorsortierte Listen mit allen Informationen, die du heutzutage benötigen könntest.

Das ist nämlich auch eine der bemerkenswerten Tatsachen am Webfieldmanual. Mir ist keine einzige veraltete Ressource untergekommen. Da bin ich anderes gewohnt. Die meisten Verzeichnisse, Listenanbieter oder wie du es auch immer nennen willst, nehmen Elemente immer gerne auf, schmeißen sie dann aber nie wieder raus und brüsten sich damit Zigtausend Einträge anzubieten. So läufst du häufig genug Gefahr, dir veraltetes Wissen einzuverleiben. Diesbezüglich musst du dich beim Webfieldmanual nicht sorgen.

Die einzelnen Hauptkategorien Design und Code beherbergen zwar dann lediglich scrollbare Listen, die weiter nach Kategorien unterteilt sind. Die Strukturierung ist aber dennoch sehr gelungen. Viel Whitespace sorgt für gute Übersichtlichkeit und das zurückhaltende Design macht tatsächlich Spaß.

Webfieldmanual.com: Hauptkategorie Design > Kategorie Animation (Screenshot: Dr. Web)

Jede einzelne Ressource wird kartenbasiert mit einem Titel und einem Satz zur Beschreibung vorgestellt. Ein Klick auf die Karte führt direkt zu der URL des jeweiligen Elements. Die Bedienung ist demnach schnell erlernt. Willst du direkt zu einzelnen Kategorien aus der endlos erscheinenden Liste springen, verwendest du das am unteren Bildschirmrand angeordnete Hamburger-Menü mit der Bezeichnung Categories.

Webfieldmanual.com: Tools aus der Feder der Betreiber (Screenshot: Dr. Web)

Eine Sonderposition nimmt die Hauptkategorie Tools ein. Hier findest du nicht etwa eine Sammlung von Tools nach dem gleichen Muster, wie du Ressourcen zu Design und Code unter den beiden anderen Hauptkategorien findest, sondern hier finden sich Tools, die von den Betreibern selber erstellt und bereitgestellt werden. Aktuell steht hier nur ein JavaScript-Tester zur Verfügung, ein Media-Query-Generator und ein Rechner für responsive Typografie sind angekündigt.

Das Webfieldmanual.com verdient sich mit einer klaren Empfehlung einen Platz in deiner Entwickler-Toolbox. Nicht unerwähnt bleiben sollte der Umstand, dass das Webfieldmanual selber eine Best Practice für modernes Design mit subtilen Animationseffekten darstellt. Good Job!

Kategorien
Design HTML/CSS JavaScript & jQuery Programmierung

Outdated Browser: Freies Projekt informiert deine Besucher über den Zustand ihres Browsers

Das Problem ist nicht mehr ganz so akut wie noch vor einigen Jahren. Dennoch surfen auch heutzutage noch zu viele Menschen mit einem veralteten Browser. Wenn deine Website sehr modern ausgestattet ist, werden diese Menschen keinen Spaß daran haben. Bevor sie deshalb sauer auf dich werden, weise sie doch einfach freundlich darauf hin, dass sie mit einem antiquarischen Seitenbetrachter unterwegs sind.

Entschuldige, aber dein Browser ist uralt.

Hinweisgeber wie „Outdated Browser” gab es vor einigen Jahren noch wie Sand am Meer. Aber keiner sah so gut aus, wie der, den ich dir heute vorstelle. „Outdated Browser” kommt in vielen verschiedenen Sprachen, darunter Deutsch, als Kombination aus JavaScript und CSS daher. Das Tool steht unter der MIT-Lizenz auf Github zur kostenfreien Verwendung bereit und unterliegt keinerlei Abhängigkeiten. Du kannst es also als unabhängige Lösung verwenden.

Die komprimierte Version des JavaScript wiegt gerade einmal rund 3kb. Die ebensolche Version des CSS bringt es auf 1kb. Verschiedene Sprachen werden als HTML-Dateien mitgeliefert. Diese wiegen jeweils um die 0,3kb.

Die Verwendung ist einfach. Du benötigst die minifizierte JS, sowie selbige CSS und den Ordner lang. Alle benötigten Dateien sind im Downloadarchiv enthalten. Stelle das Paket in deinem Webspace bereit und binde die Dateien entsprechend im Head (CSS) und im Body (JS) deiner Website ein. Direkt nach dem öffnenden Body setzt du dann ein Div mit der ID outdated. Hierdurch wird das JavaScript getriggert.

Das Einbinden und Aktivieren der Lösung dauert nur wenige Minuten. Die Optik könntest du anpassen, sie ist allerdings im modernen Flat Design gehalten und von daher out-of-the-box sicherlich für die meisten Fälle bereits hübsch genug.

Wird die Seite nun mit einem modernen Browser besucht, passiert nichts. Kommt ein Besucher mit einem nicht aktuellen Browser, wird er mittels eines Headers sanft darauf hingewiesen, dass es für seinen Browser eine aktuellere Version gibt. Klickt er auf diesen Hinweis, wird die folgende politisch korrekte Übersicht eingeblendet.

Wichtig zu wissen ist, dass die Lösung gezielt auf Desktop-Browser abzielt und nur dafür eingesetzt werden kann. Bevor du das kritisierst, soltest du nochmal kurz nachdenken, ob es auf mobilen Geräten überhaupt veraltete Browser gibt. Eher nicht, oder? Gut, wenn du noch mit Android 2.01 unterwegs bist vielleicht, aber dann ist das nicht eh dein vordringlichstes Problem.

Outdated auf allen Ebenen

Wer sich das JavaScript und das CSS näher ansieht, wird vermutlich die Hände über dem Kopf zusammen schlagen. Der Code macht nämlich der Bezeichnung Outdated alle Ehre. Die Erklärung ist indes einfach und nachvollziehbar. Damit „Outdated Browser” in alten Browsern funktioniert, muss es natürlich eben für diese alten Gesellen geschrieben sein. Da ist kein Platz für moderne Ansätze.

„Outdated Browser” ist eine Lösung der portugiesischen Design-Agentur Büro und steht auf Github zum Download und zur Mitwirkung zur Verfügung. Nutzer selbstgehosteter WordPress-Installationen können das Tool direkt als Plugin verwenden und sich so den Einbau erleichtern. Der Vollständigkeit halber sei erwähnt, dass es weitere vorgefertigte Module gibt, und zwar für Ruby, Drupal, Magento, Contao und Yii2.

Kategorien
Boilerplates & andere Tools Design HTML/CSS JavaScript & jQuery Programmierung UI/UX

Januar 2017: 10 nützliche Tools für Webentwickler

Der Alltag hat dich fest im Griff? Routine ist natürlich nicht immer schlecht. Sie lässt sich sogar stetig optimieren. Die zehn Tools, die wir dir heute vorstellen, helfen dabei.

Mit dem richtigen Werkzeug macht sogar Spaß, was du als letztes damit assoziiert hättest, etwa das Aufbauen von Tabellen. Glaubst du nicht? Schau dir unsere zehn Entwickler-Tools an und entscheide danach selbst.

Titel: HTML Table Generator

Der HTML Table Generator baut für dich Standard-Tabellen mit div oder table Tags. Eine interaktive Preview zeigt dir, ob du auf dem richtigen Weg bist.

div-table
Erstellt von: divtable
Lizenz: Als „Free” bezeichnet, keine dezidierte Lizenz angegeben.

Titel: Hammer

Hammer bringt Gesten-Support und minimiert die Klickverzögerung.

hammer
Erstellt von: freie Kontributoren
Lizenz: Als „Free” bezeichnet, keine dezidierte Lizenz angegeben.

Titel: Kute.js

Diese Animations-Engine ist nicht nur zu schicken, sondern auch zu schnellen Resultaten zu gebrauchen. Fallbacks bringt sie überdies mit.

kute
Erstellt von: thednp
Lizenz: MIT-Lizenz, also kostenlos verwendbar.

Titel: Bless CSS

Bless CSS bringt Lösungen für den schlechtesten Browser der Welt. Du weißt schon, welchen ich meine.

bless
Erstellt von: Paul Young
Lizenz: mitgelieferte Lizenz beachten

Titel: Patterns Lib

Die Patterns Library liefert eine Sammlung fertiger Interaktions-Patterns, die du mittels CSS-Klassen und HTML-Attribute an den Start bringst.

patterns
Erstellt von: patternslib
Lizenz: Als „Free” bezeichnet, keine dezidierte Lizenz angegeben.

Titel: CSSNano

Wenn dein Stylesheet so klein wie möglich sein soll, dann ist CSSNano für dich das richtige. Es komprimiert nicht nur, sondern entfernt auch alte Vendorprefixe und mehr.

cssnano
Erstellt von: ben-eb
Lizenz: kostenlos verwendbar unter MIT-Lizenz

Titel: Egjs

Egjs bietet ein Bündel an interaktiven UI-Elementen mit schönen Effekten.

egjs
Erstellt von: Naver Corp
Lizenz: Als „Free” bezeichnet, keine dezidierte Lizenz angegeben.

Titel: Universal Collection of Transitions

Mit den GLSL-Transitions zauberst du fantastische Bildeffekte.

glsl
Erstellt von: Glslio
Lizenz: Als „Free” bezeichnet, keine dezidierte Lizenz angegeben.

Titel: Sprite Spirit

Wenn du etwas Leben in die Bude bringen willst, dann ist dieser Service was für dich. Wirf ihm eine Handvoll Sprites zu und es baut eine komplette Animation für dich.

sprite-spirit
Erstellt von: Elior Shalev Tabeka
Lizenz: Als „Free” bezeichnet, keine dezidierte Lizenz angegeben.

Titel: Bootstrap 4 Cheat Sheet

Bootstrap 4 ist kurz vor da. Dieses Cheat-Sheet hilft dir beim Einstieg.

bootstrap4-cheat-sheet
Erstellt von: Bootstrap Creative
Lizenz: Als „Free” bezeichnet, keine dezidierte Lizenz angegeben.

Kategorien
Boilerplates & andere Tools Developer-News JavaScript & jQuery Programmierung

Libraries.io: Neue Suchmaschine für Open-Source-Projekte

Libraries.io ist ein neues Projekt für Webdesigner und Entwickler. Es hilft dir dabei, Bibliotheken, Module und Frameworks aus dem Open-Source-Ozean zu fischen.

Kategorien
JavaScript & jQuery Programmierung

Grade.js: Farbverlaufsrahmen für deine Bilder mit JavaScript

Was ein sperriger Titel. Grade.js ist eine JavaScript-Bibliothek, die du nutzt, um deine Bilder automatisch rahmen zu lassen. Das Interessante daran ist, dass der Rahmen aus einem Farbverlauf der beiden dominantesten Farben aus der tatsächlichen Farbpalette des jeweiligen Bildes erstellt wird. Aber schreib das mal in eine Überschrift…

Grade.js: einfach zu verwenden, schicke Ergebnisse

Grade.js ist das neueste Projekt aus der Werkstatt des Entwicklers Ben Howdle aus dem Vereinigten Königreich. Ben verteilt die JavaScript-Bibliothek kostenfrei unter der MIT-Lizenz über Github. Die Funktionsweise kannst du dir auf dieser Demo-Seite anschauen.

Für die Einbindung in dein Projekt bestehen verschiedene Möglichkeiten. Du kannst zum einen das, unkomprimiert runde 104kb große Script runter- und wieder auf dein Projekt hochladen. Zum anderen kannst du es per npm installieren oder du nutzt den angegebenen CDN-Link.

Die Verwendung ist sehr einfach. Zunächst bindest du das Script ein und initialisierst es. Das geht zum Beispiel so:

 

 

Dann legst du einen Div-Container um das zu rahmende Bild. Dieser Container wird mit der Klasse "gradient-wrap" ausgezeichnet.

So kann das aussehen:

 

Das ist alles. Fortan werden alle auf der Seite vorhandenen Bilder, die in einem Container der Klasse "gradient-wrap" liegen, mit einem solchen Rahmen versehen:

gradejs-demo

Das JavaScript ermittelt hierzu die beiden dominantesten Farben aus der Farbpalette des jeweiligen Bildes und baut einen dazu passenden Farbverlauf. Logisch, dass du alle Bilder in jeweils einen eigenen Container legen musst, oder?

Kategorien
Design HTML/CSS JavaScript & jQuery Programmierung

Neue Tools: Bewegung auf der Website mit und ohne Javascript

Die beiden Animationswerkzeuge, die ich dir heute vorstellen möchte, sind keine von der 0815-Sorte. Es handelt sich nicht um Animations-Generalisten, sondern Spezialisten für kleine Anwendungsfelder. Das Javascript Granim.js erlaubt es dir, Animationen mit Farbverläufen zu kreiieren, während sich Radiobox.css ausschließlich um das Aussehen deiner Radiobuttons kümmert.

Granim.js: Einfache Verlaufsanimationen mit großer Wirkung

Granim.js ist ein frisches Javascript aus der Feder des Pariser Entwicklers Benjamin Blonde. Mit der Hilfe dieses sehr kleinen Scripts animierst du Verläufe in, auf und um alles herum, was sich in einem Canvas-Element darstellen lässt.

Granim.js animiert Farbverläufe auf verschiedenste Art und Weise. (Screenshot: Dr. Web)
Granim.js animiert Farbverläufe auf verschiedenste Art und Weise. (Screenshot: Dr. Web)

Die Verwendung ist einfach:


Nachdem das Javascript nur knappe 10kb auf die Waage bringt, ist der Overhead wohl zu vernachlässigen. Es rechtfertigt sich damit auch ein Einsatz kleinsten Umfangs, etwa um das eigene Seitenlogo mit einem Farbverlauf zu animieren, so wie du es auf der Demoseite zum Projekt anschauen kannst. Achte auf den Schriftzug Granim.js oben links.

Wobei dir dieses Beispiel auch gleich zeigt, dass das Javascript nicht bloß einfache Verläufe anlegen kann, sondern ebenso in der Lage ist, mit Bildmasken zu arbeiten. Verläufe lassen sich per Klick oder generell per Event anstoßen, was insbesondere diese Seite eindrücklich zeigt. Beweg die Maus einfach mal über die Ghost-Buttons und du wirst sicherlich schnell Spaß an Granim.js finden.

Das Script steht auf Github zum freien Download zur Verfügung. Es ist mit der sehr liberalen MIT-Lizenz versehen, so dass du es auch in kommerziellen Projekten, also auf Kundenwebsites, zum Einsatz bringen kannst.

Radiobox.css: Animierte Optionsauswahl

Aus dem Hause 720kb stammt eine kleine Sammlung von CSS-Animationen, die deine Radiobuttons von Langeweile befreien sollen. Insgesamt 12 Variationen stehen bereit. Der Effekt tritt jeweils in Kraft, wenn der entsprechende Radiobutton geklickt wird. Je nach Effekt fängt der Button dann an zu hüpfen, dreht sich, wird größer und so weiter.

Radiobox.css ist eine Sammlung 12 kleiner Stylesheets für den Radiobutton-Einsatz. (Screenshot: Dr. Web)
Radiobox.css ist eine Sammlung 12 kleiner Stylesheets für den Radiobutton-Einsatz. (Screenshot: Dr. Web)

Probier es einfach mal aus. Radiobox.css bietet auf jeden Fall interessante Effekte für eine Schaltfläche, die ansonsten eher unbeachtet bleibt. Radiobox.css kommt allein mit CSS3 aus, benötigt aber natürlich einen modernen Browser, um zu funktionieren.

Die Verwendung ist sehr einfach. Du fügst deinem Radiobutton einfach diejenige Klasse zu, die dem gewünschten Effekt entspricht, z.B.:

<input type="radio" class="radiobox-boing"/>

Radiobox.css kommt, wie das bereits vorgestellte Granim.js, unter der MIT-Lizenz ins Haus und kann dementsprechend auch kommerziell genutzt werden. Lade es über Github runter.

Kategorien
JavaScript & jQuery Programmierung

Quill 1.0: Dieser Rich-Text-Editor für Web-Apps ist anders

Rich-Text-Editoren kennst du. Das sind diese Dinger, die aus einfachen Textfeldern eine Art Textverarbeitung zaubern. Jeder WordPress-Blogger verwendet einen, nämlich den TinyMCE, der immer noch Standard im beliebtesten CMS der Welt ist. Quill ist eine modernere Variante der gleichen Spezies.

Quill Projekt-Website. (Screenshot: Dr. Web)
Quills Projekt-Website. (Screenshot: Dr. Web)

Quill 1.0: Open Source und unabhängig

Quill hat es nach rund zwei Jahren als Open-Source-Projekt endlich geschafft, eine stabile Version 1.0 zu erreichen. Als positives Ergebnis dieser langen Entwicklungszeit mag gelten, dass die Dokumentation wirklich exzellent ist. Da können kleinere und jüngere Projekte kaum mithalten. Dabei ist eine gute Dokumentatioon gerade im Open-Source-Bereich von besonderer Bedeutung, denn es kommt häufig genug vor, dass vormals hochengagierte Kontributoren im Handumdrehen die Lust am Projekt verlieren und sich spontan abwenden.

Quill ist eine JavaScript-Lösung ohne weitere Abhängigkeiten, dafür mit eigener API. Alles, was du benötigst, um mit Quill produktiv arbeiten zu können, befindet sich in dem JavaScript-File, welches du schlicht wie gewohnt in deine Dokumente einbaust.

So fügst du Quill deiner Web-App hinzu

Um ein Element mit den Fähigkeiten von Quill auszustatten, fügst du in deinem HTML etwa folgendes ein:

Danach lässt du das Script auf das Element los. Das kann so aussehen:

var quill = new Quill('#editor-container', {
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow' // or 'bubble'
});

Wenn nun jemand das Element verwendet, kommt zum Beispiel das dabei heraus:

Quill: Das bisschen Code links, erlaubt das Ergebnis rechts (und noch viel mehr). (Screenshot: Dr. Web)
Das bisschen Code links, erlaubt das Ergebnis rechts (und noch viel mehr). (Screenshot: Dr. Web)

Wie du schon im JavaScript-Quellcode sehen kannst, lässt sich Quill modular so auf das enthaltende Element anpassen, wie du es als Entwickler für richtig erachtest. Die einzelnen Funktionsmodule werden mit sprechenden Namen in die UI integriert. So erhalten deine Benutzer die Möglichkeit, Text fett zu formatieren, nur, wenn du bold zum Funktionsumfang zugefügt hast.

Quill: Flexibel dank eigener API

Die eigene API erlaubt es dir, weitere Funktionsmodule nach deinen Bedürfnissen zu erstellen und nahtlos in die UI von Quill einzufügen. Vielleicht muss deine Web-App CAD-Zeichnungen aufnehmen können, oder was weiß ich. Generell musst du Quill nicht konfigurieren. Es funktioniert out-of-the-box für die meisten Anwendungsfälle vollkommen zufriedenstellend.

Neben Erweiterungsmodulen für Features, die Quill nicht bietet, kannst du mit eigenen Funktionen auch solche ersetzen, die Quill bereits selber hat, wenn dir selbige nicht hinreichend sind. Alle Module solltest du als separate JavaScript-Dateien anlegen, kannst sie aber auch direkt zu Quill hinzufügen, was allerdings unter dem Gesichtspunkt einfacher Updates nicht sonderlich sinnvoll sein wird.

Die Möglichkeit, den Leistungsumfang des Editors zu erweitern oder zu verändern, verdankt Quill seinem größten Alleinstellungsmerkmale, der DOM-Abstraktionsebene Parchment. Im Quill-Blog findest du eine ausführliche Präsentation der Fähigkeiten von Parchment.  Du erfährst nämlich, wie du die UI der bekannten Publikations-Plattform Medium damit nachbauen könntest.

Ein gutes Gefühl für die Flexibilität des modernen Tools kannst du gewinnen, wenn du dich ein bisschen im interaktiven Playground auf der Projektseite umsiehst oder Codepen nutzt.

Die Entwickler legen besonderen Wert auf die Feststellung, dass Quill quer über alle Plattformen konsistent in gleicher Art und Weise funktioniert und sogar auf Tablets und Smartphones vollumfänglich nutzbar ist, sowie ausschließlich standardkonformes HTML erzeugt. Der gesamte In-, wie auch Output läuft über JSON.

Quill: Verfügbarkeit und Lizenz

Quill ist für den Einbau in die eigene Website via Download verfügbar, kann aber auch über ein CDN, getrieben von Amazon Cloudfront, in deine Dokumente eingebettet werden. Der Sourcecode ist auf Github zu erhalten. Da es sich um ein Open-Source-Projekt handelt, unterliegt die Nutzung keinen Beschränkungen. Du kannst Quill unter der BSD-Lizenz also auch in kommerziellen Projekten einsetzen.

Kategorien
Boilerplates & andere Tools Inspiration Programmierung Showcases

20 Codeschnipsel für moderne Kontaktformulare

Ein paar benannte Textfelder und ein deutlicher Call-to-Action am Ende – genau so sieht ein gewöhnliches Kontaktformular aus. Na ja, das kann ja kein Problem sein. Macht man mit links. Freu dich nicht zu früh, es gibt einige Stolperfallen. Soll dein Feedback-Formular responsiv, angetrieben durch Bootstrap oder komplett benutzerdefiniert sein? Du wirst auf jeden Fall mit CSS-Styles, JavaScript-Bibliotheken und modernen HTML-Funktionen rumspielen, um das perfekte Formular zu erstellen.

feedback-1213042_640

Glücklicherweise gibt es eine Reihe von guten und verlässlichen vordefinierten Lösungen im Internet, die dir einen Teil der Arbeit abnehmen oder zumindest einen perfekten Start bereiten können. So sparst du viel Zeit. Heute haben wir 20 Codepens versammelt, die klare, elegante und problemlose Kontaktformulare enthalten. Einige von ihnen können und müssen schnell oder auch umfangreich angepasst werden, während andere mit ihren speziellen Layouts oder begleitenden Effekten ihren Platz in deinen Projekten auch ohne größere Änderungen finden können.

E-Formular aus deutscher Herstellung

Schön dezentes, DSGVO konformes kostenloses Formular
Erstellt von: Michael Knothe, kontaktformular.com

Fullscreen Form Interface

Full-screen contact form
Erstellt von: Mary Lou

Responsives Kontaktformular mit Karte

contact form with map
Erstellt von: Lentie Ward

Responsives Kontaktformular im Material Design

responsive material design form
Erstellt von: Nikhil Krishnan

Simples Kontaktformular

clean contact form
Erstellt von: nick haskell

Elegantes Kontaktformular

elegant contact form
Erstellt von: Mark Murray

Responsives Kontaktformular mit Bootstrap 3 und Google Maps API

responsive contact form
Erstellt von: Craig Wheeler

Sass Flip Kontaktformular

sass flip form
Erstellt von: Danny Beton

Klassisch inspiriertes Kontaktformular

vintage form
Erstellt von: David Fitas

Einfaches Flat-Kontaktformular

flat contact form
Erstellt von: Zach Saucier

Kontaktformular

envelope style form
Erstellt von: Iulian Savin

Drop-Down Kontaktformular

drop-down form
Erstellt von: Greg Sweet

Kontaktformular HTML + CSS

diagonal style form
Erstellt von: Trevor L.J.M. McIntire

Feedback-Formular

light contact form
Erstellt von: CrocoDillon

Minimalistisches Formular

minimalistic form
Erstellt von: Matheus Marsiglio

Responsives Formular im Flat Style

flat responsive form
Erstellt von: And Studio

Persönliche Website

contact form in personal website
Erstellt von: Tim Robert-Fitzgerald

Kontaktformular im Tafel-Look

blackboard form
Erstellt von: Greg Sweet

CSS only, Responsives Modalformular

responsive modal form
Erstellt von: Daryll Doyle

Kontaktformular

contact form animation
Erstellt von: Peter Kullmann

Maritimes Kontaktformular

under the sea form
Erstellt von: Geert-Jan Hendriks

Kategorien
JavaScript & jQuery Programmierung Webdesign

Cookies & Co.: Speichermöglichkeiten im Browser

Lange Zeit waren Cookies die einzige Möglichkeit, Informationen lokal im Browser zu speichern. Noch heute werden sie vor allem in Kombination mit serverseitigen Sessions verwendet. Doch dank HTML5 haben wir weitere Option, Daten lokal im Browser abzulegen. So gibt es den „Application Cache“ sowie „Web Storage“ und IndexedDB. Wofür aber gibt es die unterschiedlichen Speichermöglichkeiten und was können sie?

hunger-413685_1280

Mit Cookies Einstellungen und Sitzungen speichern

Cookies gab es schon zu Netscape-Zeiten. Sie werden bis heute eingesetzt, um Einstellungen für Websites und Webdienste zu speichern oder Sitzungen – sogenannte Sessions – zu verwalten. Dabei ist ein Cookie eine Textdatei, in der bis zu 4 Kilobyte an Text abgelegt werden kann. Du kannst Cookies per JavaScript anlegen und auslegen oder aber auch serverseitig beispielsweise per PHP.

Vor allem in Kombination mit Sessions spielen sie eine große Rolle. Sei es die Anmeldung in sozialen Netzwerken oder bei Online-Shops: Ein nach der Anmeldung gesetzter Cookie sorgt dafür, dass dich eine Website als Nutzer wiedererkennt.

Das Besondere an Cookies ist, dass sie mit einem Verfallsdatum versehen werden können. So haben Cookies in der Regel eine begrenzte Lebensdauer. Wird keine Lebensdauer festgelegt, verfällt ein Cookie mit dem Schließen des Browsers.

Grundsätzlich lassen sich Cookies nur von der Domain auslesen, über die sie auch gesetzt wurden. Es ist aber weitergehend möglich, einen Cookie auf bestimmte Subdomains oder Verzeichnisse zu beschränken.

Speichern per „Web Storage“

Mit der Einführung von HTML5 sind zwei weitere Speichermöglichkeiten etabliert worden: der „Web Storage“ bestehend aus „localStorage“ und „sessionStorage“. Beide Varianten erlauben es, ausschließlich per JavaScript Variablen und Werte im Browser zu speichern.

localStorage.setItem("name", "Manfred");
sessionStorage.setItem("name", "Manfred");

Während per „localStorage“ hinterlegte Daten dauerhaft im Browser verfügbar sind, bleiben per „sessionStorage“ gespeicherte Daten nur bis zum Beenden des Browsers gespeichert.

Im Gegensatz zu Cookies, welche eine einfache Textdatei darstellen, lassen sich hierbei beliebig viele Variablen vergeben und somit unterschiedliche Daten speichern und abrufen.

localStorage.getItem("name");

Während Cookies häufig in Kombination mit serverseitig gespeicherten Session-Variablen arbeiten, gibt es mit „localStorage“ und „sessionStorage“ eine ausschließlich lokale Speichermöglichkeit.

Komplette Websites offline speichern mit „Application Cache“

Mit HTML5 wurde mehr Fokus auf Mobilgeräte wie Smartphones und Tablets gelegt. So hast du mit dem „Application Cache“ die Möglichkeit, eine komplette Website offline verfügbar zu machen. Dabei kannst du über eine sogenannte Manifest-Datei festlegen, welche Ressourcen einer Website auf einem Gerät gespeichert und verfügbar gemacht werden sollen.

CACHE MANIFEST
index.html
stylesheet.css
logo.png

Diese per „CACHE MANIFEST“ eingeleitete Datei enthält alle Dateien für den Offline-Betrieb. Einmal heruntergeladen, ist dann keine Internetverbindung mehr notwendig, um die Seite aufzurufen. Im Gegensatz zum Browser-Cache bleiben die Dateien dauerhaft lokal gespeichert – ähnlich wie es auch bei nativen mobilen Apps der Fall ist.

Die Manifest-Datei muss im „<html>“-Element der Seite referenziert werden.

<html manifest="http://www.example.com/manifest.mf">

IndexedDB: Datenbank im Browser

Mit IndexedDB und WebSQL gab es zwei Ansätze, lokal im Browser angelegte Datenbanken zu etablieren. Durchgesetzt hat sich schlussendlich IndexedDB. Im Gegensatz zum „Web Storage“, der lediglich das Speichern von einfachen Variablen und textbasierten Inhalten ermöglicht, sind per IndexedDB deutlich komplexere Speichermöglichkeiten vorhanden.

Mit IndexedDB kannst du eine vollwertige Datenbank im Browser erstellen, in der du nicht nur Zeichenketten, sondern auch Zahlen und Objekte unterbringst.

var request = indexedDB.open("beispiel", 1);

Im Beispiel wird eine Datenbank angelegt. Anschließend erstellst du sogenannte „Stores“, in welche du einzelne Datensätze ablegst.

request.onupgradeneeded = function() {
  var db = request.result;
  var store = db.createObjectStore("artikel", {keyPath: "id"});
  var titel_index = store.createIndex("nach_titel", "titel", {unique: true});
  var autor_index = store.createIndex("nach_autor", "autor");
  store.put({title: "HTML5 und CSS3", author: "Denis", id: 123456});
  store.put({title: "Mobile Apps", author: "Dieter", id: 234567});
};

request.onsuccess = function() {
  db = request.result;
};

Hier wird ein „Store“ mit Artikeln angelegt. Anschließend werden zwei Indizes definiert, welche Datensätze unterschiedlich sortieren. Per „put()“ werden zum Schluss die Datensätze in die Datenbank geschrieben.

Fazit und Entwicklerwerkzeuge

Entwicklerwerkzeuge im Chrome
Entwicklerwerkzeuge im Chrome

Wer zeitgemäße Webanwendungen mit HTML5 entwickelt möchte, hat mit „Application Cache“, „Web Storage“ und IndexedDB drei Möglichkeiten, Daten auf unterschiedliche Weise lokal im Browser zu speichern und offline verfügbar zu machen. Gerade bei mobilen Webanwendungen ist dies ein wichtiger Aspekt. Serverbasierte Lösungen sind nicht nötig.

Die Entwicklerwerkzeuge aktueller Browser geben dir zudem die Möglichkeiten, die gespeicherten Inhalte darzustellen und Bedarf auch wieder zu löschen.

(dpe)

Kategorien
JavaScript & jQuery Programmierung

ZingTouch: Umfangreiche Gestenerkennung per JavaScript

Die Wahrscheinlichkeit, dass deine Website über ein Smartphone oder Tablet angesteuert wird, wächst beständig. Die mobile Internetnutzung nimmt nach wie vor zu und es wird daher zunehmend wichtig, dass eine Website die besondere Bedienung per Touchdisplay berücksichtigt. Neben einfachen Taps haben sich zahlreiche Gesten etabliert, mit denen Mobilgeräte gesteuert werden. Mit ZingTouch steht dir eine umfangreiche JavaScript-Bibliothek zur Verfügung, die dir die Bedienung deiner Website über Gesten ermöglicht.

Tap-Gesten

Standardgesten auch für mehrere Finger

Grundsätzlich stellt dir JavaScript alle Möglichkeiten zur Verfügung, verschiedene Gesten zu interpretieren. Mit den Touch-Events fragst du zum Beispiel Berührungen auf dem Display ab und zeichnest Bewegungen auf. Dabei ist es möglich, mehrere Finger, die sich gleichzeitig auf dem Display befinden, nachzuhalten.

Um die verschiedenen gängigen Gesten interpretieren zu können, gibt es ZingTouch. Die JavaScript-Bibliothek kann sowohl einfache Taps als auch Taps mit mehreren Fingern interpretieren und unterschiedlich darauf reagieren.

Drehungen auf dem Display oder das Auseinander- und Zusammenziehen von Fingern erkennt ZingTouch ebenfals und ermöglicht so, auf unterschiedliche Gesten reagieren zu können.

Beispiele auf CodePen
Beispiele auf CodePen

ZingTouch einbinden und Gesten abfragen

Um ZingTouch nutzen zu können, muss die Bibliothek zunächst in dein HTML-Dokument eingebunden werden. Anschließend erstellst du eine sogenannte Region, die auf eine bestimmte Geste reagieren soll. Eine solche Region ist ein beliebiges HTML-Element.

var region = ZingTouch.Region(document.getElementById("container"));

Im Beispiel wird der Variablen „region“ per „ZingTouch.Region()“ das HTML-Element mit der ID „container“ zugewiesen. Im nächsten Schritt wird eine Geste definiert, auf die reagiert werden soll.

var geste = new ZingTouch.Tap({
  numInputs: 2,
  maxDelay: 1000
});

Im Beispiel wird per „ZingTouch.Tap()“ ein Tap definiert. Diesem kannst du verschiedene Parameter übergeben. Hier werden per „numInputs“ die Anzahl der Berührungspunkte angegeben, die auf die Region erfolgen müssen. Außerdem wird per „maxDelay“ in Millisekunden angegeben, wie lange der Tap maximal dauern darf.

Im konkreten Fall müssen also zwei Finger für maximal eine Sekunde auf der Region platziert sein. Im letzten Schritt wird die Geste per „bind()“ an die Region gebunden und eine Funktion angegeben, die bei erfolgreich ausgeführter Geste gestartet werden soll.

region.bind(document.getElementById("container"), geste, function(e) {
  console.log("Tapped.");
});

Dieses einfache Beispiel sorgt dafür, dass per Zwei-Finger-Tap auf das Element mit der ID „container“ in der Konsole „Tapped.“ geschrieben wird.

Sechs Gesten individuell konfigurierbar

Rotate-Geste
Rotate-Geste

Neben recht einfachen Tap-Gesten sind noch fünf weitere Gesten möglich. So kannst du Drehungen per Rotate-Geste, Auseinander- und Zusammenschieben per Expand- und Pinch-Geste, Umkreisen per Pan-Geste und klassisches Wischen per Swipe-Geste realisieren.

Für jede Geste stehen dir unterschiedliche Konfigurationsmöglichkeiten zur Verfügung. So gibst du bei der Swipe-Geste beispielsweise die Geschwindigkeit an, mit der die Geste ausgeführt werden muss.

new ZingTouch.Swipe({
  escapeVelocity: 0.25,
});

Für jede Geste gibt es auch Rückgabewerten, die ausgelesen und ausgewertet werden können. So gibt die Swipe-Geste zum Beispiel einen Winkel wieder, der die Richtung der Wischgeste darstellt.

region.bind(document.getElementById("container"), "swipe", function(e) {
  console.log(e.detail.data[0].currentDirection";
});

Im Beispiel wird die Geste ohne zusätzliche Parameter einfach an die „bind()“-Methode übergeben. Bei erfolgreicher Durchführung der Geste wird der Richtungswinkel „currentDirection“ in die Konsole geschrieben.

Umfangreiche Dokumentation

Umfangreiche und anschauliche Dokumentation
Umfangreiche und anschauliche Dokumentation

ZingTouch ist ein umfangreiches Werkzeug, mit dem du alle gängigen Gesten abdeckst und diese ohne großen Aufwand in deine eigenen mobilen Webprojekte implementierst. Es gibt eine umfangreiche Dokumentation mit zahlreichen Beispielen auf CodePen.

Die Bibliothek steht unter der freien MIT-Lizenz. Du kannst ZingTouch also auch kommerziell einsetzen.

Kategorien
Design HTML/CSS JavaScript & jQuery Programmierung Webdesign

HTML5 und JavaScript: So erstellst du mobile Web-Apps

Mobile Web-Apps müssen nicht immer nativ programmiert werden. Auch mit HTML5 und den damit eingeführten JavaScript-APIs entwickelst du mobile Web-Apps, die bezüglich der Funktionalität den nativ programmierten Apps in (fast) nichts nachstehen. Dazu kommt, dass native Anwendungen auch ihre Nachteile haben, die du mit HTML5 nicht hast.

mobile Web-Apps

Kein Store-Zwang, keine unterschiedlichen Plattformen

Apps sind auf Smartphones und Tablets zu einem unverzichtbaren Bestandteil geworden. Wer jedoch selbst mobile Apps anbieten möchte, wird schnell feststellen, dass dies mit einigen Hürden und nicht wenig Aufwand verbunden ist. Zunächst einmal müssen native Apps für jede Plattform – unter anderem iOS und Android – eigenständig entwickelt werden. Die sogenannten Hybrid-Apps, die auf mehreren Plattformen laufen, stellen hingegen nur eine Art Container dar, der in HTML und JavaScript programmierte Webanwendungen enthält.

Googles Play Store
Googles Play Store

Ein weiterer Nachteil nativer Apps ist, dass diese nur über den jeweiligen App-Store installiert werden können. Das führt im Play Store von Google zu einmaligen Registrierungskosten und bei Apple zu regelmäßigen Kosten. Zwar ist es auf Androidgeräten möglich, Apps auch ohne Store zu installieren. Dazu müssen jedoch in den Geräteeinstellungen explizit App-Installationen aus „unbekannten“ Quellen zugelassen werden.

Bei Webanwendungen bestehen all diese Probleme nicht. Sie werden in HTML5 und JavaScript programmiert und sind somit unabhängig von Betriebssystemen und Stores.

Geräteorientierung und Standortbestimmung

Viele Apps nutzen die speziellen Gerätefunktionen, mit denen Smartphones und Tablets ausgestattet sind. Dazu gehört das Gyroskop, welches die Drehung eines Gerätes um die eigene Achse erkennt und so beispielsweise feststellt, ob ein Gerät im Portrait- oder Landscape-Modus gehalten wird. Das geht auch mit JavaScript.

window.addEventListener("deviceorientation", function() {
 console.log(e.alpha);
 console.log(e.beta);
 console.log(e.gamma);
}, true);

Im Beispiel werden über das Ereignis „deviceorientation“ drei Winkel ausgegeben, welche die aktuelle Drehung des Gerätes darstellen.

Ebenfalls häufig verwendet ist die Standortbestimmung per GPS. Neben Navigationsanwendungen sind es vor allem Apps sozialer Netzwerke, die gerne auf den jeweiligen Standort des Nutzers zugreifen. Auch dies ist per JavaScript möglich.

navigator.geolocation.getCurrentPosition(function(position) {
 console.log(position.coords.latitude, position.coords.longitude);
});

Im Beispiel werden per „geolocation“ die Koordinaten des Längen- und Breitengrades ausgegeben. So lässt sich die jeweilige GPS-Position ermitteln.

Offline-Speichern per Application Cache

Native Apps haben gerade auf mobilen Geräten den Vorteil, dass sie einmal heruntergeladen werden und dann auch ohne Internetverbindung zur Verfügung stehen. Aber auch dies ist kein Grund, zwingend auf eine native App zu setzen. Denn der Application Cache von HTML5 erlaubt es ebenfalls, Dateien einer Webanwendung dauerhaft auf einem Gerät zu speichern.

Dazu wird im HTML-Element eine sogenannte Manifest-Datei referenziert, über die definiert ist, welche Dateien beim erstmaligen Laden der Seite auf dem Gerät gespeichert werden sollen.

<html manifest="example.appcache">

Die Manifest-Datei enthält dann aufgelistet alle Dateien der Website, die offline verfügbar gemacht werden.

CACHE MANIFEST
index.html
stylesheet.css
logo.png

Im Beispiel werden drei Dateien heruntergeladen und anschließend immer aus dem Application Cache geladen statt aus dem Internet.

Gestensteuerung

Während auf Desktopgeräten die Maus regiert, sind es auf Smartphones und Tablets die Finger. Neben einfachen Taps, die weitestgehend den Mausklick ersetzen, sind mit den Fingern auch sogenannte Gesten möglich. Am bekanntesten dürfte die Wischgeste stein, mit der beispielsweise Menüs ein- und ausgeblendet werden oder durch eine Bildergalerie geblättert wird.

Auch diese Funktionalität lässt sich per JavaScript realisieren. Hierzu gibt es verschiedene „touch“-Ereignisse, welche ähnlich funktionieren wie die „mouse“-Ereignisse. So stehen dir „touchstart“, „touchmove“ und „touchend“ zur Verfügung, mit denen die Position eines Fingers auf dem Display wiedergegeben wird. Dabei können mit den „touch“-Ereignissen auch mehrere gleichzeitig platzierte Finger registriert werden.

document.getElementsByTagName("body")[0].addEventListener("touchmove", function(e) {
  console.log(e.changedTouches[0].pageX);
  console.log(e.changedTouches[0].pageY);
}, false);

Über „changedTouches“ werden alle Berührungen auf dem Display als Array gespeichert. Im Beispiel werden die Koordinaten der jeweils ersten Berührung wiedergegeben.

Kamerazugriff

Noch relativ neu ist die Möglichkeit, auf Kameras per „getUserMedia()“ zuzugreifen. Hierzu wird zunächst ein leeres „<video>“-Element mit eingeschaltetem Autoplay platziert.

<video autoplay="autoplay"></video>

Anschließend wird per „getUserMedia()“ das Kamerabild dort hinein platziert.

navigator.getUserMedia ({
  audio: true,
  video: true
}, function (stream) {
  document.getElementsByTagName("video")[0].src = window.URL.createObjectURL(stream);
}, function() {
  console.log("Fehler");
});

„getUserMedia()“ erwartet drei Parameter. Zunächst definierst du, ob Video- und Audioinhalt übertragen werden sollen. Anschließend wird eine Funktion erwartet, die den Stream verarbeitet und im Beispiel dem „<video>“-Element übergibt. Als letztes muss noch eine Callback-Funktion her, die im Falle eines Fehlers aufgerufen wird.

Derzeit muss „getUserMedia()“ noch mit Vendor-Prefix – zum Beispiel „webkitGetUserMedia()“ – ausgezeichnet werden.

Web-Apps mit dem Web-Application-Manifest auf dem Startbildschirm platzieren

Im mobilen Chrome gibt es die Funktion „Zum Startbildschirm hinzufügen“. Hierbei wird ein Lesezeichen nicht im Browser, sondern auf dem Startbildschirm platziert. Über eine Manifest-Datei hast du die Möglichkeit, einen vom Seitentitel abweichenden Namen und ein eigenes Icon definieren.

Chrome und die Funktion „Zum Startbildschirm hinzufügen“
Chrome und die Funktion „Zum Startbildschirm hinzufügen“

Dazu muss die Manifest-Datei zunächst im HTML-Kopf definiert sein.

<link rel="manifest" href="manifest.json">

Anschließend wird in dieser Datei im JSON-Format festgelegt, wie das Lesezeichen auf dem Startbildschirm dargestellt werden soll.

{
  "name": "Demo",
  "icons": [{
    "src": "icon_36x36.png",
    "sizes": "36x36",
    "type": "image/png",
    "density": 1
  }]
}

Im Beispiel werden per „name“ die Bezeichnung des Lesezeichens und per „icons“ eine Reihe von Dateien definiert, die Icons in unterschiedlichen Auflösungen und Pixeldichten referenzieren.

Auch das Verhalten der Anwendung, wenn sie über den Startbildschirm geöffnet wird, lässt sich festlegen.

"display": "standalone",
"orientation": "portrait"

Per „display“ wird eine Website zu einer Standalone-Anwendung. Hierbei werden Adressleiste und Menü des Browser ausgeblendet und die Website im Vollbild dargestellt. Per „orientation“ kannst du Portrait- oder Landscape-Modus vorgeben.

Fazit

Dank des Web-Application-Manifestes unterscheiden sich einmal auf dem Startbildschirm abgelegte, mobile Web-Apps kaum noch von nativen Apps. Mit Hilfe der zahlreichen JavaScript-APIs ist es zudem möglich, nahezu alle Features von Smartphones und Tablets zu nutzen, die auch native Apps nutzen können.

(dpe)

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

Mit Anime.js animierst du CSS, SVG und mehr ganz einfach

Zu den zahlreichen Frameworks für Animationen gesellt sich mit anime.js ein weiteres. Im Gegensatz zu den vielen anderen Frameworks erlaubt anime.js nicht nur die Animation per CSS-Eigenschaften. Du kannst damit auch SVG- und HTML-Eigenschaften per Animation verändern. Gerade im modernen Webdesign ist das SVG-Format kaum wegzudenken. Das Framework kommt jedenfalls zur rechten Zeit.

Einfache CSS-Animationen

Hast du die JavaScript-Datei von anime.js eingebunden, erstellst du auf CSS-Eigenschaften basierende Animationen recht einfach. Über den Aufruf von „anime()“ übergibst du eines oder mehrere Ziele – also Elemente, die animiert werden sollen. Anschließend definierst du die CSS-Eigenschaften, die per Animation verändert werden sollen.

anime({
  targets: [document.getElementsByTagName("div")[0]],
  translateX: "300px",
  rotate: 180,
  duration: 2000,
  direction: "alternate",
  loop: true,
  elasticity: 600,
  easing: "easeOutElastic"
});

Im Beispiel wird per „targets“ ein „<div>“-Element übergeben. Du kannst auch einfach eine ID angeben. Es folgen zwei CSS-Eigenschaften – „translateX“ und „rotate“ –, die animiert werden sollen. Anschließend wird per „duration“ die Dauer und per „direction“ die Richtung der Animation festgelegt. Die Animation dauert hier also zwei Sekunden. Anschließend wird die Animation rückwärts ausgeführt. Per „loop“ legst du noch fest, dass sich die Animation in einer Schleife wiederholt.

Während einer Animation

Grundsätzlich ist dieses einfache Beispiel auch ohne JavaScript möglich, indem man die „@keyframes“-Regel zusammen mit „animation“ einsetzt. Bei anime.js kommt jedoch noch die besondere Eigenschaft „elasticity“ hinzu, die es erlaubt, einer Animation eine Elastizität mitzugeben. Je höher der Wert ist, desto elastischer wird animiert. Das heißt, am Ende der Animation bleibt diese nicht sofort stehen, sondern pendelt sich aus. Hiermit lassen sich sehr natürliche Bewegungen realisieren.

30 Easingeffekte

Wie bei klassischen CSS3-Animationen hast du mit anime.js die Möglichkeit, einer Animation ein Easing hinzuzufügen. Insgesamt stehen dir 30 verschiedene Easingeffekte zur Verfügung – also deutlich mehr als bei CSS3.

Gibst du „anime.easings“ über die Browser-Konsole aus, erhältst du eine Liste aller Effekte. Zusammen mit „elasticity“ ergeben sich jenseits des sonst üblichen sehr interessante Effekte.

SVG-Pfadanimationen

Wie bereits erwähnt sind Animationen mit SVG-Eigenschaften wie beispielsweise der „d“-Eigenschaft eines Pfades möglich. So realisierst du sehr einfach etwa eine Animation entlang eines Pfades.

Dazu definierst du per SVG zunächst ein „<path>“-Element sowie ein weiteres Elements – zum Beispiel ein „<div>“-Container –, welches sich entlang des Pfades bewegen soll.

anime({
  targets: [document.getElementsByTagName("div")[0]],
  translateX: anime.path(document.getElementsByTagName("path")[0]),
  translateY: anime.path(document.getElementsByTagName("path")[0]),
  rotate: anime.path(document.getElementsByTagName("path")[0]),
  duration: 5000,
  loop: true,
  easing: "linear"
});

Per „targets“ wird wieder das zu animierende Element referenziert. Über „translateX“, „translateY“ und „rotate“ wird per „anime.path()“ der SVG-Pfad angegeben, an dem entlang das „<div>“-Element animiert werden soll.

SVG-Morphing

Mit dem von Google eingeläuteten Ende von SMIL sind animierte Formänderungen von SVG-Elementen nicht mehr möglich – zumindest in zukünftigen Versionen des Browsers. Mit anime.js realisierst du jedoch weiterhin ganz einfach solche Animationen.

Dazu definierst du zunächst einen SVG-Pfad, den du später ganz einfach in eine andere Form morphen lassen kannst.

anime({
  targets: [document.getElementsByTagName("path")[0]],
  d: "M140,51.75A51.75,51.75,0,0,0,99.2,35.27a83,83,0,1,0,65.13,65.67A51.76,51.76,0,0,0,140,51.75Z",
  duration: 1000,
  loop: true,
  direction: "alternate",
  easing: "linear"
});

Im Beispiel wird als „targets“ ein SVG-Pfad referenziert. Über „d“ gibst du einen Zielpfad an, der die Form definiert, in welche das „<path>“-Element morphen soll. Wichtig ist, dass die Anzahl der Punkte im Quell- und Zielpfad identisch sind. Sonst gibt es unschöne Effekte statt eines schönen Morphings.

Interaktive Animationen

Zu guter Letzt ermöglicht dir anime.js auch noch, interaktive Animationen zu erstellen. So gibt es mit „play()“, „pause()“ und „restart()“ Methoden, mit denen du das Abspielen steuerst. Mit „seek()“ springst du zudem an eine bestimmte Position innerhalb der Animation. Dazu übergibst du entweder eine Zeit oder einen prozentualen Wert.

Außerdem stehen die Eigenschaften „begin“, „update“ und „complete“ zur Verfügung, denen du eine Funktion übergeben kannst. Diese Funktion wird dann entsprechend beim Beginn, bei Veränderungen während der Animation oder am Ende der Animation ausgeführt.

Fazit

Beispiel auf CodePen
Beispiel auf CodePen

anime.js hat alles, was du für einfache und komplexe CSS- und SVG-Animationen brauchst. Es gibt eine übersichtliche API-Referenz mit einigen Beispielen. Zudem läuft das Framework unter allen gängigen Browsern einschließlich des Internet Explorers ab Version 10.

Die hier vorgestellten Code-Beispiele findest du auf CodePen:

(dpe)

Kategorien
Boilerplates & andere Tools JavaScript & jQuery Programmierung Webdesign

Mit Adobe Animate und Snap.SVG animierte SVGs erstellen

Mit Animate CC hat auch Adobe das Ende von Flash eingeläutet. Zwar unterstützt das umbenannte Animationsprogramm nach wie vor Flash, aber der Schwerpunkt liegt auf HTML5 und WebGL. So entscheidest du vor jedem neuen Projekt, ob du eine Animation per HTML5-Canvas oder per WebGL erstellen möchtest. Animierte SVGs waren mit Animate CC bislang allerdings nicht möglich. Die Erweiterung „Snap.SVG Animator“ erweitert den Funktionsumfang von Animate CC genau um diese Möglichkeit.

snapsvg_framework
Das Framework Snap.SVG

Snap.SVG sorgt für vektorbasierte SVG-Animationen

Das Besondere an Flash war immer, dass es vektorbasierte Grafiken und Animationen in den Browser brachte. Das war in Zeiten vor SVG nicht möglich. Abgesehen von Schriften kamen nur pixelbasierte Formate wie JPEG und GIF zum Einsatz. Mit der Einführung von HTML5 wurde auch das XML-basierte SVG-Format beliebter, welches ähnlich wie Flash vektorbasiert und animierbar ist.

Damit hat das SVG-Format einen entscheidenden Vorteil zu HTML5-Canvas, welches Animationen nur pixelbasiert ermöglicht. Gerade beim Heranzoomen wird der Nachteil dieses Formates zu SVG deutlich. Da Animate CC grundsätzlich vektorbasiert ist, bietet es sich freilich an, vektorbasierte Ausgabeformate bereitzustellen.

Da SVG-Animationen jenseits der CSS3-Eigenschaften „transition“ und „animation“ per JavaScript realisiert werden, gibt es zahlreiche Frameworks, die dich dabei unterstützen, komplexe animierte SVGs zu erstellen. Eines der bekanntesten Frameworks ist Snap.SVG. Dieses stellt dir zahlreiche Methoden zur Verfügung, mit denen du Formen erstellst und diese auf unterschiedliche Art und Weise animierst.

Dabei erlaubt dir Snap.SVG eben auch interaktive Animationen, die per Klick oder Tap ausgelöst werden. Wer einen Blick in die Dokumentation von Snap.SVG wirft, stellt schnell fest, wie umfangreich das Framework ist. Mit der Animate-Erweiterung „Snap.SVG Animator“ wird die einfache Handhabung von Adobe Animate CC mit der komplexen Vielfalt von Snap.SVG kombiniert.

Kostenlose Erweiterung installieren und loslegen

Zunächst einmal musst du die kostenlos verfügbare Erweiterung „Snap.SVG Animator“ installieren. Du findest diese auf der Website der Adobe Add-ons. Die Erweiterung ist sowohl für die Windows- als auch für die Mac-Version von Adobe Animate CC verfügbar. Du installierst die Erweiterung entweder manuell oder direkt über die Creative Cloud.

snapsvg_assons
Erweiterung für Animate CC

Sobald „Snap.SVG Animator“ installiert ist, findest du in Animate CC den neuen Dokumenttyp „SnapSVGAnimator“. Du wählst also nicht nur zwischen HTML5, WebGL und ActionScript aus, sondern erhältst nun auch die Möglichkeit, ein SVG-Dokument anzulegen. Wie bei den anderen Dokumenttypen ist ein nachträglicher Wechsel nicht möglich.

snapsvg_dokumenttyp
Neuer Dokumenttyp in Animate CC nach Installation der Erweiterung

Du musst dich also zu Beginn eines neuen Projektes entscheiden, in welchem Format du entwickeln und gestalten möchtest. Anschließend arbeitest du ganz wie gewohnt mit Animate CC. Das heißt, du legst Formen an, konvertierst sie in Symbole und erstellst Animationen.

Aktionen erstellen per JavaScript

Dabei besteht die Möglichkeit, mit „Snap.SVG Animator“ interaktive SVG-Animationen zu erstellen. Während dir bei HTML-Canvas und WebGL Codefragmente zur Verfügung stehen, die du relativ einfach in dein Aktionen-Fenster ziehst, gibt es solche Fragmente beim Typ „SnapSVGAnimator“ nicht. Allerdings steht eine übersichtliche API mit den wichtigsten Methoden bereit.

So definierst du eine Klick-Aktion für eine Symbolinstanz sehr einfach.

this.beispiel.click(function() {
  this.beispiel.play();
});

Im Beispiel wird beim Klick auf die Instanz „beispiel“ diese abgespielt.

SVG-Dokument veröffentlichen

Das Veröffentlichen deines SVG-Dokumentes ist ebenfalls einfach und unkompliziert. Du gibst eine Ausgabedatei an und hast die Möglichkeit, über die erweiterten Einstellungen die Komprimierung der auszugebenen Dateien zu beeinflussen.

Die Ausgabe enthält neben einer HTML- und einer JSON-Datei zwei JavaScript-Dateien. Diese beinhalten das Snap.SVG-Framework, sodass alle notwendigen Dateien von Animate CC beziehungsweise der Erweiterung generiert werden und zur Verfügung stehen.

(dpe)

Kategorien
CMS Design Webdesign

Surreal CMS macht Websites flott

Content-Management-Systeme sind aus der modernen Webentwicklung nicht mehr wegzudenken. Dabei sind Installation und Konfiguration je nach System mal mehr, mal weniger umfangreich und zeitintensiv. Gerade bei kleinen Projekten steht der Aufwand häufig in keinem Verhältnis zum Nutzen, weshalb dann am Ende doch eine statische Website entsteht. Mit Surreal CMS fügst du jeder statischen Website nachträglich (fast) alle Funktionen eines Content-Management-Systems hinzu – ohne großen Aufwand, dafür einfach zu bedienen.

surreal-cms

Per FTP zum CMS-Glück

Das Prinzip von Surreal CMS ist denkbar einfach: Nachdem du dich bei dem Dienst angemeldet hast, fügst du eine bestehende statische Website hinzu, indem du die FTP-Daten eingibst und das Verzeichnis auswählst, in dem die Dateien für die Website liegen.

surreal-cms_connection
Eingabe der FTP-Zugangsdaten

Neben dem normalen FTP-Protokoll werden auch SFTP und FTPS unterstützt. Zusätzlich ist auch der Zugriff auf Amazon S3 möglich. Das ist nützlich für alle, die Websites über Amazons Cloud-Speicher hosten. Anschließend hast du über Surreal CMS Zugriff auf alle Dateien. Über eine Liste wählst du aus, welche der HTML-Dokumente du bearbeitbar machen möchtest.

Editierbare Bereiche definieren

Um zu verhindern, dass sämtliche Inhalte eines HTML-Dokumentes verändert werden können, musst du editierbare Bereiche festlegen. Dazu wird allen Elementen, die editierbar sein sollen, die Klasse „editable“ hinzugefügt. Im Rich-Text-Editor von Surreal CMS hast du anschließend die Möglichkeit, diese Bereiche zu bearbeiten. Machst du ein Container-Element wie „<article>“ editierbar, fügst du beispielsweise Überschriften, Listen und Fließtexte sowie Bilder hinzu.

surreal-cms_site
Verwaltung deiner Website in Surreal CMS

Du kannst aber auch Blockelemente wie „<h1>“ oder „<p>“ editierbar machen. In diesem Fall kannst du lediglich den Inhalt dieser Elemente bearbeiten, aber keine zusätzlichen Blockelemente hinzufügen.

In jedem Fall wird die Formatierung der Inhalte aus deiner Website übernommen. Überschriften und andere Inhalte werden also im Editor so angezeigt, wie sie auch auf der Website dargestellt werden.

Mit der zusätzlichen Klasse „uneditable“ definierst du innerhalb eines editierbaren Bereiches jene Elemente, die nicht bearbeitbar sein sollen. Außerdem hast du mit der Klasse „editable-text“ die Möglichkeit, das Bearbeiten von Inhalten auf reinen Text zu beschränken. Statt des Rich-Text-Editors wird dir dann ein einfaches Eingabefeld dargestellt.

Inhalte bearbeiten, Medien hinzufügen

Wie bereits erwähnt, steht ein umfangreicher Rich-Text-Editor, mit dem du Texte ähnlich wie in anderen Content-Management-Systemen bearbeitest, zur Verfügung. Es werden Überschriften, Listen, Tabellen sowie Fett- und Kursiv-Formatierungen unterstützt.

surreal-cms_rte
Rich-Text-Editor

Natürlich kannst du auch Links und Bilder hinzufügen. Surreal CMS stellt eine Dateiverwaltung zur Verfügung, über die du Bilder, Dokumente und andere Medien wie Videos hochlädst und in Seiten einbindest. Dabei kannst du Standardordner festlegen, in denen zum Beispiel automatisch alle Bilder abgelegt werden.

Um Bilder in eine Seite einzubinden, kannst du du diese frei skalieren. Surreal CMS wird dann entsprechend skalierte Dateien anlegen. Über die Klasse „editable-gallery“ definierst du einen Bereich für eine Bildergalerie. Hier fügst du beliebig viele Bilder hinzu, die per Klick ein Bild in der Großansicht öffnen. Mit zusätzlichen Data-Attributen legst du die Größe für die Thumbnails fest.

surreal-cms_image
Einfaches Hochladen und Einbinden von Bildern

Das Ganze funktioniert auch in Kombination mit populären JavaScript-Galerien wie Lightbox oder Fancybox.

Auch HTML5-Videos werden unterstützt. Hierbei wählst du bis zu zwei verschiedene Formate sowie ein Vorschaubild aus. Um die Auszeichnung des entsprechendes Quelltextes kümmert sich Surreal CMS.

Templates erstellen

Wie es sich für ein ordentliches Content-Management-System gehört, ermöglicht Surreal CMS nicht nur das Bearbeiten von bestehenden Seiten, sondern auch das Anlegen neuer Seiten. Um bestehende Layouts auf neue Seiten zu übernehmen, kannst du Templates erstellen.

surreal-cms_templates
Template-Erstellung

Hierbei handelt es sich um einfache HTML-Dokumente, in denen das Layout der Seite mit editierbaren Bereichen definiert sind. Du kannst mehrere Templates hinterlegen und bei jeder neuen Seite aus einer Liste der vorhandenen Templates eines auswählen.

Werden Templates nachträglich verändert, wirkt sich diese Veränderung jedoch nicht auf Seiten aus, in denen diese Templates bereits angewendet wurden. Denn Surreal CMS generiert aus dem Template ein statisches HTML-Dokument, welches anschließend losgelöst vom Template existiert.

Dateien inkludieren

Anders als andere Content-Management-Systeme erstellt Surreal CMS kein automatisches Menü. Aber wenn dein Server beziehungsweise Provider PHP unterstützt, kannst du feste Inhalte wie Navigation, Header und Footer per PHP oder SSI einbinden.

Falls deine HTML-Dateien durch den PHP-Parser laufen – per „.htaccess“ einstellbar –, bindest du per „include()“ ganz einfach PHP-Dateien ein. Das vereinfacht die Handhabung von Templates, da du in diesen nur die PHP-Inkludierungen definieren musst und das Design auf allen Seiten immer identisch ist – auch bei späterer Veränderung der inkludierten Dateien.

Benutzer- und Rechteverwaltung

So einfach wie das Bearbeiten von Inhalten ist das Anlegen von Benutzern und die Vergabe von Rechten. Um einen Nutzer anzulegen, vergibst du einen Namen und hinterlegst eine E-Mail-Adresse. Anschließend wählst du eine Website aus und legst fest, auf welche Seiten der Nutzer Zugriff bekommen soll.

surreal-cms_user
Benutzer- und Rechteverwaltung

Zusätzlich kannst du für jeden Nutzer individuell festlegen, welche Rechte er bekommen soll. So wählst du aus einer Liste, ob ein Benutzer Seiten anlegen, bearbeiten und löschen darf und ob Seiten von ihm veröffentlicht werden sollen.

Auch das Hochladen von Dateien und Einfügen von eigenem Quelltext kannst du erlauben beziehungsweise verbieten. Wenn du einen Benutzer angelegt und alle Rechte vergeben hast, schickt Surreal CMS ihm automatisch eine Willkommens-Mail mit seinen Zugangsdaten.

Den Inhalt der Willkommens-Mail legst du über eine Vorlage selbst fest. So kannst du beispielsweise deinen Kunden eine individuelle E-Mail mit den Zugangsdaten zukommen lassen.

surreal-cms_revisions
Einfaches Wiederherstellen dank Revisionen

Serverseitig werden von Surreal CMS Revisionen von veränderten Inhalten angelegt. Auf diese Weise stellst du ursprüngliche Inhalte schnell wieder her.

Eigenes Branding und Kosten

Surreal CMS ist vor allem für alle Webdesigner und -entwickler gedacht, die ihren Kunden ein einfaches CMS anbieten wollen. Daher kannst du das Aussehen des Backends auch individualisieren. So ersetzt du auf Wunsch das Logo durch dein eigenes und passt auch die Farbe des Backends an. Sogar eine eigene Hilfe-URL kannst du hinterlegen.

surreal-cms_branding
Individuelle Branding möglich

Da Surreal CMS über die Domain „edit-content.com“ läuft, deutet dann nichts mehr darauf hin, dass hier ein Fremdsystem verwendet wird. Hier kannst du also im Sinne der Kundenbindung alles auf dich beziehungsweise dein Unternehmen zuschneiden.

Um Surreal CMS zu testen, gibt es einen zweiwöchigen Trial-Zugang. Anschließend zahlst du 10 US-Dollar im Monat für bis zu fünf Websites, die du verwalten kannst. Insgesamt gibt es sieben Tarife. Für 100 Dollar im Monat sind dann beliebig viele Webprojekte möglich.

Fazit

Surreal CMS verbindet die Vorteile klassischer Content-Management-Systeme mit denen von statischen Websites. Gestalterisch und technisch hast du sämtliche Freiheiten. Du bist nicht an irgendwelche Einschränkungen gebunden, die das ein oder andere CMS mit sich bringt und musst dich ebenfalls nicht mit der Template-Erstellung in WordPress oder der Typoscript-Konfiguration von TYPO3 herumplagen.

Aber die beiden größten Vorteile von Surreal CMS sind zum einen, dass du im Handumdrehen einer statischen Website ein Content-Management-System unterbaust. Gerade bei bestehende Seiten, die beispielsweise auf Kundenwunsch bearbeitbar gemacht werden sollen, geht das schnell und unkompliziert.

Der zweite Vorteil besteht darin, dass die Website auch ohne Surreal CMS läuft. Entscheidest du dich irgendwann, auf Surreal CMS zu verzichten, läuft deine Website nach wir vor weiter. Bei anderen Content-Management-System oder etwa Homepage-Baukästen funktioniert das nicht.

Apropos Homepage-Baukasten: Surreal CMS richtet sich nicht an den ambitionierten Laien, der kein Budget für die Fremdvergabe seines Website-Designs hat. Surreal CMS ist klar an Designer gerichtet, die die Seiten ihrer Kunden teilweise dynamisieren wollen oder müssen.

(dpe)

Kategorien
Developer-News JavaScript & jQuery Programmierung

Co.cycles, die Suchmaschine für Open-Source-Code

Mensch, wie war das noch mit der Datumsvalidation in JavaScript? Weißt du noch, wie man checkt, ob ein Objekt leer ist? Klingt ziemlich speziell, oder? Und das ist gut so, denn genau diese sehr speziellen Fragestellungen sind es, die im Alltag eines Webdevelopers wesentlich öfter vorkommen als die Frage, welches Framework generell besser ist als jenes. Die neue Suchmaschine Co.cycles ist eine sehr interessante Hilfe für diese Alltagsfragen.

Co.cycles, die Suchmaschine für Open Source-Code

Foren: Entwicklerhilfen ganz klassisch

Ich bin Mitglied in diversen Foren, die sich mit Fragen der Frontend-Entwicklung beschäftigen und ich bin großer Verfechter der Verwendung der Forensuchfunktionen ;-) Auf der Basis des Helfens und Geholfenwerdens habe ich zahllose Probleme, die ich im Rahmen meiner täglichen Arbeit sonst nicht oder nur mit unverhältnismäßig hohem Aufwand hätte lösen können, vom Tisch bekommen. Generell kann man indes sagen, dass es auch in Foren umso schwieriger wird, schnell Hilfe zu bekommen, je konkreter oder spezieller die Fragestellung wird. Auch über die Suchfunktionen gefundene Hilfen müssen teils uminterpretiert werden, um auf den eigenen Problemfall zu passen.

Da ist es gut, dass sich jetzt zu der weiterhin unschätzbaren Hilfe, die über Foreninteraktion zu erhalten ist, eine neue Suchmaschine für frei verfügbaren Code hinzugesellt. Co.cycles heißt die, optisch Google nicht unähnliche, Suchmaschine, die sich anschickt, ein unverzichtbarer Begleiter der Webdeveloper unserer Tage zu werden.

Co.cycles, die Suchmaschine für Open Source-Code

Co.cycles: Entwicklerhilfe auf Steroiden

Co.cycles kann zum jetzigen Zeitpunkt allein bei Fragestellungen zu JavaScript helfen. Dabei sucht sie sowohl generell nach zur Suchanfrage passenden Projekten, wie auch speziell nach passenden Codeschnipseln, Funktionen und so weiter. In Arbeit befinden sich Erweiterungen von Co.cycles für Sprachen wie PHP und Ruby.

Die Verwendung von Co.cycles ist einfach. Sie funktioniert ausschließlich auf der Basis von Freitext-Suchanfragen, ebenso wie das große Vorbild aus Kalifornien. Um den Einstieg zu erleichtern, findest du beim Aufruf von Co.cycles direkt Vorschläge gültiger Suchphrasenformulierungen neben dem Suchschlitz.

Sobald du einen Suchbegriff eingegeben und abgeschickt hast, endet die Ähnlichkeit mit Google abrupt. Die Suchergebnisseite ist weitaus sprechender als man das ansonsten gewohnt ist. Linksseitig angeordnet findest du Projekte, die sich mit deinem Suchbegriff befassen, mittig siehst du genau die gesuchte Funktion in einem kompletten Sourcecode-Beispiel und rechts wird dann erklärt, was, wozu und wie.

Co.cycles, die Suchmaschine für Open Source-Code

Auf diese Weise kommst du schnell in die Gänge, was deinen Workflow bei passgenauen Ergebnissen enorm beschleunigen dürfte. Versuche doch mal diese Suchen:

Sicherlich ist das derzeitige Fehlen von PHP noch ein größeres Manko. Das wird sich jedoch in Kürze ändern, so dass Co.cycles nochmal deutlich an Nutzwert gewinnen wird.

Welches Tool benutzt du bei solchen Fragestellungen?