Kategorien
Webdesign

Sonar: Kostenloses Tool von Microsoft hilft dir Fehler auf deiner Website aufzuspüren

In der Vergangenheit legte Microsoft nicht viel Wert auf Webstandards. Aber spätestens mit dem neuen Browser Edge ist man auch bei Microsoft interessiert daran, sich an HTML- und CSS-Standards zu halten. Mit Sonar gibt es nun sogar ein Tool, welches Websites auf die Einhaltung solcher Standards überprüft. Darüber hinaus weist Sonar auf Optimierungsmöglichkeiten und auf Sicherheitsmängel hin.

Sonar: Website angeben und auf Ergebnisse warten

Um deine Website mit dem Tool zu prüfen, gibst du ganz einfach die URL deiner Website an und wartest auf die Ergebnisse. Es kann ein paar Minuten dauern, bis Sonar deine Website geprüft hat. Über einen Permalink rufst du die Ergebnisse anschließend einfach ab.

Sonar: Kostenloses Tool von Microsoft hilft dir bei der Entdeckung von Fehlern auf deiner Website
Übersicht der Ergebnisse

Sonar prüft deine Website in fünf verschiedenen Kategorien. Als erstes ist die Barrierefreiheit an der Reihe. Dabei richtet sich Sonar an die WCAG-Richtlinie des W3C, die vorgibt, wie eine Website ausgezeichnet sein muss, damit sie als barrierefrei gilt. Dazu gehört zum Beispiel, dass Nicht-Text-Inhalte wie Bilder mit alternativen Informationen für Sehbehinderte ausgezeichnet werden.

Die zweite Kategorie beschäftigt sich mit Interoperabilität und prüft zum Beispiel, ob eine Website mit validem HTML ausgezeichnet wurde und ob alle wichtigen Angaben im HTML-Kopf gemacht wurden. Dazu zählen unter anderem Angaben zum Zeichensatz und zum Viewport.

Speziell für den Internet Explorer prüft Sonar, ob Fehlerseiten eine Mindestgröße von 256 Bytes haben, da der alte Microsoft-Browser ansonsten eigene Fehlerseiten ausgibt.

Sonar macht Optimierungsvorschläge für schnellere Websites

In der Kategorie Performance bekommst Vorschläge gemacht, wie deine Website schneller und performanter werden kann. So findet Sonar unter anderem heraus, ob du in Sachen Bildkomprimierung bereits alles gegeben hat. Sonar verrät dir sogar, wie viele Kilobytes du bei entsprechend guter Komprimierung einsparen kannst.

Sonar: Kostenloses Tool von Microsoft hilft dir bei der Entdeckung von Fehlern auf deiner Website
Performance-Vorschläge

Wer Accelerated Mobile Pages (AMP) nutzt, um Inhalte einer Website speziell für Mobilgeräte auszugeben, wird per Sonar auch über Fehler bezüglich der AMP-Auszeichnung informiert.

Das Besondere an AMP ist, dass solch ausgezeichnete Inhalte schneller geladen werden können, da sie auf speziellen Servern zwischengespeichert sind. Dieses Zwischenspeichern funktioniert jedoch nur, wenn die Auszeichnung valide ist. Neben Google unterstützt im Übrigen auch Microsofts Suchmaschine Bing AMP.

Unterstützung von Progressive Web Applications (PWA)

Noch eine weitere recht neue Technologie wird unterstützt: nämlich Progressive Web Applications. Darunter versteht man Webanwendungen, die fast wie native Apps auf Smartphones und Tablets laufen.

Sonar prüft hierbei, ob das notwendige Manifest für PWAs vorhanden ist und ob entsprechende Icons zur Darstellung auf dem Startbildschirm existieren. Außerdem prüft Sonar, ob ein App-Name im Manifest angegeben ist. All diese Angaben sind notwendig, damit eine Website als Progressive Web Application auf einem Mobilgerät ausgeführt werden kann.

Sonar hilft Sicherheitsmängel festzustellen

Zu guter Letzt wird geprüft, ob eine Website Sicherheitsmängel aufweist, die zum Beispiel Angriffe auf eine Website begünstigen können. So prüft Sonar zum Beispiel, ob bestimmte verzichtbare und potenziell unsichere Header verschickt werden.

Sonar: Kostenloses Tool von Microsoft hilft dir bei der Entdeckung von Fehlern auf deiner Website
Sicherheitsvorschläge

So kann es beispielsweise vorkommen, dass Servertechnologien wie PHP und ASP.NET Informationen über die verwendete Technologie und Version über einen Header ausgeben. Für einen Hacker sind solche Informationen interessant, da es einfacher ist, vorhandene Sicherheitslücken in der Technologie auszunutzen.

Ebenfalls geprüft wird, ob bei Verweisen protokoll-relative Links verwendet werden. So sollten Links grundsätzlich immer mit „http://“ oder „https://“ beginnen. Seitdem verschlüsselte Websites immer mehr Beachtung finden, beginnen – zum Beispiel beim Einbinden von JavaScript von Fremdanbietern wie Google – Links einfach mit „//“, was dazu führt, dass immer das Protokoll der einbindenden Website verwendet wird.

Auch in Sachen Cookies informiert Sonar dich, ob diese so gesetzt sind, dass keine Gefahr ausgeht. Im Idealfall werden Cookies nur von sicheren Verbindungen akzeptiert und können nur per HTTP (also nicht per JavaScript) ausgelesen werden.

sonar liefert zusätzliche Informationen zu Fehlern und Warnungen

Neben der Übersicht, die über die Anzahl der Fehler und Warnungen jeder Kategorie informiert, erhältst du eine Liste mit allen gefundenen Fehlern beziehungsweise Warnungen. Dort ist kurz und knapp erklärt, was du verbessern beziehungsweise in Ordnung bringen solltest.

Außerdem gibt es zu jedem Punkt einen Link zur Sonar-Dokumentation, in der du eine ausführliche Beschreibung erhältst, was geprüft wurde, wie es geprüft wurde und warum es wichtig und sinnvoll ist, den entsprechenden Fehler oder die Warnung aus der Welt zu schaffen.

Sonar selbst installieren

Microsoft hat Sonar unter Open-Source-Lizenz gestellt und bietet den Quelltext zum Herunterladen an. So kannst du dir das Tool selbst auf einem Server installieren. Voraussetzung ist, dass dort Node.js läuft.

Nach der Einrichtung von Sonar kannst du deine Webprojekte bequem über die Kommandozeile starten. So lässt sich das Tool nach deinen Wünschen konfigurieren.

So legst du Beispielsweise fest, welche Regeln geprüft werden sollen und welche für dich verzichtbar sind.

Kategorien
HTML/CSS Webdesign

Gitter voll im Griff: Firefox mit neuem Layout-Panel für CSS-Grids

Ordentliche, auf Raster beziehungsweise Gitter basierende Layouts waren bislang nur auf umständlichen Wegen möglich. Die neuen CSS-Grids, die in den neueren Versionen der bekannten Browser seit einiger Zeit möglich sind, erlauben endlich solche Layouts. Und im Firefox gibt es – zumindest in der Nightly-Version – ein neues Layout-Panel im Inspektor der Entwicklerwerkzeuge, welches dir den Umgang mit CSS-Grids vereinfacht.

Mit CSS-Grids zu besseren Layouts

Das neue Grid-Modell macht es endlich möglich, komplexe Layouts zu entwickeln, die auf der Grundlage eines selbst definierten Gitters bestehen. Dazu legst du per CSS Spalten und Reihen fest, bestimmst Abstände und Breiten. Anschließend werden beliebige Elemente innerhalb des Gitters platziert.

body {
  display: grid;
  grid-template-rows: 200px 1fr 100px;
  grid-template-columns: 25% 25% 25% 25%;
}

Für ein Grid-Layout muss die „display“-Eigenschaft zunächst per „grid“ auf das neue Layoutmodell umgestellt werden. Anschließend werden per „grid-template-rows“ und „grid-template-columns“ die Reihen und Spalten des Gitters definiert. Dabei sind absolute und relative Angaben möglich.

Für jede Reihe beziehungsweise Spalte wird ein Wert übergeben. Die Kombination von absoluten und relativen Werten ist möglich. So können wie im Beispiel Reihen feste Werte besitzen. Mit der Einheit „fr“ für „fraction“ lassen sich flexible Breiten und Höhen herstellen. Dabei füllt die Einheit „fr“ den freien Raum innerhalb des Gitters aus.

Zusätzlich kannst du per „grid-row-gap“ und „grid-column-gap“ Abstände zwischen den einzelnen Gitterzellen festlegen. So hast du die Möglichkeit, sehr individuelle und flexible Raster für deine Weblayouts zu entwickeln.

Ist das Raster festgelegt, müssen die einzelnen Inhalte platziert werden. Dazu wird angegeben, in welchen Zellen des Gitters der Inhalt positioniert werden soll.

header {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 2;
}

Mit „grid-column-start“ und „grid-column-end“ werden die Start- und Endpunkte innerhalb des Rasters angegeben. Analog dazu gibt es „grid-row-start“ und „grid-row-end“. Dank der vier Eigenschaften ergeben sich die Zellen, in denen das jeweilige Element stehen soll.

Das Prinzip des CSS-Grids ist also recht einfach. Die Auszeichnung ist hingegen nicht unbedingt leicht nachvollziehbar – gerade bei komplexen Rastern. Hier kommt das neue Layout-Panel des Inspektors von Firefox ins Spiel.

Neues Layout-Panel zeigt Raster

Das neue Panel sorgt zunächst einmal dafür, dass alle auf einer Seite definierten Raster dargestellt werden. Während das eigentliche Raster auf einer Website ja nicht sichtbar ist, stellt Firefox die einzelnen Spalten und Zeilen sowie gegebenenfalls die Zwischenräume dar, sodass es Entwickler einfacher haben, sich innerhalb des Gitters zurechtzufinden.

Das Layout-Panel erreichst du, indem du die Entwicklerwerkzeuge aufrufst und in den Inspektor wechselst. Dort findest du das Layout-Panel. Für jedes Grid-Element wird ein Button eingeblendet, der das für das jeweilige Element hinterlegte Raster einblendet. Im Browserfenster werden Rasterlinien über das Layout gelegt, die das von dir per CSS-Grids definierte Gitter hervorheben.

Zusätzlich wird das Raster auch im Panel selbst angezeigt. Bewegst du die Maus über dieses Raster, wird die entsprechende Zelle sowohl im Inspektor als auch im Browserfenster hervorgehoben.

Das Einblenden von Zeilennummern erleichtert dir zudem, einzelne Rasterzellen ausfindig zu machen. Die unendlichen Gitterlinien, die du optional dazuschalten kannst, führen die Linien des Rasters auch jenseits des jeweiligen Grid-Elementes weiter. Das kann mal nützlich, mal störend sein, weshalb das Ein- und Ausblenden dieser Option sinnvoll ist.

Rasterbereiche benennen und darstellen

Mit der CSS-Eigenschaft „grid-areas“ hast du die Möglichkeit, Bereiche innerhalb deines Gitters zu benennen und somit zu einer Art Gruppe zusammenzufassen. Alle Zellen mit derselben Bezeichnung stellen somit eine Gruppe dar.

grid-template-areas:
  "header header header header"
  "nav content content content"
  "footer footer footer footer";

Über die Option „Display grid areas“ (ist in der aktuellen Nightly-Version noch nicht ins Deutsche übersetzt) werden dir diese Rasterbereiche im Browserfenster dargestellt. Dabei werden die einzelnen Bereiche durch eine dickere Linie im Gitter hervorgehoben. Zusätzlich wird die jeweilige Bezeichnung des Bereichs eingeblendet.

Bewegst du deine Maus im Layout-Panel über eine Gitterzelle, wird im Browser nicht nur die Zelle hervorgehoben, sondern auch der Bereich, dem die Zelle zugeordnet ist.

Transformierungen werden berücksichtigt

Dank der CSS-Eigenschaft „transform“ sind Drehungen, Skalierungen und Verzerrungen von Elementen möglich. Auch auf ein Gitter-Element lassen sich diese anwenden. Der Inspektor berücksichtigt alle per „transform“ gemachten Änderungen und passt das Gitter entsprechend an.

Das heißt, bei einem gedrehten Gitter-Element wird auch das Raster selbst mit gedreht.

Fazit

Das neue Layout-Panel im Inspektor von Firefox hilft dir dabei, deine Grid-Layouts besser zu verstehen und zu entwickeln. Die Hervorhebung der Gitterlinien und die Nummerierung helfen dabei, Elemente zu platzieren und einen visuellen Eindruck des Gitters zu bekommen.

