Manuel-Bieh.de – Web-Development & Consulting

von den Autoren Manuela Hoffmann und Björn Seibert.

Mitte bis Ende des Jahres 2005 hatte ich immer öfter mit dem Gedanken gespielt ein Buch zu schreiben. Ein Fachbuch zu einem Thema welches ich gut beherrsche, in einem Bereich in dem ich mich auskenne: Semantisches XHTML und CSS mit all seinen Facetten sollte dieses Thema sein. Irgendwann in dieser Zeit, ich hatte mir gerade grob einige Gedanken über mögliche Themenbereiche gemacht, lüftete Björn Seibert in seinem Weblog das Geheimnis, was es mit seinem bereits öfters angesprochenen »Projekt X« auf sich hat. Er kündigte an das er in Zusammenarbeit mit Manuela Hoffmann ein Buch verfasst hat. Ein Buch das den Titel tragen sollte »Professionelles Webdesign mit XHTML + CSS«.

Im dem Moment als ich die Ankündigung las, durchwühlte mich ein Gefühl irgendwo zwischen »hmpfgrmlargh!!!« und »juhuwunderbar!«, da ich wusste das ein Buch von Björn und Manuela zu genau „meinem“ Thema, welches zudem beim rennomierten Galileo Press Verlag erscheint, nur sehr schwer zu toppen sein würde. Also hing ich die Idee erstmal an den Nagel und wartete das Buch ab.

Einige Monate sind nun vergangen seit das Buch veröffentlicht wurde, und mittlerweile hat auch mich ein Exemplar dieses Buches erreicht. (Danke nochmal an dieser Stelle für den werten Spender ;)). Zwar bin ich aufgrund von Stress in Schule und Beruf immernoch nicht dazu gekommen das Buch komplett zu studieren, nach gut der Hälfte kann ich aber dennoch sagen, dass meine Erwartungen die ich hatte, in Punkto »nicht getoppt werden können« in jedem Fall bestätigt worden sind.

In sehr vielen Fällen habe ich merken können, dass die Autoren eine mir sehr ähnliche Art haben Formulare, Tabellen oder Seiten generell zu erstellen, an einigen Stellen bot sich auch mir als mittlerweile doch recht erfahrenen Webfrickler ein »Aha!«-Effekt. An einigen wenigen anderen Stellen hingegen war ich dagegen nicht vollständig mit Autor einer Meinung (Textstellen die ich mir dummerweise beim Lesen nicht notiert habe).

Alles in allem kann man ohne Zweifel sagen, dass »Professionelles Webdesign mit XHTML + CSS« ein sehr solides Buch ist. Alle wichtigen Themen werden angesprochen, es wird teilweise sehr ausführlich beschrieben wie Barrieren abgebaut werden können oder worauf man bei der Erstellung semantisch korrekter Internetseiten zu achten hat. Daher wird dieses Buch auch für mich, nachdem ich denn mal dazu gekommen bin es vollständig zu lesen, in jedem Fall wohl die nächsten Wochen und Monate (und Jahre[?]) ein schönes Nachschlagewerk bilden, zu Themen, welche man im Internet nur selten oder kurz beschrieben findet.

Bleibt nur noch zu sagen das der Hinweis »Dieses Buch ist für Anfänger nicht geeignet« direkt auf der ersten Seite, trotz der guten und ausführlichen Beschreibungen nicht umsonst dort steht. Für alle Anderen, die meinen, den Status »Anfänger« abgelegt zu haben, bekommt dieses Buch von mir eine absolute Leseempfehlung ausgesprochen!

Greift zu Leute, solange ich mir nicht überlege doch noch ein Buch zu schreiben ;)

Ich suche dringend einen Händler der mir (höchst unwahrscheinlich) noch eine Schülerversion der ersten Adobe Creative Suite klar machen kann. Noch bin ich bis zum 31.05.2006 Schüler, weswegen ich gern die Möglichkeit nutzen würde, von meinem 35 Euroletten eBay Photoshop 6 auf die Creative Suite umzusteigen, solange ich noch kann.

