Pixelfans

Social Mailchimp auf deutsch

geschrieben von carsten

Für das WordPress-Plugin “Social” von Mailchimp stelle ich hier die deutschen Sprachdateien zum Download zur Verfügung.

"Social" von Mailchmp ist ein Plugin, dass die Kommentarfunktionen des klassischen WordPress um ein wenig socialmedia-Vodoo erweitert.

Leser haben die Möglichkeit sich mit Ihren Facebook- oder Twitter-Konten bei einer Seite anzumelden um Kommentare zu hinterlassen. Das ermöglicht zum einen, dass Leser nicht alle Daten, die ein Kommentarfeld eben wissen will, eintippen müssen, automatisch die jeweiligen Nutzer-Avatare verwendet werden egal ob man nun ein Gravatar-Konto besitzt. Und darüber hinaus verteilt es - nach Wunsch - auch den hinterlassenen Kommentar in den socialmedia-Kanal des Nutzers. Darüber hinaus bringt es für Seitenbetreiber vermutlich ein wenig mehr Besucher, da die verteilten Nutzerkommentare wieder Leser anlocken können, zu denen man sonst vielleicht keinen Zugang hätte.

Es ist nach vielen Jahren die erste wirklich gut funktionierende Umsetzung der Idee, gebloggte Inhalte direkt an die eigenen socialmedia Kanäle weiter zu verteilen. Ist das erstmal geschehen, sammelt "Social" regelmäßig die Reaktionen aus den sozialen Netzwerken wieder ein und listet sie als zusätzliche Kommentare am entsprechenden Beitrag. Sehr schön, wenn auch datenschutzrechtlich noch spannend.

Für eines meiner aktuellen Projekte benötige meine Lieblingsbausteine auf Deutsch, Englisch und Französisch. Und daher hier auf die Schnelle die deutschen Sprachdateien für Social von Mailchimp.

social-de_DE.zip (14 KB)

Das entpackte /lang Verzeichnis einfach in das Pluginverzeichnis kopieren; fertig. In der Hoffnung, das die Entwickler bei Mailchimp die Dateien zügig in die Plugin-Dateien integrieren und dieser Schritt nicht nach jeder Aktualisierung wieder ansteht.

Kategorie: News | Kommentare (3) | Trackbacks (0) | Permalink

Realistische Vektorgrafiken für das Web

geschrieben von Pawel

Im Internet finden sich beeindruckende Zeugnisse digitaler Grafik. Einige sind mit Photoshop entstanden und nahezu folgerichtig in einem Pixelformat abgespeichert. Es gibt aber auch unzählige Grafiken, denen man anmerkt, dass sie als Vektorgrafik entstanden sind. Dafür, dass alle modernen Browser Scalable Vector Graphics interpretieren, finden sich noch wenige Seiten, die auf die direkte Integration setzen.

Gründe

Im professionellen Umfeld spielt die Verbreitung des Internet Explorers eine wichtige Rolle. Da dieser erst ab Version 9 die Darstellung ohne Plugin erlauben und zudem nicht mehr auf Windows XP laufen, sind hier Workarounds nötig. Texte für Webseiten werden typischerweise mit einem Content Management System erstellt, die zudem auf einer Javascript Wysiwyg-Editor setzen. Wenn überhaupt, lässt sich ein SVG-Bild meist nur in der Quelltextansicht einfügen. Die besten Grafikdesigner wissen wenig über das Format und erstellen ihre Grafiken in Vektorgrafikprogramme. Im professionellen Umfeld wird dabei besonders auf Illustrator gesetzt, der in Adobes Creative Suite enthalten ist und Farbpaletten unterstützt. Da die meisten Aufträge anhaltend für den Druck entstehen, ist das besonders wichtig. Meist wird zusätzlich ein Grafiktablett verwendet. Im Ergebnis entstehen Vektorgrafiken, die 2 Mbyte groß sind – und sich so im Web nicht verwenden lassen.

Vorüberlegungen

