Doch wie genau funktioniert das? Und welche Tools brauche ich dafür? Genau diesen Fragen möchte ich in diesem und in kommenden Artikeln auf den Grund gehen.

Was brauche ich für meine eigene Webseite?

Um zu starten braucht es eigentlich nicht viel. Die wenigen Dinge, die man wirklich benötigt, habe ich hier mal in einer Liste näher beschrieben.

• Etwas Zeit
  Eine gute Homepage lässt sich nicht einfach in wenigen Minuten erstellen, darum sollte man sich auch die entsprechende Zeit nehmen.
• Einen Plan
  Man kann keine eigene Webseite erstellen, ohne vorher zu wissen, welches Ziel man eigentlich mit dieser Seite verfolgen will. Möchte man ein Tagebuch schreiben? Will man Informationen zu einem bestimmten Thema zusammentragen und aufbereiten? Will man sich selbst und die eigenen Projekte vorstellen? Oder möchte man eine Plattform für sich und seine Freunde schaffen? Die Möglichkeiten sind grenzenlos, aber man sollte zumindest grob das Thema der Webseite festlegen.
• Kenntnisse im Umgang mit HTML, CSS und JavaScript
  Man kann keine Homepage erstellen, ohne nicht zumindest die grundlegendsten Bausteine einer Webseite zu kennen. Mit HTML legt man die Struktur und den Inhalt einer Webseite fest. Mit CSS kann man das Aussehen der einzelnen Elemente einer Webseite kontrollieren und mit JavaScript kann man die Funktionalität der eigenen Seite erweitern. Aber erst die Kombination aus allen Zutaten ergibt eine gute Webseite.
• Eine eigene Internetadresse
  Ohne eine eigene Domain kann niemand auf die liebevoll erstellten Inhalte zugreifen. Der Domainname ist die Adresse einer Seite im Internet. Daher sollte man sich einen sprechenden Namen für die eigene Homepage ausdenken. Ob nun www.willies-kochrezepte.de oder www.webmatze.de - solange der Name noch nicht vergeben ist, kann man fast jeden Domainnamen registrieren lassen.
• Webspeicherplatz
  Damit man die erstellen HTML Seiten auch für Jeden zugänglich im Internet ablegen kann, benötigt man etwas Speicherplatz. Diesen Webspeicherplatz oder auch Webspace genannt, wird man sich meistens bei professionellen Webhostern anmieten. Die Kosten dafür sind überwiegend sehr niedrig. Es ist auch möglich, eigene Webserver zu verwenden, doch für eine kleine Homepage reicht meistens weniger aus.

Das waren auch schon die wichtigsten Zutaten für die eigene Homepage. Wie man sehen kann, braucht es nicht wirklich viel, um eine eigenen Webseite zu erstellen. Doch für jemanden, der bisher noch nie eine Homepage erstellt hat, können einige der Punkte trotzdem eine Hürde darstellen.

Schritt für Schritt zur eigenen Webseite

Gerade für diese Anfänger - und dass meine ich nicht abwertend, denn jeder hat einmal an diesem Punkt begonnen - werde ich in den nächsten Tagen und Wochen in verschiedenen Beiträgen auf die einzelnen oben angesprochenen Punkte näher eingehen. Am Ende wird dann jeder eine Schritt für Schritt Anleitung für die erste eigene Homepage zur freien Verfügung haben.

Auf folgende Punkte werde ich dabei detaillierter eingeben:

• Wie man das richtige Thema für die eigene Homepage wählt
• HTML, CSS und JavaScript - Das Grundgerüst einer Webseite beherrschen
• So findet man den passenden Domainnamen für die eigene Webseite
• Wie wähle ich den richtigen Webhoster für meine Homepage aus?
• Wie bekomme ich mehr Besucher für meine eigenen Webseite?

Ich freue mich schon darauf und hoffe, dass der Eine oder Andere von Euch mit Hilfe dieser Anleitungen seine erste eigene Homepage erstellen können wird.

• Schritt für Schritt zum eigenen Blog
• Surfino bietet Exklusiv-Paket
• Genial
• Google Gadgets auf der eigenen Homepage
• Fallstudie: Von 0 auf 100 Euro in 12 Monaten

Wer kann sich denn heute noch ein Internet vorstellen, wo es nicht möglich war die Musik der Lieblingsband direkt auf deren Homepage hören zu können? Viele Bands stellen für ihre neuen Alben Ausschnitte aus den einzelnen Songs über einen MP3 Player online. Die dafür verwendete Technik basiert meistens auf dem Adobe Flash Player (ehemals Macromedia) und passende Flash MP3 Player kann man sich zumeist kostenlos herunterladen und auf der eigenen Webseite installieren.

Heute möchte ich euch eine kleine Auswahl der besten Flash MP3 Player für den freien Gebrauch vorstellen.

MP3 Player

Dieser 'namenlose' OpenSource Player wird in fünf verschiedenen Versionen angeboten. Die Mini, Normal, Max, Multi und JS Versionen unterscheiden sich dabei in der Größe und Funktionalität. MP3 Dateien lassen sich direkt über den HTML Code an den Player übergeben. In der Multiversion wird zusätzlich eine Playlist angezeigt.

Download: MP3 Player

XSPF Web Music Player

Dieser Player ist sicherlich einer der bekanntesten und ältesten Flash MP3 Player. Leider scheint die Entwicklung eingestellt zu sein. Da der Player jedoch einen hohen Funktionsumfang hat, möchte ich ihn hier trotzdem vorstellen. Der XSPF Web Music Player verwendet das "XML Shareable Playlist Format" kurz auch XSPF genannt. Dieses auf XML basierende Format ist ein offener Standard, um Playlisten zu definieren und zu verteilen. Player, die dieses Format verstehen, können diese Playlisten ohne Anpassungen importieren und abspielen. Der XSPF Web Music Player besitzt eine kurze Dokumentation und wird auf etlichen Webseiten verwendet.

Download: XSPF Web Music Player

Flash MP3 Player für WordPress

Ebenfalls sehr interessant für WordPress Nutzer ist dieses Plugin. Einmal in WordPress installiert, lässt sich über eine einfach zu bedienende Oberfläche ein frei konfigurierbarer MP3 Player in das eigenen Blog integrieren. Über eine XML Konfiguration kann man den Player den eigenen Wünschen entsprechend designen. So kann man z.B. ein eigenes Hintergrundbild auswählen und zwischen verschiedenen Farbschemata wählen. Während der Player einen Song abspielt, wird das aktuelle Albumcover angezeigt.

Download: Flash MP3 Player für WordPress

Zanmantou

Wer schon länger auf webmatze.de vorbeigeschaut hat, wird diesen sehr flexibel konfigurierbaren Flash MP3 Player schon kennengelernt haben. Gestartet als kleines Projekt, um die Fähigkeiten von Flash auszutesten, ist der Player zu einem wirklich konkurrenzfähigen Tool herangewachsen. Das Benutzerinterface des Players lässt sich über eine XML Datei beliebig anpassen und mit eigenen Grafiken schmücken. Der Player kann sich somit nahtlos in das Design jeder Webseite einpassen. Über eine JavaScript Schnittstelle kann der Player sogar unsichtbar integriert und z.B. über ganz normale Links gesteuert werden. Das Projekt wird derzeit von Andi Dittrich weiterentwickelt und kann mittlerweile auch Videos abspielen. Für mich immer noch einer der einfachsten und trotzdem flexibelsten Flash MP3 Player.

Download: Zanmantou

Dies ist sicherlich nur eine kleine Auswahl an kostenlosen Flash MP3 Playern zur Integration in die eigenen Webseiten, aber mit den hier vorgestellten Programmen besitzt man bereits ein hohes Maß an Flexibilität. Jeder dieser Player lässt sich den eigenen Wünschen entsprechend anpassen und fügt sich somit perfekt in jedes Design ein.

Kennt Ihr vielleicht noch weitere Flash MP3 Player? Dann stellt mir diese doch einfach in den Kommentaren vor.

• Zanmantou – Der neue Flash MP3 Player
• Download Macromedia Flash Player 8!
• Wordpress 125×125 Pixel Banner Plugin
• Die Liebe für Flash
• Prey von Recoil powered by Zanmantou

Da ich selber fast ausschließlich am Mac arbeite, werde ich diese Liste in die 5 besten Google AdSense Tools für Mac und in die 5 besten Google AdSense Tools für Windows unterteilen. So sollte für jeden das passende Desktop Tool dabei sein. Solltet Ihr noch ebenso gute Tools für Linux oder andere Betriebssysteme kennen, so scheut euch nicht mir diese in den Kommentare zu nennen.

Doch genug der Vorrede, starten wir mit unserer ultimativen AdSense Tool Liste:

1. SenseApp (iPhone)

Die einfachste Art, um die eigenen Google AdSense Einkünfte auch unterwegs immer im Blick zu behalten. Die iPhone Anwendung SenseApp lässt sich über den AppStore bequem installieren und bietet unter anderem einen Überblick über die Einkünfte pro Tag, Monat oder Jahr. Es lassen sich sogar mehrere AdSense Accounts darüber verwalten.

Download: iPhone SenseApp

2. Xadsen (Mac)

Xadsen hilft dir dabei, immer über deine aktuellen AdSense Einkünfte informiert zu sein, indem es diese in einem kleinen Fenster auf deinem Desktop anzeigt. Es zeigt die Einkünfte für Heute und Gestern zusammen mit der Anzahl an Klicks für diese beiden Tage an.

Download: Xadsen 0.2

3. Google AdSense (Mac)

