Kategorien
(Kostenlose) Services Essentials Freebies, Tools und Templates

Mockuuups Studio: Desktop-App für die ansprechende Projekt-Präsentation

Das Auge isst mit. Es ist nur logisch, dass ein digitales Produkt eine Präsentation braucht, die es im Einsatz zeigt. Die Desktop-App Mockuuups Studio leistet genau das.

Kategorien
(Kostenlose) Services Essentials

Dynamic Switching: ein Content Delivery Network ist gut, mehrere sind besser

Stell dir dich vor, wie du durchs Web surfst. Du klickst einen Link an, wartest darauf dass die Seite lädt … lädt sie immer noch? Du verlierst die Geduld, schließt die Seite und versuchst einen weiteren Link. Lange Ladezeiten sind das Todesurteil für eine Website, besonders weil der heutige Nutzer ungeduldig ist und schnellen Zugang zum Inhalt erwartet, ganz egal von welchem Gerät oder Ort aus. Als Entwickler musst du also sicherstellen, dass der Inhalt – insbesondere Bilder und Videos – so schnell lädt wie möglich und in der bestmöglichen Qualität. Nur so besteht die Chance, den Nutzer zu fesseln.

Egal, von wo deine Besucher kommen, eine konstant schnelle Web-Erfahrung zu liefern, ist entscheidend.

Die Auslieferung deiner Bilder zu erhöhen, wird die Seitenladezeit deutlich verkürzen. Es ist allerdings nicht ganz unkompliziert, da du dich um folgendes kümmern musst:

  1. Optimiere die Bildgrößen und
  2. verbessere die Liefereffizienz, gemessen an Verfügbarkeit, Latenz und Durchsatz.

Um die Anzahl Bytes, die ein Nutzer runterladen muss, um deine Bilder zu sehen, zu reduzieren, musst du jedem Nutzer die richtige Version — Auflösung, Format, Qualität — jedes Bildes liefern. Es reicht nicht, ein Bild einfach auf Minimum zu schrumpfen.

Cloudinary erlaubt Entwicklern eine hochauflösende Kopie eines Bildes hochzuladen und passt es dann automatisch an. So wird das Bild responsiv in jeder beliebigen Auflösung oder Pixeldichte mit der optimalen Qualität und Verschlüsselung ausgeliefert.

Der nächste logische Schritt ist, sicherzugehen, dass die richtige Version des Bildes ausgegeben wird, um die kleinstmögliche Latenz zu erreichen. Content Delivery Networks (CDNs) erlauben dir, Inhalte physikalisch näher an den Endnutzer zu bringen, um die Seitenladezeit zu reduzieren.

Wenn es darum geht, ein CDN auszuwerten, ist die Latenz, Verfügbarkeit und Reichweite von Bedeutung. Eine Lösung mit einem einzigen CDN ist vielleicht „gut genug“. Aber global gesehen passt eine Einheitsgröße nicht immer allen.

CDN-Performance variiert stark zwischen verschiedenen Regionen und kann, abhängig von Provider, Zeit und Inhalt permanent wechseln. Du musst auch bedenken, dass bei jedem CDN Ausfälle und Unterbrechungen möglich sind.

Einige CDNs bieten weltweite Reichweite, während andere mit schnelleren Contentwechseln besser klar kommen. Einige CDNs funktionieren gut mit Live Streaming; andere spezialisieren sich auf Sicherheit und DDoS-Schutz.

Also, warum solltest du dich mit einem einzigen CDN begnügen, welches „die meisten“ deiner Bedürfnisse abdeckt, aber dich in anderen Aspekten zu Kompromissen zwingt, die sich negativ auf die Leistungsfähigkeit deines Projektes auswirken können? Wäre es nicht ideal, die besten Funktionen einer ganzen Auswahl an CDNs zu nutzen?

Der Multi-CDN Ansatz erlaubt dir, ein Netzwerk verschiedener CDN-Anbieter zu einer einzigen umfassenden Auslieferungslösung zusammenzufügen. Mit dieser Methode ist es möglich, verschiedene Nutzer verschiedenen CDN-Lösungen zuzuordnen, basierend auf ihren spezifischen Bedürfnissen.

Websites mit globaler Reichweite – wie eBay, Netflix, Facebook und andere – haben sich alle eine Multi-CDN-Strategie zugelegt. Auch wenn er deutliche Leistungssteigerungen und verbesserte Zuverlässigkeit mit sich bringt, kommt dieser Ansatz auch mit Herausforderungen:

  1. Integration mehrerer CDN Lösungen kann zeitaufwändig sein
  2. Erhöhte Komplexität bei Wartung und Administration
  3. Erhöhte Kosten durch mehrere Verträge
  4. zusätzlicher Betriebsaufwand, der den Fokus vom Kerngeschäft ablenken kann

Cloudinary eliminiert all diese Herausforderungen, indem es die Netzwerke mehrerer CDN-Anbieter transparent zu einem einzigen, weltweit verteilten, Netzwerk kombiniert, was Inhalt, Verfügbarkeit und Reichweite verbessert. Für jede Nutzeranfrage wird der Inhalt von der leistungsstärksten, am besten passenden Quelle ausgegeben.

Die Nutzung von Echtzeit-Kontrolle und eben solchen Leistungsdaten erlaubt Cloudinary den dynamischen Wechsel zwischen den verschiedenen CDN-Anbietern und Netzwerken, um den Endnutzeransprüchen Anfrage für Anfrage zu entsprechen.

Cloudinary kümmert sich um die Konfigurationssynchronisation, die Lastverteilung und die Zuordnung zwischen Domains, so dass bei den verwendeten URLs keine Änderungen erforderlich sind. Mit mehreren CDNs kannst du ohne Mehraufwand Inhalt ausliefern – eine Konsole, ein Vertrag.

So wird es leicht, effizient Inhalt an Nutzer aus aller Welt auszuliefern — von Peking nach Boston, Singapur nach Sao Paulo. Klicke hier für mehr Informationen!

Disclaimer: Der Beitrag wurde gesponsort von Cloudinary, dem Image-Allrounder.

Kategorien
(Kostenlose) Services Design Editoren Essentials

Google Sites: Visueller Homepage-Baukasten mit limitierten Möglichkeiten

Google Sites liegt ganz frisch in deutlich renovierter Form vor und bildet einen integralen Bestandteil der neuerdings „G Suite“ genannten Google Apps-Umgebung. Vor Jahren baute ich die ein oder andere Intranet-Seite mit der Vorversion des Tools. Überzeugend war das nicht. Wie sieht es heutzutage aus?

Kleine Änderung macht Google Sites für die meisten Menschen nutzlos

Die aktuelle Version des Sitebuilders Google Sites richtet sich stärker als bisher an eine klare Zielgruppe, nämlich die Anwender der „G Suite“. Und in dieser Konstellation erfüllt Google Sites eine ganz klare Aufgabe. Es verbindet nämlich die einzelnen Dienste zu einem Ganzen und macht die Informationshappen, die in unterschiedlichen Services schlummern zentral zugänglich – dazu gleich mehr.

sitesmapgif

Was mit Google Sites früher ging, jetzt aber nicht mehr möglich ist, ist jede Form von transaktionsorientierter Außendarstellung. Angenommen, du betreibst ein kleines Business, willst aber kein Geld fürs Hosting ausgeben und kommst mit der Google-Philosophie ansonsten gut klar. Dann konntest du in der bisherigen Version etwa erforderliche Buttons für z.B. Paypal und andere Aktionen über den HTML-Editor in Google Sites verankern. Deine generierte Website bot damit moderne Möglichkeiten der Interaktion. Viele gemeinnützige Einrichtungen nutzten diese Möglichkeiten, um etwa Spenden einzusammeln oder ähnliches.

Die neue Version bietet diese Möglichkeiten nicht mehr. Zwar kannst du auch aktuell den HTML-Code direkt bearbeiten, allerdings schmeißt Google sämtliche programmatischen Elemente automatisiert aus dem Code heraus. Schon das Einbinden eines Facebook-Buttons ist nicht möglich. Verständlich ist das schon, denn natürlich ist auf diese Weise schnell mal Schadcode verbreitet. Dem ist jetzt ein Riegel vorgeschoben.

Damit verliert Google Sites für jedermann, der nicht zur Zielgruppe im engeren Sinne gehört, also kein „G Suite“-Nutzer ist, seinen Wert.

Google Sites: Die Zielgruppe darf sich über komfortable Möglichkeiten freuen

Benutzt dein Unternehmen indes ohnehin schon die volle Palette der „G Suite“, dann ist die Verwendung von Google Sites ein logischer Schritt, der die Informationsverfügbarkeit nochmal deutlich erhöht. Schau dir dieses kurze Video an und dir wird sofort klar, was ich meine:

Google Sites bietet eine tiefgreifende Integration mit den anderen Diensten. Du baust Google Docs, Tabellen, Präsentationen, Karten, Videos aus YouTube, Fotos aus Google+ und sogar Hangouts, sowie Google Apps Scripts im Handumdrehen ein und stellst auf diese Weise Informationen in einen Zusammenhang, der so ansonsten ohne weiteres nicht erkennbar gewesen wäre. Im Intranet ist das eine Wucht. Die Beispiele aus dem Video sind dabei ja nicht aus der Luft gegriffen.

Passend dazu kannst du mit der neuen Version mehrere Personen des Teams als Editoren bestimmen. Diese bearbeiten dann die Seiten kollaborativ mit der gleichen Technik, die auch Google Docs antreibt.

Mit sechs neuen, modernen Themes startet Google Sites in die Welt des responsiven Webdesigns. Eine entsprechende Preview im modernen Editor, der sich an Material Design-Richtlinien orientiert, sorgt dafür, dass du stets im Blick hast, wie deine Inhalte auf Smartphones oder anderen mobilen Geräten aussehen werden.

Fazit: Alte Zöpfe abgeschnitten, Zielgruppe glasklar fokussiert. Gehörst du dazu, wird Google Sites dich funktional überzeugen, gehörst du nicht (mehr) dazu, such dir ein anderes Tool.

Kategorien
(Kostenlose) Services Essentials Freebies, Tools und Templates

StockJo: Umfangreiche Sammlung mit Sammlungen kostenloser Design-Elemente und Ressourcen

StockJo ist der Startpunkt zu einer gigantischen Vielfalt für Designer relevanten Contents. Denn es sammelt ausschließlich Sammlungen und ist damit so eine Art Supersammlung. Damit sparen sich gerade relative Neulinge im Design einen ganzen Haufen Zeit. Denn bei StockJo findest du Anlaufstellen für alles, was Herz oder Hirn begehren.

StockJo: Landing Page
StockJo: Landing Page

StockJo: Nüchterne Gestaltung, solide Inhalte

Du bist auf der Suche nach kostenlosen Fotos, Videos, Texturen, Mockups, Schriftarten, Soundfiles, Vektorgrafik und Illustrationen, Farbpaletten, kleinen Werkzeugen, Tutorials, HTML-Vorlagen und sonstigen Netz-Ressourcen? Dann ist StockJo eine gute Startseite für dich.

Erstellt und betrieben von der indischen Agentur Infiyo bietet das recht frische Angebot namens StockJo Zugriff auf alle Helferlein, die im Leben eines Designers von professionellem Interesse sein können.

