Kategorien
Design HTML/CSS

easings.net: Bremsen und Beschleunigen mit CSS3

Mit der Einführung von CSS3 sind auch animierte Hover-Effekte und andere Übergänge möglich. Für die Transitions – wie diese Form der Animationen genannt werden – existieren mehrere vordefinierte Effekte, die sogenannten Easings. Sie unterschieden sich in der Art der Beschleunigung und des Abbremsens der Bewegung. Die Seite easings.net hat eine Reihe zusätzlicher Easings zusammengestellt und liefert den passenden Quelltext dazu.


Übersicht über alle Easings

Zu den Standard-Easings von CSS3 gehören einfache Ease-In- und Ease-Out-Effekte, die Animationen entweder am Anfang und/oder am Ende abbremsen oder beschleunigen. CSS3 ermöglicht jedoch auch die Definition eigener Easings, die über eine individuelle Bézierkurve definiert werden.

Auf easings.net gibt es eine Galerie mit 30 verschiedenen Animationseffekten, die über die Standard-CSS3-Easings hinausgehen. Für jeden einzelnen Effekt steht eine Vorschau zur Verfügung, in der die Bézierkurve dargestellt und die Bewegung beispielhaft ausgeführt werden kann. Außerdem liefert die Seite für jedes Easing den passenden Quelltext gleich mit dazu.

Easings für CSS3 und jQuery-Plugin

Die Easings, die direkt per CSS3 ausgeführt werden können, erlauben nur relativ einfache Bézierkurven. Komplexere Easings, bei denen beispielsweise ein Abfedern oder eine Elastizität in einer Animation dargestellt werden sollen, lassen sich nur mit Hilfe von JavaScript realisieren.

Daher liefert easings.net nicht nur die Bézierkurven für CSS3, sondern immer auch den richtigen Quelltext für das jQuery-Easing-Plugin, welches sehr viel komplexere Animationsübergänge erlaubt. In dem Plugin sind die 30 vorgestellten Easing-Effekte bereits implementiert, weshalb nur der entsprechende Easing-Name angegeben werden muss.

Easings für SASS

Neben der CSS3- und jQuery-Ausgabe bietet easings.net mit der Erweiterung Ceaser Easing Animation auch eine  Ausgabe für das CSS3-Framework Compass. Die Erweiterung ermöglicht es, vordefinierte Easings einfach zu übernehmen, ohne die entsprechende Bézierkurve angeben zu müssen.

Fazit: easings.net bietet eine sehr schöne Zusammenstellung unterschiedlicher Easing-Effekte samt passenden Quelltextes für unterschiedliche Einsätze.

(dpe)

Kategorien
JavaScript & jQuery Programmierung

Conditionizr für jQuery – Bedingtes Laden von JavaScript und CSS automatisiert

Conditional comments – örgs. Welcher Webdeveloper kennt nicht die Notwendigkeit, dem IE bestimmte Faxen auszutreiben, indem man ihn von bestimmten Anweisungen ausnimmt oder einbezieht. Aber auch in anderen Browsern kann es sinnvoll sein, auf deren spezielle Fähigkeiten zu reagieren und Content entsprechend angepasst zu servieren. Das jQuery-Plugin Conditionizr will ein Rundum-Sorglospaket für moderne Web-Entwicklung sein.

Conditionizr – perfekte Ergänzung zu Modernizr

Eins vorweg – Conditionizr ersetzt nicht etwa Modernizr, sondern funktioniert sogar am besten, wenn beide Scripte eingebunden sind. Conditionizr setzt auf den gleichen Klassen-Ansatz und ergänzt Modernizr daher ideal.

Im Wege der javascript-basierten Feature-Detection ermittelt Conditionizr nicht nur die Fähigkeiten der jeweiligen Browser, sondern ist sogar in der Lage, nach Betriebssystemen zu unterscheiden. Je nach gefundenen Möglichkeiten fügt Conditionizr den HTML-Elementen korrespondierende Klassen hinzu und kümmert sich um etwa erforderliches CSS, sowie JavaScript.

Dabei werden die Bedingungen nicht etwa den einzelnen HTML-Elementen angefügt, wie man das bereits kennt. Vielmehr funktioniert Conditionizr komplett ohne zusätzliches Markup, wenn man einmal von der Einbindung des Scripts, sowie den Aufruf der Konfigurationsoptionen im Kopf der Seite absieht. Bei allen unterstützten Browsern lassen sich per Konfiguration spezifisches CSS, JavaScript, sowie der Zusatz der Klassen ein- bzw. abschalten. Auch die Unterstützung der Erkennung diverser OS wird so definiert. Ebenso widmet sich Conditionizr dem Thema “Retina”. HiDPI-fähige Geräte werden ebenfalls erkannt und behandelt.

Die Basiskonfiguration sieht so aus:

Wie Sie sehen, erlaubt Conditionizr zusätzlich zu den integrierten Styles und Scripts, die die gängigen Besonderheiten bereits abdecken, explizit auch die Angabe eigener Scripts, mit denen man gezielt Fähigkeiten einzelner Browser nach eigenem Gusto ansprechen kann. Man ist also auf die Code-Basis, so wie sie die Entwickler Todd Motto und Mark Goodyear angelegt haben, nicht beschränkt.

Conditionizr steht auf Github zur kostenlosen Verwendung bereit. Da das Projekt unter der liberalen MIT-Lizenz steht, kann es sowohl für private, wie kommerzielle Zwecke verwendet werden. Ich habe es direkt in meinen Werkzeugkasten integriert.

Links zum Beitrag:

Kategorien
JavaScript & jQuery Programmierung

Calendario für jQuery ermöglicht die flexible Darstellung responsiver Kalender