Da die PhotoShop Demo aus der CS2 bei mir jedoch das halbe System lahmlegte, das CS1 PhotoShop hingegen vollkommen ohne Performanceeinbußen lief, würde ich eigentlich lieber die ältere Version haben. Ich weiß das die CS1 mittlerweile schon gute 2 Jahre auf dem Buckel hat, aber ich gebe die Hoffnung nicht auf, dass es vielleicht noch einen Händler gibt, der eine solche Version noch unverpackt für Schüler wie mich günstig in der Ecke liegen hat.

Sollte sich in den nächsten Tagen niemand melden, nehme ich auch gerne gut gemeinte Angebote für eine günstige CS2-Schülerversion an. Wichtig ist nur, das der ganze Spaß unverpackt, unregistriert und von einem zertifizierten Adobe Händler ist.

Sachdienliche Hinweise bitte an office@manuelbieh.de oder hier an das Kommentarformular richten.

Ich würde gern die URLs hier in der Form wie ich sie jetzt habe (blog/YYYY/MM/DD/Titel) beibehalten (Cool URIs Don’t Change und so …) aber die die Links trotzdem auf blog/titel umstellen. Ohne Datum, ohne irgend ’n anderes Gedöns. Hat jemand ne Ahnung wo ich ein WordPress-Plugin dafür herbekomme das genau das macht?

//update:
Die folgende RewriteRule hab ich mir gerade mal zusammengefrickelt

RewriteRule [^\/]+/[^\/]+/[^\/]+/[^\/]+/[^\/]+/([^\/]+) /www/blog/$1 [R=301]

Und es scheint zu klappen. Alle Links auf /www/blog/2006/04/20/wordpress-permalinkstruktur-andern werden jetzt auf /www/blog/wordpress-permalinkstruktur-andern weitergeleitet. Bisher habe ich noch nichts gefunden was nicht funktioniert. Falls jemand einen toten Link finden sollte, bitte sofort Bescheid sagen! Danke ;)

(Achso, und ganz besonders Danke natürlich auch Dir Till ;))

Überall liest man in letzter Zeit von »Free Ipod«, »Free Laptop« oder ähnlichen Angeboten. Normalerweise melde ich mich bei derartigen Angeboten schon aus Prinzip nicht an. Da mich das Ganze aber reizt, und ich wissen möchte was wirklich hinter diesen Angeboten steckt, werde ich gegen meine Prinzipien verstoßen, und der ganzen Geschichte einen Selbsttest unterziehen.

Ich werde mich jetzt live dort anmelden.

Ein Auszug aus den AGB:

Gratis Internet, Inc. behält sich das Recht vor, die Allgemeinen Geschäftsbedingungen jederzeit und aus jeglichen Gründen, auch ohne vorherige Bekanntmachung, zu ändern. […] Dieses könnte zum Beispiel heißen, dass wir die Anzahl der Personen erhöhen, die Sie werben müssen, oder dass wir den Identifikationsprozess unserer Website ändern. Wir können auch zu jeder Zeit jegliche Prämie, die auf unserer Website aufgelistet sind, widerrufen oder neue Prämien beifügen.

Schonmal ein sehr interessanter Punkt, der mich aber von meinem Vorhaben vorerst nicht abbringen kann. Diesem Risiko stelle ich mich jetzt, ein Zurück gibt es nicht mehr.

Weiter gehts

Freecondoms.com basiert darauf, dass man Punkte verdient und diese Punkte dann gegen Produkte tauscht.

ääh, ja? Freecondoms.com also. Ok, nachgeschaut: Freecondoms.com leitet weiter auf ipod.freepay.com, es handelt sich bei den AGB also wohl um allgemeingültige und sie wurden nicht von einer anderen Seite zusammengeklaut. Nun gut, ich lese weiter.

Ah hier stehts:

Diese Bedingungen gelten für die Benutzung aller Websites, die Gratis Internet, Inc. gehören und von Gratis Internet, Inc. betrieben werden. Alle diese Seiten werden von hier an die „Seite“ genannt.

