Kategorien
JavaScript & jQuery Programmierung Webdesign

Framework jQuery: die Vorteile und Nachteile

Frameworks wie jQuery gehören zu den bekanntesten und weit verbreitetsten Helfer, die auf Websites eingesetzt werden. Das Framework ermöglicht es, schnell und unkompliziert auf HTML-Elemente zuzugreifen und diese zu manipulieren oder per CSS zu gestalten. Ich selbst bin kein großer Freund von solchen Frameworks und versuche, sie – wo immer es geht – zu vermeiden. Das funktioniert nicht immer, ist aber häufig problemlos machbar.

jQuery und Co. und der große Ballast

Gerade jQuery hat sich in den letzten Jahren zu einer Art Schweizer Taschenmesser für JavaScript entwickelt. Das Frameworks bietet unzählige Methoden, Eigenschaften und Ereignisse, von denen die Meisten wohl nur ein Bruchteil benötigen.

Auch wenn jQuery in der aktuellen komprimierten Fassung auf gerade einmal 85 Kilobyte kommt, bliebe ein Großteil des Frameworks in meinen Projekten ungenutzt. Man kann es kleinlich nennen, dass mir 85 Kilobyte solch Kopfzerbrechen bereiten. Aber als Webentwickler ist mir ein schlanker Code, der nur das beinhaltet, was auch tatsächlich gebraucht wird, wichtig.

Jetzt ist jQuery mittlerweile zu einer Art Standard in der Webentwicklung geworden. Daher sind viele andere Frameworks mittlerweile als Plugins für jQuery entwickelt. Will ich diese nutzen, muss ich auch jQuery nutzen. Hier zeigt sich im besonderen Maße, was solche Frameworks für Nachteile mit sich bringen.

Denn letztlich benötige ich jQuery dann nur, um das Plugin nutzen zu können. Da sind mir 85 Kilobyte dann in der Tat zu viel.

Doppelt gemoppelt: Was jQuery kann, kann JavaScript oft auch

Mit der Einführung von HTML5 hat auch JavaScript einen großen Sprung gemacht. Viele Funktionen, die bislang nur per jQuery möglich waren, sind nun auch ebenso einfach als native JavaScript-Methoden vorhanden.

Das gilt zum Beispiel für das Hinzufügen und Entfernen von JavaScript-Klassen. Mit der „classList“-API kannst du dies ähnlich wie in jQuery realisieren.

Eine der wichtigsten Funktionen in jQuery ist die Möglichkeit, per „$()“ auf beliebige Elemente zuzugreifen – und zwar in Anlehnung an CSS-Selektoren. Selbst dieses Alleinstellungsmerkmal von jQuery ist mittlerweile mit der Methode „querySelector()“ in JavaScript aufgegriffen worden.

document.querySelector("ol li").classList.add("new");

Im Beispiel wird allen „<li>“-Elementen, die Kinder eines „<ol>“-Elementes sind, die Klasse „new“ zugewiesen. In jQuery ist ein entsprechender Aufruf kaum kürzer – vor allem aber nicht weniger kompliziert.

$("ol li").addClass("new");

In vielen Fällen benötige ich jQuery also gar nicht, sondern kann mit JavaScript auf ähnlich einfachem Wege arbeiten.

Performance vs. Einfachheit

jQuery und seine weniger bekannten Freunde machen es einem in vielen Fällen sehr viel einfacher, mit JavaScript zu arbeiten. Aber nicht immer ist der einfach Weg auch der Beste – gerade wenn es um die Performance geht.

Denn sowohl die jQuery-Methode „$()“ als auch die JavaScript-Methode „querySelector()“ schneiden in Sachen Performance schlechter ab als die Methoden „getElementsByTagName()“ oder „getElementsByID()“. Denn bei „$()“ und „querySelector()“ wird zunächst der komplette DOM-Baum eines Dokumentes nach entsprechenden zutreffenden Elementen durchsucht.

