• Blue Beanie Tag

Am Dienstag den 30. November ist also wieder Zeit für die blauen Mützen… Worum es geht? Webstandards und Zugänglichkeit (Accessibility) sollen ins Bewußtsein gerückt werden.

Ebenso wie in den letzten Jahren las ich den Aufruf zum Blue Beanie Day zuerst bei Robert.

Was ich letztes Jahr Blaue Mützen : Blue Beanie : Webstandards : Adventskalender schon schrieb, gilt auch heute noch, meine Wunschliste zu Webstandards:

• Inhalte sind wichtig und sollten für alle zugänglich sein (kleines zartgrau auf weiß ist keine lesbare Schrift)
• Grafische Captchas behindern alle Nutzer
• Flash ist kein Designelement (als Navigation ist Flash immer falsch und auch sonst wird Flash oft überflüssigerweise eingesetzt)
• Formularelemente sollen mitwachsen je nach gewählter Schriftgröße (ich nutze eine Mindestschriftgröße und kann oft Formulare nicht nutzen, weil die Felder zu klein bemessen sind)
• valides HTML und CSS tun nicht weh und sind eine Grundlage für bessere Seiten für alle Nutzer

• Kaffeekochensession #bcbs10 @robgreen und @enypsilon

Heute nur mal kurz eine Zusammenfassung des Barcamps an sich, bei etwaigen Rückfragen vertiefe ich gern noch inhaltlich zu meinen Sessions. Eine schöne Übersicht übers Barcamp gibts von Waltraud Kässer von see-online.info, die erstmals bei einem Barcamp war.

Wie immer habe ich die ein oder andere Session verplaudert. Bei der  ein oder anderen habe ich mich jedoch beteiligt:

• GTD Selbstmanagement
• see-online.info – ein lokales Online Magazin
• IPv6 Grundlagen
• Webentwickler trifft Marketing trifft Kunden
• Erfolgreiche Pressemitteilungen

Während des Barcamps gab erstaunlich wenig Momente, in denen ich mich organisatorisch beteiligen konnte/musste. Das meiste ging schlicht nebenbei, mal abgesehen von einem:

@heinzkamke schrieb:

“Großartige Session, geleitet von @miradlo und @enypsilon, beraten von @robgreen: Werkstattbericht Kaffeemaschine #bcbs10”

So ganz geplant war diese  Kaffeekochensession, die heinzkamke so erfreute zwar nicht, aber irgendwie gab’s mit vereinten Kräften (zu sechst) irgendwann doch noch Kaffee. Hätten wir von JanTheofels Anleitung für die Maschine gewusst wäre es nicht zu einer solch intensiven Session gekommen…

• Seehas in einem Garten in Konstanz

Den Link dazu hat Rob wohl inzwischen gefunden oder irgendwer hat ihn drauf hingewiesen, denn in seinem Artikel verweist er darauf. Offenbar blieb die Kaffeeerstellungssession doch bei manchen ebenso im Gedächtnis blieb wie mein Hinweis auf Seehasen.

Es war mein erstes echtes “Heimspielbarcamp”, nicht nur in meiner Stadt, sondern sogar noch an der HTWG, an der sich gar nicht so viel geändert hat. Vieles war noch erstaunlich vertraut, auch wenn es sechs Jahre her ist, dass ich dort studierte. So vertraut, dass mir gar nicht auffiel, was Thorsten von bastamedia ein Foto wert war, denn ich kannte das nur so, seit es das Laufband gab war es immer so… Neu war für mich der
elektronische Sessionplaner, den ich – zumindest in dieser Form – noch für optimierbar halte. Mit schlichten Zetteln ging es bislang halt schneller…

Hintergrund, Idee und weitere Einsatzmöglichkeiten unsers WikiViewers

Ein bisschen habe ich ja bereits über den WikiViewer hier im Blog berichtet. In der Session ging es sowohl um weitere Einsätze, als auch um die Idee die dazu führte. Eine Frage war ob wir daraus ein Produkt machen wollen. Nein, wir wollen den Wikiviewer nicht verkaufen, er soll Open-Source sein, wenn wir etwas verkaufen, dann wird es das Einrichten und Anpassen der Software sein.

Wie üblich waren Roland und ich nur selten in denselben Sessions, diese hatten wir jedoch von vorne herein gemeinsam geplant. @thomasgemperle hat Roland in einer seiner Scrum-Sessions fotografiert.

Coworking

Nach dem Barcamp Liechtenstein habe ich ja schon einmal kurz über Coworking geschrieben. Dieses Mal wollte ich an sich gar keine Session dazu machen und die erste Session dazu am Samstag überschnitt sich mit meinen Plänen. Doch Sonntagmorgen wurde ich gefragt, ob ich nicht etwas dazu machen könnte, deshalb entschloss ich mich spontan dazu. Ziel war Coworking bezogen auf Konstanz zu beleuchten. Ich konnte Harald gewinnen ebenfalls teilzunehmen, er hat in Stuttgart gerade ein solches Projekt auf die Beine gestellt: Coworking Stuttgart Von ihm stammt der Hinweis auf die Definition: “Coworking is Barcamp all day“, die mir gut gefällt, denn sie beschreibt den Unterschied zu Bürogemeinschaften deutlich.

Im Moment fehlt mir die Zeit mich da intensiver zu engagieren, aber bis zum Herbst, sollten zwei, drei weitere Treffen und etwas Werbung für die Idee drin sein…

Barcamp Bodensee SEO für Anfänger

Ich bin ja nicht ungeteilter Fan von SEO und liebe das Thema nicht grad sonderlich. Mir fiel jedoch am ersten Tag bei  auf, dass manche in ihren Blogs einige Grundlagen nicht nutzen, die an sich recht einfach umzusetzen sind. Deshalb zeigte ich anhand dieses Blogs ein paar Punkte und erklärte deren Hintergrund:

• was ist ein Quelltext, was sieht man da?
• was ist eine Dokumentstruktur in HTML und wie lässt sich diese realisieren?
• wie sollten Zwischenüberschriften aussehen?
• wie sollte ein Link aussehen?
• warum sind Bildernamen wie img3217329.jpg ungünstig?
• was ist ein alt-Attribut, wozu ist es gedacht, wie lässt es sich nutzen?