Dieses Programm informiert dich über Neuigkeiten aus dem Google AdSense Blog, gibt Hilfe zum Erstellen deines Google AdSense Accounts, bietet Optimierungs Tipps und Tricks und vieles mehr. Auf der Rückseite dieses Widgets erhältst du Zugriff auf den Google AdSense Kalender.

Download: Google AdSense for Mac

4. Google AdSense Widget (Mac)

Auch mit diesem Widget kannst du dir einfach die Einkünfte der vergangenen Tage und Wochen anzeigen lassen. Zusätzlich werden diese für die letzten 60 Tage als Sparkline dargestellt.

Download: Google AdSense Widget

5. iEarn (iPhone)

Und schließlich noch ein iPhone App, jedoch diesmal kein kostenloses. Für 1,59€ bekommst du eine gut ausgestattete iPhone Anwendung für Google AdSense. Neben Übersichten über die Einkünfte werden auch Statistiken und Auswertungen angeboten, die keine Wünsche offen lassen.

Download: iEarn für das iPhone

6. AdSenseLog (Windows)

AdSenseLog verspricht eine Verbesserung der AdSense Einkünfte durch verschiedene Überwachungs-, Tracking- und Analysetools, welche alle in diese einfach zu bedienende Software eingebunden sind.

Download: AdSenseLog

7. SysSense (Windows)

Dieses Programm bindet sich in die Windows Statusleiste ein und bietet so einfach und schnellen Zugriff auf alle wichtigen Informationen deines AdSense Accounts.

Download: SysSense

8. AdSense Alert (Windows)

Auch mit diesem Programm kannst du dich über die aktuellen AdSense Einkünfte informieren lassen. Zusätzlich ist es jedoch auch noch möglich, verschiedenen Einkunfts-Ziele einzustellen. Wird eines dieser Ziele erreicht, wirst du durch ein Popup darüber informiert.

Download: AdSense Alert

9. AdSense Gadget (Windows Vista)

Das AdSense Gadget ist ein Plugin für die Windows Vista Sidebar und lässt sich dort einfach integrieren. Es zeigt dort die täglichen Einkünfte, Impressionen und Klicks deiner AdSense Blöcke an. Dieses Vista Gadget lässt sich außerdem einfach anpassen und erweitern.

Download: AdSense Gadget

10. AdSense Reports (Windows Vista)

Ein weiteres AdSense Gadget für Windows Vista, welches sich ebenfalls in die Vista Sidebar integriert und dort Auswertungen zu deinen Einkünften aus Goolge AdSense anbietet.

Download: AdSense Reports

Damit sind wir auch schon am Ende unserer kleinen Liste angelangt. Wie es so in der Sache der Natur liegt, kann es natürlich sein, dass sich die Links zu den Anwendungen ändern oder nicht mehr zugänglich sind. Außerdem scheinen einige der Anwendungen nur unter bestimmten Mac und Windows Versionen zu laufen. Sollten euch Probleme auffallen, so teilt mir diese einfach in euren Kommentaren mit.

Im nächsten Beitrag werde ich euch dann eine Liste mit den "Die 7 wichtigsten Google AdSense Online Tools" geben. Es lohnt sich also bald wieder vorbeizuschauen!

• Der ultimative Google AdSense Überblick: Tipps, Tools und Links
• Google Gadgets auf der eigenen Homepage
• Google Notebook
• 5 Mythen über Google Adsense
• Google Sitemaps

In den folgenden Beiträgen werde ich dir die ultimative Sammlung an Google AdSense Tipps und Tricks,  Tools und Links geben, welche dir helfen werden, das Meiste für dich aus Google AdSense herauszuholen.

Sollten dir neben den vorgestellten Tipps, Tools und Links noch weitere wichtige Google AdSense Informationen bekannt sein, so kannst du diese gerne als Kommentar vorschlagen. Die besten werde ich gerne in die einzelnen Beiträge mit aufnehmen.

Folgende Themen werde ich an dieser Stelle in den kommenden Wochen behandeln:

1. Die 10 besten Google AdSense Desktop und iPhone Tools
2. Die 7 wichtigsten Google AdSense Online Tools
3. 5 geniale Firefox Erweiterungen für Google AdSense
4. Diese offiziellen Google AdSense Informationen muss man unbedingt lesen
5. So bindest du Google AdSense erfolgreich ein
6. Diese Tipps helfen dir deinen Google AdSense Umsatz zu steigern
7. Die besten Google AdSense Wordpress Themes
8. 8 kostenlose Google AdSense Wordpress Plugins
9. Diese 5 Google AdSense Bücher sollte man gelesen haben
10. Die 5 besten kostenlosen Google AdSense Videos

Ihr seht, es wird sich lohnen, in den nächsten Tagen und Wochen hier vorbeizuschauen.

• Die 10 besten Google AdSense Desktop und iPhone Tools
• Fallstudie: Die Wahl der richtigen Nische
• 5 Mythen über Google Adsense
• webmatze erstrahlt im neuen Glanz
• Schritt für Schritt zum eigenen Blog