Dabei werden alle Möglichkeiten wie Abstände zwischen den Rasterzellen und die Einteilung in Bereiche mit berücksichtigt. Insgesamt macht der neue Panel einen guten Eindruck. Dass sich das neue Grid-Layout durchsetzen wird, dürfte nur eine Frage der Zeit sein, weshalb diese neue Funktion sicher für viele Webentwickler eine große Erleichterung bei der Arbeit darstellen wird.

Wann es das neue Layout-Panel in den regulären Firefox schafft, steht noch offen. Aber wer schon einmal probieren möchte, kann sich die Nightly-Version herunterladen. Da es sich dabei um keine ausgereifte Version handelt, sollte man sie nur zu Entwicklungszwecken und die in einer Live-Umgebung nutzen.

Kategorien
HTML/CSS Responsive Design Webdesign

Modernes Webdesign: Diese Fehler solltest du vermeiden

Webdesign und -entwicklung haben sich in den vergangenen Jahren enorm geändert. Daran ist vor allem auch das mobile Internet verantwortlich, was die Art und Weise, wann und wie wir das Internet nutzen, verändert hat. Vieles, was vor zehn Jahren noch gängig war, gilt heute als überholt. Selbst vieles, was vor zwei bis drei Jahren noch völlig aktuell war, gilt heute als veraltet. Welche Dinge solltest bei der Gestaltung und Entwicklung moderner Websites lieber nicht (mehr) machen?

Layouts nur für Desktopgeräte und Smartphones

Die Zeiten, in denen du deine Website nur für eine Ansicht entwickelt hast, sind ja nun schon lange vorbei. Und man findet mittlerweile nur noch wenige Websites, die ohne responsives Layout auskommen.

Doch häufig werden beim responsiven Layout nur zwei Geräte- beziehungsweise Displaytypen berücksichtigt: der klassische Monitor und das Smartphone. Dabei erhält zumindest das Desktoplayout eine feste Breite, während das mobile Layout häufig auf die gesamte Breite des Browserfensters ausgedehnt wird.

Die Unterscheidung nur zwischen Desktop und Smartphone ist mittlerweile jedoch viel zu kurz gegriffen. Denn es gibt mit Tablets und Phablets mittlerweile eine Vielzahl unterschiedlicher Geräte mit diversen Auflösungen. Die Unterscheidung zwischen nur zwei Typen wird dieser Entwicklung nicht gerecht. Daher solltest du dein Layout so flexibel halten, dass es auf allen Auflösungen funktioniert.

Auf großen Monitoren sollte dein Layout keine verschwenderisch großen Ränder links und rechts haben. Und auf Tablets sollte nicht das Layout für Mobilgeräte dargestellt werden.

Eigene Mobilversion deiner Website

Bleiben wir beim mobilen Webdesign. Als die Möglichkeiten responsiver Websites noch sehr eingeschränkt waren, wurden eigene Mobilversionen für Websites entwickelt. Noch heute haben vor allem große Newsportale immer noch eigene Mobilversionen, die meist über eine eigene Subdomain zugänglich sind.

Hier ergibt sich natürlich dasselbe Problem mit den Layouts. Darüber hinaus sind immer zwei Versionen einer Website zu pflegen. Und häufig funktioniert die Ausgabe der richtigen Version nicht. Da wird auf Tablets gerne mal die Mobilversion geladen, obwohl die Auflösung eigentlich problemlos die Desktopversion anzeigen könnte.

Inhalte fürs mobile Internet verstecken

Websites werden zunehmend komplexer. Das gilt für den Inhalt, aber auch für die Gestaltung. Großformatige Bilder und Grafiken werden kombiniert mit mehrspaltigen Texten und zusätzlichen Sidebars.

Und auch der Unterschied zwischen den Display- beziehungsweise Monitorgrößen wird immer größer. So gilt es heutzutage, Websites zu gestalten, die auf großen Monitoren ebenso gut aussehen wie auf kleinen Smartphones.

Das ist durchaus eine Herausforderung. Viele Webdesigner gehen da einen einfachen, aber nicht empfehlenswerten Weg. Angeblich verzichtbare Inhalte werden auf Smartphones einfach versteckt. Das mag im ersten Moment sinnvoll sein, um die Übersichtlichkeit einer Website auf einem Smartphone zu gewährleisten.

Aber da Websites oft häufiger mobil besucht werden als über einen Desktoprechner, ist dieses Vorgehen natürlich nicht im Sinne des Besuchers. Daher sollten auf Smartphones keine Inhalte vorenthalten werden. Vielmehr solltest du schauen, wie du alle Inhalte platzsparend und übersichtlich präsentierst. So kannst du Slider einsetzen oder Inhalte über eine Sidebar ausblenden und per Button einblenden lassen.

Fenster und Videos ungefragt über den Inhalt legen

Zu einer regelrechten Unsitte haben sich sogenannte „Modal Boxes“ entwickelt, die beim augenscheinlichen Verlassen einer Seite über den gesamten Inhalt selbiger gelegt werden. In solchen Bereichen wird dann beispielsweise auf den Newsletter oder auf irgendwelche Angebote hingewiesen.

Wenn man tatsächlich dabei ist, eine Seite zu verlassen, sind sie nicht störend. Wer aber nur versehentlich die Maus aus dem oberen Bereich der Seite hinausbewegt, wird bereits mit einem solchen Screen belästigt.

Wer seine Besucher also nicht verärgern will, sollte auf diese Pop-ups des modernen Webdesigns verzichten – so schön sie auch für einen Betreiber einer Website sein mögen.

Gleiches gilt für Videos, die ungefragt den Inhalt einer Website verdecken.

Einfache Auflösungen und falsche Bildformate

Das Internet ist nicht nur mobiler geworden; es ist auch hochauflösender geworden. Bei Displays und Monitoren spielt längst nicht mehr nur die Größe eine Rolle, sondern auch die Auflösung. So nimmt die Pixeldichte zu und die Auflösung wird immer schärfer.

Bei Bildern macht sich das zunehmend bemerkbar. In einfacher Auflösung sieht ein Bild auf einem hochauflösendem Display verwaschen und unscharf aus. Doch HTML5 und CSS3 erlauben es dir, Bilder für verschiedene Pixeldichten zu hinterlegen.

Nutze diese Möglichkeit, damit deine Website auch auf neuen Geräten nicht nur gut aussieht, sondern auch gestochen scharf ist. Wähle zudem das richtige Format für deine Bilder und Grafiken aus. Nutze JPEGs für Fotos, PNGs für Grafiken und SVGs für Vektorzeichnungen.

Systemschriften und zu kleine Schriften

Seit es Webschriften nach vielen Jahren in alle Browser geschafft haben, ist die Verwendung von Systemschriften nicht mehr nötig. Es gibt unzählige kostenlose und kostenpflichtige Schriften, die du in dein Webprojekt übernehmen kannst. Achte darauf, dass du es diese Schriften im neuen Format WOFF2 gibt. Dieses löst das bisherige Standardformat WOFF ab und ist dank besserer Komprimierung noch platzsparender. Und das ist gerade im mobilen Internet ein großer Vorteil.

Achte zudem darauf, dass du Schriften nicht zu klein einsetzt. Vor allem setze nicht auf eine einheitliche, feste Schriftgröße. Auf Smartphones sollten Schriften eine andere Größe haben als auf großen Monitoren.

Den Besucher warten lassen

Heutzutage erwartet man zurecht, dass Websites sich schnell aufbauen. Daher solltest du deine Website so entwickeln, dass sie schnell geladen wird. Optimiere Bilder und verwende das richtige Format.

Nutze Techniken wie das „<picture>“-Element, um immer passend große Bilder auszuliefern. Lade auf Smartphones Bilder in kleinerer Auflösung und nicht in einer Auflösung, wie sie auf einem großen Monitor benötigt wird.

Achte darauf, dass JavaScript die Ausgabe von HTML nicht blockiert oder verlangsamt und versichere dich, dass extern eingebundene Dateien deine Ladezeiten nicht negativ beeinflussen.

Kategorien
JavaScript & jQuery SEO & Online-Marketing

JavaScript und Suchmaschinen: Das solltest du beachten

Noch vor einigen Jahren war JavaScript mehr als umstritten. Nervige Werbe-Pop-ups führten dazu, dass die Programmiersprache oft ganz grundsätzlich blockiert wurde. Mittlerweile ist JavaScript aus dem modernen Webdesign nicht mehr wegzudenken. Vor allem im mobilen Internet spielt JavaScript eine wichtige Rolle – unter anderem zur Medienwiedergabe, aber auch für Geolocation und moderne Navigationen. Doch wie gut verträgt sich JavaScript mit Suchmaschinen? Was musst du beachten?

Suchmaschinen haben dazugelernt

Zunächst einmal sei gesagt, dass die Zeiten vorbei sind, in denen Suchmaschinen mit JavaScript gar nichts anfangen konnten. Waren per JavaScript geladene Inhalte früher unsichtbar für Suchmaschinen, haben die Suchmaschinen mittlerweile dazugelernt. Und wenn ich von Suchmaschinen spreche, ist natürlich vor allem Google gemeint. Denn der Suchriese ist nach wie vor das Maß aller Dinge.

So ist JavaScript keine grundsätzliche Hürde mehr für Google. Allerdings bedeutet dies nicht, dass du JavaScript völlig bedenkenlos einsetzen kannst. Da Google immer ein großes Geheimnis daraus macht, wie sein Suchalgorithmus funktioniert, sind folgende Tipps immer mit etwas Vorsicht zu genießen.

Inhalte per Load- statt User-Events laden

Oftmals werden Events eingesetzt, um per JavaScript Inhalte einer Website zu ändern. Hier gilt, dass Suchmaschinen in der Regel nur solche Inhalte berücksichtigen, die über Load-Events geladen werden.

Diese Ereignisse werden vom Browser gefeuert, sobald der DOM-Baum einer Seite geladen ist. Suchmaschinen wie Google lassen Load-Events beim Crawlen zu, sodass in der Regel der Seiteninhalt erst nach Ausführen der Load-Events indiziert wird.

User-Events werden jedoch nicht geladen. Das heißt, alle Veränderungen, die zum Beispiel über Click- oder Touch-Events ausgelöst werden, bleiben beim Indizieren unberücksichtigt.

Push-States und URLs

Damit Google eine Seite indizieren kann, muss diese immer zwingend über eine URL erreichbar sein. Daher können Click-Events auch nicht berücksichtigt werden, da diese immer einen vom Benutzer individuell herbeigeführten Inhalt darstellen.

Dank der Push-State-API von JavaScript ist es mittlerweile ja möglich, die URL einer Seite zu beeinflussen. So kannst du die komplette Navigation einer Seite per JavaScript realisieren, indem du per „pushState()“ die im Browser dargestellte URL änderst und gleichzeitig per JavaScript Inhalte lädst und ersetzt.

Da Google URLs, die ausschließlich per Push-State-API realisiert werden, nicht indizieren kann, muss jede per „pushState()“ erstellte URL immer auch eine „real existierende“ URL besitzen.

Dies ist übrigens nicht nur für Suchmaschinen interessant, sondern auch für soziale Netzwerke. Denn du kannst nur solche Seiten dort teilen, die über eine „echte“ URL verfügen. Denn auch Facebook und Twitter müssen Inhalte aus einer Seite extrahieren, was nur funktioniert, wenn die URL vorhanden ist.

Wichtig ist, dass du per „pushState()“ immer korrekte URLs erzeugt, die immer auch per JavaScript den richtigen Inhalt besitzen. Eine falsche Push-State-URL, die keine neuen Inhalte lädt, führt möglicherweise dazu, dass es du doppeltem Content kommt. Und das wiederum mögen Suchmaschinen ja auch nicht.

JavaScript nicht ausschließen
Es ist zwar selbstverständlich, sei aber dennoch erwähnt. Du musst natürlich dafür sorgen, dass JavaScript-Dateien für Suchmaschinen nicht ausgeschlossen sind. Werden über die „robots.txt“ JavaScript-Dateien grundsätzlich verboten, haben Suchmaschinen keine Möglichkeit, auf diese zuzugreifen.

Da JavaScript selbst ja keinerlei indizierbare Inhalte besitzt, wird es für Suchmaschinen gerne mal versteckt.

Progressive Enhancement

Trotz aller Möglichkeiten, die Google und andere Suchmaschinen dir geben, um per JavaScript erstellte Inhalte zu crawlen, ist die sicherste Methode immer noch das sogenannte „Progressive Enhancement“.