Ganz wichtig ist mir bei allen Ideen zur Suchmaschinenoptimierung, dass es unterm Strich nicht nur um die Suchmaschinenoptimierung gehen darf. Denn was helfen die tollsten Besucherzahlen, wenn der optimierte Text am Ende von Besuchern nicht mehr gern gelesen wird.

Blue Beanie Tag

Heute ist Blue Beanie Tag, zuerst las ich bei Robert davon, auch t3n berichtet darüber, es gibt eine facebook-Gruppe. Worum es geht?  Webstandards sollen ins Bewußtsein gerückt werden.

Eine weitere Idee ist: Fünf Sätze zu diesem Thema zu formulieren, die für einen selbst wichtig erscheinen um Webstandards voran zu bringen.

Meine Wunschliste zu Webstandards

• Inhalte sind wichtig und sollten für alle zugänglich sein (kleines zartgrau auf weiß ist keine lesbare Schrift)
• Flash ist kein Designelement (als Navigation ist Flash immer falsch und auch sonst wird Flash oft überflüssigerweise eingesetzt)
• Grafische Captchas behindern alle Nutzer
• Formularelemente sollen ebenfalls mitwachsen je nach gewählter Schriftgröße (ich nutze eine Mindestschriftgröße und kann oft Formulare nicht nutzen, weil die Felder zu klein bemessen sind)
• valides HTML und CSS tun nicht weh und sind eine Grundlage für bessere Seiten für alle Nutzer

Aprospos Webstandards

• Adventskalender Webkrauts

Inzwischen schon traditionell der Adventskalender der Webkrauts . Ab dem 1.12. gibt es wieder täglich einen Beitrag rundum Webstandards von wechselnden Autoren der Webkrauts. Ich bin sicher auch dieses Jahr wieder lesenswert.

Doch irgendwann las ich von dem Tipp, den Button “Medien einbetten” zu nutzen. Wunderbar, da musste ich nur den Link eingeben und alles andere klappte von selbst.

Wieder nicht mehr valide

Gestern habe ich auf uteles Blog wieder mal ein Video eingebunden und zunächst gar nicht überprüft, ob alles passt, weil ich das an sich ja weiß. Aus einem anderen Grund prüfte ich heute kurz und “ups, Mist, Fehler”.

Nun gut, mal kurz nachsehen, was ich wohl falsch gemacht habe; Quelltext des Videos, welches Fehler wirft:

<p><object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0″ height=”350″ width=”425″><param name=”src” value=”http://www.youtube.com/v/Frx0Wc1cxbo”><embed type=”application/x-shockwave-flash” src=”http://www.youtube.com/v/Frx0Wc1cxbo” height=”350″ width=”425″><a class=”mjedzjfsfvwhkvyhhsjp” href=”http://www.youtube.com/v/Frx0Wc1cxbo”></a></object></p>

Ok, stimmt, da steht was von type=”application/x-shockwave-flash” also mal nach einem alten Video schauen und sehen, was sich da unterscheidet:

<p><object data=”http://www.youtube.com/v/6a_KF7TYKVc” type=”application/x-shockwave-flash” height=”350″ width=”425″><param name=”src” value=”http://www.youtube.com/v/6a_KF7TYKVc”></object><a class=”mjedzjfsfvwhkvyhhsjp” href=”http://www.youtube.com/v/6a_KF7TYKVc”></a></p>

Fehlersuche

Ich schaute mir das Ganze mal in der HTML-Ansicht von WordPress an und da stand bei beiden Beiträgen dasselbe (außer dem Link zum Video selbst natürlich):

<object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ width=”425″ height=”350″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0″><param name=”src” value=”http://www.youtube.com/v/MpIOClX1jPE” /><embed type=”application/x-shockwave-flash” width=”425″ height=”350″ src=”http://www.youtube.com/v/MpIOClX1jPE”></embed></object>

Das konnte jedoch irgendwie nicht sein.

Ich versuchte es mit einem weiteren Beitrag mit Video und siehe da, da stand was anderes:

<object width=”425″ height=”350″ data=”http://www.youtube.com/v/Frx0Wc1cxbo” type=”application/x-shockwave-flash”><param name=”src” value=”http://www.youtube.com/v/Frx0Wc1cxbo” /></object>

Reparieren

Ich gab das in HTML-Ansicht des Beitrags ein, und siehe da, schon passt es wieder und die Startseite ist fehlerfrei, die Unterseite hat wie immer den einen Fehler, bei dem der Validator noch nicht auf dem aktuellen Stand ist. Allerdings wieder mit dem alten Problem, nicht mehr auf die visuelle Ansicht umschalten, sonst ist es wieder kaputt.

Ich suchte nochmal, denn irgendwas war da komisch und nach erneutem Öffnen des Beitrags, der zwar gleich aussah aber valide war, sah ich das Problem, es gab eine automatische Speicherung, diese zeigte die falsche Version, aber die tatsächlich publizierte Version war eben doch mit anderem Code.

Fazit

Na prima, da konnte WordPress auf ganz einfache Art mal Videos valide einbinden und jetzt ist es wieder kaputt. Ich hab jetzt nicht gesucht, kann sein irgendein Plugin ist schuld, vielleicht ist es auch grad diese Version und die nächste dann wieder nicht…

Ganz ehrlich: Es ist mir egal, es nervt einfach.

Ich habe heute in der Linkliste auf zwei Beiträge zu flexiblen Layouts hingewiesen.

• Flexible Layouts haben ihre Vorzüge, trotz Seitenzoom der Browser
• Ein weiterer Artikel meint es wäre gut nicht über die flexiblen Layouts zu streiten, sondern sie schlicht als Variante zu sehen.
• In obigem Artikel wird auf mehrere Videos zu YAML verlinkt, die gibt es auch als eine Präsentation, direkt bei Galileo