Die beiden Methoden „getElementsByTagName()“ oder „getElementsByID()“ kommen deutlich schneller ans Ziel. Natürlich sind die letztgenannten Methoden für Entwickler zuweilen mit mehr Aufwand verbunden. Auch hier mag der geringe Unterschied bei der Performance vernachlässigbar sein. Man sollte sich dessen jedoch bewusst sein.

Vorteil: einheitliche Browser-Kompatibilität

Jetzt will ich natürlich auch nicht so tun, als sei jQuery durch und durch überflüssig. Denn es hat ja seinen Grund, warum es immer noch sehr erfolgreich und beliebt ist. Ein Vorteil ist natürlich die einfache Anwendung.

Darüber hinaus haben solche Frameworks natürlich den Vorteil, dass sie eine breite Browser-Kompatibilität mit sich bringen. Während ich bei nativen Methoden immer schauen muss, welcher Browser ab welcher Version sie unterstützt, macht jQuery mir das einfacher.

Denn für jede jQuery-Version weiß ich, welche Browser und Versionen unterstützt werden. Gerade wer für ältere Versionen des Internet Explorers entwickelt, hat mit jQuery in der aktuellen Version die Sicherheit, dass dieser ab Version 9 unterstützt wird.

Und wer ältere Browser noch unterstützen möchte, kann auf ältere Versionen von jQuery zurückgreifen. Das erleichtert die Entwicklung von Websites, da man schon im Vorfeld weiß, welche Browser denn mit an Bord sind.

Frameworks fürs Spezielle

Jetzt bin ich also jemand, der – wenn immer es möglich und sinnvoll ist – auf Frameworks verzichtet. Möglich ist es eigentlich immer. Denn grundsätzlich kann man ja alles selbst in JavaScript programmieren. Nur sinnvoll ist es natürlich nicht immer.

Es gibt natürlich Situationen, in denen der Aufwand, eine komplexe JavaScript-Programmierung selbst zu entwickeln, in keiner Relation zum Ergebnis steht. Wer mit JavaScript zum Beispiel 3D-Animationen erstellen möchte, kann sich natürlich selbst sein eigenes 3D-Framework bauen.

Hier ist es hingegen mehr als sinnvoll, auf ein stabiles und möglichst leichtes Framework zurückzugreifen. In solchen Fällen ist es mir aber immer wichtig, dass dieses Framework nicht auf andere Frameworks wie jQuery aufbaut, sondern unabhängig verwendet werden kann.

Fazit

Natürlich ist die Frage, ob man auf Frameworks setzt oder nicht, durchaus eine ideologische. Denn der Gewinn an Schnelligkeit ist in vielen Fällen marginal. Aber man sollte als Entwickler nicht aus bloßer Bequemlichkeit auf jQuery und Co. zurückgreifen.

Denn natives JavaScript kann häufig all das, was jQuery kann, selbst auch abdecken. Gerade wer für zeitgemäße Browser entwickelt und die Abwärtskompatibilität eh in Grenzen hält, kommt gut ohne dieses Framework aus.

Kategorien
Design HTML/CSS

Killer-Websites: Die 10 besten Erweiterungen für Twitters Bootstrap

Bootstrap ist der Star am Himmel der Frameworks und erhält ungebrochen viel Aufmerksamkeit. Nicht einmal der Hersteller, Twitter, wird zur Geburtsstunde im August 2011 geahnt haben, wie groß das Projekt noch werden würde. Selbst heute, im Juli 2013, ist Bootstrap immer noch das beliebteste Projekt auf Github und vereinigt über 52k Stars und über 16k Forks auf sich. Bootstrap ist in sich schon beeindruckend genug. Kaum war es je einfacher, komplexe Webseiten zu erstellen. Wie sollte man solch ein System noch verbessern? Gibt es Werkzeuge, die Bootstrap noch besser machen? Ja, die gibt es in der Tat und im folgenden Beitrag zeige ich Ihnen die nach meiner Meinung 10 besten ihrer Art.