Aha:

I.2.b. Pro Postanschrift ist nur ein Account erlaubt. Dieses ist nötig, damit wir unseren Werbepartnern hochwertige Kundenkontakte versichern können. Da wir 100% werbegestützt arbeiten, können wir es uns nicht leisten, mehrere Accounts pro Postanschrift zu gestatten.

Ich bin mal gespannt wieviel Post ich dann in den nächsten Tagen bekomme von Firmen von denen ich nie zuvor etwas gehört habe.

Aber immerhin:

I.3. Wenn Sie Ihren Account deaktivieren möchten, bitten wir Sie darum, den Kundenservice mit dieser Bitte zu kontaktieren.

Schön wäre es natürlich wenn damit auch die dann vermutlich haufenweise eintreffende Werbung gestoppt werden könnte. Ein »löschen« würde mir an dieser Stelle zudem besser gefallen. Immerhin wird der Punkt überhaupt angesprochen.

Weiter im Text:

II.1.c. Ein Benutzer muss die gleiche E-Mail-Adresse benutzen, mit der er sich anfangs als Mitglied bei der Gratis Internet, Inc. Website angemeldet hat, damit er bei einer Angebotswahrnehmung eine Gutschrift bekommt.

Gut zu lesen. Ich hätte jetzt direkt eine andere eMail-Adresse benutzt.

Auch interessant:

II.3.b. Ein Benutzer, der sich bei unserer Website angemeldet, muss die Anforderungen innerhalb von 90 Tagen von dem Datum seiner Anmeldung richtig erfüllen, um sich für seine Prämie zu qualifizieren. Diese Anforderungen sind: 1) die Wahrnehmung eines Angebots und 2) das Werben von mindestens 20 einzelnen Personen, die sich als Geworbene über den persönlichen Empfehlungs-Link des Benutzers anmelden und ein Angebot wahrnehmen.

Das heißt in meinen Augen soviel wie: Du musst die geforderten 20 Personen innerhalb von 90 Tagen werben, in diesen 90 Tagen müssen Du und Deine geworbenen Personen jeweils mindestens eins der Angebote wahrgenommen haben – oookay. Dürfte schwierig werden, aber ich lasse mich wie gesagt nicht von meinem Kurs abbringen.

FreePay Order Approval
Gratis Internet Inc
Ben Franklin Station, P.O. Box 14461
Washington, DC 20044-4461

Adresse merken. Dahin muss später das »Formular zur Zulassung einer Bestellung« geschickt werden, sollte ich wirklich schaffen die 20 geforderten Personen zu werben.

Vielleicht noch ganz interessant:

IV.1.a Gratis Internet, Inc. behält sich das Recht vor, alle Geworbene auf Betrug zu überprüfen. Desweiteren behalten wir uns das Recht vor, nach unserem eigenen Ermessen zu bestimmen, welche Geworbene betrügerisch sind, ohne den Gedankengang zu offenbaren.

Also: Bescheißen is’ nich. Hatte ich sowieso nicht vor, ich will ja ehrlich an meinen Acer Aspire 3003WLMi kommen.

V.1.c. Gewöhnliche Gründe, warum Ihr Account gesperrt werden kann: Negative Rückmeldungen von unseren Geschäftspartnern oder unmittelbare Stornierung eines Angebots nach der Wahrnehmung.

Aha. Mit unmittelbar meinen die aber schon unmittelbar sprich sofort? Naja ich werd’s ja merken.

Gut. Soweit das erwähnenswerte aus den AGB. Dann wird mir noch mehrmals mitgeteilt das die Sendung an ein Postfach nicht möglich ist, und ich mich nur einmal bei der Seite anmelden kann.

Ich bin jetzt also angemeldet und muss ein Angebot wahrnehmen. Zur Auswahl stehen:

• Jetzt 4 x Gratis Lotto Spielen!
• Zeitschriften im Abo – 1. Monat kostenlos und eine Gratis-Zugabe!
• Jetzt 30 SMS Gratis senden!
• Abnehmen mit Genuss!