onli kommentierte daraufhin recht ausführlich. Beim Schreiben meiner Antwort fiel mir auf, dass es ein bisschen lang wird, deshalb jetzt als eigenen Artikel. onli schrieb:

“Ich bin über die Diskussionen über flexible Layouts immer wieder überrascht. Denn eigentlich führt die Diskussion am Thema vorbei. Das eigentliche Problem dürfte sein, dass CSS in derzeitiger Form ungeeignet ist für das, was ein dynamisches Layout erfordert. Man kann viele Dinge einfach nicht zuverlässig erreichen, die nötig wären: Elementen eine dynamische Größe zuordnen, aber mehreren Elementen immer die gleiche. Nachbarbeziehungen, die über ein float hinausgehen usw usf. Sicher, ich bin kein Profi, aber es scheint mir so, als sei die Ursache der Diskussion dergestalt, dass einige notwendige Layoutanforderungen mit dynamischen Layouts nicht oder nur schwer umsetzbar sind. Die Antwort sind dann aber nicht pixelgenaue Layouts, sondern Verbesserungen am Handwerkszeug.

Ich werde mir bei Gelegenheit die verlinkten Videos anschauen, vielleicht beinhalten diese ja Konzepte, die meine obige Argumentation ad absurdum führt, weil damit dann alles so umsetzbar ist wie ich es mir vorstelle. “

Ich habe ja schon mal recht ausführlich über flexible Layouts geschrieben, ein paar Bildbeispiele wie sich flexible Layouts auswirken habe ich anlässlich eines Wechsels des Hintergrunds mal beschrieben.

Meines Erachtens sind flexible Layouts nicht schwierig, wenn man von vorne herein flexibel denkt. Das Hauptproblem ist, dass ein Design auf Papier in fester Größe entworfen wird und dann eben häufig auch nicht mehr so einfach flexibel umgesetzt werden kann.

Design bedeutet häufig, es ist ein Entwurf eines Designers, der gestern einen Flyer in A5 entwarf, morgen ein Plakat in A0 und deshalb heute beim Entwurf einer Webseite in 1024*768 denkt. Solche Entwürfe können sehr schwierig umzusetzen sein und sind oft auch nicht flexibel lösbar.

Für mich ist jedoch die Grundlage des Webs, dass ich eben nicht weiß, welches System, welche Auflösung mein Nutzer gerade verwendet, dass ich nicht weiß, ob er Schriftgrößen ändert und und und.

Ich versuche deshalb Layouts von vorne herein so zu erstellen, dass es nicht wichtig ist,welche Voraussetzungen gegeben sind. Leider ist die Tendenz jedoch nach wie vor, das Optimieren auf eine Auflösung und nicht das Erstellen eines anpassungsfähigen Layouts.

Yaml von Dirk Jesse auf das sich die Videos beziehen ist ein Framework, was den Webautoren schon vieles abnimmt. Enthalten sind in Yaml bereits Definitionen um Browserfehler zu umgehen. Es gibt z.B. auch WordPress-Yaml-Themes, die sich recht einfach anpassen lassen, weil vieles eben bereits berücksichtigt wurde. Der Nachteil ist offensichtlich, ein Framework muss alles berücksichtigen und ist deshalb schon ein dickeres Ding.

Ich selbst nutze natürlich auch Vorlagen und fange nicht bei jedem Layout bei 0 an, aber ich nutze kein Framework. Für meine eigen Layouts kenne ich mittlerweile den größten Teil der möglichen Probleme und ihre Lösung.

Im Gegensatz zu fast allen Designern entwerfe ich Layouts nicht auf Papier, auch nicht in einem Bildbearbeitungsprogramm, sondern wirklich live auf einer Testseite. Ich sehe so viel schneller, welche Idee problematisch werden könnte und überlege mir Alternativen, noch bevor das erste Layout fertig ist.

Ist CSS ungeeignet für Layouts?

onli überlegt, ob CSS nicht einfach ungeeignet ist und sich das Handwerkszeug verbessern müsste. Nein, das glaube ich nicht. Das Hauptproblem bei CSS-Layouts ohne Tabellen und in modernem Design ist nicht das CSS. Die Realisierung für standardkonforme Browser wie Firefox, Opera, Safari usw. die ist nicht so schwierig. Es kommt selten vor, dass es spezielle Anpassungen braucht, um ein Layout für diese Browser wie gewünscht zu realisieren. Das eigentliche Problem sind die alten Versionen der Internet Explorer und leider in manchen Fällen sogar der aktuelle IE8.

Manches ist irgendwann bekannt und lässt sich recht schnell auch für die IEs anpassen. Aber immer mal wieder passiert es, dass wegen eines IE-Fehlers Stunden drauf gehen, um eine Lösung zu finden. Microsoft möchte, dass jeder ihrer Browser auch die Seiten korrekt darstellt, die für eine fehlerhafte Vorgängerversion optimiert wurden. Dabei entstehen immer wieder Probleme und noch hat jede IE-Version teils haarsträubende Fehler. Das kommt zwar auch bei anderen Browsern mal vor, nur falls Firefox 2.14 etwas falsch darstellt, dann ist es das heute beim Stand von Firefox 3 nicht so schlimm, denn nur wenige nutzen aktuell diese eine Version, wenn ein Layout trotzdem lesbar bleibt, käme kaum ein Webautor auf die Idee, wegen dieser einen Version etwas zu ändern. Beim IE hält eine Version “ewig” der immer noch stark verbreitete IE6 ist aus dem Jahr 2001, da gab es noch gar keinen Firefox…

Was ist die Lösung für dynamische Layouts?

Die eine ultimative Lösung gibt es nicht. Denn ein modernes Layout mit dem Anspruch das zu zeigen, was heute Stand der Technik ist, das passt zu modernen Browsern. Der IE6 kommt aus einer Zeit als ganz andere Designs entworfen wurden, für die Layouts seiner Zeit war er auch kein Traum, aber noch akzeptabel. Für heutige Layouts ist er einfach ungeeignet und das führt dazu, dass es sehr aufwändig wird, wenn ein besonderes, aktuelles Design umgesetzt werden soll.

