Innehållsförteckning för 01/2018 från SCREENGUIDE

SVGATOR SVGator ist ein kostenloses Online-Tool, mit dem Sie SVGs animieren können. Dazu bereiten Sie ein statisches SVG vor und laden es hoch. Ihr SVG darf zu Beginn keine eigenen Animationen enthalten. In der Weboberfläche sehen Sie die einzelnen Elemente aus dem SVG, verschiedene Möglichkeiten für Animationen, Presets sowie eine Zeitleiste. Wenn Sie schon einmal mit Flash oder anderen Animationsprogrammen gearbeitet haben, werden Sie sich hier schnell zurechtfinden. Nun fügen Sie Ihre Animationen hinzu und exportieren die Grafik. Sie erhalten wiederum ein eigenständiges SVG, das die Animationen beinhaltet. Je nach Größe und Umfang der Animationen können Sie dadurch gegenüber einem animierten GIF deutlich an Größe sparen. Vor allem können Sie das SVG beliebig groß darstellen. Loops oder Mouse-Over-Effekte sind kein Problem, aber noch unterstützt SVGator nicht alle Animationen. So können…

Meist lässt sich das Scheitern eines Projektes nicht an einem spezifischen Problem festmachen. Ein ungünstiger Mix aus Problemen, Frust und Verzweiflung sorgt am Ende für den großen Knall. Die Folge sind im besten Falle Gemeckere und lange Gesichter auf beiden Seiten. Im schlimmsten Falle droht ein zäher Kampf vor Gericht. So oder so steht fest: Das Projekt ist gescheitert, der Kunde wird nicht wiederkommen und auch im Gespräch mit weiteren Geschäftspartnern kein gutes Haar an Ihnen lassen. Dabei braucht es gar nicht so weit zu kommen. Wer es schafft, seine Kunden zu überzeugen, im Vorfeld in einen konstruktiven, professionell vor- und nachbereiteten Workshop zu investieren, schafft die ideale Grundlage für einen positiven Projektverlauf. PHASE 1: ÜBERZEUGUNG Noch bevor es zu einem Workshop kommt, gilt es, den Kunden im Rahmen eines…

Firefox war viele Jahre die erste Wahl für viel Surfer. Hohe Geschwindigkeit, viele Sicherheitsfunktionen und gute Seitendarstellungen sorgten für den Spitzenplatz auf dem Browser-Markt. Der Mozilla- Browser ließ Konkurrenten wie den Internet Explorer von Microsoft weit hinter sich. Mit dem Erscheinen von Google Chrome kam frischer Wind in die Browser-Szene. Der Newcomer konnte viele Anhänger gewinnen – vor allem weil die Software von Google einfach schneller war. Neue Konzepte sorgten beim Surfen und bei der Ausführung immer komplexerer Webanwendungen für Spitzengeschwindigkeiten. Deswegen wechselten viele Nutzer zu Google Chrome. Um Firefox wieder für das moderne Web fit zu machen, entschloss sich Mozilla zu einer gründlichen Überarbeitung. Die Entwicklung der neuen Version begann bereits vor über einem Jahr. BROWSER MIT NEUER RENDER-ENGINE Unter dem Codenamen „Quantum Leap” arbeitet Mozilla seit Herbst 2016…

Presentator.io wurde im April 2017 veröffentlicht und befindet sich derzeit im fünften Release (Version 1.2). Die Software ist quelloffen unter BSD-3-Lizenz und mit einer gut dokumentierten REST-API ausgestattet. Vergleichsweise geringe Systemanforderungen (PHP, MySQL) machen es einfach, Presentator auf Herz, Nieren und die Eignung für den eigenen Workflow zu prüfen [presentator.io]. BENUTZUNG DER WEBOBERFLÄCHE Nach der Installation müssen Sie als ersten Schritt ein Benutzerkonto erstellen. Presentator hat im Wesentlichen zwei Benutzerrollen: Ein registrierter User ist berechtigt, Projekte und Screens anzulegen. Gäste dürfen, mit Kenntnis der URL und gegebenenfalls dem Passwort des Projektes, einzelne Screens kommentieren. Nach erfolgter Registrierung (und Klick auf den Bestätigungslink in der entweder erhaltenen oder unter /app/runtime/mail vorgefundenen Mail – siehe Installationsbeschreibung) werden Sie direkt auf das Dashboard weitergeleitet. Hier haben Sie eine Übersicht über all Ihre Projekte…