1. Jetstrap

image002_0000-w550

DER Twitter Bootstrap Builder: Das ist nicht nur ein Mock-Up Tool, Jetstrap ist das Tool der Wahl zur Erstellung von Bootstrap-Interfaces.

Glauben Sie mir, das ist wirklich keine Übertreibung. Wenn Sie etwas Unterstützung bei der Erstellung von Bootstrap-Oberflächen benötigen, oder es sich einfach einfacher machen wollen, dann ist Jetstrap genau das Tool, das Sie verwenden werden.

Jetstrap erklärt selbst warum: “Das Leben ist zu kurz, um sich durch Dokumentationen zu wühlen, wenn man einfach nur Websites bauen will. Schnappen Sie sich Schnipsel sauberen Codes und bringen so simpel auch komplexe Komponenten an den Start. Kommen Sie einfach schneller in die Gänge!” Und genau so ist es auch. Da es so einfach zu verwenden ist, ist es perfekt sowohl für Designer, wie auch Entwickler geeignet. Das Konzept ähnelt dem des Mitbewerbers Divshot. Gelangen Sie per Drag and Drop zu genau dem Ergebnis, das Sie benötigen.

Wie es funktioniert: Das simple Drag-and-Drop-Interface erlaubt es, eine Seite schnell mit Bootstrap-Elementen zu bevölkern. Haben Sie die Seite zusammengeschoben, exportieren Sie den Code und … gehen in die Stadt oder an den See oder ins Kino…
Preismodell: Kommerziell, beginnt bei 16 USD monatlich.
Video: http://youtu.be/AuTo_6id3J8
Website: http://www.jetstrap.com

2. Kickstrap

image004_0000-w550

Ein kompletter Werkzeugkasten für Website-Design: Als erstes seiner Art ist Kickstrap ein installationsloses Frontend-Framework mit Apps, Themes und anderen Extras.

Auf den ersten Blick ähnelt Kickstrap dem eben genannten Jetstrap, ist dabei aber durchaus deutlich anders. Es zielt nämlich primär darauf ab, Bootstrap zu erweitern. So fügt es Bootstrap etwa JavaScript-Bibliotheken wie Raphael.js (Demo mit Kickstrap), Extras wie Font Awesome und sogar Themes aus Bootswatch hinzu.

Wie es funktioniert: Denken Sie sich Kickstrap wie eine Mehrfachsteckdose für eine typische Bootstrap-Seite. Men steckt verschiedene Komponen hinein und alle funktionieren gleichzeitig.
Preismodell: frei verwendbar (Stand: Juli 2013)
Video: http://vimeo.com/55423707#at=0
Website: http://getkickstrap.com/

3. Paintstrap

image006_0000-w550

Paintstrap generiert sehenswerte Twitter Bootstrap-Themes aus Adobe Kuler- / COLOURlovers-Paletten

Dieses Tool ist zu Unrecht zu unbekannt, hat aber großes Potenzial. Warum? Nun, Bootstrap kommt zwar mit Farben daher, nur wie oft passen diese wirklich zum gewünschten Farbsetting? Ich sage es Ihnen: Im Grunde nie. Typischerweise legt der Kunde etwas zielgebendes vor, und wenn es nur das Logo ist. Vielfach bestehen aber auch bereits zum CI gehörige Farbpaletten, an denen man nicht vorbei kommt.

Paintstrap arbeitet nun nicht nur mit diesen Vorgaben, sondern integriert COLOURlovers und Adobe Kuler in den Prozess, um die Paletten CI-gerecht zu erweitern. Das produziert im Regelfall großartige Ergebnisse.

Wie es funktioniert: Übergeben Sie die Kuler Theme-ID oder COLOURlovers Paletten-ID, dann wählen Sie die gewünschten Farben für die verschiedenen Elementen anhand einer Live-Preview. Haben Sie alles beisammen, exportieren Sie nach CSS oder LESS.
Preismodell: frei verwendbar (Stand: Juli 2013)
Website: http://paintstrap.com/