Regelmäßige Leserinnen und Leser des Dr. Web Magazins wissen zwar, dass in den letzten Jahren geradezu ein Trend darin besteht, immer neue Sammlungen mit kostenlosen Inhalten zu erstellen; aber auch sie haben es bisweilen schwer, den Überblick zu bewahren. Bei der Gelegenheit will ich nochmal schnell auf unseren Sammelbeitrag mit 43 handverlesenen Diensten für kostenlose Fotos hinweisen, der sogar umfangreicher ist, als das, was StockJo zum Thema Fotografie anbietet.

Dafür ist StockJo insgesamt breiter aufgestellt und sammelt über das oben genannte, wesentlich umfangreichere Themenfeld. Damit kannst du bedenkenlos für jeden Bedarf erstmal bei StockJo vorstellig werden.

StockJo: Kategoriebeispiel
StockJo: Kategoriebeispiel

Der Zugang zu den gelisteten Ressourcen kann auf zwei verschiedene Arten erfolgen. Zum einen kannst du die Freitextsuche benutzen, deren Ergebnisse du in einem zweiten Schritt verfeinern kannst, indem du etwa die Resultate nochmal nach Lizenzen filterst. Zum anderen kannst du schlicht in den Kategorien stöbern. Das ist zum jetzigen Zeitpunkt eine gleichwertige Möglichkeit, da die Anzahl der gelisteten Sammlungen noch überschaubar ist.

In den Kategorien findest du Listen, deren Einträge jeweils direkt auf die Startseite der Sammlung verlinken und mit einem Zweizeiler kurz umreißen, was du dort zu erwarten hast. Tags mit Angaben zur Lizenz zeigen, welche Art von Inhaltsnutzung geboten ist. Über das klassische Herzchen-Icon kannst du einem Listeneintrag ein „Gefällt mir“ schenken.

StockJo: zusätzliche Tags geben Infos zur Lizenz
StockJo: zusätzliche Tags geben Infos zur Lizenz

Leider führen Klicks auf die genannten Tags zur 404. Gleiches geschieht, wenn du den in der oberen Navigation genannten Blog aufrufen willst. Da hat Infiyo noch ein paar Hausaufgaben unbearbeitet liegen. Gehen wir mal davon aus, dass es daran liegt, dass StockJo ein Work in Progress ist.

Abgesehen von den paar Unebenheiten ist StockJo einen Bookmark wert und gehört in den Werkzeugkasten nicht nur jeden Designers, sondern im Grunde jeden Seitenbetreibers. Es ist nicht das Universaltool für alle Lebenslagen, aber jedenfalls sehr nützlich. Schau selbst.

Kategorien
(Kostenlose) Services E-Business Essentials Freelance Workflow

Kanban-Boards: Ist Pinnery das bessere Trello?

Pinnery heißt ein recht neuer Vertreter der Web-Apps, die sich mit Projekt- und Aufgabenmanagement auf der Basis von Kanban-Boards befassen. Deren bekanntester Vertreter dürfte wohl Trello sein. Pinnery ist eine Alternative aus deutschen Landen.

Kanban-Boards: Skeuomorphismus der Aufgabenerledigung

Kanban-Boards, kennter ne? Kennter. Das sind diese Pinnwände mit Listen, in denen Aufgaben sortiert sind. Der Fortschritt einer Aufgabe dokumentiert sich dadurch, dass sie von Liste zu Liste wandert, bis sie erledigt ist. Das Prinzip ist sehr einfach und deshalb so erfolgreich.

Sagen wir, du planst eine Redaktion;) Du legst für jeden Autoren ein Kanban-Board an. In dem Board gibt es Listen, die da heißen „Vorschläge“, „Bestellt“, „In Arbeit“, „Fertig für CvD“ und „Fertig zur VÖ“. Zusätzlich gibt es noch die beiden Listen „Abgelehnt“ und „VÖ“. Nun macht dir der Autor Vorschläge für Artikel, die er gerne schreiben möchte. Diese legt er als einzelne Karten in der Liste „Vorschläge“ an.

Im einfachsten Falle gefällt dir der Vorschlag und du ziehst die Karte direkt in die Liste „Bestellt“. Damit weiß der Autor, dass er den Beitrag in Angriff nehmen kann. Beginnt er die Arbeit an dem Beitrag, zieht er die Karte in die Liste „In Arbeit“. Du verstehst das Prinzip? Gefällt dir ein Beitragsvorschlag überhaupt nicht, ziehst du ihn direkt in die Liste „Abgelehnt“.

So ist der Autor, wie auch die Redaktion jederzeit über den Status der einzelnen Beiträge auf dem Laufenden. Details werden auf den jeweiligen Karten geklärt. Hier gibt es die Möglichkeit, Dateien anzuhängen, Kosten zu definieren oder über ein Kommentarwesen Richtung, Struktur und sonstige Fragen rund um das Thema zu diskutieren.

Das ist unser Workflow beim Dr. Web Magazin. Wir setzen seit Anfang 2012 auf Trello, das wohl bekannteste System seiner Art. Jeder Autor besitzt ein solches Board, zusätzlich gibt es weitere Boards, etwa zur Technik des Magazins. Das funktioniert wie ein Art Ticketsystem. Dort werden Fehler und Änderungsbedarfe oder -wünsche vermerkt. Ein weiteres Board beschäftigt sich mit strategischen Fragen. Die Bandbreite dessen, was mit Trello abgedeckt werden kann, ist groß.

Schon vor vier Jahren habe ich dazu diesen Beitrag geschrieben.

Das Schöne am Prinzip der Kanban-Boards ist, dass es den Aufgabenfluss geradezu physikalisch nachbildet und so eine Dynamik erzeugt, die in sich schon etwas motivierendes birgt. Mir persönlich gefällt diese Art der Abarbeitung deutlich besser als das schnöde Abhaken von Aufgaben in Tools wie Wunderlist und anderen.

Pinnery: Trello-Alternative mit Vorteilen

Nun also geriet mir Pinnery unter die Finger. Pinnery wird vom deutschen Software-Haus Rowisoft entwickelt. Rowisofts Flaggschiff-Produkt ist das überaus ausgewachsene Warenwirtschaftssystem Rowisoft blue, das als durchschlagender Kompetenzbeweis in Sachen Business-Software gelten darf.

Pinnery ist denn auch nicht als Wettbewerber zu Trello angelegt, also kein klassisches Me-Too-Produkt. Vielmehr sieht man Pinnery an, dass es von jemanden entwickelt wurde, der sich mit Unternehmensabläufen auskennt. Trello sehe ich dabei eher in einer Linie mit optisch ansprechenden Web-Apps begrenzter Funktionalität, aber hoher Viralität. Trello ist cool und deshalb bekannt und beliebt. Nachdem wir es hier bei Dr. Web ebenfalls nutzen, dürfte klar sein, dass ich generell am Featureset nichts substanzielles auszusetzen habe.

Pinnery: Board-Beispiel
Pinnery: Board-Beispiel

Betrachte ich Trello jedoch mit den Augen eines betriebswirtschaftlich orientierten Projektmanagers, würde ich mich nicht für dieses Produkt entscheiden. Es ist schlussendlich eher ein intuitives Tool für Einzelkämpfer und kleine Teams, die gemeinsam Aufgaben zu erledigen haben. Wenn es aber um die Planung und Abwicklung von Projekten geht, kommt Trello an seine Grenzen.

Hier kann allerdings Pinnery glänzen. Neben dem identischen Konzept und der im Vergleich ebenso einfachen Handhabung bietet Pinnery mehr Features. So hat Pinnery zwei Funktionen an Bord, die ich bei Trello schon mehr als einmal vermisst habe.

Es handelt sich zum einen um die Möglichkeit, Abhängigkeiten zwischen Aufgaben zu hinterlegen. Nur so spiegelt sich in vielen Fällen den Projektverlauf korrekt wieder. Du kannst Aufgabe Y erst beginnen, wenn Aufgabe X erledigt ist. Trello bietet eine solche Verflechtung nicht.

Zum anderen kannst du mit Pinnery an jeder Karte (Aufgabe oder wie du es definierst), weitere Unterboards anhängen. So bist du in der Lage, sogar sehr große Projekte übersichtlich zu organisieren. Unter Trello musst du alles in einem Board abbilden oder mehrere erstellen, die dann aber nicht über Verbindungen untereinander verfügen. Da ist Pinnery deutlich professioneller.

Pinnery: Listen in Rubrik
Pinnery: Listen in Rubrik

Eine weitere Funktion, die unter Trello nur per Drittanbieter zu regeln ist, ist die integrierte Zeiterfassung nebst Kosten-Soll-Ist-Vergleich. Zeiteinheiten können bis runter auf die Minute erfasst werden.

Auch Kleinigkeiten gefallen mir bei Pinnery besser. So kannst du etwa deine Listen nochmal kategorisieren und Zwischenüberschriften setzen. Über diese Zwischenüberschriften lassen sich Bord-Bereiche gezielt aus- und einblenden, was die Übersicht insgesamt im Vergleich zu Trello deutlich erhöht. Ebenso finde ich es überaus positiv, dass Pinnery über eine Ansicht verfügt, bei der nahezu der gesamte Inhalt der „Aufgaben-„Karte in der Listenübersicht angezeigt wird. Bei Trello siehst du nur den Titel der jeweiligen Karte und musst für jede weitere Information erst die Detailansicht der Karte aufrufen.

Pinnery. Links Komplettansicht einer Liste, rechts die Kompaktdarstellung
Pinnery. Links Komplettansicht einer Liste, rechts die Kompaktdarstellung

Für Nutzer eines Surface-Tablets haben die Macher von Pinnery ein Schmankerl parat. Diese nämlich können mit dem entsprechenden Stylus direkt handschriftliche Notizen als Karten erfassen, bei voller Funktionalität, die der Stylus im übrigen zu bieten hat.

Trello vs Pinnery: beide nicht kostenlos bei erweiterten Features

Viele Business-Features gibt es bei Trello in ähnlicher Form, darunter die Verwaltung von Nutzern unterschiedlicher Berechtigung. Dafür nimmt Trello bei jährlicher Zahlung 9,99 Dollar pro Nutzer. Bei Pinnery sind ebenso wenig wie bei Trello alle Funktionen kostenlos. Hier musst du 6,60 Euro pro Benutzer und Monat bei jährlicher Zahlung auf den Tisch legen.

Zu Beginn startest du mit einem Pro-Account und kannst 30 Tage dessen vollen Funktionsumfang nutzen. Nach Ablauf der 30 Tage entscheidest du dann, ob du den Pro-Account bezahlen willst oder ob dir die Features der Option Pinnery Free reichen, was mutmaßlich nicht der Fall sein wird, wenn du dir mal diese Übersicht anschaust.

Bist du bisher indes mit einem kostenlosen Trello-Account unterwegs und benötigst nicht die Dropbox-Schnittstelle, könnte dir Pinnery Free tatsächlich reichen. Auf jeden Fall solltest du dir den Wettbewerber mal ansehen.

Nicht zuletzt sind wir mit unseren Daten bei einem deutschen, oder sagen wir europäischen, Anbieter wohl besser aufgehoben als bei einem amerikanischen. Gut möglich, dass gerade dieser Aspekt mit dem künftigen Präsidenten der USA nochmal stark an Bedeutung zunehmen wird.

Fazit: Wenn du auf der Suche nach einem professionellen Kanban-Board-System und bereit bist, etwas Geld dafür in die Hand zu nehmen, ist Pinnery auf jeden Fall einer der Dienste, die du dir definitiv anschauen solltest. Funktional bietet er mehr als das international gehypte Trello und günstiger im Betrieb ist er auch. Der Anbieter ist mindestens ebenso stabil wie jener von Trello, so dass du dir um die Zukunft eher weniger Gedanken machen musst. Der europäische Datenschutz ist ein weiterer positiver Aspekt. Ich gebe eine uneingeschränkte Empfehlung ab.

