Tag: webdesign

Unheap: Übersichtliche jQuery-Plugin-Sammlung

Die Zahl der neu entwickelten jQuery-Plugins dürfte täglich ansteigen. Durch die einfache Architektur ist es sehr einfach, ein jQuery-Plugin zu schreiben. Mittlerweile gibt es bereits große Online-Sammlungen, die in Kategorien unterteilt sind und ein breites Spektrum an Plugins beinhalten.
Eine etwas modernere Auflistung findet sich auf der Seite Unheap: Auch hier wurden die verschiedenen Plugins in Kategorien unterteilt und lassen sich so besser unterscheiden.

Unheap ist sehr gut strukturiert und beinhaltet aktuelle Plugins für alle denkbaren Bereiche. Von Navigationen über UI-Widgets bis hin zu Video-Playern und Galerien. Es gibt eine Suchfunktion und neue Plugins können einfach über ein Formular eingereicht werden.
Weitere Sammlungen dieser Art, die nicht auf jQuery beschränkt sind, wären JSDB.io oder Jster.

Adobe: Creative Suite ab Juni per Creative Cloud

Die Meldung dürfte langsam, aber sicher die Runde machen: Adobe hat in einer offiziellen Pressemitteilung und auf dem Photoshop.com-Blog das kommende Abo-Modell für seine Creative Suite vorgestellt: So werden die primären Anwendungen des Software-Pakets künftig nur noch in Verbindung mit einem monatlichen Abo der Creative Cloud zu haben sein. Die Programme werden dann den Zusatz "CC" tragen. Dazu zählen künftig also Photoshop CC, Flash Pro CC, InDesign CC, Illustrator CC, Dreamweaver CC, Premiere Pro CC und After Effects CC.

Schon mit der HTML5-Animationssoftware Edge Animate wurde eine Anwendung eingeführt, die nur über die Creative Cloud erhältlich ist. Ein Einzelprodukt in der Creative Cloud kann für 24,59 EUR im Monat genutzt werden, während alle Apps für 61,49 EUR monatlich bereitstehen. Mehr dazu in der Tarifübersicht.
Die Creative Cloud ist nicht zu verwechseln mit webbasierten Anwendungen: CC-Anwendungen an sich funktionieren weiterhin offline wie bisher, lediglich der Download erfolgt über die Cloud. Bis zum 31. Juli 2013 bietet Adobe bestehenden Kunden 40% Rabatt bei einem Upgrade auf CC-Produkte an. Die Creative Suite 6 (CS6) ist damit das letzte Produkt seiner Art, das noch als Box-Version erhältlich ist. Im Photoshop.com-Beitrag werden übrigens auch die Neuerungen von Photoshop CC aufgelistet, zu denen Features wie "Camera Shake Reduction", "Intelligent Upsampling" oder "Smart Sharpen" gehören. Interessant für Webdesigner ist die Möglichkeit, den Radius abgerundeter Ecken auch noch nachträglich einstellen zu können.

Adobe Muse: Webdesign-Tool für mobile Websites

Seit über einem Jahr bietet Adobe nun sein neuartiges Webdesign-Werkzeug Muse an, mit dem sich Websites auch ohne Programmierkenntnisse erstellen lassen. Dabei kann auf eine solide Auswahl an Widgets (Accordions, Lightboxes, Kontaktformulare, Diashows, uvm.) zurückgegriffen werden. Die Benutzeroberfläche der Software ist an bestehende Print-Werkzeuge wie Illustrator oder InDesign angepasst, so dass ich Print-Designer leicht zurechtfinden dürften.
Das Programm hat inzwischen einige Neuerungen erfahren, zu denen auch die Umsetzung von mobilen Websites zählt.