4. Divshot

image008-w550

Ein weiterer Interface-Builder für Web-Apps: Drag-And-Drop, exportiert responsives HTML & CSS, befindet sich noch in Beta.

Divshot ist ein direkter Wettbewerber zu Jetstrap. Die Ziele und Funktionalität sind sehr ähnlich. Auch in Divstrap zieht und schiebt man sich seine App zusammen und erhält am Ende den entsprechenden Code. Der wesentliche Unterschied besteht darin, dass Divstrap von sich selbst behauptet, den saubersten Code zu produzieren und die beste Bootswatch-Integration zu bieten. Der wesentlichste Unterschied indes ist der Preis. Divstrap kostet nämlich nichts.

Wie es funktioniert: Lesen Sie weiter oben unter Jetstrap nach ;-)
Preismodell: frei verwendbar (Stand: Juli 2013). Ich erwarte allerdings ein kommerzielles Angebot, sobald die Beta-Phase beendet ist.
Video: http://youtu.be/g9KhSUgf38A
Website: http://www.divshot.com/

5. Fancyboot

image010-w550

Fancyboot: Bootstrap anpassen leicht gemacht. Dieses Tool ist für echte Bootstrap-Liebhaber gedacht.

Wenn Sie gern an Ihren Bootstrap-Dateien feilen und dabei eine permanente Live-Preview zu schätzen wissen, dann ist Fancyboot auf jeden Fall einen näheren Blick wert. Es gibt neben Echtzeit-Previews noch Farbwähler und weitere Variablen. Fancyboot ist gut geeignet, um schnell Veränderungen an einer bestehenden Bootstrap-Seite vorzunehmen.

Wie es funktioniert: Wählen Sie die Plugins und Komponenten, die Sie in das Projekt nehmen wollen. Dann wählen Sie über das seitlich angeordnete Menü die Farbpalette. Sie erhalten direkt eine Echtzeit-Preview, die es Ihnen ermöglicht, unmittelbar ins Finetuning einzusteigen.
Preismodell: frei verwendbar (Stand: Juli 2013)
Website: http://fancyboot.designspebam.com/

6. Bootswatch

image012-w550

Bootswatch:
Freie Themes für Twitter Bootstrap

Wenn Sie bis hierhin gelesen haben, dann ist Ihnen Bootswatch schon ein paar Mal begegnet. Das liegt daran, dass es sich so gut in andere Bootstrap-Anwendungen integriert. Bootswatch hat einen sehr einfachen Anwendungszweck. Es liefert kostenlose Themes für Bootstrap. Alle sind vorgefertigt bis zu dem Punkt, an dem Sie gar nichts mehr tun müssen…

Wie es funktioniert: Laden Sie das CSS herunter und verwenden Sie es.
Preismodell: frei verwendbar (Stand: Juli 2013)
Website: http://bootswatch.com/

7. Bootsnipp

image014-w550

Bootsnipp: Design-Elemente und Code-Snippets für Bootstrap

Bootstrap macht die Verwendung von Elementen in Seiten schon ziemlich einfach. Manchmal würde man aber gern mehrere wiederkehrende Elemente auf ein und derselben Seite einsetzen. Hier kam bislang der Entwickler ins Spiel. Mit Bootsnipp kann jeder Designer diese Dinge selbst erledigen. Bootsnipp erlaubt es, nützliche Schnipsel von Bootstrap-Code einfach in die Seite einzukopieren. Beispielschnipsel beinhalten Preisübersichten, Adress- und Bezahlformulare, Anmeldefeatures und vieles mehr.

Wie es funktioniert: Klicken Sie auf den gewünschten Schnipsel und wählen Sie den Quellcode aus. Kopieren Sie ihn in Ihre Site, fertig.
Preismodell: frei verwendbar (Stand: Juli 2013), um ein kleines Trinkgeld wird gebeten
Website: http://bootsnipp.com/