Früher war die Inhaltspflege in Content-Management-Systemen (CMS) noch sehr übersichtlich. In den meisten Fällen mussten zwei Felder für die Überschrift und den Fließtext ausreichen. Vielleicht kamen noch Tags/Stichwörter hinzu. Oder die Möglichkeit, ein Titelbild festzulegen. Das Grundprinzip ist heute noch in vielen CMS mehr oder weniger deutlich zu sehen, zum Beispiel bei Textpattern (Abb. 1). In den letzten Jahren wurde aber immer deutlicher, dass ein einzelnes Feld nicht mehr ausreicht, um benutzerfreundlich alle Inhalte abzubilden, die eine moderne Website braucht. Für komplexere Inhalte haben sich verschiedene Ansätze entwickelt – im Moment bewegen sich viele bekannte Systeme in Richtung einer Block-für-Block-Lösung. WYSIWYG-EDITOREN Klassischerweise werden die Textfelder für den Fließtext mit einem WYSIWYG-Editor (What You See Is What You Get) ausgestattet. Je nach Editor dürfen Autoren damit nicht nur Texte fetten, Links…

Drupal kennt keine fertigen Drag-and-Drop-Builder, um mal so eben eine Landing-Page zusammenzuklicken. Das liegt unter anderem daran, dass Drupal eigentlich kein Content-Management- System ist, sondern ein Framework, mit dem Entwickler ein CMS für ein Projekt erstellen können. Was sich wie ein Nachteil anhören mag, ist in Wahrheit ein Vorteil, denn nur so lassen sich sehr individuelle Projekte realisieren. Deshalb wird Drupal auch eher im Enterprise-Umfeld und weniger in der Blogging Community eingesetzt. Auch bei den Modulen UI-Patterns und Stacks muss ein Entwickler zuerst alles vorbereiten, bevor ein Endanwender Inhalt und Seiten erstellen kann. Belohnt wird er mit einem sehr flexiblen System für alle nur denkbaren Inhaltsstrukturen. INHALTSTYPEN Wenn es um Inhalte geht, dreht sich bei Drupal alles um sogenannte Inhaltstypen. Diese geben die Struktur von unterschiedlichen Inhalten vor. Eine Website…

Seit Jahrzehnten werden Webseiten mit den immer gleichen Bildformaten gebaut: JPEG, PNG und manchmal auch GIF. Gleichzeitig wissen wir, dass diese Formate selbst noch viel Optimierungspotenzial haben. Es gibt daneben auch ganz neue Bildformate, die eine weitaus bessere Performance bieten. Damit können Sie bei gleicher Qualität eine geringere Dateigröße erreichen. Nicht nur für die Performance der Website wären diese Eigenschaften ideal, sondern auch für die Kosten auf Nutzerseite – je geringer der Datenverbrauch, desto weniger Kosten entstehen. JPEG Das wohl bekannteste Bildformat ist JPEG bzw. JPG. Es wird dieses Jahr 25 Jahre alt und ist das am weitesten verbreitete, kompatibelste Format, das diverse Optimierungspotenziale bietet. Beim Speichern empfiehlt es sich, unbedingt ein paar Prinzipien zu beachten, um ein ideales Ergebnis zu erzielen: So sollten Sie bei den Qualitätseinstellungen niemals 100…

EINEN JOB, DER ZU MIR PASST. ADÄQUATE BEZAHLUNG. FÜR FESTE UND FREIE. DESIGNERDOCK ist die größte Personalvermittlung für die Kommunikationsbranche im deutschsprachigen Raum. Gesucht werden qualifizierte Front- und Backend-Programmierer, Interface- und Motiondesigner bis zu Interactive- oder Online AD sowie Digital Konzepter und Projektmanager. Unsere Kunden sind namhafte Agenturen und Unternehmen. Wir bieten eine kostenfreie Aufnahme in die Kartei. Für die Vermittlung von Freelancer-Jobs fällt eine Provision in Höhe von 10 Prozent an. Die Vermittlung in eine Festanstellung ist für den Kandidaten kostenfrei. Bewerbungsformular, Jobs und alle Informationen unter www.designerdock.com. Für Ihre Karriere – den passenden Job: www.designerdock.com/online oder mobile.designerdock.com. Wir freuen uns auf Ihre Bewerbung – gerne auch initiativ.…

NETZNEUTRALITÄT USA: Netzneutralität bedeutet, dass ein Internetanbieter alle Datenpakete gleich behandelt, unabhängig von Sender und Empfänger, dem Inhalt der Pakete und der Anwendung. Bei der Übertragung wird also keines der Pakete bevorzugt. Viele Betreiber von Telekommunikationsnetzen lehnen Netzneutralität ab und wollen Daten mit unterschiedlichen Qualitätsgarantien übertragen. Für höhere Geschwindigkeiten werden dann zusätzliche Kosten entstehen. In den USA will Ajit Pai, der Vorsitzende der US-Regulierungsbehörde FCC, die Netzneutralität abschaffen. Netzanbieter müssten dann lediglich transparent darlegen, welche Daten sie zu welchen Konditionen schneller übertragen. Am 14. Dezember soll abgestimmt werden. Es ist abzusehen, dass der Vorschlag durchkommt, denn im fünfköpfigen Gremium sitzen mit Pai drei Republikaner und zwei Demokraten. Kritiker befürchten das Ende des Internets, wie wir es kennen. [goo.gl/LkoaAA] WEBSTANDARDS/W3C MDN web docs: Für Entwickler ist das „Mozilla Developer Network”, kürzlich…

01 ONESTEP 2 Fans von alten Polaroid-Sofortbildkameras dürfen sich freuen: Ein Blick auf die Onestep 2 versetzt Sie zurück in die 80er- Jahre. Dahinter steckt The Impossible Project, das 2016 bereits die Sofortbildkamera Impossible I-1 produziert hat. Im Mai 2017 hat das Unternehmen die Markenrechte an Polaroid erworben und firmiert nun unter dem Namen „Polaroid Originals”. Die neue Kamera basiert auf Polaroids originaler OneStep aus dem Jahr 1977, wurde aber um ein paar moderne Features ergänzt: Sie hat einen Blitz, einen Selbstauslöser und lässt sich per USB aufladen. Die Akkulaufzeit soll bei bis zu 60 Tagen liegen. Die Linsen sind aus Polycarbonat und Acryl und bilden ein Fixfokus-Objektiv für Motive ab einer Entfernung von 60 Zentimetern. Die Brennweite beträgt 106 mm. Sie können die Onestep 2 aktuell in Schwarz oder…

Unter dem Oberbegriff der Web-Analyse – zum Teil auch Social Listening genannt – sammeln sich insgesamt fünf verschiedene Arbeitsfelder rund um die Vermessung und Umsetzung digitaler Kommunikation. Neben dem schon erwähnten Social-Media-Management, das sowohl das Arbeitsfeld Publishing (d.h. die Planung und Veröffentlichung von Inhalten) als auch das Engagement (d.h. die Bearbeitung der über Social Media eingehenden Anfragen) umfasst, wären da noch die gerne unterschätzten Web Analytics (d.h. die Analyse des Benutzerverhaltens auf der eigenen Website, z.B. über Google Analytics) sowie das vielfältige Arbeitsfeld des Social Media Monitoring zu nennen, bei dem Sie im gesamten Social Web alle Gespräche und Erwähnungen sammeln und analysieren können, die sich um einen bestimmten Begriff, ein Themenfeld oder eine Marke drehen. Mit dem fünften Arbeitsfeld Social Media Analytics ist die Vermessung und auch der Vergleich…

