Golb Slexa ::

Alle Jahre wieder … male ich zu div. Anlässen meine Karten. Und erstelle elektronische, animierte Varianten mit HTML.

In diesem Jahr entstand die nachfolgende Weihnachtskarte:

Zunächst aber entstand die animierte Version. Brainstorming zur Animation und eine erste Skizze auf Papier erfolgte im Zug nach München sitzend.

Einzelgrafiken sind von Hand gezeichnet, dann gescant und in der Bildbearbeitung zugeschnitten und - ganz wichtig - mit Transparenzen versehen.
Die Animation erfolgte per Javascript - es wäre vielleicht auch mit CSS3 gegangen, aber ich war mit jQuery schneller am Ziel.

Ach, ich mache später mal ein ausführlicheres “Making of” und beleuchte dann das Technische genauer.

Schaut es euch an:

Link: Der schnellste Weihnachtsmann der Welt

Wer mag, kann diese Karte mit einer eigenen Grussbotschaft versehen an Freunde weitersenden.

Ich schreibe gerade an einem HTML5 Audioplayer. Bevor jemand sagt: davon gibt es ja bereits hunderte - such’ doch einfach einen davon aus… Nein, der Player wird zu einem späteren Zeitpunkt beleuchtet. Das sollte doch nur ein Aufhänger sein.
In einem Player braucht es einen Fortschrittsbalken. Je nach Abspielposition soll da ein Canvas mit der fillRect Funktion bemalt werden. Canvas … das ist eine Zeichenfläche im Webbrowser auf der man Bildpunkte manipulieren kann und von Microsoft im Internet Explorer 6 eingeführt wurde. In HTML5 wurde es offiziell und endlich in allen neuen Webbrowsern verfügbar gemacht.

<canvas id="progresscanvas"></canvas>

Per CSS wurde Breite und Höhe des Canvas mit 10px x 220px gesetzt.

Eine der Zeichenfunktionen ist fillRect. Damit kann man ein ausgefülltes Rechteck zeichnen. Dazu gibt man als Parameter x- und y- Koordinaten des Start- und Endpunktes an.

Mein Javascript Snippet:

var canvas=document.getElementById('progresscanvas');
if (canvas.getContext) {
  var ctx = canvas.getContext("2d");
  ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
  var iAlpha=0.05 + oAudio.currentTime / oAudio.duration /10*1;
  ctx.fillStyle = "rgba(0,0,0, "+iAlpha+")";
  var fWidth = Math.round((oAudio.currentTime / oAudio.duration) * (canvas.clientWidth));
  if (fWidth > 0) {
    ctx.fillRect(0, 0, fWidth, canvas.clientHeight);
  }
}

Irgendwie kam allerdings nicht das heraus, was ich meinte, was entstehen müsste. Mit einem console.log geprüft, welche Parameter im “ctx.fillRect(0, 0, fWidth, canvas.clientHeight);” landen - hier kommt sogar das Richtige:

Wenn man den Player anschaut: mein Song ist kurz vor dem Ende. Unten in der Konsolenausgabe ist der letzte fillRect Aufruf drin - es soll das Canvas gefüllt werden von links oben (0,0) bis (10, 215) - javascript-seitig ist alles korrekt. Nur das Ergebnis ist im Webbrowser nicht: hier ist nur ein 2 Pixel hoher und 155 Pixel breiter Balken. Der Fortschrittsbalken an sich funktioniert, aber die Breite wird mit einem ominösen Faktor skaliert.

Das Ganze habe ich mit verschiedenen Browsern getestet: Firefox, IE9 und Chrome verhalten sich gleich falsch.

Der Trick besteht darin: im HTML muss ich im Canvas bereits die korrekte Grösse angeben.
Statt

<canvas id="progresscanvas"></canvas>

nun

<canvas id="progresscanvas" width="220" height="10"></canvas>

… und schon geht es mit dem fillRect.

Hinweis:

Dieser Inhalt ist veraltet. Google Plus exitiert nicht mehr.

—

Um den G+ Button einzubetten, sieht Google das Laden eines Javascripts vom Google-Server und diesen Tag vor:

<!-- Place this tag where you want the +1 button to render -->
<g:plusone annotation="inline"></g:plusone>

Nur ist das nicht konform mit der HTML-Syntax, auch nicht mit HTML5. Macht man einen Testlauf mit einem Validator, so wird diese Zeile angemahnt.
[Weiterlesen…]

Der Internet Explorer zeigt Inhalte vom Twitter Widget nicht an.
Selbst wenn man es auf dem Twitter-eigenen “Baukasten” versucht, bleibt die Vorschaubox einfach leer.

Die Webdeveloper Toolbar bringt das Problem ans Licht:

SEC7112:
Das Skript von “http://api.twitter.com/1/twitter/lists/d9/statuses.json?callback=TWTR.Widget.receiveCallback_1&include_rts=true&clientsource=TWITTERINC_WIDGET&1314634493205=cachebust” wurde aufgrund eines fehlerhaften MIME-Typs geblockt.
widget_list

[Weiterlesen…]

Im Laufe der Zeit sammeln sich mehr und mehr kleine Skripte und CSS-Dateien an, die um Einbindung in den Header bitten. Bei mir wurde das Arsenal auch immer grösser:

Javascript:
Ich hatte mehrere Dateien mit eigenen Javascript-Funktionen (wobei die ein oder andere nur im Fall der Verwenung nachgeladen wurde). Hinzu kommen ein Javascript Framework (jQuery) und diverse jQuery Plugins und sonstige Javascripts von Fremdanbietern.

CSS:
Ich verwende 2 CSS-Dateien für die Darstellung auf Bildschirmen und eine CSS Datei für Druckausgabe. Weitere Dateien kommen CSS-Dateien von jQuery-Plugins und sonstigen PHP-Skripten.

[Weiterlesen…]

Grossmundig werden Standards, wie HTML5, CSS3, and JavaScript genannt. Alles basiert auf offenen Standards, um das von Apple ungeliebte Flash zu verbannen. Und tolle Demos gibts im Showcase dazu. Aber nicht alle Browser unterstützen diese, aber eben der “Superbrowser” von Apple. Bewundern darf man das im HTML5 Showcase.

Oder auch eben nicht.

http://www.apple.com/html5/ (Anm.: Seite wurde entfernt - der Link wurde daher dekativiert)
[Weiterlesen…]