8. Form Helpers

image016-w550

Bootstrap Form Helpers: erweitert Bootstraps Komponenten um 12 jQuery-Plugins.

Wenn Ihnen Bootstrap im Auslieferungszustand nicht genug Funktionalität bietet, dann wenden Sie sich vertrauensvoll an die Bootstrap Form Helpers. Auch hier fügen Sie sehr einfach Codeschnipsel in Ihre Projekte ein und erhalten dadurch so schicke Features wie Länderlisten, die sich automatisch befüllen, Select-Boxen mit Filtern oder automatisch formatierte Telefonnummern und vieles mehr.

Wie es funktioniert: Der Einsatz besteht im Wesentlichen daraus, das Tool herunter und wieder herauf zu laden. Wollen Sie Gebrauch von weiteren Parametern machen, die Website bietet ausführliche Anleitungen.
Preismodell: frei verwendbar (Stand: Juli 2013)
Website: http://vincentlamanna.com/BootstrapFormHelpers/

9. Bootstrap Lightbox

image018-w550

Bootstrap Lightbox: ein simples Lightbox-Plugin, basierend auf Bootstraps Modal-Plugin.

Dieses hier ist einfach, aber dennoch wertvoll. Es bläst nämlich die vorhandene Lightbox-Funktionalität auf der Basis des Modal-Plugins zu etwas deutlich sehenswerterem auf. Probieren Sie es selbst. Sie werden mir zustimmen.

Wie es funktioniert: Der Einsatz besteht im Wesentlichen daraus, das Tool herunter und wieder herauf zu laden. Wollen Sie Gebrauch von weiteren Parametern machen, die Website bietet ausführliche Anleitungen.
Preismodell: frei verwendbar (Stand: Juli 2013)
Website: http://jbutz.github.io/bootstrap-lightbox/

10. Built with Bootstrap

image020-w550

Ein Showcase von Sites und Apps, die mit Twitter Bootstrap erstellt wurden

Unsere letzte Vorstellung zeigt Ihnen, wie echte, hochglanzpolierte Bootstrap-Seiten aussehen können. Built with Bootstrap ist im Grunde eine Galerie von Websites, die in der ein oder anderen Weise Gebrauch von Bootstrap machen. Ich finde die Beispiele ausgesprochen gelungen und verwende die Site stets zu Inspirationszwecken. Schon mehr als einmal habe ich mir dort neue Ideen geholt.

Wie es funktioniert: Schauen Sie selbst auf http://builtwithbootstrap.com/
Preismodell: frei verwendbar (Stand: Juli 2013), aber voller Werbung
Website: http://builtwithbootstrap.com/

Ich hoffe, diese 10 Bootstrap-Ressourcen gefallen Ihnen so sehr wie mir. Kennen Sie weitere, die ich unbedingt auch kennen sollte? Lassen Sie es mich wissen, hier unten, in den Kommentaren.

Der Autor:

Ryan Boog ist Eigentümer von Happy Dog Web Productions, einer Firma, die sich die Entwicklung von mobilen und Web-Apps, sowie die Unterstützung in Sachen SEO auf die Fahnen geschrieben hat. Wollen Sie mehr von HDWP lesen, dann folgen Sie dem Unternehmen auf Twitter oder Facebook.

(dpe)

Kategorien
Design HTML/CSS

Typeplate: Starterkit sorgt für ordentliche Typografie – unabhängig vom Website-Design

Typografie im Webdesign ist so eine Sache. Ist man sich möglicherweise noch schnell einig, dass ordentliches Schriftbild begrüßenswert ist, so scheitert es dann doch zumeist in der konkreten Umsetzung. Schön designte Websites mit weniger schöner Typografie sind entsprechend eher die Regel, denn die Ausnahme. Das selbsternannte Starterkit Typeplate tritt an, das zu ändern.