Damit SVG verwendet werden können, darf die Dateigröße nicht über 100 KByte liegen. Ähnlich wie bei Texten, muss man sich auch bei Vektorgrafiken überlegen, diese direkt für das Web zu erstellen. Der Sprung ist ähnlich hoch, wie von der Langspielplatte zur Compact Disc und muss zunächst die Frage beantworten, welche Elemente weggelassen werden können.

Die Größe von SVG-Dateien wird überwiegend von der Anzahl der Objekte und deren Komplexität bestimmt. Durch mehrere Schichten (Layer), ähnlich der Lasurtechnik in der Ölmalerei entsteht ein realistisches Bild. Die Objekte selbst werden durch Punktkoordinaten (Knoten, Nodes) beschrieben. Diese kann erheblich sein. Die typische Arbeitsweise des Designers mit dem Kalligraphiewerkzeug und dem Grafiktablett produziert erhebliche Nodes und ist ein Grund für riesige Dateien. Einige Techniken sind somit bei der Produktion für das Web nicht verwendbar. Es macht Sinn sich zu Überlegen, welche Objekte, Farbdefinitionen, Filter usw. mehrfach verwendet werden können.

Selbstporträt - ein Beispiel

Wer nicht warten will, schaut sich gleich das Ergebnis an. Ausgangspunkt für das Porträt ist ein Foto, in dem ich zunächst Helligkeit und Kontrast in Gimp verstärkt habe. Dadurch fällt es mir leichter, mich auf die wesentlichen Bereiche zu konzentrieren und nicht jede Falte zu beachten.

Bei meiner Arbeit mit Inkscape öffne ich zunächst immer das Ebenenfenster. Das Foto wird dann in Inkscape in die angedeutete A4-Seite hineingezogen und wie gewünscht platziert. Die Ebene sollte einen aussagekräftigen Namen erhalten und direkt im Menü umbenannt werden. Danach wird mit einem Klick auf das Schloßsymbol die Ebene vor versehentlicher Arbeit verschlossen und es können weitere Ebenen darüber angelegt werden. Ebenen sind gruppierte Elemente, die ein spezielles Label erhalten. Die Zuordnung gelingt daher nur, wenn die SVG-Dateien im Format Inkscape-SVG abgespeichert werden, was für die erste Phase unbedingt empfohlen wird. Beim Mischmodus wird auf Filtereffekte gesetzt, hier sollte also Normal bevorzugt bleiben.

Ich habe zunächst ein Ebene head hinzugefügt und nutze überwiegend englischsprachige Bezeichner, um Umlautprobleme in der SVG zu umgehen. Als Basis für meinen Kopf dient zunächst eine Ellipse, die ich mit Pfad → Objekt in Pfad umwandeln und mit dem Knotenwerkzeug um weitere Knoten ergänzen kann und mit der Maus so zurecht ziehe, das sie der Kopfform entspricht. Mit der Pipette kann ich die Füllfarbe direkt aus dem Ursprungsbild übernehmen.

Den Gesichtsschatten habe ich mit dem Bezier-Werkzeug nachgemalt. Durch Farbverläufe und Transparenz kann mit diesen zwei Objekten schon ein erheblicher räumlicher Effekt erzeugt werden. Ich lasse den „Füllen und Kontur“-Dialog eingeblendet. Die Verwendung von Unschärfe sollte an dieser Stelle noch vermieden werden. Damit wird ein Filter angelegt. Unschärfe wird recht häufig benötigt und damit würde für jedes Element ein neuer Filter angelegt werden. Filter können die Rechenzeit signifikant beeinflussen und besser am Schluss hinzugefügt werden. Da Safari und der Internet Explorer filter ohnehin (noch) nicht verstehen, sollte die Grafik auch ohne Filter vorzeigbar sein.