Leider hat sich Microsoft nicht dazu hinreißen lassen, seine neusten Browser auch für Mac OS X zu veröffentlichen, so dass man auf andere Wege und Mittel zurückgreifen muss.

Dual Boot mit BootCamp oder Virtual Machine?

Sicher, Apple bietet uns über BootCamp an, ein anderes Betriebsystem wie Windows XP auf einer zweiten Partition zu installieren. Hat man dies getan, kann man natürlich auch den Internet Explorer unter Windows verwenden.

Allerdings haben wir dadurch auch einige Nachteile, die natürlich nicht verschwiegen werden können. Zum einen müssen wir extra Festplattenplatz für die zweite Partition bereitstellen - Windows ist hier natürlich nicht besonders sparsam -, zum anderen können wir so immer nur ein Betriebssystem gleichzeitig laufen lassen. Was natürlich unpraktisch ist, wenn unsere Entwicklungsumgebung auf Mac OS X läuft.

Bleibt als weitere Möglichkeit noch, Windows in einer virtuellen Maschine zu installieren. Mit Parallels oder VMWare Fusion gibt es hier sehr gute Programme, die es uns sehr leicht machen, ein oder mehrere Betriebssysteme zu installieren und gleichzeitig mit Mac OS X laufen zu lassen.

Doch auch diese Möglichkeit fällt ins Wasser, wenn wir gar keine eigene (offizielle) Installations CD von Windows besitzen und uns auch nicht extra eine zulegen wollen, nur um etwas im Internet Explorer zu testen. Doch was bleibt uns nun noch übrig?

ies4osx - Der Internet Explorer für OS X

Ich weiß, ich weiß. Warum bin habe ich nicht gleich am Anfang erwähnt, das es doch einen Internet Explorer für Mac OS X gibt? Aber ich liebe es, ein wenig Spannung aufzubauen - und seien wir doch mal ehrlich, die Ungeduldigen unter euch haben die vorhergehenden Abschnitte sowieso übersprungen. (Was? Das stimmt wirklich? Dann schnell zurück und noch einmal von vorne lesen!)

Mike Kronenberg schien sich mal die gleichen Fragen gestellt zu haben. Warum kann ich keine Windows Anwendungen unter OS X laufen lassen? Also hat er sich hingesetzt und das Linux Wine Projekt - mit dem viele Windows Anwendungen unter Linux laufen können - auf Mac OS X portiert und als Darwine zur Verfügung gestellt. Dann ist er anscheinend auf das ies4linux Projekt gestoßen, mit dem es möglich war den Internet Explorer 6 mit Hilfe von Wine auf Linux zum Laufen zu bekommen. Dies hat er ebenfalls portiert und herausgekommen ist ies4osx! <tröte>TATAAA!</tröte>

Die Installation von ies4osx ist wirklich sehr einfach. Zuerst die aktuellen Versionen von Darwine und ies4osx herunterladen, Darwine in den Applications Ordner von OS X verschieben, den Installer von ies4osx ausführen und fertig. Der Installer lädt sich die benötigten Dateien herunter und legt eine lauffähige Version vom "Internet Explorer 6" auf dem Desktop ab.

Es ist sogar möglich, Flash, Java und den Mediaplayer 6.4 von Microsoft auf diesem IE 6 zu installieren.

Mein Fazit

Seit ich vom ies4osx Projekt erfahren habe, habe ich immer einen Internet Explorer bei mir auf meinem MacBook laufen und kann so jederzeit meine Seiten auch dort überprüfen. Sicherlich, der Internet Explorer für Mac OS X reagiert oft etwas träge und vor allem wenn Flash im Spiel ist, wird es richtig langsam, aber für den Zweck, meine Seiten im IE 6 zu testen, ist dies vollkommen ausreichend.

Leider gibt es momentan noch keine Version vom IE 7 oder IE 8 für Mac OS X, aber schauen wir mal, was die Zukunft so bringt.

Wie läuft es bei euch? Entwickelt ihr auch unter Mac OS X? Wenn ja, welche Lösungen habt ihr gefunden, um eure Seiten auch auf dem Internet Explorer zu testen?

• Ein rabenschwarzer Tag
• Google Chrome Frame – Ein Plugin für den Internet Explorer
• Unsicher Objekte unter SSL in IE
• webmatze.de und IE7
• Wozu noch Windows

In den Tagen des Social Webs gehört es unter anderem zu den häufigen Aufgaben eines Entwicklers, XML Dokumente zu generieren, oder APIs auf Basis von XML bereitzustellen. News wollen in Form von RSS oder Atom abonniert werden, Inhalte aus anderen Webangeboten über XML in die eigenen Seiten integriert werden.

XML ist also ziemlich wichtig und daher sollte das Erstellen und die Verarbeitung von XML mit einem Framework wie Ruby on Rails auch so einfach und unkompliziert wie möglich erfolgen.

Was ist Google Sitemaps?