typeplate-homepage

Typeplate: Sass, LESS, Stylus, CSS

Typeplate steht in verschiedenen Geschmacksrichtungen, die unterschiedlich schnell Updates erfahren, zur Verfügung. Ursprünglich gestartet als Sass-Projekt, kann das Starterkit mittlerweile zusätzlich als LESS- und als Stylus-Variante verwendet werden. Natürlich ist auch eine statische CSS-Version verfügbar. Mit Blick auf das reine CSS empfehlen die Entwickler nicht die Einbindung des Stylesheets als Datei, sondern die Übernahme der einzelnen Definitionen in das Stylesheet der betreffenden Site. Das Projekt liegt ganz aktuell in Version 1.0.1 vor.

Typeplate mit zeitloser Gestaltungsphilosophie

Typeplate setzt eine klare Philosophie um. Heraus kommt eine sehr klassische Umsetzung eines Schriftdesign, das zweifellos elegant, wenn auch nicht unbedingt modern daher kommt. Immerhin kann jeder das Starterkit als Grundlage für eigene Modifikationen nehmen und entsprechend nach Wunsch modernisieren.

typeplate-feature

Überschriften, Einzüge, Umbrüche, Silbentrennung, Kapitälchen und Anfangsbuchstaben, die über mehrere Zeilen gehen. Um all diese Themen kümmert sich Typeplate. Dazu kommt die Behandlung von Zitaten, Codeblöcken, Definitionen, Fußnoten und einfachen Tabellen, sowie die Darstellung kleiner Texte.

Typeplate befindet sich extrem reger Entwicklung. Während ich den Artikel schreibe, finden laufend Änderungen am Repo statt. Das Projekt steht auf Github zum kostenlosen Download bereit. Nutzer von Bower finden eine besonders einfache Installationsmethode.

Neben dem unmittelbaren Nutzen, der sich aus der vorgesehenen Nutzung von Typeplate ergibt, gefällt mir persönlich der Fortbildungsaspekt fast noch besser. An dem Projekt lässt sich anhand von überschaubar nachvollziehbaren Ergebnissen der Umgang mit Sass in direktem Vergleich zu LESS und Stylus erlernen. Wer die ersten Gehversuche mit den Präprozessoren gewagt hat, findet in Typeplate eine sehr übersichtliche Möglichkeit, den nächsten Schritt zu gehen.

Links zum Beitrag:

Kategorien
Design HTML/CSS

The Heads-Up Grid und SpryMedia Grid – Gitternetzoverlays für das Webdesign im Browser

Es ist ja schön und gut, dass gängige Grid-Frameworks, wie etwa das 960.gs, die Definition und Verwendung gridbasierter Layouts vereinfachen. Eine optische Prüfmöglichkeit, um auch an den Details arbeiten zu können, bringen diese Frameworks jedoch nicht mit. So muss man sich auf die eigenen Augen verlassen und natürlich auf die Codequalität des Gridsystemlieferanten. Wer sein Grid frei baut, also ohne Toolunterstützung, weiß womöglich noch eher, wovon ich rede. Die beiden Tools aus dem folgenden Beitrag versprechen, bei der Positionierung der Designdetails behilflich zu sein…

grid-artikelbild

Grid-Framework: The Heads-Up Grid muss in die Website eingebaut werden

The Heads-Up Grid ist interessanter, als es der Name vermuten lässt. Baut man die Javascripte und Stylesheets, die das Heads-Up Grid ausmachen, in eine Website während der Designphase ein, so erzeugt man ein Gitternetzoverlay, welches das Design erheblich vereinfacht, live auf der Website. Dabei ist die Verwendung völlig unkompliziert.

The Heads-Up Grid – Overlay frei konfigurierbar