Meine Layouts, die nicht darauf aufbauen, dass sie pixelgenaue Linienführungen haben, lassen sich schon deshalb viel einfacher umsetzen. Außerdem habe ich nicht den Anspruch, dass ein Layout in jedem Browser absolut identisch aussieht. Für mich genügt es, wenn alles lesbar ist und die Optik nicht völlig verschoben. Wenn der IE6 das “miradlo bloggt”-Bildle nicht genauso darstellt wie alle anderen, dann ist mir das egal, es ist nicht so hübsch, aber auch nicht kaputt, ich höre an dieser Stelle auf und bastele dann nicht noch Stunden weiter, um mit Tricks und Schlichen eine identische Optik zu bekommen.

Wozu auch? Denn mein sich anpassendes Layout sieht je nach Auflösung sowieso immer ein bisschen anders aus. Für mich ist es wichtig, dass Besucher in etwa ein Design bekommen, was aktuell ist, dass alles lesbar und bedienbar ist und möglichst wenig Scrollbalken hat. Dieses Ziel lässt sich mit CSS und flexiblen Layouts recht gut erreichen.

Manches lässt sich nicht dynamisch und zuverlässig erreichen?

onli fragt sich, ob nicht einfach was fehlt um zuverlässig z.B. Elementen eine dynamische Größe zuzuordnen, aber mehreren Elementen dabei immer die gleiche.

Auch das fällt für mich unter Browserprobleme. Es ist mit standardkonformen Browsern durchaus möglich solche Anforderungen zu erfüllen. Die Grenze dessen ist vor allem der IE6. Für mich kein Grund das nicht zu nutzen, denn ich mag die speziellen Stylesheets die per Conditional Comments z.B. nur genau dem IE6 sagen, was er zu tun hat. Damit bekommt der IE6 dann eben etwas was nicht so flexibel ist, aber für einen Browser der so alt ist, kann ich damit leben.

Falsch finde ich etwas nicht zu nutzen, nur weil der IE6 es nicht kann. Ebenso überflüssig finde ich es Tage in eine Lösung für den IE6 zu investieren, nur um irgendwas auch da noch hinzubekommen. Allerdings halte ich auch nichts davon, “das Kind mit dem Bad auszuschütten” und dem IE6 einfach gar kein Layout und Warnhinweise zu geben. Die Nutzer eines IE6 nehmen ihn entweder, weil er ihnen am Arbeitsplatz vorgeschrieben wird oder weil sie nicht in der Lage oder bereit sind einen anderen Browser zu installieren.

Insgesamt meine ich geht es um genau zwei Punkte:

• Das Web ist nicht aus Papier, ein Layout sollte daher nicht für “welche Auflösung auch immer” optimiert werden
• Eine Webseite muss nicht in jeder Umgebung identisch aussehen

Berücksichtigt man das, dann gibt es kein Problem mit flexiblen Layouts, so einfach ist das.

Firefox 3

Seamonkey

Tja, auch Webseiten für Kanzlerkandidaten scheinen nicht sorgfältig getestet zu werden. via twitter kam der Hinweis, dass es im Safari etwas leer aussieht. Tja, ich weiß ja nicht genau, was unter http://www.frankwaltersteinmeier.de/ erscheinen sollte, obwohl da ja steht:

Browser-Hinweis

Diese Website ist optimiert für alle aktuellen und gängigen Webbrowser unter Microsoft- und MAC OS-Betriebssystemen. Im einzelnen sind dies der Internet Explorer in den Versionen 6, 7 und 8 sowie Firefox, Opera und Safari in der jeweils aktuellen Major Release Version.

Also bei mir ist es doch recht abwechslungsreich…

Nicht für Linux

Klar, da steht ja schon, dass die Seite nicht für Linux gedacht ist, wobei mir doch neu ist, dass es solche gravierende Unterschiede gibt…
Einerseits wurde da schon an manches gedacht, die Seite verwendes valides HTML, im Quelltext habe ich eine Brotkrümelnavigation gesehen. Leider finde ich die zumindest in meinem Firefox nicht.

Beim Navigieren per Tastatur hakelt es gewaltig, kaum zu erkennen wo ich gerade stehe und auch nicht alles erreichbar.

Ebenfalls im Firefox lassen sich längere Seiten nicht ohne heftiges Ruckeln scrollen. Den Fehler hatte ich mehrfach, z.B. bei einem mit fixed eingebundenen Hintergrundbild im body, mich nervt es, ich habe dann jeweils andere Lösungen gesucht.

• Konqueror

Konqueror und Safari wohl nicht für Mac

Im Konqueror blitzt beim “neu laden” mal kurz die Seite auf, aber dann sieht sie wieder so aus wie im Bild, und eben wohl auch wie im Safari.

• IE 6
• Opera

Seamonkey, IE 6 und Opera

Im Seamonkey fehlt der Inhalt, aber ohne Flashblocker gibts ja immerhin ein schönes großes Bild.

Im Internet Explorer 6 auf Linux darf man nicht an die Maus kommen sonst verschwinden die Inhalte, aber das könnte im IE6 auf Windows besser sein.

Einzig der Opera schien mir so in etwas das zu zeigen, was wohl von den Webautoren so geplant war.

Fazit

Bezogen auf die Öffentlichkeit einer solchen Seite hätte ich erwartet, dass sie so ist, wie die Ansprüche an Webauftritte für öffentliche Verwaltungen.

Auch hätte ich angenommen, dass ein Kanzlerkandidat eine Seite hat, die unter allen Umständen funktioniert. Aber vielleicht nutzen ja 100% der SPD-Wähler Windows und einen aktuellen IE mit dem wohl angezeigt wird, was geplant war. Denn ich gebe zu, selbst mit einer traumhaften Topseite würde ich Frank Walter Steinmeier nicht wählen.

Wenn das der heutige Stand ist, wenn selbst bei solchen Seiten die Zeit fürs Testen nicht einkalkuliert wurde, dann sollte ich wohl mal überlegen, warum wir bei miradlo immer so intensiv vorm Hochspielen bereits testen…