Will man Termine auf einer Website veröffentlichen, bietet es sich an, diese in einem Kalender darzustellen. Das jQuery-Plugin Calendario bindet ohne viel Aufwand einen Monatskalender in eine Website ein und lässt sich nach Bedarf anpassen. Termine für den Kalender werden bequem per JavaScript übergeben und im Kalender angezeigt.


Kalenderdarstellung mit Calendario

Los geht’s mit einem leeren Container und einer Zeile JavaScript

Um den Kalender per Calendario in seiner Minimalausstattung einbinden zu zu können, braucht es einen leeren DIV-Container, der als Platzhalter für den Kalender dient:

<div id="kalender" class="fc-calendar-container"></div>

Über die ID wird das jQuery-Plugin auf den Container angewendet, welches dafür sorgt, dass dem Element der Kalender-Quelltext – eine Reihe von DIV- und SPAN-Elementen zur Darstellung der Wochen- und Monatstage – zugewiesen wird:

$("#kalender" ).calendario();

Das Layout des Kalenders passt man bequem per CSS an. Über die Klasse „fc-calendar-container“ erhält der Kalender das Standard-Layout, welches leicht änderbar ist.

Mehrere Optionen, über den Plugin-Aufruf einzustellen, erlauben das Anpassen des Kalenders. So können Monat und Jahr des Kalenderblattes angegeben werden (standardmäßig sind aktueller Monat und aktuelles Jahr dargestellt):

$("#kalender" ).calendario({
  month: 3,
  year: 2014
});

Im Beispiel wird der März 2014 angezeigt. Auch die Bezeichnungen der Wochentage und Monate lassen sich verändern – und zwar über zwei Arrays:

$("#kalender" ).calendario({
  weeks: ["Sonntag", "Montag", …],
  months: ["Januar", "Februar", …]
});

Da ein Kalender ohne Termine auf einer Website eher uninteressant ist, gibt es die Möglichkeit, über eine Variable eine Liste mit Terminen zu übergeben. Diese werden dann automatisch am richtigen Tag im Kalender dargestellt:

$("#kalender" ).calendario({
  caldata = {
    "12-31-2012": "Silvester",
    "01-01-2013": "Neujahr"
});

Listendarstellung für kleine Auflösungen

Typischerweise wird ein Kalender in sieben Spalten (pro Wochentag eine) angezeigt. Gerade bei kleinen Auflösungen wird es da schon mal eng. Calendario kommt mit einem responsiven Layout daher, welches die typische Darstellung in Spalten bei kleinen Auflösungen in eine einfache Listendarstellung ändert. Das heißt, die Tage werden alle untereinander angeordnet und erhalten den dazugehörigen Wochentag.


Listendarstellung für kleine Auflösungen

Fazit: Mit geringem Aufwand wird mit dem Calendario-Plugin ein vorzeigbarer Kalender, der sehr individuell anpassbar ist, in eine Website angebunden. Seine responsive Ausrichtung macht ihn tauglich für mobil orientierte Dienste.

(dpe)

Kategorien
Design Essentials Freebies, Tools und Templates UI/UX

Divshot: Noch schnelleres Rapid Prototyping mit Bootstrap

Twitters Bootstrap eignet sich zum schnellen Entwerfen responsiver Website-Prototypen, was die stetig steigende Beliebtheit des Frameworks erklärt. Wie aber wäre es, wenn man das ohnehin schon hohe Tempo, mit dem man mit Bootstrap funktionsfähige Designs erstellt, noch einmal anheben würde? Genau dieser Aufgabe widmet sich die brandneue Web-App Divshot, die derzeit im Stadium einer Public Beta verfügbar ist und kostenlos verwendet werden kann.

Divshot: Drag and Drop mit Bootstrap

Divshot ist ein WYSIWYG-Editor, der auf Bootstrap aufsetzt. Wie die Gründer Michael Bleigh und Jake Johnson erklären, ist Bootstrap nur die erste Unterlage für den Start des Dienstes. In der Zukunft will Divshot weitere Frameworks, allen voran Zurbs Foundation unterstützen. Man könnte sich dann zu Beginn des Prozesses aussuchen, mit welchem Framework man arbeiten will. So weit ist es noch nicht. Aktuell kann ausschließlich Bootstrap verwendet werden.

Wie erwähnt befindet sich Divshot derzeit in offener Beta und kann kostenlos genutzt werden. Bislang gibt es keinerlei Informationen zum zu erwartenden Preismodell oder zu der Frage, wie lang die offene Betaphase dauern wird. Die Betreiber versprechen dabei immerhin, dass niemand auf die bis dahin erstellten Prototypen verzichten wird müssen. Aktuell finanziert sich das Projekt über Seed Funding einzelner Investoren.

In Divstrap wird sich jeder Designer sofort heimisch fühlen, der bereits mit Tools wie Dreamweaver gearbeitet hat. Eine Website wird per Drag and Drop zusammengestöpselt. Die Maus ist das wichtigste Werkzeug. Die Detaildefinition erfolgt objektorientiert über seitlich angezeigte Optionsdialoge.

Die ersten Schritte erfolgen intuitiv. Divshot gibt keine Rätsel auf. Nach der Anlage eines Folders, also dem künftigen kompletten Projekt, werden einzelne Seiten angelegt, die auf der Basis verschiedener Templates oder komplett from scratch gestaltet werden. Die einzelnen Komponenten, also Designelemente zieht man mit der Maus an die entsprechende Stelle im Layout. Da Bootstrap responsiv ausgelegt ist, erfolgt natürlich keine pixelgenaue Positionierung.

Ist man mit dem Layout fertig, lässt sich dieses als HTML exportieren, in einem separaten Fenster als Preview anzeigen und auch auf der Basis vordefinierter Viewports für mobile Geräte beurteilen.

Divshot und das Customizing: flexibel

Divshot ist insbesondere deshalb sehr flexibel, weil es dem Designer die Möglichkeit gibt, selbst Hand anzulegen. Man ist nicht auf die definierten Styles angewiesen, sondern kann über eigene Klassen und eigenes CSS das Layout exakt den eigenen Vorstellungen anpassen. In Sachen CSS unterstützt Divshot interessanterweise nicht nur die pure Variante, sondern arbeitet auch mit Preprocessors, etwa SASS und LESS zusammen.

Über sogenannte Themes bietet Divshot schicke Layoutvorschläge an, die auf manipuliertem Bootstrap-CSS beruhen. Das ist letztlich Geschmackssache, sowie eine Frage des persönlichen Könnens. Die Themes stammen von der Website Bootswatch, die es sich zur Aufgabe gemacht hat, freie Themes für Bootstrap zu sammeln und zum Download anzubieten. Da Divshot Bootswatch direkt integriert, würden etwaige weitere Themes auch direkt im Editor von Divshot verfügbar werden.

Insbesondere, aber nicht nur mit Blick auf die Themes muss es als Nachteil empfunden werden, dass Divshot ausschließlich HTML exportiert, dieses allerdings wie gemalt. Immerhin deuten die Betreiber an, künftig nicht mehr bloß den HTML-Quelltext bereitstellen zu wollen. Das spräche für eine offenere Handhabung und könnte sicherlich mehr Nutzer überzeugen.

Kann man Divshot nun empfehlen und wenn ja, wem? Meiner Meinung nach ist Divshot durchaus eine Empfehlung für alle Bootstrap-Verwender wert. Sicherlich richtet sich Divshot nicht an technische Newbies, dazu ist der Grad der Abstraktion zu gering. Ein Bootstrap-Experte muss man indes auch nicht sein.

Seine besten Dienste leistet Divshot im Rapid Prototyping, möglicherweise sogar in Anwesenheit des Kunden, mindestens aber, wenn ein Entwicklerteam beteiligt ist. Im Gespräch lässt sich relativ schnell das Gerüst der Anwendung zusammenstellen. Das ginge zwar mit Photoshop auch, erzeugte aber keinen weiter zu verarbeitenden Code und wäre nicht responsiv.


Eine kleine Video-Einführung erklärt das Konzept

Was meinen Sie? Wie sind Ihre Erfahrungen mit Bootstrap?

Links zum Beitrag:

Kategorien
Design HTML/CSS JavaScript & jQuery Programmierung

FooTable: jQuery-Plugin macht HTML-Tabellen auf kleinen Screens benutzbar

Tabellen mit Dateninhalten sind auf kleinen Screens in Sachen Usability eine Qual. Schon, wenn mehr als zwei Spalten dargestellt werden müssen, beginnt – wenn es gut läuft – die horizontale Scrollerei. Die Übersicht geht schnell verloren. Findige Entwickler brachten zwischenzeitlich eine ganze Reihe von Lösungen für dieses Problem hervor. FooTable, ein schlankes jQuery-Plugin, gehört dabei zu den besten Ansätzen und kann sehr simpel implementiert werden.

FooTable: Tabellensteuerung mit HTML5 Data-Attributen

Wenn eine HTML-Tabelle auf kleinen Geräten aufgerufen wird, versucht der Browser zunächst, die Tabelle in den Viewport zu quetschen, was bereits in den meisten Fällen zur Unbenutzbarkeit führt. Kann der Browser die Tabelle beim besten Willen nicht innerhalb des zur Verfügung stehenden Platzes anzeigen, bricht die Tabelle nach rechts aus und muss horizontal gescrollt werden. Eine Lösung, die im Grunde auf dieses Standardverhalten aufsetzt, es dabei aber kontrolliert einsetzt, ist Zurbs Responsive Tables, das wir hier bei Dr. Web bereits vor einiger Zeit vorstellten.

FooTable geht anders vor. Es setzt nicht auf kontrolliertes horizontales Scrollen unter Verwendung einer Schlüsselspalte, sondern verbirgt, je nach Breakpoint, beliebig viele Spalten. In der ersten Zelle der verbleibenden Spalten wird dann ein großes Plus-Symbol gezeigt, das nach Tap oder Klick unterhalb der Datenreihe die weiteren Inhalte übersichtlich anzeigt.

Das funktioniert mittlerweile neben der reinen Darstellung von Textinformationen, obwohl das Plugin erst wenige Tage alt ist, bereits mit HTML-Inhalten, wie Bildern und Links und lässt sich sogar auf die bekannte Art und Weise sortieren. In Arbeit befindet sich derzeit die Möglichkeit, die Inhalte zu filtern. Derzeit müssen die Datentabellen noch von Hand oder über zusätzliche Programmierung bestückt werden. Für eine spätere Version ist das Laden von Json-Inhalten vorgesehen.

FooTable von Steven Usher und Brad Vincent ist ein kostenloses jQuery-Plugin, das frei über die Website oder aus dem Github-Repository geladen und verwendet werden kann. Es wird unter der liberalen MIT-Lizenz vertrieben und kann so auch für kommerzielle Projekte kostenlos genutzt werden. Die Lizenz ist im Header des Scripts hinterlegt und darf nicht entfernt werden.

FooTable: So funktioniert’s…

Zunächst muss das Plugin, nebst dem zugehörigen CSS, nach dem Aufruf von jQuery selbst im Kopf des Dokuments eingebunden werden.



Dann kann der Funktionsaufruf erfolgen:

FooTable arbeitet, wie im responsiven Design üblich, mit Breakpoints. Per Standard sind zwei Breakpoints, eigentlich drei mit dem Desktop, vordefiniert. Eigene können simpel ergänzt werden. Diese sind bereits vorhanden:

breakpoints: {
  phone: 480,
  tablet: 1024
}

Die eigentliche Tabelle wird nun ganz klassisch mit den dafür vorgesehenen HTML-Tags gebaut. Das kann so aussehen:

Name Phone Email
Bob Builder 555-12345 bob@home.com
Bridget Jones 544-776655 bjones@mysite.com
Tom Cruise 555-99911 cruise1@crazy.com

Anhand des Aufbaus wird schnell deutlich, wie FooTable funktioniert. Die Klasse footable sorgt dafür, dass das Javascript die Tabelle erkennt und verarbeitet. Spalten, die auf bestimmten Auflösungen nicht gezeigt werden sollen, erhalten das Data-Attribut data-hide, gekoppelt mit der Angabe, für welche Breakpoints das gelten soll. Fertig!

Fazit: FooTables Ansatz ist sehr praktikabel und scheint mir bislang die sinnvollste Variante für Tabellen im responsiven Design zu sein. Es lohnt auf jeden Fall, das Plugin für kommende Projekte in Erwägung zu ziehen.

Links zum Beitrag:

  • Responsive Tables macht große Tabellen auf kleinen Geräten nutzbar – Dr. Web Magazin
  • Introducing FooTable – Themergency Blog
  • Responsive Demo mit verschiedenen Breakpoints – Themergency.com
  • FooTable im Repository – Github
  • Produktwebsite – FooTable
Kategorien
JavaScript & jQuery Programmierung

Photobooth.js: HTML5-Webcam für die eigene Website

Wolfram Hempel baut eigentlich Apps für Investmentbanken und andere Unternehmen des Finanzsektors. Apps, die diesen Unternehmen unter anderem das Anbieten von Aktienhandel über das Internet ermöglichen. Um stets auf der Höhe der Technik zu agieren, beschäftigt sich Hempel intensiv mit HTML 5. Wie er in seinem Blog schreibt, hat es ihm in letzter Zeit besonders der Webcam-Support angetan. Kurzerhand baute er eine JavaScript-Lösung, die klein, schnell und funktional ist und dabei noch von jedermann kostenlos eingesetzt werden kann.

HTML5-Webcam: Flexibles Widget erlaubt Selbstportraits via Browserfenster

Das schlanke JavaScript-Tool Photobooth.js steht in zwei Geschmacksrichtungen bereit. Einmal kann es, auf jQuery aufsetzend genutzt werden, was sicherlich in Umgebungen, in denen jQuery ohnehin eingebunden ist, sinnvoll ist. Zum anderen steht es jedoch auch völlig ohne Abhängigkeiten bereit. In letztgenannter Variante ist die Handhabung mit etwas mehr Schreibaufwand verbunden, funktional bestehen keine Unterschiede.

Das Tool funktioniert in allen Browsern, die .getUserMedia unterstützen. Allen voran bietet das Googles Chrome seit Version 21 und Opera seit Version 12. Im Firefox, der ab Version 17 ebenfalls dazu in der Lage ist, läuft Photobooth nach Hempels Aussage nicht so performant. Verbesserungen sind in Arbeit. Safari- und IE-Nutzer schauen in die allseits bekannte Röhre.

Verschiedene konfigurierbare Funktionen erlauben es, Photobooth sehr genau der eigenen Bedürfnislage anzupassen. Hierzu gehören auch Basics, wie die Einstellungen, in welcher Breite und Höhe in Pixeln sich Photobooth zeigen soll. In Firefox ist die rechtsseitig angeordnete Toolbar, mit der sich Sättigung, Helligkeit und Kontrast justieren lassen, aus Performancegründen standardmäßig deaktiviert. Mittels einer manuell anzuwendenden Funktion kann die Toolbar erzwungen werden.

Ruft man eine Website, die mit Photobooth ausgestattet ist, auf, fragt eine Systemmeldung des Browsers nach, ob man der Website den Zugriff auf die Webcam erlauben will. Naheliegenderweise funktioniert Photobooth nicht, wenn man die Genehmigung nicht erteilt. Erteilt man die Erlaubnis, wird ohne Umschweife das Live-Bild der Webcam innerhalb des Widgets angezeigt.

Hier besteht nun die Möglichkeit, mit Farb- und Helligkeitswerten zu spielen, sowie einen Ausschnitt festzulegen, der letztlich zum Inhalt des Shot werden wird. Ist alles zur Zufriedenheit eingestellt, reicht ein Klick auf das Kamera-Symbol. Die Aufnahme wird dann unterhalb des Webcam-Fensters zur Anzeige gebracht und kann von hier bequem gespeichert werden. Das erfolgt hemdsärmelig via “Bild speichern unter”, rustikal aber funktional.

Hempels Photobooth.js soll keine vollständige Rund-um-Sorglos-Lösung sein, sondern ist natürlich ein Experiment, das bereits in diesem jungen Stadium – es ist erst wenige Stunden alt – zeigt, welches Potenzial in .getUserMedia steckt. Ich bin auf die Fortentwicklung des Experiments gespannt.

Photobooth.js kann auf Github heruntergeladen werden. HTML5-Interessierte sollten sich das Projekt in jedem Falle mal näher ansehen.

Links zum Beitrag:

Kategorien
Fotografie Inspiration JavaScript & jQuery Programmierung

Spectragram.js für jQuery holt Fotos aus Instagram auf jede Website

Mittlerweile dürften die meisten Instagram-Nutzer Zugriff auf die neuen Web-Profile haben. Lange genug hat es ja gedauert. Fortan können die eigenen Bilder auch von Menschen ohne Mobilgeräte konsumiert werden. Will man Instragram-Inhalte indes auf der eigenen Website integrieren, bedarf es eines etwas größeren Aufwands. Ein kleines jQuery-Plugin namens Spectragram.js vereinfacht den Vorgang deutlich.

Spectragram holt User-Feeds, Tags oder die neuesten Inhalte auf die Site

Adrian Quevedo aus Bogotá in Kolumbien legt mit Spectragram.js ein jQuery-Plugin vor, das in der Lage ist, Instragram-Inhalte auf jede Website zu holen. Das Plugin steht auf Github unter der MIT-Lizenz bereit und darf somit sowohl für private, wie auch kommerzielle Zwecke verwendet werden.

Da Spectragram.js die Instagram-API anzapft, ist es vor der ersten Verwendung erforderlich, sich als Entwickler mit einer Anwendung zu registrieren. Am Ende dieses Vorgangs verfügt man über eine clientID und ein accessToken.

So ist die Vorgehensweise. Nach dem Download des Scriptes und nachfolgendem Upload auf den eigenen Webspace, wird Spectragram.js nach jQuery im Head der Seite eingebunden:

Danach erfolgt die Übergabe der Authentifizierungsdaten an die API:

jQuery.fn.spectragram.accessData = {
    accessToken: '[your-instagram-access-token]',
    clientID: '[your-instagram-application-clientID]'        
};

Damit ist die Sache schon fast erledigt. Jetzt gilt es lediglich noch, den eigentlichen Abruf der Inhalte zu starten. Das kann beispielsweise so aussehen:

$('ul').spectragram('getUserFeed',{
    query: 'dpetereit',
    max: 14,
    size: 'big',
    wrapEachWith: '
  • '} });

    Und so liest sich obiges Beispiel. Zunächst ordnen wir als Container das Element ul zu. Man könnte auch etwa div oder andere wählen. Mit getUserFeed bestimmen wir, was Spectragram holen soll, hier den Foto-Feed eines Users. Dieser wiederum wird über query angegeben. Mittels max kann eine Beschränkung hinsichtlich der maximalen Anzahl zu zeigender Fotos erfolgen, size legt die Größe der Bildanzeige fest und mit wrapEachWith umschließt man jedes Content-Element mit einem Tag. Da wir mit ul gestartet sind, empfiehlt sich li as umschließendes Element. So können wir dann via CSS das Styling vornehmen. Vordefinierte Styles sind nicht vorhanden.

    Neben dem User-Feed können auch Inhalte zu Suchbegriffen oder schlicht die neuesten Bilder abgerufen werden. Quevedo verspricht, dem Leistungsportfolio kurzfristig weitere Funktionen hinzuzufügen. Bereits jetzt bietet Spectragram.js jedoch einen sehr einfachen Weg, das eigene Instagram-Profil flexibel auf der eigenen Website zu integrieren. Daumen hoch nach Bogotá!

    Links zum Beitrag:

    Kategorien
    JavaScript & jQuery Programmierung

    Garlic.js und Sisyphus.js: jQuery-Plugins sichern Formularinhalte mit HTML5-LocalStorage

    Das Problem ist so alt wie Formulare selbst. Und je länger das Formular, desto größer das Problem. Eines natürlich, das nicht stets und ständig auftritt, sondern lediglich dann, wenn man unter Zeitdruck ist oder das ausgefüllte Formular teils schwierig zu beschaffende Informationen enthält. Das Senden des Formulars schlägt fehl, man schließt versehentlich den Browser-Tab, drückt dummerweise auf F5 oder welchen Unfug man sonst noch zu treiben vermag. Ergebnis: Das Formular ist wieder jungfräulich. Alle Inhalte sind weg. Die jQuery-Plugins, die ich Ihnen jetzt vorstellen werde, versprechen, diesen Effekt zu verhindern.

    Garlic.js und Sisyphus.js: Niemals wieder ein Formular doppelt ausfüllen

    Besonders Betreiber von eCommerce-Seiten werden das Problem sofort erkennen. Wenn potenzielle Kunden ein Formular mehrfach ausfüllen müssen, sinkt deren Abschlussfreudigkeit exponentiell. Mit anderen Worten: Der Warenkorb wird mitten im Laden stehen gelassen.

    Auch andere Webnutzer kennen das Erlebnis, mindestens einmal, ich sicherlich dutzendfach, bereits eingegebene Formulardaten aus den unterschiedlichsten Gründen erneut erfassen zu müssen. Nicht immer liegt es an der Ungelenkheit der eigenen Finger, auch Seitenbetreiber können ihren Anteil am Problem tragen.

    Garlic.js und Sisyphus.js, zwei recht junge Plugins für jQuery schaffen Abhilfe. Dabei ist Sisyphus das etwas ältere und ausgereiftere Projekt. Garlic.js macht in den letzten Tagen von sich reden, da es eben erst aus der Taufe gehoben wurde und Lösungen für das Formularproblem stets gern genommen werden.

    Beide Plugins arbeiten im Prinzip gleich. Beide verlangen nach einem modernen Browser, da sie LocalStorage, die lokale Speichervariante aus HTML5 einsetzen. Fallbacks und Ports für ältere Browser, etwa Shims für IE 6/7 bieten beide nicht, wären aber für Leute mit JavaScript in den Fingern recht leicht nachträglich einzubauen. In den Links zum Beitrag findet sich ein entsprechender Ansatz.

    Die beiden Plugins funktionieren in der Grundkonfiguration mit einfachen Anweisungen. Nachdem das jeweilige Script nebst jQuery im Head der Seite eingebunden ist, reicht folgende Vorgehensweise:

    Garlic.js:

    Das Data-Attribut ist jedem Formular beizufügen, das von Garlic geschützt werden soll. Sind mehrere auf der gleichen Seite, ist jedes einzeln damit auszustatten.

    Sisyphus.js arbeitet nicht mit einem Data-Attribut, sondern mit einem Function Call:

    $('#form1, #form2').sisyphus();

    Sie sehen, Sie können innerhalb des Calls mehrere Formulare spezifizieren. Um alle Formulare einer Seite zu schützen, reicht der kürzere Aufruf:

    $('form').sisyphus();

    Für Sisyphus stehen weitere Optionen zur individuellen Konfiguration zur Verfügung. Diese dienen dazu, weitere Funktionen in Abhängigkeit zu den diversen Formularzuständen ausführen zu lassen. Hier zeigt Sisyphus seinen größeren Leistungsumfang.

    Dennoch sollte man nicht vorschnell Sisyphus den Vorzug geben. Erstens verspricht Garlic-Entwickler Guillaume Potier einen schnellen Funktionszuwachs, zweitens ist die Verwendung von Data-Attributen zur Steuerung der Funktionalität eine Vorgehensweise, die manchem eher liegen wird. Ich jedenfalls kann mich damit anfreunden.

    Wird das Formular ordnungsgemäß versendet oder willentlich zurückgesetzt, werden die zuvor gesicherten Daten aus dem LocalStorage gelöscht. Eine Speicherung der Werte fand während meiner Tests übrigens immer nur dann statt, wenn ich das jeweilige Feld mit dem Tabulator verlassen habe. Klickte ich mich mit der Maus durch das Formular, blieb der LocalStorage leer. Aber, Verbesserungspotenziale muss es geben. Wer will schon Perfektion vom Start weg?

    Links zum Beitrag:

    • Dokumentation zu Garlic.Js – Garlicjs.org
    • Demo und Doku zu Sisyphus.Js – Github
    • Simultan-Übersetzer von localStorage zu UserData (IE-proprietär) – Github
    Kategorien
    JavaScript & jQuery Programmierung

    UICloud: Neuer Dienst für Designer und Webentwickler bietet mehr als 25.000 Elemente für die UI-Entwicklung

    UICloud ist ein ganz frisches Projekt. Erst im Juli 2012 gestartet, kann es bereits zum jetzigen Zeitpunkt mehr als 25.000 UI-Elemente in mehr als 1.000 Sets vorweisen. Der gesamte Bestand ist kostenlos nutzbar, auf individuelle Lizenzvorgaben ist aber zu achten. Hinter dem Dienst steckt Jack Cai, ein Freelancer, spezialisiert auf Icon- und GUI-Design, der zwar chinesische Wurzeln hat, sich aber dennoch in Southampton ganz wohl zu fühlen scheint. Mit UICloud legt Cai sein Meisterstück vor. Die Plattform ist einfach zu bedienen, intuitiv ist das richtige Wort. Auf UICloud zu stöbern macht regelrecht Spaß. Das Design ist modern und elegant, ie Inhalte übersichtlich angelegt. Genug Gründe also, sich die Plattform einmal näher anzusehen.

    UICloud: Die Startseite kommt spontan bekannt vor

    Mit einiger Wahrscheinlichkeit wird die Startseite die erste Seite sein, die Sie von UICloud zu sehen bekommen. Mein erster Gedanke war, ich wäre auf einem eben frisch relaunchten Google gelandet. Die Ähnlichkeiten sind offensichtlich: eine große Suchbox in der Mitte, eine dunkle Navigationsleiste am oberen Rand des Browserfensters, eine Schaltfläche mit der Aufschrift „Search“. Aber, warum auch nicht? Usability muss man nicht täglich neu erfinden. Das minimalistische Design, das für Google funktioniert, funktioniert ebenso gut für UICloud.

    UIClouds Startseite

    Ausgehend von der Startseite gibt es verschiedene Wege, sich dem enthaltenen Content zu nähern. Zunächst könnte man einen freien Suchbegriff verwenden, um zu schauen, welche Ergebnisse diese Vorgehensweise zu Tage fördert. Vorausgesetzt, es wird ein Ergebnis generiert, wäre das selbstverständlich der schnellste Weg zum Erfolg. Ich versuchte es mit dem Begriff „Metro“ und war durchaus zufrieden mit der Rückmeldung. Sowohl Metro UI CSS, wie auch das neue BootMetro Design-Framework ermittelte UICloud. Übrigens nutzte ich absichtlich ein eher spezielles Suchwort, um zu schauen, wie breit UICloud aufgestellt ist. Tippen Sie etwas generisches, wie „progress bar“, werden Sie sich vor Ergebnissen kaum retten können.

    UICloud: So kann ein Suchergebnis aussehen

    Verlässt man die Startseite, wandert die Suchbox an den oberen Bildschirmrand, wo sie in etwas kompakterer Ausführung von überall her verwendbar bleibt.

    UICloud: Andere Wege, relevanten Content zu erreichen

    Wenn Sie her zum Stöbern und weniger zum gezielten Suchen neigen, werden Sie von UICloud ebenso bedient. Die Funktion „Browse“ lädt Sie ein, den gesamten Bestand zu durchstöbern. Alle enthaltenen Sets werden in einer grafischen Liste mit lediglich den wichtigsten Informationen dargestellt. Jeweils 24 Inhaltselemente finden sich auf einer Matrix von 6 x 4 Screenshots. Inhalte lassen sich nach verschiedenen Kriterien sortieren. So ist es möglich, die neuesten Einreichungen, die bestbewerteten Pakete oder die populärsten nach Downloadzahlen anzeigen zu lassen. 45 Seiten mit rund 1.100 Sets gewährleisten, dass Sie schnell jede Menge Zeit verbrennen.

    UICloud: Browsen durch die neuesten und populärsten Inhalte

    Sie haben keine Zeit zu verleren oder suchen nach bestimmten Elementen, etwa Android UI-Elementen? Dann werden Sie wohl auf UIClouds Kategorieansicht zurück greifen. Diese Ansicht zeigt die Inhalte in strukturierter Form. Kategorien, wie Android, Apple, Windows, PSD und andere leiten Sie nicht in die Irre. Über die Wahl der vergebenen Kategorien könnte man streiten. Nicht alle sind offensichtlich sinnvoll.

    UICloud: die Kategorieansicht

    Unzweifelhaft nützlich ist die zweite Möglichkeit der Kategorie-Navigation. Hier sortiert UICloud Elemente nach ihren Anwendungsbereichen. Die Kategorien lauten Buttons, Forms, Sliders, Switches etc. und lassen wohl keinen Nutzer rätselnd zurück. Eine dritte Möglichkeit erlaubt die Suche nach Farb-Schemata. Das ist nützlich, wenn Ihnen noch das eine letzte Element in einer bestimmten Farbe fehlt.

    Auf der Suche nach einer bestimmten Farbe?

    UIClouds Einzelansicht: Alle wichtigen Fakten im Überblick

    Egal auf welchem Weg man sich dem Gesuchten nähert, am Ende steht eine sehr informative, übersichtlich strukturierte Einzelansicht des UI-Sets.

    UIClouds Einzelansicht bietet alle wesentlichen Informationen auf einen Blick

    Die Einzelansicht zeigt einen oder mehrere große Screenshots des Elements oder Sets auf der linken Seite des Bildschirms. Bei mehreren Screenshots werden diese unterhalb des initial angezeigten Bildschirmfotos in Form einer Thumbnail-Galerie dargestellt. Rechts angeordnet finden sich die wichtigsten Informationen zum Produkt, darunter vor allem die zu beachtende Lizenz, sowie in welchen Formaten die Sets vorliegen und welche Dateien im Downloadpaket mitgeliefert werden.

    Stellen Sie sicher, dass Sie in jedem Falle genau auf die Lizenz achten. Zwar sind alle gelisteten Elemente kostenfrei zu verwenden, allerdings kann es vorkommen, dass sie nicht zu jedem Zweck frei zu verwenden sind. Unser Beispielelement Metro UI CSS steht unter der lberalen MIT-Lizenz, aber andere Sets können teilweise nur für private oder nicht-kommerzielle Zwecke kostenlos verwendet werden.

    Das allseits bekannte und bewährte Rating-System auf der Basis zu vergebender Sterne kommt für das Bewertungssystem zum Einsatz, das von den Besuchern des Dienstes ohne Registrierung benutzt werden kann. Die Anzahl der Downloads wird neben der Anzahl der Besucher des jeweiligen Sets angezeigt. Eine Vergabe von Tags ist ebenfalls vorgesehen und kann ebenfalls frei von jedem Besucher vorgenommen werden. In Anbetracht der Lustigkeit verschiedener Mitmenschen wird man sehen, inwieweit Jack Cai dieses Feature auf Dauer halten will.

    Links zum Download, zu den Demos und zur Originalquelle des Sets finden sich unterhalb des Screenshot-Bereichs. Alle Ressourcen sind auf UICloud selber gehostet. Auf diese Weise ist das Angebot gut vor 404 und anderen Späßchen, die einem mit extern eingelinkten Inhalten widerfahren können, geschützt. Sollten Sie Zweifel an der Aktualität der hinterlegten Version haben, können Sie natürlich jederzeit auf der Originalquelle nachsehen.

    Wie aus dem Blog-Umfeld bekannt, ist es auch auf UICloud möglich, Kommentare zu den angebotenen Elementen und Sets zu hinterlassen. Momentan ist der ommentarbestand insgesamt noch überschaubar. Aber Sie können natürlich jederzeit in die Vollen gehen und den nächsten Flamewar vom Zaun brechen.

    UICloud: Jeder kann Sets einreichen

    Das schnelle Wachstum der UICloud könnte allein durch die Arbeit einer einzelnen Person nicht erreicht werden. So ist es naheliegend, das Wachstum im Wege des Crowdsourcing zu generieren. Jeder Besucher kann UI-Sets über ein einfaches Formular zur Überprüfung einreichen. Alle Vorschläge durchlaufen einen redaktionellen Prozess, in dessen Verlauf sie geprüft, auf Eignung evaluiert und dann veröffentlicht werden. Da die Einreichung nicht über direkte Uploads, sondern das Posten des Links zur Originalquelle erfolgen muss, sind Urheberrechtsverletzung relativ unwahrscheinlich. Zumindest würden derartige Verletzungen mit hoher Wahrscheinlichkeit im Rahmen der redaktionellen Prüfung auffallen. UICloud wendet sich direkt an die Entwickler der Elemente und ruft sie dazu auf, etwaige Fehler in der Präsentation zu reklamieren oder auch die Entfernung der Sets aus der Plattform zu verlangen, wo sie das für erforderlich erachten.

    Natürlich gibt es auch das obligatorische Kontaktformular für Menschen, die typischerweise solche Formulare verwenden…

    UICloud: Button Builder – WYSIWYG-Generator für CSS-Buttons

    UICloud begnügt sich nicht damit, eine großartige Ressource für das Finden von User Interface Elementen zu sein. Stattdessen bringt einen Baukasten für CSS-Buttons mit, den Button Builder. Hier kann man sich seinen Wunschbutton über eine intuitive grafische Benutzeroberfläche basteln. Es gibt etliche Standard-Vorschläge. Diese können jedoch in vollem Umfang auf die eigenen Bedürfnisse angepasst werden.

    Der Button Builder wird Ihnen auf den ersten Blick vertraut vorkommen und stellt insichtlich seiner Bedienung niemanden vor Rätsel:

    UIClouds Button Builder

    Auf einem Canvas sehen Sie den Button in seiner vorkonfigurierten Darstellung. Wenn Sie jetzt Änderungen durchführen, werden diese unmittelbar auf dem Canvas angezeigt. Unterhalb des Canvas finden sich weitere vorkonfigurierte Button-Vorschläge. Oberhalb des Canvas befinden sich die Schaltflächen, mit deren Hilfe das korrespondierende HTML und CSS generiert wird. Die unscheinbar wirkende, rechts angeordnete Tabelle ist das eigentliche Herzstück des Button Builders. Hier liegt die Funktionalität zum Finetuning der zu erstellenden Buttons. Auf den ersten Blick mag man vermuten, es handele sich um eine statische Tabelle, die lediglich die Werte des angezeigten Buttons listet. Aber klicken Sie mal in die tabelle inein, jeder Wert kann auf einfache Weise angepasst werden.

    UICloud: Feineinstellung für die CSS Buttons

    Zwar können wir nicht wirklich eine Knappheit an Generatoren für CSS-Output im Web erkennen, ähnlich ausgerichtete Tools gibt es wie Bäume im Wald, aber UIClouds Button Builder hebt sich von der Masse ab und ist eine sehr intuitiv bedienbare Web App. Zumindest ist es die beste App für diesen Anwendungsfall, mit der ich bis jetzt gearbeitet habe.

    UICloud: das generierte CSS

    Jack Cai erzählte mir, dass der Button Builder nur der Anfang einer ganzen Serie von kleinen Generatoren sein wird. In naher Zukunft soll es auf UICloud möglich sein, auch Tabs, Menus, Fortschrittsbalken und einiges mehr generieren zu lassen.

    Social Media: UICloud informiert auf mehreren Wegen über Neuzugänge im Bestand

    Wollen Sie auf dem Laufenden bleiben, was sich bei UICloud so alles tut, so stehen Ihnen zu diesem Zweck mehrere Möglichkeiten zur Verfügung. Da wären erst einmal Twitter oder Facebook. Aber auch ein RSS-Feed, sowie eine Mailing-Liste – old-school par excellence – stehen zur Verfügung.

    Welchen Weg Sie auch wählen, wählen Sie einen!

    Links zum Beitrag:

    Kategorien
    Design HTML/CSS JavaScript & jQuery Programmierung

    Makisu – Sushi-inspiriertes CSS 3D Navigations-Konzept mit jQuery

    In den vergangenenen Monaten sind immer wieder mal CSS-Experimente in den Umlauf gebracht worden. Mir persönlich gefiel bis zum heutigen Tage stets Paperfold CSS am besten, aber auch Meny und andere, eher spielerische Ansätze stellten wir unseren Lesern vor. Makisu, ein ganz frisches Konzept für eine Dropdown-Navigation mit 3D Transforms, hat in meiner Gunst nun Paperfold CSS abgelöst; selten sowas schickes gesehen.

    Makisu – die virtuelle Bambusmatte

    Justin Windle aka soulwire aus dem Vereinigten Königreich legt mit Makisu ein Konzept für eine dreidimensionale Dropdown-Navigation vor, die Paperfold CSS ähnelt, aber darüber hinaus geht und auch optisch ausgereifter wirkt. Der merkwürdige Name entstammt dem Japanischen. Als Makisu werden Bambusmatten bezeichnet, mit deren Hilfe spezielle Sushi-Sorten hergestellt werden. Makisus können aber auch simpel zum Auspressen überschüssiger Feuchtigkeit aus etwa Früchten verwendet werden.

    Justin Windles Makisu ist zwar weder für die Herstellung von Sushi, noch für das Auspressen von Früchten geeignet, zeigt aber optisch deutlich, warum der Name dennoch gerechtfertigt ist. Die Navigations-Dropdowns enthalten pro Zeile ein Item, das ein- und ausgerollt werden kann, wobei die Animation beim Entrollen nach hinten überschwingt und so tatsächlich einer nach unten ausrollenden Bambusmatte ähnlich sieht.


    Screenshot während der laufenden Animation

    Makisu ist als CSS-Konzept angelegt und verwendet CSS 3D Transforms, weshalb es derzeit nur in den aktuellen Versionen Chromes, des Firefox, Safaris, iOS und Android, sowie Blackberry, jeweils in deren Standardbrowsern, funktioniert. Auch der aktuelle Internet Explorer 10 soll Makisu darstellen können. Auf einem frischen Ultrabook, das ich derzeit teste, probierte ich es aus. Das Ergebnis ist durchwachsen. Das Ein-und Ausklappen der virtuellen Bambusmatte funktioniert zwar, aber der Nachschwingeffekt ist komplett abwesend. Zudem wirkt die ganze Animation schwerfällig. Der Internet Explorer bleibt sich also auch in seiner neuesten Inkarnation treu. Schön, wenn auf etwas Verlass ist.

    Um Makisu einfacher einsetzbar zu gestalten, verpackte Windle die Funktionalität in ein jQuery-Plugin. In der Tat ist es auf diese Weise sehr simpel zu implementieren. Nachdem jQuery und das Plugin im Head des HTML-Dokumentes aufgerufen wurden, ist lediglich noch der Function-Call erforderlich. Dieser sieht in einer einfachen Variante so aus:

    $( '.list' ).makisu({
        selector: 'li',
        overlap: 0.2,
        speed: 0.8
    });

    Die wichtigste Angabe stellt die Wahl des Selektors dar. In der Regel wird man hier das auch ansonsten zu Navigationszwecken etablierte Li-Element wählen. Die anderen Optionen befassen sich mit Geschwindigkeit und Überlappung. 3D-Effekte werden über die perspektivische Verzerrung mittels perspective und über Vertex Shading mit shading erzielt.

    Makisu steht auf Github zum Download und zur kostenfreien Verwendung bereit. Es ist erst seit wenigen Tagen erhältlich und stellt ein Konzept dar. Vor dem Produktiveinsatz muss daher gewarnt werden. Aber schick aussehen tut es allemal…

    Links zum Beitrag: