<?xml version="1.0" encoding="iso-8859-1"?>
<rss version="2.0">
  <channel>
    <title>infotekten.de :: artikel</title>
    <link>http://infotekten.de//bilder/favicon.ico</link>
    <description>artikel</description>
    <language>de-de</language>           
    <generator>Nucleus CMS v3.51</generator>
    <copyright>© 2006 peter mueller</copyright>             
    <category>weblog</category>
    <docs>http://backend.userland.com/rss</docs>
    <image>
      <url>http://infotekten.de//bilder/favicon.ico</url>
      <title>artikel</title>
      <link>http://infotekten.de/</link>
    </image>

     <item>
 <title>Word 2007 - Lost in Translation</title>
 <link>http://infotekten.de/index.php?itemid=700</link>
<description><![CDATA[<p>Word hat in der Version 2007 sein Erscheinungsbild komplett geändert und stellt neue Benutzer anfangs vor viele Rätsel. Der Umstieg wird zusätzlich durch einige sehr kreative Übersetzungen erschwert, von denen ich in diesem Artikel einige vorstellen möchte.</p>
<h4>Das Register START</h4>
<p>Das Register heißt im englischen Word HOME. Und gleich hier am Anfang gibt es bereits ein paar schöne Beispiele:</p>
<p><a href="media/1/20091208-word2007-home-start.jpg"><a href="http://infotekten.de/media/1/20091208-word2007-home-start.jpg">Word 2007 - Die Registerkarte START</a></a></p>
<h5>Die Gruppe SCHRIFTART</h5>
<p>Die Zeichenformate stehen in Word 2007 in einer Gruppe namens <strong>SCHRIFTART</strong>. Dort kann man dem Text dann unter anderem so tolle „Schriftarten“ wie FETT, KURSIV und UNTERSTRICHEN zuweisen. Im englischen heißt die Gruppe <strong>FONT</strong>, ein Begriff, der alle Zeichenformatierungen umfasst, nicht nur die Schriftart. Warum man es nicht beim guten alten FORMAT - ZEICHEN gelassen hat, wird das Geheimnis der Übersetzer bleiben.</p>
<h5>Die Formatvorlagen ÜBERSCHRIF...</h5>
<p>In Word 2007 gibt es eine eigene Gruppe namens FORMATVORLAGEN, in der es gleich mehrere Styles namens <strong>ÜBERSCHRIF...</strong> gibt. Im Original heißen diese HEADING 1, HEADING 2 und HEADING 3 und die Beschriftung passt genau in die dafür vorgesehenen Boxen. Die Übersetzung ÜBERSCHRIFT 1, ÜBERSCHRIFT 2 und ÜBERSCHRIFT 3 ist zwar völlig korrekt, aber zu lang, wodurch die wichtigste Information – die Gliederungsebene – leider verloren geht.</p>
<h5>"INTENSIVES ANFÜHRUNGSZEICHEN"</h5>
<div style="float:right; margin-left: 20px; margin-bottom: 15px;"><a href="media/1/20091208-word2007-styles-formatvorlagen.jpg"><a href="http://infotekten.de/media/1/20091208-word2007-styles-formatvorlagen.jpg">Word 2007 - Intensives Anführungszeichen</a></a></div>
<p>Durch einen Klick auf den DIALOG BOX LAUNCHER (das kleine Ding rechts am Ende mit dem kleinen Pfeil nach schräg rechts unten, meines Wissens ohne Übersetzung) der Gruppe FORMATVORLAGEN öffnet sich der bekannte Aufgabenbereich. Früher gab es dort als Vorgabe nur STANDARD und ÜBERSCHRIFT 1 bis 3. In Word 2007 gibt es dort mehr Auswahl und meine absoluten Favoriten sind <strong>ANFÜHRUNGSZEICHEN</strong> und <strong>INTENSIVES ANFÜHRUNGSZEICHEN</strong>.</p>
<p>Bitte? Formatvorlagen nur für Anführungszeichen? Die beiden stürzen jeden Word-Novizen in Verwirrung. Eine Rückübersetzung hilft: „Anführungszeichen“ heißt auf englisch „Quote“, und das steht auch in der Originalversion: QUOTE und INTENSE QUOTE. „Quote“ heißt aber auch „Zitat“, und das wäre eigentlich keine schlechte Übersetzung für eine Formatvorlage zum Gestalten von Zitaten: <strong>ZITAT</strong> und <strong>HERVORGEHOBENES ZITAT</strong> hätte es heißen können. Knapp vorbei ist auch daneben.</p>
<h4>Tabellen und Bilder</h4>
<p>Wie der Name andeutet, ist die Registerkarte START aber erst der Anfang. Bei den Tools zur Bearbeitung von Tabellen und Bildern laufen die Word-Übersetzer zu Höchstform auf.</p>
<h5>Tabellentools</h5>
<p>Los geht’s mit den TABELLENTOOLS. Dort gibt es zwei Registerkarten: ENTWURF und LAYOUT:</p>
<p><a href="media/1/20091208-word2007-table-tools-design-entwurf.jpg"><a href="http://infotekten.de/media/1/20091208-word2007-table-tools-design-entwurf.jpg">Word 2007 - Table Tools</a></a></p>
<p>Das Register ENTWURF kümmert sich ums Aussehen der Tabelle und heißt im Original DESIGN. Okay. „Design“ konnte man ja nicht nehmen, da die neuen OFFICE THEMES in der deutschen Version OFFICE DESIGNS heißen und das Wort „Design“ somit schon vergeben war.</p>
<p>Die erste Gruppe auf dem Register ENTWURF heißt OPTIONEN FÜR TABELLENFORMAT. Tabellenformat? Bei näherem Hinsehen klärt es sich auf: Die sechs Optionen der Gruppe beeinflussen das Erscheinungsbild der TABELLENFORMAT<em>VORLAGEN</em> rechts daneben. Im englischen heißt die Gruppe denn auch TABLE STYLE OPTIONS, passend zu den TABLE STYLES rechts daneben.</p>
<p>Aber auch innerhalb der Gruppe OPTIONEN FÜR TABELLENFORMAT gibt es einige schöne Bezeichnungen. ÜBERSCHRIFT zum Beispiel meint die erste Zeile der Tabelle, im englischen heißt es etwas deutlicher HEADER <em>ROW</em>, also Überschriftzeile. Kann man aber noch drauf kommen.</p>
<p>Die letzten beiden Optionen hingegen sind schon etwas schwieriger. <strong>VERBUNDENE ZEILEN</strong> und <strong>VERBUNDENE SPALTEN</strong>. Verbundene Zeilen? Kennen Sie, wenn vielleicht auch nicht unter diesem Namen. Darauf überqueren zum Beispiel Fußgänger eine Straße. Gemeint sind abwechselnd eingefärbte Zeilen. Zebrastreifen. Im englischen Word heißt es BANDED ROWS und BANDED COLUMNS, frei übersetzt etwa „gestreifte Zeilen“ bzw. „gestreifte Spalten“.</p>
<h5>Bildtools</h5>
<p>Zum Abschluss dieses Rundgangs noch ein kurzer Blick auf die BILDTOOLS:</p>
<p><a href="media/1/20091208-word2007-picture-tools-bildtools.jpg"><a href="http://infotekten.de/media/1/20091208-word2007-picture-tools-bildtools.jpg">Word 2007 - Picture Tools</a></a></p>
<p>Die Gruppe mit den Optionen zur Änderung der Bildgröße ganz rechts heißt im englischen treffend SIZE. Im deutschen wurde daraus <strong>SCHRIFTGRAD</strong>. Wow. Hier können Sie den Schriftgrad der Bilder ändern. Das kann nicht mal Photoshop.</p>
<p>Wenn ein eingefügtes Bild einen individuellen Rahmen haben soll, markiert man das Bild und wählt in den BILDTOOLS in der Gruppe BILDFORMATVORLAGEN die Option GRAFIKRAHMEN („Picture Border“) aus. Unterhalb der Farbauswahl heißt es dann plötzlich <strong>KEINE GLIEDERUNG</strong>. Gliederung? Gemeint sind Rahmenlinien. Die Option dient dazu, eventuell vorhandene Rahmenlinien zu entfernen. Direkt darunter gibt es dann noch WEITERE GLIEDERUNGSFARBEN... Damit kann man weitere Farben für die Rahmenlinien auswählen. „Gliederungsfarben“ halt.</p>
<p>Diese beiden „Gliederungs-Optionen“ tauchen übrigens auch bei den ZEICHENTOOLS auf, in der Liste der FORMKONTUREN, und ich habe lange überlegt, wie das englische Original wohl heißen könnte. „Gliederung“ erschien irgendwie suboptimal. Es geht um Rahmenlinien und Linie heißt auf englisch „line“. Bingo. OUTLINE steht dort im Original. „Outline“ heißt sowohl „Umriss“ als auch „Gliederung“. <strong>NO OUTLINE</strong> und <strong>MORE OUTLINE COLORS...</strong> wird dementsprechend zu KEINE GLIEDERUNG und WEITERE GLIEDERUNGSFARBEN.... Das ist fast so gut wie „Intensives Anführungszeichen“.</p>
<h4>Ausblick</h4>
<p>Wer immer diese Übersetzungen gemacht hat, kann entweder kein Word oder kein Deutsch, aber mal sehen, was Word 2010 so an Neuerungen bringt. Es gäbe noch Potential:</p>
<ul>
<li>Die Befehle zur Absatzformatierung stehen im Original in der Gruppe PARAGRAPH. Das könnte man zum Beispiel einfach als PARAGRAF eindeutschen. </li>
<li>Und TABLE TOOLS wird dann zu TISCHWERKZEUGE.</li>
</ul>
<p>So ein wörtlich eingedeutschtes Word, das wäre doch mal was. Es gibt viel zu tun. Packen wir’s an.</p>
]]></description>
 <category>Internet und Web</category>