RGB Cheat Sheet

Spickzettel haben ja zunächst einmal den Ruf ein Betrugsversuch zu sein, z.B. in der Schule. Doch es gibt ja verschiedene Formen etwas zu lernen, sich etwas zu merken oder sich in etwas einzuarbeiten. Ich hatte zu Schul- und Studienzeiten eine Vorliebe für Spickzettel.

Bei mir entstanden sie nach und nach. Zunächst hatte ich meine Aufschriebe zu einem Thema, meist aus recht vielen Seiten bestehend. Die erste Zusammenfassung bestand für eine Abschlussprüfung immernoch aus mehreren DIN-A4-Seiten. Bei jedem weiteren Durchgang wurde das weniger, am Ende gab es für jedes Prüfungsfach nur noch maximal eine Seite. Dort standen nur noch die wichtigsten Punkte des Themas und  in wenigen Stichwörtern, was ich mir ganz schwer merken konnte.

In den letzten Tagen vor einer Prüfung hingen diese Spickzettel entweder an Stellen, die ich mehrfach täglich sah, oder ich hatte sie im Hosensack. Jedenfalls sorgte ich dafür mir diesen einen Spickzettel immer wieder durchzulesen, irgendwann diesen nur noch im Kopf durchzugehen und nur nachzuschauen, wenn ich unsicher wurde. So gelang es mir auch auswendig zu Lernendes am Prüfungstag präsent zu haben, etwas was mir eher schwer fällt.

Bis heute finde ich Spickzettel praktisch, wenn ich mich in etwas neu einlerne. Je nach Thema gehe ich noch immer ähnlich vor. Allerdings schreibe ich nicht mehr alles selbst, denn beispielsweise die RGB-Farben im Bild sind sinnvoller, wenn auch die Farben dabei sind. Für vieles gibt es bereits Spickzettel, die je nach eigener Vorliebe ausgedruckt auf Papier oder elektronisch auf dem Rechner liegen können. Im Englischen heißen Spickzettel Cheat-Sheets. Die beste Auswahl quer durch einiges aus dem Webumfeld gibt es meines Erachtens bei Dave Child. Er bietet folgende Cheat-Sheets an:

• ASP / VBScript
• CSS (V1)
• CSS (V2)
• HTML Character Entities
• HTML
• JavaScript
• Microformats
• mod_rewrite (V1)
• mod_rewrite (V2)
• MySQL
• PHP (V1)
• PHP (V2)
• Python
• Regular Expressions (V1)
• Regular Expressions (V2)
• RGB Hex Colour Chart
• Ruby on Rails
• SQL Server
• Subversion

Für die meisten (ich habe nicht geprüft, ob für alle) dieser Spickzettel gibt es eine Version als Bild und eine als PDF. Zu jedem der Spickzettel gibt es eine eigene Seite, mit Hinweisen zu Versionen und ergänzenden Erklärungen. Ein, wie ich finde, prima Überblick in die Themengebiete.

Unser aller Freund, der Internet Explorer versteht als xml ausgelieferte Seiten nicht. XHTML 2 ist so geplant, dass es nicht mehr möglich ist als text/html auszugeben, deshalb wird es nicht mehr wie XHTML 1 direkt ausgeliefert werden können.

Gut, manche setzten vor einigen Jahren aus irgendwelchen Gründen auf HTML 4, andere bevorzugten XHTML. Klar schon damals gab es Diskussionen, was falsch und was richtig sei, immer halt das man selbst bevorzugt. Ich glaube meist wurde die Entscheidung für das eine oder andere nicht auf Grundlage der Argumente, sondern aus perönlicher Vorliebe getroffen. Die einen denken eher in Programmen, eine Klammer geht auf und dann muss sie auch wieder geschlossen werden. Die anderen denken eher an das, was sie grad tun wollen, warum sollte man erst etwas schließen, was doch sowieso beendet ist, weil danach etwas neues kommt.

Doch woher kommt dann jetzt wieder die Diskussion?

Ist eine der beiden Versionen ungeeignet für eine Umstellung auf HTML 5?

Nein, es braucht von beidem aus Änderungen, aber es ist in beiden Fällen nicht nötig, alles neu zu schreiben.

Mir genügte diese Information, für mich wäre damit das Thema beendet gewesen. Denn ob ich jetzt von HTML 4 aus etwas ändern muss, oder von XHTML 1 aus, das ist doch nun wirklich egal.

Aber plötzlich gab es Gerüchte, man müsse jetzt auf HTML 4 (korrekterweise auf HTML 4.01) umstellen, weil XHTML ja so nicht mehr weiterentwickelt würde. Wer genauer schaute, wusste, dass das Unsinn ist, denn Fakt wird irgendwann schon HTML 5 sein, aber auch wer HTML 4 schreibt kann nicht einfach den Doctype ändern und als HTML 5 ausliefern.

Wohl deshalb diskutierten nun auch die Fachleute und ich meine die Diskussion ist ebenso müßig und unsinnig wie die Glaubenskriege über Betriebssysteme. Im Moment ist beides möglich, mit Einschränkungen ist inzwischen HTML 5 teils schon nutzbar. Dahin geht der Weg und von wo man ihn jetzt geht ist aus meiner Sicht völlig unerheblich.

Wer mehr darüber wissen möchte, bei t3n gibt es einen guten Einstieg ins Thema.

Da wir überwiegend mit Webapplikationen arbeiten ist fast immer auch PHP beteiligt, deshalb nutzen wir meist Subclipse in Eclipse, für die svn-Befehle. Ab und zu lohnt es sich jedoch nicht, den Klotz (Eclipse ist dick und langsam) zu öffnen, wenn es grad nur ums einchecken, nach kleineren Änderungen im HTML oder CSS geht, die ich mit Quanta mache.

