c't 19/2018
S. 184
Web-Tipps
Stadtpläne, Web-Typografie, Skizzen-KI, Entwickler-Cheat-Sheets

Der Fingerabdruck einer Stadt

mourner.github.io/road-orientation-map

Das Straßennetz einer Stadt ist wie ein Fingerabdruck. In New York bildet es ein regelmäßiges Gitter, in Rom verlaufen die Straßen kreuz und quer in alle Richtungen. Der Mapbox-Mitarbeiter Vladimir Agafonkin hat eine interaktive Visualisierung dieses Fingerabdrucks programmiert. Einfach in irgendeine Stadt dieser Welt hineinzoomen und es erscheint ein rundes Histogramm, das die Anzahl der Straßenkilometer in der jeweiligen Richtung visualisiert.

So wird Geschichtliches augenfällig, zum Beispiel, dass sich das Straßennetz des Stadtkerns von Melbourne am Yarra River orientiert, der Rest der Stadt aber ein um 8 Grad gegenüber Norden geneigtes Gitter bildet – was dem magnetischen Nordpol bei Gründung der Stadt entspricht. Wer sich für die Technik interessiert, findet auf der Karte auch einen Link zu dem nur circa hundert Zeilen langen Quellcode der Visualisierung. (Harald Bögeholz/jo@ct.de)

Für Font-Fummler

betterwebtype.com

Das Thema Typografie wird beim Webdesign oftmals stiefmütterlich behandelt: Man ist froh, einen einigermaßen funktionierenden Aufbau der Seite zustande gebracht zu haben, der auf allen Browsern funktioniert – was soll man da noch mit Typen und Schriftgrößen, Laufweiten und Zeilenabständen herumexperimentieren?

Dabei kann schon eine individuelle Schrift der Site ein unverwechselbares Gesicht geben. Beim Thema Typografie lauern allerdings auch Stolperfallen. Wer mehr über Web-Typografie lernen und den Look seiner Site verbessern möchte, dem sei ein Besuch auf der Website Better Web Typography for a Better Web des Designers Matej Latin empfohlen. Sie hält einen kostenlosen E-Mail-Kurs sowie Links zu vielen weiteren Hilfsmitteln bereit. (jo@ct.de)

Schnell hingekritzelt

quickdraw.withgoogle.com

github.com/googlecreativelab/quickdraw-dataset

www.kapwing.com/cartoonify

github.com/danmacnish/cartoonify

Erinnern Sie sich noch an Googles Quick, Draw!, das wir in Heft 1/2017 vorgestellt haben? Dabei ging es darum, schnell eine Skizze zu zeichnen, die Googles KI dann erkennen sollte. Daraus ist mittlerweile ein 50 Millionen Skizzen umfassender Datensatz entstanden. Google stellt ihn auf GitHub für die Allgemeinheit bereit.

Die Web-App Cartoonify beispielsweise nutzt ihn, um Skizzen zu generieren: Man lädt ein Foto hoch, heraus kommt eine Strichzeichnung. Cartoonify ist Teil des Bastelprojekts Draw This des Bastlers Dan Macnish: Wer mag, kann sich mit einem Raspberry Pi, einer Raspi-Kamera und einem Mini-Thermodrucker eine Sofortbildkamera bauen, die nachkritzelt und ausdruckt, was sie aufnimmt. Eine Bauanleitung sowie die erforderliche Software hat Macnish ebenfalls auf GitHub bereitgestellt. (jo@ct.de)

Entwicklers Spickzettel

devhints.io

overapi.com

Kein Entwickler, kein Administrator kann bei der Masse an Tools, die bei der täglichen Arbeit zum Einsatz kommt, alle Befehle und Tricks immer parat haben. Gut, dass es Websites wie Devhints gibt, wo sich im Falle eines Falles schnell nachschlagen lässt, wie man etwa ein Makefile aufbaut oder unter Ruby on Rails ein Formular definiert. Der philippinische Entwickler Rico Sta. Cruz unterhält die Site.

Findet man dort ein gewünschtes Cheat Sheet nicht, lohnt ein Blick auf OverAPI.com. Dort haben die Betreiber wie bei Devhints eine Reihe von Cheat Sheets selbst zusammengestellt, teilweise verlinken sie auch Spickzettel auf anderen Sites. (jo@ct.de)