Dieses Prinzip verfolgt den Ansatz, dass Inhalte so aufzubereiten sind, dass sie immer unabhängig von Browser beziehungsweise Crawler verfügbar sind.

Konkret bedeutet dies, dass Texte, Bilder und andere Inhalte, die von einer Suchmaschine gefunden und durchsucht werden sollen, nach Möglichkeit ohne JavaScript auskommen sollen.

Dies bedeutet allerdings für den Webentwickler immer ein oft erheblichen Mehraufwand. Denn jede Seite muss im Grunde auch ohne JavaScript alle Inhalte bereitstellen. Je nach Art und Aufbereitung der Inhalte kommen möglicherweise auch Kompromisse in Frage, bei denen nur wichtige Inhalte auch ohne JavaScript bereitgestellt werden.

Hier musst du abwägen, welcher Aufwand für dein Projekt vertretbar ist.

Korrekte Semantik

Ob mit oder ohne JavaScript: In jedem Fall ist es wichtig, dass deine Inhalte semantisch korrekt ausgezeichnet sind. Auch Überschriften, die per JavaScript geladen werden, müssen mit den entsprechenden HTML-Elementen ausgezeichnet werden.

Denn hier gelten dieselben Regeln wie für normale Inhalte. Letztendlich ist für Google entscheidend, wie der HTML-Quelltext nach dem Ausführen von JavaScript aussieht. Da ist die Wahl der richtigen Elemente entscheidend.

Crawler-Ansicht testen

Entscheidest du dich dazu, Inhalte ausschließlich per JavaScript zu laden (also nicht nach dem „Progressive Enhancement“-Prinzip), solltest du testen, ob Suchmaschinen deine Inhalte tatsächlich korrekt und vollständig sehen und crawlen können.

So hilft dir zum Beispiel die „Search Console“ von Google. Unter „Crawling“ findest du die Funktion „Abruf wie durch Google“. Hier kannst du dir deine Website für Desktop- oder Mobilgeräte so darstellen lassen, wie Google sie tatsächlich crawlt.

Es gibt aber auch andere, meist kostenpflichtige Tools wie SEO.JS und prerender.io, die sich darauf spezialisiert haben, Websites dahingegend zu prüfen, ob JavaScript-Inhalt beim Crawlen korrekt und vollständig dargestellt werden. Bei komplexen Projekten mag das eine sinnvolle Ergänzung sein.

Kategorien
Design Webdesign

Besser platzieren und transformieren dank verschachtelter SVGs

Das Erstellen von SVG-Grafiken ist eine recht unkomplizierte Sache. Wer HTML beherrscht, findet sich auch schnell in der SVG-Syntax zurecht. Allerdings gibt es einige kleine, aber durchaus relevante Unterschiede zwischen HTML und SVG, was die Positionierung von SVG-Formen betrifft. Denn diese werden grundsätzlich absolut innerhalb einer SVG-Zeichenfläche platziert.

So werden Formen in SVG-Grafiken platziert

Was die Positionierung von SVG-Elementen wie „<rect>“ oder „<circle>“ betrifft, gibt es schon bezüglich der Syntax einen großen Unterschied zu HTML. Denn während HTML-Elemente per CSS-Eigenschaften „left“ und „top“ platziert werden, lassen sich SVG-Elemente nur per „x“- und „y“-Attribute (bei Kreisen sind es die „cx“- und „cy“-Attribute) platzieren.

Während Farben und Konturen wie bei HTML per CSS gestaltet werden können, ist eine Positionierung per CSS im SVG-Format gar nicht möglich.

Der zweite Unterschied ist der, dass SVG-Formen grundsätzlich absolut innerhalb eines „<svg>“-Elementes platziert werden. Auch wenn es mit dem „<g>“-Element eine Möglichkeit gibt, Elemente zu gruppieren, so lässt sich dem „<g>“-Element selbst keine Position zuweisen.

Gerade bei komplexen Grafiken stellt dies schon mal ein Problem dar. Denn will man die Position einer Figur ändern, die möglicherweise aus dutzenden Einzelementen besteht, müssen die „x“- und „y“-Attribute sowie die anderen positionsbestimmenden Attribute wie „cx“, „cy“ und „d“ beim „<path>“-Element verändert werden.

Bei statischen Grafiken ist das Problem noch relativ einfach lösbar, indem man die Grafik in einem Zeichenprogramm wie Illustrator öffnet. Dort kannst du dann alles anpassen und wieder als SVG-Datei speichern.

Bei dynamischen Veränderungen, die zum Beispiel per JavaScript oder PHP berechnet werden, muss jedes einzelne neu zu platzierende Element einer Figur verändert werden. Und gerade beim „<path>“-Element mit seinem komplexen „d“-Attribut ist das durchaus eine Herausforderung.

SVGs verschachteln und doch relativ platzieren

Es gibt aber einen Weg, wie man SVG-Formen doch relativ innerhalb einer SVG-Grafik platzieren kann. So erlaubt das SVG-Format nämlich das Verschachteln von SVG-Grafiken.

Innerhalb eines „<svg>“-Elementes darf nämlich ein weiteres „<svg>“-Element liegen. Zwar können die verschachtelten „<svg>“-Elemente selbst auch nur absolut platziert werden. Aber innerhalb einer Verschachtelung ist die absolute Platzierung auf das jeweilige Eltern-„<svg>“-Element begrenzt.

<svg width="750" height="500" style="background: gray">
  <svg x="200" y="200">
    <circle cx="50" cy="50" r="50" style="fill: red" />
  </svg>
  <circle cx="50" cy="50" r="50" style="fill: yellow" />
</svg>

Im Beispiel wird innerhalb und außerhalb einer verschachtelten SVG-Grafik ein Kreis gezeichnet. Die Kreise sind so platziert, dass sie jeweils an der linken oberen Ecke stehen. Da das verschachtelte „<svg>“-Element 200 Pixel vom linken und oberen Rand entfernt ist, wird der rote Kreis auch entsprechend 200 Pixel von beiden Rändern entfernt platziert.

Änderst du die „x“- und „y“-Attribute des zweiten „<svg>“-Elementes, wird auch die Platzierung aller darin enthaltenden Formen verändert.

Anders als das „<g>“-Element zum Gruppieren hast du mit verschachtelten „<svg>“-Elementen also die Möglichkeit, die Position mehrerer Formen gleichzeitig zu verändern.

Elemente transformieren

Die CSS-Eigenschaft „transform“ skaliert und dreht nicht nur HTML-Elemente, sondern auch SVG-Formen. Allerdings wird „transform“ im SVG-Kontext anders interpretiert als bei HTML.

Vor allem beim Drehen, also der „rotate()“-Funktion, macht sich das bemerkbar. Denn von HTML kennt man es, dass „rotate()“ dafür sorgt, dass Elemente sich um den eigenen Mittelpunkt drehen.

Im SVG-Format werden Elemente jedoch immer um die linke, obere Ecke der SVG-Zeichenfläche gedreht. Das macht es natürlich schwierig, Drehungen zu realisieren. Will man beispielsweise einen Text hochkant stellen, reicht es nicht, diesen um 90 Grad zu drehen. Auch die „x“- und „y“-Attribute müssen angepasst werden.

Denn ein Element, welches 200 Pixel von links und oben platziert und um 90 Grad gegen den Uhrzeigersinn gedreht wird, verschwindet gegebenenfalls nach oben aus der Zeichenfläche.

Allerdings kannst du dir auch hier verschachtelte SVG-Elemente zur Hilfe nehmen. Zwar erreichst du es nicht, dass Elemente sich um den eigenen Mittelpunkt drehen. Aber wenn du die zu drehenden Elemente links oben des verschachtelten „<svg>“-Elementes platzierst, ist die Anpassung der Position relativ einfach.

<svg width="750" height="500" style="background: gray">
  <svg x="100" y="100">
    <rect x="0" y="0" width="142" height="142" style="fill: yellow" />
    <rect x="50" y="-50" width="100" height="100" style="fill: black; transform: rotate(45deg)" />
  </svg>
</svg>

Im Beispiel werden innerhalb eines verschachtelten „<svg>“-Elementes zwei Rechtecke platziert. Während das erste ohne „transform“-Eigenschaft auskommt, wird das zweite Element dank dieser Eigenschaft und der „rotate()“-Funktion um 45 Grad gedreht.

Damit das zweite Rechteck dennoch mit der linken und oberen Position des ersten Rechtecks beginnt, müssen die „x“- und „y“-Attribute geändert werden. Ohne die Anpassung würde das zweite Rechteck um die linke obere Ecke des verschachtelten „<svg>“-Elementes nach links gedreht und zur Hälfte aus der Zeichenfläche herausragen.

Erschwerend kommt hinzu, dass die Positionierung abhängig ist von der Rotation. Denn das Koordinatensystem der gedrehten Form wird ebenfalls gedreht. Der Wert für „x“ basiert also nicht mehr auf der Horizontalen, sondern auf einer um 45 Grad gedrehten Achse.

Weiterer Vorteil verschachtelter SVGs

Es gibt noch einen weiteren Vorteil – oder zumindest etwas, was man beachten sollte. Über ein „<svg>“-Element lassen sich per CSS auch Farbe und Kontur zuweisen. Ist den Formen innerhalb dieser Zeichenfläche selbst keine Farbe oder Kontur zugewiesen, übernehmen sie alle das Aussehen des SVG-Elternelementes.

<svg width="750" height="500" style="background: gray">
  <svg x="100" y="100" style="fill: yellow; stroke: red">
    <rect x="0" y="0" width="142" height="142" />
    <rect x="100" y="-50" width="100" height="100" style="transform: rotate(45deg)" />
 </svg>
</svg>

So ist es also auch unkompliziert möglich, allen Elementen eines SVG-Zeichenfläche ein einheitliches Aussehen zu verpassen.

Kategorien
JavaScript & jQuery Programmierung Webdesign

Framework jQuery: die Vorteile und Nachteile

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

jQuery und Co. und der große Ballast

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

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

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

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

Doppelt gemoppelt: Was jQuery kann, kann JavaScript oft auch

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

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

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

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

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

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

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

Performance vs. Einfachheit

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

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

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

Vorteil: einheitliche Browser-Kompatibilität

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

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

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

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

Frameworks fürs Spezielle

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

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

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

Fazit

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

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

Kategorien
Webdesign

Präsentieren: Klassisch vor Ort beim Kunden oder per Web?

Früher war klar: Präsentationen finden vor Ort beim Kunden oder in den eigenen Büroräumen statt. Während meines Studiums habe ich noch gelernt, wie man ausgedruckte Entwürfe hochwertig auf Pappen klebt, um sie während der Präsentation zeigen zu können. Selbst Weblayouts wurden ausgedruckt und auf diese Weise präsentiert. Die Art und Weise, wie man heutzutage präsentiert beziehungsweise präsentieren kann, hat sich geändert. Mittlerweile kann eine Präsentation dank des Internets auch räumlich und zeitlich getrennt vom Kunden stattfinden.

Präsentation vor Ort: Aufwändig und zeitintensiv

Ein Weblayout auf einer klassischen Präsentationspappe vorzustellen, wird heute kaum einer mehr machen. Ein Beamer und eine Leinwand müssen schon her, um eine Website vor Kunden – oft sind es ja mehr als nur eine Person –, vorzustellen.

Eine solche Präsentation ist natürlich mit einem gewissen Aufwand verbunden. Es muss ein Termin gefunden werden, an dem alle Teilnehmer können. Technik muss vorbereitet werden und letztendlich nimmt die Präsentation selbst ja auch Zeit in Anspruch.

Da ist es natürlich verlockend, eine Präsentation einfach als PDF-Datei oder mittels Link zum Website-Prototypen per E-Mail zu verschicken. So kann der Kunde in aller Ruhe den Entwurf anschauen und sich etwaige Kommentare beziehungsweise Erläuterungen zum Entwurf durchlesen.

Vor allem jene, die sich nicht als große Redner und Überzeuger sehen, mögen diese Form der Präsentation bevorzugen. Und das nicht nur, weil es zeitsparend ist und möglicherweise weniger Aufwand bedeutet. Man umgeht damit auch die vermeintliche Gefahr, eine schlechte „Perfomance“ abzugeben.

Den direkten Kontakt nicht unterschätzen

Doch eine Präsentation per Internet – sei es eine E-Mail mit PDF-Anhang oder einfach mit einem Link – birgt große Risiken. Während man als Gestalter oder Entwickler auf die Rückmeldung des Kunden wartet, hat man keinerlei Einfluss darauf, wie der Entwurf aufgenommen wird.

