hoch

Axels Weihnachtskarte 2014

Nun nun rücken sie also doch endlich in greifbare Nähe: die Fest (und Fress-?) Tage. Ich wünsche meinen Besuchern eine schöne Weihnachtszeit! Geniesst die erholsamen Tage zwischen den Jahren. Nach einem Guten Rutsch ins Jahr 2015 … mögen sich neben privaten und berüflichen Wünschen auch einige der guten alten Vorsätze erfüllen!

2014-12-14-weihnachtskarte-01.png

Axel hat sich wieder ins Zeug gelegt :-)
Ich habe - zum Glück - wieder eine einfache Idee gehabt: ich brauchte nur 2 Dinge zeichnen und scannen. Und weil ich mich mit Webseiten ein klein wenig auskenne, konnte ich es auch animieren.

Für die Hintergrundmusik wurden vor Allem klassische Instrumente ins Musikprogramm gekippt - und wer denn kann: gar in 5.1 surround lässt es sich herunterladen (s. “über” auf der rechten Seite).

Viel Spass!

weiterführende Links:

  1. Weihnachtskarte 2014
  2. Hintergrundmusik zum Download in stereo mp3 ogg … und 5.1 surround: m4a ogg
  3. Hintergrundmusik auf Soundcloud
Artikel weiterempfehlen: Facebook

Wenn die jQuery-Animation mit fadeIn() nicht mag

Ach, meine Kollegen… wo denn meine Weihnachtskarte bliebe, wurde ich gefragt…

Dabei bin ich doch dran!! Vor 3 Wochen war die Musik fertig. Die Idee für Grafik und Animation steht auch … an der Umsetzung bin ich just dabei. Und hier stiess auf eine Merkwürdigkeit: In jQuery gibt es die Möglichkeit, mit der fadeIn Funktion etwas schööön sanft einblenden zu lassen:

$('#content').fadeIn(5000);

Ich hab die Funktion so oft genutzt - aber bei diesem Element ging es einfach nicht. Plopp - mein Element war sofort da.

Ursache: die CSS-Definition dieser ID - diese enthielt ein transition Attribut:

#content{
(...)
transition: all 1s ease-in-out;
(...)
}

… tja, und wenn ein solches existiert, dann funktioniert eine jQuery-Animation nicht.

Abhilfe:
Entweder:

  • In der CSS Deklaration entfernt man die Definition für transition.
  • erst nach der gewünschten Animation setzt man transition:
    $('#content').css('transition', 'all 1s ease-in-out');

Oder: man verwirft fadeIn() und macht es rein mit CSS3: man setzt per transition die Zeitdauer und wechselt den Wert von opacity.

Weiterführende Links:

Artikel weiterempfehlen: Facebook

Frohe Ostern!

Es ist wieder Ostern und wieder gibt es eine animierte Grusskarte :-)
Wem es gefällt, kann diese mit einem eigenen Titel an Freunde versenden.

Es ist ein kleines Reaktionsspiel. Nach einer zufälligen Wartezeit wird ein Feld hervorgehoben, was schnellstmöglichst angeklickt werden muss. Es wird die Zeit zusammengezählt vom Anzeigen eines Feldes bis es angeklickt wurde.

2014-04-17-osterkarte-2014.png

Schöne Feiertage!
zur Osterkarte 2014

Wie es erstellt wurde?

  • Hintergrundmusik und Sounds wurden mit Magix Music Maker erstellt.
  • Grafiken / Fotos / Scans wurden mit Paint Shop Pro montiert bzw. nachbearbeitet
  • Die Spielsteuerung erfolgt mit Javascript - jQuery nimmt mir teilweise einige Arbeiten ab. CSS 3 animiert die Boxen.

Mit dem Webbrowser kann man die Sourcen einsehen - oder mich nochmal fragen.

Weiterführende Links:

Artikel weiterempfehlen: Facebook

Webseite umgestellt auf Concrete 5

Wer ab und an auf meiner Webseite war, wird es bemerkt haben: sie sieht nun anders aus. Die bisherigen Inhalte sind (zumeist) noch da, haben aber eine neue URL.

Ich habe meine Webseite auf das CMS Conrete 5 umgestellt.

Wer eine alte Adresse ansurft …
… sei es, er wählt einen Bookmark, einen nunmehr veralteten Link aus einem Forum oder dem noch nicht aktualisierten Suchindex einer Suchmaschine, der kommt auf eine Umleitungsseite.
Diese Umleitungsseite kennt das Mapping von der alten zur neuen URL. Suchmaschinen werden sofort mit einem 30x auf die neue Seite umgeleitet (Google hat übrigens so sehr schnell gelernt!); andere Benutzer bekommen einen Hinweis und den neuen Link angeboten.

Apache-Rewrite Regel für alte Seiten:

RewriteRule ^(axel.*).html$ /(...)/redirector_phpcms.php [PT,QSA]

Wenn das Redirect-Skript einen Bot erkennt, dann gibt es statt der Hinweis-Seite ein 301:

// ----- Bots ein 30x senden
if ($sNewUrl){
    if (
            stripos($_SERVER["HTTP_USER_AGENT"], "spider")>0
            || stripos($_SERVER["HTTP_USER_AGENT"], "bot")>0
            || stripos($_SERVER["HTTP_USER_AGENT"], "wget")>0
            (...)
       ){
            header("HTTP/1.1 301 Moved Permanently");
            header("Location: $sNewUrl");
       }
}

Warum das Ganze?
Bisher habe ich einen Parser verwendet, dessen Entwicklung seit einer gefühlten Ewigkeit eingestellt ist. Securitymässg ist das keine so tolle Ausgangslage.
Die Wahl fiel deshalb auf Concrete 5, weil ich bereits andere Webseiten damit umgesetzt habe und das Benutzerinterface beim Bearbeiten ganz nett und angenehm finde.

Was blieb gleich?
Die visuelle Menüstruktur blieb weitestgehend identisch. Die neue Webseite wurde aufgeschaltet, als ich ca. 95% der Inhalte und Funktionen drin hatte. Nur mit neuen URLs halt. Was fehlt, sind Fotos und VB-Script- und einige veraltete Javascript-Seiten.
Was sonst so gleich blieb:

  • Statistik erfolgt weiterhin mit Piwik
  • die Suche ist immernoch die von Sphider
  • mein bisheriger HTML5-Audioplayer ist integriert (AMC Player)
  • RSS News zu div. Themen werden im Hintergrund aktualisiert

Um meine Inhalte übernehmen zu können, brauchte ich unbedingt den Ersetzungsmechanismus aus dem bisherigen Parser. Dafür habe ich eine PHP-Klassse (mit Hilfe der Originalvorlage) geschrieben.

Was ist neu?
Neben dem Unterbau und den URLs (eben wg. des neuen CMS)

  • werden Elemente von Bootstrap 3 genutzt: Menüs, Icons, Tabellen und andere Elemente nutzen dieses Framwork.
  • das Layout wurde etwas frischer.
  • Seiten können Tags haben. Mit Klick auf einen Tag kommt man zu einer Suchseite, die Seiten aufzeigt, die denselben Tag verwenden.
  • Seiten-Inhalte zu verwalten ist für mich einfacher. Davon habt ihr zwar nichts direkt, aber ihr profitiert davon.

weiterführende Links

  • Concrete 5 (CMS; Opensource)
  • Matomo.org (Statistik-Tool; früher: Piwik)
  • Bootstrap (HTML-Framework)
  • http://www.sphider.eu/ - Sphider (PHP-Suchmaschine - Anm.: hat bekannte Sicherheitslücken und wird nicht mehr weiterentwickelt)
  • AMC Player (HTML5 Audioplayer für surround und stereo)
  • RSS-News (im Menü rechts dann eine Rubrik wählen)
Artikel weiterempfehlen: Facebook

Weihnachtskarten 2013

Alle Jahre wieder…
Meine elektronische Weihnachtskarte ist online.

2013-12-21-weihnachtskarte.jpg

Die Karte hat als Motiv das Bundeshaus in Bern - was mir nicht neutral genug erschien, um es als versendbare Karte zu gestalten.
Aber mit dem Weihnachtsgruss von 2012 ginge dies (s. Link unten “Der schnellste Weihnachtsmann der Welt”).

Weiterhin gibt es eine Weihnachtskarte rein in Papierform:

2013-12-21-wkarte-papier.png

Weiterführende Links

  1. Weihnachtsgruss 2013 - Anm.: diese e-Card wurde vom Server gelöscht
  2. Weihnachtsgruss 2012 Der schnellste Weihnachtsmann der Welt
  3. Axels Blog Der schnellste Weihnachtsmann der Welt

Wie sowas entsteht?
[Weiterlesen…]

Artikel weiterempfehlen: Facebook