Beim Abo zahle ich 5 Ausgaben einer Zeitschrift und erhalte 6. Nee. Die 30 Gratis SMS kosten „1 € Schutzgebühr“ den man nach Ablauf der Probezeit zurückbekommt. Nee, auch nicht so das Wahre. Das Nächste: Abnehmen mit Genuss. Vielleicht genau das Richtige für mich, kostet jedoch ebenfalls 1 €. Das gefällt mir nicht. Ich entscheide mich für 4 mal kostenlos Lotto spielen. Hört sich doch gut an. Ich gewinne 4 mal im Lotto und brauche dann keine Leute mehr werben da ich dann sowieso genug Geld habe.

Es öffnet sich ein PopUp »Angebotsanweisungen«:

Kostenlose Probezeit von zwei Wochen. Ihre Gutschrift erhalten Sie, wenn Sie mindestens Mitglied für die ganze Probezeit waren und Ihre Daten bei der Anmeldung und nach Überprüfung richtig waren. Falsch- und Doppelanmeldungen werden ausgeschlossen.

Ah hier wird auch meine Frage von oben beantwortet: Gewöhnliche Gründe, warum Ihr Account gesperrt werden kann: […] unmittelbare Stornierung. Ich kann also prinzipiell nach 2 Wochen Mitgliedschaft stornieren. Mal in den Kalender eintragen, nicht das ich hinterher eine volle Mitgliedschaft abschließe und mein kostenloser Laptop damit hinterher garnicht mehr kostenlos ist.

Im Mitgliedsbereich von FreePay lese ich indes folgendes:

Sie haben bis zum 18/7/2006, um alle Anforderungen zu erfüllen, einschließlich der Sammlung der erforderlichen Anzahl von bestätigten Geworbenen.

Meine Vermutungen waren also richtig. Ich habe also jetzt 90 Tage Zeit um fleißig Leute zu werben. Dann wollen wir mal keine Zeit verlieren und direkt mit dem Werben anfangen.

Wer mich also beim Kampf um den gratis und total kostenlosen saugeilen free Laptop zu unterstützen oder sich diesem Kampf ebenfalls stellen möchte, der tut dies bitte mit dem folgenden Link (natürlich auf eigene Gefahr):

http://laptops.freepay.com/?r=29532826

Also noch einmal zusammenfassend und kurz:

• Ihr meldet euch bei laptops.freepay.com an …
• Ihr erhaltet dann eine persönliche RefererID mit der Ihr Leute werben könnt …
• Ihr entscheidet Euch für eins der 4 angebotenen Services und bleibt dort während der kompletten 14 tägigen Probezeit Mitglied …
• Ihr leitet 20 Leute an FreePay weiter …
• … und dann erhaltet Ihr ein nagelneues und für euch völlig kostenloses Laptop wenn Ihr alles richtig gemacht habt. Oder auch nicht, wir werden es sehen, ich werde berichten.

Ich werde jedesmal sobald es Neuigkeiten gibt hier an dieser Stelle berichten. Also schaut ruhig öfters mal rein!

Nochmal zum Mitschreiben: Das ß (Esszet, ſʒ, scharfes S, …) gibt es nicht als Majuskel! Im Versalsatz schreibt man stattdessen SS.

Ein gelungenes Beispiel wie man es nicht machen sollte, weil es nicht nur falsch ist, sondern auch scheiße aussieht:

Mehr Infos dazu gibts hier bei Wikipedia.

Der Eine oder Andere möchte sich ja zwecks Archivierungszwecken doch gerne einmal interessante Internetseiten ausdrucken. Leider bieten aber auch heute noch nur die wenigsten Webauftritte speziell für den Druck angefertigte Stylesheets. Dies jedoch ist, seitdem gängige Browser CSS im mehr oder weniger großen Umfang unterstützen, problemlos möglich. Die wesentlichen Schritte zum einfachen, aber dennoch effektiven Druckstylesheet sind dabei nicht einmal schwer umzusetzen oder mit einem hohem Aufwand verbunden.