Auf Kritik und offene Fragen kann nicht direkt reagiert werden. Häufig wird ein Entwurf an Kollegen weitergegeben mit der Bitte, seine Eindrücke dazu zu schildern. Nicht selten werden sogar Familienmitglieder und Freunde „beauftragt“, sich den Entwurf anzuschauen. Am Ende haben sich möglicherweise ein Dutzend Personen Gedanken zu einem Entwurf gemacht. In vielen Fällen fällt das Fazit dann eher negativ aus.

Denn während Designer und Entwickler im Sinne von Usabilty, der Zielgruppe und anderen objektiven Gesichtspunkten gestalten, entscheiden Kunden – und alle anderen, die den Entwurf gesehen haben – nach persönlichen „gefällt mir“ oder „gefällt mir nicht“-Kriterien.

Präsentierst du hingegen vor Ort, kannst du direkt auf Kritik und Fragen eingehen. Unklarheiten werden schnell aus dem Weg geräumt oder entstehen erst gar nicht. Auch auf Änderungsvorschläge kannst du direkt reagieren.

Gerade Änderungs- und Verbesserungsvorschläge seitens des Kunden sind häufig von heikler Natur. Nicht jeder Vorschlag ist im Sinne des Kunden. Während des direkten Gesprächs lässt sich ein solcher Vorschlag einfacher ablehnen und entsprechend begründen.

Auch Präsentationsmuffel sollten vor Ort präsentieren

Auch wenn es einfach erscheint auf eine Vor-Ort-Präsentation zu verzichten, sollten auch Präsentationsmuffel hier in den scheinbar sauren Apfel beißen. Denn auch mit den besten Ideen muss man oftmals erst Leute überzeugen. Und dies geht am Besten persönlich und direkt. Dazu musst du kein rhetorischer Profi sein. Wer von seiner Arbeit überzeugt ist, wird das auch beim Kunden zeigen können.

Karten mit Stichpunkten oder eine kleine Powerpoint-Präsentation helfen dabei, während eines Vortrags den roten Faden nicht zu verlieren.

Wann eine Präsentation per E-Mail sinnvoll ist

Auch wenn eine Präsentation vor Ort in vielen Fällen mehr als sinnvoll und wichtig ist, so gibt es natürlich auch immer zahlreiche Anlässe, wo nichts gegen eine Präsentation per E-Mail spricht. Ist die Gestaltung und Umsetzung bereits ausgiebig besprochen oder sogar festgelegt, ist die Gefahr gering, dass es grundsätzliche Kritik gibt, auf die man reagieren müsste.

Hier spricht nichts dagegen, Zwischenstände oder auch ein fertiges Projekt mehr oder weniger unkommentiert, an den Kunden zu schicken. Auch bei kleinen Projekten, bei denen der Aufwand einer Vor-Ort-Präsentation nicht in einem angemessenen Verhältnis zum Budget steht, spricht nicht grundsätzlich etwas dagegen.

In jedem Fall sollte man bei einer E-Mail-Präsentation nachhaken, ob es Fragen oder Unklarheiten gibt, um schnell darauf reagieren zu können.

Kombination aus Präsentation vor Ort und per Internet

Gerade bei großen Projekten ist es häufig mit einer Präsentation nicht getan. Zwischen der Vorstellung von Layout und Konzept und der abschließenden Präsentation des fertigen Projektes ist es sinnvoll, auch Zwischenschritte vorzustellen und sich die Freigabe einzuholen.

Hier ist es nicht erforderlich, jedes Mal eine Präsentation vor Ort zu veranstalten. Für die Klärung vieler Einzelheiten, die gerade bei großen Projekten anstehen, bietet es sich an, auf Tools zurückzugreifen, die dir den Workflow bei solchen Projekten erleichtern.

Webanwendungen wie „Live Capture“ von InVision und Diigo ermöglichen es dir, Entwürfe hochzuladen und Feedback einzuholen. Dabei ist es möglich, innerhalb der Entwürfe zu zeichnen und Kommentare direkt im Entwurf abzusetzen.

Selbst in größeren Teams lassen sich Detailfragen klären und etwaige Design- und Konzeptfehler ausfindig machen. Und das geht dank dieser Tools sehr viel schneller und unkomplizierter , als wenn du per E-Mail oder Telefon versuchst, all diese Aspekte zu klären.

Fazit

Grundsätzlich gilt, dass eine persönlichen Präsentation nur in wenigen Ausnahmefällen eine Präsentation per E-Mail ersetzen kann. Vielmehr sollten digitale Formen der Präsentation beziehungsweise der Zusammenarbeit ergänzend hinzugezogen werden, um ein Projekt zu seinem erfolgreichen Ende zu führen.

Kategorien
Design Responsive Design Webdesign

Responsive Websites erstellen mit Simbla

Die Anforderungen an eine zeitgemäße Website sind in den letzten Jahren stark angestiegen. Da Websites zunehmend mit Smartphone und Tablet aufgerufen werden, ist ein reponsives Webdesign auf der Basis von HTML5 und CSS3 mittlerweile zu einer Minimalanforderung für jede Website geworden, die sich auch nur halbwegs als zeitgemäß bezeichnen möchte. Daher gehört auch beim Website-Bilder Simbla die Erstellung responsiver Weblayouts einfach dazu.

simbla

Einfacher Start mit Template oder Wizard

Es heißt, aller Anfang sei schwer. Beim Simbla-Website-Builder ist dies definitiv nicht der Fall. Willst du eine neue Website erstellen, entscheidest du dich zunächst, ob du mit einem Template oder per Wizard anfangen möchtest. Bei den Templates stehen dir über 75 verschiedene Vorlagen zur Verfügung. Da ist für alle Branchen und Hobbys etwas dabei. So gibt es Templates für klassische Unternehmen sowie für Kreative, für gastronomische Angebote sowie für Immobilienmakler und Tierliebhaber.

Das Besondere: Alle Templates lassen sich anschließend individualisieren. Farben und Schriften passt du ebenso an wie das eigene Logo, welches du hochlädst und einbindest. Außerdem sind die Templates responsiv und setzen auf HTML5 und CSS3. Für dich bedeutet dies, dass du dir keinerlei Gedanken darüber machen musst, ob und wie deine Website auf verschiedenen Geräten aussieht.

Der Wizard: Schnell zur eigenen responsiven Website
Der Wizard: Schnell zur eigenen responsiven Website

Auch bei der Verwendung des Wizards wird stets sichergestellt, dass deine Website responsiv ist. Beim Wizard wählst du keine Vorlage für die Gestaltung. Stattdessen wählst du verschiedene Optionen, aus denen anschließend das Grundgerüst für deine Website gebaut wird. So entscheidest du dich beispielsweise, ob du eine klassische Website mit mehreren Seiten oder einen One-Pager anlegen möchtest.

Am Ende hast du eine leere Website mit entsprechenden Vorgaben und füllst diese mit Inhalt.

Responsiv vom Layout bis zum Inhalt

Hast du das Layout für deine Website festgelegt, muss diese natürlich noch mit Inhalt gefüllt werden. Dazu bietet dir Simbla zahlreiche Widgets an, mit denen du unterschiedliche Inhalte auf den Seiten deiner Website platzierst.

Unter anderem stehen dir verschiedene „Content“-Blöcke zur Verfügung, mit denen du Texte und Bilder hinzufügst. Darüber hinaus gibt es „Multimedia“-Blöcke, die es dir erlauben, Fotogalerien oder Videos in deine Website einzubinden.

Bild-Text-Komposition per Widget einfügen
Bild-Text-Komposition per Widget einfügen

Natürlich sorgt Simbla bei allen Inhalten dafür, dass auch diese responsiv dargestellt werden. So werden Text-Bild-Kompositionen, die in der Desktopansicht nebeneinander angeordnet sind, bei Smartphones automatisch untereinander platziert. Bilder werden jeweils so verkleinert, dass sie maximal die Breite des Displays einnehmen – also nie aus dem sichtbaren Bereich hinausragen.

Wie du eine responsive Website mit Simbla erstellst, ist also keine Frage, mit der du dich an den Webentwickler deines Vertrauens wenden musst. Ganz ohne Kenntnisse in HTML5 und CSS3 legst du hier los und kannst dir sicher sein, dass das Ergebnis auf allen Geräten gut aussieht.

Mobilvorschau deiner Website
Mobilvorschau deiner Website

Im Übrigens gibt es eine Preview-Ansicht, in der du deine Website sowohl für Desktop- als auch für Mobilgeräte darstellen kannst. So wechselst du spielend zwischen einzelnen Geräteansichten und siehst immer genau, wie deine Website auf den unterschiedlichen Geräten aussieht.

Interaktionen mit Online-Datenbank

Eine weitere Besonderheit von Simbla ist die Möglichkeit, eine Online-Datenbank anzulegen und Inhalte daraus auf deiner Website darzustellen. Auch hierbei setzt der Website-Builder keinerlei Kenntnisse in Datenbanken voraus.

Hast du eine Datenbank angelegt, erstellst du eine Tabelle und legst Spalten für einzelne Werte an. Anschließend kannst du beliebig Datensätze erstellen. Das kann ein Produktkatalog oder eine Linkliste sein. Neben einfachen Texten und Zahlen hinterlegst du in deinen Tabellen auch Bilder, HTML-Quelltext und GPS-Koordinaten.

Schnell und einfach eine Online-Datenbank anlegen
Schnell und einfach eine Online-Datenbank anlegen

Über eine spezielle, automatisch angelegte Tabelle, legst du Benutzer an, die sich anschließend über ein Login-Formular in einem geschützten Bereich deiner Website anmelden können. Somit kannst du beispielsweise deinen Kunden ein spezielles Informations- und Serviceangebot anbieten, welches anderen Besuchern deiner Website vorenthalten bleibt.

Wer bereits große Datenmengen hat und diese in die Datenbank von Simbla überführen möchte, nutzt einfach die Importfunktion. Diese erlaubt es dir, Daten als CSV-Datei zu importieren. Im Übrigen ist ein Export deiner Tabellen in eine CSV-Datei möglich.

Um Inhalte der Datenbank auf deiner Website zu nutzen, stehen dir im Website-Builder zahlreiche spezielle Datenbank-Widgets zur Verfügung. So gibt es unter anderem Login-, Logout- und Registrierungsformulare, mit denen sich Benutzer für deine Website registrieren und sich anschließend an- und abmelden können.

Datenbank-Widgets
Datenbank-Widgets

Das „Form to Database“-Widget gibt dir zudem die Möglichkeit, auf deiner Website ein Formular einzubinden, dessen Inhalte in eine deiner Datenbank-Tabellen geschrieben werden.

Natürlich kannst du den Inhalt einer Datenbank einfach als Tabelle auf deiner Website veröffentlichen. Dazu steht dir das Widget „Data Table“ zur Verfügung. Hierbei wählst du aus, welche Spalten auf deiner Website dargestellt werden sollen. Hast du Bilder in deiner Tabelle hinterlegt, bietet sich zudem das Widget „Data Gallery“ an. Mit diesem kannst du spielend einfach eine Bildergalerie mit den Bildern erstellen, die sich in einer deiner Datenbank-Tabellen befinden.

Daten einfach per Diagramm visualisieren
Daten einfach per Diagramm visualisieren

Dank des „Chart“-Widgets ist es dir sogar möglich, Diagramme zu erstellen, welche die Werte deiner Tabelle darstellen. Gerade bei Tabellen mit numerischen Werten kannst du diese sehr schön als Torten-, Balken- oder Kurvendiagramm darstellen. Auch hierbei ist die Konfiguration sehr einfach. Über ein Formular wählst du jene Spalten aus, die beispielsweise für die X- und Y-Achse eines Diagramms berücksichtigt werden sollen.

Zu guter Letzt gibt es noch das „Counter“-Widget, welches dir die Anzahl der Tabellenzeilen oder die Summe von Werten einer Spalte jeweils hochzählt.

Schnell Dashboards mit Diagrammen erstellen

Die verschiedenen Diagramm-Widgets geben dir eine schnelle Möglichkeit, Dashboards mit zahlreichen statistischen Daten zu erstellen. So kannst du fix einen Überblick über registrierte und aktive Benutzer deiner Website erstellen oder andere beliebige Werte aus deiner Datenbank visuell aufbereitet ausgeben.

Beispielhaftes Dashboard mit verschiedenen Zählern und Diagrammen
Beispielhaftes Dashboard mit verschiedenen Zählern und Diagrammen

