Zunächst einmal habe ich natürlich die neuste Eclipse-Version (derzeit Helios) in der Variante für Java Entwickler installiert.

Dazu gesellen sich eine Reihe an Plugins:

Und da ich schon weiß, dass sich gleich wieder die Netbeans-Benutzer zu Wort melden werden: man teilt Eclipse einfach ein wenig mehr Arbeitsspeicher zu und optimiert an ein paar Stellen und alles läuft rund und flüssig

Meine Code-Boxen werden folgendermaßen formatiert:

pre {
  background: #333;
  border: 1px solid #333;
  color: #fff;
  font: 12px "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
  overflow: auto;
  padding: 10px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

pre * {
  font: 12px "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
}

Wenn man WordPress benutzt, kann man solche Quellcodes bequem über den Schrifttyp monospace (steht in der Auswahlbox zusammen mit den Überschriften etc) nutzen.

Natürlich ist Webdesign ein irre breit gefächertes Feld. Für den Anfang (und darüber hinaus) halte ich PHP als Programmiersprache für Webanwendungen für sehr sinnvoll. Außer Acht gelassen habe ich nun natürlich komplett Ruby on Rails, .NET und so weiter. Nicht desto trotz: schreibt mir Kommentare! Egal ob zu PHP, Ruby on Rails, jQuery, whatever…

Die Lösung ist eigentlich ganz einfach. JavaScript-Code bindest du wie folgt in dein XHTML-Dokument ein:

<script type="text/javascript">
  /* <![CDATA[ */
    // JavaScript-Code hier hin
  /* ]]> */
</script>

Kurze Erklärung: die Angabe von CDATA veranlasst den Browser, den Code im CDATA-Block nicht auf Standard-Konformität hin zu validieren. Die Angabe als Kommentar (also zwischen /* und */) ist deshalb nötig, da ältere Browser die Angabe von CDATA nicht unterstützen.

[via Maik]

Zunächst wollte die GoogleMaps-Blogroll garnicht mehr laufen, sodass ich beschlossen habe, mein Plugin einmal komplett neu zu schreiben und dabei gleich zu verbessern. Allerdings hatte ich die ganze Zeit Probleme mit der Darstellung der Popups:

Nachdem ich stundenlang nach Fehlern gesucht habe und an mir selbst zweifelte, habe ich einmal kurz das 2010-Design gegen ein anderes Design ausgewechselt und siehe da: es läuft!

Ich weiß noch nicht, wie ich mit dem Fehler umgehen werde. Vielleicht werde ich den “Verantwortlichen” einen Bugreport zukommen lassen. Bis auf weiteres deaktiviere ich aber die GoogleMaps-Blogroll und es kommt vorerst die Standard-Blogroll zum Einsatz.

Wenn der Fehler auch noch in der finalen WordPress 3.0-Version auftritt, werde ich versuchen, den Fehler im CSS-Markup ausfindig zu machen. Wenn jemand von euch einen Tipp hat: immer her damit!

Sollte ich eine Lösung für das Problem finden, werde ich natürlich nochmal einen gesonderten Artikel darüber verfassen.

P.S.: Eben habe ich noch einen Bug in WordPress 3.0 gefunden. Beim Erstellen eines Hyperlinks über mehrere Zeilen im grafischen Editor wird nur die erste markierte Zeile verlinkt. Kann mir jemand sagen, wo ich Bugreports eintragen kann?

Nun habe ich aber folgende optische Unschönheit: wenn der Content beim Aufklappen länger wird als die Seite, dann ruckt das ganze Bild einmal nach Links, wenn sich die Scrollbars aktivieren, bzw. nach rechts, wenn der Inhalt wieder zugeklappt wird und die Webseite wieder vollständig vertikal in das Browserfenster passt und sich die Scrollbars wieder ausblenden.

Deshalb habe ich danach gesucht, wie man die Scrollbars immer anzeigen kann. Dazu behilft man sich mit einem simplen CSS-Trick. Es existieren zwar für dieses Szenario Browser-abhängige CSS-Markups, aber diese sind nicht standard-valide und man kann nicht davon ausgehen, dass das Markup in allen Browsern läuft.

Die Lösung ist folgende: man sagt dem Browser, dass der HTML-Inhalt etwas größer als 100% ist:

html {
   height: 101%;
}

Ich habe das Ganze nur einmal kurz mit Firefox 3.6.3 und im Internet Explorer 8 getestet. Funktioniert bei beiden prima. Zwar kann der Benutzer nun auf jeder Seite um ein paar Pixel scrollen, das nehme ich aber lieber in Kauf, als das die Seite immer hin- und herspringt

Für das zukünftige CSS3 ist die Eigenschaft

border-radius

vorgesehen. Diese Eigenschaft sollte man jetzt schon verwenden, auch wenn bisher kaum ein Browser diese Eigenschaft versteht. Für Mozilla-basierte Browser kann man bereits

-moz-border-radius

verwenden. Webkit-basierte Browser verstehen hingegen

-webkit-border-radius

Dann fehlt noch Opera mit

-opera-border-radius

und KHTML-basierte Browser mit

-khtml-border-radius

Im produktiven Einsatz könnte eine CSS-Definition z.B. so aussehen:

.rounded {
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   -opera-border-radius: 5px;
   -khtml-border-radius: 5px;
}

Mit dieser Definition würden alle 4 Ecken eines Elementes mit 5px abgerundet werden. Möchte man nur bestimmte Ecken abrunden, kann man folgende Syntax verwenden:

Rundung: oben links, oben rechts, unten rechts, unten Links;

Um also z.B. nur oben links und unten rechts mit 3px abzurunden, verwendet man folgenden Eintrag (hier nur am Beispiel von border-radius):

border-radius: 3px 0px 3px 0px;

Ich hoffe, dass das Ganze verständlich ist. Bei Fragen könnt ihr mir gerne einen Kommentar schreiben

• den Quellcode verschlankt und umstrukturiert, sodass ich besser Änderungen vornehmen kann,
• überflüssigen CSS-Code rausgeschmissen,
• die Navigation überarbeitet,
• Kommentarfunktion neu designed,
• Artikelüberschriften überarbeitet (Tags sind rausgeflogen, neue Schriftart, Vereinheitlichung auf Index- und Artikelseite),
• Grafiken eingespart (oben im Header ist nurnoch ein Verlauf gekachelt, statt ein großes Bild),
• die Suche umplatziert und
• den Schatten entfernt.

Bitte gebt mir Feedback, was ihr besser und/oder was ihr schlechter findet. Auch für ganz neuen Ideen bin ich offen. Sobald das Design dann einen “allgemein zufriedenstellenden Status” erreicht, werde ich das alte Design löschen und den Theme Switcher wieder entfernen.

P.S.: Wenn ihr Fehler findet, natürlich sofort melden