Linkgelaufen

Eine nachträgliche Taktikbesprechung für die brasilianische Mannschaft liefert Anatomy of a drubbing: How and why Brazil were annihilated by Germany. In Wort und Bild wird zusammengefasst festgestellt: die Brasilianer haben einfach nicht so gut scheiße gespielt. Via WhoYouWantToFollow Thomas aka. Bieleburger. Dumm gelaufen [für] die Brasilianer.

Auch nicht so gut gelaufen ist seinerzeit die Kickstarter-Kampagne für einem USB-ID-Key. D.h. die Kampagne war noch super, nur alles danach ein furchterregendes Beispiel für Missmanagement: Kickstarter project spent $3.5M to finish a working prototype—and ended in disaster.

Delivery of the final gadget was promised by September 2013. Yet over the next 18 months, Arkami and its product became a case study for mismanagement. Only a small number of myIDkeys have actually shipped, and numerous backers who received one complained about failing buttons and freezing displays. In the end, all $3.5 million was spent without much to show for it.

Besser läuft es hier: Pinboard turns five, seit fünf Jahren also nutze ich schon Maciej Ceglowskis unsocial Bookmarkingservice. Das ist sicherlich ein Grund zum Feiern, denn Maciej ist ein supersympathischer Typ mit den richtigen Ideen. Herzlichen Glückwunsch.

The Internet is strewn with the corpses (or in some cases, zombies) of sites that once promised to save your links forever. As people keep discovering, building a bookmarking site is easy, but making a business of bookmarking is hard. Like one of those leathery, spiny plants that is able to thrive in the desert where everything else dies, I have tried to find ways to adapt to this hostile business environment. And I have feasted on the flesh of my rivals!

Und gut laufen wird hoffentlich das neue Hamburg-Journal Elbsalon.de, ein Journal mit Anregungen, Nachrichten, Meinungen und Gastbeiträgen zu Leben, Menschen, Kultur und Genuss in Hamburg und hinterm Deich.

ELBSALON.de ist ein Ort für Heiterkeit, Leichtigkeit, Intelligenz, Vielfalt und Liebe. Ein Ort für positive und amüsante Konversation in angenehmer und entspannter Atmosphäre. Wir wollen die Salonkultur im neuen Gewand an der Elbe wieder beleben.

Es wird soweit ich das überblicken kann, hauptsächlich von Frauen gemacht, was ja bei derzeitigem Diskussionsstand einer Sensation gleichkommt, mindestens doch aber erwähnenswert ist. Mit dabei ist allerdings auch der eine oder andere Mann, bspw. Cem Basman, über den ich auf Elbsalon gestossen bin.

Linkvektoren

Eine immer wieder kehrende Diskussion bei uns dreht sich um Style Guides. Jeder will sie, aber niemand hat Zeit, einen zu erstellen. Hat irgendwie den gleichen Stellenwert wie Qualitätssicherung. Zum Glück gibt es andere, die die Arbeit für einen erledigen, oder zumindest die Vorarbeit. Brett Jankord hat ein Styleguide Boilerplate gebaut und auf Github veröffentlicht. Kann man nun forken und nach seinen Anforderungen anpassen. Die Vorarbeit zu diesem Link hat Jens Grochtdreis geleistet.

Sven MitDemIchUnbedingtNochEssenGehenMuss Wolfermann hat so ziemlich alles niedergeschrieben, was man zu SVG Sprites vs. Icon-Fonts wissen muss. Chris Coyier hatte bei der Beyond Tellerrand dazu bei mir schon offene Türen eingerannt.

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; margin-bottom:20px;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Hier ein Prototyp für responsive Ads, obwohl der vorgeführte Prototyp den Widerwillen der Ad-Industrie, die Zeichen der Zeit zu erkennen und die Fakten anzuerkennen, völlig ausser Acht lässt. Allerdings auch den Wunsch, doch wenigstens einen Teil der bis jetzt entwickelten Werbeformate (mit angenommenen Erfolg) in die responsive Welt zu retten. Dummerweise ist in D erfolgreichste Werbemittel eine den Content mit fester Pixelbreite umschließende Grabplatte, antiresponsiv sozusagen. Aber wir haben ja noch jede Menge Zeit, uns Gedanken über derlei Dinge zu machen. /via

