Der schnellste Weihnachtsmann der Welt
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.
Leistungsschutzrecht? Lernresistenz?
Darf ich höflichst fragen, WAS GENAU das Problem ist, dass es ein Leistungsschutzrecht braucht?
Die Darstellung aller Webseiten basiert im wesentlichen auf dem Protokoll HTTP(s) und der Beschreibungssprache HTML.
Wenn das Problem denn tatsächlich wäre, dass Google & Co. Inhalte von Verlagen indexieren, dann ist es doch extrem einfach: Man nimmt sich 10 Minuten Zeit und studiert, wie man das Indexieren seiner Webseite unterbindet.
Selbstverständlich geht das und ist zudem genauestens spezifiziert. Seit über 15 Jahren. Nochmal in Worten: Fünfzehn Jahren.
Wie wäre es mit einer solchen robots.txt
User-agent: * Disallow: /
… oder auf einelnen, nicht zu indexierenden Webseiten ein
<meta name="robots" content="noindex">
in den Header einzubauen?
Was darf man von einer Person/ Instanz halten, die nach mehr als 1 Jahrzent des Vorhandenseins einer Regelung krampfhaft versucht, auf lernresistent zu machen?
Links zum Thema:
Pimped Apachestatus - v1.0 released
Viele kennen den Apache Webserver … und dann wohl auch dessen Server-status Seite. Weil man diese HTML-Seite nicht wirklich toll lesen und verwerten kann, habe ich mir ein Tool geschrieben, das diese Seite parst und durch verschiedene Filter gejagt, die verschiedensten Infos als Tabellen darstellt:
- nur aktive Requests anzeigen
- häufigste Requests
- längste Requests
- u.v.m.
Alle Tabellen sind per Mausklick sortierbar und lassen sich durch Texteingabe filtern.
Die Tabellen lassen sich exportieren, z.B. CSV oder XML.
Das Ganze funktioniert nicht nur mit einem einzelnen Apache-Server - man kann mehrere Apache-Server, die gemeinsam hinter einem Loadbalancer dieselbe Webseite ausliefern, in einer Tabelle zusammenfassen. Die häufigsten oder längsten Requests auf 5 oder 10 Servern zu ermitteln - das ist mit Lesen der Server-Status-Seiten unmöglich - mit meinem Tool wird’s zum Kinderspiel.
Seit einem Jahr sind immer wieder etliche Versionen veröffentlicht wurden, bei denen ich das Gefühl hatte: “Ja eigentlich funktioniert ja alles, wie es soll”.
Heute - ja heute - ist alles anders: mein heutiger Release heisst Version 1.0. Tusch!!!
Weiterführende Links:
- Sourceforge (englisch) Projektseite und Download
- Axels Webseite
- Dokumentation (englisch)
Putty Agent mit private Key starten
Bei Putty gibt es im Komplettpaket einen Agent, der sich im Systemtray als Icon ablegt. Über das Icon kann man seine vorkonfigurierten Putty-Verbindungen aufrufen.
Wenn man seinem SSH-Schlüsselpaar ein Passwort zugeordnet hat, muss man immer dieses Passwort bei einer Verbindung angeben.
Abhilfe der Passwort-Eingabe wären:
- kein Passwort im SSH-Schlüssel (nicht wirklich toll)
- den Agent das Passwort verwalten lassen (schon besser)
Der Page-Agent kann vor Aufruf einer Putty Session gestartet werden und erledigt dann die Passwort-Eingabe im Hintergrund, wenn - ja “wenn” - man die SSH Keys einmal geladen hat. Den Agent starten und dann immer wieder interaktiv die zu Keys laden, ist nicht schlau. Zum Glück gibt es ja Kommandozeilenparameter, was uns doch gleich zum Thema Batch führt ;-)
Im Ordner, wo die putty.exe und die pagent.exe liegen, kann man eine Batch-Datei anlegen, die die pagent.exe startet. Man kann als Parameter angeben:
pageant.exe [Schlüssel 1] [Schlüssel 2] ... [Schlüssel N]
z.B.:
start @~dp0/../pageant.exe c:/.ssh/id_mein_privater_key1.ppk
Beim Start dessen wird man nur noch einmal nach dem Passwort der SSH_keys-gefragt, aber bei nachfolgendem Aufbau einer Putty-Session dann nicht mehr.
Links:
SYNTH1 - Ini-Datei mit Soundbanken auffüllen
Im VST Plugin Synth1 kann man andere Soundbanken importieren, um viel mehr Instrumenten-Voreinstellungen abzurufen. Man braucht zum einen die Instrumente.
suche nach “synth1 presets” in der Suchmaschine deiner Wahl
Die legt man am besten beim Installationsordner von Synth1 in einem Unterverzeichnis “presets”, z.B. C:/VST/Synth1/presets/ ab.
Und dann gibt es noch eine benutzerspezifische INI-Datei unter
%appdata%/Daichi/Synth1/Synth1.ini
Darin sind einige Einträge der Art bankfolder[Zähler]=[Pfad-mit-Presets]
Nun müsste man weitere Zeilen eintragen, wobei hinter bankfolder der Zähler hochzählt und dann der vollständige Pfad folgt. Das macht man bei 50 Verzeichnissen aber ungern von Hand. Also schreibt man schnell eine Batchdatei…
Nachfolgender Code ist als Bat-Datei im presets-Ordner zu speichern (C:/VST/Synth1/presets/) und zu starten. Am Ende erhält man dann 2 Editorfenster, wo man die erzeugten INI-Einträge in die bestehende Synth1.ini übertragen muss.
@echo off
rem ----------------------------------------------------------------------
rem -- setze i auf den Wert des ersten freien bankfolders
set i=0
set mydir=%~dp0
set out=%mydir%synth1_banks.ini
set ini=%appdata%DaichiSynth1Synth1.ini
rem ----------------------------------------------------------------------
echo ; generated %date% %time% >%out%
SETLOCAL EnableDelayedExpansion
for /F "tokens=*" %%a in ('dir /A:D /b') do (
echo bankfolder!i!=%mydir%%%a >>%out%
set /a i=!i!+1
)
rem ----------------------------------------------------------------------
start %ini%
start %out%
rem ----------------------------------------------------------------------
Magisches fillRect() mit Javascript
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.
Html5 Audio und Surround Sound
Wie man stereo-Audiodateien in eine Webseite einbindet und möglichst viele Webbrowser dies abspielen lässt, ist in etlichen Seiten/ Blogs beschrieben.
Alle bekannten, neueren Webbrowser unterstützen zumindest das Format MP3 oder aber OGG.
<audio loop="loop" controls="controls" > <source src="demosong_2.0_.ogg" type="audio/ogg" /> <source src="demosong_2.0_.mp3" type="audio/mp3" /> <!-- Flash-Fallback kommt hierher --> </audio>
Und wer noch Wert auf Abwärtskompatibiltät legt (IE 8 und älter), der setzt noch einen Flashplayer ein und lässt die MP3 Datei abspielen.
Soweit so gut.
Und wie sieht es mit surround-Audiodateien aus? Schliesslich wird seit 1 Jahrzehnt jeder Billigst-PC mit einer 5.1 Soundkarte (oder besser) ausgeliefert…
Meine ersten Experimente habe ich bereits im Oster-Demo gemacht (s. Link [01] unten am Ende des Beitrags). Nachfolgend gibt es nun nachträglich etwas ausführlichere Informationen.
Bekannte Audioformate mit surround-Unterstützung sind
- AAC (Mpeg-4-Audio)
- AC3 (Dolby)
- OGG (Ogg Vorbis)
- WAV (unkomprimierte Audio-Daten)
Google Web Fonts einbinden
Per CSS 3 lassen sich mit Webfonts andere Schriftarten als die Systemschriften einbinden. Bis dato musste man bei der Wahl der Schriftart darauf achten, dass dies Systemschriften von Windows / Mac / Linux sind. Auch all diese Tricks mit Image-Replacements (Fahrner Image Replacement [FIR]; Scalable Inman Flash Replacement [sIFR], Malarkey Image Replacement [MIR] oder Definitive Solution to Image Replacement [DIR]) - kann man in Zukunft vergessen.
Eine Quelle für Webfonts sind die Google Web Fonts .. s. Link [01] .. (es gibt ganz sicher weitere Quellen - bitte immer auf die zur Schriftart angegebene Lizenz achten).
Zwar gibt Google unter “Quick-use” einen funktionierenden Code für Copy & Paste vor, um die Schrift auf seiner Webseite einzubinden … aber es gibt bei dann jedem Seitenaufruf der eigenen Webseite immer einen dynamischen Request zu Google.
Um dies zu vermeiden und Daten nur vom eigenen Server zu holen und nicht zuletzt auch, um Daten effektiv cachen zu können, kann man die Schriftart auch auf seinen Webserver kopieren und von dort einbinden.
CSS3 Osterei und HTML5 Audio mit Surround-Sound
Malen wir mal ein Ei. Aber ohne eine Grafik zu verwenden.
Demo-Seite: https://www.axel-hah … -ei-und-html5-audio/
Jubiläum: Axel ist nun 15 Jahre im Web!
Ich habe kürzlich mein uralt-ZIP-Drive rausgekramt und ein altes Backup gefunden.
Meine erste Webseite ging vor - sage und schreibe - 15 Jahren online! F… (ferdammt), ich bin mit der Meldung genaugenommen sogar ein paar Tage zu spät ;-)
Zur Technik:
Damals war HTML 3.2 “state of the art”. Das heisst: die Webseite bestand aus Frames - und es gab zusätzlich eine Noframe-Variante. Es gab auch einige dezent animiert GIFs - natürlich alle selbsterstellt ;-)
Linkerhand das Menü enthielt Icons, die im onmouseover-Event Grafiken austauschten. Tja, das CSS-Pseudoelement :hover - geschweige denn CSS gab es ja noch nicht.
Ich habe versucht, den goldenen Regeln für schlechtes HTML möglichst gekonnt auszuweichen (heute gibt es ja zuhauf HTML-Validatoren und SEO-”Zeugs”).
Dies war die Frame-Variante:
Inhalt:
Was stellte ich in meiner ersten Webseite online? Es gab einige meiner damaligen mit Delphi und Turbo Pascal erstellten Programme für Windows und DOS zum Download - ebenso 2 Tracker-Songs.
Meine Webseiten entstanden mit einem DOS-Editor (Teil des hammermässigen Norton Commander Clons namens “DCC”), für den ich auch gleich eine Datei für das Syntax-Highlight von HTML anbot.
Ja, ich weiss, im Screenshot gibt es HTML-Syntax-Fehler - es ist ja meine allererste Seite ;-)
Und auch damals gab es schon unterschiedliche Browser, auf die es Rücksicht zu nehmen galt. Frames und Animationen konnten nicht alle Webbrowser.
Oooh jaaa. Lang-lang ist’s her!
Links:
- Die Goldenen Regeln für schlechtes HTML
- http://www.emerge.de/dcc.htm (Anm.: die Seite zum DCC wurde deaktiviert)