<comments>http://infotekten.de/index.php?itemid=700</comments>
 <pubDate>Tue, 8 Dec 2009 19:48:48 +0100</pubDate>
</item><item>
 <title>Zwischenraum bei horizontalen Listen per display:inline</title>
 <link>http://infotekten.de/index.php?itemid=504</link>
<description><![CDATA[<p>Auf der Suche nach der Ursache für den Zwischenraum bei einer einfachen horizontalen Navigation per <code>display:inline</code> habe ich einen kleinen Testcase gebaut und in der <a href="http://webwriting-magazin.de/css-design/listhome.php">Mailingliste css-design</a> gepostet. </p>
<p>Dank der kompetenten Listenteilnehmer gibt es jetzt nicht nur eine defintive Ursache, sondern auch gleich mehrere Lösungen. Auf der folgenden Seite finden Sie sowohl den Testcase als auch die möglichen Lösungen:</p>
<ul>
<li>Testcase: <a href="testdrive/list_inline/">Zwischenraum bei horizontaler Liste mit display:inline</a></li>
</ul>
<p>Kurzfassung: Ideal wäre <code>display:table-cell</code> für die Listenelemente. Ansonsten gefällt mir von den möglichen Lösungen “Set a space to fix a space” am besten: Eins und eins sind keins. Augenzwinkernd, aber standardgemäß.
</p>
]]></description>
 <category>Webpublishing</category>