„The details are not the details. They make the product.” Der bekannte Designer und Architekt Charles Eames hatte sicherlich kein Webdesign im Kopf, als er damals diese berühmten Zeilen schrieb, aber sie treffen genauso auf Websites und andere digitale Produkte zu. Gestalterische Details haben im Webdesign viele Gesichter. Sie können Nutzerinnen dabei helfen, eine Benutzeroberfläche zu verstehen. Und sie können einer Gestaltung das gewisse Etwas verleihen. Oft lohnt es sich dabei, mit neuen CSS-Eigenschaften zu experimentieren, um sich von der Masse abzuheben. Ein gutes Beispiel dafür ist die Seite mit den Versionen der Designsoftware Sketch von Bohemian Coding [sketchapp.com]. Statt alle Neuerungen jeder Version in einer langen Liste anzuzeigen, blendet Bohemian Coding nur die drei ersten Punkte ein und zeigt alle weiteren erst auf Anforderung durch Klick auf den Link…

Für Fotografen ist Text auf Bildern sicherlich eines der schrecklichsten Dinge, die man ihren Werken antun kann. Doch in vielen sozialen Netzwerken kommen Zitate auf schönen Hintergrundfotos gut an. Viele Instagram-Accounts und Facebook-Seiten haben großen Zuspruch – auch wegen der Kombination aus ansprechenden Hintergrundbildern und schönen Schriften. Memes kommen ebenfalls selten ohne Text auf Bildern oder Gifs aus. Besonders deutlich wird der Nutzen von gestalteten Bildern auf Pinterest. Dort steht das Bild im Mittelpunkt und kann durch einen dahinter liegenden Link zu langfristigem Traffic aus dem Netzwerk führen. Vor allem in der mobilen App ist Text auf dem Bild sinnvoll, da dort die Bildunterschriften nicht angezeigt werden und das Bild für sich sprechen muss. Unterstützt wird dies zusätzlich durch den Trend des Handletterings. Besonders schön anmutende, Handschriftenähnelnde Schriftarten werden aktuell…

In seiner jährlichen „State of the Word”-Ansprache erklärte Matt Mullenweg, der Initiator von WordPress, im Dezember 2016 die Überarbeitung des bisherigen WordPress-Editors als die wesentliche Priorität der nächsten Entwicklungsschritte [goo.gl/G3kksq]. Dabei soll es vor allem um eine verbesserte Schreiberfahrung gehen. Neue Editoren, wie sie unter anderem bei Medium oder auch in Ghost eingesetzt werden, haben Standards gesetzt, denen man sich nicht entziehen möchte. Mit Gutenberg versuchen die Programmierer von WordPress wieder Anschluss an die Entwicklung zu finden. DAS PLUGIN Seit Mullenwegs Rede wird intensiv an „Gutenberg”, dem neuen Editor, gearbeitet, und es ist an der Zeit, einen Blick auf den bisherigen Stand zu werfen. Der Editor befindet sich derzeit in einer Betaphase und kann über das WordPress Repository heruntergeladen werden [goo.gl/9bBsdd]. So können Sie sich den neuen Editor schon einmal…

Die Web Content Accessibility Guidelines (WCAG) 2.0 sind die aktuellen Webstandards für barrierefreies Webdesign und wurden 2008 vom W3C veröffentlicht. Seit 2016 arbeitet die Accessibility Guidelines Working Group des W3C öffentlich an der Version 2.1, und der erste Entwurf wurde im Februar 2017 online gestellt [w3.org/TR/WCAG21]. Diese Version soll im Juni 2018 endgültig zu einem neuen Webstandard des W3C werden. Die WCAG 2.1 schließen einige Lücken in den WCAG 2.0, die die Zugänglichkeit insbesondere für Sehbehinderte, Lernbehinderte und mobile Nutzer mit Behinderungen betreffen. Das große Ziel der aktuellen Bemühungen um die Aktualisierungen sind aber WCAG 3.0, die die Anforderungen der Barrierefreiheit auf Dokumente und andere Umgebungen (z.B. Zahlungssysteme oder Navigationsgeräte) ausdehnen [goo.gl/tTVxD1]. Dieses große Update der Webstandards für Barrierefreiheit ist für Ende 2020 geplant [goo.gl/vkjTyn]. Die WCAG 3.0 werden dabei…