So ist es bei der Einbindung in ein Dokument möglich, ein Stylesheet zum Beispiel nur für den Druck zu definieren. Oder nur für den Bildschirm. Dazu muss lediglich das media-Attribut für das Stylesheet angeführt werden:
<link href="print.css" rel="stylesheet" type="text/css" media="print" />
<link href="screen.css" rel="stylesheet" type="text/css" media="screen" />

Stylesheets, welche kein media-Attribut erhalten, gelten dabei für alle Ausgabegeräte. Testen lassen sich alle Änderungen die für die Druckversion vorgenommen wurden im Übrigen direkt im Browser, ohne einen Testausdruck, bequem über die Druckvorschau.

Grundlegendes zum Druck-Stylesheet

Macht eine Angabe in Zentimetern oder Millimetern am Bildschirm weniger Sinn, so wird ihr im Druck eine besondere Aufmerksamkeit zuteil. In der Druckausgabe eines Dokuments können, bzw. sollten natürlich Werte wie cm, mm, in, pt oder pc für Abstände, Höhen- oder auch Breitenangaben benutzt werden.

Ferner sollte im Print-Stylesheet alles für gute Lesbarkeit vorbereitet werden. Ein gutes Beispiel hierfür sind Hintergrundbilder. In der Regel werden diese von Browsern von Haus aus nicht mit gedruckt. Je nach Browsereinstellung kann das aber schon einmal vorkommen. Hintergründe verbrauchen unnötig Toner und lassen mitunter die Lesbarkeit sehr leiden. Um dies zu vermeiden sollte der Hintergrund daher zuerst einmal für alle Elemente auf Papierweiß gesetzt werden:

* {background: white;}

Wie schon bei Breiten- und Höhenangaben des Dokuments sollte auch bei der Größenangabe für Schrift umgedacht werden. Denn auf dem Papier kommt es weniger auf Pixel oder relative Angaben, die auf Einstellungen des Browsers beruhen an. Stattdessen kann hier getrost auf gängige Werteinheiten wie Punkt und Pica zurückgegriffen werden. Ein Punkt entspricht dabei der üblichen Größe von 1/72 Zoll, ein Pica entspricht 12 Punkt. Als kleinste im Druck noch lesbare Schriftgröße gilt eine Größe von 6pt, dennoch sollte man bei der Wahl des Schriftgrades natürlich ein wenig großzügiger sein, und sich bei den 6pt nur auf generell sehr viel weniger wichtige Rand- oder Fußnoten beschränken.

Weitere Schritte

Hat man die oben beschriebenen, grundlegenden Schritte abgearbeitet, kann es nun ins Detail gehen. Das Wichtigste ist es, sich zu Anfang erst einmal Gedanken zu machen, welche Elemente und Informationen der User auf dem Ausdruck wirklich benötigt. So ist eine Navigation auf einer Internetseite eine echt nützliche Sache, auf dem Papier hilft sie jedoch recht wenig. Stattdessen sollte man sich überlegen, ob es nicht viel eher nötig ist, die entsprechende Seitenrubrik auf dem Ausdruck zu kennzeichnen, und wenn ja, wie man das am besten anstellt. Geht man von einer gängigen Listennavigation aus bei dem der aktive Punkt als eben dieser gekennzeichnet ist:

<ul id="navigation">
  <li><a href="#">Beispiel</a></li>
  <li><a href="#">Punkt 2</a></li>
  <li class="aktiv"><a href="#">Rubrik 3</a></li>
  <li><a href="#">Test</a></li>
</ul>

so lassen sich mit der folgenden Notation im Druckstylesheet die inaktiven Menüpunkte sehr leicht ausblenden:

#navigation li {
    display: none;
}
#navigation li.aktiv {
    display: inline;
}