<comments>http://infotekten.de/index.php?itemid=504</comments>
 <pubDate>Sun, 24 Jun 2007 14:35:23 +0200</pubDate>
</item><item>
 <title>Joomla - Inhalte flexibel verwalten</title>
 <link>http://infotekten.de/index.php?itemid=465</link>
<description><![CDATA[<div class="rightbox"><a href="https://ssl.kundenserver.de/styxshop.de/chipshop/indexshopssl.htm?5919962"><a href="http://infotekten.de/media/1/20061130-chip_10-2006_5919962.jpg">CHIP Sonderheft Homepage - Die perfekte Website (10/2006)</a></a><div style="text-align:center;"><a href="https://ssl.kundenserver.de/styxshop.de/chipshop/indexshopssl.htm?5919962">Heft bestellen</a></div></div>
<p style="border: 1px solid darkblue; padding: 5px; width: 50%; background-color: pink;">HINWEIS (2009-07-26)<br />Der Artikel ist bereits &uuml;ber zwei Jahre alt und behandelt Joomla 1.irgendwas. </p>
Wer überlegt, ob er <strong>Joomla!</strong> einsetzen sollte oder nicht, bekommt mit dem folgenden Artikel einen kurzen, knackigen Überblick über die Möglichkeiten dieses beliebten CMS: </p>
<ul>
<li><a href="/download/II-09_joomla_ueberblick.pdf"><strong>Joomla - Inhalte flexibel verwalten</strong></a><br />(PDF, 617 Kb)</li>
</ul>
<p>Wenn die umgekehrt chronologische Ausgabe eines Blogs nicht mehr ausreicht, muss ein "richtiges" Content Manangement System (CMS) her, und <strong>Joomla</strong> ist eines der beliebtesten. Nach einer kurzen Beschreibung der <strong>Installation</strong> werden <strong>Frontend</strong> und <strong>Backend</strong> vorgestellt. Weiter geht es danach mit den Themen "Module verwalten", "Beiträge bearbeiten/hinzufügen" und "Template wechseln". </p>
<p>Zum Abschluss des Artikels gibt es noch eine Anmerkung zu <strong>Joomla und Barrierfreiheit</strong> und kommentierte Tipps zu <strong>Literatur und Links zu Joomla</strong>. </p>
]]></description>
 <category>CHIP Sonderhefte</category>
<comments>http://infotekten.de/index.php?itemid=465</comments>
 <pubDate>Fri, 5 Jan 2007 13:55:39 +0100</pubDate>
</item><item>
 <title>Erste Schritte mit Wordpress</title>
 <link>http://infotekten.de/index.php?itemid=464</link>
<description><![CDATA[<div class="rightbox"><a href="http://infotekten.de/media/1/20061130-chip_10-2006_5919962.jpg">CHIP Sonderheft Homepage - Die perfekte Website (10/2006)</a></div>
<p style="border: 1px solid darkblue; padding: 5px; width: 50%; background-color: pink;">HINWEIS (2009-05-04)<br />Der Artikel ist bereits &uuml;ber zwei Jahre alt und behandelt glaube ich die WordPress Version 2.0 oder so.</p>
<p>Dieser Artikel ist eine schl&uuml;ssige <strong>Einf&uuml;hrung zu WordPress</strong> und trägt im Heft den Titel "Ein Blog auf Ihrer Seite - WordPress einsetzen": </p>
<ul>
<li><a href="/download/II-08_wordpress_einfuehrung.pdf"><strong>Erste Schritte mit WordPress</strong></a>  <ins datetime="2009-05-04" title="hinzugefügt am 4. Mai 2009">(Version 2.0x)</ins><br />(PDF, 516 Kb)</li>
</ul>
<p>Nach einer kurzen Beschreibung der <strong>Installation</strong> werden <b>die ersten Schritte im Backend</b> und das <b>Anlegen von statischen Seiten</b> geschildert. Außer gibt es noch einige Informationen zur <b>Konfiguration</b> und zum Spamschutz mit <b>Akismet</b>.  Wie schrieb ein Leser: </p>
<blockquote><p>Ich habe mir den Chip-Artikel "Erste Schritte mit WordPress" heruntergeladen und gelesen. Gut erklärt, leicht zu lesen - schade, dass ich den nicht vor einem Jahr kannte.</p></blockquote>
<p>Im Heft gibt es danach noch zwei Artikel von <b><a href="http://www.goldmann.de/blog/">Martin Goldmann</a></b> zur <b>Erweiterung</b> und zur <b>Programmierung von WordPress</b>. Alle drei Artikel zusammen sind eine sehr gute Einf&uuml;hrung in die Arbeit mit WordPress. </p>
<p>Wenn Sie diesen Artikel interessant finden, lohnt sich auch ein Blick auf "<a href="index.php?itemid=455">So funktionieren Blogs</a>".
</p>
]]></description>
 <category>CHIP Sonderhefte</category>