Was ist eigentlich so toll an Angular? Eine sehr interessante und zugleich nicht einfach zu beantwortende Frage. Prinzipiell ist Angular ein Frontend-Webapplikationsframework, das federführend von Google entwickelt wird. Das hilft bei der Beantwortung der Frage nicht wirklich weiter, gibt aber zumindest Aufschluss darüber, wohin die Reise geht. Am besten erklärt man die Funktionsweise von Angular anhand von Facebook. Nachdem sich ein Nutzer bei Facebook eingeloggt hat, wird einmal im Voraus alles geladen, was Facebook im Browser abbilden möchte. Alles bedeutet hierbei insbesondere: HTML-Templates, CSS und Java-Script, aber noch keine Daten. Danach findet im Browser kein Reload der Webseite mehr statt. Stattdessen werden Bereiche mit JavaScript ergänzt oder ersetzt. Das Design hierfür liegt in HTML bereits vor, der Browser redet nur noch mit einem Server, um neue Daten zu erhalten. Diese…

VIDEO The future of the browser. Lin Clark erklärt, wie Browser aktuell arbeiten und wie sie in Zukunft schneller werden sollen. Siehe den neuen Firefox Quantum. [goo.gl/WdQZPY] Das manipulierte Bild. Der Beitrag von 3sat zeigt, wie leicht sich Bilder und Videos fälschen lassen – und wie schwer es im Gegenzug ist, die Fakes zu erkennen. [goo.gl/VBuvqc] The most natural UI. Building voice-enabled experiences with Amazon Alexa: Andrea Muttoni demonstriert, wie Sie Amazon Alexa neue Skills beibringen. [goo.gl/A2eky9] Type with character(s) – reclaiming control over OpenType fonts. Yves Peters stellt neue Möglichkeiten für Typografen in Print und Web vor. [goo.gl/eqfQw3] We’re building a dystopia just to make people click on ads. In ihrem TED-Talk spricht die Soziologin Zeynep Tufekci über die Gefahren künstlicher Intelligenz. [goo.gl/8zkfEp] Nicolai Schwarz, Autoreninfos auf Seite 3…

Web-Baukästen sind fremdgehostete, interaktive und webbasierte Redaktionssysteme. Sinn und Zweck ist eine intuitiv zu bedienende Arbeitsumgebung, um technisch unerfahrenen Nutzern die einfache Möglichkeit zur Erstellung einer Website zu bieten. Da das Prinzip der Codegenerierung über einen standardisierten und automatisierten Prozess der WYSIWYG-Tools stattfindet, sind bei Code-Qualität oder gar Barrierefreiheit Kompromisse unausweichlich, zumal hier nicht ein singuläres Theme wie bei WordPress oder ein klassisches CSS-Framework als frei modifizierbare Grundlage zum Einsatz kommt. Jeder Anwender muss deshalb für sich entscheiden, ob er bereit ist, diesen Preis zugunsten der Flexibilität und Effizienz dieser Systeme zu zahlen. Internationaler Marktführer ist das aus Tel Aviv stammende System Wix [de.wix.com]. Die weitverbreitete Lösung im deutschsprachigen Raum ist der Jimdo-Baukasten aus Hamburg [jimdo.de]. Ein ambitioniertes Angebot bietet Squarespace [squarespace.com], daneben gibt es noch die Baukastensysteme von Webnode…