Kategorien
(Kostenlose) Services Design Essentials UI/UX

CSS, Logos, Farben: Drei neue Tools für deinen Design-Werkzeugkasten

Übers Wochenende stolperte ich über eine ganze Reihe neuer Dienste und Tools, die des Designer/Developers Leben erleichtern können. Darunter befindet sich eine Lösung für wirklich ansehnliche Ladezeitanzeiger aka Spinner und Loader, ein Dienst, der populäre Logos seziert, sowie eine Inspirationsquelle für zeitgemäße Farbpaletten.

CSSPIN: Spinner und Loader aus purem CSS auf Basis von LESS

csspin

Und wenn es nur dazu dient, zu visualisieren, dass neue Inhalte geladen werden, Spinner und Loader, also Ladezeitanzeiger, sind omnipräsent. Auf der Demoseite zu CSSPIN kannst du dir ansehen, was für schicke Varianten aus reinem CSS das Team des indischen Startups Webkul geschaffen hat. Im Vergleich zu den doch zumeist drögen Konzepten gängiger Loader, kann Webkul mit seiner kleinen Auswahl durchaus Aufsehen erregen.

Die zehn verschiedenen, voll anpassbaren Anzeiger liegen als CSS-Datei mit allen Varianten vor. Es gibt jedoch zudem pro Variante eine eigene CSS-Datei. Sicherlich willst du nicht alle zehn in ein und dasselbe Projekt integrieren. Auch die Entwicklungs-Files als LESS kannst du einsehen und bearbeiten. CSSPIN wird unter der liberalen MIT-Lizenz verteilt, so dass du es privat, wie kommerziell frei einsetzen kannst.

Hol es dir bei Github >>

Logominer: Bekannte Logos unter der Lupe

logominer

Piotr Gacon aus Dublin stellt mit Logominer einen Dienst vor, den wir uns in Deutschland gar nicht zu betreiben trauen würden. Hier bei Dr. Web hatten wir auch schon mal mit dem Gedanken gespielt, bekannte Logos zu sezieren und zu erklären, was wie gemacht wurde und warum es wie wirkt. Nach einem kurzen Telefonat mit unserem Hausanwalt war das Thema vom Tisch.

Glücklicherweise ist Piotr Gacon rechtlich anders aufgestellt, zumindest hoffe ich das für ihn. Auf seiner Website Logominer stellt er 70 der bekanntesten Logos weltweit vor. Alle Logos kannst du in den Formaten JPEG, PNG, EPS, SVG und PDF herunterladen. Zudem zeigt Piotr, mit welchen Fonts die vorgestellten Entwürfe arbeiten. Darüber hinaus kannst du dir die Farbpalette mit den jeweiligen prozentualen Anteilen der entsprechenden Farben am Layout darstellen lassen. Klickst du auf das jeweilige Farbquadrat kopierst du den zugehörigen Hex-Wert in die Zwischenablage.

Suchen kannst du nach Branche, Farbe, Schriftstil, Schriftgewicht, Zahl der Buchstaben und der Unterscheidung zwischen reinen typografischen Logos oder solchen, die Formen integrieren.

Hier geht es zu Logominer >>

Color Farm: Farbpaletten aus echten Designs

colorfarm

Viele Designer nutzen Dribbble Shots als Inspirationsquelle. In der Tat wird man kaum eine sich schneller wandelnde Übersicht zeitgemäßer Entwürfe finden als dort. Das dachten sich auch die Macher der Chrome-Extension Panda, die sich ebenfalls als Inspirationsgeber im Gewand eines RSS-Readers betrachtet.

Daher nahmen sie sich populäre Dribbble Shots zur Brust und extrahierten daraus die jeweiligen Farbpaletten. Anders als andere Dienste legten sie selbige aber nicht auf einer Verlaufslinie nebeneinander ab, sondern separierten sie Farbe für Farbe als einzelne Quadrate, umgeben von White Space. So sind die individuellen Farben sehr gut einzeln zu beurteilen. Mittels Klick auf ein Farbquadrat kopierst du den Hex-Wert in die Zwischenablage.

Nichts wie hin zur Seite mit dem Regenbogen-Hahn >>

Kategorien
(Kostenlose) Services Bilder & Vektorgrafiken bearbeiten Design Essentials Sonstige Programme

Schnelle Bild-Overlays mit Cloudinary

Bei Bild-Overlays geht es nicht nur darum, das richtige Fingerspitzengefühl zu haben, um ein großartiges Bild zu erstellen. Du brauchst auch ein großartiges Tool, das den Prozess erleichtert. Cloudinary, ein Cloud-basierter Bild- und Videoservice für Websites und mobile Anwendungen, ist genau das Werkzeug, das dir an dieser Stelle hilft.

Wie man Bilder überlagert

Als erstes, lege dir einen kostenlosen Cloudinary-Account an, sofern du noch keinen hast. Dann kannst du entweder über die Cloudinary Management-Konsole, oder per API Bilder hochladen. Wenn ein Bild in deinen Cloudinary-Account geladen wird, speicherst du es automatisch auch in der Cloud.

Um ein Overlay zu erstellen, musst du lediglich definieren, wie du das ursprüngliche Bild innerhalb der entsprechenden URL verändern möchtest. Anhand der Anweisungen, die zur URL hinzugefügt werden, wird in Echtzeit ein neues, abgeleitetes Bild verarbeitet und zwischengespeichert. Das Ergebnis wird unverzüglich via Content Delivery Network (CDN) ausgeliefert. Alle folgenden Anfragen an dieselbe URL werden vom Cache aus gestellt.

Hier zeigen wir dir, wie man ein Firmenlogo auf einen Koala legt. Zugegebenermaßen dürfte diese Kombination eher selten vorkommen, die Aufgabe an sich aber durchaus häufig. Mit Cloudinary ist sie einfach. Die ursprüngliche URL des Koala-Bildes lautet:

https://res.cloudinary.com/cld-name/koala.jpg

Die Overlay-URL ist:

https://res.cloudinary.com/cld-name/l_cloudinary_icon,w_200,c_scale/koala.jpg

Die URL-Struktur ist:

<domain name>/<cloud  name>/<image manipulation parameters>/<image  public-id>.<image format>

Das Overlay wurde erstellt, indem die folgenden Parameter zur URL hinzugefügt wurden:

  • l_<overlay_public_id>
  • w_<width>
  • c_<crop_method>

Für exakte Eindrücke rufe auch die Bild URLs in den Beispielen auf und teste sie.

Die Bild-URL mit JavaScript bauen

Du kannst die Bild-URL selbst erstellen, oder eine von Cloudinarys SDK-Bibliotheken dazu nutzen. In den folgenden Beispielen werde ich die Kern-JavaScript-Bibliothek nutzen, also pures JavaScript. Es gibt auch ein JQuery-Plugin.

Als erstes musst du die JavaScript-Quelle einschließen, welche du vom Cloudinary-Core-Projekt auf Github herunterladen kannst.

<script src="<path>/cloudinary-core-shrinkwrap.js"  type="text/javascript"></script>

Als nächstes fügst du deinen Account-Cloud-Namen zum Code hinzu. Der Account-Name wird bei der Registrierung bei Cloudinary festgelegt. Im folgenden Beispiel ist der Cloud Name “cld-name.”

var cl = cloudinary.Cloudinary.new({cloud_name: "cld-name"});

Jetzt werde ich die hier erstellte cl-Variable nutzen, um alle Cloudinary-Methoden abzurufen. Wenn du JQuery bevorzugst, kannst du das entsprechende Plugin hier finden.

Das ist der JavaScript-Call für die Bild-URL mit Overlay:

cl.url("koala", { overlay: "cloudinary_icon", width: 200, crop: "scale" });

Die benutzten Parameter sind die image public_id, hier „koala“ und die image overlay public_id, also „cloudinary_icon“. In beiden Fällen steht public_id für den Namen des Bildes in der Cloudinary-Medienbibliothek. Der nächste Parameter ist width = 200 pixels, welcher benutzt wird, um das Overlay-Bild auf eine Breite von 200 Pixeln zu skalieren. Die ausgewählte „scale“ Option skaliert das Bild auf die gewünschte Breite, ohne das ursprüngliche Seitenverhältnis zu verändern. Das Ergebnis dieses Calls ist die Overlay-Bild-URL, wie ich bereits demonstriert habe.

Wasserzeichen erstellen

Ein häufiger Anwendungsfall für Bild-Overlays ist das Hinzufügen eines Wasserzeichens. Das ist ein gängiger Weg, Bilder online (urheberrechtlich) zu schützen. Unser Ausgangsbild hat unser Icon schon, aber vielleicht bevorzugst du eine subtilere Darstellung, wie zum Beispiel in Form eines Wasserzeichens. Hier sind die dafür benötigten Parameter:

  • Die Dimensionen des Overlays sind durch width definiert, während crop den Ausschnitt festlegt.
  • Die Platzierung des Overlays ist durch „gravity“ definiert
  • Die folgenden visuellen Effekte wurden auf das Overlay angewandt: opacity (Deckkraft) und brightness (Helligkeit)
cl.url("koala", { overlay: "cloudinary_icon", width: 200, crop: "scale", gravity: "south_east", opacity: 50, effect: "brightness:200"});

Bild URL:

https://res.cloudinary.com/cld-name/image/upload/l_cloudinary_icon,w_200,c_scale,g_south_east,o_50,e_brightness:200/koala.jpg

Dynamische Text-Overlays

Das Erstellen von dynamischen Text-Overlays öffnet eine neue Welt der Möglichkeiten. Damit ist es sehr einfach, Banner mit den neuesten Angeboten und Werbung aufzufrischen. Google Fonts werden standardmäßig unterstützt, aber du kannst auch eigene Schriften auf deinen Account laden. Das ist nützlich, wenn du zum Beispiel einen besonderen Ausverkauf bewerben möchtest, der nur heute stattfindet.

cl.url("bag", { transformation: [
  {overlay: "text:roboto_60:EXTRA%2010%25%20OFF", color: "white", y: 110}, 
{overlay: "text:roboto_60:SALE%20ENDS%20TODAY", color: "white", y: 200}]});

Image-URL: https://res.cloudinary.com/cld-name/image/upload/l_text:roboto_60:EXTRA 10%25 OFF,co_white,y_110/l_text:roboto_60:SALE ENDS TODAY,co_white,y_200/bag.jpg

Benutzerdefinierte Text-Overlays

Text-Overlays können auch individualisiert werden. Es ist möglich, den Text in deinem Code spontan zu ersetzen, indem du die Informationen nutzt, die in einem Cookie gespeichert wurden. So könntest du jedem Nutzer einen individuellen Text anzuzeigen, der auf Websites basiert, die dieser Nutzer zuvor aufgerufen hat. Um sicher zu gehen, dass der Text auf jeder Hintergrundfarbe sichtbar ist, empfiehlt es sich, eine umrandete Schriftart auszuwählen.

cl.url("gift", {  overlay: " text:arial_80_stroke:Happy%20Birthday%20John", color: "white", gravity: "north", y: 5, border: "2px_solid_black"});

https://res.cloudinary.com/cld-name/image/upload/l_text:arial_80_stroke:Happy Birthday John,co_white,bo_2px_solid_black,g_north,y_5/gift.jpg