<comments>http://infotekten.de/index.php?itemid=464</comments>
 <pubDate>Fri, 5 Jan 2007 13:41:58 +0100</pubDate>
</item><item>
 <title>Barrierefreie Webseiten bauen (Quickcheck)</title>
 <link>http://infotekten.de/index.php?itemid=458</link>
<description><![CDATA[<div class="rightbox" style="text-align:center;"><a href="https://ssl.kundenserver.de/styxshop.de/chipshop/indexshopssl.htm?5919962"><a href="http://infotekten.de/media/1/20061130-chip_10-2006_5919962.jpg">CHIP Sonderheft Homepage - Die perfekte Website (10/2006)</a></a><div><a href="https://ssl.kundenserver.de/styxshop.de/chipshop/indexshopssl.htm?5919962">Heft bestellen</a></div></div>
<p>Dieser Artikel hatte den Arbeitstitel "Quickcheck zur Barrierefreiheit" und zeigt Ihnen recht ausf&uuml;hrlich, wie Sie auf einfache Art und Weise die Zugänglichkeit von Ihren und anderen Webseiten pr&uuml;fen k&ouml;nnen. </p>
<ul>
<li><a href="/download/II-05_barrierfrei-check.pdf"><strong>Barrierefreie Webseiten bauen (Quickcheck)</strong></a><br />(PDF, 446 Kb)</li>
</ul>
<p>Anhand einiger wichtiger Richtlinien der <a href="http://www.einfach-fuer-alle.de/artikel/bitv/" title="Ausführlicher Artikel zur BITV bei einfach-fuer-alle.de">BITV</a> wird mit der <a href="index.php?itemid=336" title="Kurzer Artikel zur Toolbar">Web Developer Toolbar</a> im Mozilla Firefox die Barrierfreiheit von Webseiten analysiert. </p>
<p>Eine Beispielsite ist <a href="http://mein-brandenburg.com/">mein-brandenburg.com</a>, auf der die Kanutin Birgit Fischer einige Ihrer sehenswerten Fotos vorstellt.
</p>
]]></description>
 <category>CHIP Sonderhefte</category>
<comments>http://infotekten.de/index.php?itemid=458</comments>
 <pubDate>Mon, 4 Dec 2006 09:00:00 +0100</pubDate>
</item><item>
 <title>Ein Blog in 5 Minuten mit blogger.com</title>
 <link>http://infotekten.de/index.php?itemid=456</link>
<description><![CDATA[<div class="rightbox"><a href="https://ssl.kundenserver.de/styxshop.de/chipshop/indexshopssl.htm?5919962"><a href="http://infotekten.de/media/1/20061130-chip_10-2006_5919962.jpg">CHIP Sonderheft Homepage - Die perfekte Website (10/2006)</a></a><div style="text-align:center;"><a href="https://ssl.kundenserver.de/styxshop.de/chipshop/indexshopssl.htm?5919962">Heft bestellen</a></div></div>
<p>Man sagt, Papier sei geduldig, aber das Web ist bekanntlich nicht aus Papier, und sehr viel schneller. Im Artikel wird die normale (aktuelle) Version von Google's <a href="http://blogger.com/">Blogger</a> beschrieben und die kommende Beta-Version nur kurz erw&auml;hnt. </p>
<ul>
<li><a href="/download/II-07_ein-blog-in-5-minuten.pdf"><strong>Ein Blog in 5 Minuten</strong></a> (PDF, 601 Kb)</li>
</ul>
<p>Anfang November 2006 beschloss Blogger, neue Mitglieder nur noch für die Beta-Version zu registrieren. Das Heft war zu diesem Zeitpunkt aber schon in Druck, sodass ein Teil des Artikels schlicht und einfach nicht mehr stimmt. </p>
<p>Hier ein &Uuml;berblick &uuml;ber die wichtigsten &Auml;nderungen:
</p>
<h4>UPDATE des Artikels</h4>
<h5>Einleitung</h5>
<p>Seit Anfang November gilt eine Registrierung automatisch f&uuml;r die BETA-Version und und bei der ersten Anmeldung m&uuml;ssen Sie sich bei "<strong>Bei der Beta-Version von Blogger</strong>" anmelden. </p>
<h5>Schritt 1: "Blogkonto anlegen"</h5>
<p>Man ben&ouml;tigt zur Registrierung jetzt einen <strong>Google Account</strong>. </p>
<p>Schritt 2 ("Dem Blog einen Namen geben") und Schritt 3 ("Eine Vorlage w&auml;hlen") sind im wesentlichen unver&auml;ndert</p>
<h5>Schritt 4: "Beitr&auml;ge schreiben"</h5>
<p>Der Screenshot "Der erste Beitrag" hat sich leicht ver&auml;ndert, funktioniert aber &auml;hnlich. Neu sind "Labels" (Tagging) für einen Beitrag. </p>
<p>Die Ver&ouml;ffentlichungsprozedur hat sich in der Beta-Version stark vereinfacht. Die Unterscheidung zwischen "Index" und "vollst&auml;ndig" f&auml;llt weg.</p>
<h5>Schritt 5: "Die Einstellungen &auml;ndern"</h5>
<p>Die Datumseinstellungen sind bereits auf deutsch. Auf Seite 74 k&ouml;nnen in der dritten Spalte die 3 Absätze ab "Nach diesen &Auml;nderungen klicken Sie ..."  ersatzlos gestrichen werden. Der "gef&uuml;rchtete Ver&ouml;ffentlichungskreisel", wie Blogger-User den Schritt "Blog erneut ver&ouml;ffentlichen" nennen, ist abgeschafft. Blogger serviert die Inhalte jetzt direkt aus der Datenbank.</p>
<h5>Schritt 6 und 7 </h5>
<p><strong>Die beiden Abschnitte k&ouml;nnen komplett gestrichen werden</strong>, denn in der Beta-Version ist bereits alles auf deutsch. </p>
<h5>Schritt 8: Linkliste bearbeiten</h5>
<p>Die beschriebene Bearbeitung der Linkliste hat sich total ver&auml;ndert! Die neue Bearbeitung der Sidebar geht phantastisch einfach mit Drag & Drop. Konsultieren Sie ggf. die Hilfe von Blogger. </p>
<h5>Schritt 9: Blogger - Die n&auml;chste Version</h5>
<p>Dieser Abschnitt beschreibt die Beta-Version und w&auml;re in der Einleitung besser aufgehoben. </p>
<p>Nun ja. N&auml;chstes Mal. Trotzdem viel Spa&szlig; mit Blogger. </p>
]]></description>
 <category>CHIP Sonderhefte</category>
