Star Trek wird 40

40 Jahre Star Trek

Ab 8. September 1966 wurde im amerikanischen Fernsehen die erste Star Trek Episode, Das letzte seiner Art (The Man Trap) ausgestrahlt.

Das ist jetzt 40 Jahre her. Es folgten 725 weitere Episoden in 6 verschiedenen Serien und 10 Kinofilme. An einem 11. Star Trek Film wird bereits gearbeitet.

Der bekannte Science Fiction Autor Thomas Höhl hat zusammen mit Mike Hillenbrand das Buch Star Trek: Dies sind die Abenteuer… geschrieben. 40 Kapitel aus 40 Jahren Star Trek. Das 400-seiten starke Buch habe ich mir bereits vorbestellt ;-) Wir wurden für das Buch von Thomas beim Trekdinner interviewt.

Aber auch heute in genau einem Monat findet der München Marathon statt. Was das mit Star Trek zu tun hat? Ich laufe dieses Jahr als Klingone beim Marathon mit und sammle zusammen mit Pumuckl & weiteren kostümierten Läufern Spenden für den Horizont e.V.. Der Horizont e.V. ist eine Initiative von Jutta Speidel für obdachlose Kinder und deren Mütter. Ich freue mich sehr auf eure Unterstützung (Anfeuern, Spenden, Mitlaufen…) beim Marathon.

40 Jahre Star Trek

Star Trek wird bald 40 Jahre alt. Um genau zu sein am 8. Steptember. Die erste Folge ‚“Das Letzte seiner Art / The Man Trap“ wurde dann vor vier Jahrzenten das erste Mal ausgestrahlt. Respekt. Es folgten 78 weitere Episoden (inkl. des ersten Pilotfilms „Der Käfig / The cage„). Inzwischen gibt es sechs Serien (Zeichentrick mitgerechnet) und zehn Kinofilme. Alles zusammen also 726 Episoden und 10 Filme. Der 11. Film ist in Vorbereitung.

Thomas Höhl, Mitglied des Trekdinner München (Das Trekdinner wird nächstes Jahr 15!!) hat für den Heel-Verlag deswegen das 400seitige Buch „Dies sind die Abenteuer – 40 Kapitel aus 40 Jahren Star Trek“ geschrieben. Wir haben dieses bereits bei Amazon bestellt ;-) Auch wenn es erst im September erscheint.

Input Buttons vs. echte Buttons

Seit Jahren verwende ich <input type=“submit“ value=“Beschriftung“ /> um ein Formular abzuschicken. Mit CSS hat man da aber so seine Probleme. <input /> sind Eingabefelder. Und diese formatiere ich über CSS auch. Leider wurden dadruch auch immer die Absenden- und Abbrechen-Buttons mitformatiert.

Warum nehme ich eigentlich nicht die <button>-Tags her? Der IE hat zwar noch leichte interpretationsschwierigkeiten, diese sind aber nicht so schlimm.

Also statt <input type=“submit“ name=“save“ value=“abschicken“ /> kann ich <button type=“submit“ name=“save“>abschicken</button> verwenden. Der Bug im IE bezieht sich auf das value-Attribut. Eigentlich sollte er, wenn vorhanden, bei Buttons den Wert von value abschicken. Er schickt aber die Beschriftung ab.

Mehr dazu bei SelfHTML.

Laufend gute Ideen: Tabbed Navigation

Beim Joggen habe ich eigentlich immer die eine oder andere gute Idee. Diesmal habe ich mir Gedanken zum Thema Tabbed Navigation gemacht. Tabbed ist in. Firefox und Opera haben schon seit langem Tabbed Browsing. Microsoft hat seinem Internet Explorer in der Version 7 nun auch dieses Feature verpaßt. Aber auch das neue Menü von Microsoft Office 2007 ist Tabbed-basiert. Die Eigenschaftsfenster von Windows hatten schon lange Reiter. Auch die Eigenschaften in vielen Content Management Systemen werden über Reiter verwaltet. Auch auf Websites allgemein sind diese Tabs/Reiter immer öfters zu finden.

Tab-basierte Navigation gibt es überall

Ich habe mir überlegt, wie ich eine Seite mit „Tabbed Content“ aufbauen würde. Es wäre natürlich möglich, das ganze statisch zu realisieren. Aber ich will es mit JavaScript realisieren. Die Inhalte sollten jedoch trotzdem für alle lesbar sein. Daher würde ich den Code wie folgt aufbauen:

<ul>
<li><a href="#inhalt_1">Inhalt 1</a></li>
<li><a href="#inhalt_2">Inhalt 2</a></li>
<li><a href="#inhalt_3">Inhalt 3</a></li>
</ul>
<div id="inhaltsbox">
<div id="inhalt_1">
<h2>Inhalt 1</h2>
<p>Lorem Ipsum und so weiter.</p>
<p>Nochmal ein Absatz.</p>
</div>
<div id="inhalt_2">
<h2>Inhalt 2</h2>
<h3>Eine Überschrift</h3>
<p>Nochmal ein Absatz.</p>
</div>
<div id="inhalt_3">
<h2>Inhalt 3</h2>
<p>Lorem Ipsum und so weiter.</p>
<p>Nochmal ein Absatz.</p>
</div>
</div>

Bei XHTML gehen die internen Verweise auf die IDs. Bei HTML4 würde ich noch ein <a name=“inhalt_1″></a> einfügen.

Jetzt habe ich oben eine Liste mit den Links auf die Inhalte. Die Inhalte selber werden im Moment untereinander dargestellt. Mit CSS kann ich die Linkliste oben leicht umformatieren und als Buttons oder auch im Reiter-Design nebeneinander setzen. Die Inhalte kann ich mit display: none; verstecken, bzw. mit display: block; wieder anzeigen.

Das Ein- und Ausblenden erfolgt über JavaScript. Die CSS-Eigenschaften display: none; würde ich jedoch nur über JavaScript den Inhalten zuweisen. Ohne JavaScript würden die Texte untereinander angezeigt werden. Die Inhalts-Überschriften (h2) würde ich mit JavaScript immer ausblenden.

Somit hätte ich für Leute mit JavaScript einen Tabbed Content, für Besucher ohne JavaScript die Texte lesbar untereinander mit direkten Sprungadressen ;-)

Billiges Lego

Seit Monaten sehe ich immer öfters Legoähnliche Produkte in den Geschäften rumliegen. Mega Bloks nennen diese sich. Ob die mit Lego kompatible sind? Ich hoffe nicht. Kampfjet, Panzer… Kriegsspielzeug. Ob aufgrund der Mega Bloks Lego inzwischen auch so einen Schwachsinn produziert? Inzwischen weiß ich, warum Mega Bloks im Geschäft zu finden ist: Welt.de: Krieg der Klötze.

Aber ich bilde mir lieber meine eigene Meinung. Also habe ich mich entschlossen eines dieser Produkte zu kaufen. Ich habe mich für ein kleines gelbes U-Boot (2,99 Euro) entschieden. Verpackung ist eine einfach Chipstüte. Laut Verpackung sind es 50+ Teile…

Mega Bloks U-Boot

Wenn man alles komplett zerlegt (inkl. der Mensch) sind es mit den Ersatzteilen 58 Teile. Wenn man die Ersatzteile nicht mitzählt und die klappteile als eine Einheit sieht, sind es 49. Okay, die Klappe vom Menschen fällt dauernd ab.

Mega Bloks Helm ist entweder zu klein oder das Visier zu groß