Stehen bleibt in diesem Fall nur der Menüpunkt, der mit der Klasse .aktiv gekennzeichnet ist. Dieser Menüpunkt lässt sich nun beliebig weiter formatieren und beispielsweise durch Positionierung (position) am Rand des Ausdrucks platzieren. Damit der User auch später noch weiß worum es sich auf dem Ausdruck bei »Rubrik 3« handelt, kann man dies optional mittels :before Pseudoelement kennzeichnen. Etwa:
#navigation .aktiv:before {content: "Aktive Rubrik » ";}

Fehlerfrei funktioniert dies allerdings erst in neueren Gecko- oder KHTML-Browsern die sich an die Vorgaben des W3C halten, wie zum Beispiel dem Mozilla Firefox oder dem Safari Browser auf dem Mac.

Natürlich lassen sich mit dieser Methode nicht nur Navigationen oder Unternavigationen im Druck ausblenden. Auch Werbebanner, Animationen, irrelevante Formulare oder Bildelemente können so mit einfachsten Mitteln vom Ausdruck ausgeschlossen werden. Notwendig ist dazu einfach, das jeweilige Element in der print.css, mit einem .element {display: none;} zu versehen.

Eine andere, weniger elegante Lösung kann sein, nicht zu druckende Elemente mit einer Klasse class="screenonly" zu versehen, welche im Print-Stylesheet ebenfalls mit .screenonly {display: none;} notiert wird. Allen Teilen des Dokuments, die für den Benutzer nur am Bildschirm zu sehen sein sollen, können von nun an mit <e class="screenonly"> für die reine Bildschirmausgabe gekennzeichnet werden. Ob diese Variante semantisch absolut Korrektheit ist, darüber lässt sich an dieser Stelle philosophieren.

Feintuning

Neben der Navigation kann natürlich auch der Fließtext Hyperlinks enthalten mit denen man auf einem späteren Ausdruck nicht mehr viel anfangen kann – solange man sich nicht ausreichend darum kümmert. Links lassen sich dabei nach dem gleichen Prinzip wie man einen aktiven Menüpunkt hervorhebt, ebenfalls kennzeichnen. Sinnvoll ist an dieser Stelle ein Hinweis, dass es sich um einen externen Link handelt, sowie, denn sonst bringt auch der Hinweis nicht viel, der Link an sich:
a:after {content: " - Externer Link: " attr(href);}

Ein Konstrukt wie <a href="http://www.drweb.de">Dr. Web</a> erscheint somit auf dem Ausdruck wie folgt: Dr. Web – Externer Link: http://www.drweb.de.

Arbeitet man diese Liste strukturiert ab, so sollte man dem User bereits ein großes Stück entgegen gekommen sein, was den Informationsgehalt auf dem Ausdruck und auch den Verbrauch an Toner und Papier angeht. Weitere Möglichkeiten bieten sich ab Level 3 der Cascading Stylesheets, womit es möglich sein wird, Umbrüche, Hurenkinder und Schusterjungen zu kontrollieren und sinnvoll zu steuern. Die Unterstützung seitens der Browser in diesem Punkt ist jedoch aktuell nicht bzw. nur sehr rudimentär gegeben.

Dieser Artikel erschien am 07.03.2006 bei Dr.Web + (kostenpflichtig)

Ja, Ihr hört richtig. Ab 0 Uhr wird es diese Seite hier 24 Stunden ohne Design geben. Anlass ist der »First Annual CSS Naked Day« den Dustin Diaz ins Leben gerufen hat mit dem Vorhaben für die Einhaltung von Webstandards zu werben. Da mach ich doch gerne mit!

Mehr Infos unter http://www.dustindiaz.com/naked-day/

Kann mir jemand sagen was mit google los ist? Seit ca. 4-5 Tagen haben sich die Besucherzahlen auf zwei meiner Seiten halbiert, auf einer sind sie sogar um mehr als drei Viertel zurückgegangen. Hängt das mit der »Big Daddy« Sache zusammen?

Da merkt man erstmal wieder wie wichtig das große G doch sein kann für eine Seite die die meisten Ihrer Besucher über Suchmaschinen bezieht.