Danach wird auch diese Ebene gesperrt und unsichtbar geschaltet. Ich habe mich dann den Augen gewidmet. Die Augen bestehen aus der Augenhöhle, dem Hintergrund, der Iris und der Pupille – insgesamt 6 – 10 Objekte, wenn diverse Leuchtflecken mitgezählt werden. Ich habe später Elemente gelöscht, um die Komplexität zu reduzieren, da die Augen ohnehin hinter den Brillengläsern liegen. Basis für alle Objekte sind auch wieder Kreise/ Ellipsen. Die Elemente, welche ein Auge repräsentieren, sollten gruppiert und damit logisch strukturiert werden. Besonders hier bietet es sich an, die Objekte aussagekräftig zu benennen. Inkscape bietet dazu einen Dialog, der mit der rechten Maustaste erreicht wird. Der Dialog zeigt deutlich, das jedes Element in Inkscape einen Titel und eine Beschreibung haben kann, welche man auch nutzen sollte, um auch sehbehinderten Nutzern eine Beschreibung zu liefern.

So entstehen alle Bereiche des Porträts. Die Haare habe ich mit einem Grafiktablett und dem Kalligraphie-Werkzeug („Klecksig“) gezeichnet. Danach habe ich alle Elemente markiert und mit "Pfad → Vereinigung" zu einem Pfad zusammengefasst, das Objekt dann eindeutig benannt. Mit "Strg + L" ist zunächst die Anzahl der Knoten reduziert worden. Die Haare wurden zunächst dupliziert und mit verschiedenen Farben und Transparenzen etwas verschoben und geschichtet. Diese werden später durch mehrere Instanzen von use ausgetauscht. Zwar bietet auch Inkscape das „Klonen“ an, lässt es aber nicht zu ein Objekt ohne Füllung und ohne Rand zu erzeugen. Das ist aber die Voraussetzung, um allen geklonten Objekten (use) unterschiedliche Farben zu geben. Nachdem alle Bestandteile des Porträts entstanden sind, kann das Bild mit der untersten Ebene entfernt werden.

Nun kann der Einsatz von Filtern erfolgen. Alle verwendeten Filter sieht man, wenn das Menü Filter bearbeiten geöffnet ist. Diese Filter können den gewünschten Objekten zugeordnet werden. Meiner Meinung nach, reichen 4-5 Unschärfefilter aus. Der Filter für die Haare ist etwas komplexer, lässt sich mit dem mächtigen Werkzeug aber wie gewünscht zusammenstellen. Inkscape bringt bereits einige Filter mit, die sich als Basis für eigene Experimente verwenden lassen.

Die Nachproduktion beginnt mit dem Abspeichern als optimiertes SVG. Hier werden ungenutzte Farbverläufe u.a. bereits aus dem Dokument entfernt. Der SVG-Cleaner, den es bislang nur für Ubuntu gibt, verkleinert die Datei noch weiter. Ich konnte allein mit diesen Tools meiner Datei, die ursprünglich ca. 400 KByte groß war um etwa die Hälfte verkleinern. Der Rest lässt sich dann leider bislang nur in einem Editor und per Hand machen. Hier hilft ein eindeutiger Name und das Ausprobieren.

Ein bereinigter Code ist dann auch eine gute Ausgangsbasis, um eine gewisse Interaktivität hinzuzufügen.

Selbstporträt mit Interaktion

Im Beispiel können die einzelnen Elemente ein- und ausgeblendet werden, so dass man sich einen Überblick verschaffen kann, wie diese gestaltet ist.

Kategorie: Ideen , SVG | Kommentare (0) | Trackbacks (0) | Permalink

Eine Seite für alle Fälle

geschrieben von Pawel

Es gab Zeiten, da durften Ärzte nicht für sich werben. Heute hat sogar mein Zahnarzt eine Website. Er hat mir versichert, dass ihn darüber zunehmend auch neue Patienten finden. Es gibt also anhaltend Anwendungsfälle mit relativ konstanten Inhalt. Dazu habe ich ja auch schon mal im Blog geschrieben. Hier reicht eine Seite (Onepager), die aber mit Javascript in Kleinteile "zersägt" wird, um die Inhalte ein bisschen abzusetzen und die gesamte Seite lesbarer zu gestalten.

Wenn ich die (momentane) HTML5-Spezifikation nicht völlig falsch verstanden habe, kann man jeden Inhaltszusammenhang in eine section packen. Da Javascript dafür sorgt, dass jeweils nur ein Bereich angezeigt wird, mutet es wie eine mehrseitige Präsenz an. Damit werden Ressourcen gespart, da insgesamt weniger Daten übertragen werden. Es gibt keine zusätzlichen Requests, da das CSS und Javscript im head des Dokuments stehen. Bei kleinen Dateien lohnt die Auslagerung in seperate Dateien nicht.