Kollege Ron hat aus seinem Jahrzehnte zurückreichenden Erfahrungsschatz einen Artikel von 1999 ausgegraben und über unser Slack geshared: How to Report Bugs Effectively. Schönste Stelle:

Give the programmer some credit for basic intelligence: if the program really didn’t work at all, they would probably have noticed.

Präsentationen mit reveal.js

Für meinen letzten Vortrag, habe ich mal Keynote links liegen lassen und mich an reveal.js herangewagt. Im Großen und Ganzen wird damit aus einer Präsentation eine Website. Darin eingeschlossen sind allerdings beinahe alle Funktionen, die man auch von einer Präsentationssoftware kennt, wie Übersichtsmodus, Speakernotes mit Vorschau und Uhr, PDF-Export, Übergangseffekte. Und reveal.js kann auch noch ein paar Dinge, die mein Keynote nicht hinbekommt, beispielsweise einen parallax scrollenden Hintergrund, Markdown-Support oder Themenstacks. Mit slide.es gibt es sogar einen Onlineeditor für den HTML-Unkundigen.

Installation

Die Installation ist in zwei Varianten möglich. Will man nur schnell eine Präse ohne Zusatzfunktionen bauen, kann man dieses Release von reveal.js herunterladen, die enthaltene index.html editieren und diese dann im Browser öffnen. Funktioniert sogar ohne Webserver.

Mehr Möglichkeiten hat man allerdings, wenn man sich die Sourcen von reveal.js per Github auscheckt und die Node-Module installiert. Via grunt serve bekommt man dann einen lokalen Webserver mitgeliefert, der einem einige interessante Zusatzfunktionen, beispielsweise die Speakernotes, zur Verfügung stellt.

Demopräsentation von reveal.js:

Folien anlegen

reveal.js kommt mit einem recht anschaulichen Default-CSS daher (kann man hier in der reveal.js-Demo sehr schön sehen), so dass man im Grunde gleich loslegen kann. Um Folien einzufügen, kann man bspw. die vorhandene index.html öffnen und das nötigr Code-Gerüst herstellen. Minimal sieht das so aus:

<div class="slides">
    <section>
        <!-- content slide 1 -->
    </section>
    <section>
        <section>
            <!-- content slide 2.1 -->
        </section>
        <section>
            <!-- content slide 2.2 -->
        </section>
    </section>
</div>

Eine Folie entspricht also einem section-Element innerhalb des div mit der Klasse slides. Eine der Stärken von reveal.js sieht man hier auch schon: es gibt nicht nur eine Inhaltsebene, sondern zwei. sections die direkte Kinder von slides sind, werden horizontal nebeneinander dargestellt, Kindelemente von sections werden als Stack untereinander dargestellt, das erste ist dabei auf einer Höhe mit den Umliegenden. Nun kann man nicht nur links und rechts, sondern zeitweise auch von oben nach unten durch die Slides gehen. Tipp: mit den Pfeiltasten kann man frei durch die Slides navigieren, will man sich linear durch das Dokument sliden, geht das mit space bzw. SHIFT-space.

So kann man die Slides einzeln anlegen. Wer kein eigenes HTML oder Markdown schreiben will, kann aber auch den Online-Editor http://slid.es/ nutzen, der reveal.js Präsentationen produzieren und auch exportieren kann. Zum ersten Ausprobieren eine durchaus sinnvolle Einrichtung.

HTML und/oder Markdown

Eine Gesetzmäßigkeit kann man für reveal.js festhalten: alles was als Folie angezeigt werden soll, muss in eine section. Hier kann man HTML eintragen wie man möchte. Die wichtigsten Elemente sind in den CSS-Themes bereits brauchbar gelayoutet, also h1h6, p, ul, ol und so fort kann man direkt nutzen.

Ich nutze allerdings auch sehr gerne Markdown. Kann reveal.js natürlich auch, man kann es sozusagen inline eintragen.

