Kategorien
Inspiration Tutorials

Shots Of Things That Work: Sammlung nützlicher Tipps und Kniffe

Stetige Inspiration ist für einen Webdesigner natürlich unentbehrlich. Darüber wurde schon viel geschrieben und immer mehr Webseiten entstehen, welche sich als eben solche Inspirationsquellen verstehen. Shots of Things That Work gehört zu dieser Kategorie. Ich habe mir die Plattform einmal näher für Sie angesehen.


(Bildquelle: photosteve101 auf Flickr | CC-BY-SA)

Shots of Things That Work im Überblick

Shots of Things That Work ist ein Blog von Simon Schmid. Hier sammelt Simon verschiedene Beispiele sowie Beiträge aus den Bereichen User-Experience und emotionales Design. Insbesondere achtet er auf kleine Details, die oftmals durchaus übersehen werden. Die Funde werden mit Hilfe eines Screenshot und einer kurzen Beschreibung vorgestellt. Simon ist aber kein Einzelgänger beim Suchen kleiner Schätze. Wenn Sie ein interessantes Beispiel vorschlagen möchten, ist er Ihnen dafür dankbar. Ich habe für Sie ein Showcase aus einigen seiner Fundsachen vorbereitet.

Salon.io

Salon.io ist ein Tool, welches den Benutzern ohne jegliches HTML- und CSS-Wissen beim Erstellen von eigenen Portfolios und Webseiten hilft. Zurzeit befindet sich es im Beta-STadium, sieht aber vielversprechend aus.


Kein tiefgründiges Webdesignwissen mit diesem Tool notwendig: Salon.io

Who is around you?

Ja, wer ist denn hier in der Nähe? Freunde, Kollegen, Bekannte? Diese App hilft Ihnen dabei, es herauszufinden. Laden Sie die App runter, verbinden Sie diese mit Ihrem Facebook-Account und schon kann es losgehen.


Nach Freunden und Netzwerken in eigener Nähe suchen: Circle-App

Songpop

Musik hören und den Titel erkennen – diesen Spass bietet Ihnen die kostenlose Applikation Songpop. Was ganz cool ist: man muss nicht unbedingt einen Facebook-Account haben, um die App nutzen zu können.


Sich als Musikkenner beweisen: Songpop

Mehr Speicherplatz bei Dropbox

Mehr Speicherplatz benötigt? Kein Problem! Folgen Sie Dropbox auf Twitter oder auf Facebook, laden Sie Freunde ein und schon werden Ihnen mehrere Gigabytes Speicherplatz geschenkt.


Mehr Speicherplatz auf Dropbox auf einem kostenlosen Weg

Error Page

Eine etwas andere Error Page, als man sie gewöhnlich kennt. Sieht doch viel besser aus, als einfach ein unfreundlicher Text auf dem weissen Hintergrund.


Nichts gefunden: eine freundlichere Version einer Error-Page

Fun mit Google Translator

Ein bisschen Spass muss sein, wie es im berühmten Lied von Roberto Blanco gesungen wird. Öffnen Sie Google Übersetzer. Stellen Sie Deutsch als die Ausgangssprache und als Übersetzungsziel die englische Sprache ein. Kopieren Sie diesen, scheinbar sinnlosen Text ins Textfeld. Drücken Sie auf „Übersetzen“. Und jetzt kommt es: machen Sie Ihren Lautsprecher an und klicken Sie auf die Beatbox im unteren Ecke des Textfeldes. Nun können Sie ein selbstgemachtes Techno geniessen. Lustig, oder?


Musik machen mit Google Translator

(dpe)

Kategorien
Inspiration Tutorials

The Designer’s Survival Guide: Erste Hilfe für Designer

Wahrscheinlich hat jeder von uns ein kleines Lieblingsbüchlein, wo man ab und zu nach Hilfe sucht. Egal in welchem Lebensbereich Fragen aufkommen- man greift oft zu diesem Nachschlagwerk. So ist es auch im Webdesign. Auch hier ist es nicht schlecht eine Quelle zu haben, welche nützliche Ratschläge geben kann. Heute stelle ich Ihnen so eine Quelle vor: The Designer’s Survival Guide.


(Bildquelle: florianplag auf Flickr | CC-BY-SA)

Was ist der Designer’s Survival Guide?

Was ist denn das für eine sogenannte „Anleitung zum Überleben“? Für wen ist sie geeignet? Für Profis oder eher Anfänger? Fragen über Fragen. Nun, Designer’s Survival Guide erhebt natürlich keinen Anspruch darauf, wirklich alle Fragen, die einem Webdesigner in den Sinn kommen könnten, zu beantworten. Aber hilfreich ist die „Anleitung zum Überleben“ allemal.


Designer’s Survival Guide: Startseite

Designer’s Survival Guide wird von Richard Baird, einem englischen Designer betrieben. Es ist eine Art Handbuch, welches sich vor allem an Anfänger im Webdesign richtet, aber in vielen Bereichen auch den Profis behilflich sein kann. Das Coole ist, dass professionelle Fachleute hier Beratung für junge und vielleicht noch nicht so erfahrene Webdesigner geben. Und so funktioniert’s:

Es wird ein Thema ins Leben gerufen, beispielsweise „Hardware and Software“. Es wird als „Call for entries“ gekennzeichnet, was bedeutet, dass gute professionale Beiträge zu diesem Thema erwünscht sind. Klickt man auf das Titelbild des Beitrags, so erscheint ein Formular, in das man als Experte seine Ratschläge schreiben kann. Dabei muss der eigene Twitter-Account angegeben werden, damit die Leser den Autor kontaktieren und eventuell sich ergebende Fragen stellen können.


Call for entries: ein neues Projekt


Ratschläge sind willkommen!

Sobald es genügend Ratschläge gibt und diese auch überprüft, sowie redaktionell bearbeitet sind, steht das fertige Thema zur Verfügung.


Ein fertiges Thema mit Ratschlägen erfahrener Webdesigner

Was gibt es für Themen bei Designers Survival Guide?

Ich habe für Sie noch ein kleines Showcase vorbereitet, welches einige Themen zeigt, zu welchen es schon viele Ratschläge gibt.


The Designer’s Guide to Presentations


The Designer’s Guide to Research and Strategies


The Designer’s Guide to Education


The Designer’s Guide to Design for the Web


The Designer’s Guide to Packaging

Fazit

Was mir an Designer’s Survival Guide besonders gefällt, ist die Idee, jungen Designern auf ihrer Lernkurve nach oben helfen zu wollen. Ich finde es gut, wenn erfahrene Profis in dieser Branche gute Ratschläge geben und zudem sich kontaktieren lassen. Die Tipps und Tricks sind ausserdem sicherlich auch für Fortgeschrittene oder gar Profis nützlich.

(dpe)

Kategorien
E-Business Rechtliches

Clear, Keep My Opt-Outs, Ghostery: Tools zum Schutz der digitalen Privatsphäre

Internet hat bekanntlich zwei Seiten. Zum einen macht es vielen das Leben leichter und ermöglicht, viele Dinge schneller und bequemer zu erledigen. Zum anderen hat man oft das Gefühl, ausspioniert zu werden. Daten werden mit allen möglichen Tricks gesammelt und häufig für gutes Geld an Dritte weitergegeben. Das Thema Datenschutz ist heute aktueller denn je. Heute stellen wir Ihnen ein paar Erweiterungen vor, welche zum Datenschutz beitragen können und setzen uns zusätzlich mit dem beliebten Plugin „Ghostery“ kritisch auseinander.


Datenklau: meine Sicht

Clear: Bequemes Löschen der Verlaufsgeschichte

Die Browsergeschichte aufzuräumen ist etwas, was tatsächlich regelmäßig praktiziert werden sollte. Der Grund hierfür liegt hauptsächlich im Schutz Ihrer eigenen Daten. Mit Hilfe dieser Chrome-Erweiterung ist ein bequemes Löschen des Browser-Verlaufs gewährleistet. Das Coole ist: Sie können sich aussuchen, was genau aus der Verlaufsgeschichte entfernt werden soll.


Clear: ein Menü erlaubt es, festzulegen, was genau aus der Verlaufsgeschichte gelöscht werden soll

Keep My Opt-Outs: die guten Kekse behalten

Die Anbieter vieler Webseiten verwenden sehr gerne die sogenannte Cookie-Technik. Wie Sie es sicherlich wissen, handelt es sich hier nicht um leckere Kekse, sondern um kleine Textdateien. Diese Textdateien enthalten Informationen über den Benutzer. Der Webserver hat nun die Möglichkeit, die erhaltenen Infos zu speichern und dementsprechend etwa die Werbeanzeigen anzupassen. Nun, warum sollte man die Cookies nach der Beendigung der Sitzung nicht einfach löschen?
Ausser den nativen Cookies und den „bösen“ Third-Party-Cookies gibt es auch die sogenannten Opt-out-Cookies. Diese leisten tatsächlich einen guten Job. Sie verhindern nämlich die Installation der Third-Party-Cookies. Klicken Sie im Browser einfach auf „Cookies löschen“, so werden neben den Cookies der Webanbieter auch alle Opt-Out-Cookies entfernt. Um dies zu verhindern, empfehle ich Ihnen die Erweiterung Keep My Opt-Outs zu installieren. Sie wird dafür sorgen, dass Ihre Opt-out-Cookies erhalten bleiben, während die bösen Krümelmonster beseitigt werden.


Keep my Opt-Outs: diese Erweiterung beschützt Ihre Opt-out-Cookies

Ghostery: Werden Sie ausspioniert?Und wenn ja, von wem? Etwa Ghostery selbst?

Webanbieter sind verständlicherweise sehr neugierig, was Ihr Surfverhalten angeht. Um es beobachten und danach analysieren zu können, werden Tracking-Dienste eingesetzt, welche den ahnungslosen Benutzer möglichst auf Schritt und Tritt im Web verfolgen. Tracking-Dienste sind kleine JavaScript-Programme, und werden normalerweise in jede einzelne Unterseite eines Webangebots eingebaut. Diese Scripts speichern die Userdaten und leiten diese an den Server des Dienstes weiter. Um festzustellen, mit welchen Mitteln ein Surfverhalten gerade ausgespäht wird, können Sie Ghostery verwenden- eine Erweiterung für Chrome, Firefox und Opera.

Ghostery für Chrome

Die Ghostery-Erweiterung für Chrome finden Sie hier

.


Ghostery für Chrome

Ghostery für Firefox

Die Ghostery-Erweiterung für Firefox finden Sie hier

.


Ghostery für Firefox

Ghostery für Opera

Die Ghostery-Erweiterung für Opera finden Sie hier

.


Ghostery für Opera

Ghostery: Kritik

Schön und nützlich ist diese Erweiterung – dabei jedoch nicht ungefährlich. Der kleine Geist blockt die Tracker und sammelt die Blockadevorgänge in seiner Datenbank. Dann versucht Evidon, der Ghostery-Entwickler, genau diese Daten wieder an die Webanbieter zu verkaufen. So lassen sich Infos dazu erzielen, was wann wo geblockt wurde und es können strategische Maßnahmen überlegt werden, dieses für die Zukunft zu vermeiden. Die Vorgehensweise hinterlässt wohl bei jedem Webnutzer mindestens ein unangenehmes Gefühl. Wer will schon den Teufel mit dem Beelzebub austreiben?

Better Privacy: Add-On für Firefox

Werbeanbieter mangelt es nur selten an Ideen, was die Sammlung von Daten angeht. So werden die sogenannten LSO-Cookies immer beliebter. Die LSO-Cookies speichern normalerweise die selbe Information wie auch ein Browser-Cookie. Nur sind sie viel hinterhältiger, denn sie lassen sich nicht einfach so löschen. LSO-Cookies werden nämlich in einem Systemverzeichnis abgespeichert. Better Privacy ist eine Erweiterung für Firefox, welche es möglich macht, die LSO-Cookies nach der Beendigung der Sitzung automatisch zu löschen. Sie können auch bestimmen, ob Sie die Cookies einzeln löschen möchten.


Better Privacy: kein Kuchen für Werbeanbieter

Fazit

Heute habe ich Ihnen einige Erweiterungen für verschiedene Browser vorgestellt, welche Ihre Privatsphäre schützen sollen. Natürlich gibt es viel mehr von solchen im Netz und wir sind ständig auf der Suche nach ihnen. Über Ihre Vorschläge sowie Anmerkungen würden wir uns freuen.

(dpe)

Kategorien
Inspiration Showcases

Made in Germany: Deutsche Webdesign-Blogs

Betrachten wir ein Produkt und lesen auf dem Etikett die Worte “Made in Germany“, so assoziieren wir mit diesem Produkt eine ausgezeichnete Qualität, eben ein Produkt, welches nach der deutschen Genauigkeit, Beständigkeit, Planung, Organisation und Perfektion gemacht wurde und seinen meist hohen Preis wert ist. Dieses Produkt kann alles sein: Haushaltswaren, Kleidung, Spielzeug, Autos oder auch… Design. Im folgenden Beitrag stelle ich Ihnen ein paar Designquellen aus Deutschland vor. Sie werden sich überzeugen, dass auch diese würdig sind, das Etikett „Made in Germany“ zu tragen. Dabei kosten sie nicht mal was…

Design Made In Germany

Die erste Designquelle aus Deutschland trägt den sprechenden Namen Design made in Germany und hat den charakteristischen deutschen Adler als Schmuck. Hier handelt es sich zum einen um eine Plattform, die täglich verschiedene Produkte, Arbeiten sowie Projekte vorstellt. Diese werden aus den zahlreichen Vorschlägen sorgfältig aussortiert. Im nächsten Schritt werden die besten den Besuchern der Webseite präsentiert. Zum anderen ist „Design Made in Germany“ ein Magazin, wo Interviews mit Designern geführt werden, zahlreiche Jobs von verschiedenen Agenturen angeboten sind, über Konferenzen informiert wird und vieles mehr. Über „Design Made in Germany“ müsste ein separater Artikel geschrieben werden, wenn alles, was dieses Magazin enthält, aufgelistet werden sollte. Deshalb beschränke ich mich in diesem Post auf einige Beispiele.

Designbeispiele

Nach meinem Geschmack habe ich einige schöne Beispiele herausgesucht, welche auf Design made in Germany vorgestellt sind.


Gunny: eine Online-Plattform zur Finanzierung von Projekten


Push: Conference-Generator


Der Goldene Funke: ein Jahrbuch, einstanden an der HTW Berlin


Inpetto: die Socialmanager-Plattform für Tiere


Wochenend-Workshop: viele Wege führen nach Rom

Das t3n Magazin

Wahrscheinlich jeder von Ihnen kennt dieses Online- und Printmagazin: t3n. Hier geht es um die verschiedensten Themen aus dem Web: e-Business, Webtechnologien und auch um Design. Auf t3n erscheinen täglich Dutzende von Beiträgen mit News, Tipps und Kurzbeiträgen, oft auch zum Thema Webdesign. Mit TechnikLoad wird einer der erfolgreichsten Technik-Video-Podcasts Deutschlands produziert. Eine Jobbörse rundet das Angebot ab. Hier sind einige Beispiele zum Thema Design, welche bei t3n vorgestellt wurden.


t3n: Startseite


Amazon-Redesign


TYPO3: kostenloses responsive Template


Usability Online-Marketing

Der Designbote

Der Designbote ist ein Fachblog, welches sich mit Design beschäftigt. Das Blog wird von Florian Hirschmann und Marco Schroller betrieben. Hier werden regelmäßig Surftipps und Meinungen zum Thema Design publiziert. Zum Thema „Design“ sind zahlreiche Rubriken vorhanden, diese finden Sie in der oberen Menüleiste unter „Themen“. Dabei geht es nicht nur um das Webdesign, sondern auch um Werkzeuge, Events, Corporate Design, Motion Design, Produktdesign und sogar Modedesign.

Desweiteren finden Sie hier zahlreiche Jobangebote verschiedener Agenturen und Buchempfehlungen.

Das Auge

Das Auge ist ein „Netzwerk für Kreatives“, ein größeres Portal, auf dem man sich kostenlos registrieren kann. Mitglieder der Plattform können eigene Werke präsentieren, Kontakte knüpfen und eventuell auch Jobangebote erhalten, falls jemand auf sie aufmerksam wird. Es ist also eine Art Facebook (oder deutschsprachiges Behance) für Kreative. Besonders hervorzuheben ist das ausführliche Verzeichnis mit Designagenturen, Freiberuflern, Fotografen und anderen Kreativen. Ich habe für Sie noch ein paar Portfolios aus der Kategorie „Best of“ herausgesucht.


Die Startseite von DasAuge.de


Beispiel 1: Werke der Stylistin Julia Müller


Beispiel 2: Werke der Barcelona Photographer


Beispiel 3: Werke des Art Directors Björn Ewers

Working Draft

Bei Working Draft handelt es sich um einen wöchentlichen News-Podcast für Webdesigner und Webentwickler. Die Webseite wird von Peter Kröner, Christian Schäfer und Markus Schlegel betrieben. Regelmäßig unterhalten sich die Moderatoren über die Neuigkeiten im Webdesign, neue Tools, interessante Beiträge und Ressourcen. Zu jeder Ausgabe gibt es ausführliche Schaunotizen mit Links auf Seiten, die im Podcast diskutiert wurden. Natürlich kann man den Podcast über RSS oder iTunes abonnieren.


Startseite von Working Draft: ein Ausschnitt

Slanted

Bei Slanted handelt es sich um ein – in Internetdimensionen gemessen – älteres Blog, welches sich seit 2004 hauptsächlich mit Typographie und Gestaltung beschäftigt. Unter anderem präsentiert das Blog oft aktuelle internationale Design-Trends und Events, interessante Bücher, Magazine, Portfolios und News. Parallel erscheint unter dem gleichen Namen eine Typographie- und Designzeitschrift. Dort werden die Themen Typographie, Design, Illustration und Fotografie ausführlicher behandelt.


Startseite von Slanted.de

Ein kurzer Überblick über die Inhalte von Slanted


Slanted: die aktuelle Zeitschrift


Slanted: ein Kalender fürs nächste Jahr


Slanted: ein Portfolio

Fontblog

Ein weiteres Fachblog zum Thema Typografie, das FontBlog, stammt aus der Feder von Jürgen Siebert, der als Redakteur das Blog von Fontshop betreibt. Die Schwerpunkte im Blog sind die Themen Grafikdesign, Typografie, Medien und Menschen. Allerdings tauchen oft auch Werbebeiträge aus dem Haus Fontshop auf, die als Werbung gesehen werden sollen. Davon mal abgesehen bietet das Weblog interessante Surftipps, Minibeiträge und Geschichten über Typografie und Design, mal mit geschichtlichen Ausflügen in die Typografie und Updates über die aktuellen Design-Events im deutschsprachigen Raum.


Fontblog

Designer in Action

Eine weitere Anlaufstelle für Kreative aus dem graphischen Bereich ist Designer in Action. Auf der Website werden zahlreiche Themen behandelt, unter anderem Gestaltung, Typographie, Papier und Fotografie. Zusätzlich werden Terminlisten mit wichtigen Events angeboten. Sie finden hier auch Buchempfehlungen sowie Downloads, Tipps und Tricks. Jeden Sonntag erscheint zudem ein kostenloser E-Mail-Newsletter, in dem Surftipps, Downloads und Designevents präsentiert werden.


Ein Beispiel aus der Rubrik „Papier“

Vier

Kurz vor Schluss möchte ich Ihnen eine weitere Podcast-Anlaufstelle vorstellen: Vier. Das Projekt versteht sich als ein Podcast-Netzwerk, das kürzlich mit »Vier Themen« und »Vier Apps« startete. Im Podcast, betrieben von Marcel Böttcher und Andreas Dantz, werden regelmäßig Themen aus dem Technik- und Medienumfeld behandelt. Dabei beschränken sich die Moderatoren immer auf genau vier Themen, die dann in 18-35 Minuten Portionen aufbereitet werden. Die Aufnahmen erfolgen im eigens geschaffenen »Studio Vier« in Hannover. Die Podcasts kann man über RSS und iTunes abonnieren oder direkt herunterladen.


Vier.fm: Startseite

Peter Kröners Weblog

In seinem Blog beantwortet Peter Kröner, selbst­stän­di­ger Web­de­si­gner und Front­end-Ent­wick­ler, Fragen über HTML5, CSS3, WordPress und moderne Webentwicklung. Seine Beiträge sind oft als Serien konzipiert, sorgfältig didkatisch aufbereitet und somit nützlich für Anfänger wie Fortgeschrittene. Unter anderem sind in Peter Krönes Weblog aktuelle Serien über HTML5, ECMAScript 5/6, CSS3 und MooTools zu finden.

Heiko Stiegerts Webstandard-Blog

Seit Oktober 2005 betriebt Heiko Stiegert eine bewährte Anlaufstelle für Frontend-Entwickler im deutschsprachigen Raum, das Webstandard-Blog. Dabei veröffentlicht er und seine Gastautoren verschiedene Beiträge rund um das Thema CSS, JavaScript, Usability u.ä. Neben Tutorials finden Sie auf der Seite ebenfalls einführende Beiträge über die Grundlagen der Frontend-Entwicklung aber auch Interviews und Einblicke in die Praxis von Designern und Entwicklern.

Fazit: Heute habe ich Ihnen einige deutsche Quellen vorgestellt, die das Prädikat „Made in Germany“ mit voller Berechtigung tragen und sich vor anderen Angeboten, vor allem aus dem englischsprachigen Raum, absolut nicht verstecken brauchen. Besuchen Sie sie regelmäßig!

(dpe)

Kategorien
Design UI/UX

InspireUX: Blog inspiriert in Sachen Nutzererfahrung

Wie sollen Webseiten sein, wie sollen sie aussehen? Die Antwort kommt aus dem Begriff „User Experience“ selbst: Dabei wird auf die Erfahrung eines Benutzers mit einer Webseite eingegangen. Und diese Erfahrung, oder Erlebnis, man möge es nennen, wie man möchte, soll auf keinem Fall schlecht sein. Heute stellen wir Ihnen ein nützliches Blog vor, welches sich intensiv mit dem Thema User Experience beschäftigt.


InspireUx: ein Blog über User Experience

Was ist InspireUX?

InspireUX ist ein Blog, welches sich mit dem Thema UX Experience sehr intensiv beschäftigt. Das Blog wird von UX Experience-Designerin Cartiona Cornett betrieben. Cartiona bietet in Ihrem Blog zahlreiche Sachen an, welche nicht nur interessant und nützlich, aber auch mit einem Touch Entertainment, so wie beispielsweise Zitate verschiedener Webdesigner. Im Weiteren werde ich Ihnen einige Rubriken aus dem Blog von Catriona Cornett vorstellen, damit Sie sich selbst davon ein Bild machen können.

Rubrik „Articles“

In dieser Rubrik erscheinen zahlreiche Beiträge zum Thema UX Experience.Verschiedentlich finden sich hilfreiche Quellen zur vertieften Information.


Artikel: ein Ausschnitt aus der Rubrik

Rubrik „Quotes“

Diese Rubrik macht den Blog etwas philosophischer. Zahlreiche Zitate von verschiedenen Webdesignern werden präsentiert. Man kann sie hier nach Kategorien sortiert finden.


Rubrik „Quotes“: alle Zitate sind nach Themen sortiert


Accessibility (Zugänglichkeit): ein Ausschnitt aus allen Zitaten


Behaviour: ein Ausschnitt aus allen Zitaten

Neue Zitate werden übrigens drei mal pro Woche zu jeder Kategorie hinzugefügt.

Rubrik „Galerie“

Hier sind alle Zitate noch einmal dargestellt. Diesmal aber in schönen Screenshots!


Schöner Screenshot: Zitat von Steve Baty


Zitat von Kim Goodwin


Zitat von Julia Bleecker

Es ist auch möglich, Zitate vorzuschlagen. Nach einem Check werden diese eventuell für das Blog ausgewählt. Wichtig: die geschickten Zitate sollen über das Thema „User Experience“ sprechen.

Fazit

Meiner Meinung nach ist InspireUx eine gelungene Idee. Das Blog stellt eine gute Kombination aus Wissen und einer Zitatenkollektion, welche dazu noch schön gestaltet ist. Das Blog wirkt viel versprechend, wenn auch die Postingfrequenz stark zu wünschen übrig lässt. Ich empfehle Ihnen dennoch herzlichst, darin zu lesen, insbesondere wenn Sie die ersten Erfahrungen mit User Experience sammeln.

(dpe)

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Photoshop Webdesign

Firefox-Add-On „Open With Photoshop“: Bilder auf Websites direkt mit Photoshop öffnen

Viele Webdesigner und Graphikdesigner arbeiten mit Photoshop. Und Sie wissen es wohl selbst, wie aufwändig es ist, transparente Fotos zu bearbeiten. Das Bild muss gespeichert und dann ins Programm importiert werden. Das Problem lässt sich für Firefox-Benutzer mit dem Add-On Open With Photoshop lösen. Ich werde im Folgenden kurz zeigen, wie das funktioniert.


(Bildquelle: youngdesign auf Flickr | CC-BY-SA)

Open With Photoshop ist ein Tool, welches es möglich macht, transparente Bilder mit nur einem Mausklick direkt in Photoshop zu öffnen. Das Tool ist komplett kostenlos und steht unter GNU General Public License.

Schritt 1

Im ersten Schritt laden wird das Tool herunter. Hierzu gehen wir auf die Webseite von Mozilla Addon. Aktuell befindet sich dort Open With Photoshop 3.7, die älteren Versionen findet man unter „view other versions“.


Download des Add-On

Nach der Installation erscheint das Icon des Add-On in der Browserleiste.


Warnung: nicht erschrecken

Schritt 2: Ein Bild mit dem Add-On öffnen

Um ein Bild von einer Website direkt im Photoshop zu öffnen, klicken Sie es mit der rechten Maustaste an. Es erscheint ein Menü mit der Option „Öffnen mit“ und dem Add-On-Icon. Klicken Sie darauf und das Bild wird nach Photoshop exportiert. Ist das Programm noch nicht aktiv, wird es durch das Add-On gestartet.


Nun kann ein Bild mit Hilfe des Add-On sofort nach Photoshop exportiert werden

Zum Schluss

Wenn Sie Mac OS verwenden, dauert es etwas, wenn Sie ein Bild mit dem Add-on öffnen und Photoshop noch nicht aktiv ist. Es ist also besser, wenn Sie zuerst das Programm starten und erst danach Bilder mit „Open With Photoshop“ öffnen.

(dpe)

Kategorien
Essentials Freebies, Tools und Templates

Hundred Zeros: Kostenlose eBooks für jedermann

Lesen bildet und macht Spass. Darum sollte es nicht vernachlässigt werden. Heute wird es immer üblicher, dass man für ein gewünschtes Buch nicht in einen Bücherladen geht, sondern ins Internet, wo man sich es in der elektronischen Form besorgen kann. Meistens sind die eBooks kostenpflichtig, genau so, wie es auch in einem „realen“ Büchergeschäft der Fall ist. Es gibt aber auch Möglichkeiten, sie kostenfrei zu besorgen und das völlig legal.


(Bildquelle: conejoazul auf Flickr | CC-BY-SA)

Was ist „Hundred Zeros“ und wie funktioniert es?

Bei Hundred Zeros handelt es sich um eine Sammlung von eBooks zu verschiedensten Themen. Man findet hier Medizinbücher, Ratgeber für alle Fälle, Kinderbücher, Kochbücher und viel mehr. Und das Tolle ist: sie alle sind komplett kostenfrei! Das Einzige, was Sie haben sollten, ist ein Amazon-Account. Aber es lässt sich ja schnell einrichten und dann kann’s los gehen mit der Weiterbildung oder aber auch mit Entspannung bei einem guten Thriller. Die eBooks lassen sich sowohl auf dem Computer lesen als auch auf einem iPad, Kindle oder mobilem Gerät. Es ist möglich, Bücher nach einem bestimmten Thema zu suchen oder auch nach dem Autor, sowie dem Namen eines gewünschten Buches. Im Folgenden habe ich Ihnen ein paar Themen mit Beispielen vorgestellt, welche es bei Hundred Zeros gibt.

Rubrik „Classic“

Hier finden Sie zahlreiche Werke berühmter Schriftsteller und nicht nur auf English. Wenn Sie sich also so was wie „Anna Karenina“ oder „Oedipus Trilogy“ reinziehen wollen, dann nichts wie auf die Rubrik Classics gehen und ein paar Lektüren runterladen!


Classic: „Anna Karenina


Classic: Sherlok Holmes


Classic: Oliver Twist

Rubrik „Kinderbücher“

Vielleicht möchten Sie ihrem Kind eine süsse Gute-Nacht-Geschichte vorlesen? Moderne Eltern haben die Option, es auch vom iPad aus zu tun. Laden Sie also etwas, was Ihrem Kind gefallen würde, bei Hundred Zeros runter und schon können Sie mit dem Vorlesen loslegen! Wenn Ihr Sprössling etwas älter ist, finden sich hier auch einige nette Romane. Wobei ich persönlich überhaupt kein Fan von Horror-und Vampirgeschichten bin.


Kinderbücher: „Cassie and The Wild Cat: Meet and Greet“


Kinderbücher: „The Ugly Duckling“


Eher ein Jugendbuch: „The Mind Readers“

Rubrik „Comics and Graphic Novels“

Hier finden Sie etwas zum Lachen und Schmunzeln. Was mir persönlich nicht so gut gefällt: man findet hier zum größten Teil die Novellen nicht komplett, sondern kapitelweise.


Spass: „Super Team Ultra Force #1“


Spass: „Run By The Gun #1“


Spass: „GlobWorld #0“

Fazit

Die in diesem Post vorgestellten Angebote sind bei weitem nicht alles, was Sie auf Hundred Zeros finden können. Ich kann nicht genau sagen, ob wirklich alle eBooks wirklich nützlich sind, aber ich vermute, dass hier jeder wenigstens ein paar für ihn (oder sie) interessante Werke findet.

(dpe)

Kategorien
Design HTML/CSS

CSS3 und Internet Explorer: nützliche Werkzeuge und Quellen

Ohne CSS3 geht heute nichts mehr. Schon seit ein paar Jahren wird es fast überall in der Webseitengestaltung verwendet. Kein Wunder, denn CSS3 bietet dem Designer schöne Möglichkeiten. Schauen wir aber auf die andere Seite der Medaille, sehen wir dort Kompatibilitätsprobleme mit den verschiedensten Browsern. Als besonders problematisch stellt sich traditionell der Internet Explorer dar. Aus diesem Grunde haben wir ein paar Quellen zusammengestellt, die sich nicht nur, aber insbesondere im Zusammenhang mit der Verwendung von CSS3 im Internet Explorer als nützlich erweisen können.


(Bildquelle: mauricesvay auf Flickr | CC-BY-SA)

Modernizr

Modernizr ist eine JavaScript-Bibliothek. Einmal eingebunden, sorgt sie für eine möglichst weitgehende Standardunterstützung mit entsprechenden Fallbacks, wo erforderlich, des jeweiligen Browsers.


Modernizr

CanIuse

CanIuse ist eine sehr nützliche Quelle, welche alle Informationen bezüglich der Browserunterstützung aller CSS3-Funktionen enthält.


Caniuse mit sehr ausführlichen Informationen zur Browser-Unterstützung

HTML5 Please

Diese schöne Website hat ähnlich wie das oben erwähnte Caniuse zahlreiche Infos über die Browser-Unterstützung von CSS3 und HTML5. Und das auch noch mit einem schickeren Design!


HTML5 Please ist ebenfalls sehr informativ, was die Browser-Unterstützung angeht

CSS3 Please!

Bei diesem Tool lassen sich CSS3-Effekte ein- und ausschalten. Auch ist es möglich, eine Vorschau zu erstellen und dabei die Funktionsweise zu begreifen. Sehr nützlich!


CSS3 Please! Ein Ausschnitt

DocHub

Wiederum eine gute Informationsquelle bezüglich der Browser-Unterstützung, der Syntax, den Werten und mehr. Klickt man in der linken Menüleiste auf den Namen einer CSS3-Funktion, erhält man ziemlich alle zugehörigen Informationen. Am Rande sei erwähnt, dass DocHub Infos nicht nur zu CSS3-Funktionen enthält, sondern auch zu HTML, JavaScript, jQuery und einigen weiteren im Webdesign wichtigen Fragestellungen. Meiner Meinung nach ein gutes Minitutorial!


DocHub: ein nettes Minitutorial

CSS3-Unterstützung für Internet Explorer

Hier finden Sie IE-CSS3: ein Skript, das einige CSS3-Funktionen mit dem Internet Explorer kompatibel macht. IE-CSS3 baut diese Funktionen mittels Vektor Markup Language um, sodass diese im Endeffekt vom Internet Explorer unterstützt werden. Das Skript kann kostenlos heruntergeladen werden.


IE-CSS3: baut einige CSS3-Funktionen so um, dass sie im Internet Explorer funktionieren

Transformie

Transformie ist ein JavaScript-Plugin, das CSS-Befehle in die IE Filter-API übersetzt, oder besser gesagt, transformiert. Daher auch der Name des Plugin. Transformie kann kostenlos heruntergeladen und in die eigene Webseite eingebaut werden. Praktisch vor allem, wenn es um CSS3-Transformationen geht!


Transformie: ein CSS-Befehle transformierendes Plugin

HTML5 rocks

Eine Sammlung verschiedener Tutorials und Beiträge über CSS3 und HTML5. Eine schöne Quelle, nicht nur für Rocker!


HTML5 Rocks: Tutorialsammlung

Weitere Quellen

Zum Schluss seien noch zwei Beiträge unserer Kollegen von Smashing Magazine genannt, die tief ins Detail gehen:

(dpe)

Kategorien
Inspiration Showcases

Designanfänge: Inspiration aus der Geschichte beziehen

Heute machen wir enorm viele Sachen mit dem Computer. Wir schreiben, lesen, zeichnen, designen, bearbeiten Fotos und kommunizieren. Zahlreiche Programme, Editoren, Sozialplattformen sind fester Bestandteils des Lebens der meisten hier, insbesondere derer, die ihr Berufsleben dem Internet widmen. Doch auch in der heutigen Computerwelt darf man die Geschichte nicht vergessen. Wer ein Webdesigner (und nicht nur) ist, sollte sich mit den Ursprüngen seiner Arbeit beschäftigen. Um die Ursprünge des Designs wird es im heutigen Beitrag gehen.


(Bildquelle: Design Decoration Craft auf Flickr | CC-BY-SA)

Smarthistory

Die erste Quelle kultureller Geschichte ist Smarthistory. Smarthistory beschäftigt sich mit Kunstgeschichte, beginnend mit  Höhlenmalerei. Die Webseite nennt sich selbst Lehrbuch und strebt das Ziel an, auf verständliche Art und Weise alle möglichen Aspekte der Kunstgeschichte zu vermitteln. Hier findet man zahlreiche Videos, Bilder, Biographien, Zeitlinien und viel mehr. In der oberen Menüleiste stehen die Rubriken „Time“, „Style“, „Artist“. Diese Aufteilung ermöglicht es, Informationen nach verschiedenen Kriterien zu suchen. Ich bin in der Rubrik „Time“ auf „1500 – 1600 End of the Renaissance and the Reformation“ gegangen und sofort stand mir ein Beitrag zu Verfügung, der den Begriff „Renaissance“ ausführlich erklärte. Links befindet sich ein Menü mit allen Zeitabschnitten in der Renaissance. Klickt man auf einen Zeitabschnitt, beispielsweise auf „High Renaissance“, so öffnet sich eine weitere Menüleiste, die alle Künstler samt ihren Biographien und berühmten Werken auflistet. Um über einen Künstler mehr zu erfahren, einfach auf seinen Namen klicken und schon stehen zahlreiche Texte, Fotos und Videos zur Verfügung.


Menü mit Rubriken


Menü mit Zeitaufteilung einer Kunstepoche sowie berühmteste Künstler dieser Epoche. Hier: High Renaissance mit Leonardo da Vinci

Smarthistory ist meiner Meinung nach sehr empfehlenswert, besonders wenn Sie sich für die Kunstgeschichte von ihren Anfängen bis zu den sechziger Jahren interessieren.

Design Is History

Eine weitere sehr gute Recherchequelle für Geschichtsinteressierte ist Design Is History, eine informative Webseite, welche von Dominik Flask betrieben wird. Diese Webseite wurde als Lernhilfe für Graphikdesigner konstruiert. Man kann ab dem Jahr 1450 starten, der Zeit, wo der Buchdruck erfunden wurde und bis zum Design der Gegenwart fortfahren. Die Webseite hat eine sehr schöne Typographie und wirkt nicht überladen, was mir persönlich gut gefällt.


Design Is History – Startseite: ein Ausschnitt

Einige Werke aus den vergangenen Jahren

Ich habe für Sie ein paar Kreationen aus jeder Rubrik als Beispiel für das Angebot von Design Is History angehängt.


Erfindung des Buchdrucks


Peter Behrens: Architektur


El Lissitsky: Propagandabilder


Ladislav Sutnar: Informationsgraphiken


Lou Dorfsman: Gastrotypographicalassemblage


The Face: eine Modezeitschrift aus den 80-ern, designed von Neville Brody


Sagmeister: book Things I Have Learned in My Life So Far

Im Weiteren findet man auf DesignIsHistory nützliche Quellen, welche sich mit den Themen Typographie, Design und Geschichte beschäftigen. Sie finden hier auch Buchempfehlungen, Interviews mit Designern sowie nützliche Artikelquellen.

Graphics Atlas

Bei dem Graphics Atlas handelt es sich um eine Online-Quelle, die verschiedene Funktionen für die Erforschung von Graphiken und Druck enthält. Das scheint etwas für Leute zu sein, die sich wirklich viel mit Kunstgeschichte beschäftigen, ist aber meiner Meinung nach für jeden interessant. Im oberen Menü befinden sich die Rubriken „Guided Tour“, „Compare“ und „Identification“. Ich habe mir angesehen, was in jeder Rubrik steckt. Unter „Guided Tour“ sind Verfahren zur Erstellung von Grafiken aufgelistet. Diese lassen sich unter „Visual Browser“ direkt an Beispielbildern darstellen. Unter „Timeline“ findet man die Zeitinfos zu jedem Verfahren. Um die Beispiele zu sehen, bewegen Sie den Cursor auf den Namen eines Verfahrens und schon wird eine Liste von dazugehörigen Beispielen angezeigt.


Anzeigemöglichkeit Timeline


Anzeigemöglichkeit: Visual Browser


Anzeigemöglichkeit: Browse

Klickt man auf eine Technik, bekommt man ein Beispiel mit ausführlicher Beschreibung zu sehen. Mit Hilfe weiterer Menüs ist es möglich, sich über die speziellen Merkmale einer Technik zu informieren. In der Rubrik „Identifikation“ finden Sie alle Merkmale ausführlich dargestellt. Was ist charakteristisch für ein Polaroid-Foto? Welches Fotopapier wurde da verwendet? Welches Format? Wie ist die Qualität der Bilder? Das alles und viel mehr ist in einfacher, aber ausführlicher Weise beantwortet und mit anschaulichen Beispielen unterlegt.


Beispiel: ein Polaroid-Foto


Identifikation eines Polaroid-Bildes

Fazit: Im heutigen Beitrag habe ich Ihnen drei schöne Quellen vorgestellt, mit denen man vieles über Anfänge der Kunst und des Design lernen kann. Es ist nämlich sehr nützlich, sich in den Anfängen des eigenen Berufs auszukennen. Diese Webseiten sind aber auch für Nicht-Designer interessant und empfehlenswert. Nehmen Sie sich also ein wenig Zeit und lesen Sie über die spannende Kunst- und Designentwicklung. Sicherlich werden Sie dabei Spass haben!

(dpe)

Kategorien
Design HTML/CSS Inspiration Showcases

Schöne Quellen für nützliche Code-Snippets

Snippets, diese kleinen Quellcode-Stücke, sind stets nützlich. Sie ersparen unheimlich viel Zeit bei der Entwicklung einer Webseite, weil man sie als schon fertige Funktionen leicht in den Code einbinden kann. Diese Funktionen können natürlich von Ihnen selbst entwickelt werden. Es gibt aber auch zahlreiche Quellen, auf denen man verschiedene Snippets für jeden Geschmack und Gebrauch findet. Heute präsentieren wir Ihnen eine Liste von Quellen, die viele schöne Snippets anbieten.


Welche Snippets gibt es? Ein kleiner Ausschnitt

Snippets der Community CSS-Tricks

Ich beginne damit, was ich auf der Webseite der Community CSS-Tricks gefunden habe. Das ist nämlich ein wahrer Schatzkasten. Die Snippets sind hier nach Kategorien aufgeteilt und als ein freundlich-buntes Menü zusammengefasst (siehe Titelbild). Klickt man auf eine beliebige Snippet-Kategorie, beispielsweise auf „CSS“, öffnen sich alle Tags, welche sich in dieser Kategorie befinden.


So sieht es aus, wenn man eine Kategorie anklickt (hier: Kategorie „CSS“)

Unter jedem Tag befindet sich ein dem Namen des Tags entsprechendes Snippet. Alles darf frei, sowohl für private als auch für kommerzielle Zwecke verwendet werden.


Beispiel für ein CSS-Snippet

Möglich ist es, eigene Snippets vorzuschlagen. Dafür gehen Sie einfach auf „Submit one“, kopieren den Code ins entsprechende Feld, geben dem Snippet einen Namen und das war’s schon. Ihr Snippet wird überprüft, getestet und online gestellt, falls die Community ihn nützlich findet.

Popular CSS Snippets

Hier finden Sie eine Ansammlung von CSS-Snippets zu diversen Themen. Auch da dürfen Sie Snippets sowohl zum privaten, als auch zum kommerziellen Gebrauch verwenden.


Snippets-Menü: ein Ausschnitt

Kategorien
Apps Design Essentials Freebies, Tools und Templates Programmierung UI/UX Webdesign

Sketchkit, iOS Design Stencils, iOS 5 GUI PSD: Wireframes für iPhone-Apps schnell erstellen

Bevor man mit dem Design einer Webseite beginnt, wird normalerweise ein Wireframe erstellt. Ohne Wireframe geht man das Risiko ein, die ganze Arbeit wieder von Anfang an machen zu müssen, falls dem Kunden etwas nicht gefällt. Ist allerdings ein fertiger Prototyp vorhanden, ändert man im Idealfall nur ein paar Kleinigkeiten, um den Kunden zufrieden zu stellen. Heute stelle ich Ihnen drei interessante Möglichkeiten vor, die eine qualitative Erstellung von Wireframes für iPhone 4S-Applikationen erlauben.


(Bildquelle: baldiri auf Flickr | CC-BY-SA)

Wireframes mit Keynote erstellen? Ja, das geht!

Apple’s Keynote ist ein Supertool, um schöne Präsentationen zu gestalten. Alles, was man braucht, ist hier geboten: eine grosse Auswahl an Vorlagen, Tabellen, Diagrammen, Graphiken uvm. Die Erstellung einer Präsentation in Keynote ist bequem und funktioniert sehr schnell. Aber in diesem Post soll es nicht darum gehen, sondern um Sketchkit. Sketchkit ist eine Reihe von Vorlagen, welche herunter geladen und in Keynote verwendet werden können. Mit Hilfe dieser Vorlagen ist es möglich, Wireframes für iPhone zu erstellen. Dabei können alle Beschriftungen und Elemente beliebig bearbeitet und angepasst werden.


Sketchkit Wireframes: ein Ausschnitt

Im Sketchkit sind vorgezeichnete iOS-Elemente enthalten. Diese erlauben eine qualitative Wireframe-Erstellung für iPhone 4S-Applikationen. Navjot Pawera, der Entwickler von Sketchkit, bietet Vorlagen auf Gumroad an. Aber keine Panik: erstens funktioniert es hier nach dem System „pay what you want“ und zweitens bekommt man die Vorlagen per Email zugeschickt, auch wenn einfach eine Null eingetippt und die eigene Emailadresse eingegeben wird.


Das Sketchkit wird bequem per Email zugeschickt. Keine Sorge: es funktioniert nach dem „pay what you want“-Prinzip

iOS Design Stencils

iOS Design Stencils sind die sogenannten Schablonen zur Entwicklung von Wireframes für iPhone-, iPad- und iPod-Applikationen. iOS Design Stencils wurden von David Morford per Hand entwickelt. Alle diese Schablonen können problemlos skaliert und angepasst werden. Exportiert werden können sie in jedes Vektor-Format, welches von OmniGraffle unterstützt wird.


iOS Design Stencils: ein Ausschnitt

iOS 5 GUI PSD

Bei iOS 5 GUI PSD handelt es sich um Photoshop-Templates, welche bei Entwicklungen von Apps für iPhone 4S eingesetzt werden können. Die Entwickler dieser Templates haben eine große Arbeit geleistet und jedes Detail von iPhone 4S in Photoshop nachgebaut. So lassen sich die Apps viel bequemer und qualitativer entwickeln. iOS 5 GUI PSD-Templates stehen Ihnen zum kostenlosen Download bereit.


iOS 5 GUI PSD: coole Photoshop-Templates, welche die Entwicklung von iPhone-Apps enorm erleichtern

Fazit:

Heute habe ich Ihnen drei Möglichkeiten vorgestellt, Wireframes für iPhone 4S zu erstellen. Natürlich findet man im Netz weit mehr Tools, Photoshop-Templates, Schablonen und Weiteres. Diese drei hielt ich persönlich jedoch für besonders hilfreich und zum anderen sind sie kostenlos.

(dpe)

Kategorien
Apps Programmierung

Little Big Details sammelt Kleinigkeiten, die Web Apps besser machen

Was wäre unser Leben ohne kleine Details, welche wir oft überhaupt nicht merken? Vielleicht sind nicht alle davon wirklich notwendig, aber sie machen den Alltag viel schöner, als er ohne sie wäre. Webentwicklung ist hier keine Ausnahme. Besonders im UI-Design sind die kleinen Details unentbehrlich. Sie machen das Ganze anwendbar und angenehm zu bedienen. Es ist sehr inspirierend, diese Details aufzuspüren und sich mit ihnen auseinander zu setzen. Heute stellen wir Ihnen eine Plattform vor, die sich genau damit beschäftigt: Little Big Details.


(Bildquelle: ruffrootcreative auf Flickr | CC-BY-SA)

Was ist „Little Big Details“?

Little Big Details ist eine Plattform, die kleine interessante Funktionen sammelt, welche im UI-Design verwendet werden. Die Plattform wird von Floris und Andrew betrieben. Die Funktionen werden anhand eines Screenshot und einer kurzen Beschreibung vorgestellt. Sie sind zusätzlich in verschiedene Rubriken unterteilt, was das Ganze übersichtlicher macht. Ich habe für Sie nach meinem Geschmack ein paar Beispiele rausgesucht:.

Rubrik „Flickr“

Bis jetzt wurden unter dieser Rubrik vier Funktionen präsentiert, welche bei Flickr, der bekannten Bilddatenbank, im Gebrauch sind.

Error message

Will man ein Foto aus Flickr auf Twitter posten und tippt man mehr als 140 Zeichen ein, erscheint eine ungewöhnliche Fehlermeldung. Sie zeigt einem sehr deutlich, dass Romane an der Stelle, wo nur ein paar Worte genügen, fehl am Platz sind.


Lustige Flickr-Error-Message

Prozentsatz beim Upload im Tab

Eine bequeme Sache: wenn Sie Ihre Fotos bei Flickr hochladen, können Sie direkt in einem Tab sehen, wie weit der Ladevorgang fortgeschritten ist. Dabei können Sie ruhig andere Webseiten besuchen und müssen nicht permanent nachschauen, ob das Bild nun endlich hochgeladen ist. Natürlich dürfen Sie den Tab nicht schließen…


Fotos hochladen bei Flickr: bequem im Tab den Fortschritt verfolgen

Rubrik „Favicons“

Unter dieser Rubrik werden ein paar Webseiten mit originellen Favicons vorgestellt. Mir persönlich hat folgendes von Mixcloud besonders gut gefallen.

Mixcloud-Favicon

Mixcloud ist das erste Beispiel mit einem sehr interessanten Favicon. Mixcloud ist eine Musikplattform und ihr Favicon stellt einen „Play“-Knopf dar. Dabei zeigt das Favicon, ob die Musik gerade abgespielt wird, oder nicht. Meiner Meinung nach eine sehr originelle Idee!


Favicon von Mixcloud

Google Kalender Favicon

Ein zweites Beispiel stammt aus dem bekannten Google Kalender. Das Favicon des Kalenders zeigt das aktuelle Datum an.


Google Kalender-Favicon

Rubrik „Upload“

Lustig fand ich auch die Idee von Dropbox. Verbleibt eine lange Ladezeit, so gibt der Dienst den mehr oder weniger nützlichen Tipp, sich ein Snickers zu nehmen, um die Wartezeiten erfolgreich zu überbrücken. Nett, hoffentlich werden aber die Ladezeiten nicht oft so lang sein, sonst leidet die Figur darunter!

Dropbox: lange Ladezeit? Nimm dir ein Snickers!


Dropbox: netter Tipp bei langen Ladezeiten

Rubrik „Submission“

Hier sind ein paar originelle Vorlagen aufgeführt. Mein erstes Beispiel ist die Vorlage von Pinterest, des nächsten Social Network-Superstars.

Pinterest: ein Foto posten

Postet man ein Bild, wird normalerweise eine Beschreibung hinzugefügt. Ist man allerdings etwas fantasielos, was die Beschreibung angeht, so ist es möglich, die ursprüngliche Beschreibung zu markieren. Diese wird sofort übernommen.


Pinterest macht einem die  Beschriftung leicht

Google Maps: ein Surfer als Icon

Und zum Schluss noch eine niedliche Kreation von Google Maps: ein ungewöhnliches Street-View-Icon von Honolulu.


Google Maps: ein süsses Street Icon

(dpe)

Kategorien
Design Essentials Icons & Fonts UI/UX

Kostenlose Icons und ein UI-Set für das nächste Webprojekt

Die Benutzerschnittstelle ist der Punkt, an dem der Benutzer mit dem Computer in Kontakt gerät. Die Kommunikation zwischen dem Menschen und der Maschine wird durch verschiedene Maßnahmen erleichtert. Die Verwendung von Symbolen zur Verbesserung der Interaktionsmöglichkeiten hat sich bewährt. Und auch wenn es ohne Icons geht, sind Bildzeichen doch bequemer, informativer und generell sympatischer als Textlinks. Das Netz ist voll von gebrauchsfertigen Varianten. Leider sind nicht alle qualitativ hochwertig.  Ich habe mich auf die Suche nach den Trüffeln begeben  und präsentiere meine Funde im folgenden Beitrag.


(Bildquelle: hansdorsch auf Flickr | CC-BY-SA)

Kostenlose Icons und UI-Sets von Designmodo

Zuerst möchte ich Ihnen ein cooles Inspirationsblog vorstellen: Designmodo. Hier habe ich „>einen guten Beitrag gefunden, der viele kostenlose Icons und UI-Sets für verschiedene Webdienste vorstellt. Klickt man auf ein vorgestelltes Freebie, beispielsweise auf ein Icon-Set, erscheint ein detaillierter Beitrag zu genau diesem Freebie.  Ein Beispiel:

Pandora UI Set für Benutzeroberfläche

Die komplette Information zu diesem Set befindet sich hier. Das Set ist kostenlos, es ist zur Entwicklung von iPhone- und iPad-Applikationen geeignet. Alle Icons sind im PSD-Format vorhanden.


Pandora UI-Set: ein Ausschnitt

Koloria: ein weiteres kostenloses Icon-Set

Dieses Set wurde von Andy Gongea kreiert. Es soll eine breite Nutzungspalette decken: man kann es sowohl zur Entwicklung von Apps verwenden, als auch zur Entwicklung von Portfolios, Produktseiten etc. Die Icons lassen sich im PSD-Format downloaden. Das Set beinhaltet Bildzeichen der Grösse 32 × 32 Pixel. Man kann Koloria sowohl privat als auch kommerziell verwenden, solange man auf die ursprüngliche Webseite verweist.

Koloria Icon-Set: ein Ausschnitt

Kategorien
Essentials Freebies, Tools und Templates

Themen kuratieren und offline lesen mit Readlists

Kennen Sie das? Sie haben einen sehr interessanten Beitrag gefunden, den Sie gerne später in aller Ruhe durchlesen möchten und dabei wissen Sie, dass Sie zu diesem Zeitpunkt wahrscheinlich keine Internetverbindung haben werden. Hier bietet sich ein Dienst an, der die gewünschten Webseiten oder Beiträge als Offline-Version bereit hält. Heute stellen wir Ihnen mit Readlists einen Dienst vor, der nicht nur diese Aufgabe hervorragend erfüllt.


(Bildquelle: jeff_golden auf Flickr | CC-BY-SA)

Was ist „Readlists“?

Readlists ist ein Onlineservice, der das Lesen von Beiträgen, Testberichten, Nachrichten, eben beliebigen Internet-Textcontent ohne Internetverbindug erlaubt. Hier brauchen Sie sich nicht anzumelden. Die Möglichkeit besteht aber, schnell und kostenfrei. Dafür vergeben Sie sich einen Usernamen und ein Password und geben Ihre E-Mail-Adresse an.

Um die gewünschten Beiträge in eine bequeme Offline-Version umzuwandeln, klicken Sie auf „Make a readlist“. Dann kopieren Sie den Link zum gewünschten Beitrag in den Platzhalter und drücken auf „Add“. Ich wollte den Beitrag über drei interessante Infografiken für Developer in einer Offline-Version lesen. Dazu habe ich einen Link zu diesem Beitrag aus Dr. Web in den Platzhalter kopiert und so sieht es aus:


Verwendung von Readlists: Links zu den Beiträgen lassen sich in den speziellen Platzhalter einfügen

Auf den Platzhalter lassen sich Links kopieren, bis die Leseliste komplett ist. Zusätzlich kann man der erstellten Leseliste noch einen Namen verleihen, z.B. „Webdesign“ oder „Sport“, aber auch „Was geschah am 11. September wirklich?“  und eine kurze Beschreibung hinzufügen. Macht man es, so sind bei einer grösseren Menge von Beiträgen eine gute Klassifizierung und Übersicht vorhanden. Zudem lassen sich so Listen zu spezifischen Themen kuratieren.


Um der Leseliste System zu verleihen, sollte man ihr einen Namen geben und evtl. noch eine Beschreibung hinzufügen

Hier ist ein Beispiel einer themenbezogenen Leseliste, welche vom User Joepie erstellt wurde. Nutzt man Readlists auf diese Weise, kann es auch im akademischen Geschäft von Nutzen sein:


Ein gutes Beispiel für eine Leseliste

Leseliste erstellt und weiter?

Readlists fasst die Beiträge der erstellten Liste zusammen und schickt diese als eine ePUB-, oder Kindledatei an Kindle, iPhone, iPad oder Readmill. Sie wählen aus, wohin Sie Ihre Leseliste erhalten möchten. Ich würde empfehlen, die Beiträge der Leseliste an die eigene E-Mail-Adresse zu verschicken und sie dann auf Ihr mobiles Gerät herunter zu laden (solange Sie noch die Internetverbindung haben!). Kindlenutzer verfügen über eine spezielle E-Mail-Adresse bei Amazon, an die die Readlist auch gesendet werden kann. Die Beiträge werden Ihnen als eine ePUB- oder Kindle-Datei geschickt und Sie können diese mit einer App öffnen, die das Format lesen kann.


Versand per Email: sehr bequem und einfach gemacht

Zum Schluss…

Was ich persönlich als einen grossen Nachteil empfinde, ist die Tatsache, dass Readlists die Beiträge nicht als PDF generieren kann. So ist man auf Reader angewiesen, die die zugeschickte Datei im ePUB- oder Kinde-Format öffnen können. Im Übrigen werden sich Seitenbetreiber nicht so sehr über Readlists freuen. Diese andere Seite der Medaille wird intensiv ausdiskutiert, wie beispielsweise hier. Der Dienst „nimmt“ quasi fremde Beiträge und liefert diese an den Nutzer weiter. Dabei werden die Personen, welche die Inhalte veröffentlicht haben, in keinster Weise um Erlaubnis gefragt. Die ursprüngliche Webseite als solche verliert dann ihre Attraktivität, muss nicht mehr besucht werden und kann sich so schwerer refinanzieren. Für den Nutzer, der die Beiträge ohne lästige Werbung und ohne andere Angebote der Webseite lesen will, ist der Dienst natürlich vorteilhaft. Die optische Qualität der gespeicherten Beiträge ist hervorragend, sowohl auf dem Laptop als auch auf den mobilen Geräten. Allerdings kann man die Bildergröße in generierten Dateien nicht beliebig skalieren. Dafür ist das Interface der mobilen Version hervorragend für schnelles „Ablegen“ und „Mitnehmen“ von Beiträgen geeignet.

(dpe)

Kategorien
E-Business Social Media

Chrome: Facebook Disconnect und ShareMeNot bremsen Facebooks Datenhunger

Und schon wieder geht es um Facebook, die soziale Plattform, die die Welt spaltet. Denn einerseits ist es ja bequem, mit lieben Freunden Kontakt zu halten und fast minütlich eigene Interessen, Gefühle, Gedanken oder Fotos teilen zu können. Andererseits gerät Facebook immer wieder in die Kritik wegen des extrem laschen Umgangs mit den Daten seiner Nutzer. Heute geht es darum, wie man die auf fast allen Webseiten gegenwärtige Facebook-Verbindung entfernen kann. Um das zu erreichen, bietet der Chrome Web Store eine Erweiterung mit sehr deutlichem Namen an: Facebook Disconnect. Und Mitarbeiter der Universität für Computerscience in Washington haben eine ähnliche Erweiterung entwickelt, welche die selbe Aufgabe erfüllt: ShareMeNot. Wir stellen beide kurz vor.


(Bildquelle: birgerking auf Flickr | CC-BY-SA)

Facebook Disconnect: eine Erweiterung zum Blockieren von Facebook-Verbindungen

Facebook Disconnect ist eine Chrome Erweiterung, welche von Brian Kennish entwickelt wurde. Mit ihrer Hilfe ist es möglich, die Facebook-Verbindung auf vielen Webseiten zu deaktivieren. Wofür ist das gut? Nun, ich möchte hier zwei Gründe nennen, welche mir sehr wichtig zu sein scheinen. Erstens, verkürzt sich die Ladezeit einer Webseite. Facebook-Verknüpfung ist ja meistens mit sehr viel Inhalt gefüllt und das beansprucht viel Platz, was sich in den Ladezeiten der Webseite wiederspiegelt.


Facebook-Verbindung beansprucht viel Platz

Zweitens werden durch die Facebook-Verknüpfung alle Informationen über Ihr Surfverhalten an diese Plattform weitergeleitet. So werden Ihre Daten gesammelt und wie Sie es wohl selbst wissen, bleiben diese nicht ganz geheim. Ich war also sehr froh darum, die Facebook Disconnect Anwendung entdeckt zu haben und habe sie sofort ausprobiert. Übrigens ist die Anwendung ganz kostenfrei.

Befreiung von der Facebook-Allgegenwart

Ich mache es ja gerne ganz genau. Ich gehe gerne alle Schritte, vom Download bis zur Verwendung durch und liste danach alles für Sie auf. Im Falle der Facebook Disconnect gab es lediglich nur einen Schritt: auf „Hinzufügen“ zu klicken. Das war’s. Den Fakt, dass die Erweiterung tatsächlich funktioniert, merkt man, indem man eine Webseite öffnet und keinen Facebook-Button mehr findet. Ich halte es für wichtig, dies hier zu erwähnen, weil ich selbst ein paar Minuten lang nach dem Icon von Facebook Disconnect suchte und nichts in meiner Browserleiste fand. Dann stellte ich mir die Frage, ob die Erweiterung überhaupt da ist. Ich erhielt die Bestätigung, nachdem ich die Webseite von Spiegel öffnete und den so gut bekannten Facebook-Button nicht mehr sah.


Zum Vergleich: ein Spiegel-Artikel ohne Anwendung „Facebook Disconnect“


Da fehlt doch was: ein Spiegel-Artikel, nachdem die Anwendung installiert wurde

Ich empfehle es also, Facebook Disconnect zu installieren. Schließlich sind wir nicht dazu verpflichtet, Facebooks Datenhunger bereitwillig zu stillen.

ShareMeNot: keine Verfolgung von Sozialplattformen-Buttons mehr

ShareMeNot ist eine Chrome-Erweiterung, welche ähnlich wie Facebook Disconnect funktioniert. Nur wird hier die Verbindung nicht nur zu Facebook, sondern auch zu mehreren bekannten sozialen Netzwerken wie Twitter, Google+ u.a. deaktiviert. Die Erweiterung verhindert, dass beim Besuch irgendeiner Webseite über die Verknüpfungen mit Sozialplattformen Informationsaustausch stattfindet. Um ShareMeNot zu installieren, gehen Sie entweder auf die Download-Seite der Computerscience-Community oder auf den Chrome Web Store. Nach der Installation erscheint das Icon der Anwendung in ihrer Browser-Menüleiste. Nun können Sie zum Testen irgendeinen Beitrag von Spiegel aufmachen. Was fällt Ihnen auf? Genau, anstelle des Facebook-Like-Buttons befindet sich das ShareMeNot-Icon! Wollen Sie auf einmal den Beitrag doch mit Facebook oder einer anderen Plattform verknüpfen, klicken Sie einfach auf das Icon der Erweiterung. Dann wird die Verknüpfung zum entsprechenden sozialen Netzwerk wieder aktiviert.


ShareMeNot: so sieht es nach der Installation der Erweiterung aus

Was ich bei ShareMeNot sehr gut finde, ist die Möglichkeit, sich auszusuchen, von welchen Sozialplattformen die Verknüpfungen blockiert werden sollen. Dafür klicken Sie auf das Icon der Erweiterung. Ein Fenster erscheint und darauf sehen Sie die Namen von einigen bekannten Sozialplattformen mit einem Häkchen neben dran. Nun können Sie das Häkchen an den Stellen entfernen, zu welchen die Verknüpfung erhalten werden soll. Die Verknüpfung zu diesem Netzwerk bleibt dann auf allen Seiten, wo sie existiert, erhalten.


Sie können sich aussuchen, zu welchen Sozialnetzwerken die Verknüpfung erhalten bleibt

Man muss noch beachten, dass die Erweiterung ein Teil des Forschungsprojektes einer Gruppe der Washingtoner Universität ist und (noch) nicht für den allgemeinen Gebrauch empfohlen ist. Das bedeutet, es kann durchaus sein, dass sie nicht auf allen Webseiten funktioniert. Aus diesem Grunde bittet die Forschergruppe um entsprechende Rückmeldung, um die Anwendung zu verbessern.

Fazit: Natürlich ist es nicht sichergestellt, dass die beiden vorgestellten Erweiterungen auf allen Webseiten einwandfrei funktionieren. Zumindest in meinem Testfeld funktionierte die Blockade stets einwandfrei. Ich persönlich halte diese Erweiterungen für sehr schöne Projekte, welche dazu beitragen, die Benutzerdaten auch tatsächlich zu schützen.

(dpe)

Kategorien
(Kostenlose) Services Essentials

Nützliche Dienste: Supportdetails, Enable Javascript & Co

Es ist vielleicht schwer vorstellbar, aber nicht wirklich jeder Sterbliche weiss ganz genau, was ein Browser ist. Informationen bezüglich der Bildschirmauflösung oder der eigenen IP-Adresse können auch sehr wenige im Schlaf aufsagen. Was soll ein Benutzer tun, wenn er plötzlich diese Information dringend braucht? Wir haben für Sie eine Reihe von verschiedenen Tools gefunden, die Fragen solcher Art beantworten können.


(Bildquelle: Valerie Everett auf Flickr | CC-BY-SA)

Supportdetails

Ich beginne mit Supportdetails. Es handelt sich hier um ein Tool, welches die Informationen bezüglich des Browser, der JavaScript-Version, der Flash-Version, der Bildschirmauflösung und auch der IP-Adresse sofort nach Aufruf der Website ausgibt. Sie müssen lediglich Ihren Namen und Ihre Emailadresse angeben und schon bekommen Sie alle von Ihnen benötigten Informationen in Ihr elektronisches Postfach zugeschickt. Tun Sie das nicht, bleibt es bei der Anzeige der Infos im Browser.


Supportdetails: ein Ausschnitt

Enable JavaScript

Ohne JavaScript läuft praktisch nichts mehr. Fast alle Webseiten verwenden diese Sprache. Ist JavaScript in Ihrem Browser deaktiviert, so ist es nicht mehr möglich, Websites vollumfänglich zu verwenden. Auf dieser Webseite erklären Toni Podmanicki, Paul Irish und Jeremey Hill, wie man JavaScript in den einzelnen Browsern aktivieren kann. Was ich zusätzlich noch schön bei dieser Webseite finde: man hat eine ziemlich breite Sprachauswahl!


JavaScript aktivieren: ein Ausschnitt

BrowserStack: Webseiten in verschiedenen Browsern testen

BrowserStack ist ein Dienst, welcher es erlaubt,  Webseiten in verschiedenen Browsern zu testen. BrowserStack führt ein Cross-Browser-Testing durch. Das bedeutet, ein Entwickler kann seine Webseite in verschiedenen Browsern öffnen und sie dort „life“ ausprobieren. Dazu noch bietet BrowserStack diverse Tools und Funktionen für Webdeveloper. Der Dienst an sich ist nicht kostenlos, allerdings besteht hier die Möglichkeit, ihn 60 Minuten lang kostenfrei auszuprobieren. Danach kann man sich entscheiden, ob es sich lohnt, dafür zu bezahlen. Meiner Meinung nach lohnt es sich für professionelle Webentwickler sehr, da der Dienst laut verschiedener unabhängiger Reviews gute Arbeit leistet und einiges an Zeit erspart.


Browserstack  führt Cross-Browser-Testing durch

Pop-Up Blocker testen

Lästige Pop-Ups gehen schnell auf den Wecker. Hier können Sie ausprobieren, wie gut Ihre Pop-Up Blocker funktionieren. Eine schöne Sache, sowohl für jemanden, der einen eigenen Pop-Up-Blocker entwickelt, als auch für jemanden, der einen solchen für privaten Gebrauch einsetzen möchte.


PopupTest: Ergebnis eines Test

NeoLoad: ein Tool zum Testen des Web

Noch ein nützliches Tool, um Tests durchzuführen. Diesmal sind hier nicht Browser-Anwendungen das Ziel. NeoLoad ist auf der Webseite von Neotys verfügbar. Mit diesem Toll können Sie sowohl Webanwendungen testen, als auch mobile Tests durchführen. NeoLoad ist  nicht kostenlos. Es besteht aber die Möglichkeit, eine kostenfreie 30-Tage-Testversion auszuprobieren.


NeoLoad: ein Ausschnitt aus der Demo-Seite

(dpe)