So lassen sich mit Muse nun auch responsive Websites erzeugen, die entsprechend auf mobile Endgeräte und deren Bildschirmgrößen reagieren. Das Erstellen von mobilen Varianten einer Seite ist an das "alternative Layout" von InDesign angelehnt, was die Arbeitsweise erleichtern soll. Muse bietet zudem Multi-Touch-Unterstützung und integriert diverse jQuery-Plugins, die Touch- und Swipe-Gesten ermöglichen. Mittlerweile wurde das JavaScript-Framework "Spry" komplett durch jQuery ersetzt und auch der exportierte HTML-Quelltext wurde um Einiges verbessert.
Muse-Websites können entweder im HTML-Format auf einen eigenen Webserver hochgeladen oder bei Adobe per Business Catalyst gehostet werden. Muse kann für 18,44 EUR in der Creative Cloud abonniert werden.

Flat UI: Modernes PSD- und HTML-Interface-Kit

Im Rahmen einer Marketing-Aktion wurde kürzlich eine kostenlose Variante des "Flat UI"-Interface-Kits von Designmodo veröffentlicht. Der entsprechende Blog-Eintrag zeigt das User Interface und enthält Links zu den PSD-Dateien und der HTML-Version. Auf der Demo-Website können die Bedienelemente ausprobiert werden. Die HTML-Version basiert auf Twitters Bootstrap-Framework und macht zudem Gebrauch von Sass.

Das User Interface-Kit enthält verschiedene Farbschemata sowie Bedienelemte aller Art (Buttons, Progress Bars, Checkboxes, Slider, Tags, Navigationen und Icons). Die Quelldateien der HTML-Version stehen bei GitHub zum Download bereit. Darin enthalten sind neben den Sass-Modulen auch diverse jQuery-Plugins, HTML5-Shivs und die angefertigten Symbol-Schriftarten.

Webdesign: Expression Web und Design kostenlos

Etwa 5 Jahre nach der Einführung leitet Microsoft nun das Ende für seine Marke "Expression" ein: Das Paket wird eingestellt und die einzelnen Produkte werden in unterschiedlicher Form weiter existieren. Interessant für Webdesigner dürften die Windows-Anwendungen Expression Design 4 und Expression Web 4 sein, die ab sofort kostenlos zum Download bereitstehen: Während Expression Web eine direkte Alternative zu Adobes Dreamweaver darstellt, handelt es sich bei Expression Design um ein vollwertiges vektorbasiertes Zeichenprogramm, das ähnlich wie Adobe Illustrator arbeitet.

Die Expression Design-Software bietet eine moderne Benutzeroberfläche und zudem interessante Features wie etwa B-Splines: Dabei können Vektorformen auf eine alternative Weise erstellt werden, die auf Eckpunkten basiert und damit leichter zu handhaben ist. Die beiden Expression-Tools werden nicht weiterentwickelt, aber dennoch handelt es sich um moderne Web-Werkzeuge, die durchaus solide Alternativen zu gängigen Tools darstellen.
Microsoft Expression Blend, ein Interface-Design-Tool (ähnlich wie Adobe Flash), ist hingegen in Visual Studio 2012 integriert und kann weiterhin zum Erstellen von Windows 8- oder Windows Phone-Apps (WPF) verwendet werden.

Gridster.js: jQuery-Plugin für dynamische Raster

Moderne Webanwendungen sind sehr häufig mit einer gewissen Individualität verbunden, die sich zum Beispiel durch ein Anpassen des Layouts auszeichnet. So können Elemente interaktiv verschoben oder umsortiert werden. Für solche Aufgaben eignet sich beispielsweise jQuery UI. Wer nur ein Plugin für das Umstrukturieren von Layout-Elementen benötigt, sollte sich Gridster ansehen. Das jQuery-Plugin bietet eine Drag 'n' Drop-Funktionalität, mit der sich Block-Elemente verschieben, löschen und hinzufügen lassen. Das Layout wird in Echtzeit aktualisiert und neu sortiert.