Ebenso kannst du sie einbinden, indem du den Cloudinary-Cookie als Parameter in der Bild-URL verwendest. Du brauchst dazu deinen eigenen CName, vergeben durch Cloudinary. Dann würde die URL wie folgt aussehen:

http://CNAME/l_text:arial_80_stroke:__cld_attribute1__,co_white,bo_2px_solid_black,g_north,y_5/ gift.jpg

Der auf dem Bild angezeigte Text ist der Wert des Cookies __cld_attribute1__

Profilbilder aus sozialen Netzen überlagern

Mit Cloudinary ist es auch möglich, dein Profilbild aus sozialen Netzwerken (Facebook, Twitter, Instagram, Google+) zu nehmen und es als Basis für ein Overlay-Bild zu verwenden.

cl.url ("KermitTheFrog", { type: "twitter_name", transformation: [ 
  { width: 150, crop: "scale"} , 
  { overlay: "instagram_name:realmisspiggy",  width: 150, crop: "scale", x: 150 },
{ border: "3px_solid_black"}]});

https://res.cloudinary.com/cld-name/image/twitter_name/w_150,c_scale/l_instagram_name:realmisspiggy,w_150,x_150/bo_3px_solid_black/KermitTheFrog.jpg

Gesichtserkennungs-basiertes Overlay

Um ein cooles Overlay auf Basis der Gesichtserkennung zu erschaffen, ist es hilfreich, wenn das Gesicht möglichst prominent im Bild zu erkennen ist. Das gilt besonders, wenn du versuchst, den venezianischen Maskenkarneval nachzuahmen, wie unten zu sehen ist. Das Overlay wird automatisch auf den Augen platziert, die im Bild erkannt wurden.

cl.url("team.jpg", { transformation: [ 
  { width: 640, crop: "scale",  } , 
{ flags: "region_relative", gravity: "adv_eyes", overlay: "harlequinmask", width: 1.7 }]});

https://res.cloudinary.com/cld-name/image/upload/c_scale,w_640/l_harlequinmask,w_1.7,g_adv_eyes,fl_region_relative/team.jpg

Eine weitere Möglichkeit ist das automatische Verpixeln von Gesichtern.

cl.url("couple", { width: 640,  crop: "scale", effect: "pixelate_faces:10"});

https://res.cloudinary.com/cld-name/image/upload/w_640,c_scale,e_pixelate_faces:10/couple.jpg

Bild-Overlay auf Videos

Cloudinary unterstützt auch Videos. So kannst du dieselbe API für Interaktionen zwischen Bildern, animierten GIFs und Videos verwenden. Du bist in der Lage, ein animatiertes GIF aus mehreren Bildern zu bauen, ein Bild von einem GIF oder Video-Clip aufzunehmen und sogar ein Bild für eine bestimmte Zeitspanne über ein Video zu legen, wie unten zu sehen ist.

cl.video(  "run", } controls: true, poster: cl.url("run.jpg", {resource_type: "video"}), transformation: [  { overlay: "candy", width: 0.4, gravity: "south_west", start_offset: "5", end_offset: "7.5" }, { overlay: "candy", width: 0.4, gravity: "south_east", start_offset: "8", end_offset: "12", angle: "hflip"}]});

Fazit

In diesem Beitrag konnten wir dir nur die Spitze des Eisbergs zeigen. Cloudinary bietet eine weitaus längere Liste mit Manipulationsoptionen, welche du hier findest. Nahezu ebenso gewaltig sind die Möglichkeit für Videos. Außerdem kannst du Bilder für den Versand optimieren, indem du Funktionen wie automatisches Formatieren und automatische Qualität. verwendest.
Jetzt ist es an der Zeit, dass du hergehst und deine Website-Grafiken verbesserst. Viele Studien haben gezeigt, dass Millennials Bilder Texten sowieso vorziehen.

Disclaimer: Bei diesem Artikel handelt es sich um einen Sponsored Post aus dem Hause Cloudinary.

Kategorien
(Kostenlose) Services Essentials

Logaster: Schneller Logo-Generator für Eilige

Wer schnell und unkompliziert ein Logo benötigt, sollte sich mal Logaster ansehen. Der Dienst ist in Sachen Geschwindigkeit kaum zu schlagen. Leute mit mehr Zeit können sich nach dem Entwurf mit der Verfeinerung der ersten Idee vergnügen. Die anderen verwenden zu diesem Zeitpunkt ihr Logo bereits.

logaster-01

Ich war auf der Suche nach einem Logo-Generator, denn ich brauchte eine Handvoll Ideen für ein Startup-Logo. Natürlich hätte ich meine üblichen Prozesse anwerfen können, ich wusste allerdings von Beginn an, dass das Budget gar nicht als solches zu bezeichnen war und dass es lediglich um eine erste, rohe Idee gehen würde.

Schnell stieß ich auf Logaster, das mich zunächst aufgrund der etwas konservativen Optik und des auf Flash basierenden Generators eher nicht so ansprach. Ich ließ mich davon nicht abschrecken und war schlussendlich mit den erzielten Ergebnissen durchaus zufrieden. Die nachfolgend gezeigten Entwürfe habe ich bloß angefertigt, um diesen Beitrag bebildern und die einzelnen Schritte beschreiben zu können. Du kannst dir also Kommentare nach dem Motto, das sei aber ein hässlicher Entwurf, direkt sparen ;-)

Für den einen oder anderen mag noch wichtig sein, dass Logaster in verschiedenen Sprachen, darunter auf Deutsch, verfügbar ist. So musst du im Zweifel nicht mit Dict.cc im Schlepptau designen.

Logaster: Ruckzuck zur Logo-Idee

Um deine erste Logo-Idee zu entwerfen, bedarf es wenig.

logaster-02

Im ersten Schritt gibst du den Text vor, der im Logo verwendet werden soll. Zudem wählst du grob eine Branche, um zu vermeiden, dass beim Entwurf für ein Tech-Magazin etwa eine Erdbeere oder ein Bagger Element deines Logos wird. Danach klickst du auf „Weiter“, was Logaster zu einem kurzen Nachdenken veranlasst. Am Ende dieses Vorgangs erhältst du eine seitenlange Liste unterschiedlicher Vorschläge.

logaster-03

Natürlich ist da auch viel Ausschuss dabei, aber mit etwas Fantasie findest du schnell einen ersten Ansatz für eine Idee, die sich fortentwickeln lässt. Ich entschied mich auf die Schnelle für dieses Layout.

logaster-04

Hast du dich auf einen Entwurf festgelegt, wird dir dieser im Editor angezeigt und du kannst ihn bearbeiten. Gleichzeitig kannst du neben dem Editorfenster Geschäftsunterlagen sehen, die mit dem Logo ausgestattet sind. So gewinnst du eine bessere Vorstellung davon, was dir am Ende blüht, solltest du dich tatsächlich für das Logo entscheiden.

logaster-05

Am Ende war ich mit diesem Entwurf ganz zufrieden. Die ganze Ideenfindung hat mich bis zu diesem Zeitpunkt keine fünf Minuten gekostet. Erwähnenswert dabei ist noch, dass ich mich weder registrieren, noch sonst wie identifizieren musste. Wenn du allerdings am Ende des Vorgangs den Entwurf speichern willst, kommst du um eine Registrierung nicht herum. Dazu kannst du deine Social-Media-Accounts verwenden, oder klassisch ein neues Benutzerkonto anlegen.

Hast du deinen Entwurf im Backend von Logaster abgelegt, kannst du ihn mit deinen Kontakten teilen, etwa um Feedback zu bekommen. Das ist aber nicht der Hauptzweck des Backends. Von dieser Stelle aus erweiterst du den Logoentwurf um ebensolche für Geschäftsunterlagen, wie Visitenkarten und Briefbögen. Das funktioniert assistentengestützt, also ganz ähnlich wie das Logodesign selber. Auch hier stehen wieder haufenweise Layouts zur Auswahl bereit.

logaster-06

Logaster: überschaubare Kosten für komplette Geschäftsunterlagen

So gestaltest du dich durch dein Branding, wenn du willst. Am Ende ist Logaster natürlich keine altruistische Veranstaltung, sondern ein kommerzieller Dienst. Deine Designs erhältst du nur dann in voller Auflösung als PNG und PDF, wenn du dafür zahlst. Das Angebot, das mir am Ende des Vorgangs gemacht wurde, war allerdings ziemlich fair. Insgesamt keine 30 Euro sollte ich für Logo, Visitenkarte, Briefumschlag, Briefbogen und Favicon hinlegen.

logaster-07

Wenn du dein Logo erst einmal in verschiedenen Umgebungen, etwa auf einer Test-Website ausprobieren willst, kannst du es kostenlos in geringer Auflösung und mit Wasserzeichen versehen, herunterladen. Das ist natürlich keine tragfähige Lösung für die Dauer. Die volle Auflösung in den Formaten SVG, PDF, PNG und JPG würde dich überschaubare 25 Euro kosten. Im Brandkit-Angebot wäre das allerdings bereits enthalten.

logaster-08

Ob du nun jemand bist, der seine Geschäftsunterlagen voll aus der Konserve ziehen möchte oder bloß ein bisschen Inspiration benötigst, auf jeden Fall ist Logaster einen Blick wert. Ich gelangte mit meiner Startup-Idee zum Erfolg, tat einem alten Bekannten einen Gefallen und investierte dennoch nicht viel teure Zeit in den Vorgang. Alles prima!

Kategorien
(Kostenlose) Services Essentials

Internet Curated: Das Beste des Web auf einen Blick

Internet Curated kuratiert themenbezogene Sammlungen mit den besten Fundstellen des Internet zu etwa Tools und anderem. Reinschauen lohnt sich.

Kategorien
(Kostenlose) Services Essentials Freebies, Tools und Templates

Coverr: Über 300 kostenlose Videos für deine Website

Jeden Tag ein neues Video, respektive jeden Montag sieben neue Videos – das versprechen die Betreiber von Coverr. Und nachdem sie bislang schon über 320 Videos ins Angebot genommen haben, muss man an dem Versprechen beileibe keine Zweifel hegen. Wie der Name vermuten lässt, eignen sich die Videos am besten als Covers, also als Hero-Videos für den Webseiten-Background.

coverr-landing

Veed.me und CodersClan bauen Video-Plattform Coverr

Coverr wird betrieben von den Teams von Veed.me und dem dem CodersClan. Veed.me ist eine Plattform, auf der Kunden nach geeigneten Filmern für ihre Zwecke suchen und buchen können. Veed.me lebt von einer 15%igen Provision, die der Filmer zahlt, für den Kunden ist die Plattform kostenlos. Preise werden nicht mutwillig gedumpt, die Plattform gaukelt keine Billigheimer-Philosophie vor. Das finde ich schon mal sehr sympathisch.

Ähnlich verhält es sich mit dem CodersClan. Dabei handelt es sich um eine Community professioneller Entwickler, die nicht jeden aufnimmt. Stolz gibt man zu Protokoll, dass man nur sechs von 100 Bewerbungen akzeptiere. Wenn es denn der Qualitätssicherung dient, wird es den Kunden freuen. Ich hätte keine Bedenken, innerhalb einer solchen Vorauswahl anzufragen.

Coverr: Videos finden und downloaden ohne Umwege

Nun also baute der CodersClan die Website zu Coverr, während Veed.me die Videos beisteuerte. Wie zu erwarten war, kam dabei eine runde Sache heraus. Die Website präsentiert die inzwischen mehr als 320 Videos in einem endlos scrollenden Grid, das sich in Form von Kategorie-Tabs weiter thematisch filtern lässt.