Wie dies funktioniert und welche Schritte dafür notwendig sind, werde ich am Beispiel einer Google Sitemap für ein Blog zeigen. Google stellt mit Google Sitemaps eine Methode zur Verfügung, um neue Inhalte aus dynamischen Webseiten noch schneller in den Google Suchindex aufnehmen zu lassen. Dazu können Webseiten eine sitemap.xml Datei zur Verfügung stellen, welche in Form von XML Daten wie URL, Erstell- bzw. Updatedatum und eine Indizierungspriorität zu allen verfügbaren Seiten - in unserem Fall sind dies die Blogeinträge - enthalten kann.

Rails Generator hilft uns

Bei großen dynamischen Seiten ist es natürlich aufwendig, diese XML Datei immer von Hand zu pflegen, darum wollen wir diese mit den Mitteln von Ruby on Rails automatisch generieren lassen.
Überlegen wir doch erstmal, was wir alles für die geforderte Aufgabe benötigen. Wir brauchen einen Sitemap Controller mit einer index Action, welche wir aufrufen können und die dann schließlich das XML generiert. Also sollten wir zuerst diesen neuen Controller generieren lassen. Dies ist in Ruby on Rails mehr als einfach:

ruby script/generate controller Sitemap index

Dieser Komandozeilenaufruf nimmt uns diese Aufgabe ab. Der Rails Generator legt daraufhin mehrere Dateien an. Unter anderem den Controller sitemap_controller.rb mit der Action index und den View index.html.erb.

     exists  app/controllers/
exists  app/helpers/
create  app/views/sitemap
exists  test/functional/
create  app/controllers/sitemap_controller.rb
create  test/functional/sitemap_controller_test.rb
create  app/helpers/sitemap_helper.rb
create  app/views/sitemap/index.html.erb

Der Controller

Im nächsten Schritt holen wir uns in der bereits für uns angelegten index Action eine Liste mit allen vorhandenen Blogeinträgen und sagen Rails, dass das Ergebnis als XML gerendert werden soll.

class SitemapController < ApplicationController
 
def index
@articles = BlogArticle.find(:all, :order => 'created_on DESC, updated_on DESC')
respond_to do |format|
format.xml { }
end
end
 
end

Wie man sehen kann, sortieren wir die gefundenen Blogeinträge absteigend nach Erstellungs- und Bearbeitungsdatum. So ist sichergestellt, dass die aktuellsten Einträge in der XML Datei später immer am Anfang stehen.

Mit Rails XMLBuilder ist XML so einfach wie noch nie

Wie im ersten Schritt zu sehen, hat Rails für uns mit der index.hmtl.erb auch schon die Viewdatei für die index Action erstellt. Da wir jedoch kein HTML sondern XML ausgeben wollen, benennen wir diese Datei in index.xml.builder um.

Diese Umbenennung hat zwei Effekte. Rails wird auf diese Datei automatisch zurückgreifen, wenn XML gerendert werden soll und die Endung .builder teilt Rails mit, dass der Inhalt dieser Datei Anweisungen für den Rails eigenen XML Builder enthält. Mit diesem Builder lassen sich schnell komplexe XML Dateien erstellen, wie wir am folgenden Beispiel sehen werden.

xml.instruct!
 
xml.urlset "xmlns" => "http://www.google.com/schemas/sitemap/0.84" do
xml.url do
xml.loc         "http://www.name-der-seite.de/"
xml.lastmod     w3c_date(Time.now)
xml.changefreq  "always"
end
 
@articles.each do |article|
xml.url do
xml.loc         url_for(:only_path => false, :controller => 'blog', :action => 'show', :id => article)
xml.lastmod     w3c_date(article.created_on)
xml.changefreq  "weekly"
xml.priority    0.8
end
end
 
end

Dieser Code ist so ziemlich selbsterklärend. Es wird über verschiedene xml Anweisungen die Struktur der sitemap.xml erzeugt und über alle BlogArticles iteriert.

Eine Hilfe für das Datumsformat

Zur Ausgabe des Datums im richtigen Format haben wir die Methode w3c_date() im sitemap_helper.rb definiert.

module SitemapHelper
 
def w3c_date(date)
date.utc.strftime("%Y-%m-%dT%H:%M:%S+00:00")
end
 
end

Fast fertig

Damit wir diese Action nun auch über die URL http://www.name-der-seite.de/sitemap.xml aufrufen können, werden wir in der Datei routes.rb noch ein entsprechendes Mapping anlegen.

map.connect "sitemap.xml", :controller => "sitemap", :action => "index"

Nun steht dem Aufruf durch Google und der anschließenden erfolgreichen Indizierung unserer gesamten Blogbeiträge nichts mehr im Weg.

Abschließend kann man sagen, dass XML mit Ruby on Rails wirklich nicht schwer ist. Wenn man den gesamten Aufwand betrachtet, so konnten wir die geforderte Funktionalität in 5 bis 10 Minuten umsetzen. Wenn das nicht effektiv ist, was denn dann? :o)