Gridster ist einfach zu integrieren und bietet diverse Optionen. Das Plugin arbeitet mit dem data-Attribut von HTML5, über das sich die Blockgrößen und Positionen im Raster definieren lassen. Ein Beispiel:

• HTML:
• <div class="gridster">
• <ul>
• <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
• <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
•  
• <li data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li>
• <li data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li>
• </ul>
  </div>
•  
• JavaScript:
• $(".gridster ul").gridster({
• widget_margins: [10, 10],
• widget_base_dimensions: [140, 140]
• });

Das jQuery-Plugin erlaubt es zudem, ein serialisiertes Array mit den Positionen der Elemente zu erzeugen. Bei GitHub finden sich weitere Infos und schließlich der Download.

A5 HTML5 Animator: Tool für Web-Animationen

Mit den Fähigkeiten von HTML5 und CSS3 werden komplexe Animationen im Web künftig auch durch Webstandards möglich. Grundsätzlich gibt es die Unterscheidung zwischen HTML5-Canvas-Animationen und CSS3-Transformationen, die auf DOM-Elemente angewendet werden. Für echte Canvas-Animationen gibt es derzeit nur das Mac OS X-Tool Radi, das erweiterte Möglichkeiten wie Vektor-Animationen oder Grafikprogrammierung bietet. Im Bereich der CSS3-Animationen gibt es mehrere Tools wie Adobe Edge, den Sencha Animator oder Hype (Mac OS X).
Nun befindet sich eine neue Anwendung aus diesem Sektor im öffentlichen Beta-Test: Der A5 HTML5 Animator von Data Becker kommt mit einer aufgeräumten Oberfläche und bietet moderne Möglichkeiten für die Animation von DOM-Elementen.

Die Software kommt mit einem ausgereiften Toolset, zu dem eine Timelime, Keyframe-Animationen, Szenen und ein JavaScript-Editor mit Syntaxhervorhebung gehören. Durch die Szenen können also auch umfangreichere Animationen mit verschiedenen Timelines erstellt werden. Die Elemente auf der Bühne können über eine Palette in ihrer Darstellung angepasst und animiert werden (Farbe, Eckenradius, Transparenz, Drehung, Neigung, Schatten, Reflexion, etc.), was komplexere Animationen auch ohne das Schreiben von CSS3-/JavaScript-Code ermöglicht. Interessant sind zudem die "Live-Animationen", bei denen es sich um Effekt-Templates handelt, die beliebig auf Elemente angewendet werden können.
Der A5 HTML5 Animator befindet sich wie gesagt in einer öffentlichen Beta-Phase und kann daher schon heruntergeladen und getestet werden. Die Windows-Anwendung wird in ca. 2 Monaten veröffentlicht werden und ist dann für 117,80 EUR zu haben.

Redactor: Schlanker WYSIWYG-Editor auf jQuery-Basis

Mit TinyMCE oder dem CKEditor stehen schon seit geraumer Zeit komfortable JavaScript-WYSIWYG-Editoren zur Verfügung, die vor allem in Webanwendungen Einsatz finden. Sie lassen sich relativ einfach einbinden und bieten ähnliche Optionen wie ein Textverarbeitungsprogramm.
Eine weitere Alternative in diesem Bereich wäre ein jQuery-Plugin, das den Namen "Redactor" trägt. Dieser Editor ist etwas schlanker, wartet aber mit einer modernen Benutzeroberfläche auf.

Redactor funktioniert auch auf mobilen Endgeräten und kann somit auch im Tablet-Bereich eingesetzt werden. Es gibt verschiedene Anzeige-Modi, einen Vollbild-Modus, Quellcode-Ansicht, automatische Textfeld-Vergrößerung sowie Tastaturbefehle und eine Auto-Save-Funktionalität. Der Editor ist aktuell in 25 Sprachen verfügbar und kann für nichtkommerzielle Zwecke eingesetzt werden. Weitere Lizenzen können auf der Download-Seite eingesehen werden.