Coverr: übersichtliche Präsentation als thematisches Grid (Screenshot: Dr. Web)
Coverr: übersichtliche Präsentation als thematisches Grid (Screenshot: Dr. Web)

Klickst du auf eines der Videos, öffnet sich selbiges in einem Popup. Hier wird dir das Video als solches gezeigt. Ebenso besteht an dieser Stelle die Möglichkeit, das Video herunter zu laden oder als Coverr, also als Hintergrund anzeigen zu lassen. Wählst du diese Option, wird das Hintergrundvideo der Coverr-Website gegen deine aktuelle Auswahl ersetzt, so dass du die Tauglichkeit recht gut einschätzen kannst.

Entscheidest du dich für den Download, bekommst du ohne Umschweife ein Zip auf deine Platte gelegt. Das Zip beinhaltet drei Ordner, in denen das Video jeweils als MP4, WEBM und als JPG-Screenshot enthalten ist.

Alle drei Varianten solltest du auf deiner Website einsetzen. Wie das geht, zeigen dir die Betreiber von Coverr ebenfalls. An dieser Stelle findest du drei Snippets in HTML, CSS und JS, die du nur leicht anpassen brauchst, um das entsprechende Video als Hero-Bereich in deiner Website zu verwenden.

Coverr ist Public Domain, kostenloser geht nicht

Wie bereits erwähnt, sind alle Kurzfilme kostenlos zu verwenden. Die gewählte Lizenz ist die maximal liberale, es handelt sich nämlich um CC Zero, auch als Public Domain bekannt. So lizenzierte Assets gelten als gemeinfrei, können also von jedermann zu jedem Zweck uneingeschränkt und kostenlos eingesetzt werden. Damit bist du auf der ganz sicheren Seite.

Kategorien
(Kostenlose) Services Essentials Fotografie Freebies, Tools und Templates Inspiration

Visual Hunt: Über 350 Millionen Fotos zur freien Verwendung

Bilder sagen mehr als Worte. Gerade als Grafik- und Webdesigner weiß man den Einsatz aussagekräftiger und professioneller Fotos zu schätzen. Auf der Suche nach den richtigen Motiven landet man nicht selten bei einem kommerziellen Anbieter. Denn häufig stimmen bei den kostenlosen Anbietern weder die Qualität der Fotos, noch die Auswahl. Visual Hunt stellt hier eine im wahrsten Sinne des Wortes große Ausnahme dar. Mit über 350 Millionen Fotos findest du für jedes Projekt sicher die richtigen Motive. Und auch die Qualität der Fotos kann sich mehr als sehen lassen.

Das Beste von Flickr und Co.

Dass Visual Hunt über 350 Millionen qualitativ hochwertiger Fotos anbietet, liegt daran, dass der Dienst das Beste an Creative-Common- und Public-Domain-Fotos sammelt, die es im Internet gibt. Aber keine Sorge: Der Dienst sucht sich nicht aus beliebigen Quellen das Material zusammen. Stattdessen setzt es auf Quellen wie Flickr und anderen Diensten, die eine hohe Reputation haben und für entsprechend gute Qualität stehen.

Suchergebnisse in Visual Hunt
Suchergebnisse in Visual Hunt

Zudem sind alle Fotos von Visual Hunt handverlesen, wurden gesichtet und mit Schlagworten versehen, um aussagekräftige Suchergebnisse gewährleisten zu können.

Über 60.000 Public-Domain-Fotos

Bei den Lizenzen, unter denen die Fotos bei Visual Hunt angeboten werden, unterscheidest du zwischen Creative-Commons- und Public-Domain-Fotos. Die Creative-Commons-Lizenz ist im Internet sehr verbreitet. Sie erlaubt es dir, Fotos kostenlos zu verwenden. Allerdings musst du den Urheber der Fotos nennen.

Ob ein Foto, das unter der Creative-Commons-Lizenz steht, bearbeitet oder kommerziell genutzt werden darf, ist ganz unterschiedlich. Die Lizenz erlaubt hier verschiedene Möglichkeiten. Aber was du konkret mit einem Foto machen darfst, wird dir sehr übersichtlich dargestellt.

Vorschau mit Angabe über Lizenz und Einschränkungen sowie Bedingungen
Vorschau mit Angabe über Lizenz und Einschränkungen sowie Bedingungen

Neben der Creative-Commons-Lizenz werden auch an die 60.000 Fotos angeboten, die unter der Public-Domain-Lizenz stehen. Diese Fotos darfst du ganz uneingeschränkt nutzen – auch ohne Nennung des Urhebers. Hierbei hast du also größtmögliche Freiheiten, wenngleich Visual Hunt es begrüßt, wenn du grundsätzlich bei allen Fotos den Urheber nennst.

Du kannst ganz gezielt nach Public-Domain-Fotos suchen, wenn du eine Nennung des Urhebers – beispielsweise aus gestalterischen Gründen – nicht wünschst.

Suche nach Schlagwörtern, Farben und Lizenzen

Wer Fotos in dieser Anzahl anbietet, muss vor allem eines haben: eine gute Suchfunktion. Und auch hier kann Visual Hunt punkten. Zunächst gibt es eine klassische Schlagwortsuche, mit der du nach passenden Motiven suchen kannst. Hierbei kombinierst du Suchbegriffe und kannst bestimmte Begriffe ausschließen.

Suche nach Bildern mit bestimmter Farbgebung
Suche nach Bildern mit bestimmter Farbgebung

So grenzt du die Fotos schon einmal sehr gut ein. Wenn du Fotos nicht zu redaktionellen, sondern eher zu gestalterischen Zwecken verwendest, spielt die Farbgebung der Bilder häufig eine wichtige Rolle. Hier ermöglicht dir Visual Hunt, die Ergebnisse auf eine bestimmte Farbe einzugrenzen. Aus elf vorgegebenen Farben wählst du jene aus, die deinen Vorstellungen am nächsten kommt.

Zu guter Letzt kannst du die Ergebnisse – wie bereits erwähnt –  auf bestimmte Lizenzen eingrenzen. Die Sortierfunktion hilft dir zudem dabei, Ergebnisse in verschiedene Reihenfolgen zu bringen. So lässt du dir zum Beispiel die relevantesten oder die neusten Fotos, die deinen Suchkriterien entsprechen, als erstes darstellen.

Herunterladen und Einbinden ohne Registrierung

Wer der Meinung ist, schon bei genügend Webdiensten registriert zu sein, wird Visual Hunt ebenfalls schätzen. Denn das Herunterladen der Fotos ist ohne Registrierung möglich. Dabei wählst du aus verschiedenen Auflösungen jeweils eine aus. Die Auflösungen werden in verschiedene Größen gruppiert.

Je nach Fotos sind diese von S (640Pixel Breite) bis 3XL verfügbar. Wie groß 3XL ist, hängt jeweils vom Foto ab. Aber zwischen 3.000 und 5.000 Pixel sind es in der Regel. Somit eignen sich die Fotos sogar für den Druck.

Herunterladen per Lightbox
Herunterladen per Lightbox

Suchst du nach mehreren Fotos, musst du diese nicht einzeln herunterladen. Stattdessen kannst du diese zu einer Lightbox hinzufügen und später herunterladen. So stöberst du erst durch das Angebot und fügst jedes Bild, welches du verwenden möchtest, der Lightbox hinzu. Die Bilder der Lightbox werden dir am unteren Rand der Seite dargestellt.

Anschließend wählst du eine einheitliche Größe für die Auflösung aus und lädst den kompletten Inhalt der Lightbox als einzelne ZIP-Datei herunter.

Statt Fotos herunterzuladen, stellt Visual Hunt dir auch die Möglichkeit zur Verfügung, Fotos per HTML-Quelltext in deine Website oder dein Blog einzubinden. Dabei schiebst du dir per Regler eine Auflösung zurecht und kopierst den HTML-Schnipsel einfach.

Fotos Einbinden statt herunterladen
Fotos Einbinden statt herunterladen

Angaben zum Urheber und zur Lizenz werden automatisch im Quelltext integriert. Auch die Ausrichtung des Bildes – linksbündig, zentriert oder rechtsbündig – wählst du aus. Eine Vorschau zeigt dir, wie das Bild anschließend aussieht.

Die Einbindung hat den Vorteil, dass du Fotos nicht erst herunterladen und wieder hochladen musst. Außerdem sparst du Webspace und Traffic.

Fotos hochladen und „liken“

Solltest du dich doch für eine Registrierung bei Visual Hunt entscheiden, kannst du selbst Fotos hochladen. Diese werden dann gesichtet und – falls sie den Qualitätskriterien entsprechen – unter der Public-Domain-Lizenz ins Angebot aufgenommen.

Aber Vorsicht: Sobald ein Foto hochgeladen wurde, gibt es kein Zurück mehr. Anders als bei vielen anderen Anbietern, kannst du deine Fotos nicht wieder aus dem Angebot entfernen.

Fotos hochladen
Fotos hochladen

Außerdem hast du als registrierter Benutzer die Möglichkeit, Fotos zu bewerten, indem du „Likes“ vergibst. So hilfst du, das Angebot von Visual Hunts zu verbessern, indem du besonders gute Fotos kennzeichnest.

Fazit

Auch wenn 350 Millionen Fotos schon ein beachtliches Angebot ist, so steigt die Anzahl der zur Verfügung stehenden Fotos kontinuierlich. Wer die Seite regelmäßig besucht, wird die stets zunehmende Anzahl an Fotos im Zähler wahrnehmen. Dieser verrät dir nicht nur die Gesamtanzahl der Fotos von Visual Hunt, sondern auch die Anzahl der Public-Domain-Fotos.

Aber nicht nur die Quantität der Bilder ist beeindruckend, die Qualität ist es auch. Daher ist Visual Hunt nicht nur etwas für Blogger und private Projekte. Für den professionellen Einsatz im Grafik- und Webdesign bietet sich Visual Hunt ebenso bestens an.

Kategorien
(Kostenlose) Services Essentials Freebies, Tools und Templates

Stocky.pro: Kostenlose Fotos, Musik, Videos und Grafiken für den kommerziellen Einsatz

Kann man jemals genug Websites kennen, die freies Material rausgeben? Ich glaube, nein. Der ganz junge Service Stocky.pro ist zudem noch insoweit etwas besonderes, als dort nicht nur Fotos und Grafiken zu finden sind, sondern auch Musikstücke und Videos zur freien Verwendung bereit stehen.

Stocky.pro: Die relativ schmucklose, aber zweckmäßige Startseite. (Foto: Dr. Web)
Stocky.pro: Die relativ schmucklose, aber zweckmäßige Startseite. (Foto: Dr. Web)

Stocky.pro: Einzelkämpfer aus dem Ural hat große Ambitionen

Stocky.pro wurde mir über Product Hunt in die Filterblase gespült. Erst vor kurzem ist die Seite online gegangen. Betrieben wird sie vom Einzelkämpfer Alexey Kokov aus Jekaterinburg im russischen Ural. Kokov hat sich zum Ziel gesetzt, alle Arten digitaler Medien, die jemals jemand für kommerzielle Zwecke gebrauchen könnte, frei und kostenlos über Stocky.pro anzubieten.

Das geht soweit, dass er aktiv seine Besucher auffordert, bestimmte Inhalte quasi zu bestellen. Er werde sich dann darum kümmern, genau solche Materialien auf Stocky.pro zu liefern. Das klingt altruistisch und ist es wohl, zumindest zur Zeit, auch noch. Nach eigenen Angaben arbeitet Kokov vorzugsweise nachts und am Wochenende an Stocky.pro, denn sein Hauptjob und seine Familie beanspruchen natürlich schon den Großteil seiner Zeit.

