Website online

Nach einigen Verzögerungen hat der Schuster nun endlich seine eigenen Schuhe repariert. 
Die Website haarkoetter.com ist nun wieder vollständig. Einige der in diesem Blog beschriebenen Techniken werden selbstverständlich genutzt, so z.B. der in diesem Artikel beschriebene Trick, Links durch eine transparente Maske hindurch klickbar zu machen.
Wir wünschen den Besuchenden viel Vergnügen. Die Benutzung des Internet Explorers wird zum Betrachten der Site nicht empfohlen.

Canvas Teil 3: Images und Patterns

Images und Patterns auf Canvas

Vorab schon mal ein Blick auf den nächsten Artikel. Hier haben wir mit der image- und der Pattern-Funktion experimentiert.
Die verwendeten Icons stammen von Tanya aus Lettland (http://artdesigner.lv/me), die auf ihrer Site einige kostenlose Iconsammlungen veröffentlicht. "Liels paldies" dafür :O)
Eine ausführlichere Beschreibung des Quelltextes folgt...
Hier schon mal ein Blick auf die Demo

canvas-Experimente Teil 2: Ein künstlicher Horizont

Der künstliche Horizont

Im zweiten Artikel zum Thema canvas entsteht mit der arc-Funktion ein künstlicher Horizont. Mit der Maus verändert man die 'Fluglage', ab 30° soll eine Warnung angezeigt werden.
Diesmal wenden wir die arc-Funktion an, um einen künstlichen Horizont nachzubilden. In Flug­zeugen stellt dieses Instrument die Fluglage im Verhältnis zu einer waag­rechten Aus­richtung dar. In diesem Skript wird nur eine Achs­änderung von dem Instrument angezeigt, die Längs­achse, also das Kippen der Trag­flächen.

'Steuerknüppel' ist die Maus. Das Bewegen des Maus­cursors in x-­Richtung wird als Steuer­signal interpretiert, wobei die Mitte des Canvas der Null­stellung, einem waag­rechten Flug­zeug, entsprechen soll.

Diese Maschine ist wenig belastbar und sollte nicht mehr als 30° gekippt werden. Ab 30° erscheint eine Warnung mit dem aktuellen Winkel, die Farbe des Horizonts wird zunehmend rot. Der Maximal­ausschlag wird auf 60° begrenzt.

Soviel zur Beschreibung. Vielleicht sehen Sie sich das Teil an, bevor wir hier weiter machen? >> http://www.mydemospace.de/_canvas2.html

Aufbau der HTML-Seite

Die HTML-Seite benutzt die gleiche div-Konstruktion wie die anderen Beispiele dieses Blogs. Ganz oben befindet sich eine debug-Zeile (#debug), in die Daten und Meldungen geschrieben werden. Darunter findet sich der (leere) Container-Bereich (#container). Ein <canvas>-Element sucht man hier vergeblich; es wird erst zur Laufzeit eingeblendet. Abschliessend folgt die Fußzeile (#foot) mit einem Link zurück zum Blog und einem Link zum Öffnen des Quelltext. Dieser wird in einem bis dahin unsichtbaren div (#srcdiv) angezeigt. Formatiert wird alles durch canvas.css. Zum Test der Textfunktionen des canvas wird im Stylesheet ein Font geladen und über @fontface bereit gestellt.

Never leave home without it...

Weil man damit so leicht und mit wenig Tipparbeit auf das DOM zugreifen kann, benutzen wir auch hier die Javascript-Bibliothek jQuery.
Um auf herkömmliches Javascript ohne jQuery umzustellen, müssen die Objektreferenzen ($("#name_des_div")) geändert werden. Suchen Sie dazu im Quelltext nach $(.
Das Skript initialisiert zu Beginn einige globale Variablen:

var _cont; // container div
var _drCanv; // canvas element, wird vom skript erzeugt
var _pane; // canvas 2d-context

Dann wird per jQuery auf das Laden des DOM gewartet. Damit stellen wir sicher, dass alle benötigten Komponenten vom Server in den Browser geholt wurden:

$(document).ready( function() {
  shmsg("loading..."); // keine Nachricht? Skript buggy!
  srcviewer(); // routinen für den sourceviewer, für canvas unerheblich
  initcanvas("1024","476","#container"); // canvas methoden initialisieren, w und h vorgeben
  $(_cont)[0].addEventListener("mousemove",handlemouse,false);
});

Bevor Sie jetzt dieses Code-Stück verwenden, lesen Sie bitte erst weiter...

Die Funktion initcanvas erzeugt nun das <canvas>-Element und schiebt es in den container:

function initcanvas(cW,cH,cC){
  _cont = $(cC); //div-id,z.b. "#container"
  _cont.html('<canvas id="drawcanvas" width="' + cW + '" height="' + cH + '"></canvas>');
...

Dann wird dieser Canvas einer Variablen zugewiesen und sein 2D-Kontext geholt.

  drCanv = $('#drawcanvas')[0]; // jQuery! sonst document.getElementById
  _pane = drCanv.getContext("2d");
...

Wie im Kommentar bereits zu sehen, kann man die Objektreferenz document.getElementById("drawcanvas") in jQuery abkürzen mit $("#drawcanvas")[0]. Dieses DOM-Objekt speichern wir in drCanv und holen mit drCanv.getContext("2d") den Zeichen-Kontext. "2D" weist schon mal darauf hin, dass es irgendwann einen "3D"-Kontext geben wird, aber das dauert wohl noch etwas...
Anders als bei vorherigen Artikeln gibt es diesmal keine wild im Text verstreuten Links, sondern eine Linkliste zum Schluss.

Links

Titel	Link	Beschreibung
Mozilla Developer Network: Canvas Tutorial	https://developer.mozilla.org/en/Canvas_tutorial	Ausführliches Tutorial in englischer Sprache
Mozilla Developer Network: Basic Animations	https://developer.mozilla.org/en/Canvas_tutorial/Basic_animations	Grundlegende Animationsroutinen (Artikel in Englisch)
2D Kontext	http://dev.w3.org/html5/2dcontext/	Beschreibung des context beim W3C (working draft, english)
Ajaxschmiede Canvas Tutorial	http://www.ajaxschmiede.de/canvas/einfuehrung-in-canvas/	Dieses Tutorial in deutscher Sprache basiert auf dem Mozilla-Beitrag (s.o.)
Wikipedia darf natürlich nicht fehlen...	http://de.wikipedia.org/wiki/Canvas_%28HTML-Element%29	Artikel über das Canvas-Element mit weiteren nützlichen Links

[die Artikel sind gerade in Bearbeitung. Bitte haben Sie noch ein paar Stunden Geduld...]

Ein Klick hinter die Maske

Da will man mit einem runden Bullauge mal weg vom ewigen Rechteckdesign und stellt dann fest, dass man nicht durch transparente PNGs hindurch auf Links darunter klicken kann. Und jetzt?
Ich möchte mit einem an bestimmten Stellen transparenten PNG einen Textlayer abdecken, diesen Layer aber trotzdem scrollen und Links darin mit der Maus erreichen. Das geht aber nicht, weil das PNG für die Mauserkennung nicht transparent ist. Mist.
Als Stichwort fällt mir zunächst event bubbling ein, aber Fehlanzeige. Wo nix ankommt, wird auch nix gebubbelt.
Da ich bei dem Projekt jQuery verwende, könnte ich ja den Klick auf's PNG abfangen, die Cursorposition ermitteln, dann im Textlayer an der Stelle nachsehen, ob da ein Link ist (geht das überhaupt?) und dem dann den Clickevent manuell senden. Klingt nach einem langen Weg mit vielen Stolperfallen.
Machen wir es kurz: Die tatsächliche Lösung ist so einfach wie elegant, funktioniert adhoc und, was für mich das Schlimmste ist, sie hätte mir auch selbst einfallen können. Nach langer Suche, diversen Posts von Leuten, die das Problem nicht verstanden haben (nein, z-Index hilft hier gar nicht) und diversen Stichwortmorphs fand ich diesen Beitrag: http://www.blazekwebdesign.com/bwd/2008/developer-notes/clickable-links-through-a-transparent-image-in-css/
Wir brauchen also drei Layer:

1. die Textebene
2. die Bildebene mit dem transparenten PNG
3. eine durchsichtige Kopie der Textebene

Was ich nicht wusste: Der transparente Textlayer 3 bleibt klickbar! Man sieht also den Layer 1, aber man klickt den Layer 3. Einfach, genial, einfach genial. Das wird gleich ausprobiert: http://www.haarkoetter.com
So, nach der anfänglichen Begeisterung widmen wir uns nun den Problemen dieser Lösung ;O)

Link ohne mouseover

Zwar funktionieren nun die Links, sprich, beim Anklicken wird zum Ziel verzweigt, aber alle anderen Effekte bleiben unsichtbar. Der Grund ist klar, denn der reagierende Layer 3 ist ja voll transparent, aka unsichtbar. Der Rollover findet zwar statt, aber ohne uns.
Ok. Hatte ich schon erwähnt, dass ich jQuery verwende? Die Links werden mit IDs versehen, dann kann man den Event an Layer 1 weiterreichen und dort gibt es dann den sichtbaren Hover-Effekt. Falls ein Leser sich daran erfreut, hier die Lösung eines Problemes gefunden zu haben, darf er gerne das entsprechende Skript hier posten. Ansonsten liefere ich das demnächst nach, denn...wär schon schön!

Kopie des Textlayers pflegen

Mit der Kopie des Layers wird die HTML-Quelle ganz schön unübersichtlich. Und bei Änderungen muss man stets daran denken, diese zweimal vorzunehmen. Blöd. Besonders dann, wenn Text hinzugefügt wird und dadurch die Position des Original-Links und der Kopie verrutschen. Dann sind (sichtbare) Links plötzlich nicht mehr klickbar.
Die Lösung liegt nahe: die Kopie wird erst zur Laufzeit gefüllt! Mit jQuery ist das nur ein Einzeiler! Das müsste sich sogar in CM-Systemen machen lassen, wenn man diesen Aufruf nach dem Laden des Contents einfügen kann.

No script, no fun

Graceful degradation, also die Rücksichtnahme auf ältere Browser und Menschen, die ohne Javascript surfen, ist hier unschwer umzusetzen, sieht aber hässlich aus. Der sichtbare Layer muss im CSS zunächst vor dem Bild liegen (ade, du schöner Rahmeneffekt) und wird erst durch ein onload-Skript nach hinten gedrückt. Jetzt bleibt alles klickbar, aber die Optik ist im Eimer.

Screenreader

Freundlicherweise sollte das Skript nur angewendet werden, wenn kein screenreader erkannt wurde, denn sonst werden alle Texte zweimal gelesen.

Übrigens: die hier gezeigte Site verwendet meinen automatischen Index (Blogartikel) zur Navigation.

Zwischendurch...

Hier ein paar Experimente mit HTML5, CSS3 und jQuery. Die Quelltexte sind einigermaßen kommentiert und laden hoffentlich zu eigenen Versuchen ein.
Zum einen etwas Spielerei mit CSS3. Ist wirklich schön mit modernen Browsern, aber schmucklos anzusehen mit dem IE6...
CSS3: Transparente Layer, Fontfacing & Spaltensatz

Dann ein wenig Imagehandling mit jQuery:
Imageslider - unbedingt mit den verschiedenen Bilder probieren ;O)
Die Variante 1c ist noch etwas buggy, aber man sieht schon, wo es hingeht, daher wollte ich die nicht weglassen...
Bessere Bildbearbeitungsmöglichkeiten bietet das canvas-Element, daher werde ich die hier vorgestellten Wege vorerst nicht weiter beschreiten.