Weder Kenntnisse in Datenbanken, noch in Programmierung oder HTML- beziehungsweise CSS-Auszeichnung sind notwendig. Und auch bei den Diagrammen wird natürlich sichergestellt, dass diese responsiv sind und auf allen Geräten und Auflösungen ansprechend und übersichtlich dargestellt werden.

Fazit

Die verschiedenen Tarife
Die verschiedenen Tarife

Simbla ist nicht nur für kleine Websites interessant, sondern ebenfalls für umfangreiche Internetpräsenzen, die auf komplexe Datenbanken und zeitgemäße Gestaltung und Technik setzen. Dabei ist alles intuitiv zu bedienen. Neben mehreren kostenpflichtigen Tarifen gibt es für den Einsieg einen kostenlosen Tarif, mit dem du all die vorgestellten Möglichkeiten bereits produktiv einsetzen kannst.

Kategorien
Fotografie Inspiration Showcases

Design Seeds: Tägliche Inspiration aus Fotos und Farben

Kreativität kommt selten aus dem Nichts. Und Inspiration ist ein wichtiger Aspekt für alle Grafik- und Webdesigner. Die tägliche Dosis Inspiration in Form von Fotos und Farben bekommst du bei Design Seeds. Dort wirst du Tag für Tag mit anspruchsvollen Fotos und einer passenden Farbpalette versorgt.

Inspiration aus Natur und Umgebung

Ins Leben gerufen wurde Design Seeds im Jahr 2009 von Jessica Colaluca, die sich zu diesem Zeitpunkt als Gestalterin selbstständig gemacht hatte. Aus ihrer Leidenschaft für Farbe, Blumen und Landschaft machte sie kurzerhand ein Blog. Die Naturverbundenheit und ihr gestalterischer Beruf spiegeln sich selbstredend auch im Namen Design Seeds wieder.

Rosa Rosen und eine Palette mit sechs Pastelltönen
Rosa Rosen und eine Palette mit sechs Pastelltönen

In der Regel veröffentlicht sie zweimal am Tag ein Foto, bei dem vor allem die Farben eine wichtige Rolle spielen. Mal sind es farbintensive Blumen, mal eine eindrucksvolle Landschaft oder etwas ganz Gewöhnliches und Alltägliches. Immer sind es in erster Linie die Farben, welche die Fotos so besonders machen.

Ein Foto, mehrere Farben, eine Palette

Das Zusammenstellen von Farben für ein Projekt fällt nicht jedem leicht. Welche Farben harmonieren besonders, welche ergänzen sich prima? Diese Fragen muss sich jeder Gestalter immer neu beantworten. Design Seeds beantwortet sie mit den Fotos, zu denen es immer eine Farbpalette mit sechs Farben gibt. Sie sind jeweils dem Foto entnommen und spiegeln die dominierenden Farben des jeweiligen Fotos wider.

So ergibt ein Strauß rosa Rosen eine Palette mit sechs Pastellfarben. Eine Winterlandschaft in den Bergen führt hingegen zu einer Palette mit kühlen Blau- und Grautönen.

Sechs kühle blau-graue Farben passend zur Winterlandschaft
Sechs kühle blau-graue Farben passend zur Winterlandschaft

Zu allen sechs Farben der Palette werden dir zudem die Farbwerte als Hexadezimalzahl angegeben. So kannst du diese bequem kopieren und für eigene Gestaltungszwecke verwenden.

Nach Farben und Kollektionen suchen

Wer jenseits der täglich neuen Fotos für ein bestimmtes Projekt nach interessanten Farbkombinationen sucht, kann Design Seeds ganz gezielt durchstöbern. So lassen sich Fotos nach Farben durchsuchen. Dazu wählst du einfach eine Farbe aus und Design Seeds zeigt dir alle Fotos, in denen diese Farbe vorkommt.

Suche nach Farben
Suche nach Farben

Das ist zum Beispiel dann sehr hilfreich, wenn du bereits auf eine Farbe – vorgegeben durch ein Logo – festgelegt bist. Schnell findest du verschiedene harmonische Farbpaletten, die für deinen Zweck in Frage kommen.

Alternativ kannst du Fotos nach Kollektionen darstellen lassen. So zeigt Design Seeds dir beispielsweise Fotos zu den einzelnen Jahreszeiten, zur Natur oder alltäglichen Wohnsituationen an.

… oder Suche nach Kollektionen
… oder Suche nach Kollektionen

Auf Instagram folgen

Um kein Foto zu verpassen, solltest du zum Instagrammer werden, denn Jessica Colaluca veröffentlicht ihre Fotos auch auf ihrem Instagram-Profil. So entgeht dir nichts und du erhältst deine tägliche Saat an Inspiration automatisch. Wem Twitter lieber ist, kann ihr auch dort folgen.

Design Seeds ist ein kleines, aber sehr sehenswertes Blog, das dir jeden Tag aufs Neue zeigt, welch unterschiedliche Farben es gibt und wie du sie stimmungsvoll einsetzen und ungewöhnlich kombinieren kannst.

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
Design E-Commerce Webdesign

Schnelles Multi-Channel-Marketing mit dem „Journey Designer“ von WebEngage

Zeitgemäßes Marketing beruht unter anderem darauf, schnell und gezielt auf Nutzer reagieren zu können. WebEngage bietet hierbei zahlreiche Instrumente an, um Nutzer auf verschiedenen Kanälen – unter anderem per E-Mail, Web- sowie In-App-Messages, Push-Nachrichten und SMS – auf Angebote aufmerksam zu machen und sie zu Interaktionen zu ermutigen. Dank des neuen „Journey Designers“ entwickelst du komplexe Strategien für dein Online-Marketing ganz bequem über eine grafische Oberfläche.

Per Drag-and-Drop zur perfekten Marketingstrategie

Dank WebEngage bietest du Nutzern deiner Website eine direkte Kommunikation zu dir an. Das funktioniert über ein einfaches Feedback-Formular, aber auch dank zahlreicher Online-Marketing-Instrumente. So legst du bestimmte Kriterien fest, mit denen du das Verhalten deiner Nutzer nachvollziehen kannst. Du hältst zum Beispiel nach, wer von den Besuchern deines Shops ein Produkt in den Warenkorb gelegt, aber nicht gekauft hat.

Per Drag-and-Drop eine „Journey“ erstellen
Per Drag-and-Drop eine „Journey“ erstellen

Mit den Tools von WebEngage kannst du diese Nutzer über eine Web-Message auf deiner Website oder Push-Nachricht auf dem Smartphone zum Kauf dieses Produktes überzeugen. Und mit dem neuen „Journey Designer“ von WebEngage ist es nun wesentlich einfacher, anhand definierter Kriterien eine Marketingstrategie zu entwickeln. Denn mit dem „Journey Designer“ ziehst du dir sogenannte „Trigger“ – also Kriterien, auf die reagiert werden soll –, und Aktionen ganz einfach per Drag-and-Drop auf eine Arbeitsfläche.

Auf Ereignisse oder Segmente reagieren

Ein „Trigger“ – also Auslöser für eine Aktion – kann zum Beispiel ein Ereignis sein. So ein Ereignis lässt sich beispielsweise mit der WebEngage-API auf deiner Website definieren. Eine mögliche Aktion ist – wie schon erwähnt – das Hinzufügen eines Produktes in einen Warenkorb. Es gibt aber auch zahlreiche andere Ereignisse. Per JavaScript hast du Zugriff auf die WebEngage-API und definierst beliebige „Events“, auf die später reagiert werden kann.

Da WebEngage für alle Benutzer Profile anlegt, kannst du sehr schön nachvollziehen, wann ein Benutzer das letzte Mal deine Website besucht und was der dort gemacht hat. Statt auf ein bestimmtes Ereignis zu reagieren, ist es daher auch möglich, auf sogenannte Segmente zu reagieren.

Segmente: Benutzer anhand verschiedener Faktoren filtern
Segmente: Benutzer anhand verschiedener Faktoren filtern

Mit einem Segment definierst du eine bestimmte Zielgruppe – zum Beispiel Benutzer aus einem Land oder neue beziehungsweise wiederkehrende Benutzer. Statt ein Segment anzulegen, kannst du auch einzelne Benutzer ansprechen. Es gibt also zahlreiche Möglichkeiten, einen „Trigger“ als Auslöser für eine Aktion festzulegen.

Aktionen definieren und auf Benutzerverhalten eingehen

Hast du einen „Trigger“ auf deiner Arbeitsfläche platziert, ziehst du als Nächstes eine Aktion, die ausgeführt werden soll, auf die Arbeitsfläche. Anschließend verbindest du deinen „Trigger“ mit einer Aktion. Dies geschieht, indem du Linien vom „Trigger“ zu einer Aktion ziehst.

Web-Messages aus einer Vielzahl an Vorlagen erstellen

Die Aktionen sind die eigentlichen Maßnahmen, die du im Rahmen einer Marketingstrategie ausführen kannst. Dazu zählen zum Beispiel Web-Messages. Das sind unter anderem Banner, die auf deiner Website angezeigt werden oder „Sticky Header“ und „Sticky Footer“, also eigenständig gestaltete Bereiche, die sich am Kopf oder Fuß der Seite andocken.

Auch In-App-Messages für Android- und iOS-Geräte sind möglich
Auch In-App-Messages für Android- und iOS-Geräte sind möglich

WebEngage stellt dir eine Vielzahl solcher Web-Messages zur Verfügung. Gestaltung, Inhalt und Ziel-URLs legst du individuell fest. Mit dem Ausführen einer Aktion ist eine Marketing-Reise aber noch nicht zwingend am Ende. So lässt sich für jede Aktion wiederum eine Anschlussaktion definieren – abhängig davon, wie ein Nutzer auf die vorherige Aktion reagiert hat.

So reagierst du unterschiedlich darauf, ob eine Web-Message angesehen, nicht gesehen, geöffnet oder geschlossen wurde. Je nach Reaktion schließt du also unterschiedliche weitere Aktionen an und kannst beispielsweise eine E-Mail verschicken oder eine Push-Nachricht schicken.

Dabei kombinierst du Aktionen fürs Web – also auf deiner Website – mit solchen fürs Smartphone – innerhalb einer App. Zusätzlich kommunizierst du auch per E-Mail oder SMS mit den Nutzern.

Bedingungen und „Flow Control“ für komplexe Strategien

Um noch gezielter auf Reaktionen eingehen zu können, stehen die im „Journey Designer“ verschiedene Bedingungen zur Verfügung. Je nach dem, ob eine Bedingung erfüllt wurde oder nicht, definierst du zwei unterschiedliche Wege, die ausgeführt werden.

Bedingungen machen es möglich, auf unterschiedliches Verhalten zu reagieren
Bedingungen machen es möglich, auf unterschiedliches Verhalten zu reagieren

So gibt es eine Bedingung, mit der du prüfst, ob ein Nutzer ein Ereignis ausgelöst hat oder nicht. Im „Journey Designer“ legst du für beide Fälle ganz eigene und unterschiedliche Aktionsketten an.

Dabei ist es natürlich auch möglich, sehr komplexe Ketten zu definieren. Dabei ist es auch machbar, auf unterschiedlichen Wegen zu einer Aktion zu gelangen. Eine Aktion kann also durchaus auch mehrere Verbindungen von „Triggern“, Bedingungen und anderen Aktionen besitzen.

Per „Flow Control“ Zeit abwarten, bis die nächste Aktion ausgeführt wird
Per „Flow Control“ Zeit abwarten, bis die nächste Aktion ausgeführt wird

Zu guter letzt gibt es noch die sogenannten „Flow Controls“. Diese ermöglichen dir, das Fortführen einer Handlungskette vom Eintreffen bestimmter Faktoren abhängig zu machen. So machst du das Ausführen einer Aktion zum Beispiel davon abhängig, wie viel Zeit seit der letzten Aktion vergangen ist. Das können Stunden, Tage oder auch Jahre sein.

Genau so gut kannst du eine Aktion vom Auslösen eines Ereignisses innerhalb einer festgelegten Zeit abhängig machen.

Auswertung und Statistik

Hast du deine „Journey“ soweit fertig eingerichtet, musst du sie nur noch veröffentlichen. Ab diesem Zeitpunkt ist es nicht mehr möglich, Veränderungen daran vorzunehmen. Dazu musst du deine „Journey“ erst stoppen.

Während der Veröffentlichung wird dir im „Journey Designer“ angezeigt, wie häufig „Trigger“ bei einem Besucher deiner Website zutreffen und wie häufig welche Aktionen ausgeführt werden. So erhälst du eine sehr übersichtliche und aktuelle Statistik, wie sich deine „Journey“ entwickelt.