Vorschau auf einen thematischen Bild-Download. (Screenshot: Dr. Web)
Vorschau auf einen thematischen Bild-Download. (Screenshot: Dr. Web)

Kokovs Vision für Stocky.pro ist es, einen Content-Marketing-Hub zu betreiben, auf dem Firmen einerseits Inhalte frei zur Verfügung stellen, andererseits ebensolche Inhalte auch frei beziehen können. Werbung schließt er bislang aus. Premiumservices will er nicht verkaufen.

Für uns als Benutzer bedeutet das erstmal: Stocky.pro ist komplett kostenfrei und soll es auch bleiben. Die angebotenen Materialien können völlig frei für jeden legalen Zweck, sowohl privat, wie auch kommerziell und in Kundenprojekten verwendet werden.

Wie Kokov damit Geld verdienen will, habe ich noch nicht erkennen können. Immerhin betrachtet er Stocky.pro als sein Startup. Gut, warten wir es einfach ab.

Stocky.pro: Überschaubares Angebot mit beliebigem Themenfokus

Würde man einen solchen Service am Reißbrett entwerfen, würde man sicherlich nicht so vorgehen, wie es Kokov mit Stocky.pro tut. Auf Stocky.pro findest du derzeit zwar schon eine beachtliche Anzahl unterschiedlicher Ressourcen für die digitale Verwendung. Schwerpunkte ergeben sich allerdings rein beliebig dadurch, dass sich der Betreiber mit manchen Themen gestalterisch bereits beschäftigt hat und mit anderen eben nicht.

Du brauchst also eine gehörige Portion Glück, um auf Stocky.pro das zu finden, was du in deinem aktuellen Projekt gerade benötigst. Da hast du es bei größeren, quasi klassischen Stock-Anbietern weitaus leichter.

Dennoch muss man einräumen, dass die Elemente, die im Angebot sind, qualitativ gut bis sehr gut sind. Das betrifft die Vektordateien, aber auch die Fotos, Videos und die Musikstücke. Alles ist zwar sehr klein vom Sortiment her, aber teils doch recht fein.

https://www.youtube.com/watch?v=a1sRNsGolew

Stocky-Beispiel: Wenn du Nähblogger bist, könnte dir das Video nützlich sein…

Schön gelöst bei Musik und Videos ist die Vorschau. Kokov verwendet YouTube für die Videos und Soundcloud für Musik. So musst du nicht die Katze im Sack downloaden, sondern kannst zuvor testen, ob die Elemente inhaltlich und qualitativ deinen Ansprüchen genügen.

Thematische Einteilungen nach klassischen Kategorien gibt es (noch) nicht. Das Finden interessanter Elemente bewerkstelligst du entweder durch ausgiebiges Stöbern oder durch die Freitextsuche, die sich hinter einem Hamburgermenü versteckt. An jedem Element befindet sich zudem eine Auswahl an Tags, mit denen das Element charakterisiert ist. Ein Klick auf einen solchen Tag öffnet ein Grid mit allen Inhalten des gleichen Tags.

Apropos Grid, Stocky.pro erinnert schon recht deutlich an Pinterest und andere kartenbasierte Designs. Das ist ja bekanntlich gerade in Mode.

Fazit: Stocky.pro gehört auf jeden Fall, mindestens zur Beobachtung, in deine Bookmark-Sammlung. Denn kostenfreie Musik- und Videoquellen sind doch noch rar gesät.

Kategorien
(Kostenlose) Services E-Business Essentials Freelance Technik