<comments>http://infotekten.de/index.php?itemid=456</comments>
 <pubDate>Thu, 30 Nov 2006 19:06:12 +0100</pubDate>
</item><item>
 <title>So funktionieren Blogs</title>
 <link>http://infotekten.de/index.php?itemid=455</link>
<description><![CDATA[<div class="rightbox"><a href="https://ssl.kundenserver.de/styxshop.de/chipshop/indexshopssl.htm?5919962"><a href="http://infotekten.de/media/1/20061130-chip_10-2006_5919962.jpg">CHIP Sonderheft Homepage - Die perfekte Website (10/2006)</a></a><div style="text-align:center;"><a href="https://ssl.kundenserver.de/styxshop.de/chipshop/indexshopssl.htm?5919962">Heft bestellen</a></div></div>
<p>In diesem Artikel lesen Sie, dass ein Blog ein einfaches Content Management System (CMS) mit einigen besonderen Features ist, lernen, wie ein Blog funktioniert und was das Besondere daran ist. </p>
<ul>
<li><a href="/download/II-06_so-funktionieren-blogs.pdf"><strong>So funktionieren Blogs</strong></a> (PDF, 229 Kb)</li>
</ul>
<p>Der Artikel ist im Heft ein bisschen textlastig, denn die folgenden erkl&auml;renden Grafiken fielen leider dem Platzmangel zum Opfer. </p>
<h4>Know-How - Das Blogging-System in Zeitlupe</h4>
<p>Im "Know-How"-Kasten auf Seite 71 rechts unten wird beschrieben, was passiert, wenn ein Besucher eine Webseite von einem CMS oder Blog anfordert. Die folgende Skizze illustriert diesen Vorgang: </p>
<p><img src="/media/1/20061130-cms-frontend.gif" width="606" height="122" alt="So funktioniert das Frontend eines CMS" /></p>
<ol>
<li><strong>Der Benutzer</strong> gibt in seinem Browser eine bestimmte URL wie z. B. <b>http://infotekten.de/</b> ein und drückt <em>Enter</em>.</li>
<li><strong>Die angeforderte Seite</strong> enth&auml;lt neben normalem HTML und CSS auch Platzhalter, die vom CMS noch mit Inhalt gef&uuml;llt werden m&uuml;ssen. Der Webserver wei&szlig; das und sagt dem CMS Bescheid.</li>
<li><strong>Das CMS</strong> holt die aktuellen Inhalte für die Platzhalter direkt aus der Datenbank.</li>
<li><strong>Das CMS</strong> baut die von der Datenbank erhaltenen Inhalte in die Platzhalter ein.</li>
<li><strong>Der Webserver</strong> liefert den fertigen Quelltext aus.</li>
<li><strong>Der Browser</strong> stellt den Quelltext dar.</li>
</ol>
<p>Der Besucher merkt von alledem nichts. Die Platzhalter sind vom CMS durch Inhalte ausgetauscht worden und der dynamisch erzeugte Quelltext unterscheidet sich f&uuml;r einen Browser nicht von einem statisch erstellten.</p>
<h4>Bloggen - Schritt f&uuml;r Schritt</h4>
<p>Auch im letzten Abschnitt fiel dem Platzmangel im Heft eine Grafik zum Opfer: </p>
<p><img src="/media/1/20061130-so-funktioniert-ein-blog.gif" width="606" height:"226" alt="So funktioniert ein Blog" /></p>
<ol>
<li><strong>Der Blogger</strong> meldet sich an, schreibt einen neuen Beitrag und speichert ihn in der Datenbank seines Blog-Systems.</li>
<li><strong>Das Blog-System</strong> integriert den Beitrag automatisch in die umgekehrt chronologische Ausgabe auf der Startseite und in das Blog-Archiv, aktualisiert den RSS-Feed und sendet ein Ping an einen oder mehrere Ping-Server (z. B. ping.wordpress.de, weblogs.com oder blo.gs), um eine Aktualisierung zu signalisieren. Das Ping bedeutet schlicht "Hey, hier gibt’s was Neues!".</li>
<li><strong>Suchmaschinen</strong> wie <em>Google</em> und <em>Technorati.com</em> holen sich in regelm&auml;&szlig;igen Abst&auml;nden die neuesten &Auml;nderungen von den Ping-Servern und indizieren die aktualisierten Seiten erneut. So haben sie innerhalb k&uuml;rzester Zeit aktuelle Versionen der Blogs in ihren Datenbanken.</li>
<li><strong>Besucher</strong> erfahren Neuigkeiten &uuml;ber einen direkten Besuch beim Blog, über das Abonnement des RSS-Feeds und über Suchmaschinen.</li>
</ol>
<p>Mit diesen beiden Grafiken wird der Artikel etwas anschaulicher.
</p>
]]></description>
 <category>CHIP Sonderhefte</category>
