<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2germanfull.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" version="2.0">

<channel>
	<title>XML-Ecke</title>
	
	<link>http://www.xml-ecke.de</link>
	<description>Struktur in den Content!</description>
	<lastBuildDate>Sat, 05 May 2012 11:43:19 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/Xml-ecke" /><feedburner:info xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" uri="xml-ecke" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><feedburner:feedFlare xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" href="http://www.newsgator.com/ngs/subscriber/subext.aspx?url=http%3A%2F%2Ffeeds.feedburner.com%2FXml-ecke" src="http://www.newsgator.com/images/ngsub1.gif">Subscribe with NewsGator</feedburner:feedFlare><feedburner:feedFlare xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" href="http://www.bloglines.com/sub/http://feeds.feedburner.com/Xml-ecke" src="http://www.bloglines.com/images/sub_modern11.gif">Subscribe with Bloglines</feedburner:feedFlare><feedburner:feedFlare xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" href="http://www.netvibes.com/subscribe.php?url=http%3A%2F%2Ffeeds.feedburner.com%2FXml-ecke" src="http://www.netvibes.com/img/add2netvibes.gif">Subscribe with Netvibes</feedburner:feedFlare><feedburner:feedFlare xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" href="http://fusion.google.com/add?feedurl=http%3A%2F%2Ffeeds.feedburner.com%2FXml-ecke" src="http://buttons.googlesyndication.com/fusion/add.gif">Subscribe with Google</feedburner:feedFlare><feedburner:feedFlare xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" href="http://www.pageflakes.com/subscribe.aspx?url=http%3A%2F%2Ffeeds.feedburner.com%2FXml-ecke" src="http://www.pageflakes.com/ImageFile.ashx?instanceId=Static_4&amp;fileName=ATP_blu_91x17.gif">Subscribe with Pageflakes</feedburner:feedFlare><feedburner:feedFlare xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" href="http://add.my.yahoo.com/content?lg=de&amp;url=http%3A%2F%2Ffeeds.feedburner.com%2FXml-ecke" src="http://us.i1.yimg.com/us.yimg.com/i/de/my/addtomyyahoo4.gif">Subscribe with Mein Yahoo!</feedburner:feedFlare><item>
		<title>re:publica 12: Die Zukunft des Buchs ist open und collaborative</title>
		<link>http://www.xml-ecke.de/?p=554</link>
		<comments>http://www.xml-ecke.de/?p=554#comments</comments>
		<pubDate>Sat, 05 May 2012 11:21:43 +0000</pubDate>
		<dc:creator>Peter Zschunke</dc:creator>
				<category><![CDATA[Im Lauf der Zeit]]></category>
		<category><![CDATA[E-Books]]></category>

		<guid isPermaLink="false">http://www.xml-ecke.de/?p=554</guid>
		<description><![CDATA[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 &#8220;A Webpage is A Book&#8221; sagte der Gründer der Open-Source-Plattform Floss &#8230; <a href="http://www.xml-ecke.de/?p=554">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p><img class="alignleft" title="Adam Hyde auf der re:publica 12" src="http://www.xml-ecke.de/images/adam_hyde.jpg" alt="" width="336" height="450" /><span style="font-size: small;">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 &#8220;A Webpage is A Book&#8221; sagte der Gründer der Open-Source-Plattform <a href="http://en.flossmanuals.net/" target="_blank">Floss Manuals</a>,  das traditionelle Publishing-Modell der Buchproduktion sei überholt. In allen Bereichen gebe es dramatische Umwälzungen:</span>
<ul>
    <li><span style="font-size: small;">Produktion: vom Einzelautor zum kollaborativen Schreiben</span></li>
    <li><span style="font-size: small;">Objekt: Vom gedruckten Buch zum E-Book</span></li>
    <li><span style="font-size: small;">Vermarktung: Vom Verkauf in Buchläden zum Online-Vertrieb und auf mobilen Geräten</span></li>
    <li><span style="font-size: small;">Kulturgut: Vom Buch im Regal zum lebenden und sich ständig weiter entwickelnden Buch</span></li>
</ul>
<span style="font-size: small;"><span style="line-height: 20px;">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 &#8220;Life&#8221; bezeichnet. Die Buchproduktion sei vielfach &#8220;ein schrecklich linearer Prozess&#8221;. 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. &#8220;Die interessantesten Innovationen in der Buchproduktion finden ausschließlich außerhalb der traditionellen Verlagssphäre statt.&#8221; Denn mit neuen Plattformen im Netz &#8220;wird die Buchproduktion auch für Leute wie uns erschlossen&#8221;. </span></span></p>

<p><span style="font-size: small;">Als Beispiel stellte Hyde die Plattform <a href="http://www.booki.cc/" target="_blank">booki.cc</a> vor, erstellt mit der Open-Source-Software <a href="http://www.sourcefabric.org/en/booktype/features/" target="_blank">Booktype</a>. 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 <a href="http://www.booksprints.net/" target="_blank">BookSprint</a> vor, bei dem in 3 bis 5 Tagen gemeinsam ein Buch geschrieben wird &#8211; 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 &#8220;Das Beta Prinzip. Coworking und die Zukunft der Arbeit&#8221;, in dem das <a href="http://betahaus.de/2012/01/das-beta-prinzip-wir-haben-ein-buch-geschrieben/" target="_blank">betahaus</a> in Berlin seine Grundsätze darstellt. &#8220;Der Prozess der neuen Buchproduktion in Online-Umgebungen wird nicht mehr von einem Verleger gemanaged, sondern offen und transparent von den Teilnehmern.&#8221;</span></p>

<p><span style="font-size: small;">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 &#8211; &#8220;Bücher sind dann nicht länger statische Objekte, sondern werden erweitert, upgedated und verbessert.&#8221; Die Beteiligten können gleichwohl Geld damit verdienen, indem sie ein Buchprojekt mit Crowdfunding, etwa über eine Plattform wie <a href="http://www.kickstarter.com/discover/categories/publishing?ref=home_spotlight" target="_blank">kickstarter.com</a> finanzieren.</span></p>

<p><span style="font-size: small;">Im Blog über die <a href="http://www.awebpageisabook.net/" target="_blank">Social Book Production</a> weist Adam Hyde auf Open-Source-Tools zur Buchproduktion hin. Dort kritisiert er die Apple-Software iBooks Author: &#8220;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.&#8221; Bücher, so betont Hyde auf der re:publica, können nur dann lebendig sein, wenn sie auf offene Standards setzen &#8211; und ist damit ganz im Einklang mit der re:publica-Keynote von <a title="Eben Moglen interviewed by dctp.tv at re:publica" href="http://www.dctp.tv/filme/frei-und-benutzerfreundlich-eben-moglen/" target="_blank">Eben </a><a title="Eben Moglen interviewed by dctp.tv at re:publica" href="http://www.dctp.tv/filme/frei-und-benutzerfreundlich-eben-moglen/" target="_blank">Moglen</a>: &#8220;We need free media or we lose freedom of thought, possibly forever.&#8221;</span></p>
]]></content:encoded>
			<wfw:commentRss>http://www.xml-ecke.de/?feed=rss2&amp;p=554</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Interaktive Karten mit der Google Maps API V3</title>
		<link>http://www.xml-ecke.de/?p=542</link>
		<comments>http://www.xml-ecke.de/?p=542#comments</comments>
		<pubDate>Sat, 24 Mar 2012 19:08:09 +0000</pubDate>
		<dc:creator>Peter Zschunke</dc:creator>
				<category><![CDATA[Im Lauf der Zeit]]></category>
		<category><![CDATA[Geodaten]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://www.xml-ecke.de/?p=542</guid>
		<description />
			<content:encoded><![CDATA[<p><iframe src="http://www.xml-ecke.de/chart/map.html" width="620px" height="420px"</iframe>
<p>Drei Jahre nach Einführung der dritten Version der <a href="https://developers.google.com/maps/documentation/javascript/reference" target="_blank">Google Maps API</a> ist es höchste Zeit, alte Projekte auf die neue Codebasis umzustellen. V3 ist insgesamt einfacher als V2, die von Google nicht länger unterstützt wird. Für bestimmte Aufgaben sind allerdings ganz neue Ansätze erforderlich.</p></iframe></p>

<p>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 <a href="https://code.google.com/apis/console/" target="_blank">AP-Konsole</a> von Google, hier kann man sehen, zu welchem Anteil die Quote für die kostenlose Nutzung beansprucht wird.</p>

<p></p><p>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 &#8211; in Anlehnung an das Blog <a href="http://www.mywebsitedesignersblog.com/2011/10/marker-clusters-in-google-maps-v3-api/" target="_blank">My Website Designers</a> 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 &#8220;key=(Zeichenfolge)&amp;sensor&#8230;&#8221;.</p>


<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p542code12'); return false;">View Code</a> HTML</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p54212"><td class="code" id="p542code12"><pre class="html" style="font-family:monospace;">&lt;script type=&quot;text/javascript&quot; src=&quot;https://maps.google.com/maps/api/js?sensor=false&quot;&gt;
  &lt;/script&gt;</pre></td></tr></table></div>


<p>Anschließend folgen ein paar grundlegende JavaScript-Anweisungen zur Gestaltung der Karte:</p>


<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p542code13'); return false;">View Code</a> JAVASCRIPT</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p54213"><td class="code" id="p542code13"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span>
<span style="color: #003366; font-weight: bold;">function</span> initialize<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
<span style="color: #003366; font-weight: bold;">var</span> latlng <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> google.<span style="color: #660066;">maps</span>.<span style="color: #660066;">LatLng</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">49.240057</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">14.557873</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> myOptions <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
zoom<span style="color: #339933;">:</span> <span style="color: #CC0000;">6</span><span style="color: #339933;">,</span>
center<span style="color: #339933;">:</span> latlng<span style="color: #339933;">,</span>
mapTypeId<span style="color: #339933;">:</span> google.<span style="color: #660066;">maps</span>.<span style="color: #660066;">MapTypeId</span>.<span style="color: #660066;">TERRAIN</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
map <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> google.<span style="color: #660066;">maps</span>.<span style="color: #660066;">Map</span><span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;map_canvas&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
myOptions<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>


<p>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 &#8211; 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 &#8211; 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. </p>

<p>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.</p>


<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p542code14'); return false;">View Code</a> JAVASCRIPT</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p54214"><td class="code" id="p542code14"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> box_html <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;&lt;img src=<span style="color: #000099; font-weight: bold;">\&quot;</span>http://www.http://upload.wikimedia.org/wikipedia/commons/6/67/Coat_of_arms_of_Mainz-2008_new.svg<span style="color: #000099; font-weight: bold;">\&quot;</span> width=48 height=56 /&gt; &lt;br /&gt; Mainz &lt;br /&gt; &lt;a href=<span style="color: #000099; font-weight: bold;">\&quot;</span>http://de.wikipedia.org/wiki/Mainz<span style="color: #000099; font-weight: bold;">\&quot;</span>&gt; Mainz&lt;/a&gt;&quot;</span><span style="color: #339933;">;</span> 
<span style="color: #003366; font-weight: bold;">var</span> marker <span style="color: #339933;">=</span> add_marker<span style="color: #009900;">&#40;</span><span style="color: #CC0000;">50.0000</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">8.263705</span><span style="color: #339933;">,</span><span style="color: #3366CC;">&quot;Mainz&quot;</span><span style="color: #339933;">,</span>box_html<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
marker.<span style="color: #660066;">setMap</span><span style="color: #009900;">&#40;</span>map<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> box_html <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;&lt;img src=<span style="color: #000099; font-weight: bold;">\&quot;</span>http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Flag_of_Berlin.svg/800px-Flag_of_Berlin.svg.png<span style="color: #000099; font-weight: bold;">\&quot;</span> width=60 height=36 /&gt; &lt;br /&gt; Berlin &lt;br /&gt; &lt;a href=<span style="color: #000099; font-weight: bold;">\&quot;</span>http://de.wikipedia.org/wiki/Berlin<span style="color: #000099; font-weight: bold;">\&quot;</span>&gt; Berlin&lt;/a&gt;&quot;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> marker <span style="color: #339933;">=</span> add_marker<span style="color: #009900;">&#40;</span><span style="color: #CC0000;">52.5174</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">13.4038</span><span style="color: #339933;">,</span><span style="color: #3366CC;">&quot;Berlin&quot;</span><span style="color: #339933;">,</span>box_html<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
marker.<span style="color: #660066;">setMap</span><span style="color: #009900;">&#40;</span>map<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>


<p>Wie die Karte mit diesen beiden Variablen marker und box<em>html 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 <a href="https://developers.google.com/maps/documentation/javascript/reference#InfoWindow" target="_blank">InfoWindow</a> bereit, mit der ein &#8220;Overlay&#8221;, eine zusätzliche sichtbare Ebene über die Kartenebene gelegt wird. Dem InfoWindow wird als Inhalt die Variable box</em>html zugewiesen, die im Beispiel bereits für Mainz und Berlin angelegt wurde:</p>


<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p542code15'); return false;">View Code</a> JAVASCRIPT</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p54215"><td class="code" id="p542code15"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> add_marker<span style="color: #009900;">&#40;</span>lat<span style="color: #339933;">,</span>lng<span style="color: #339933;">,</span>title<span style="color: #339933;">,</span>box_html<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
<span style="color: #003366; font-weight: bold;">var</span> infowindow <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> google.<span style="color: #660066;">maps</span>.<span style="color: #660066;">InfoWindow</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
content<span style="color: #339933;">:</span> box_html
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>


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


<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p542code16'); return false;">View Code</a> JAVAXRIPT</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p54216"><td class="code" id="p542code16"><pre class="javaxript" style="font-family:monospace;">var icon = new google.maps.MarkerImage(&quot;design_images/my_icon.png&quot;);</pre></td></tr></table></div>


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


<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p542code17'); return false;">View Code</a> JAVASCRIPT</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p54217"><td class="code" id="p542code17"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> marker <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> google.<span style="color: #660066;">maps</span>.<span style="color: #660066;">Marker</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
position<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">new</span> google.<span style="color: #660066;">maps</span>.<span style="color: #660066;">LatLng</span><span style="color: #009900;">&#40;</span>lat<span style="color: #339933;">,</span>lng<span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
map<span style="color: #339933;">:</span> map<span style="color: #339933;">,</span>
icon<span style="color: #339933;">:</span> icon<span style="color: #339933;">,</span> title<span style="color: #339933;">:</span> title
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>


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


<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p542code18'); return false;">View Code</a> JAVASCRIPT</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p54218"><td class="code" id="p542code18"><pre class="javascript" style="font-family:monospace;">google.<span style="color: #660066;">maps</span>.<span style="color: #660066;">event</span>.<span style="color: #660066;">addListener</span><span style="color: #009900;">&#40;</span>marker<span style="color: #339933;">,</span> <span style="color: #3366CC;">'click'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
infowindow.<span style="color: #000066;">open</span><span style="color: #009900;">&#40;</span>map<span style="color: #339933;">,</span>marker<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>


<p>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:</p>


<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p542code19'); return false;">View Code</a> JAVASCRIPT</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p54219"><td class="code" id="p542code19"><pre class="javascript" style="font-family:monospace;">google.<span style="color: #660066;">maps</span>.<span style="color: #660066;">event</span>.<span style="color: #660066;">addListener</span><span style="color: #009900;">&#40;</span>map<span style="color: #339933;">,</span> <span style="color: #3366CC;">'dragstart'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
infowindow.<span style="color: #000066;">close</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>


<p>Jetzt müssen nur noch alle angelegten Marker &#8220;zurückgegeben&#8221; werden:</p>


<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p542code20'); return false;">View Code</a> JAVASCRIPT</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p54220"><td class="code" id="p542code20"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066; font-weight: bold;">return</span> marker<span style="color: #339933;">;</span></pre></td></tr></table></div>


<p>Im Body-Element des HTML-Dokuments wird die Karte mit &#8220;initialize&#8221; geladen, anschließend wird in einem div-Element die Größe der Karte festgelegt:</p>


<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p542code21'); return false;">View Code</a> HTML</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p54221"><td class="code" id="p542code21"><pre class="html" style="font-family:monospace;">&lt;body onload=&quot;initialize()&quot;&gt;
&nbsp;
&lt;div id=&quot;map_canvas&quot; style=&quot;width: 600px; height: 400px;&quot;&gt;&lt;/div&gt;
&nbsp;
&lt;/body&gt;</pre></td></tr></table></div>


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


<div class="wp_codebox_msgheader wp_codebox_hide"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p542code22'); return false;">View Code</a> HTML</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p54222"><td class="code" id="p542code22"><pre class="html" style="font-family:monospace;">&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&nbsp;
  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
&nbsp;
  &lt;meta name=&quot;viewport&quot; content=&quot;initial-scale=1.0, user-scalable=no&quot; /&gt;
  &lt;title&gt;Google Map&lt;/title&gt;
&nbsp;
  &lt;script type=&quot;text/javascript&quot; src=&quot;https://maps.google.com/maps/api/js?sensor=false&quot;&gt;
  &lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
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(&quot;map_canvas&quot;),
myOptions); 
&nbsp;
var box_html = &quot;&lt;img src=\&quot;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\&quot; width=48 height=56 /&gt; &lt;br /&gt; Mainz &lt;br /&gt; &lt;a href=\&quot;http://de.wikipedia.org/wiki/Mainz\&quot;&gt; Mainz&lt;/a&gt;&quot;; 
var marker = add_marker(50.0000, 8.263705,&quot;Mainz&quot;,box_html);
marker.setMap(map);
&nbsp;
var box_html = &quot;&lt;img src=\&quot;http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Flag_of_Berlin.svg/800px-Flag_of_Berlin.svg.png\&quot; width=60 height=36 /&gt; &lt;br /&gt; Berlin &lt;br /&gt; &lt;a href=\&quot;http://de.wikipedia.org/wiki/Berlin\&quot;&gt; Berlin&lt;/a&gt;&quot;;
var marker = add_marker(52.5174, 13.4038,&quot;Berlin&quot;,box_html);
marker.setMap(map);
&nbsp;
}
function add_marker(lat,lng,title,box_html) {
var infowindow = new google.maps.InfoWindow({
content: box_html
});
var icon = new google.maps.MarkerImage(&quot;my_icon.png&quot;);
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;
}
  &lt;/script&gt;
&lt;/head&gt;
&nbsp;
&nbsp;
&lt;body onload=&quot;initialize()&quot;&gt;
&nbsp;
&lt;div id=&quot;map_canvas&quot; style=&quot;width: 600px; height: 400px;&quot;&gt;&lt;/div&gt;
&nbsp;
&lt;/body&gt;
&lt;/html&gt;</pre></td></tr></table></div>

]]></content:encoded>
			<wfw:commentRss>http://www.xml-ecke.de/?feed=rss2&amp;p=542</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Neues iPad auf dem Weg zum Kreativwerkzeug</title>
		<link>http://www.xml-ecke.de/?p=533</link>
		<comments>http://www.xml-ecke.de/?p=533#comments</comments>
		<pubDate>Sat, 17 Mar 2012 10:02:48 +0000</pubDate>
		<dc:creator>Peter Zschunke</dc:creator>
				<category><![CDATA[Im Lauf der Zeit]]></category>
		<category><![CDATA[Apple]]></category>

		<guid isPermaLink="false">http://www.xml-ecke.de/?p=533</guid>
		<description><![CDATA[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 &#8220;Retina&#8221; (Netzhaut) bezeichneten Display-Technik zeigen sich etwa beim Code-Editor Textastic &#8211; &#8230; <a href="http://www.xml-ecke.de/?p=533">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.xml-ecke.de/images/textastic.jpg" alt="Textastic auf dem neuen iPad" width="800" height="600" /></p>

<p>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 &#8220;Retina&#8221; (Netzhaut) bezeichneten Display-Technik zeigen sich etwa beim Code-Editor Textastic &#8211; 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 <a href="http://ignorethecode.net/blog/2012/03/16/ipad_screen_microscope/" target="_blank">Mikroskop</a> gut erkennbar.</p>

<p>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.</p>

<p><img src="http://www.xml-ecke.de/images/iphoto.jpg" alt="iPhoto" width="800" height="600" /></p>

<p>In Verbindung mit dem &#8220;Camera Connection Kit&#8221; für den Import von Fotos aus der digitalen Kamera sowie einem iPad-Stift wie dem &#8220;Bamboo Stylus&#8221; von Wacom steht der mobilen digitalen Bildbearbeitung nichts mehr im Weg.</p>

<p>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.</p>

<p><img src="http://www.xml-ecke.de/images/diktat.jpg" alt="Diktieren mit dem iPad" width="800" height="600" /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.xml-ecke.de/?feed=rss2&amp;p=533</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Firefox 11: Operation am offenen CSS</title>
		<link>http://www.xml-ecke.de/?p=527</link>
		<comments>http://www.xml-ecke.de/?p=527#comments</comments>
		<pubDate>Wed, 14 Mar 2012 20:21:30 +0000</pubDate>
		<dc:creator>Peter Zschunke</dc:creator>
				<category><![CDATA[Im Lauf der Zeit]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[Mozilla]]></category>

		<guid isPermaLink="false">http://www.xml-ecke.de/?p=527</guid>
		<description><![CDATA[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 &#8230; <a href="http://www.xml-ecke.de/?p=527">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone" style="margin-top: 4px; margin-bottom: 4px; margin-left: 5px; margin-right: 5px; vertical-align: middle;" src="http://www.xml-ecke.de/images/css_editor_menue.jpg" alt="Firefox 11 CSS Editor" width="510" height="285" /></p>

<p>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 &#8211; das Ergebnis wird sofort im Browser angezeigt. Hier wurde etwa kurzerhand die Hintergrundfarbe von Grün in Orange geändert:</p>

<p><img class="aligncenter" style="margin-top: 4px; margin-bottom: 4px; vertical-align: middle;" src="http://www.xml-ecke.de/images/css_editor.jpg" alt="Firefox 11 CSS Editor" width="800" height="594" />
Will man Änderungen dauerhaft behalten, kann man die aktualisierte CSS-Datei speichern, um sie dann auf den Server hochzuladen. &#8220;It’s a quick and easy way to iterate and test designs on a website&#8221;, erklärt das Mozilla-Projekt in einem <a href="http://blog.mozilla.com/blog/2012/03/13/firefox-adds-new-developer-tools-and-add-on-sync/" target="_blank">Blog-Beitrag</a>.</p>

<p>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:</p>

<p><img class="aligncenter" style="margin-top: 4px; margin-bottom: 4px;" src="http://www.xml-ecke.de/images/firefox_inspector.jpg" alt="Firefox Inspector" width="644" height="770" /></p>

<p>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.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.xml-ecke.de/?feed=rss2&amp;p=527</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>E-Books mit dem XMLSpy 2012 gestalten</title>
		<link>http://www.xml-ecke.de/?p=522</link>
		<comments>http://www.xml-ecke.de/?p=522#comments</comments>
		<pubDate>Sat, 03 Mar 2012 15:51:11 +0000</pubDate>
		<dc:creator>Peter Zschunke</dc:creator>
				<category><![CDATA[Im Lauf der Zeit]]></category>
		<category><![CDATA[Altova]]></category>
		<category><![CDATA[E-Books]]></category>
		<category><![CDATA[XML-Editor]]></category>

		<guid isPermaLink="false">http://www.xml-ecke.de/?p=522</guid>
		<description><![CDATA[Mit der Version 2012 beherrscht der XMLSpy von Altova jetzt auch den Umgang mit E-Books im EPUB-Format. Die Windows-Software öffnet EPUB-Dateien und zeigt den Inhalt des Container-Formats an. Auch kann man den Inhalt bearbeiten oder zusätzliche HTML-Seiten einfügen. Allerdings muss &#8230; <a href="http://www.xml-ecke.de/?p=522">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p><img class="aligncenter" title="XMLSpy EPUB Editor" src="http://www.xml-ecke.de/images/xmlspy_epub_1.jpg" alt="" width="800" height="577" /></p>

<p>Mit der Version 2012 beherrscht der <a href="http://www.altova.com/xmlspy/epub-editor.html" target="_blank">XMLSpy</a> von Altova jetzt auch den Umgang mit E-Books im EPUB-Format. Die Windows-Software öffnet EPUB-Dateien und zeigt den Inhalt des Container-Formats an. Auch kann man den Inhalt bearbeiten oder zusätzliche HTML-Seiten einfügen. Allerdings muss man danach manuell die Datei content.opf um die Angaben zu den zusätzlichen Seiten ergänzen &#8211; spezielle EPUB-Werkzeuge wie <a href="http://code.google.com/p/sigil/" target="_blank">Sigil</a> erledigen das automatisch und können auch besser mit dem Importieren von Bildern umgehen. Stärken besitzt der XMLSpy beim Validieren von EPUB-Daten. Die Software zeigt Fehler an und weist etwa darauf hin, wenn ein eingebundenes HTML-Dokument zu einem Bild verlinkt, das nicht im Paket enthalten ist. Ein Klick auf die Fehlermeldung öffnet die entsprechende Problemstelle. Nach Abschluss der Bearbeitung wird das E-Book standardkonform im EPUB-Format gespeichert und lässt sich danach mit jeder Lesesoftware wie etwa der Adobe Digital Editions öffnen:</p>

<p><img class="aligncenter" style="vertical-align: middle;" src="http://www.xml-ecke.de/images/xmlspy_epub_2.jpg" alt="XMLSpy E-Book mit Adobe Digital Editions" width="772" height="475" /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.xml-ecke.de/?feed=rss2&amp;p=522</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>HTML-Liste mit jQuery als Chart visualisieren</title>
		<link>http://www.xml-ecke.de/?p=510</link>
		<comments>http://www.xml-ecke.de/?p=510#comments</comments>
		<pubDate>Sun, 19 Feb 2012 08:45:12 +0000</pubDate>
		<dc:creator>Peter Zschunke</dc:creator>
				<category><![CDATA[Im Lauf der Zeit]]></category>
		<category><![CDATA[Datenvisualisierung]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.xml-ecke.de/?p=510</guid>
		<description><![CDATA[Verschachtelte HTML-Listen stellt ein jQuery-Plugin des Londoner Entwicklers Wes Nolte als Organigramm dar. Der Code sucht im HTML-Dokument nach den Tags und und wandelt diese in nodes, also in Knoten einer Baumstruktur um: Mit der CSS-Klasse &#8220;collapsed&#8221; kann man festlegen, &#8230; <a href="http://www.xml-ecke.de/?p=510">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<iframe src="http://www.xml-ecke.de/chart/example/example.html" width="800" height="600"></iframe>

<p>Verschachtelte HTML-Listen stellt ein jQuery-Plugin des Londoner Entwicklers <a href="http://th3silverlining.com/2011/12/01/jquery-org-chart-a-plugin-for-visualising-data-in-a-tree-like-structure/" target="_blank">Wes Nolte</a> als Organigramm dar. Der Code sucht im HTML-Dokument nach den Tags <pre class="brush: xml; title: ; notranslate">&lt;ul&gt;</pre> und <pre class="brush: xml; title: ; notranslate">&lt;li&gt;</pre> und wandelt diese in nodes, also in Knoten einer Baumstruktur um:
<pre class="brush: jscript; title: ; notranslate">var $container = $(&quot;
&lt;div class=&quot;&amp;quot; + opts.chartClass + &amp;quot;&quot;&gt;&lt;/div&gt;
&quot;);
if($this.is(&quot;ul&quot;)) {
buildNode($this.find(&quot;li:first&quot;), $container, 0, opts);
}
else if($this.is(&quot;li&quot;)) {
buildNode($this, $container, 0, opts);
}
$appendTo.append($container);</pre>
</p>

<p></p><p>Mit der CSS-Klasse &#8220;collapsed&#8221; kann man festlegen, dass bestimmte Knoten nicht ausgeklappt werden sollen, wie hier im Beispiel beim letzten &#8220;Child Level 4&#8243;. Der Cursor zeigt dann beim Mouseover an, dass sich hier weitere Knoten ausklappen lassen. Ebenso kann man auch alle Knoten einklappen, bis zum Root-Element hinauf.</p>
<p>Innerhalb der Listen-Elemente kann beliebiger HTML-Code eingefügt werden, etwa Links oder Bilder. Einziger Nachteil: Bei vielen Elementen einer Ebene, wird das Chart mit seiner Top-Bottom-Darstellung schnell unübersichtlich. Eine Anordnung der Knoten von links nach rechts ist bislang nicht möglich.</p>  
]]></content:encoded>
			<wfw:commentRss>http://www.xml-ecke.de/?feed=rss2&amp;p=510</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>iBooks Author: E-Book-Publishing so einfach wie nie</title>
		<link>http://www.xml-ecke.de/?p=497</link>
		<comments>http://www.xml-ecke.de/?p=497#comments</comments>
		<pubDate>Thu, 19 Jan 2012 19:31:08 +0000</pubDate>
		<dc:creator>Peter Zschunke</dc:creator>
				<category><![CDATA[Im Lauf der Zeit]]></category>
		<category><![CDATA[Apple]]></category>
		<category><![CDATA[E-Books]]></category>

		<guid isPermaLink="false">http://www.xml-ecke.de/?p=497</guid>
		<description><![CDATA[Mit der Mac-Anwendung iBooks Author macht Apple die Gestaltung von E-Books zum Kinderspiel. Das Programm bietet nach dem Start eine Auswahl von sechs Vorlagen an &#8211; angefangen bei einem einfachen Layout mit einem Botanik-Beispiel bis zu einer künstlerischen Aufmachung mit &#8230; <a href="http://www.xml-ecke.de/?p=497">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.xml-ecke.de/wp-content/uploads/2012/01/author_vorlagen.jpg"><img class="size-full wp-image-498 aligncenter" title="author_vorlagen" src="http://www.xml-ecke.de/wp-content/uploads/2012/01/author_vorlagen.jpg" alt="iBooks Author" width="600" height="444" /></a></p>

<p>Mit der Mac-Anwendung iBooks Author macht Apple die Gestaltung von E-Books zum Kinderspiel. Das Programm bietet nach dem Start eine Auswahl von sechs Vorlagen an &#8211; angefangen bei einem einfachen Layout mit einem Botanik-Beispiel bis zu einer künstlerischen Aufmachung mit einem Beispiel zur Entomologie (Insektenkunde). Hat man sich für eine Vorlage entschieden, kann man gleich damit beginnen, die Seiten für das eigene Buch zu gestalten. Diese werden links in einer Spalte angezeigt &#8211; ähnlich wie in einer Präsentationssoftware wie Keynote oder PowerPoint. Ganz oben der Buchtitel: Der Text wird einfach überschrieben, in der Menüleiste findet sich die Formatierung für Schriftart und -größe. Das Vorlagenfoto des Buchtitels wird einfach ersetzt, indem man aus dem Finder ein Foto dorthin zieht: E-Book-Authoring mit Drag and Drop. Das geht auch mit der Apple-Fotosoftware Aperture.</p>

<p><a href="http://www.xml-ecke.de/wp-content/uploads/2012/01/author_start.jpg"><img class="aligncenter size-full wp-image-499" title="author_start" src="http://www.xml-ecke.de/wp-content/uploads/2012/01/author_start.jpg" alt="iBooks Author" width="600" height="583" /></a></p>

<p>Die nächste Seite mit der Bezeichnung &#8220;Einführungsmedien&#8221; kann mit einem Film bestückt werden &#8211; das E-Book soll schließlich mehr bieten als ein gedrucktes Buch. Das Inhaltsverzeichnis muss man mit der Hand anpassen &#8211; will man etwa eine Gliederung als XML-Datei hier hineinziehen, weist das der iBooks Author zurück. Die nächste Seite bietet an, ein Glossar zu erstellen, für jeden Eintrag wird Mac-typisch auf die Plus-Schaltfläche geklickt.</p>

<p>Die eigentlichen Buchseiten können mit fertigen Textdateien bestückt werden &#8211; mit Drag and Drop kann man Texte in den Formaten txt, rtf, html und pdf integrieren. Dokumente im Word- oder Pages-Format werden über das Einfügen-Menü hinzugefügt. Dabei kann man nach der Auswahl der Datei die gewünschte Formatvorlage angeben. Mit XML-Dokumenten kann der Author nichts anfangen. Bei Bildern mag er keine SVG-Grafiken, neben jpg-Dateien werden auch Bilder im Photoshop-Format psd akzeptiert. Über die Menüleiste lassen sich auch Tabellen und Grafiken ins E-Book bringen. Interessant sind die &#8220;Widgets&#8221;: Hier bieten sich fortgeschrittene Gestaltungsmöglichkeiten mit 3D-Illustrationen oder interaktiven Elementen, umgesetzt als JavaScript- oder HTML5-Code.</p>

<p>Der Author speichert seine Werke in einem eigenen Format mit der Dateiendung .iba. Beim Exportieren werden PDF und ein iBooks-Format angeboten. Ändert man die Dateiendung .ibooks in .epub, so hat man ein Standard-Epub-Dokument, das sich auch mit Nicht-Apple-Software wie der Adobe Digital Editions oder gängigen E-Book-Readern  öffnen lässt. Allerdings fehlt hier noch das Titelbild &#8211; dieses erhält man erst, wenn man das E-Book zur Vorbereitung der Veröffentlichung als &#8220;iTunes Store package&#8221; speichert. Gestartet wird dieser Vorgang mit dem Befehl &#8220;Veröffentlichen&#8221;. Für die Bereitstellung des E-Books im iBook Store &#8211; kostenlos oder zum Verkauf zu den üblichen Apple-Bedingungen &#8211; muss man zunächst einen Account als Publisher <a href="https://itunesconnect.apple.com/WebObjects/iTunesConnect.woa/wa/bookSignup" target="_blank">eröffnen</a>.</p>

<p>Mit iBooks Author wird das kreative Gestalten von E-Book-Anwendungen fürs iPad besonders einfach. Wer auch für andere Plattformen entwickeln oder umfassendere Gestaltungsmöglichkeiten nutzen will, kommt aber wohl nicht umhin, sich mit Anwendungen wie <a href="http://calibre-ebook.com/" target="_blank">Calibre</a> oder <a href="http://code.google.com/p/sigil/" target="_blank">Sigil</a> zu beschäftigen.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.xml-ecke.de/?feed=rss2&amp;p=497</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>IPTC treibt Entwicklung von rNews voran</title>
		<link>http://www.xml-ecke.de/?p=490</link>
		<comments>http://www.xml-ecke.de/?p=490#comments</comments>
		<pubDate>Tue, 14 Jun 2011 16:07:27 +0000</pubDate>
		<dc:creator>Peter Zschunke</dc:creator>
				<category><![CDATA[Im Lauf der Zeit]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[IPTC]]></category>
		<category><![CDATA[JSON]]></category>
		<category><![CDATA[Mikroformate]]></category>

		<guid isPermaLink="false">http://www.xml-ecke.de/?p=490</guid>
		<description><![CDATA[Mit dem neuen Projekt schema.org kommt langsam Bewegung ins semantische Web. Da passt es, dass auch der International Press Telecommunications Council (IPTC) die Entwicklung seines neuen Standards rNews vorantreibt. Auf einem Arbeitstreffen in Berlin billigte die Organisation die Version 0.5 &#8230; <a href="http://www.xml-ecke.de/?p=490">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.xml-ecke.de/wp-content/uploads/2011/06/iptc_berlin.jpg"><img class="size-large wp-image-491 alignnone" title="iptc_berlin" src="http://www.xml-ecke.de/wp-content/uploads/2011/06/iptc_berlin-1024x738.jpg" alt="" width="640" height="461" /></a></p>

<p>Mit dem neuen Projekt <a href="http://www.xml-ecke.de/?p=481">schema.org</a> kommt langsam Bewegung ins semantische Web. Da passt es, dass auch der International Press Telecommunications Council (IPTC) die Entwicklung seines neuen Standards <a href="http://dev.iptc.org/rNews">rNews</a> vorantreibt. Auf einem Arbeitstreffen in Berlin billigte die Organisation die Version 0.5 des Standards, der erst im April  <a href="http://www.xml-ecke.de/?p=443">vorgestellt</a> wurde. Die &#8220;draft version&#8221; berücksichtigt die Erfahrungen aus den ersten Tests zur Umsetzung von rNews.</p>

<p>Das Markup von rNews, so erklärte Stuart Myles während der Beratungen in Berlin, bemühe sich um einen ausgewogenen Kompromiss zwischen einer möglichst einfachen Anwendung ohne tiefgreifende Änderungen an bestehenden HTML-Dokumenten und einer einfachen Nutzung ohne komplizierte Software-Werkzeuge zum Parsen, also zur Syntaxanalyse von rNews. Die Änderungen machen das Modell eingängiger und einfacher. So wird nun nicht mehr von &#8220;Tags&#8221;, sondern von &#8220;Concepts&#8221; gesprochen &#8211; als Basisklasse für Angaben zum Inhalt von Nachrichten . Die zunächst als eigene Klasse festgelegten Angaben zur Überschrift mit der Bezeichnung &#8220;Hed&#8221; wurden unter den Eigenschaften der Klasse NewsItem subsumiert. Und die bisherige Klasse TickerSymbol wurde nun zu den Eigenschaften von Organization gestellt.</p>

<p>Der IPTC will auch Möglichkeiten für das Mapping, für die Transformation von rNews in andere Formate anbieten, darunter HTML5-Mikrodaten und JSON. Für Verleger soll es damit so einfach wie möglich gemacht werden, rNews in bestehende Workflows einzubinden. &#8220;rNews erschließt den Wert der Veröffentlichung von Metadaten bei Online-News, indem es dafür einen einfach zu verwenden Standard bereitstellt, der ausschließlich Web-Technologien verwendet&#8221;, erklärte Myles, der die Arbeitsgruppe Semantisches Web beim IPTC leitet und sich bei Associated Press um Nachrichtenformate kümmert. Bis zum nächsten IPTC-Treffen im Oktober soll rNews die Entwurfsphase hinter sich lassen und in der Version 1.0 vorgelegt werden.</p>

<p>Die vom IPTC gepflegten XML-Formate NewsML oder NITF sind vor allem dazu gedacht, Nachrichten-Feeds in die Content-Management-Systeme der Medienunternehmen zu bringen. Diese können den aktuellen Content dann als HTML-Dokumente mit semantischen Metadaten in ihre Web-Angebote bringen. Ob dabei rNews, das schlichtere Mikroformat hNews oder eine künftige Lösung im Rahmen des Suchmaschinen-Projekts schema.org zum bestimmenden Standard werden wird, entscheiden vermutlich nicht zuletzt auch wirtschaftliche Interessen im Spannungsfeld zwischen Medienunternehmen und Suchmaschinen-Betreibern.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.xml-ecke.de/?feed=rss2&amp;p=490</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Google und Bing wollen mehr Semantik im Web</title>
		<link>http://www.xml-ecke.de/?p=481</link>
		<comments>http://www.xml-ecke.de/?p=481#comments</comments>
		<pubDate>Tue, 07 Jun 2011 20:25:56 +0000</pubDate>
		<dc:creator>Peter Zschunke</dc:creator>
				<category><![CDATA[Im Lauf der Zeit]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[Microsoft]]></category>
		<category><![CDATA[Mikroformate]]></category>
		<category><![CDATA[RDF]]></category>

		<guid isPermaLink="false">http://www.xml-ecke.de/?p=481</guid>
		<description><![CDATA[Mehrere Suchmaschinen haben ein eigenes Vokabular entwickelt, um mit semantischen Ergänzungen der HTML-Struktur einer Webseite die Qualität der Internet-Suche zu verbessern. Die Initiatoren von schema.org &#8211; unter ihnen Google, Bing und Yahoo &#8211; fordern die Anbieter von Web-Inhalten auf, diese &#8230; <a href="http://www.xml-ecke.de/?p=481">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>Mehrere Suchmaschinen haben ein eigenes Vokabular entwickelt, um mit semantischen Ergänzungen der HTML-Struktur einer Webseite die Qualität der Internet-Suche zu verbessern. Die Initiatoren von <a href="http://schema.org/" target="_blank">schema.org</a> &#8211; unter ihnen Google, Bing und Yahoo &#8211; fordern die Anbieter von Web-Inhalten auf, diese Ergänzungen in ihre Dokumente einzufügen, &#8220;um es den Nutzern einfacher zu machen, relevante Informationen im Web zu finden&#8221;. Bei den Festlegungen von schema.org handelt es sich um Mikrodaten: Diese maschinenlesbaren Tags innerhalb des HTML5-Standards verstehen sich als einfachere Alternative zu RDFa, der HTML-Umsetzung des <a href="http://www.w3.org/RDF/">(Resource Description Frameworks</a>), aber auch zu Mikroformaten wie <a href="http://www.xml-ecke.de/?p=278">XFN</a>.</p>

<p>Das Vokabular umfasst zunächst eine relativ schlichte <a href="http://www.schema.org/docs/full.html" target="_blank">Hierarchie</a> von Datentypen und &#8220;Dingen&#8221; (Things) mit lediglich sieben Kategorien: CreativeWork, Event, Intangible, Organization, Person, Place und Product. Der gesamte Bereich der Natur kommt in diesem Vokabular zunächst nicht vor. Für Erweiterungen des Vokabulars nennt schema.org <a href="http://www.schema.org/docs/extension.html" target="_blank">Empfehlungen</a> und erklärt, dass sinnvolle Erweiterungen in das Kernvokabular von schema.org übernommen werden können.</p>

<p>Die Mikrodaten werden als Attribute zu den Tags div und span <span>angegeben. Ähnlich wie im RDF-Konzept werden sie in Form eines URI (Uniform Resource Identifier) angegeben:</span>
<div></div></p>


<div class="wp_codebox_msgheader wp_codebox_hide"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p481code24'); return false;">View Code</a> HTML</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p48124"><td class="code" id="p481code24"><pre class="html" style="font-family:monospace;">&lt;div itemscope itemtype=&quot;http://schema.org/Event&quot;&gt;&lt;!-- URI für den Item-Typ &quot;Event&quot; --&gt;
&lt;div itemprop=&quot;name&quot;&gt;Pressekonferenz&lt;/div&gt;
&lt;span itemprop=&quot;description&quot;&gt;Vorstellung von schema.org&lt;/span&gt;
  Termin:
&lt;time itemprop=&quot;startDate&quot; datetime=&quot;2011-06-07T19:30&quot;&gt;  7. Juni 2011, 19.30 Uhr &lt;!-- HTML5-Tag time --&gt;
&lt;/div&gt;</pre></td></tr></table></div>


<p>Google hat ein <a href="http://www.google.com/webmasters/tools/richsnippets" target="_blank">Online-Tool</a> bereitgestellt, um die erweiterte Auszeichnung mit schema.org-Attributen zu testen. Das Vokabular hat bislang die Versionsbezeichnung 0.9 &#8211; eine erste finale Version soll im Laufe dieses Jahres kommen.</p>

<p></p>
]]></content:encoded>
			<wfw:commentRss>http://www.xml-ecke.de/?feed=rss2&amp;p=481</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>LibreOffice will “offenes und einheitliches Format für alle”</title>
		<link>http://www.xml-ecke.de/?p=478</link>
		<comments>http://www.xml-ecke.de/?p=478#comments</comments>
		<pubDate>Wed, 11 May 2011 20:05:48 +0000</pubDate>
		<dc:creator>Peter Zschunke</dc:creator>
				<category><![CDATA[Im Lauf der Zeit]]></category>
		<category><![CDATA[ODF]]></category>
		<category><![CDATA[Office]]></category>
		<category><![CDATA[OOXML]]></category>

		<guid isPermaLink="false">http://www.xml-ecke.de/?p=478</guid>
		<description><![CDATA[Nach den Problemen von OpenOffice.org strebt das Nachfolgeprojekt LibreOffice &#8220;ein offenes und einheitliches Format für alle&#8221; an. In einem Gespräch auf dem LinuxTag in Berlin sagte Projektmitglied Thomas Krumbein (auf dem Bild 3. von links): &#8220;Das ist allerdings ein Traum, &#8230; <a href="http://www.xml-ecke.de/?p=478">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p><img alt="" src="http://www.xml-ecke.de/images/linuxtag2011.jpg" title="LinuxTag 2011" class="aligncenter" width="640" height="315" />
Nach den Problemen von OpenOffice.org strebt das Nachfolgeprojekt <a href="http://www.libreoffice.org/" target="_blank">LibreOffice</a> &#8220;ein offenes und einheitliches Format für alle&#8221; an. In einem Gespräch auf dem LinuxTag in Berlin sagte Projektmitglied Thomas Krumbein (auf dem Bild 3. von links): &#8220;Das ist allerdings ein Traum, den wir seit 20 Jahren haben und der wird auch in den nächsten 20 Jahren nicht realisiert werden. Formate müssten identisch sein, das sind sie aber leider nicht.&#8221; Letztlich könnte dies vermutlich nur gesetzlich geregelt werden.</p>

<p>Das Open Document Format (ODF) habe sich bewährt und eine weite Verbreitung gefunden, sagte Krumbein, der auch Gründungsmitglied der <a href="http://www.documentfoundation.org/" target="_blank">Document Foundation </a>ist. Vor allem in Brasilien und Frankreich, aber auch in Deutschland werde es von einem großen Anteil der Anwender eingesetzt. Mit der zunehmenden Verbreitung von LibreOffice werde auch ODF weiter unterstützt. Allerdings verschickten Microsoft-Office-Nutzer ihre Dokumente als docx-Datei, ohne sich Gedanken zu machen, ob das der Empfänger auch lesen könne. Entscheidend sei, ob die Formate ausgetaucht werden könnten.</p>

<p>Der Novell-Manager Holger Dyroff betonte, dass es wichtig sei, die erforderlichen Filter für die jeweils anderen Formate in Microsoft Office und LibreOffice bereitzustellen &#8211; hier arbeitet Novell mit Microsoft eng zusammen. Vice President Dyroff sagte: &#8220;Da würde ich gerade auch den Microsoft-Office-Nutzer aufrufen, sich mehr mit ODF zu beschäftigen und dann auch die entsprechenden von Microsoft ausgelieferten Import- und Exportfilter zu benutzen, was heute leider relativ selten stattfindet.&#8221; Eine gemeinsame Dokument-Format-Lösung auf einer einheitlichen XML-Basis &#8220;wäre sicherlich hochgradig angenehm&#8221;, aber kaum realistisch. Zurzeit habe Open XML von Microsoft sicherlich den höchsten Marktanteil. In Zukunft sei aber zu erwarten, dass alle offenen Systeme ODF unterstützten, sagte Dyroff. &#8220;Da gehört sicherlich LibreOffice dazu, aber auch verschiedene Software-as-a-Service-Anwendungen wie zum Beispiel Google Docs.&#8221;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.xml-ecke.de/?feed=rss2&amp;p=478</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

