XML-Ecke

Struktur in den Content!

re:publica 12: Die Zukunft des Buchs ist open und collaborative

Das Buch ist auf der Suche nach seiner Zukunft, nach sich selbst. Wegweiser hat jetzt Adam Hyde auf der re:publica in Berlin aufgezeigt. In seiner Session mit dem Titel “A Webpage is A Book” sagte der Gründer der Open-Source-Plattform Floss Manuals,  das traditionelle Publishing-Modell der Buchproduktion sei überholt. In allen Bereichen gebe es dramatische Umwälzungen:

  • Produktion: vom Einzelautor zum kollaborativen Schreiben
  • Objekt: Vom gedruckten Buch zum E-Book
  • Vermarktung: Vom Verkauf in Buchläden zum Online-Vertrieb und auf mobilen Geräten
  • Kulturgut: Vom Buch im Regal zum lebenden und sich ständig weiter entwickelnden Buch
Während sich beim Buch als Objekt und bei der Vermarktung bereits einiges getan habe, gebe es bislang nur wenig Innovationen beim Verfassen von Büchern und bei ihrer Eigenschaft als Kulturgut, von Adam Hyde als “Life” bezeichnet. Die Buchproduktion sei vielfach “ein schrecklich linearer Prozess”. Meist verwendetes Textformat sei Microsoft Word, das meistgenutzte Tool für die Zusammenarbeit die E-Mail, kritisierte der aus Arizona stammende und in Berlin lebende Digitalkünstler und Entwickler. “Die interessantesten Innovationen in der Buchproduktion finden ausschließlich außerhalb der traditionellen Verlagssphäre statt.” Denn mit neuen Plattformen im Netz “wird die Buchproduktion auch für Leute wie uns erschlossen”. 

Als Beispiel stellte Hyde die Plattform booki.cc vor, erstellt mit der Open-Source-Software Booktype. Hier können mehrere Personen gemeinsam an Buchprojekten schreiben und diese dann in unterschiedlichen E-Book-Formaten veröffentlichen oder auch für den Druck vorbereiten. Als Beispiel für eine neue Form der kollaborativen Buchproduktion stellte Hyde das Projekt BookSprint vor, bei dem in 3 bis 5 Tagen gemeinsam ein Buch geschrieben wird – zumindest die erste Version eines Buchs, das laut Hyde künftig eher ein lebendiger, wachsender Prozess ist als ein fertig abgeschlossenes Artefakt. Als Beispiel nannte Hyde das Buch “Das Beta Prinzip. Coworking und die Zukunft der Arbeit”, in dem das betahaus in Berlin seine Grundsätze darstellt. “Der Prozess der neuen Buchproduktion in Online-Umgebungen wird nicht mehr von einem Verleger gemanaged, sondern offen und transparent von den Teilnehmern.”

Und wie kann man da noch mit Büchern Geld verdienen? Als Open-Source-Aktivist befürwortet Hyde natürlich freie Lizenzen. Diese erlauben die Wiederverwendung von Inhalten – “Bücher sind dann nicht länger statische Objekte, sondern werden erweitert, upgedated und verbessert.” Die Beteiligten können gleichwohl Geld damit verdienen, indem sie ein Buchprojekt mit Crowdfunding, etwa über eine Plattform wie kickstarter.com finanzieren.

Im Blog über die Social Book Production weist Adam Hyde auf Open-Source-Tools zur Buchproduktion hin. Dort kritisiert er die Apple-Software iBooks Author: “I just feel sorry for them because they are part of Apples lock in strategy and it has some very significant impacts on their content.” Bücher, so betont Hyde auf der re:publica, können nur dann lebendig sein, wenn sie auf offene Standards setzen – und ist damit ganz im Einklang mit der re:publica-Keynote von Eben Moglen: “We need free media or we lose freedom of thought, possibly forever.”

Posted in Im Lauf der Zeit | Tagged | 1 Comment

Interaktive Karten mit der Google Maps API V3