<comments>http://infotekten.de/index.php?itemid=455</comments>
 <pubDate>Thu, 30 Nov 2006 18:21:04 +0100</pubDate>
</item><item>
 <title>Ordnung halten im CSS</title>
 <link>http://infotekten.de/index.php?itemid=454</link>
<description><![CDATA[<div class="rightbox" style="text-align:center;"><a href="https://ssl.kundenserver.de/styxshop.de/chipshop/indexshopssl.htm?5919962"><a href="http://infotekten.de/media/1/20061130-chip_10-2006_5919962.jpg">CHIP Sonderheft Homepage - Die perfekte Website (10/2006)</a></a><div><a href="https://ssl.kundenserver.de/styxshop.de/chipshop/indexshopssl.htm?5919962">Heft bestellen</a></div></div>
<p>Je mehr sie mit CSS arbeiten, desto l&auml;nger und un&uuml;bersichtlicher werden auch Ihre Stylesheets. </p>
<p>Wenn Sie nach dem Motto leben "Wer Ordnung h&auml;lt, ist zu faul zum Suchen", k&ouml;nnen Sie diesen Artikel getrost links liegen lassen. Wenn nicht, gibt dieser Artikel gibt Tipps zur Organisation von CSS-Regeln:  </p>
<ul>
<li><a href="http://infotekten.de/download/II-03_css-ordnung-halten.pdf"><strong>Ordnung halten im CSS</strong></a> (PDF, 237Kb)</li>
</ul>
<p>Zun&auml;chst wird das Stylesheet in sinnvolle Abschnitte unterteilt, ein Aufbau für die Styles selbst gezeigt und anschlie&szlig;end zwei Alternativen f&uuml;r die Reihenfolge der Deklarationen innerhalb eines Styles vorgestellt. </p>
<p>Dabei hat sich im Text ein Fehler eingeschlichen und mehrfaches Korrektur lesen unbeschadet &uuml;berstanden: </p>
<p>Auf Seite 41 ist unten in der ersten Spalte ein Beispiel f&uuml;r einen Style, bei dem sich die Reihenfolge der Deklarationen am Box-Modell orientiert. Nur leider kommt im Beispiel <code>border-top</code> <em>vor</em> <code>padding-top</code>, und das ist im Box-Modell genau anders herum. Richtig muss das Listing so heißen: </p>
<blockquote class="css">
<pre>
#kopfbereich {
   position: relative;
   font-size: 100%;
   letter-spacing: 2px;
   background-color: white;
   <strong>padding-top: 10px; </strong>
   <strong>border-top: 1px solid #003399;</strong>
   margin-top: 20px;
}
</pre>
</p></blockquote>
]]></description>
 <category>CHIP Sonderhefte</category>
<comments>http://infotekten.de/index.php?itemid=454</comments>
 <pubDate>Thu, 30 Nov 2006 17:27:57 +0100</pubDate>
</item><item>
 <title>Flexible Website - Gestalten mit CSS</title>
 <link>http://infotekten.de/index.php?itemid=453</link>
<description><![CDATA[<div class="rightbox" style="text-align:center;"><a href="https://ssl.kundenserver.de/styxshop.de/chipshop/indexshopssl.htm?5919962"><a href="http://infotekten.de/media/1/20061130-chip_10-2006_5919962.jpg">CHIP Sonderheft Homepage - Die perfekte Website (10/2006)</a></a><div><a href="https://ssl.kundenserver.de/styxshop.de/chipshop/indexshopssl.htm?5919962">Heft bestellen</a></div></div>
<p>In diesem Artikel gestalten Sie im Schnelldurchgang eine kleine Website mit CSS. </p>
<p>Die HTML-Beispieldateien werden kurz erkl&auml;rt, und dann geht es los mit der Gestaltung des Kopfbereiches, der Erstellung einer horizontalen Navigation sowie einer einfachen Druckversion: </p>
<ul>
<li><a href="http://infotekten.de/download/II-02_gestalten-mit-css.pdf"><strong>Flexible Websites - Gestalten mit CSS</strong></a> (PDF, 650 Kb) </li>
<li><a href="http://infotekten.de/download/2006-10_s32_beispieldateien.zip">Beispielseiten</a> (ZIP, 7Kb)</li>
</ul>
<p>Wenn Ihnen dieser Artikel gef&auml;llt, wird Ihnen "<a href="http://little-boxes.de/">Little Boxes</a>" richtig Spa&szlig; machen. Dort werden die hier angerissenen Themen etwas ausf&uuml;hrlicher erkl&auml;rt. </p>
]]></description>
 <category>CHIP Sonderhefte</category>
<comments>http://infotekten.de/index.php?itemid=453</comments>
 <pubDate>Thu, 30 Nov 2006 14:59:07 +0100</pubDate>