In solchen Fällen bevorzuge ich die Konsole (KDE auf Gentoo Linux, ob das auch mit Windows oder Mac so klappt weiß ich nicht) . Leider gibt es manchmal Versionsprobleme, deshalb kann es vorkommen, dass ein über die Konsole bearbeites Projekt in Eclipse nachher nicht mehr gelesen werden kann, weil die svn-Version älter ist. Andererseits gabs auch schon mal einen Rechner, auf dem Eclipse grad nicht auf Anhieb laufen wollte und sowieso nur fürs svn genutzt wurde. Dann lohnt es sich nicht lange zu suchen, der einfachere Weg ist hierbei die Konsole.

svn-Befehle auf Konsole

Vor Arbeitsbeginn, falls man nicht ganz sicher weiß, dass niemand sonst etwas eingecheckt hat, im eigenen Verzeichnis aufrufen:

• svn update
  Dabei werden alle aktualisierten Dateien geholt.
• Zwischendurch zeigt svn status (svn st genügt auch, für fast alles gibt es auch kürzere Varianten) den aktuellen Stand aller lokal geänderten Dateien an. So kann entschieden werden, welche Dateien geändert, gelöscht, hinzugefügt werden sollen.
• svn add Dateiname fügt eine Datei hinzu.
• svn delete Dateiname löscht eine Datei, die bereits im svn war.
• Einchecken mit: svn commit -m „das ist der Text der beschreibt, was ich tatsächlich getan habe, z.B. Datei xy erstellt, im Design der Navigation Fehler korrigiert, Funktion xy eingebaut”
  Im Kommentar sollte stehen, was getan wurde, damit jeder andere am Kommentar sehen kann, wann und was in einer Version geändert wurde.
• Bei weiteren Aktionen bietet sich meist eher Eclipse an, beispielsweise geht svnignore in Eclipse schneller und komfortabler.

• Passend zu dem, was ich schon öfter gefragt wurde von Menschen, die nicht so oft im Netz sind gibt es bei akademie.de einen Artikel zum Reputationsmanagement. Was kann man wie tun, um auch im Netz den Ruf zu haben, den man haben möchte.
• Welch grauenerregend schlechte Formulare es noch im Web gibt, davon berichtet Trixy mit Beispielen und Bildern.
• Bei der Web 2.0 Konferenz in München diese Woche ging um Firmenblogs, angesprochen werden in dem Artikel von interworld.de das Saftblog und das Daimlerblog, die ich ja auch bei meinen Beispielen zu Unternehmensblogs genannt hatte.
• Dieter steigt mit in die aktuell laufende CSS-Framework-Diskussion ein: Pro und Contra YAML mit vielen Links zu den diversen Beiträgen für und gegen solche Frameworks.
• Ergänzend dazu schreibt auch Jens Meiert über CSS-Frameworks.
• Die erste Ausgabe des – auf Papier gedruckten – Webstandards-Magazins ist im Handel erhältlich; abonnieren kann man es auf der Website. Mein erster Eindruck: Einiges kannte ich schon, zumindest so in etwa in dieser Form, der ein oder andere Artikel ist jedoch lesenswert und auch für mich neu. Wäre das Pflichtlektüre für alle Webautoren, Webdesiner usw. dann gäbe es weiter weniger schlecht gemachte Seiten…

• …Ihre Homepage

Zum ersten Teil der Nachricht ohne technische Hintergründe fiel mir nur Unsinn ein, den gibts deshalb auf uteles Blog. Der folgende zweite Teil dieser Nachricht wäre in uteles Blog jedoch zu weit ins Thema eingehend. Werbung für dieses Angebot möchte ich doch lieber nicht machen, deshalb habe ich die Links des Original durch Hinweise ersetzt, auch den Namen wollte ich jetzt nicht unzählige Mal schreiben, deshalb schreibe ich stattdessen (…)

und erstellen Sie in wenigen Schritten Ihre eigene Homepage – mit (…) MailDomain & Hosting.

Ja, kann ich, ich habe immer noch die ein oder andere ungenutzte Domain: Ich kann mir die bei uns genutzte Vorlage “neues Projekt” nehmen und habe innerhalb von wenigen Minuten eine neue Homepage. Die Homepage ist gar kein Problem, denn das ist ja nur die Startseite eines Webauftritts, die Grundangaben dafür stehen bei uns schon so weit wie möglich, in der Projektvorlage. Ich schätze inklusive online stellen, würde mich irgendeine Homepage ohne individuelles Layout oder Inhalte nicht mehr als eine halbe Stunde kosten…

Sie benötigen dafür keine Programmierkenntnisse!

Stimmt auch mit unserer Vorlage könnten die ersten Schritte auch von jemand gemacht werden, der nicht weiß, was er oder sie da tut, denn unsere Vorlage ist Schritt für Schritt dokumentiert.

Der (…) Sitebuilder macht’s möglich. Mit diesem komfortablen Programm legen Sie mit wenigen Mausklicks Aufbau, Design und Umfang Ihrer Homepage fest.

Ein einziges Mal, habe ich mich mit so einem Ding befasst. Da ging es um einen Kunden, bei denen einige wenige Inhalte sofort noch beim aktuellen Provider umgesetzt werden sollten. Ziel war anschließend ein Domainumzug und eine umfangreichere Seite. Bis dahin wusste ich gar nicht, dass es Domainpakete gibt, bei denen nicht anderes möglich ist, als solch ein Baukastensystem.

Es gab kaum Inhalt und die Qualität der Baukastenseite damals war weit unter dem, was ich normalerweise machen würde. Trotzdem habe ich wesentlich länger gebraucht, um etwas zu realisieren als jemals sonst für ein vergleichbares Ergebnis guter Qualität
.

Sie wünschen sich für Ihren Internetauftritt ein Gästebuch, Diskussions-Forum, Blog, Fotogalerie, RSS-Feeds …? Kein Problem: die gewünschten Bausteine in der Sitebuilder-Verwaltung auswählen und per Mausklick hinzufügen.