<div class="slides">
    <section data-markdown>
        <script type="text/template">
            ## Page title

            A paragraph with some text and a [link](http://hakim.se).
        </script>
        <aside class="notes" data-markdown>
            - talk about page titles
            - anecdote about paragraphs
        </aside>
    </section>
</div>

Wie man hier auch sieht, können Speakernotes mit eingebaut werden, als <aside class="notes">.

Die Frage ist, ob man eine der beiden Optionen eigentlich möchte. Es ist natürlich für einen Webdev das Naheliegendste, seine Slides in HTML zu bauen. Übersichtlich ist das allerdings nicht, jedenfalls nicht während man noch am Inhalt schreibt. Das Inline-Markdown ist gleichsam kompliziert und durch die zusätzlichen <script type="text/template"></script> noch ein wenig mehr bloated.

Die beste Lösung ist also, man packt das Markdown in eine externe Datei. Dies ist letztendlich die beste Option für die Markdownliebhaber, da hier dann der Text aller Folien fein getrennt vom Anzeigesystem in einem Textdokument liegen.

<div class="slides">
    <section data-markdown="example.md"  
        data-separator="^---"  
        data-vertical="^***"  
        data-notes="^Note:"  
        data-charset="utf-8">
    </section>
</div>

Man kann Text zum Trennen der Folien und zum Auszeichnen von Notes angeben. Das passende Markdown würde dann so aussehen:

# Folie 1

Der Text auf Folie 1.

---

# Folie 2

Der Text auf Folie 2.

Note: Notiz auf Folie 2

***

# 1. Unterfolie der 2. Folie

---

# Folie 3

Tipp: Als Trenner zwischen den horizontalen Folien eignet sich meiner Meinung nach die <hr> wesentlich besser, als die standardmäßig verwendeten Zeilenvorschüben. Da man in Markdown --- und *** als Linien benutzen kann, lassen sie sich gut als Trenner nutzen.

Fragmente

Einzelne Elemente können als Fragmente nacheinander innerhalb einer Folie angezeigt werden. Dabei kann die Reihenfolge der Elemente auch noch frei gewählt werden. Eine Liste, bei der zunächst Punkt 2 und dann Punkt 1 angezeigt wird sieht dann so aus:

<ul>
    <li class="fragment" data-fragment-index="2">Appears second</li>
    <li class="fragment" data-fragment-index="1">Appears first</li>
</ul>

oder in Markdown (hier werden spezielle Auszeichungen als Kommentare hinzugefügt):

- Item 1 <!-- .element: class="fragment" data-fragment-index="2" -->
- Item 2 <!-- .element: class="fragment" data-fragment-index="1" -->

Zuätzlich gibt es eine Liste von Effekten, die sich auf die Fragment-Darstellung anwenden lassen, u.a. grow, shrink, roll-in, fade-out usw. Diese werden einfach als Klassenname angefügt:

<ul>
    <li class="fragment roll-in" data-fragment-index="2">Appears second</li>
    <li class="fragment grow" data-fragment-index="1">Appears first</li>
</ul>

Hintergründe und Übergangseffekte

Jede Folie kann ihre eigene Hintergrundfarbe und/oder win Hintergrundbild haben. Dieser werden als data-Attribute an die Slide geschrieben. Den Übergangseffekt für die Folien kann man global festlegen, es besteht aber die Möglichkeit, per Folie diesen Wert zu überschreiben.

Attribute die an eine einzelne Slide festgemacht werden, schreibt man im Markdown so:

<!-- .slide: data-background="#ff0000" data-transition="linear" -->
# Folie 2

Der Text auf Folie 2.

Tastentricks

Zwei Quickwins die reveal.js mitbringt sind noch das leichte Umschalten in den Fullscreenmodus. Während der Präsentation einfach Taste f drücken, schon ist man im Präsentationsmodus des Browsers. Mit der ESC-Taste verlässt man diesen Modus wieder. Ist man nicht im Fullscreen führt die ESC-Taste übrigens in den sogenannten Overviewmodus, mit der man eine Draufsicht auf seine komplette Präsentation bekommt. Eine gute Ansicht um den Zuhörer am Beginn auf die kommenden Themen vorzubereiten, beispielsweise. Hierin kann man wieder navigieren. Den Overviewmodus kann man auch mit der Taste o aktivieren.

Wie schon erwähnt, mit den Pfeiltasten kann man sich durch die Slides navigieren, Space und SHIFT-Space gehen linear vorwärts und rückwärts. Man kann noch weitere Tasten dafür festlegen, standardmäßig machen das noch n für next und p für previous.

Mit den Tasten b oder . wird der Bildschirm schwarz geschaltet, beispielsweise, wenn man in einem anderen Fenster außerhalb der Präse etwas zeigen möchte, oder externen Filminhalt hat o.ä.

Speakernotes

Ich hatte nun schon ein paar Mal die Speakernotes angesprochen. Die werden, jedenfalls, wenn man die Node-Version laufen lässt (mit grunt serve, s.o.), direkt mitgeliefert. Einfach während die Präse im Bild ist, die Taste s drücken, und in einem neuen Browserfenster poppen die ggf. eingetragenen Notizen auf. Dazu gibt es ein Bild der aktuell angezeigten Folie und der darauffolgenden, sowie einen Timer. Alles was man so braucht, um eine professionelle Präse abzuhalten.

Screenshot

Ich hatte bei meinem Vortrag leider mit den Speakernotes ein paar technische Probleme, u.a. mit Links in den Slides bzw. Notizen. Links stellen ein kleines Problem für reveal.js dar, dazu gleich noch mehr, jedenfalls schienen die Notes den Kontakt zur Präse verloren zu haben, beides lief auseinander. So leicht lässt sich das für mich nicht reproduzieren, weil man während einer Präse leicht in Panik gerät, geht mir jedenfalls so. In einer späteren Präsentation beim Holtzbrinck Technology Day 2014 hat es aber problemlos geklappt.

Konfiguration

Über den Konfigurationsabschnitt in der HTML-Datei der Präsentation kann man nochmal weitere Funktionen freischalten und beeinflussen.

Reveal.initialize({
    controls: true, // Navigationspfeile zeigen
    progress: true, // Fortschrittsbalken
    center: true, // Inhalt zentrieren

    theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
    transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none

    // Parallax scrolling
    parallaxBackgroundImage: 'img/wood.jpg',
    parallaxBackgroundSize: '2880px 1920px',

Die Liste der Optionen, mit denen man Standardverhalten vorgeben kann ist lang. Vom Anzeigen einzelner Option, Standardwerte für Effekte, Einrichten eines parallaxen Hintergrundbildes oder geänderter Tastenkombinationen ist einiges möglich.

Probleme

Probleme gibt es auch, die betreffen aber eher alle HTML-Präsentationen. Bei eingeschaltetem Fullscreenmodus bekommt man schnell Probleme, wenn man versucht Links innerhalb der Vortragsfolien aufzurufen, was ja erstmal nahe liegt. Wenn man einen Link in einem neuen Tab oder neuem Fenster öffnet, fliegt man aus dem Fullscreenmodus natürlich wieder raus. Das ist zwar an sich noch keine dramatisches Problem, nur sollte man den Umgang damit vielleicht vorher einüben, vor allem in der Situation mit zwei Bildschirmen, bei denen man sich auf die Notizen vor sich konzentriert, erfordert das teilweise etwas Übung (den Shortcut für das Wechseln zwischen zwei Fenstern einer Applikation muss beim Mac auch erstmal an die richtige Stelle legen). Einfacher wird es, wenn man einfach einen komplett anderen Browser hernimmt und alle Links darin sozusagen vorbereitet. Dorthin kann man dann direkt springen, wobei die Präse im Hintergrund im Fullscreen offen bleibt. Das hat mir bisher am besten gefallen.

Und dann noch

Das soll es für einen Einsteigerartikel aber auch gewesen sein. Es soll aber nicht unerwähnt bleiben, dass man sich natürlich® noch eigene Themes für reveal.js anlegen kann, man jede Menge Erweiterungsmöglichkeiten hat, sich per Javascript an alle möglichen Events zu hängen, überhaupt hat reveal.js ein ausgewachsenes API. Es bringt ein Theme für Codebeispiele mit, kann Bild stretchen, man kann prima Videos einbetten, der PDF-Export funktioniert über den Druckendialog. Und über Multiplexing kann man seine Präsentation auch direkt auf den Smartphones und Tablets der Besucher anzeigen. Ich habe jetzt selbst noch nicht alles ausprobiert.

Artikelbild: Bestimmte Rechte vorbehalten von Photogestion

Fußballberichterstattung in den USA

Die Fußballmannschaft der USA hat sich bis zu ihrem Ausscheiden aus dem Tunier viele Freunde gemacht, vor allem wohl auch in den USA. Dort gehört Soccer nun also zu den berichtenswerten Sportarten. Das ist manchmal ganz interessant, denn die amerikanische Sportberichterstattung ist augenscheinlich von anderen Disziplinen geprägt.

Die Partie Brasilien gegen Kolumbien hat es ihnen dabei besonders angetan. Es wird beispielsweise bei der New York Times, bei Forbes und sogar bei Slate ausführlichst besprochen. In der Hauptsache geht es dabei um die Frage, wie es zu dem Foul an Neymar kam und wer die Verantwortung für einen derartigen Spielverlauf zu tragen hat.

Diese IMHO auffällige Zentrierung um dieses Thema scheint mir eine Folge einerseits des Vorurteils zu sein, Fußball wäre (im Vergleich zu American Football) ein körperloses Spiel (wie Basketball). Andererseits zeigt sich hier die Tradition des amerikanischen Sportjournalismus und dem dortigen Duktus alles sehr genau zu analysieren, auch noch in der Nachschau. Was bei uns abgehalfterte Sportmoderatoren in verschwurbelten Nebensätzen abzuhandeln versuchen, füllt in den USA mitunter ganze Seiten und das vielleicht nicht mal zu Unrecht. Der deutsche Sportreporter versucht derweil aus Peer Mertesacker mit den immer gleichen Fragen, die immer gleichen Antworten herauszupressen bis es aufs Maul gibt. Alle drei Artikel sind sowohl interessant, fundiert und vom Blick her so erfrischend neutral, das fehlt der deutschen Natinalmannschaftshofberichterstattung leider mitunter. Falls bis heute abend noch Zeit ist, schnell noch lesen.

Artikelbild: Bestimmte Rechte vorbehalten von Erica Ramalho/Portal da Copa/Março de 2013

Klare Worte

gauck

Im Bild: Bundespräsident Gauck in Rage

Nun, nachdem man den ersten US-Spion in den Reihen des BND enttarnt hat: große Aufregung. Die Medienberichte überschlagen sich und die Bundesregierung…

Ja, was ist denn eigentlich mit der Bundesregierung? Ich stelle mir vor, wie Angela Merkel ihr abgehörtes Handy nimmt, und ohne zu wählen einfach direkt reinspricht: »Also Du Barrack, das geht mir langsam etwas, also ein wenig zu weit.« Helle Aufregung also in Berlin, wenn man bedenkt, das Mutter Merkel normalerweise einen Ruhepuls wie Jan Ulrich zu seinen besten Zeiten hat.

Da ergreift der Bundespräsident das Wort und empört sich. Was er sagt geht ungefähr so: also wenn das alles wahr ist, dann spielen die Amerikaner mit unserer Freundschaft. Und das müsse man denen dann auch mal unmissverständlich mitteilen. Ein deutliches Schweigen.

Zur selben Zeit veröffentlicht die Washington Post Daten von Überwachungen der NSA. Daten, die Edward Snowden laut Aussage der NSA gar nicht haben könne und doch hat, und die zeigen, dass in 9 von 10 Fällen Unschuldige überwacht werden, deren Daten aber fleissig gespeichert werden. Nun gut, das ist nicht Merkels Handy. Für diesen Teil des NSA-Skandals hat sich die Bundesregierung auf Stillschweigen geeinigt.

In Sachen BND-Affäre jedoch zieht man hingegen richtig vom Leder. Also vom Leder ziehen heisst in disem Falle, dass sich Bundeskanzlerin Merkel beunruhigt zeigt. Oder Aussenminister Steinmeier, der völlig, komplett und unumkehrbar ausrastet: „Sollten sich die Verdachtsmomente bestätigen, ist das auch politisch ein Vorgang, bei dem man nicht einfach zur Tagesordnung übergehen kann”. Oder dass Innenminister Thomas de Maizière überlegt laut in der „Bild“ überlegt, nun auch die USA vom BND überwachen zu lassen.

Das Alles wird sicherlich seinerseits für Aufregeung in den USA sorgen. Fragen wir einmal Hillary Clinton:

SPIEGEL: Hat Angela Merkel nicht eine Entschuldigung verdient?
Clinton: Unser Präsident hat mit ihr mehrere Male gesprochen, soweit ich weiß.
SPIEGEL: Aber er hat sich nicht öffentlich entschuldigt.
Clinton: Ich bin zwar nicht mehr in der Regierung, aber nun denn: Es tut mir leid.

Oder eben nicht. Hat Affäre eigentlich irgendetwas mit Affen zu tun?

Artikelbild: Bestimmte Rechte vorbehalten von Tobias Kleinschmidt

Hamburger… considered harmful

Irgendwie seltsam, aber schon der Titel dieses Artikels ist doppeldeutig und damit nur schwierig zu verstehen. Die Hamburger haben ein Problem? Ganz bestimmt haben sie das, aber darum geht es hier nicht. Es geht vielmehr um das kleine Icon auf vielen mobilen immer mehr Webseiten, das man anklicken muss, um zu einen Menü zu gelangen.

Letztes Jahr noch der hice shice, wird es heute heiss diskutiert. Oft geht die Diskussion jedoch am Thema vorbei, zeigt Paddi McDonnel in seinem Artikel How to solve the hamburger icon problem ganz hervorragend. Die Frage, ob die Nutzer das Icon verstehen, oder ob da nun besser „Menü” dranstünde, ist gar nicht so entscheidend. Es geht um etwas ganz anderes.

Die Herkunft der drei Balken ☰, das chinesische Zeichen für Himmel, ist wohl in Apps für Smartphones zu suchen. Dort verdeckt es zumeist ein Menü mit zusätzlichen Optionen, bspw. Einstellungen, Wechsel des Anzeigemodus und so fort. Im Web, oft auf mobilen Webseiten, aber auch nicht nur dort, wird es verwendet um die Navigation zu verstecken. Die Navigation! Meine Damen und Herren, was macht die Navigation auf einer Website? Richtig, sie zeigt an „wo man gerade ist” und wohin man von dort aus gehen kann, oder soll. Wie erfüllt unser kleiner Hamburger diese Aufgabe? Gar nicht!

Eine App konzentriert sich zumeist auf eine spezielle Aufgabe, die sie idealerweise auf einem Bildschirm erledigt, da braucht es selten eine Navigation. Das ist auf den meisten Webseiten auf denen der Hamburger eingesetzt wird grundsätzlich anders und deswegen schlicht ein Fehler. Eigentlich ist es schon egal, ob ein User es nun gar nicht als Menü erkennt, oder einfach intuitiv nicht klickt—don’t make me think!—, weil es der Klick zu viel ist. Man lässt den Nutzer in beiden Fällen in einer Sackgasse stehen.

Dabei löst der Hamburger natürlich auch ein Problem. Nämlich, dass die langen Listen von Links, die viele Webseiten Navigation nennen, zu viel Platz wegnehmen. Allerdings müsste hier die Lösung sein, an der Information Architektur zu arbeiten, dem mobile first Gedanken folgend für die komplette Website.

Facebook’s app famously swapped their hamburger icon for a tab bar, and as a result saw improved conversions. But Facebook have done something far more significant than swap menu designs. Recently they’ve released their Messenger app, and the big deal about that is that they already had a perfectly functional and popular app that they could have integrated the messaging with. Facebook have compartmentalized their functions, by focusing each app’s role they’ve arrived at two simple apps, instead of one complex one. (Paddi McDonnel)

Was hier bei einer App funktioniert hat, gilt wohl auch für jede Website: unser Navigationsproblem im mobile Web lösen wir nicht mit dem Hamburger, sondern in dem wir bereit sind, unsere Inhalte zu fokussieren. Nun aber nicht gleich für jede Sektion eine eigene App planen, sondern einfach mal das Menü entschlacken.

Artikelbild: Bestimmte Rechte vorbehalten von pointnshoot.