</item><item>
 <title>Das Web ist nicht aus Papier - Teil 2/2</title>
 <link>http://infotekten.de/index.php?itemid=426</link>
<description><![CDATA[<div class="rightbox" style="text-align: center; margin-left: 5px;"><a href="http://infotekten.de/media/1/20061015-twipod.jpg">Techniwürze Podcast</a><br /><a href="http://www.technikwuerze.de/podcast/technikwuerze35/" title="Technikwürze #35">Teil 2 <em>h&ouml;ren</em></a><hr /><a href="index.php?itemid=417">Teil 1 lesen</a></div>
<p>Im <a href="index.php?itemid=417">ersten Teil dieses Artikels</a> ging es um <strong>Papierdenken</strong> auf Webseiten und um die damit verbundenen entt&auml;uschten Erwartungen.  </p>
<p>Dieser zweite Teil besch&auml;ftigt sich mit mediengerechten Webseiten jenseits von Papier und der Frage, warum &uuml;berhaupt Webseiten fr&uuml;her mit Tabellen gelayoutet wurden. </p>
<h4 id="h401">Mediengerechte Webseiten: Jenseits von Papier</h4>
<p>Kennen Sie Shrek? Den sympathischen Oger, der in Begleitung eines geschw&auml;tzigen Esels wider Willen auszog, um eine Prinzessin zu retten und diese sp&auml;ter selber heiratete? Oger sind gr&uuml;n, klobig und gelten eigentlich nicht unbedingt als Sympathietr&auml;ger. In einer Szene erkl&auml;rt Shrek seinem Begleiter das Wesen eines Oger ungef&auml;hr so:</p>
<ul>
<li>Shrek: "Ein Oger ist wie eine Zwiebel."</li>
<li>Esel: "Du meinst, Sie stinken?"</li>
<li>Shrek: "Nein! Schichten! Zwiebeln haben Schichten, Oger haben Schichten!"</li>
</ul>
<p>Webseiten auch.</p>
<h5 id="h501">Webseiten haben Schichten</h5>
<p>Das Web ist nicht Print, aber es ist auch nicht nur Bildschirm. Das Web ist das erste Medium mit dem Prinzip "Single Input – Multiple Output": Der Inhalt wird einmal gespeichert und in verschiedenen Formaten wieder ausgegeben. Auf einem Bildschirm, gedruckt auf Papier, in einer PDF-Datei, akustisch von einem Screenreader, und vielleicht auf Arten und Weisen, die wir heute noch nicht einmal kennen.</p>
<p>Die Trennung von Inhalt und Gestaltung bedeutet, dass Webseiten Schichten haben: </p>
<ul>
<li>Der Kern, die innerste Schicht einer Webseite, ist der Inhalt, der Text, das HTML. Dieser Kern ist flexibel und passt sich den Umst&auml;nden an. </li>
<li>Um diesen Kern gibt es Schichten, wie z. B. CSS für den Bildschirm, CSS für den Drucker, JavaScript zur einfacheren Bedienung (AJAX) und so weiter.</li>
</ul>
<p>Die Schichten um diesen Kern sind Verfeinerungen, machen die Seite h&uuml;bscher und besser bedienbar, aber nicht immer werden alle Schichten genutzt. </p>
<p>Beim Erstellen von mediengerechten Webseiten geht es nicht darum, dass eine Webseite in allen Browsern gleich <em>aussieht</em>. Das geht  nicht, und ebenso gut k&ouml;nnen Sie versuchen, <a href="http://www.google.de/search?q=%22Das+Ende+des+Internet%22">das Ende des Internet</a> zu finden. </p>
<p>Eine Webseite muss nicht &uuml;berall gleich aussehen, sondern &uuml;berall <em>funktionieren</em>. Der Inhalt muss für die Besucher <em>zug&auml;nglich</em> bleiben. </p>
<h5 id="h502">Standardkonform, barrierefrei und flexibel = mediengerecht</h5>
<p>Im Web kursieren viele Schlagworte, mit denen im Grunde genommen die Bewegung weg vom Papierdenken umschrieben wird: </p>
<ul>
<li>Standardkonformes Webdesign ("Designing with Web Standards") </li>
<li>Barrierefreies Webdesign ("Accessibility", dt. "Zug&auml;nglichkeit") </li>
<li>Flexibilit&auml;t ("Bullet Proof Web Design")</li>
<li>Optimierung für Suchmaschinen ("Search Engine Optimization")</li>
</ul>
<p>Letztendlich fordern alle diese Schlagworte, Webseiten so zu bauen, dass sie den M&ouml;glichkeiten des Mediums World Wide Web entsprechen, weshalb ich sie gerne unter dem Begriff "<strong>mediengerechtes Webdesign</strong>" zusammenfasse. </p>
<h4 id="h402">Webseiten gestalten mit Tabellen?</h4>
<p>Wenn mediengerechtes Webdesign so toll ist, warum wurden dann Webseiten fr&uuml;her mit Tabellen gestaltet? Eine kleine historische R&uuml;ckblende soll das verdeutlichen.</p>
<h5 id="h503">Notwehr: Tabellen und &lt;font&gt;</h5>
<p>Das Web ist von Wissenschaftlern für Wissenschaftler erfunden worden, und Wissenschaftler sind &mdash; nicht nur bei Webseiten &mdash; meist mehr am Inhalt als am Aussehen interessiert. Webseiten sahen damals fast alle gleich aus: grauer Hintergrund, schwarze Schrift und blaue Hyperlinks, die lila wurden, wenn sie auf eine bereits besuchte Seite zeigten.</p>
<p>Als Mitte der 90er das Web pl&ouml;tzlich zum weltweiten Boom wurde, erklang der Ruf nach Gestaltung der optisch doch eher schlichten Webseiten immer lauter. Das <a href="http://w3.org">World Wide Web Consortium</a> arbeitete an CSS, einer Sprache f&uuml;r die ansprechende Gestaltung von HTML-Elementen. Aber die Welt wollte bunte Seiten, und zwar sofort. Irgendeine tolle neue Sprache, die irgendwann mal fertig sein w&uuml;rde, war ihr egal. </p>
<p>Als Netscape &lt;font&gt; zur Gestaltung von Schriften und &lt;table&gt; zur Darstellung von Tabellen erfand, waren (fast) alle begeistert, und das klassische Webdesign begann sich herauszubilden:</p>
<ul>
<li>Schriftgestaltung mit <em>font</em></li>
<li>Positionierung mit unsichtbaren HTML-Tabellen </li>
</ul>
<p>Der Quelltext dieser Seiten ist f&uuml;r Menschen so gut wie unlesbar und nachtr&auml;gliche &Auml;nderungen an der Struktur werden schnell zum Albtraum. Qu&auml;l-Text.</p>
<h5 id="h504">Zur&uuml;ck zum Papierdenken</h5>
<p>In gewisser Weise bedeutete diese Art der Gestaltung einen Schritt zur&uuml;ck in die vertraute Welt des Papierdenkens. Visuelle Editoren wie Frontpage oder GoLive verstecken den Quelltext und verst&auml;rken die Papiermetapher, indem Sie so tun, als seien sie eine ganz normale Textverarbeitung. Zahllose Homepagebastler wundern sich noch heute dar&uuml;ber, dass ihre Webseite zu Hause im Editor anders aussieht als beim Nachbarn im Browser.</p>
<p>Die Schriftgestaltung per CSS hat sich Ende der 90er relativ schnell durchgesetzt. Bei guter Planung war das eine echte Arbeitserleichterung, denn ein Style Sheet kann beliebig viele Webseiten gestalten. Formatierung per Fernsteuerung. </p>
<p>Es gab zwar mit CSS theoretisch auch die M&ouml;glichkeit, Objekte auf einer Webseite zu positionieren, aber die Browser sprachen damals so schlecht CSS, dass der Versuch zu nicht vorhersehbaren Ergebnissen f&uuml;hrte. Mehrspaltige Layouts wurden also weiterhin mit Tabellen realisiert. </p>
<h5 id="h505">Tabellenfreie Layouts</h5>
<p>Inzwischen ist das anders. Moderne Browser k&ouml;nnen so gut CSS, dass es f&uuml;r Webdesigner au&szlig;er einer gewissen nat&uuml;rlichen Tr&auml;gheit und akutem Zeitmangel kaum noch Argumente gibt, Webseiten nicht komplett mit CSS zu gestalten.</p>
<p>Der Unterschied zum traditionellen 90er-Jahre-HTML-Tabellendesign ist gewaltig und falls Sie bereits Webseiten mit Tabellen gestaltet haben, vergessen Sie am besten alles, was Sie dar&uuml;ber gelernt haben. Gestalten mit CSS ist anders. Ganz anders. Kein Vergleich. </p>
<p>Die Trennung von Inhalt und Gestaltung zum Beispiel ist ein ungewohntes Konzept: </p>
<ul>
<li>Sie beginnen mit sinnvoll strukturierten HTML-Dateien ohne Gestaltung.</li>
<li>Danach gestalten Sie diese Dateien mit CSS-Anweisungen.</li>
</ul>
<p>Nicht alles ist mit CSS einfacher, und die Lernkurve ist anfangs eher flach. Vielleicht fragen Sie sich auch einfach nur, warum sie jahrelang Webseiten erstellen mit Tabellen gelernt haben und jetzt wieder von vorne anfangen sollen. </p>
<p>Sie sind nicht allein:</p>
<blockquote><p>Es ist schlimm genug, rief Eduard, dass man jetzt nichts mehr f&uuml;r sein ganzes Leben lernen kann. Unsere Vorfahren hielten sich an den Unterricht, den sie in ihrer Jugend empfangen; wir aber m&uuml;ssen jetzt alle f&uuml;nf Jahre umlernen.</p></blockquote>
<p>Goethe. Wahlverwandtschaften. Erster Teil, Viertes Kapitel. 1809. Neue Regeln für ein neues Medium. Das Web ist nicht aus Papier, und zum Gestalten von Webseiten gibt es CSS. </p>
<p style="padding-top: 2em; border-top: 3px double #7799cc;margin-top: 3em;">Dieses "Pamphlet wider das Papierdenken" ist die zweite H&auml;lfte des ersten Kapitels aus dem Buch "<a href="http://little-boxes.de/">Little Boxes</a> - Webseiten gestalten mit CSS. Grundlagen.". </p>
<p>Der erste Teil - <a href="index.php?itemid=417">Papierdenken und entt&auml;uschte Erwartungen</a> ist auch online zu lesen.</p>
]]></description>
 <category>Webpublishing</category>
<comments>http://infotekten.de/index.php?itemid=426</comments>
 <pubDate>Sat, 22 Jul 2006 18:30:33 +0200</pubDate>
</item>
  </channel>
</rss>