• Google Sitemaps
• Eigene Fehlerseiten erstellen
• Google Notebook
• Was ist robots.txt?
• Jetzt wird Code generiert

Auf vielen Seiten werden immer noch Navigationsmenüs verwendet, welche vollständig auf JavaScript aufbauen und bei ausgeschaltetem JavaScript nicht mehr funktionieren. Solche Seiten sind dann für Nutzer mit Behinderungen meistens nicht mehr bedienbar.

Das barrierefreie CSS Menü

In diesem Beitrag möchte ich euch zeigen, dass man Menüs auch auf behindertengerechte und barrierefreie Weise erstellen kann. Ziel ist es ein Menü zu bauen, dass nur auf aktuellen Standards wie HTML und CSS beruht und keine Verwendung von JavaScript macht. So soll es möglich sein, dass Menü auch dann noch bedienen zu können, wenn der Nutzer JavaScript oder gar CSS im Browser ausgeschaltet hat.

So sieht das fertige Menü aus

Hier könnt Ihr schon einmal sehen, wie das Menü aussehen wird. (Wird im IE6 als vertikales Menü angezeigt, während es alle modernen Browser als Drop Down Menü angezeigen.)

• Start
• Informationen
  • Webseiten erstellen
    • HTML
    • CSS
    • Programmieren
      • JavaScript
      • PHP
      • Java
      • ActionScript
      • Ruby
    • Flash
  • Multimedia
    • Grafiken
    • Videos
• Suchen
  • Google
  • Yahoo
  • MSN
• Über

Dieses Beispiel hat insgesamt vier Ebenden, wobei jede einzelne Ebene auch noch unterschiedlich per CSS angepasst werden kann.

Der HTML Code

Der Aufbau dieses Menüs per HTML erfolgt über verschachtelte unsortierte Listen <ul>. Zur besseren Veranschaulichung könnt Ihr hier den HTML Code betrachten:

 
<ul class="cssmenu">
  <li><a href="http://webmatze.de/">Start</a></li>
  <li><a href="http://webmatze.de/">Informationen</a>
    <ul>
      <li><a href="http://webmatze.de/">Webseiten erstellen</a>
        <ul>
          <li><a href="http://webmatze.de/">HTML</a></li>
          <li><a href="http://webmatze.de/">CSS</a></li>
          <li><a href="http://webmatze.de/">Programmieren</a>
            <ul>
              <li><a href="http://webmatze.de/">JavaScript</a></li>
              <li><a href="http://webmatze.de/">PHP</a></li>
              <li><a href="http://webmatze.de/">Java</a></li>
              <li><a href="http://webmatze.de/">ActionScript</a></li>
              <li><a href="http://webmatze.de/">Ruby</a></li>
            </ul>
          </li>
          <li><a href="http://webmatze.de/">Flash</a></li>
        </ul>
      </li>
      <li><a href="http://webmatze.de/">Multimedia</a>
        <ul>
          <li><a href="http://webmatze.de/">Grafiken</a></li>
          <li><a href="http://webmatze.de/">Videos</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="http://webmatze.de/">Suchen</a>
    <ul>
      <li><a href="http://webmatze.de/">Google</a></li>
      <li><a href="http://webmatze.de/">Yahoo</a></li>
      <li><a href="http://webmatze.de/">MSN</a></li>
    </ul>
  </li>
  <li><a href="http://webmatze.de/">Über</a></li>
</ul>
 

Wie man sehen kann, gibt es keine besonderen Tricks. Es handelt sich einfach um ganz normalen standardkonformen HTML Code. Auch ohne CSS kann man dieses Menü bedienen und alle einzelnen Links aufrufen.

Um das Menü aber etwas ansprechender zu gestalten, wird es durch die folgenden CSS Anweisungen in die richtige Form gebracht.

Der CSS Code

Ich werde jetzt nicht ins Detail gehen, wie genau die einzelnen Anweisungen sich auf die Darstellung des Menüs auswirken. Zum besseren Verständnis habe ich ein paar Kommentare in den CSS Code mit aufgenommen. Anmerken möchte ich jedoch, dass ich den letzten Teil nur mit aufnehmen musste, weil sich der IE 6 hier etwas quer stellt und sich nur durch spezielle CSS Anweisungen dazu bringen lässt, das Menü ebenfalls richtig darzustellen. (Wer möchte, kann den IE 6 speziellen Teil natürlich weglassen.)