Ein spezieller API-Schlüssel ist für eigene Web-Projekte mit einer Google Map nicht länger erforderlich. Es ist aber sinnvoll, dennoch einen solchen Schlüssel einzubinden, um die Kontrolle über das Nutzungsvolumen zu behalten: Bei mehr als 25 000 Klicks pro Tag auf eine Karte, will Google Geld sehen. Einen API Key gibt es über die AP-Konsole von Google, hier kann man sehen, zu welchem Anteil die Quote für die kostenlose Nutzung beansprucht wird.

Hier nun als Beispiel, wie man vorgehen muss, um eine Karte mit mehreren Markern zu erstellen, die bei einem Mausklick jeweils ein Info-Fenster anzeigt – in Anlehnung an das Blog My Website Designers Zur Einbindung der API wird zunächst im Header des HTML-Dokuments angegeben, wo der Browser die API aufrufen soll. Die Sensor-Angabe definiert, ob das Gerät, mit dem die Karte aufgerufen wird, den eigenen Standort ermitteln und an die Anwendung übergeben kann. Der optionale API-Key wird unmittelbar vor dem Sensor eingefügt mit “key=(Zeichenfolge)&sensor…”.

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false">
  </script>

Anschließend folgen ein paar grundlegende JavaScript-Anweisungen zur Gestaltung der Karte:

?View Code JAVASCRIPT
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(49.240057, 14.557873);
var myOptions = {
zoom: 6,
center: latlng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);

Der obere Code enthält die Funktion zur Initialisierung, also zum Aufrufen der Karte. Dazu wird zunächst eine Variable namens latlng definiert, mit der das geografische Zentrum der Karte angegeben wird – in diesem Beispiel entspricht das einem relativ zentralen Ort in Europa. Die nächste Variable myOptions gibt einen Zoom-Faktor an (je größer der Zoomfaktor, desto kleiner der Kartenmaßstab), das mit der Variable latlng bereits eingeführte Kartenzentrum und die Art der Kartendarstellung – hier die Terrain-Darstellung für eine naturräumliche Ansicht, für die Straßenansicht muss man anstelle von TERRAIN ROADMAP angeben. Die Anweisung in der nächsten Zeile definiert man dann die Variable map, um die Karte mit myOptions im Code adressieren zu können.

Im nächsten Schritt werden die Positionen für die Marker festgelegt und die Inhalte für das Info-Fenster, das sich bei einem Klick auf den Marker öffnen soll. In der Zeichenkette der Variablen box_html muss den Anführungszeichen im HTML-Code ein Backslash als Steuerzeichen vorangestellt werden. Hier können dann beliebig viele Marker mit ihren jeweiligen Geodaten und Info-Fenstern hinzugefügt werden.

?View Code JAVASCRIPT
var box_html = "<img src=\"http://www.http://upload.wikimedia.org/wikipedia/commons/6/67/Coat_of_arms_of_Mainz-2008_new.svg\" width=48 height=56 /> <br /> Mainz <br /> <a href=\"http://de.wikipedia.org/wiki/Mainz\"> Mainz</a>"; 
var marker = add_marker(50.0000, 8.263705,"Mainz",box_html);
marker.setMap(map);
 
var box_html = "<img src=\"http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Flag_of_Berlin.svg/800px-Flag_of_Berlin.svg.png\" width=60 height=36 /> <br /> Berlin <br /> <a href=\"http://de.wikipedia.org/wiki/Berlin\"> Berlin</a>";
var marker = add_marker(52.5174, 13.4038,"Berlin",box_html);
marker.setMap(map);

Wie die Karte mit diesen beiden Variablen marker und boxhtml umgehen soll, wird mit den folgenden Anweisungen festgelegt: Es wird eine Funktion bestimmt, die Marker und Info-Fenster verbindet. Für das Info-Fenster stellt die API die Klasse InfoWindow bereit, mit der ein “Overlay”, eine zusätzliche sichtbare Ebene über die Kartenebene gelegt wird. Dem InfoWindow wird als Inhalt die Variable boxhtml zugewiesen, die im Beispiel bereits für Mainz und Berlin angelegt wurde:

?View Code JAVASCRIPT
function add_marker(lat,lng,title,box_html) {
var infowindow = new google.maps.InfoWindow({
content: box_html
});

Nun kann man noch ein eigenes Icon für den Marker festlegen, wenn man das Standard-Fähnchen der Google Maps nicht mag:

?View Code JAVAXRIPT
var icon = new google.maps.MarkerImage("design_images/my_icon.png");

Anschließend wird der Marker mit dem Aufruf einer eigenen Variablen erzeugt, der die bereits angelegten Eigenschaften zugewiesen werden:

?View Code JAVASCRIPT
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
map: map,
icon: icon, title: title
});

Nach so viel Darstellung kommt jetzt endlich interaktives Verhalten dazu: Wenn auf einen Marker geklickt wird, soll sich das Info-Fenster öffnen:

?View Code JAVASCRIPT
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
}

Jedes Info-Fenster hat standardmäßig eine Schaltfläche zum Schließen. Wenn zu viele Info-Fenster geöffnet werden, wird die Sache jedoch bald unübersichtlich. Deswegen wird noch eine Prozedur eingefügt, die alle Info-Fenster schließt, sobald die Karte mit der Maus verschoben wird:

?View Code JAVASCRIPT
google.maps.event.addListener(map, 'dragstart', function() {
infowindow.close();
});

Jetzt müssen nur noch alle angelegten Marker “zurückgegeben” werden:

?View Code JAVASCRIPT
return marker;

Im Body-Element des HTML-Dokuments wird die Karte mit “initialize” geladen, anschließend wird in einem div-Element die Größe der Karte festgelegt:

<body onload="initialize()">
 
<div id="map_canvas" style="width: 600px; height: 400px;"></div>
 
</body>

Den gesamten Code für die Karte gibt es hier (ohne Key):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <title>Google Map</title>
 
  <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false">
  </script>
  <script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(51.240057, 10.557873);
var myOptions = {
zoom: 6,
center: latlng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions); 
 
var box_html = "<img src=\"http://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Coat_of_arms_of_Mainz-2008_new.svg/243px-Coat_of_arms_of_Mainz-2008_new.svg.png\" width=48 height=56 /> <br /> Mainz <br /> <a href=\"http://de.wikipedia.org/wiki/Mainz\"> Mainz</a>"; 
var marker = add_marker(50.0000, 8.263705,"Mainz",box_html);
marker.setMap(map);
 
var box_html = "<img src=\"http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Flag_of_Berlin.svg/800px-Flag_of_Berlin.svg.png\" width=60 height=36 /> <br /> Berlin <br /> <a href=\"http://de.wikipedia.org/wiki/Berlin\"> Berlin</a>";
var marker = add_marker(52.5174, 13.4038,"Berlin",box_html);
marker.setMap(map);
 
}
function add_marker(lat,lng,title,box_html) {
var infowindow = new google.maps.InfoWindow({
content: box_html
});
var icon = new google.maps.MarkerImage("my_icon.png");
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
map: map,
icon: icon, title: title
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
}); google.maps.event.addListener(map, 'dragstart', function() {
infowindow.close();
});
return marker;
}
  </script>
</head>
 
 
<body onload="initialize()">
 
<div id="map_canvas" style="width: 600px; height: 400px;"></div>
 
</body>
</html>
Posted in Im Lauf der Zeit | Tagged , , | 2 Comments

Neues iPad auf dem Weg zum Kreativwerkzeug

Textastic auf dem neuen iPad

Die hohe Auflösung des neuen iPads macht sich nicht nur bei Fotos, Videos und Games bemerkbar, sondern auch bei der Darstellung von Text. Die Stärken dieser von Apple als “Retina” (Netzhaut) bezeichneten Display-Technik zeigen sich etwa beim Code-Editor Textastic – auch bei kleinen Schriftgrößen sind die Zeichen in der Auflösung von 2048 mal 1536 Pixel klar konturiert und besser lesbar als mit dem ersten (2010) oder zweiten iPad (2011). Die höhere Dichte der Pixel ist unter dem Mikroskop gut erkennbar.