Ich vermute solche Funktionen sind der Grund, weshalb doch viele auch solch ein Angebot nutzen. Die Anbieter erwähnen ja auch nicht, dass Gästebuch und Forum für die meisten Nutzer völlig überflüssig sind, weil dort außer Spam nichts drin steht. Eine Fotogalerie, nun gut, das kann vielleicht sinnvoll sein. Was mit RSS-Feeds bezogen auf meine eigene Homepage ohne HTML-Kenntnisse gemeint war, dass weiß ich nicht genau. Ein Blog könnte noch etwas sein, mit solch einem Angebot, hat man zumindest eine eigene Domain und Zugriff auf die Daten. Das ist schon besser als bei einem Anbieter, der nur Subdomains als Blog anbietet und unter Umständen den Zugriff auf die eigenen Daten verbietet.

Das ist so einfach, wie es sich anhört!

Ja, im ersten Moment sind solche Angebote schon gut. Gerade, wer sich nicht mit der Technik dahinter befassen möchte, kann so zunächst zu ersten Ergebnissen kommen. Falls man nur mal ausprobieren möchte, was genau man denn eigentlich mit der eigenen “Homepage” anfangen möchte, ist das sicher nicht der schlechteste Weg. Auf Dauer meine ich jedoch, gibt es wenige, wenn überhaupt, die mit solchen Komplettangeboten glücklich sind.

Die einen merken bald, dass sie zwar eine eigene Website wollten, aber entweder keine Zeit , keine Lust oder beides haben, um den Webauftritt zu pflegen. Beispielsweise bei Blogs gibt es schon ganz viele enthusiastisch aufgesetzte Blogs die zwei, drei Einträge haben, die vor vielen Monden das letzte Mal aktualisiert wurden… Im Grunde bräuchte es da nicht noch mehr davon.

Diejenigen, die Spaß am eigenen Webauftritt haben und diesen regelmäßig pflegen und aktuell halten wollten, die kommen bei solchen Paketen sehr bald an die Grenzen. Da hätte es doch ein eigenes Design werden sollen, da wäre irgendeine andere Eigenschaft des Blogs noch schön usw. Sprich wer länger und interessiert eine Website betreibt, wird recht schnell eine andere Lösung als ein solches Komplettpaket brauchen.

Probieren Sie’s aus:
*noch ein Link*

Damit Ihr neues Zuhause im Internet auch eine gute Adresse hat, gehört zum Komplett- paket auch Ihre persönliche Wunschdomain, unter der Besucher und Interessenten Ihre Homepage erreichen.

Huch, doch nur eine Seite, nur die Homepage, blöd, da wollte ich doch noch eine Zweitseite hinzufügen. Quasi wegen des Trends zur Zweitseite, der sich jetzt durchsetzt.

Dazu erhalten Sie 1 GB werbefreien Website-Speicherplatz und ein großzügiges monatliches Datentransfervolumen.

Was großzügig ist, hing früher mal vom Anspruch ab.
Wer solch ein Paket für die Visitenkarte eines Vereins nutzen möchte – beispielsweise tatsächlich nur die eine Homepage, mit den wichtigsten Informationen – so jemand kommt meist gut mit solch einem Angebot aus.
Dagegen kann der Hobbyfotograf, der wöchentlich fünfzig weitere Bilder in hoher Auflösung einstellen möchte, sehr schnell an die Grenzen eine “großzügigen Transfervolumens” kommen, wenn er einige Besucher hat, die regelmäßig seine Fotos anschauen.

Und mit dem gewohnten Komfort Ihres (…) Accounts nutzen und verwalten Sie bis zu 50 exklusive und unverwechselbare Mail-Adressen in der Form name@ihredomain.

Nur wer braucht schon 50 Adressen in der Form ute.hauth@utehauth.eu oder so…

Sie sehen: Hier ist alles dabei, was Sie brauchen um Ihre Familie, Ihre Firma oder Ihren Verein professionell im World Wide Web zu präsentieren.

Da schüttelt es mich schon. Klar für eine Familien- oder Hobbyseite, kann das ein sinnvoller Einstieg sein. Selbst je nach Verein ist das eventuell noch akzeptabel. Doch, dass es auch für Firmenauftritte empfohlen wird, ist nahezu geschäftsschädigend.

Sichern Sie sich jetzt dieses Maxi-Paket für Ihren Internetauftritt zum Mini-Preis von nur 3,99 Euro/Monat!

Das ist wohl das Argument. Natürlich kann keine Webagentur ihren Kunden einen individuellen Auftritt zu solch einem Preis anbieten. Selbst für Webspace im üblichen Rahmen inklusive einer Standarddomain sind 4 Euro im Monat schon sehr knapp kalkuliert.

Ihre eigene Homepage bei (…) MailDomain & Hosting:
*…und da stand noch ein Link*

Wem es nur um “billig will ich” oder “Geiz ist geil” geht, der/die kann damit schon zurecht kommen. Wer zunächst einmal ausprobieren möchte, ob er oder sie sich langfristig intensiver mit einer eigenen Website befassen möchte, ist mit solch einem Angebot sicher gut bedient.

Alle für die anderes gilt, kommen nicht drum herum sich entweder selbst intensiver mit dem Erstellen und Betreiben von Webseiten zu befassen oder ein Unternehmen zu beauftragen, das sich darum kümmert.

Gentoo-Baby-Tux-Wallpaper

Die Grundlagen im HTML, wie man ein Bild so einbindet, dass es auch vergrößert dargestellt wird, gabs bereits gestern im Artikel Bilder in größerer Version anbieten.

Das Ganze funktioniert so auch, ist jedoch zuweilen ein bisschen aufwändig zu realisieren. Die einfachere und schnellere Variante ist es mittels WordPress zu machen, das nimmt einen Teil der Arbeit ab.

In WordPress kleines und vergrößertes Bild einbinden

Über Medien einfügen | Bild einfügen | Browserupload das gewünschte Bild in großer Version hochladen.

Hinweis:

Wer Wert auf validen Code legt, der sollte das Plugin Cleaner Gallery nutzen, sonst produziert WordPress invaliden Code.

• Bild hochladen
• Optionen des Bildes

Vorm Einfügen bietet WordPress diverse Einstellungen an. Hier hab ich im Beispiel die mittlere Größe gewählt und die URL zum großen Bild.