ul.cssmenu {
  position: relative;
  display: block;
  margin: 0px;
  padding: 0px;
}
ul.cssmenu ul {
  position: relative;
  display: none;
}
ul.cssmenu li {
  position: relative;
  display: inline;
  float: left;
}
/* Menupunkt stylen */
ul.cssmenu li a {
  font-family: arial, sans-serif;
  font-size: 12px;
  line-height: 20px;
  text-decoration: none;
  text-align: center;
  display: block;
  width: 100px;
  height: 20px;
}
ul.cssmenu li:hover > a {
  background-color: #666666;
  color: #FFFFFF;
  font-weight: bold;
}
/* Untermenüpunkt einblenden */
ul.cssmenu li:hover > ul {
  position: absolute;
  top: 20px;
  left: -40px;
  display: inline;
}
/* ab zweite Ebene */
ul.cssmenu li li:hover > ul {
  top: 0px;
  left: 110px;
}
ul.cssmenu li li a {
  width: 150px;
}
/* Farben der einzelnen Ebenen (werden vererbt)*/
ul.cssmenu a {
  color: #000000;
  background-color: #e4e4e4;
}
ul.cssmenu ul a {
  background-color: #d4d4d4;
}
ul.cssmenu ul ul a{
  background-color: #c4c4c4;
}
ul.cssmenu ul ul ul a{
  background-color: #b4b4b4;
}
 
/* zusätzliche Styleangaben für IE 6 */
/* das Menü wird dort untereinander dargestellt */
ul.cssmenu {
  _text-indent: 10px;
}
ul.cssmenu ul {
  _display: inline;
  _margin-left: 0px;
  _text-indent: 20px;
}
ul.cssmenu ul ul {
  _text-indent: 30px;
}
ul.cssmenu ul ul ul {
  _text-indent: 40px;
}
ul.cssmenu li {
  _float: none;
}
/* Menupunkt stylen */
ul.cssmenu li a {
  _text-align: left;
  _width: 150px;
}
ul.cssmenu a:hover {
  _font-weight: bold;
  _background-color: #666666;
}

Fazit

Wie Ihr sehen könnt ist es gar nicht so schwer auch ohne JavaScript ein ansprechendes Menü zu gestalten. Das hier gezeigte Beispiel lässt sich natürlich leicht durch andere Farben oder Hintergrundgrafiken per CSS noch weiter verschönern und an die eigenen Bedürfnisse anpassen. Alle modernen Browser sollten damit zurecht kommen - selbstverständlich auch Googles neuer Chrome Browser.

• CSS Button Tricks
• Wie man wirklich ansprechende Formulare erstellt
• Wirklich einfache JavaScript Tooltips
• FireBug 0.4 – Der ultimative Web Debugger
• Ist display=”none” jetzt irrelevant?

You need the latest nightly build of WebKit to see the effects in action. But you can also watch it as a video on YouTube:

Go to the original Rotating Image Gallery to try for yourself and look at the source code to see how it was made.

I'll give you a more detailed description of those new CSS effects in an upcoming post, so check back later.

• CSS Button Tricks
• Google bindet YouTube Videos in Suchergebnisse ein
• Google Chrome – Der neue Browser
• www.rudicomeback.de
• Das Problem mit scrip.aculo.us Effect.scroll()

Wofür steht irrelevant?

Das Attribut irrelevant darf die Werte "true" oder "false" enthalten und gibt an, ob ein so ausgezeichnetes HTML Element im aktuellen Kontext noch nicht oder nicht mehr relevant ist. So gekennzeichnete Elemente werden vom Browser weder gerendert, noch angezeigt. Das heißt, man kann damit beliebige Elemente ein- und ausblenden.

Bisher konnte man diese Funktionalität nur durch das Setzen der CSS Eigenschaft display auf display: none erreichen. Damit werden die entsprechenden Elemente ebenfalls nicht gerendert und angezeigt.

Der Nachteil hier wäre allerdings, dass ein Gerät oder Browser, welcher keine Stylesheets versteht, solche Elemente dann trotzdem darstellen würde. Bei Verwendung von irrelevant würde der entsprechende Teil auch in diesem Fall nicht angezeigt werden. (Vorausgesetzt das Gerät versteht HTML5.)

irrelevant schon heute verwenden

Damit man das neue Attribut in HTML Seiten verwenden kann, müsste man darauf warten, dass die aktuellen Browser HTML 5 unterstützen. Doch bis es soweit ist, kann es noch eine Weile dauern, zumal die Spezifikation noch nicht in der finalen Version vorliegt.

Um das Warten aber ein wenig zu verkürzen, kann man die entsprechende Funktionalität in allen aktuellen Browsern auch auf anderem Weg erreichen. Dazu muss man nur zwei einfache CSS Definitionen in das HTML Dokument einbinden, und schon wird das Attribut irrelevant richtig ausgewertet.

 
<style type="text/css">
  *[irrelevant] {
    display: none;
  }
  *[irrelevant="false"] {
    display: inherit;
  }
</style>
 

(Man sollte jedoch versuchen möglichst nicht irrelevant="false" zu verwenden, sondern statt dessen das Attribut ganz entfernen, da es unter Umständen bei einigen HTML Elementen zu Problemen in der Darstellung kommen kann.)