Veröffentlichte „Journey“ mit Statistik
Veröffentlichte „Journey“ mit Statistik

Außerdem kannst du dir für Zeitabschnitte, die du selbst festlegst, Reporte im CSV-Format herunterladen. Diese beinhalten alle Statistiken, die dir auch im „Journey Designer“ angezeigt werden.

Dank dieser Statistik ist dir sehr einfach möglich, einen Überblick über den Erfolg deiner Marketingstrategie zu bekommen und gegebenenfalls einzelne Aktionen zu überarbeiten.

Fazit

Der „Journey Designer“ von WebEngage ist ein starkes Marketinginstrument, mit du einfache und auch sehr komplexe Strategien für dein Online-Marketing entwickelst. Die übersichtliche und intuitive Oberfläche machen ihn zu einem einfach zu bedienenden Werkzeug.

Es bündelt die vielen Möglichkeiten von WebEngage in einer zentralen Schaltstelle, in die sich auch Neueinsteiger schnell einfinden und die auch bei umfangreichen Strategien immer übersichtlich bleibt.

Kategorien
JavaScript & jQuery Programmierung Webdesign

Cookies & Co.: Speichermöglichkeiten im Browser

Lange Zeit waren Cookies die einzige Möglichkeit, Informationen lokal im Browser zu speichern. Noch heute werden sie vor allem in Kombination mit serverseitigen Sessions verwendet. Doch dank HTML5 haben wir weitere Option, Daten lokal im Browser abzulegen. So gibt es den „Application Cache“ sowie „Web Storage“ und IndexedDB. Wofür aber gibt es die unterschiedlichen Speichermöglichkeiten und was können sie?

hunger-413685_1280

Mit Cookies Einstellungen und Sitzungen speichern

Cookies gab es schon zu Netscape-Zeiten. Sie werden bis heute eingesetzt, um Einstellungen für Websites und Webdienste zu speichern oder Sitzungen – sogenannte Sessions – zu verwalten. Dabei ist ein Cookie eine Textdatei, in der bis zu 4 Kilobyte an Text abgelegt werden kann. Du kannst Cookies per JavaScript anlegen und auslegen oder aber auch serverseitig beispielsweise per PHP.

Vor allem in Kombination mit Sessions spielen sie eine große Rolle. Sei es die Anmeldung in sozialen Netzwerken oder bei Online-Shops: Ein nach der Anmeldung gesetzter Cookie sorgt dafür, dass dich eine Website als Nutzer wiedererkennt.

Das Besondere an Cookies ist, dass sie mit einem Verfallsdatum versehen werden können. So haben Cookies in der Regel eine begrenzte Lebensdauer. Wird keine Lebensdauer festgelegt, verfällt ein Cookie mit dem Schließen des Browsers.

Grundsätzlich lassen sich Cookies nur von der Domain auslesen, über die sie auch gesetzt wurden. Es ist aber weitergehend möglich, einen Cookie auf bestimmte Subdomains oder Verzeichnisse zu beschränken.

Speichern per „Web Storage“

Mit der Einführung von HTML5 sind zwei weitere Speichermöglichkeiten etabliert worden: der „Web Storage“ bestehend aus „localStorage“ und „sessionStorage“. Beide Varianten erlauben es, ausschließlich per JavaScript Variablen und Werte im Browser zu speichern.

localStorage.setItem("name", "Manfred");
sessionStorage.setItem("name", "Manfred");

Während per „localStorage“ hinterlegte Daten dauerhaft im Browser verfügbar sind, bleiben per „sessionStorage“ gespeicherte Daten nur bis zum Beenden des Browsers gespeichert.

Im Gegensatz zu Cookies, welche eine einfache Textdatei darstellen, lassen sich hierbei beliebig viele Variablen vergeben und somit unterschiedliche Daten speichern und abrufen.

localStorage.getItem("name");

Während Cookies häufig in Kombination mit serverseitig gespeicherten Session-Variablen arbeiten, gibt es mit „localStorage“ und „sessionStorage“ eine ausschließlich lokale Speichermöglichkeit.

Komplette Websites offline speichern mit „Application Cache“

Mit HTML5 wurde mehr Fokus auf Mobilgeräte wie Smartphones und Tablets gelegt. So hast du mit dem „Application Cache“ die Möglichkeit, eine komplette Website offline verfügbar zu machen. Dabei kannst du über eine sogenannte Manifest-Datei festlegen, welche Ressourcen einer Website auf einem Gerät gespeichert und verfügbar gemacht werden sollen.

CACHE MANIFEST
index.html
stylesheet.css
logo.png

Diese per „CACHE MANIFEST“ eingeleitete Datei enthält alle Dateien für den Offline-Betrieb. Einmal heruntergeladen, ist dann keine Internetverbindung mehr notwendig, um die Seite aufzurufen. Im Gegensatz zum Browser-Cache bleiben die Dateien dauerhaft lokal gespeichert – ähnlich wie es auch bei nativen mobilen Apps der Fall ist.

Die Manifest-Datei muss im „<html>“-Element der Seite referenziert werden.

<html manifest="http://www.example.com/manifest.mf">

IndexedDB: Datenbank im Browser

Mit IndexedDB und WebSQL gab es zwei Ansätze, lokal im Browser angelegte Datenbanken zu etablieren. Durchgesetzt hat sich schlussendlich IndexedDB. Im Gegensatz zum „Web Storage“, der lediglich das Speichern von einfachen Variablen und textbasierten Inhalten ermöglicht, sind per IndexedDB deutlich komplexere Speichermöglichkeiten vorhanden.

Mit IndexedDB kannst du eine vollwertige Datenbank im Browser erstellen, in der du nicht nur Zeichenketten, sondern auch Zahlen und Objekte unterbringst.

var request = indexedDB.open("beispiel", 1);

Im Beispiel wird eine Datenbank angelegt. Anschließend erstellst du sogenannte „Stores“, in welche du einzelne Datensätze ablegst.

request.onupgradeneeded = function() {
  var db = request.result;
  var store = db.createObjectStore("artikel", {keyPath: "id"});
  var titel_index = store.createIndex("nach_titel", "titel", {unique: true});
  var autor_index = store.createIndex("nach_autor", "autor");
  store.put({title: "HTML5 und CSS3", author: "Denis", id: 123456});
  store.put({title: "Mobile Apps", author: "Dieter", id: 234567});
};

request.onsuccess = function() {
  db = request.result;
};

Hier wird ein „Store“ mit Artikeln angelegt. Anschließend werden zwei Indizes definiert, welche Datensätze unterschiedlich sortieren. Per „put()“ werden zum Schluss die Datensätze in die Datenbank geschrieben.

Fazit und Entwicklerwerkzeuge

Entwicklerwerkzeuge im Chrome
Entwicklerwerkzeuge im Chrome

Wer zeitgemäße Webanwendungen mit HTML5 entwickelt möchte, hat mit „Application Cache“, „Web Storage“ und IndexedDB drei Möglichkeiten, Daten auf unterschiedliche Weise lokal im Browser zu speichern und offline verfügbar zu machen. Gerade bei mobilen Webanwendungen ist dies ein wichtiger Aspekt. Serverbasierte Lösungen sind nicht nötig.

Die Entwicklerwerkzeuge aktueller Browser geben dir zudem die Möglichkeiten, die gespeicherten Inhalte darzustellen und Bedarf auch wieder zu löschen.

(dpe)

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Webdesign

Animierte GIFs richtig erstellen – mit Cloudinary

Trotz HTML5-Video und CSS- sowie JavaScript-Animationsmöglichkeiten erfreut sich das animierte GIF nach wie vor großer Beliebtheit. Vor allem kurze Videosequenzen werden sehr häufig im GIF-Format erstellt und in sozialen Netzwerken geteilt. Mit dem Bilder-Clouddienst Cloudinary erstellst du animierte GIFs im Handumdrehen selbst. Dabei hilft dir Cloudinary, GIFs zu optimieren und auch in Videoformate zur konvertieren.

Optimale Dateigröße und Bildqualität

Da sich das GIF-Format auf maximal 256 Farben beschränkt, ist es für fotografische Inhalte eigentlich nur bedingt geeignet. Dazu kommt, dass das GIF-Format – vor allem, wenn es Animationen enthält –, schnell zu recht großen Dateigrößen führt. Wer also eine Videosequenz in ein animiertes GIF umwandelt, muss immer zwischen Videoqualität und Dateigröße abwägen.

Cloudinary bietet dir für animierte GIFs eine einfache Kompression an, die du ganz einfach über die Bild-URL auf beliebige dort gehostete GIF-Dateien anwenden kannst. Auch wenn es es sich dabei um eine verlustbehaftete Kompression handelt, bleiben – wie bei Cloudinary üblich – die Originaldateien unberührt. Stattdessen wird on-the-fly eine entsprechend optimierte Version angefertigt.

http://res.cloudinary.com/demo/image/upload/fl_lossy/bild.gif

Um die Kompression anzuwenden, gibst du in der URL des Bildes einfach „fl_lossy“ mit an und du erhältst eine entsprechend auf Bildqualität und Dateigröße optimierte Version deiner GIF-Animation.

Nicht komprimiertes und komprimiertes animiertes GIF
Nicht komprimiertes und komprimiertes animiertes GIF

Zwischen unkomprimierten und per „fl_lossy“ optimiertem GIF sparst du je nach Animation bis zu 40 Prozent der Dateigröße. Da es sich um eine verlustbehaftete Kompression handelt, wirst du auch einen mehr oder wenigen deutlichen Unterschied in der Bildqualität erkennen. Aber insgesamt kann sich das Ergebnis sehr gut sehen lassen.

Drei Kompressionsstufen: 25, 50 und 75 Prozent
Drei Kompressionsstufen: 25, 50 und 75 Prozent

Mit dem zusätzlichen Parameter „q“ hast du zudem noch die Möglichkeit, die Qualität des GIFs und somit die Dateigröße zu beeinflussen. Je höher der Wert für „q“ ist, desto besser ist die Bildqualität. Erlaubt sind Werte zwischen 0 und 100, wobei der Wert von 100 der besten Qualität entspricht – wenngleich diese nicht ganz an die Qualität eines nicht komprimierten Bildes ran kommt.

Animierte GIFs manipulieren

Wer Cloudinary kennt, weiß, dass der Dienst zahlreiche Möglichkeiten zur Verfügung stellt, um Bilder zu manipulieren. So beschneidest und skalierst du Bilder und fügst ihnen diverse Filter hinzu, um Bildern beispielsweise eine Unschärfe mitzugeben.

Du kannst all diese Möglichkeiten auch bei animierten GIFs anwenden. So wendest du beispielsweise den Unschärfefilter „e_blur“ auf ein animiertes GIF an. Der Effekt wirkt sich auf die gesamte Animation aus. Das Erstellen der entsprechenden Datei dauert möglicherweise etwas länger, als man es sonst von Cloudinary gewöhnt ist.

http://res.cloudinary.com/demo/image/upload/e_blur:300/bild.gif

Aber dafür hast du eine sehr einfache und vergleichsweise schnelle Möglichkeit, Animationen zu skalieren und mit diversen Effekten zu versehen.

GIF mit und ohne Unschärfe
GIF mit und ohne Unschärfe

Speziell für Animationen gibt es zwei zusätzliche Features. So erlaubt dir der Parameter „pg“ (steht für „page“) die Darstellung eines bestimmten Frames aus der Animation.

http://res.cloudinary.com/demo/image/upload/pg_8/bild.gif

Im Beispiel wird also der achte Frame einer Animation als Einzelbild ausgegeben. Der Parameter „dl“ steht für „delay“ und gibt dir die Möglichkeit, eine Verzögerung zwischen den Frames der Animation einzurichten.

http://res.cloudinary.com/demo/image/upload/dl_200/bild.gif

Im Beispiel wird zwischen jedem Einzelbild eine kurze Verzögerung von 200 Millisekunden hinzugefügt. So realisierst du die Wiedergabe mit Zeitlupeneffekt.

Animierte GIFs in Videoformate konvertieren – und umgekehrt

Falls du deine GIF-Animationen doch einmal in einem Videoformat benötigst, hat Cloudinary hierfür eine schnelle Lösung für dich. So musst du schlicht und einfach die Dateiendung von „.gif“ auf „.mp4“ ändern und schon wird deine Animation als HTML5-Video im MP4-Format ausgegeben.