Jetzt ist WordPress wirklich praktisch, denn es erzeugt das Bild mittlerer Größe und ein Vorschaubild (150px*150px), weil ich das für die Galerie brauchen könnte.

Weiter geht’s: WordPress erzeugt jetzt eine Galerie, keine Angst das Ergebnis ist dann schon wie gewünscht.
In der HTML-Ansicht sieht diese wie folgt aus:

[caption id="attachment_1190" align="alignright" width="300" caption="Gentoo-Baby-Tux-Wallpaper"]<a href="http://www.miradlo.net/bloggt/wp-content/uploads/gentoo_tux_wallpaper_1024x768.jpg"><img class="size-medium wp-image-1190" title="gentoo_tux_wallpaper_1024x768" src="http://www.miradlo.net/bloggt/wp-content/uploads/gentoo_tux_wallpaper_1024x768-300x225.jpg" alt="Gentoo-Baby-Tux-Wallpaper" width="300" height="225" /></a>[/caption]

Daraus entsteht anschließend der folgende Quellcode:

<div id=”attachment_1190″ class=”wp-caption alignright” style=”width: 310px;”><a href=”http://www.miradlo.net/bloggt/wp-content/uploads/gentoo_tux_wallpaper_1024×768.jpg”>
<img class=”size-medium wp-image-1190″ title=”gentoo_tux_wallpaper_1024×768″ src=”http://www.miradlo.net/bloggt/wp-content/uploads/gentoo_tux_wallpaper_1024×768-300×225.jpg” alt=”Gentoo-Baby-Tux-Wallpaper” height=”225″ width=”300″></a><p class=”wp-caption-text”>Gentoo-Baby-Tux-Wallpaper</p></div>

Das ist alles.

Klar, kann man drüber diskutieren, warum es ein div-Element in Verbindung mit einem p-Element ist, ich bevorzuge sonst für solche Zwecke Listen. Aber der Vorzug liegt auf der Hand, ich muss das Bild nicht vorab in einem Bildbearbeitungsprogramm anpassen und meine Liste als HTML reinschreiben, sondern bekomme sofort, alles was ich brauche. Ein weiterer Nachteil, ist dass ich nicht so einfach einen Hinweis aufs vergrößerte Bild einfügen kann. Denn innerhalb der Galeriefunktion dann noch im Code rumfummeln um auf das vergrößerte Bild hinzuweisen, ist wohl kaum sinnvoll.

Für mich löse ich es je nach Fall, für Bilder, die nicht mehrere Versionen benötigen, ziehe ich meinen Code vor. Habe ich jedoch mehrere Bilder, die ich automatisiert mit Vorschaubildern anzeigen möchte, dann ist WordPress die schnellere Alternative und mittels Plugin habe ich zwar nicht so schönen, aber validen Code.

Hintergrundbild Gentoo-Tux (klicken vergrößert)

Es kam vor kurzem wieder einmal eine Anfrage: “Kann man sowas auch bei mir einbauen.” Sowas bezog sich auf ein Bild, welches beim Draufklicken in vergrößerter Version dargestellt wird.

Um Bilder anzuzeigen, die auch vergrößert angeboten werden sollen gibt es grundsätzlich zwei Möglichkeiten. Solche Grundlagen, die nicht täglich genutzt werden, sind zum Nachschauen sicherlich für einige ganz praktisch.

Erste Version

Die erste, schnell zu realisierende, aber für Besucher langsamere Version:

Es gibt ein Bild, z.B. in 1024px Breite und 768px Höhe.

Der äußere Link führt zu dem Bild in Originalgröße also in diesem Beispiel mit 1024px Breite. Statt Text zum Link steht innendrin das Bild in kleinerer Version.

<a href=”http://www.miradlo.net/images/bloggt/miradlo_2009/gentoo_tux_wallpaper_1024×768_hell”>
<img src=”http://www.miradlo.net/images/bloggt/miradlo_2009/gentoo_tux_wallpaper_1024×768_hell” alt=”Text der erscheint, falls das Bild nicht verfügbar ist” width=”300″ height=”entsprechender Wert im Beispiel sind das 225″ >
</a>

Gibt man einfach die passenden Maße an so wird das Bild in eben dieser Größe gezeigt.

Will man nur die Breite beschränken und dem Browser alles weitere überlassen, bekommt das img-Tag nur den Wert width=”300″ die Angabe ‘height’ lässt man einfach weg. Gibt man auch bereits den Höhenwert an, dann kennt der Browser diesen bereits und muss nicht selbst rechnen ist also etwas schneller.

Zweite Version

• Tux (klicken für größere Version)

Die zweite Version, die sich vor allem bei großen Bildern (so etwa ab 40 kB sollte man überlegen) anbietet, sind zwei Bilder.
Das große Bild steht innerhalb des Links, wird also nur geladen, wenn jemand es tatsächlich sehen will. Das verkleinerte Bild ist im img-Tag und ist eben in der Größe, die im Beitrag passend ist.

<a href=”/images/bloggt/miradlo_2009/tux_1280.png”>
<img src=”/images/bloggt/miradlo_2009/tux_413px.png” width=”350″ height=”413″ alt=”Tux in für einen Artikel passender Größe” />
</a>

Fazit Bild auch vergrößert anbieten

Der Vorzug, wenn Bilder auch als größere Version angeboten werden, ist klar, die Besucher können, wenn sie möchten auch die große Version nutzen. Nimmt man dafür die zweite Methode, hat das den Vorteil, dass die Besucher, die nicht an der großen Version interessiert sind, diese auch nicht laden müssen. Meist ist das also die bessere Variante.

Auf jeden Fall sollte man meines Erachtens noch darauf hinweisen, dass ein Bild auch vergrößert angeboten wird, denn nicht alle Besucher werden es sonst bemerken.

Diese Möglichkeit verlangt jedoch, dass das Bild in beiden Größen vorliegt. Deshalb morgen noch einen anderen Weg, der leicht zu nutzen ist und zumindest bei WordPress so funktioniert. Ich nehme jedoch an, dass auch andere Systeme (Blogsoftware oder CMS) etwas ähnliches anbieten.