Wer gut erzählen kann, braucht sich um begeisterte Zuhörer keine Sorgen zu machen. Im Konferenzraum und an der Kaffeetheke, online wie offline, im Dialog und im Vortrag. In seinem Buch »Tell Me!« zeigt Ihnen Thomas Pyczak, wie Sie die Kraft von Storytelling für Ihren persönlichen Erfolg nutzen. Ihr Publikum lehnt sich zurück, ist gespannt, wie die Geschichte weitergeht, merkt sich die Fakten. Dies ist ein leicht gekürzter Auszug aus dem Buch. DIE 100-MILLIONEN-DOLLAR-WETTE – STORYS UND DATEN „Data Storytelling ist die essenzielle Fähigkeit, die jeder Datenwissenschaftler braucht”, schreibt das amerikanische Forbes-Magazin [goo.gl/AqCWeA]. „Storytelling rockt. Es ist eine mächtige Methode, um unsere Kunden dazu zu bringen, anders zu denken”, sagt Google [goo.gl/pQXTnx]. „Vielleicht sind Storys nur Daten mit Seele”, sagt die Autorin und Professorin Brené Brown [goo. gl/6Xd7Tu]. In den USA…

Seit über zehn Jahren arbeiten zahlreiche Agenturen mit dem Enterprise-Content-Management-System TYPO3 und haben Websites von Anwaltskanzleien bis hin zu großen Hotelkonzernen damit umgesetzt. Kunden zeigen sich in der Regel sehr zufrieden mit den Möglichkeiten, die sich damit umsetzen lassen. Während die Redakteure zeitgleich häufig stöhnen über die Komplexität und sich nach einer einfachen Redakteursoberfläche „wie in Wordpress” sehnen. Technisch einigermaßen versierten Nutzern gefällt das modulare System, mit dem im Backend eine Art „Baukasten” den Kundenbedürfnissen entsprechend angepasst wird. Aber was die Community bestimmt schon seit zehn Jahren anprangert, ist, dass es ein Frontend Editing, das diesen Namen verdient, nicht gibt bzw. gab. Die frühen Versionen von TYPO3 boten bereits ein rudimentäres Frontend Editing. Im Wesentlichen wurden dafür im Frontend kleine Stift-Icons verteilt, und bei Klick öffnete sich ein Teil des…

Üblicherweise wird eine Spezifikation des World Wide Web Consortium (W3C) zunächst als „First Public Working Draft” veröffentlicht, daraus wird dann ein „Working Draft”, eine „Candidate Recommendation”, eine „Proposed Recommendation” und schließlich eine „W3C Recommendation” [goo.gl/6SidVx]. Während des Prozesses können einzelne Gruppen einen Zwischenstand als „Editor’s Draft” zur Diskussion veröffentlichen. Diese Drafts haben allerdings keinen offiziellen Status. Ideen daraus können also auch schnell wieder verschwinden. In der Praxis sagt der Stand eines Dokuments nicht unbedingt etwas darüber aus, ob Sie die Technik verwenden können. So können Sie Flexbox etwa schon seit ein, zwei Jahren setzen, das „CSS Flexible Box Layout Module Level 1” befindet sich aber noch auf dem Stand einer „Candidate Recommendation”. Beim W3C finden Sie eine Liste mit Links zum aktuellen Stand aller CSS-Module [w3.org/ TR/#tr_CSS]. Darüber hinaus gibt…

Offene Netzwerke treffen immer wieder einen Nerv und bieten kurzfristig sogar echte Alternativen zu den großen Konkurrenten. 2014 bot Ello.co ein neues Zuhause für die LGBT-(„Lesbian, Gay, Bisexual und Transgender”-)Community, als Facebook seine Klarnamen-Pflicht durchsetzte. Viele Drag-Queens wurden von dem Netzwerk-Giganten genötigt, ihre echten Namen zu benutzen oder verloren direkt ihre Accounts [goo.gl/6HQZW8]. Dieses Jahr verhalf Twitter durch die Umstellung seiner „Replys” dem Netzwerk Mastodon zu regelrechten Besucherfluten [goo.gl/ MxFw6z]. Aber nicht nur direkte Aktionen von Facebook & Co. sorgen für den Erfolg von offenen und dezentralen Netzwerken – die Indie-Microblogging-Plattform Micro. blog ließ sich Anfang des Jahres von mehr als 3.000 Unterstützern über Kickstarter mit über 85.000 US-Dollar finanzieren, das Projekt Diaspora sammelte 2010 über 200.000 US-Dollar, und App.net erhielt 2012 stolze 500.000 US-Dollar. Das Interesse an fairen Alternativen…