Eine Lösung, die so einfach und unkompliziert ist wie das Heads-Up Grid kommt daher jedenfalls mir wie gerufen. Ein kleines Script wird in den Head-Bereich der zu erstellenden Website gepackt, die Dateien des Grid-Tools in ein anpassbares Unterverzeichnis, fertig. Beim nächsten Aufruf der Website erscheint ein sichtbares Gitternetzoverlay. Bestes Beispiel dafür ist die Produktseite zum Heads-Up Grid selber:

theheadsupgrid-homepage
The Heads-Up Grid in Aktion: Sichtbares Gitternetzoverlay auf der Website

Ohne weitere Anpassungen zeigt The Heads-Up Grid ein Grid mit 6 Spalten und einer Breite von 960 Pixeln an. Alle relevanten Werte lassen sich jedoch sehr einfach innerhalb der kurzen Scriptpassage, die in den Head kopiert wurde, ändern. Sogar die Maßeinheit kann angepasst werden, so dass auch mit Prozentwerten gearbeitet werden kann. Per Default verwendet das Tool Pixel. Über den Wert Zeilenhöhe lässt sich ein Baseline Grid definieren, wichtig für Typografiefreunde.

Sogar responsive Layouts können mit dem Heads-Up Grid unterstützt werden. Der hierzu erforderliche Code ist allerdings etwas komplexer, da er verschiedene Screengrößen abfragen und bedienen muss.

Um die im Designprozess befindliche Website zwischendurch auch ohne Gridoverlay prüfen zu können, spendierte der Entwickler dem Tool einen am rechten oberen Rand des Browserfensters platzierten On-/Off-Button. The Heads-Up Grid liegt aktuell in der Version 1.7 vor und kann frei auf der Website des Entwicklers Jason Simanek heruntergeladen werden.

Grid-Framework: SpryMedia Grid – Bookmarklet legt Grid auf beliebige Websites

Der Schotte Allan Jardine liefert ein Grid-Framework, das per JavaScript-Bookmarklet auf beliebige Websites angewendet werden kann. Das ist bequem, aber ist es auch gut?

SpryMedia Grid legt ein Standard-Grid über die Website, auf der es aufgerufen wird. Das funktioniert unterschiedlich zufriedenstellend. In meinen Tests endete das Grid sehr häufig am Ende des sichtbaren Bereichs, wurde also nur auf den aktuellen Viewport angewendet. Vielfach wurde überhaupt kein Grid generiert. Getestet habe ich im aktuellsten Chrome Stable auf dem Mac.

sprymedia-grid

Dafür ist das SpryMedia Grid über das modale Fenster, das nach Klick auf das Bookmarklet erscheint, extrem flexibel zu konfigurieren. Neben den grundlegenden Optionen, wie der Gesamtbreite und Höhe des Grids, der Zahl der Spalten und Zeilen mit ihren jeweiligen Weiten und Höhen, sowie etwaigen Abständen, sieht SpryMedia Grid zusätzlich die farbliche Anpassung der einzelnen Teile des Grid vor. Im Prinzip ist das also eine ganz nützliche Angelegenheit.

Nur die einwandfreie Funktionalität, die kann halt nicht garantiert werden. Im Chrome unter Windows 7 konnte ich beispielsweise nicht einmal die Einheiten wechseln, war somit auf die Standard-Units festgelegt. Grundsätzlich ist der freie Wechsel zwischen em, ex,pxund % ausdrücklich vorgesehen. Übrigens: Ausblenden lässt sich das Grid, indem man schlicht erneut auf das Bookmarklet klickt. Die zuvor getätigten Einstellungen bleiben erhalten.

Wer bereit ist, sich mit den vielfältigen Konfigurationsmöglichkeiten auseinander zu setzen, ohne die Garantie zu haben, dass das Ergebnis den Aufwand rechtfertigt, kann SpryMedia Grid gern mal ausprobieren. Ich habe mich für The Heads-Up Grid entschieden und empfehle Ihnen das auch.

Links zum Beitrag:

Quellennachweis Artikelbild: striatic via photopin cc

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: