Video « Schnurpsel

Es ist mal wieder Doodle-Zeit – Winsor McCay mit „Der kleine Nemo im Schlummerland“

14.10.2012 23:23 von schnurpselchen in Internet

Es ist mal wieder Doodle-Zeit im Google-Land. Kein Geburtstag steht an, sondern der 107. Jahrestag des Erscheinens der ersten Folge der Comicreihe „Der kleine Nemo im Schlummerland“ (Little Nemo in Slumberland) von Winsor McCay. Am 15 . Oktober 1905 gab es die erste Folge im „New York Herald“.

Ich muß zugeben, ich kenne weder die Comics noch den Zeichner und mußte erst in der Wikipedia nachsehen um wen und was es geht. Wie auch immer, das Doodle ist animiert und interaktiv, was in der mobilen Version aber nicht zu sehen ist:

Das mobile Winsor McCay Doodle ist nicht etwa ein Einzelbild aus dem großen Bruder, sonder ein eigenständiges, kleines Kunstwerk. Mir gefällt es.

Noch etwas ist mir aufgefallen. Links neben dem Eingabefeld für die Suche steht jetzt das normale Google-Logo in einer verkleinerten Version. Damit man weiß, wo man ist, selbst wenn man das Google-Logo im Doodle nicht erkennen kann. :-)

Das richte Doodle habe ich in einem Video aufgenommen und etwas vertont:

Auch das finde ich sehr gelungen, obwohl ich die originalen McCay-Comics nicht kenne. Es wirkt auf mich kindlich, farbenfroh und phantasievoll. Eine schöne kleine Traumreise mit dem einem Happy End im Bett. :-)

Das schreiben die anderen Doodle-Blogger zu Winsor McCay:

Martin vom TagSeoBlog „Tolles Doodle für Winsor McCay („Little Nemo“)„
Ralf Peter von Oceparx „Winsor McCay Google Doodle für Little Nemo„
Dawid von SEOptiker „Winsor McCay’s „Li...�� Doodle für eine Comicreihe„
Simon von SR „Winsor McCay – Pionier des Zeichentrickfilms„

5 Kommentare »

Niels Bohr Doodle, Animation und Video

07.10.2012 15:10 von schnurpselchen in Bildersuche, Internet

Wie schon früher bei einigen anderen Doodles gibt es hier ein kleines „Making Of“ für die Animation zum Niels Bohr Google Doodle. Das Doodle ist dem 127. Geburtstag des dänischen Physikers gewidmet und zeigt das nach ihm benannte Bohrsche Atommodell.

Beim Übergang eines Elektrons von einer höheren (rot, n=3) auf eine nieder (blau, n=2) Umlaufbahn wird vom Atom ein Photon (rote Wellenlinie) ausgesendet.

Naheliegend war für mich, die Elektronen auf ihren Bahnen kreisen zu lassen. Für die äußere Bahn (n=3) sieht das so aus:

Der Übergang vom Niveau n=3 zu n=2 und die Aussendung des Photons ist die eigentlich wichtige Animation:

Die Animation war diesmal technisch nicht besonders anspruchsvoll. Ich mußte nur die beiden Elektronen auf den Bahnen, den Pfeil und die Photonenwelle wegretuschieren. Die Elektronen habe ich dann einfach wieder als gelbe Punkte in eigenen Ebenen hinzugefügt und entlang der farbigen Ellipsen bzw. des Pfeils bewegt.

Alle Einzelbilder zusammen dargestellt sehen so aus:

Für das Video habe ich dann die Anfangssequenz einige Male wiederholt, dann kommt der Elektronen-Übergang und zum Ende die mehrfach wiederholte Endsequenz.

Für die Vertonung habe ich auf altbewährte Musik und Geräusche zurückgegriffen. Das ist vielleicht auf Dauer für Stammseher etwas langweilig. Ich werde meine Musik- und Geräuschesammlung demnächst erweitern, um abwechslunsreicheres Audio-Material zur Verfügung zu haben.

Ob ich das bis zum nächsten Doodle schaffe, weiß ich allerdings nicht.

Keine Kommentare »

Google Doodle zum Tag der deutschen Einheit

03.10.2012 17:40 von schnurpselchen in Internet

Heute gibt es auf der Startseite bei google.de ein Doodle zum Tag der deutschen Einheit. In der mobilen Version sieht es so aus:

Dem Bild nach könnte man meinen, Google hätte die Mauer zerschlagen.

Bisher gab es einschließlich 2012 neun Doodle zum „Tag der Deutschen Einheit“, in der Doodle-Übersicht bei Google „German Reunification Day“ genannt. Ich habe alle diese Doodle in einer GIF-Animation zusammengefaßt:

Das erste Doodle gab es 2002 und dann mit Unterbrechung 2004 und 2005 jedes Jahr am 3. Oktober eins. Bis 2008 war es eine Modifikation des Google-Standardlogos, 2009 der Gewinner von „Doodle 4 Google“ und ab 2010 dann mit spezieller grafischer Gestaltung.

Ein kleines Video zum Tag der deutschen Einheit habe ich auch erstellt. Es verwendet allerdings nicht wie sonst meist das Doole selbst, sondern Aufnahmen von wehenden Deutschland-Flaggen:

Wehende Fahnen zum Tag der deutschen Einheit

Musikalisch habe ich die fliegenden Fahnen mit den Nationalhymnen der DDR und der BRD unterlegt. Zunächst erklingt der Anfang der Hymne (die ersten 8 Takte) jeweils allein, anschließend dann zusammen, also gewissermaßen vereint.

Für die Vertonung hatte ich vorgestern nach passenden MIDI-Dateien gesucht, bin aber nicht so recht fündig geworden. Ich wollte nur die Melodien haben, möglichst nah am Original.

So habe ich beide Stücke kurzerhand selbst „eingespielt“ und biete sie nun hier zur freien Verwendung an. Die MIDI-Dateien enthalten das Initialisieren des GM-Modus (Genaral MIDI), die Auswahl eines Intrumentes und natürlich die Noten selbst. Ich habe einmal eine Klavier-Version (GM:001 – Grand Piano) und eine Streicher-Version (GM:050 – Slow Strings) erstellt.

DDR Nationalhymne „Auferstanden aus Ruinen“
(Hans Eisler/Johannes R. Becher)
– Nationalhymne der DDR – Grand Piano
– Nationalhymne der DDR – Slow Strings

Deutsche Nationalhymne „Lied der Deutschen“
(Joseph Haydn/Hoffmann von Fallersleben)
– Nationalhymne der BRD – Grand Piano
– Nationalhymne der BRD – Slow Strings

Wem die Musik so nicht gefällt, kann sie natürlich auch als Basis für eigene Bearbeitungen verwenden. Für meine Zwecke waren sie ideal geeignet.

So, der Tag der deutschen Einheit neigt sich schon langsdam dem Ende entgegen. Trotzdem wünsche ich allen noch einen schönene Restfeiertag! :-)

Keine Kommentare »

Lustige Zappeleffekte mit JavaScript (jQuery)

17.09.2012 10:57 von schnurpselchen in Internet, Programmierung

Klappfenster

Ohne ausklappenden Fenstern geht im modernen Webdesign fast gar nichts mehr. Dynamische Webseiten sind in und auch gar nicht mal so schwer zu erstellen. Durch die Nutzung einer passenden JavaScript-Bibliothek wie jQuery sind oft nur ein paar Zeilen JavaScript-Code notwendig, um die gewünschten Effekte zu erzielen.

Das nachfolgende Beispiel verwendet die Funktionen .hover() und .slideToggle() und sieht im Quelltext recht überschaubar aus:

$("#festes-fenster").hover(
 function(){
  $(this).next().slideToggle(150);
 }
);

JavaScript-Code
Beim div (Fenster) mit der id „festes-fenster“ wird für das Mausereignis „Betreten“ und „Verlassen“ eine Ereignisfunktion (Event-Handler) installiert, die das nächste div mit der Funktion slideToggle() ein- oder ausklappen läßt.

Hier das Beispiel:

festes Fenster

Bewegt man die Maus in das feste Fentster, wird das Zappel-Fenster ausgeklappt. Verläßt der Mauszeiger wieder den gestrichelt umrandeten Bereich, verschwindet das Fenster wieder. So weit, so gut.

Zappelphilipp

Interessant ist der untere Rand des festen Fensters, denn dieser wird vom Zappelfenster, wenn es sichtbar ist, teilweise überdeckt. Wenn nun der Mauszeiger in diesen Bereich gelangt, beginnt das Zappel-Fenster zu zappeln.

Der Grund ist die Überlappung. In dem Moment, wo das zweite Fenster ausgeklappt wird, überdeckt es das erste Fenster, wodurch die Maus dieses Fenster verläßt. Dadurch wird das Zappelfenster zugeklappt, die Maus ist wieder im festen Fenster, also wird das Zappelfenster wieder ausgeklappt, übderdeckt wieder das feste Fenster, wird wieder zugeklappt usw. usw. Das geht immer weiter, so lange sich der Mauszeiger im Überlappungsbereich der beiden Fenster befindet.

Beispiele aus der Praxis

Daß das nicht nur theoretische Überlegungen sind, zeigen zwei Bespiele aus der Parxis. Dadurch bin ich überhaupt erst auf dieses Phänomen aufmerksam geworden.

Bei Google+ gibt es in der linken Symbolleiste den Menüpunkt für „Fotos“ und ganz unten „Mehr“. Hier werden jeweils Unterfenster nach rechts ausgeklappt, die man zum Zappeln bringen kann. Ich habe das hier in einem kurzen Video demonstriert:

Beim zweiten Beispiel kommt noch eine weiterer Aspekt hinzu, ein Zappel-Speichereffekt. Ich habe es jetzt nicht genauer untersucht, aber es sieht so aus, als würden die Mausereignisse in eine Art Warteschlange eingereiht und asynchron abgearbeitet werden.