Das hochwertige Display, der Doppelkernprozessor A5X (1 GHz Taktrate) mit vier Grafikprozessorkernen, der auf 1 GB ausgebaute Arbeitsspeicher und die 5-Megapixel-Kamera tragen dazu bei, dass sich das iPad nicht mehr auf ein Dasein als passives Content-Konsum-Frontend beschränken muss, sondern sich zum Kreativ-Werkzeug entwickeln kann. Besonders augenfällig wird dies mit der jetzt auch für die mobilen Apple-Geräte verfügbaren App iPhoto, die zahlreiche wesentliche Tools für die Bildbearbeitung bereitstellt.

iPhoto

In Verbindung mit dem “Camera Connection Kit” für den Import von Fotos aus der digitalen Kamera sowie einem iPad-Stift wie dem “Bamboo Stylus” von Wacom steht der mobilen digitalen Bildbearbeitung nichts mehr im Weg.

Bei der Eingabe von Texten bietet das neue iPad die zusätzliche Möglichkeit, Text zu diktieren. Für die Spracheingabe tippt man in der virtuellen Tastatur auf das Mikrofon-Symbol, spricht den Text, und tippt ein weiteres Mal auf die Taste. Die Spracherkennung findet in der Cloud statt, was auch bei einer Mobilfunkverbindung relativ flott geht. Das Diktieren ist vor allem bei Texten mit gewöhnlicher Alltagssprache eine gute Alternative zur virtuellen Tastatur. Bei Fachtexten mit vielen Fremdwörtern ist eine Bluetooth-Tastatur die bessere Wahl.

Diktieren mit dem iPad

Posted in Im Lauf der Zeit | Tagged | 1 Comment

Firefox 11: Operation am offenen CSS

Firefox 11 CSS Editor

Mit der neuen Version des Mozilla Browsers bekommen Web-Designer einen nützlichen CSS-Editor in die Hand: Bei den Extras für Web-Entwickler findet sich der Eintrag Stil-Bearbeitung, mit dem sich ein zusätzliches Fenster für alle CSS-Anweisungen zu der gerade im Browser gezeigten Webseite öffnet. Angezeigt werden alle internen und externen Stylesheets mit der Anzahl der jeweils darin enthaltenen Regeln. In diesen kann man nun nach Belieben Änderungen vornehmen – das Ergebnis wird sofort im Browser angezeigt. Hier wurde etwa kurzerhand die Hintergrundfarbe von Grün in Orange geändert:

Firefox 11 CSS Editor Will man Änderungen dauerhaft behalten, kann man die aktualisierte CSS-Datei speichern, um sie dann auf den Server hochzuladen. “It’s a quick and easy way to iterate and test designs on a website”, erklärt das Mozilla-Projekt in einem Blog-Beitrag.

Ziemlich cool ist ein weiteres Tool, das die Struktur einer Website in einem 3D-Modell darstellt, das sich beliebig drehen, skalieren und von allen Seiten anschauen lässt:

Firefox Inspector

Dieser Page Inspector 3D wird ebenfalls über das Menü Extras, Web-Entwickler aufgerufen. Wählt man den Eintrag Untersuchen aus, finden sich unten rechts im Browserfenster drei Schaltflächen für 3D, HTML und Style. Wählt man 3D wird das DOM (Document Object Model) der Webseite dargestellt, in einem Canvas-Element mit HTML5, um das 3D-Rendering kümmert sich die JavaScript API WebGL. Klickt man auf einzelne Platten des Schichtenmodells wird am unteren Bildschirmrand angezeigt, um welchen Knoten in der DOM-Baumstruktur es sich dabei handelt.

Posted in Im Lauf der Zeit | Tagged , , | Leave a comment