Diese Vorteile kommen noch mehr zur Geltung, wenn die Seite mit einem Smartphone genutzt wird. Das coole an Smartphones ist, dass sie spätestens alle 2 Jahre erneuert werden und Javascript immer läuft.

Desktoprechner werden steuerlich in 4-5 Jahren abgeschrieben und noch länger genutzt. Daher finden sich dort noch ein paar Uraltbrowser, deren Zeit aber abläuft. Netscape 4.6 ist ja auch verschwunden.

Auf mobilen Geräten kann man CSS @media-queries voraussetzen. Selbst wer unbedingt Windows Mobile benutzt und nicht reflexartig Opera Mobile installiert hat, findet nach dem Mango-Update jetzt den IE9 vor, der dies auch versteht. Für mich sind damit handheld-Angaben obsolet.

Für meinen konkreten Anwendungsfall ist es wichtiger auf den Fall zu reagieren, wann die Navigation nicht mehr ins portrait-Format passt. Seltsamerweise gibt es im Netz nicht viele Tipps, die sich mit der Navigation auf kleinen Screens auseinandersetzen. Ich habe nur ein Tutorial auf CSS-Tricks gefunden, das mir aber nicht gefiel. Ich wollte ein Menü, das ich auch noch treffe, nachdem ich meiner Mutter den Garten umgegraben habe.

Ich habe die Navigation gestaltet und brauchte nur noch einen Button, um die Navigation sichtbar bzw. unsichtbar zu machen. Der Button sollte gut sichtbar und erreichbar sein. Die zunächst naheliegende Variante, den button mit Pseudoelementen zu kreeiren habe ich wieder verworfen. Einerseits ist ein solcher Button im Firefox Mobile schwer bedienbar und andererseits fällt sofort auf, dass touch- und hover-Events sich deutlich unterscheiden. Das Mobiltelefon bemerkt natürlich nicht, dass der Finger weg ist und die Navigation bleibt solange sichtbar, bis der Finger irgendwo auf den Screen tippt. Unschön.

Bei meiner Lösung galt es sicherzustellen, dass der mit Javscript erzeugte button nur bei der Verwendung der mobilen @media-queries gezeigt wird, . Empfohlen sei hier die Angabe max-device-width. Angaben ohne -device- interpretieren manche Mobilbrowser nicht. Das Ungetüm

mobile = window.getComputedStyle($t('html')[0], null).getPropertyValue('border-top-style') === 'dashed' ? 'true' : 'false';

fragt nach einen bestimmten Stilmerkmal des html-Elements, dem ich für kleine Screens, oben eine gestrichelte Linie zugewiesen habe. Einige mobile Browser habe diese tatsächlich angezeigt, weswegen ich die Liniestärke auf 0 gesetzt habe. Wenn das Stilmerkmal vorhanden ist, muss also die @media-query funktionieren. Glücklicherweise beherrschen auch alle diese Browser .getComputedStyle. Es gibt neuere Smartphones, die im landscape-Modus mehr Pixel anzeigen, als die hier angesetzten 600px. Daher wird bei jedem resize-Event, also auch beim Drehen, die Funktion checkScreen() aufgerufen. Damit bei kleineren Displays nicht ständig neue Buttons entstehen, muss überprüft werden, ob er noch nicht erzeugt wurde. Mit .removeChild(button) ist er nur aus dem DOM entfernt, aber noch vorhanden. Diesen Fall galt es zu berücksichtigen. Die Mobilvariante ist jetzt fertig.

Die allgemeinen Stilregeln verhelfen auch alten IE's zu einer bedienbaren Seite. Moderne Browser zeigen mehrere Spalten sowie CSS-Muster. Letztere können erheblich Performance kosten.

Demo eines Onepagers für alle Displaygrößen

Kategorie: CSS , Ideen , JS , Layout | Kommentare (0) | Trackbacks (0) | Permalink