So kann man nun beliebige Elemente ausblenden lassen:

 
<p>Laut HTML 5  können nicht relevante Elemente
 ausgeblendet werden, indem ihnen das Attribut irrelevant
 zugewiesen wird. <span irrelevant="true">HTML 5 wird noch
 nicht von allen aktuellen Browsern unterstützt.</span>
 Irrelevante Elemente sind solche, die noch nicht, oder nicht
 mehr relevant sind. Das Attribut sollte auf solche Abschnitte
 angewendet werden, die im aktuellen Kontext nicht relevant
 sind, es aber später durchaus wieder werden können.</p>
 

Wenn man dies mit einem aktuellen Browser wie Firefox 3, Safari 3 oder IE 8 betrachtet, sollte der zweite Satz nicht mehr angezeigt werden:

Elemente per DOM ein- und ausblenden

Jetzt, da wir mit irrelevant gekennzeichnete Elemente vom Browser ausblenden lassen können, fehlt nur noch der entsprechende JavaScript Code, um dies auch dynamisch per Mausklick durchführen zu können:

 
function hide(elementId) {
  var el = document.getElementById(elementId);
  el.setAttribute('irrelevant',true);
}
function show(elementId) {
  var el = document.getElementById(elementId);
  el.removeAttribute('irrelevant');
}
 

Fazit

Wie man sieht, kann man schon heute bestimmte HTML5 Features verwenden und so die eigenen Seiten für die Zukunft vorbereiten. Ob man das auch tun sollte, sei jedem selbst überlassen. Da ältere Browser möglicherweise mit den hier gezeigten Beispielen nicht zurecht kommen, ist dies nicht unter allen Umständen die beste Wahl. Aber da in den entsprechenden Browsern in dem Fall die zu versteckenden Inhalte einfach angezeigt werden würden, wäre auch kein größerer Schaden entstanden.

• CSS Formular Design – Textfelder
• Die Sprache eines Links kennzeichnen
• Wirklich einfache JavaScript Tooltips
• CSS Auswahlliste mit Checkboxen
• Unsicher Objekte unter SSL in IE

Warum ich solch eine Schwachsinn schreibe? Okay, bevor mir jemand die Tastatur aus der Hand reißt... Was ich mit der Überschrift eigentlich sagen wollte: Firefox unterstützt in der Version 3 nun endlich auch Sollumbrüche in Wörtern. Und zwar solche, bei denen der Trennstrich nur dann angezeigt wird, wenn der Umbruch wirklich benötigt wird. Diese "bedingten Trennstriche", oder im Englischen auch "soft hyphen" genannt, werden durch das Zeilenumbruch-Entity &shy; im HTML Text definiert.

Im folgenden Beispiel wird das vielleicht deutlich:

 
<p>Soll&shy;um&shy;brü&shy;che können in Wörtern eingefügt
 werden, welche ohne bedingte
 Zei&shy;len&shy;um&shy;brü&shy;che nicht richtig umbrechen</p>
 

Soft Hyphen = &shy; = schüchtern

Gut, damit hätten wir das Rätsel auch geklärt. Aber "schüchtern" finde ich in diesem Zusammenhang gar nicht mal so unangebracht. Denn was auf dem ersten Blick vielleicht verlockend erscheint, nämlich den bedingten Trennstrich in jedem Wort eines Textes unterzubringen, ist natürlich auf dem zweiten Blick mehr als bedenklich.

Damit würde man den HTML Code erheblich aufblähen und die Leserlichkeit von Text im HTML deutlich erschweren. Wer solch einen Text später nach bearbeiten muss, wird sicherlich nicht viel Freude an dieser Arbeit haben.

Darum sollte man den bedingten Trennstrich nur "sehr schüchtern" anwenden, also nur an Stellen, bei denen es sonst zu Problemen in der Darstellung kommen könnte. Ich könnte mir z.B. Label Elemente in einem Formular vorstellen, welche nur eine bestimmte Breite haben sollen und wo man damit zu lange Wörter zum Umbruch zwingen kann, ohne dass das Layout des Formulars zerschossen wird. Hier findet Ihr ein Beispiel dafür, wie man ansprechende Formulare erstellt. Das Gleiche könnte auch auf Spaltenüberschriften einer Tabelle zutreffen, welche nur eine bestimmte Breite haben sollen.

Fazit

Ich finde es gut, dass Firefox 3 nun auch bedingte Trennstriche unterstützt, zumal der IE dies schon seit einigen Jahren kann. Weise und sparsam angewendet, können sie sicherlich sehr hilfreich sein. Doch im Netzt gibt es auch Bedenken darüber, was die Verwendung von bedingten Trennstrichen angeht. Was haltet Ihr davon?

• CSS Formular Design – Textfelder
• Kleine Style Tricks – große Wirkung
• Ist display=”none” jetzt irrelevant?
• Wie man wirklich ansprechende Formulare erstellt
• Spread Firefox – 1.000.000 Downloads in 10 Tagen