Auch hierbei hast du natürlich die Möglichkeit, andere Parameter zur Manipulation von Bildern hinzuzufügen. Diese werden bei den modernen Videoformaten ebenfalls berücksichtigt.

Animation als HTML5-Video
Animation als HTML5-Video

Gerade bei der Konvertierung in „echte“ Videoformate wird schnell die Schwäche animierter GIFs deutlich – nämlich die Dateigröße. Ins MP4-Format konvertierte GIFs besitzen nur einen Bruchteil der Dateigröße animierter GIFs. Gerade bei Videosequenzen wird dieser Unterschied sehr deutlich.

Cloudinary unterstützt zudem das WebM-Format. Die Konvertierung funktioniert ebenso einfach, indem du als Dateiendung einfach „.webm“ angibst.

Da die Browser bei der Unterstützung von HTML5-Videos nach wie vor unterschiedliche Formate unterstützen, solltest du deine Videos immer im MP4- und WebM-Format einbinden. Dank Cloudinary sind beide Formate im Handumdrehen erstellt.

Natürlich ist mit Cloudinary ebenso der umgekehrte Weg möglich. Hast du beispielsweise ein MP4-Video, konvertierst du dieses ins animierte GIF-Format. Auch die verlustbehaftete Komprimierung wendest du an.

Animierte GIFs aus Einzeldateien erstellen

Mit Cloudinary gelingt es nicht nur, aus einer Videosequenz ein animiertes GIF zu erstellen. Du kannst überdies aus einer Vielzahl von Einzelbildern ein animiertes GIF generieren.

Dazu lädst du einfach alle Bilder, die zu einer GIF-Animation zusammengeführt werden sollen, bei Cloudinary hoch und vergibst ihnen denselben Tag. Anhand des Tags wird ermittelt, welche Dateien zum animierten GIF hinzugefügt werden sollen.

Hochgeladene Datei mit vergebenem Tag
Hochgeladene Datei mit vergebenem Tag

Anschließend ist es mit der Cloudinary-API möglich, alle Bilder mit demselben Tag zu einer Animation zusammenzuführen. Es wird unter anderem eine PHP-Bibliothek angeboten, mit der du sehr unkompliziert eine solche Animation erstellst.

$ergebnis = \Cloudinary\Uploader::multi("animation");

Im Beispiel wird per PHP auf die Cloudinary-API zugegriffen und aus allen Bildern mit dem Tag „animation“ ein animiertes GIF erstellt. Dieses ist anschließend abrufbar.

http://res.cloudinary.com/demo/image/multi/animation.gif

Wichtig ist, dass der Dateiname aus dem Tag, also „animation“ besteht und davor der Parameter „multi“ gesetzt ist. Wer sich ein wenig mit der API vertraut macht, erstellt auch komplexere Animationen. So kannst du Bilder übereinander legen und durchs Bild animieren lassen.

Fazit

Wer schon mal mit Photoshop oder anderen Programmen GIF-Animationen erstellt hat, weiß um die Besonderheiten des Formates und die Schwierigkeiten gerade im Umgang mit Videosequenzen. Cloudinary zeigt mit seinem Clouddienst sehr eindrucksvoll, wie einfach sich on-the-fly animierte GIFs erstellen, manipulieren und in andere Formate umwandeln lassen.

Wer Cloudinary noch nicht kennt, sollte einen Blick auf den Dienst werfen, der nicht nur blitzschnell ist, sondern eine Vielzahl an Features zur Manipulation und Wiedergabe von Bildern und Videos anbietet.

(dpe)

Kategorien
E-Business Technik

Billiger als Adobe: Mit PDFelement PDFs erstellen und bearbeiten

Das PDF-Format ist nach wie vor der Standard, wenn es darum geht, Dokumente auszutauschen. Mit PDFelement steht dir ein umfangreicher PDF-Editor zur Verfügung, mit dem du PDF-Dateien erstellst, bearbeitest und bei Bedarf auch signierst und vor Änderungen schützt. Die Anwendung stellt dank ihres großen Funktionsumfangs eine großartige Alternative zu Adobes Acrobat dar.

pdfelement

Intuitive Bedienung dank einfacher Benutzeroberfläche

PDFelement gibt es als klassische Desktopanwendung für Windows- und Mac. Beim Programmstart des PDF-Editors wählst du zunächst aus einer der vier Grundfunktionen aus, mit denen du eine PDF-Datei erstellst oder bearbeitest, PDF-Dateien kombinierst oder auch eine PDF-Datei in ein anderes Format konvertierst.

Intuitive Benutzeroberfläche
Intuitive Benutzeroberfläche

Dabei ist das Erstellen von PDF-Dateien denkbar einfach. Du öffnest einfach eine beliebige Datei – sei es eine Bilddatei oder ein Office-Dokument – und schon steht das Dokument als PDF-Datei in PDFelement bereit. Anschließend hast du die Möglichkeit, Lesezeichen zu einzelnen Seiten sowie Anmerkungen hinzuzufügen.

Alternativ ist das Erstellen von PDF-Dateien auch über einen PDF-Drucker möglich. So erstellst du aus jeder beliebigen Anwendung heraus eine PDF-Datei, die du anschließend in PDFelement bearbeitest.

PDF-Dateien bearbeiten und Bilder hinzufügen

Der große Vorteil gegenüber einfachen PDF-Druckern ist die Möglichkeit, eine bestehende PDF-Datei zu bearbeiten. So ist es spielend einfach möglich, Texte zu verändern. Die Formatierung bleibt dabei erhalten, insofern die verwendete Schrift auf deinem System verfügbar ist.

Bei der Textbearbeitung werden einzelne Absätze als Textfeld dargestellt. Du kannst sowohl den Text selbst verändern als auch das Textfeld verschieben oder die Schriftart und -größe anpassen. Gleiches funktioniert mit allen anderen Elementen wie beispielsweise Bildern.

Einfaches Bearbeiten von Inhalten
Einfaches Bearbeiten von Inhalten

Während in Adobe Acrobat Texte in der Regel zu einem großen Block zusammengefasst werden, bist du mit PDFelement sehr viel flexibler, da einzelne Absätze für sich bearbeitbar und somit verschiebbar sind.

Du hast aber auch die Möglichkeit, neue Inhalte zu deiner PDF-Datei hinzuzufügen. So platzierst du neue Texte und importierst Bilder, die du im Dokument skalieren, drehen und verschieben kannst.

Außerdem versiehst du Texte mit einem Link zu einer Website oder einer Seite innerhalb der PDF-Datei. Alternativ platzierst du Links auch ganz frei auf einer Seite, indem du einfach eine Fläche ziehst, die mit einem Link versehen wird.

Seiten sowie Kopf- und Fußleiste hinzufügen

PDFelement bietet sich nicht nur an, um kleinere Änderungen an einem PDF-Dokument vorzunehmen. So fügst du Seiten auch aus anderen PDF-Dateien oder einfach leere Seiten hinzu. Du kannst ebenso ein leeres PDF-Dokument anlegen und alle Inhalte direkt in PDFelement erstellen.

Du platzierst Texte, Bilder, Links und erstellst sogar Kopf- und Fußzeilen, die automatisch auf jeder Seite deines Dokumentes eingefügt werden. Auch eine automatische Seitennummerierung fügst du problemlos hinzu.

Kopf- und Fußzeile auf alle Seiten hinzufügen
Kopf- und Fußzeile auf alle Seiten hinzufügen

Es gibt noch weitere Funktionen, mit denen du einzelne oder alle Seiten deines Dokumentes bearbeitest. So kannst du eine Seite auf einen bestimmten Ausschnitt beschneiden. Du drehst Seiten und hast die Möglichkeit, einzelne Seiten zu ersetzen oder in eigenständige PDF-Dateien zu extrahieren.

PDF-Dateien schützen und sensible Inhalte schwärzen

Nicht selten enthalten PDF-Dateien sensible Informationen. Denn häufig sind Rechnungen, Verträge und andere vertrauliche Dokumente im PDF-Format gespeichert. Um sicherzustellen, dass Unbefugte keinen Zugriff auf solche Informationen haben, kannst du mit PDFelement deine vertraulichen PDF-Dateien schützen, indem du sie zum Beispiel mit einem Kennwort versiehst.

Dabei hast du verschiedene Möglichkeiten, dein Dokument mit einem Kennwort zu schützen. Du kannst ein Dokument so sichern, dass zum Öffnen ein Kennwort nötig ist. Alternativ kannst du nur das Drucken und Bearbeiten des Dokumentes per Kennwort schützen.

Sensible Inhalte schwärzen
Sensible Inhalte schwärzen

Falls du Dokumente mit persönlichen Dokumenten an Dritte verschicken möchtest, erlaubt dir PDFelement zudem, bestimmte Inhalte eines Dokumentes zu schwärzen. Über eine Suchfunktion findest du dann beispielsweise Namen und Kontaktdaten automatisch und versiehst sie mit einem schwarzen Balken.

Hierbei wird der eigentliche Inhalt tatsächlich aus dem Dokument gelöscht, sodass sichergestellt ist, dass diese Information nicht wiederhergestellt werden kann.

Um die Herkunft deiner PDF-Dokumente nachvollziehen zu können, besteht zudem die Möglichkeit, diese mit einer Signatur zu versehen. So erstellst du sowohl selbst Signaturen oder bindest bestehende Signaturen einfach ein.

Interaktive Formulare erstellen

Häufig enthalten PDF-Dateien interaktive Formulare, die direkt im PDF-Reader ausgefüllt werden können. Solche PDF-Formulare erstellst du mit PDFelement ebenfalls ganz einfach.

Interaktive Formulare erstellen und verarbeiten
Interaktive Formulare erstellen und verarbeiten

Im speziellen Formular-Modus platzierst du zum Beispiel Eingabefelder, Kontrollkästen sowie Auswahllisten. Jedes Formularelement besitzt zahlreiche Eigenschaften, mit denen du Aussehen und Funktionalität definierst.

So setzt du Pflichtfelder und legst fest, was bei der Auswahl oder Eingabe passieren soll. Du kannst beispielsweise einen Link aufrufen oder andere Formularelemente ein- beziehungsweise ausblenden lassen.

Für komplexe Funktionen steht dir JavaScript zur Verfügung, welches zum Beispiel Berechnungen zwischen eingegebenen Werten ermöglicht.

Fertig ausgefüllte Formulare lassen sich anschließend ausdrucken oder per E-Mail an eine bestimmte Adresse verschicken. Alternativ besteht die Möglichkeit, die Formulardaten an eine Webadresse zu verschicken, welche die Daten serverseitig verarbeitet.

Aus PDF-Datei eine Office-Datei machen

Während es immer problemlos möglich ist, aus einem Office-Dokument eine PDF-Datei zu erzeugen, ist der umgekehrte Weg in der Regel nicht möglich. Mit PDFelement ist jedoch auch das machbar.

Dazu wählst du ein gewünschtes Zielformat aus. Dir stehen Microsoft Word, Excel und PowerPoint in verschiedenen Versionen zur Verfügung. Auch ein Export in verschiedene Bildformate ist möglich.

Beim Export in ein Office-Format bleiben die Formatierungen erhalten, sodass das Layout der PDF-Datei in das Exportformat übernommen wird.

Kostenlose Trialversion

PDFelement von Wondershare kannst du in einer kostenlosen Trialversion testen. Dabei werden alle PDF-Dateien, die du erstellst, zunächst mit einem Wasserzeichen versehen. Entscheidest du dich später dazu, die Anwendung zu lizenzieren, entfernst du dieses Wasserzeichen problemlos wieder aus den Dokumenten. Du musst diese also nicht erneut erstellen und bearbeiten.

Wasserzeichen in der Trialversion
Wasserzeichen in der Trialversion

Texterkennung (OCR) bei gescannten Dokumenten

Nicht immer werden PDF-Dokumente aus bestehenden Office-Dateien erstellt, häufig ja auch aus JPEGs und anderen Bildformaten. PDFelement erkennt dies und schlägt dir vor, eine Texterkennung anzuwenden. Gerade bei eingescannten Dokumenten sorgt die OCR-Funktion dafür, dass Texte kopierbar gemacht werden.

Die Texterkennung steht dir in der Trialversion jedoch nicht zur Verfügung.

Kostengünstige Alternative

Entscheidest du dich dafür, PDFelement zu lizenzieren, kostet dich eine Lizenz zur privaten Nutzung  pro Windows-Rechner 69,95 US-Dollar. Die Lizenz zur kommerziellen Nutzung kostet 119,95 US-Dollar. Willst du auch die OCR-Funktion nutzen, kostet dich PDFelement 89,95 für die private und 149,95 für die kommerzielle Nutzung. Die Mac-Versionen sind etwas teurer.

