Skip to content

Datenblumen - Visualisierung von Webseiten, inklusive externes JavaScript

Seit diesem Jahr ist Wired Deutschland als monatliche Zeitschrift für den "gemeinen" Nerd verfügbar. In der aktuellen Printausgabe wurden sogenannte Datenblumen abgedruckt.

Dabei handelt es sich um Visualisierungen von Webseiten, welche verdeutlichen sollen, wie viel Teile einer Webseite aus Inhalten (Bilder, HTML) oder aus Skripten (JavaScript, CSS) bestehen. Letztere dienen meist zur Gestaltung der Webseite in Form von CSS, aber auch als Codeschnipsel für Social Media Buttons von Facebook und Co.

Datenblume

Wired hat in Zusammenarbeit mit OpenDataCity einen Dienst online gestellt, der es ermöglicht solche Datenblumen für jede Webseite zu erstellen. Das Ergebnis ist durchaus interessant, gerade in Betracht auf die Vielfältigkeit der Blüten, denn hier lässt sich gut erkennen, wie viele externe Skripte auf der jeweiligen Seite eingebunden sind.

Datenblumen_caschy

Der reine HTML Inhalt wird auf den Grafiken grün dargestellt, Skripte in rot und Styleinformationen in einem Orangeton. Die zwei Beispiele zeigen, dass meistens Bild- und Javascript Dateien für den Großteil eines Seitencontents verantwortlich sind. Reines HTML tritt nur sporadisch auf.

Eigene Datenblumen gestalten

Tschüss Eclipse - Hallo Android Studio 1.0 - Installation unter Windows und Ubuntu

Wie dem Android Developers Blog zu entnehmen ist, gilt das Android Studio 1.0 nun als offizielle Entwicklungsumgebung für Android Geräte. Dem schnellen App programmieren steht somit nicht mehr viel im Wege.

android-studio

Installation Windows

Die Installation ist unter Windows denkbar einfach, es wird lediglich ein Java SDK verlangt, welches bei der Installation angegeben werden muss.

java-android

Die Java Version muss mindestens v7 entsprechen, auch sollte man dem Entwicklungswerkzeug genügend Hauptspeicher zusprechen (empfohlen sind 2GB), damit der Android Emulator flüssig läuft.

Download Android Studio

Installation Android Studio 1.0 Ubuntu

Für Ubuntu gibt es ein Repository, welches die Installation der aktuellsten Version bereitstellt.

sudo apt-add-repository ppa:paolorotolo/android-studio

sudo apt-get update

sudo apt-get install android-studio

Unter Linux wird für Android Studio statt OpenJDK, die Version von Oracle empfohlen. Angeblich wegen der Performance. Ob dem so ist, kann ich hier nicht sagen. Installieren lässt sich Oracle JDK bei Bedarf wie folgt:

sudo add-apt-repository ppa:webupd8team/java

sudo apt-get update

sudo apt-get install oracle-java7-installer

Einen guten Einstieg in die Funktionen und die Programmierung, bieten die von Google bereitgestellten Samples.

Spielerei zum Wochenende - Flüssigkeitsssimulation im Browser mit WebGL

Dank WebGL können im Browser viele tolle Sachen realisiert werden. Unter www.chromeexperiments.com lassen sich viele Beispiele dazu finden, welche im aktuellen Chrome oder Firefox lauffähig sind. 

Eines davon ist Fluid & Particles in WebGL von George Corney. Dabei handelt es sich um ein Partikelflusssimulation geschrieben in Haxe. Die Partikel werden nach Größe und Geschwindigkeit coloriert.

Durch einfaches Klicken und Ziehen erzielt ihr die gewünschten Effekte. Hier gehts zur Demo.

WebGL-Fluid

Natürlich gibt es auf der Chrome WebGL Seite noch viele andere tolle Beispiele, dieses ist nur eines von vielen.

Node.js - Sammlung aus über 300 Paketen, Modulen und Quellen zur Serverplattform

Die Serverplattform Node.js dürfte weitgehend bekannt sein. Auf ITrig hatte ich schon Artikel über die Lernplattform nodeschool.io oder npmgraph zu diesem Thema veröffentlicht. 

Weniger bekannt sind eventuell die Awesome Sammlungen auf GitHub. Dabei handelt es sich um Linksammlungen zu bestimmten Themengebieten rund um Programmierung, Plattformen, Entwicklung und Co. (Link).

Node.js

Unter dieser allgemeinen Übersicht befindet sich ebenfalls ein Sammlung zu Tools und Paketen für Node.js. Die Awesome Liste ist unterteilt in ca 40 Bereiche und beinhaltet einige sehr praktische Pakete und Utilities.

Alle Tools hier zu listen, würde den Rahmen sprengen, also schaut einfach selbst rein (Link Awesome Node.js).

npmgraph - NPM Abhängigkeiten visualisieren

npmgraph.an - ein kleines, aber praktisches Tool, um npm (Node Packaged Modules) Abhängigkeiten anzuzeigen. Npm ist der Paket Manager von Node.js (siehe Artikel über Node.js).

Wie bei anderen Paket Managern (siehe Artikel über Abhängigkeiten apt-get) existieren auch bei npm viele Abhängigkeiten unter den einzelnen Paketen.

npmgraph.an bietet eine Möglichkeit diese grafisch darzustellen. Diese erfolgt mit Hilfe von Knoten und Kanten.

Erinnert mich etwas an Collusion bzw. Lightbeam, falls das noch jemand etwas sagt. Im Unterschied zu den Firefox Add-ons, ist beim "npm Abhängigkeits Visualisierer" eine 3D Ansicht möglich, nette Sache.

npmgraph

NPMGraph