Wenn die Maus eine Weile im Zappel-Bereich verweilt und zum nächsten wechselt, zappelt das vorhergehende Fenster noch weiter. Das gibt ganz lustig aussehenden, nun ja, fast schon Tanzdarbietungen:

Die „Musik“ ist auf der ursprünglichen Webseite nicht vorhanden, die habe ich erst im Video drunter gelegt. :-)

hochgeschwindigkeitsSEO – das Ende ist nah

12.09.2012 13:11 von schnurpselchen in Bildersuche, Geld verdienen, Internet

hochgeschwindigkeitsSEO – 22 Uhr fällt der Hammer

Hier bei schnurpsel.de habe ich mich mit dem hochgeschwindigkeitsSEO-Contest eher zurückgehalten. Nur die Übersicht der Ranking-Seiten gab es bisher zu diesem Thema. Meine Aktivitäten habe ich auf gerech.net verlagert, eine Website, die schon immer mit SEO-Wettbewerben zu tun hatte.

Die ersten Inhalte erhielt die Seite mit der Hommingberger Gepardenforelle. Das ist nun auch schon wieder sieben Jahre her, damals habe ich noch kein WordPress, kein CMS verwendet. Es waren alles handgeschriebene, statische HTML-Seiten.

Zu der Zeit hatte ich auch das erste Mal etwas von SEO, der Suchmaschinenoptimierung, gehört und ein gewisses Basis-Wissen zu dem Thema erlangt.

Dann dümpelte die Seite viele Jahre unverändert vor sich hin, bis ich sie vor gut einem Jahren für den Simsalaseo-Bildersuche-SEO-Wettbewerb wieder reanimiert habe.

Der Start war auch recht vielversprechend, allerdings hat es im Endspurt dann doch nur für einen undankbaren, weil preislosen, fünften Platz gereicht.

Aber das ist alles sentimentales Geschwätz, hier und heute geht es um den hochgeschwindigkeitsSEO. :-)

Heute Abend um 22 ist also Schluß, das Zielfoto (Screenshot) oder das offizielle Sixtrix-Ranking entscheiden über Sieg und Niederlage beim hochgeschwindigkeitsSEO-Wettbewerb.

hochgeschwindigkeitsSEO – Suche, Bilder, Videos

Auch wenn es für eine Schlußbetrachtung noch zu früh ist, kann ich jetzt schon sagen, es gewinnt wieder die Seite mit den meisten und/oder stärksten Links, vereinfacht gesagt.

Bei der normalen Suche hatte ich mit meinem gerech.net-Artikel zwischenzeitlich sogar mal Platz 3 inne (im Diagramm nicht zu sehen), weil ich am Anfang recht schnell „am Markt“ war. Der Artikel konnte sich zunächst gut in der Top-10 halten, wurde dann auf die Trefferseite 2 verdrängt und ist seit gestern nur noch auf der dritten Seite zu finden.

Ich sag mal so, etwas anderes habe ich auch nicht erwartet.

Nicht wirklich erfolgreich war diesmal meine hochgeschwindigkeitsSEO-Top-123 und auch meine Artikel hier bei Schnurpsel mußte sich mit hinteren Rängen zufrieden geben.

Etwas besser lief es in der Bildersuche, auch wenn die Rankings dort keine offizielle Beachtung finden. Eine Ausnahme wäre es vermutlich, falls es die Bilder-OneBox (Universal-Search) auf die Top-Position schaffen würde. Dann wäre nach meinem Dafürhalten der mit dem ersten Bild der Gewinner des Preise. Aber danach sieht es im Moment eher nicht aus.

Bei der Bildersuche zeigt sich mal wieder die deutliche Diskrepanz zwischen Bilder-Ranking und Universal-Search-Einblendung. Vor einigen Tagen hatt es das hochgeschwindigkeitsSEO-Translate-Bild auf den ersten Platz der Bilder-OneBox geschafft, war aber im Ranking der Bildersuche auf den ersten Seiten gar nicht zu finden.

Auch im Moment findet man recht unterschiedliche Bilder in der Bildersuche und in der OneBox. Aus meiner Sicht hat das viel mit Aktualität zu tun. Die Bildereinblendung in den Suchergebnissen reagiert schneller auf Veränderungen und zeigt vorzugsweise neue Bilder oder alte Bilder in einem neuen, aktuellen Kontext an.

Und was ist mit Videos?
Wie es im Moment aussieht, wird mein erfolgreichester Beitrag zum hochgeschwindigkeitsSEO-Contest ein Video sein:

Hier zahlt sich vielleicht auch die Schnelligkeit aus, denn ich hatte das Video bereits am 3. September kurz vor 20 Uhr am Start, also schon etwa zwei Stunden nach dem hochgeschwindigkeitsSEO-Startschuß. Es hat zwar bisher nur knapp 100 Views, liegt aber noch als bestes Video bei Google auf Platz 12:

Aber es sind ja noch 9 Stunden Zeit bis zum hochgeschwindigkeitsSEO-Finale, da kann noch so einiges passieren.

2 Kommentare »