Bloggen für Einsteiger: Die richtige Plattform und Domain [#1]

Heute starten wir eine neue, kleine Artikelserie speziell für die Menschen, die mit dem Bloggen anfangen möchten. Viele Dinge sind zu beachten und vielfach wissen Neueinsteiger nicht, was genau zu beachten ist. Daher bringen wir Licht ins Dunkel des Bloggens und gehen Schritt für Schritt auf dem Weg zu einem eigenen Blog vor.

Bloggen für Einsteiger: Die richtige Plattform und Domain [#1]

Welche Plattform solltest Du wählen?

Angehende Blogger haben das Problem, dass sie nicht recht wissen, welche Plattform für ihre Zwecke die Beste ist. Greifen wir als Beispiel einfach mal die drei bekanntesten Plattformen heraus: Blogger, WordPress.com und WordPress.org. Die beiden Lösungen Blogger.com und WordPress.com sind kostenlos und bieten sich daher auf den ersten Blick für Einsteiger an.

Kostenlose Lösungen bieten jedoch auch eine Menge Nachteile für diejenigen, die nicht nur etwas herumspielen, sondern ernsthaft bloggen möchten. Doch dazu später mehr.

Blogger.com

Blogger.com ist die kostenlose Blog-Plattform von Google. Wenn du einen Google-Account besitzt, kannst du dich in Windeseile bei Blogger anmelden und einen eigenen Blog starten. Danach bestätigst du dein Profil, stellst die richtige Sprache ein, falls noch nicht geschehen und klickst auf »Weiter zu Blogger«. In nächsten Fenster musst Du nur auf den Button »Neuer Blog« klicken, um einen Blog zu starten.

Im darauffolgenden Fenster wählst du deinen Blognamen und die Blog-Adresse, die eine Subdomain von Blogger ist.

Beipiel: meintestblogistcool.blogspot.com.

Aus nur sieben Designs kannst du jetzt noch auswählen, wie dein Blog aussehen soll. Danach braucht es noch einen Klick auf »Blog erstellen« und du bist bereits fertig. Ein Artikel sieht dann so aus, mit meinen Einstellungen:

Ein Blog mit Artikel bei Blogger.com
Ein Blog mit Artikel bei Blogger.com

Fazit zu Blogger.com

Blogger.com ist sehr rudimentär ausgelegt. Man bekommt kaum einfache Möglichkeiten, um auf das Design Einfluss nehmen zu können, doch gerade das wäre wichtig. Die Benutzerfreundlichkeit ist groß, aber das optische Ergebnis ist keinesfalls zufriedenstellend. Fazit: zum Herumspielen geeignet, für das mehr oder weniger ernsthafte Bloggen jedoch völlig ungeeignet.

WordPress.com

WordPress gibt es ebenfalls in einer kostenlosen Variante, WordPress.com genannt. Auch hier kannst du dir in Nullkommanichts einen Blog anlegen. Nachdem du dich bei WordPress.com registriert hast, kannst du in nur 5 Schritten einen neuen Blog erstellen.

Du wählst zuerst eine Kategorie, in die dein Blog passen würde (Gesundheit und Wellness und so weiter), gehst danach in die Tiefe und suchst dir etwas genauer aus, worum es geht. Im Anschluss wählst du, wie deine Startseite aufgeteilt wird. Danach folgt die Auswahl eines Themes – des eigentlichen Designs – auf Basis der von dir ausgesuchten Aufteilung der Startseite.

Das Theme lässt sich jederzeit wechseln, wenn es dir nicht mehr zusagen sollte.

Ein Theme finden

Jetzt kannst du dir eine Domain aussuchen. Du hast zwei Möglichkeiten: zum einen kannst du eine kostenlose Subdomain von WordPress nehmen, zum anderen eine eigene Domain wählen, die dich dann ab 18 Euro jährlich kosten wird.

Eine Domain wählen

Wenn du die Domain gewählt hast, kannst du unter den Tarifen wählen, die dir zur Auswahl stehen. Kostenlos ist nur der Tarif ohne jegliche Extras und sehr wenig Anpassungsmöglichkeiten. Wenn ein vernünftiger Tarif gewählt wird, zahlt man schnell 25 Euro monatlich. Das ist heftig viel – zu viel!

Der Tarif bei WordPress.com

Einen Artikel zu veröffentlichen, geht schnell und einfach. Die Oberfläche ist sehr aufgeräumt.

neuer-beitrag

Das Ergebnis ist schon wesentlich angenehmer anzusehen als beim Konkurrenten Blogger.

Ein Testartikel

Fazit zu WordPress.com

WordPress.com ist eine gute Wahl, um das Bloggen zu üben und einen kleinen Anfang zu wagen. Allerdings ist es nicht geeignet für diejenigen, die nicht nur alle paar Wochen einen Beitrag für ihre Arbeitskollegen (oder ähnliche) schreiben wollen. Man hat fast keine Einflussmöglichkeiten, kann das Theme nicht »tunen und anpassen«, kann keine Plugins installieren, um die Funktionen zu erweitern. Kurzum, entweder zahlst du für mehr Optionen, oder wählst etwas anderes.

Wenn du wirklich ernsthaft bloggen möchtest, dann kommst du schlecht um eine kostenpflichtige Lösung herum.

WordPress.org

WordPress
WordPress Original: Es kann nur Einen geben.

Dies ist das »richtige« WordPress. Die Version, die den Siegeszug um die ganze Welt angetreten hat. Die Software ist ebenfalls kostenlos, benötigt aber einen Speicherplatz im Internet. Um WordPress einsetzen zu können, musst du also entweder ein Webhosting-Paket oder einen Server mieten.

Innerhalb dieses Speicherplatzes kann WordPress dann installiert werden, was wirklich einfach ist. Die meisten Webhosting-Anbieter stellen dir einen Auto-Installer zur Verfügung. So hast du dein WordPress innerhalb von nur wenigen Minuten ganz easy installiert.

Ein brauchbares Webhosting-Paket bekommst du bereits für ab fünf Euro im Monat. Du solltest darauf achten, dass du für dein Geld eine SSD-Festplatte anstatt einer HDD bekommst, und sich die neue PHP-Version 7 einstellen lässt. Beides macht deinen Blog schneller. Ein solches Webhosting beinhaltet auch immer mindestens eine Domain-Adresse.

Ich habe mit dem Hoster Alfahosting.de gute Erfahrungen gemacht. Sie sind preislich okay und bieten einen Ticket-Support, der zumeist innerhalb von 20 Minuten hilft.

Alfahosting – MultiXL Paket mit SSD-Option für 5,99 € im Monat.

Warum du das »richtige« WordPress wählen solltest

Wenn du wirklich und wahrhaftig bloggen möchtest, dann wähle WordPress.org und ein Webhosting-Paket. Du bekommst eine Menge Vorteile für dein Geld.

  • Themes lassen sich direkt aus WordPress heraus suchen und mit zwei Klicks installieren
  • Du kannst aus fast 4.000 kostenlosen Themes dein Design auswählen.
  • Du kannst auch professionelle, kostenpflichtige Themes installieren.
  • Du kannst aus kostenfreien 45.000 Plugins die von dir gesuchte Funktionserweiterung wählen.
  • Du kannst dein WordPress unendlich anpassen, bis es dir gefällt.
  • Jede denkbare Funktion ist nur eine Plugin-Installation entfernt.
  • Du hast die volle Kontrolle über jeden Aspekt deiner Website.

Ich empfehle dir also dringend, Butter bei die Fische zu tun und WordPress zu installieren. Die deutsche Community ist groß, du bekommst immer einen Rat. Für jedes Problem existiert mindestens ein Tutorial und ein Plugin.

Kostenlose Themes und Plugins:

Ratgeber zur Auswahl des richtigen Hosters für dich:

Die Wahl der richtigen Domain

Du hast deinen favorisierten Webhoster ausgewählt. Das ist gut. Nun stellt sich zumeist bereits bei der Bestellung deines Hosting-Pakets die Frage nach der Domain-Adresse. Die Domain ist eine wirklich wichtige Sache, denn sie ist sozusagen die »Anschrift« deines Blogs. Dr. Web hat zum Beispiel die Domain drweb.de. Eingestellt ist zudem noch die Anzeige von »www«. Die vollständige Domain lautet also www.drweb.de. Auf folgendes kommt es bei einer guten Domain an:

  • Eine gute Domain sollte so kurz und einprägsam wie möglich sein
  • Sie sollte bereits dein Thema im Namen tragen. Schreibst du über Gesundheit, sollte sich das in der Domain wiederfinden.
  • Deine optimale Domain sollte nur einen Bindestrich beinhalten, wenn es wirklich nötig ist.
  • Wähle als Domainendung ein .de aus, wenn du auf Deutsch schreiben möchtest.

Finde deine Nische

Überlege vor der Auswahl genau, was deine Nische werden soll, in der du dich bewegen wirst. Worüber möchtest du schreiben, was ist dein Thema? Diese Überlegung entscheidet über die spätere Domain. Bedenke, dass ein eventueller Themenwechsel nicht immer zur bestehenden Domain passen wird, daher suche dir ein Thema, über das du jahrelang schreiben kannst, weil du genügend Fachwissen besitzt, um immer neue Beiträge darüber verfassen zu können.

Wenn du das getan hast, dann hast du einen wirklich guten Anhaltspunkt für eine Domain. Mit diesem Tool kannst du übrigens vor der Bestellung prüfen, ob die von dir gewünschte Domain noch frei ist:

Die Domain auf Verfügbarkeit prüfen
Die gewünschte Domain auf Verfügbarkeit prüfen.

Wenn die von dir ausgesuchte Domain noch frei ist, kannst du dein Webhosting-Paket bestellen, denn eine Domain ist kostenlos mit im Paket enthalten.

Fazit

Nun bist du stolzer Besitzer eines Webhosting-Pakets, einer guten Domain und kannst Dein WordPress installieren. Bei Alfahosting kannst du das leicht über den Installer bewältigen:

WP istallieren. Mein altes, nicht mehr genutztes Hosting-Paket bei Alfahosting.
WP istallieren. Mein altes, nicht mehr genutztes Hosting-Paket bei Alfahosting.

Als nächstes musst du ein Theme auswählen und die Grundausstattung nützlicher Plugins installieren. Doch davon mehr im zweiten Teil unserer Serie.

Übrigens: Alfahosting ist hier das Beispiel, weil ich selber dort hosten lasse und Screenshots daher unproblematisch zu machen sind. Du kannst auch andere Anbieter, wie z.B. Domain Factory, Hetzner, Mittwald, All-Inkl oder die Riesen 1&1 oder Strato wählen.

(dpe)

Kategorien
(Kostenlose) Services Essentials

Small Victories: Kostenlose Instant-Website aus deiner Dropbox

Cloudspeicher für die Darstellung der eigenen Website zu nutzen ist eine vollkommen naheliegende Überlegung. Von daher ist es eher verwunderlich, dass es gar nicht mal so viele Dienste gibt, die diese Überlegung aufgreifen und in einen Service gießen. Der neue Dienst „Small Victories“ leistet indes genau das. Schmeiß eine Handvoll Dateien in die Dropbox und sieh, was geschieht.

smallvictories-teaser_DE

Small Victories: Simples Flatfile-CMS in deiner Dropbox

Small Victories ist ein sehr schmales, kostenlos nutzbares CMSaaS (Content Management System as a Service), erdacht und gemacht von den kreativen Köpfen der New Yorker Design-Agentur XXIX.co. Das Konzept ist simpel. Du gibst dem Service Zugriff auf deinen Dropbox-Account. Daraufhin erstellt Small Victories einen Hauptordner, unter welchem dann die einzelnen Websites als Unterordner auftauchen. In diese Unterordner schiebst du die Dateien, die zu einer Website kumuliert werden sollen. Das ist in der absoluten Grundversion alles.

smallvictories-landing

Die Websites stehen sodann als Subdomains von smvi.co öffentlich bereit. Du kannst durch einen manuellen Eintrag in einer Datei namens settings.txt auch einen Passwortschutz vorschalten, wenn du es für erforderlich hältst. Aktualisierungen initiierst du ganz einfach, indem du die betreffenden Dateien in deiner Dropbox aktualisierst, änderst oder ergänzt. Jede Änderung des betreffenden Dropbox-Folders spiegelt sich nach kurzer Zeit live auf der entsprechenden Website wider.

Anstelle der Subdomains kannst du auch deine eigene Domain nutzen. Hierzu benötigst du Zugriff auf die DNS-Records deiner Domain, was heutzutage jeder mir bekannte Hoster ohne weiteres bietet. Noch vor zehn Jahren sah das anders aus.

Small Victories: Struktur in das Design bringen

Jetzt wird es natürlich eher untypisch sein, dass es einem egal ist, wie und in welcher Reihenfolge in die Dropbox gekippte Inhalte zur Anzeige gelangen. Diesbezüglich haben sich die Kreativen XXIX.co einiges an Gedanken gemacht.

Zum einen wählst du ganz generell schon mal sinnvollerweise aus einem von sechs verschiedenen Templates, die Grobstruktur in die Inhalte bringen. So könnte sich für die Präsentation von Bildern etwa das Template Slideshow anbieten, OnePager werden mit den Templates Homepage oder Campaign vordefiniert.

smallvictories-themes

Weitere Struktur bringst du in deine Designs, indem du dich an logisch ersonnene Namenskonventionen hältst. Für den Hintergrund der OnePager etwa verwendest du eine Datei namens background.jpg, die dann automatisch als Hintergrund erkannt und gesetzt wird. Die Reihenfolge der einzubinden Dateien bestimmst du, indem du die Dateien fortlaufend nummerierst, also etwa 01-bild.jpg, 02-text.txt etc.

Small Victories bindet dann die Dateien in genau dieser Reihenfolge ein. Generelle Angaben, etwa eine alphabetische Sortierung oder das Vorziehen der neuesten Dateien erledigst du über Eintragungen in der settings.txt der jeweiligen Site. Diese kannst du entweder manuell editieren und in die Dropbox schieben oder im Dialogwege über die Adminpage, die zu jeder Site angelegt wird, einstellen.

Es ist sogar möglich, Bildunterschriften zu vergeben. Hierzu benennst du eine Textdatei identisch zu dem entsprechenden Bild, also Bild-1.jpg und Bild-1-jpg.txt. Sogar die Verwendung eigener oder der Schriften aus Google Fonts und Typekit ist vorgesehen.

visdmcg-smallvictories-example
Abb.: Beispiel einer mit Small Victories erstellten Fotogalerie

Wer sich mit CSS und JavaScript auskennt, ist gar nicht eingeschränkt, sondern kann mit Small Victories realisieren, was er zu programmieren in der Lage ist. jQuery wird standardmäßig vom Dienst bereitgestellt und erfordert entsprechend keine ausdrückliche Referenzierung.

Small Victories: Gut dokumentiert

Small Victories verfügt über eine hinreichend ausführliche Dokumentation, die in englischer Sprache sehr genau in die Verfahrensweisen einführt und alle auftretenden Fragen zur Zufriedenheit zu klären imstande ist. Von daher gibt es an Small Victories nicht viel zu bemängeln, wenn man auf der Suche nach einem einfachen Flatfile-CMS ist.

Der Haken an der Sache: Small Victories verfolgt einen kollaborativen Ansatz und will mehreren Teilnehmern das gemeinsame Arbeiten an einer Site erlauben. Deshalb kann es nicht im Verzeichnis Dropbox/Apps arbeiten. Die dortigen Ordnern lassen sich nicht mit anderen teilen. Um also anderen das Bearbeiten deiner Website zu erlauben, muss der Hauptordner außerhalb des Apps-Ordners sitzen. Dadurch wird es erforderlich, Small Victories Vollzugriff auf deine Dropbox zu erlauben. Je nachdem, wie du deine Dropbox ansonsten nutzt, kann das etwas sein, was du keinesfalls machen willst. Bedenke aber, dass das Erstellen einer neuen Dropbox für die ausschließliche Nutzung als Container für Small Victories jederzeit möglich ist und nicht mal etwas kostet ;-)

Kategorien
(Kostenlose) Services Bilder & Vektorgrafiken bearbeiten Design Essentials Freebies, Tools und Templates Photoshop

Fontea: Nutze alle Google-Fonts in Photoshop

Die pfiffigen Tool-Bastler aus dem Hause Source sind wieder da. Mit Fontea veröffentlichten sie jüngst ein Photoshop-Plugin, das es dir ermöglicht, alle Google-Fonts direkt aus Photoshop heraus zu verwenden. Fontea funktioniert ab Photoshop 2015 und ist kostenlos. Eine entsprechende Erweiterung für Sketch ist bereits angekündigt.

Fontea: Nutze alle Google-Fonts in Photoshop

Google-Fonts bequem am Desktop nutzen

Schon vor Jahren stellte ich Möglichkeiten vor, wie man sich alle Google-Fonts auf die Platte zieht, damit man flexibel im Einsatz ist. Der Komplett-Download ist allerdings auch ein schwergewichtiges Thema und nicht nur von daher sicherlich für den einen oder anderen keine wirkliche Alternative. Der Vorteil ist, dass die Lösung komplett kostenlos ist.

Eine Alternative dazu ist das Tool Skyfonts, welches ich dir hier vorstellte. Damit kannst du selektiv einzelne Google-Fonts synchronisieren, also herunterladen. Der Haken dabei ist allerdings, dass die Fonts auf der Website des Dienstes anwählen musst. Erst danach kann synchronisiert werden. Skyfonts ist, soweit man nur Google-Fonts nutzen will, ebenfalls kostenlos.

Fontea vereinfacht die Schriftverwendung in Photoshop

Das neue Werkzeug namens Fontea funktioniert zwar nur mit Photoshop, während die beiden vorgenannten Lösungen auf der Betriebssystemebene arbeiten und somit Fonts für alle Programme zur Verfügung stellen. Ich habe allerdings bei mir selber festgestellt, dass ich die Fonts auch gar nicht in anderen Programmen brauche. In Photoshop erstelle ich die Prototypen. Da benötige ich Google Fonts, in Office verlangsamen sie mir nur die Schriftauswahl.

Fontea steht aktuell zum Download für Mac OSX und Windows zur Verfügung. Es funktioniert ab Photoshop 2015. Umgestiegene Designer werden sich freuen, dass es bald eine Version geben wird, die die Funktionalität auch in Sketch realisiert.

Download und Installation des weniger als 50 MB schweren Pakets funktionieren in gewohnter Weise. Fontea erkennt selbtständig den Installationspfad zu Photoshop, lässt sich aber auch manuell auf andere Pfade biegen.

Einmal installiert findest du Fontea in Photoshop unter Fenster > Erweiterungen > Fontea. Eines der gewohnten Schwebefenster positioniert sich rechtsseitig im Editor. Die Funktionsweise ist sehr simpel. Du markierst eine Textebene und klickst danach auf eine der Schriftarten im Fontea-Fenster. Nach kurzer Bedenkzeit wird der gewählte Text mit der gewählten Schriftart dargestellt. Das ist alles.

Um dir den Umgang mit den hunderten von Fonts zu erleichtern, hat Fontea mehrere Hilfsmittel an Bord. Zum einen kannst du die Auswahl auf eine von sechs Kategorien beschränken. Zum anderen kannst du per Freitext suchen. Die zuletzt verwendeten Schriften findest du hinter dem Icon „Recent“. Außerdem kannst du Fonts per Klick auf den Stern neben der Schrift als Favorit markieren und so dafür sorgen, dass er in die entsprechende Favoritenliste aufgenommen wird.

Fontea: Nutze alle Google-Fonts in Photoshop

Beachte bitte, dass für die Nutzung ein Source-Account erforderlich ist, den du bei der ersten Nutzung schnell und unkompliziert anlegen kannst. Für die OAuth-Authentifizierung kannst du Facebook, Twitter oider Github wählen. Willst du das nicht, nimmst du klassisch E-Mail plus Passwort her.

Fontea: klare Empfehlung

In meinem Test unter Windows 10 mit Photoshop 2015 funktionierte alles bestens. Die Reaktionszeit nach der Wahl des Font lag im absolut akzeptablen Rahmen von etwa zwei Sekunden – und das trotz meiner eher rückständigen Internetgeschwindigkeit.

Nachdem weder Fontea noch die eingesetzten Fonts etwas kosten und von daher ohnehin zu den meistgenutzten Fonts für das Webdesign gehören, spricht nichts gegen den Einsatz von Fontea. Probier es halt selbst aus. Wenn du Sketch-Nutzer bist, habe noch etwas Geduld. Fontea ist auch für dich schon in Arbeit.

Kategorien
(Kostenlose) Services E-Business E-Commerce Essentials Technik

Mein Onlinerechner macht deine Website schlau

Es gibt ja kaum etwas, das sich nicht berechnen lässt. So finden sich immer wieder genügend Anlässe und Gründe, Dinge in Zahlen zu fassen, um sie vergleichen oder anderweitig verwenden zu können. Ob Body-Mass-Index, Bruttoinlandsprodukt oder durchschnittlicher Papierverbrauch im Büro – (fast) alles lässt sich in eine Formel bringen und errechnen. Der Dienst Mein Onlinerechner hilft dir, individuelle Berechnungen und Formeln anzulegen und aus diesen einen praktischen Rechner für deine Website zu erstellen.

Mein Onlinerechner

Mein Onlinerechner: Projekt und Variablen anlegen und bearbeiten

Mein Onlinerechner ist ein Tool, welches dir auf schnelle und einfache Weise ermöglicht, ganz individuelle Berechnungen anzustellen. Nachdem du dich kostenlos bei dem Dienst angemeldet hast, legst du zunächst ein neues Projekt an. Jedes Projekt entspricht hier einem eigenen Rechner. Du kannst diese Rechner öffentlich machen, so dass sie auf der Website des Dienstes für alle zugänglich sind, oder sie ausschließlich für deine eigene Website verwenden.

Mein Onlinerechner
Jedes Projekt steht für einen Rechner

Anschließend legst du beliebig viele Variablen an, die du einem Projekt zuordnest und hernach in einer Formel verarbeitest. Grundsätzlich kommen Variablen zum Einsatz, die eine Benutzereingabe erwarten, jene mit vorgegebenen Werten und solche, denen das Ergebnis der Berechnung zugewiesen wird.

Beim Anlegen von Variablen stehen dir verschiedene Möglichkeiten zur Verfügung. Neben der Vergabe eines Namens kannst du optional eine Kurzinformation hinterlegen. Das ist für die Benutzer deines Rechners später ganz hilfreich, da du genaue Angaben über den Zweck der Variable machen kannst. Ob die Variable leer bleibt und ausschließlich durch eine Benutzereingabe gefüllt wird oder ob du einen Wert vorgibst, der gegebenenfalls überschrieben werden kann, entscheidest du ganz individuell.

Mein Onlinerechner
Variablen erstellen und bearbeiten

Auch Auswahlfelder in Form von Radio-Buttons oder Dropdown-Listen realisierst du über eine Variable. Dazu wird als Wert für die Variable eine Zeichenkette übergeben, welche die Wertbezeichnung, sowie die zur Berechnung verwendete Zahl beinhaltet.

Optional vergibst du noch eine Einheit. Die Einheit wird im Formular später neben dem Eingabefeld dargestellt. Gerade bei Formeln, in denen unterschiedliche Einheiten verrechnet werden, ist es sinnvoll, die unterschiedlichen Einheiten entsprechend auszuzeichnen.

Berechnung per Formel definieren

Sind alle Variablen, die zu deiner Berechnung benötigt werden, definiert, geht es an die Formel. Hierbei stellt dir Mein Onlinerechner zwei Varianten zur Erstellung zur Verfügung. Beim textbasierten Formelgenerator schreibst du Variablen und Operatoren einfach in ein entsprechendes Eingabefeld. Wer mit JavaScript oder einer anderen Programmiersprache schon einmal Berechnungen angestellt hat, wird die Auszeichnungspraxis kennen.

Mein Onlinerechner
Formeln per einfachem Textfeld erstellen

Alternativ dazu gibt es eine visuelle Formelbearbeitung, bei der du per Drag-&-Drop deine Variablen sowie die Operatoren in ein Feld ziehst. Die visuelle Formelbearbeitung ist deutlich einfacher und übersichtlicher. Denn dort werden Variablen nicht nur mit der systeminternen Bezeichnung versehen, sondern auch mit den von dir vergebenen Namen.

Im textbasierten Editor musst du die intern vergebenen Bezeichnungen für de Variablen verwenden, was die ganze Sache etwas verkompliziert. Denn diese beginnen alle mit „var“, gefolgt von einer automatisch vergebenen mehrstelligen Zahl.

Mein Onlinerechner
Visuelle Bearbeitung von Formeln

Als Operatoren stehen dir die vier Grundrechenarten, sowie Wurzel- und Potenzrechnung zur Verfügung. Außerdem setzt du Berechnungen in Klammern, um die Punkt-vor-Strich-Regel zu umgehen. Das Ergebnis wird anschließend an deine Ausgabe-Variable übergeben, indem du diese nach dem Gleich-Zeichen ans Ende der Formel setzt.

Formel testen und einbinden

Ob deine Formel korrekt funktioniert, kannst du jederzeit testen. Dazu wird dir das generierte HTML-Formular angezeigt. Jetzt hast du die Möglichkeit, die erforderlichen Eingabefelder auszufüllen und das Ergebnis berechnen lassen.

Mein Onlinerechner
Darstellung des fertigen Rechners

Funktioniert die Formel so, wie sie soll, wird es Zeit, sie in deine Website einzubinden. Dazu stellt dir Mein Onlinerechner ein HTML-Snippet zur Verfügung, bei dem du nur die Projekt-ID deines Rechners einzugeben hast. Anschließend fügst du das Snippet an entsprechender Stelle in dein HTML-Dokument ein. Der Online-Rechner wird dann per Iframe in deiner Website dargestellt.

Die Breite und Höhe des Rechners definierst du über die Größe des Iframes. Der Rechner selbst ist so gestaltet, dass er immer die gesamte Breite des Iframes ausfüllt. Das erlaubt dir, den Rechner passend in dein HTML-Dokument einzubinden.

Mein Onlinerechner: Individuelles Design und geschützte Formel

Der kostenlose Tarif von Mein Onlinerechner erlaubt leider keine individuelle Gestaltung deines Rechners. Auch ist die Formel nicht geschützt. Das heißt, je nach Formel lässt sich sich die Berechnung gegebenenfalls im Quelltext nachvollziehen. Wer einen Online-Rechner ohne Iframe, dafür mit individuellem Design und mit geschützter Formel möchte, sollte sich für das Premium-Paket für einmalig 69 Euro zuzüglich Mehrwertsteuer entscheiden.

Mein Onlinerechner
Drei Pakete – ein kostenloses und zwei kostenpflichtige

Für 179 Euro zuzüglich Mehrwertsteuer gibt es das Pro-Paket mit zusätzlichen Features. Damit kannst du zum Beispiel die Benutzereingaben als PDF-Dokument herunterladen. Außerdem verschwindet hierbei die Verpflichtung, einen Copyright-Hinweis zu Mein Onlinerechner zu hinterlegen. Gegen Aufpreis ist es zudem möglich, Formeln aus Excel- und OpenOffice-Tabellen zu importieren und in einen Online-Rechner verwandeln zu lassen.

Die Preise verstehen sich jeweils für einen Online-Rechner und sind jeweils einmalig dafür zu entrichten. Auf Wunsch unterstützt dich Mein Onlinerechner bei der Erstellung ganz individueller Lösungen, die beispielsweise als WordPress-Plugin oder TYPO3-Erweiterung programmiert werden. Diese fügst du dann ganz bequem in dein Content-Management-System ein.

Bei dem Pro-Paket gibt es seit Ende letzten Jahres übrigens die Möglichkeit, deinen Online-Rechner in eine mobile App für iOS- und Android-Geräte umzuwandeln. Gegen Aufpreis kümmert sich Mein Onlinerechner auch darum, dass deine App im Apple Store sowie bei Google Play erhältlich ist.

Mein Onlinerechner

Für wen ist ein Online-Rechner sinnvoll?

Einfache Rechner, die zum Beispiel nur Einheiten oder Währungen umrechnen, lassen sich natürlich auch mit Mein Onlinerechner erstellen. Solche Rechner findest du im Internet jedoch im Überfluss. Vielmehr ist Mein Onlinerechner interessant für ganz spezielle Berechnungen.

Du bist Heizungsinstallateur? Dann biete einen Rechner an, der deinen Kunden den Wärmebedarf für eine neue Heizung berechnet. Du betreibst einen Online-Shop für Hundefutter? Dann lass deine Kunden berechnen, wie viel Futter sie für ihre Haustiere einplanen sollten. Sobald du individuelle Berechnungen anbietest, die den Kunden beziehungsweise Besuchern deiner Website einen Mehrwert bieten, ist Mein Onlinerechner eine interessante Erweiterung deines Internet- und Serviceangebotes.

Mein Onlinerechner
Rangliste mit den beliebtesten Rechnern

Eine Auswahl aktueller Online-Rechner sowie eine Rangliste mit den meist genutzten Rechnern, die mit Mein Onlinerechner erstellt wurden, findest du auf der Website des Dienstes. So kannst du dir einen sehr schönen Überblick über die Möglichkeiten verschaffen, die Mein Onlinerechner dir bietet. Du wirst feststellen, dass es kaum etwas gibt, das sich nicht irgendwie in eine Formel bringen lässt.

Fazit

Gerade wer sich mit JavaScript oder anderen Programmiersprachen nicht auskennt, findet mit Mein Onlinerechner“ ein einfach zu bedienendes Tool, das im Handumdrehen individuelle Online-Rechner erstellt. Grundkenntnisse in Mathematik sollten selbstredend vorhanden sein. Denn wie die Formel für deine Berechnung aussehen soll, musst du schon selbst wissen. Aber gerade komplexe Berechnungen sind nicht jedermanns Sache. Hier helfen dir die Experten des Dienstes auch gerne weiter.

Die Umsetzung in eine Programmiersprache und das Zusammenspiel mit HTML einschließlich der Auszeichnung des Quelltextes übernimmt Mein Onlinerechner komplett für dich.

Mein Onlinerechner bietet im Übrigen auch ganz individuelle Leistungen an. Wer beispielsweise komplexe Berechnungen mit Datenbankanbindung benötigt oder eine aussagekräftige Auswertung von Berechnungen, kann sich einfach an den Dienst wenden und sich ein individuelles Angebot einholen.

(dpe)