Im Vergleich zu anderen PDF-Editoren mit vergleichbaren Funktionsumfang ist PDFelement ein echtes Schnäppchen. Außerdem werden dir lebenslang kostenlose Updates garantiert.

(dpe)

Kategorien
Design Webdesign Workflow

CuePin: Effektive und schnelle Kollaboration für Designprojekte

Als Grafik- oder Webdesigner kennt man das Problem: Projekte müssen vom Kunden abgenommen oder im Team besprochen werden. Dabei ergeben sich zahlreiche Anmerkungen, Änderungswünsche und Fragen. CuePin stellt hierbei ein effektives und einfach zu bedienendes Kollaborationswerkzeug zur Verfügung, mit dem du deine Entwürfe für Websites und andere Projekte ganz einfach anderen vorstellst und ihnen die Möglichkeit gibst, ihre Anmerkungen direkt in den Entwurf zu schreiben.

cuepin

Design hochladen, Einladungen verschicken

Das Arbeiten mit CuePin ist einfach. Nach der Registrierung legst du ein neues Projekt an und lädst deine Entwürfe hoch. Es werden gängige Bildformate wie JPG, PNG und BMP sowie PDF-Dokumente unterstützt. Dabei gruppierst du Bilder in verschiedene Ordner, benennst diese passend und schaffst so eine übersichtliche Struktur für dein Projekt.

Damit Kunden oder Teammitglieder Zugriff auf dein Projekt haben, teilst du dieses entweder über eine URL oder verschickst per E-Mail Einladungen. Sind die eingeladenen Personen bei CuePin noch nicht registriert, müssen diese sich vorher kurz anmelden, um den Dienst nutzen zu können. Anschließend haben alle Teilnehmer die Möglichkeit, sich aktiv am Projekt zu beteiligen.

Pin platzieren und an entsprechender Stelle kommentieren

Dabei lassen sich Anmerkungen beziehungsweise Kommentare direkt im Entwurf erstellen. Dazu platziert du an beliebiger Position innerhalb eines Designs oder Dokumentes einen Pin und gibst einen Kommentar ein. So wird direkt deutlich, worauf sich die Anmerkung bezieht. Das spart Zeit und beugt Missverständnissen und Unklarheiten vor.

Der Benutzername wird übrigens bei jedem Kommentar mit angezeigt. So weißt du genau, wer ihn geschrieben hat.

Chat für schnellen Austausch

Alle Kommentare werden dir zudem in einem übersichtlichen Chatverlauf dargestellt, den du einfach am rechten Rand der Bedienoberfläche einblendest. Dort ist es auch möglich, allgemeine Kommentare zu schreiben, die sich nicht auf einen Pin innerhalb des dargestellten Designs oder Dokumentes beziehen.

Chatverlauf für Echtzeitkommunikation
Chatverlauf für Echtzeitkommunikation

Der Chat ermöglicht zudem eine Echtzeitkommunikation mit allen Teilnehmern. So kannst du dich schnell und unkompliziert mit den anderen austauschen. Der Chatverlauf verrät dir zudem, wer zu welcher Zeit etwas geschrieben hat. Bezieht sich ein Kommentar auf einen im Bild platzierten Pin, wird dir das dort ebenfalls angezeigt.

Fortschritte über Versionierung festhalten

Ein weiteres Feature von CuePin ist die Möglichkeit, Designs und Dokumente zu versionieren. Gerade wenn du dich in der Entwurfsphase befindest, entstehen schnell überarbeitete Designs, die im Team mit anderen besprochen werden müssen. Dazu lädst du einfach überarbeitete Bilddateien oder PDF-Dokumente hoch und gibst den anderen Teilnehmern wieder die Möglichkeit, ihre Anmerkungen zu hinterlegen.

Dabei werden die ursprünglichen Dateien jedoch nicht überschrieben. Dank der integrierten Versionierung stehen jedem auch alle älteren Versionen zur Verfügung. So kann jeder sehr einfach zurückverfolgen, wie sich ein Design oder ein Dokument entwickelt hat. Verworfene Ideen gehen also nicht verloren, sondern lassen sich jederzeit wieder aufrufen. Nicht selten stellt man im Laufe eines Gestaltungsprozesses ja fest, dass eine einmal verworfene Idee letztendlich doch nicht so schlecht war.

Einfache und übersichtliche Bedienung

Insgesamt besticht CuePin durch seine übersichtliche Oberfläche und die einfache Bedienung. Die Anzahl neuer Kommentare wird dir angezeigt, auch wenn du den Chatverlauf ausgeblendet hast. Außerdem erhältst du über das Favicon der Seite eine Info über die Anzahl neuer Kommentare. So kannst du dich im Browser anderen Seiten widmen und bleibst dennoch immer darüber informiert, ob es etwas Neues in deinem Projekt bei CuePin gibt.

Übersichtliche Projektverwaltung und Möglichkeit, diese mit anderen zu teilen
Übersichtliche Projektverwaltung und Möglichkeit, diese mit anderen zu teilen

Deine Designs und Dokumente werden sehr großzügig präsentiert und stehen logischerweise im Mittelpunkt. Für detailreiche Entwürfe gibt es zudem die Möglichkeit, per Lupe in ein Bild hinein zu zoomen. Außerdem erlaubt dir CuePin auch die Darstellung in Maximalgröße. Dabei füllen deine Designs dann das gesamte Browserfenster aus.

Wer gleich mehrere Projekte in CuePin pflegt, wird zudem Gefallen an der Approve-Funktion haben. Mit dieser markierst du alle Projekte, die abgeschlossen sind. Ein entsprechend prägnanter Hinweis signalisiert auch allen anderen Teammitgliedern, dass das Projekt beendet ist.

So wird für dich und andere ersichtlich, um welche Projekte man sich nicht mehr kümmern muss und welche noch im Arbeitsprozess sind.

Fazit und Kosten

CuePin kannst du kostenlos für 30 Tage im vollen Umfang testen. Das heißt, du kannst auch Einladungen verschicken und mit anderen an einem Projekt arbeiten. Für ein langfristiges Arbeiten mit dem Dienst ist es allerdings notwendig, einen kostenpflichtigen Plan zu buchen.

Die Pläne und Preise sind dabei sehr übersichtlich gestaltet. Es gibt drei Pläne, bei denen du fünf, 20 beziehungsweise 50 Projekte anlegen kannst. Die Kosten belaufen sich dabei auf zehn, 30 beziehungsweise 60 Dollar pro Monat. Die Anzahl der Teammitglieder, die du zu einem Projekt hinzufügen kannst, ist dabei ebenso unbegrenzt wie die Anzahl der Dateien, die du hochladen kannst. Außerdem erhältst du als zahlender Abonnent des Dienstes unbegrenzten Support per E-Mail.

CuePin macht die kollaborative Arbeit sehr viel einfacher. Wer schon einmal per E-Mail oder in einem einfachen Chat versucht hat, Designs oder Dokumente zu besprechen, wird wissen, dass dies häufig lange dauert und nicht selten zu Missverständnissen führt.

Das Kollaborationswerkzeug von CuePin kombiniert sehr gut die Möglichkeit, Entwürfe zu präsentieren, diese zu versionieren und über einen Chat Kommentare und Anmerkungen zu erstellen. Die flexible Preisgestaltung kommt dabei sowohl Freiberuflern mit wenigen Projekten als auch größeren Agenturen entgegen.

(dpe)

Kategorien
JavaScript & jQuery Programmierung

ZingTouch: Umfangreiche Gestenerkennung per JavaScript

Die Wahrscheinlichkeit, dass deine Website über ein Smartphone oder Tablet angesteuert wird, wächst beständig. Die mobile Internetnutzung nimmt nach wie vor zu und es wird daher zunehmend wichtig, dass eine Website die besondere Bedienung per Touchdisplay berücksichtigt. Neben einfachen Taps haben sich zahlreiche Gesten etabliert, mit denen Mobilgeräte gesteuert werden. Mit ZingTouch steht dir eine umfangreiche JavaScript-Bibliothek zur Verfügung, die dir die Bedienung deiner Website über Gesten ermöglicht.

Tap-Gesten

Standardgesten auch für mehrere Finger

Grundsätzlich stellt dir JavaScript alle Möglichkeiten zur Verfügung, verschiedene Gesten zu interpretieren. Mit den Touch-Events fragst du zum Beispiel Berührungen auf dem Display ab und zeichnest Bewegungen auf. Dabei ist es möglich, mehrere Finger, die sich gleichzeitig auf dem Display befinden, nachzuhalten.

Um die verschiedenen gängigen Gesten interpretieren zu können, gibt es ZingTouch. Die JavaScript-Bibliothek kann sowohl einfache Taps als auch Taps mit mehreren Fingern interpretieren und unterschiedlich darauf reagieren.

Drehungen auf dem Display oder das Auseinander- und Zusammenziehen von Fingern erkennt ZingTouch ebenfals und ermöglicht so, auf unterschiedliche Gesten reagieren zu können.

Beispiele auf CodePen
Beispiele auf CodePen

ZingTouch einbinden und Gesten abfragen

Um ZingTouch nutzen zu können, muss die Bibliothek zunächst in dein HTML-Dokument eingebunden werden. Anschließend erstellst du eine sogenannte Region, die auf eine bestimmte Geste reagieren soll. Eine solche Region ist ein beliebiges HTML-Element.

var region = ZingTouch.Region(document.getElementById("container"));

Im Beispiel wird der Variablen „region“ per „ZingTouch.Region()“ das HTML-Element mit der ID „container“ zugewiesen. Im nächsten Schritt wird eine Geste definiert, auf die reagiert werden soll.

var geste = new ZingTouch.Tap({
  numInputs: 2,
  maxDelay: 1000
});

Im Beispiel wird per „ZingTouch.Tap()“ ein Tap definiert. Diesem kannst du verschiedene Parameter übergeben. Hier werden per „numInputs“ die Anzahl der Berührungspunkte angegeben, die auf die Region erfolgen müssen. Außerdem wird per „maxDelay“ in Millisekunden angegeben, wie lange der Tap maximal dauern darf.

Im konkreten Fall müssen also zwei Finger für maximal eine Sekunde auf der Region platziert sein. Im letzten Schritt wird die Geste per „bind()“ an die Region gebunden und eine Funktion angegeben, die bei erfolgreich ausgeführter Geste gestartet werden soll.

region.bind(document.getElementById("container"), geste, function(e) {
  console.log("Tapped.");
});

Dieses einfache Beispiel sorgt dafür, dass per Zwei-Finger-Tap auf das Element mit der ID „container“ in der Konsole „Tapped.“ geschrieben wird.

Sechs Gesten individuell konfigurierbar

Rotate-Geste
Rotate-Geste

Neben recht einfachen Tap-Gesten sind noch fünf weitere Gesten möglich. So kannst du Drehungen per Rotate-Geste, Auseinander- und Zusammenschieben per Expand- und Pinch-Geste, Umkreisen per Pan-Geste und klassisches Wischen per Swipe-Geste realisieren.

Für jede Geste stehen dir unterschiedliche Konfigurationsmöglichkeiten zur Verfügung. So gibst du bei der Swipe-Geste beispielsweise die Geschwindigkeit an, mit der die Geste ausgeführt werden muss.

new ZingTouch.Swipe({
  escapeVelocity: 0.25,
});

Für jede Geste gibt es auch Rückgabewerten, die ausgelesen und ausgewertet werden können. So gibt die Swipe-Geste zum Beispiel einen Winkel wieder, der die Richtung der Wischgeste darstellt.

region.bind(document.getElementById("container"), "swipe", function(e) {
  console.log(e.detail.data[0].currentDirection";
});

Im Beispiel wird die Geste ohne zusätzliche Parameter einfach an die „bind()“-Methode übergeben. Bei erfolgreicher Durchführung der Geste wird der Richtungswinkel „currentDirection“ in die Konsole geschrieben.

Umfangreiche Dokumentation

Umfangreiche und anschauliche Dokumentation
Umfangreiche und anschauliche Dokumentation

ZingTouch ist ein umfangreiches Werkzeug, mit dem du alle gängigen Gesten abdeckst und diese ohne großen Aufwand in deine eigenen mobilen Webprojekte implementierst. Es gibt eine umfangreiche Dokumentation mit zahlreichen Beispielen auf CodePen.

Die Bibliothek steht unter der freien MIT-Lizenz. Du kannst ZingTouch also auch kommerziell einsetzen.