Wie schaut es mit der Kompatbilität aus? Sie sind kompatibel :-(

Lego kann mit Mega Blogs kombiniert werden

Die Original Lego Figuren sind schöner. Eindeutig. Außerdem passen die Visiere besser. Die Hände der Mega Bloks-Figuren lassen sich nicht drehen – jedoch kann der Arm etwas mehr bewegt werden.

Mega Bloks Figur im Vergleich mit einer echten Lego Figur

Seitdem ich mich mit Lego beschäftige sind immer mal wieder Teile durch unvorsichtigkeit beschädigt worden. Daher habe ich auch einen leichtes Belastungstest gemacht. Der Stein hat sich sehr leicht verbiegen lassen.

Mega Bloks Steine lassen sich leichter verbieten als Lego Steine

Einen Kau- oder Klebetest habe ich jetzt nicht gemacht. Eltern die solche Modelle zusammenkleben wollen, sollen es ruhig tun – solange es kein echtes Lego ist! Man sollte auch nicht auf den Steinen kauen – aber wenn Kinder die Steine kauen, dann bitte einen echten Legostein. Ich vertraue darauf, dass Lego keine giftigen Substanzen enthält… ob das bei Mega Bloks auch zutrifft, weiß ich nicht. Die Steine wirken auf mich jedenfalls sehr billig gemacht. Die Anleitung erinnert an asiatische Billigprodukte.

Mein Fazit: Ich bleibe beim hochwertigem Original!

Mein Fazit: Mega Bloks kommen mir nicht ins Haus!

Eine CSS-Klasse weniger

Ich habe heute meinen HTML-Code leicht verändert. Aber erstmal von vorne. Meine linke Navigation (mainmenu) habe ich als Liste aufgebaut:

<ul>
<li><a href="/link_1/">Link 1</a></li>
<li><a href="/link_2/">Link 2</a>
<ul>
<li><a href="/link_2/sub_1/">Sub 1</a></li>
<li><a href="/link_2/sub_2/">Sub 2</a></li>
</ul>
</li>
<li><a href="/link_3/">Link 3</a></li>
</ul>

Das kann ich mit CSS sehr gut formatieren und ist auch ohne CSS sehr gut lesbar. Als nächstes habe ich den aktuellen Navigationspunkt mit einer Klasse active gekennzeichnet.

<style type="text/css">
.active { font-weight: bold; color: #f00; }
</style>
<ul>
<li><a href="/link_1/">Link 1</a></li>
<li><a class="active" href="/link_2/">Link 2</a>
<ul>
<li><a href="/link_2/sub_1/">Sub 1</a></li>
<li><a class="active" href="/link_2/sub_2/">Sub 2</a></li>
</ul>
</li>
<li><a href="/link_3/">Link 3</a></li>
</ul>

Dadurch wurde der Link „Link 2“ und „Sub 2“ über CSS entsprechend gekennzeichnet und jeder konnte sofort sehen, wo er sich befindet. Wirklich jeder? Nein! Für Besucher ohne CSS ist das nicht ersichtlich. Warum mache ich das eigentlich so umständlich? Mit <strong> habe ich doch den gleichen Effekt. Ich will dem Besucher zeigen, wo er sich befindet. Ob der Text jetzt Rot oder Schwarz ist, ist egal – solange er z.B. sich durch Fettdruck von den anderen Navigationspunkten abhebt.

<style type="text/css">
strong a { font-weight: bold; color: #f00; }
</style>
<ul>
<li><a href="/link_1/">Link 1</a></li>
<li><strong><a href="/link_2/">Link 2</a></strong>
<ul>
<li><a href="/link_2/sub_1/">Sub 1</a></li>
<li><strong><a href="/link_2/sub_2/">Sub 2</a></strong></li>
</ul>
</li>
<li><a href="/link_3/">Link 3</a></li>
</ul>

Die CSS-Eigenschaften der ursprünglichen Klasse kann ich direkt übernehmen. Statt .active verwendet ich als Selektor einfach strong a (bzw. strong a:link, strong a:visited …). Zudem ist der Text des Navigationspunkt als „wichtig“ markiert – und da es meistens inhaltlich zur Seite paßt könnte sich das positiv auf Suchmaschinen auswirken (ist nur eine Vermutung).

Warum ich <strong><a>..</a></strong> und nicht <a><strong>..</strong></a> schreibe? Ich gebe <a> im Mainmenu über CSS gerne die Eigenschaft display: block; und verwenden border und background. Dadurch, dass <strong> außerhalb von <a> ist, kann ich über den CSS-Selektor strong a sehr einfach z.B. eine andere Hintergrundfarbe für den gekennzeichneten Menueintrag verwenden.

Warum ist der aktuelle Menüpunkt verlinkt? Okay, Links die auf sich selber zeigen könnten den Besucher verwirren. Auch wurde mir von dieser Methode gelegentlich abgeraten. Es sei kein Mehrwert. Besucher und Suchmaschinen würde man nur verwirren.
Ich bin der Meinung, dass ich dem Besucher damit die Möglichkeit gebe auf übergeordnete Bereiche oder die Startseite eines Menüeintrags zurückspringen zu können – nicht jeder Inhalt ist im Mainmenu vorhanden – auch wenn man gerade auf dieser Startseite ist. Durch <strong> kann der Besucher sehen, wo er sich befindet und ich glaube nicht, dass ein Besucher nochmal auf den Menupunkt klickt, den er gerade ausgewählt hatte.

Geniale CSS-Bücher

CSS (Cascading Style Sheet) ist ein sehr mächtiges Werkzeug. Aber richtig einsetzen tun es die wenigstens. Immer wieder entdecke ich auf Websites Klassenbezeichnungen mit <div class="wichtigeUeberschrift">Irgendas</div> oder <span class="blauerText"></span>. In HTML werden irgendwelche komischen Dinge aufgebaut, die man mit CSS dann formatiert. Das geht auch anders. HTML sinnvoll einsetzen und dann mit CSS formatieren – (fast) ohne zusätzlichen HTML-Code. Dazu braucht man viel Erfahrung und gute Bücher. Ich habe einige Bücher für Euch angeschaut.

Bulletproof Webdesign ist eines der besten Bücher zu diesem Thema. Hier wird sehr schön der Übergang vom klassischen HTML-Code-Design zum modernen „kugelsicheren“ CSS-Design. Für alte Hasen, die auf den XHTML/CSS-Zug aufspringen wollen, genau das richtige!

Das Buch Professionelles Webdesign mit (X)HTML und CSS ist vorallem für Einsteiger zu empfehlen, welche sich intensiver mit dem Thema Webdesign, Barrierefreiheit und Benutzerfreundlichkeit befassen wollen. Dem Leser werden gute Richtungen gezeigt – aber den Weg muß der Leser selber beschreiten. Professionellese Webdesign lernt man nicht durch Lesen eines Buches, sondern durch die Erfahrungen die man macht. Das Buch hilft, die Richtigen Wege zu finden.