JavaScript: Stein, Schere, Papier

Stein, Schere, Papier … manchmal auch noch ein Brunnen, aber wir wollen ja nicht übertreiben. Zumindest nicht in diesem kleinen englischsprachigen Tutorial in JavaScript:

Vom Macher als für Einsteiger geeignet, muss man tatsächlich keine Grundkenntnisse in JavaScript haben, sollte allerdings zumindest mit HTML und CSS etwas anfangen können. Aber ansonsten deckt der gute Powerslacker mit Variablen, Objekten, Funktionen, If/else usw. eigentlich alles ab, was man für den Einstieg in JavaScript sonst so in Lehrbüchern erfährt.

Obwohl man nach diesem einstündigen Tutorial zwar ein funktionierendes “Stein, Schere, Papier” im Browser hat, aber natürlich kein JavaScript-Programmierer geworden ist.

Dennoch hat man einen ziemlich guten Einstieg gefunden und im Gegensatz zu den meisten Lehrbüchern auch schon nach einer Stunde ein ziemlich cooles Ergebnis vorzuweisen – bei so manchem Lehrbuch ist man in der gleichen Zeit wohl erst einmal bei einem alert(‘Hallo, Welt!’) angekommen.

Hier gibt es übrigens meine ins deutsche übersetzte Version des Spiels.

Müller Milch, Müller Milch die schmeckt …

Ich persönlich schätze die Online-Kommunikation von Müller Milch ja ungemein. Vor allem auch deshalb, weil man sich hier nicht gleich jeden künstlich erzeugten Shitstorm sozusagen aus Prinzip beugt.

Dahinter scheint durchaus Methode zu stecken, wie man in diesem hörenswerten Podcast erfährt. Christian Meyer, der als Senior Media Manager Europe und Head of Digital bei der Theo Müller Gruppe einen Millionenetat in Sachen Werbung ausgibt, hat ja mit seinem offenen Brief zur letzten Dmexco einiges an Aufregung produziert. Aber frei nach dem Motto “Es wird nichts so heiß gegessen, wie es gekocht wird”, kommt auch in diesem Podcast sehr gut heraus, dass es Meyer nicht um Online-Bashing geht, sondern vielmehr um den differenzierten Blick. Statt jedem Hype nachzulaufen, sollte man also vielmehr erstmal überlegen, was am Ende dabei rauskommt, ehe man vorne viel Geld reinsteckt. Und dabei legt er übrigens auch sehr gezielt seinen Finger in so manche offene Wunde, die Online Marketer lieber verstecken möchten.

Der heiße Scheiß der Woche (067)

+ + + Google can now tell you how busy a place is before you arrive + + +

Mit anderen Worten, Google sagt einem dann, ob man überhaupt die Chance auf einen freien Platz hat. Wieder einmal eine dieser folgerichtigen Entwicklungen, die Geschäfts- und Restaurantinhaber die Bedeutung von local SEO vor Augen führen sollte.

+ + + Kostenlose Fotos: 42 handverlesene Dienste für völlig frei zu verwendende Bilder + + +

Zwar kosten Bilder von kostenpflichtigen Angeboten auch nicht mehr die Welt, aber so manche Nutzungsbestimmungen (z.B. darf das gekaufte Foto auch bei Facebook auftauchen, wenn die Seite geteilt wird) treiben einen dort regelmäßig in den Wahnsinn. So manch hier verzeichnete Dienst ist hier ziemlich freigiebig.

+ + + 5 harte Wahrheiten über Social Media-Marketing (und wie Sie damit umgehen) + + +

Mühsam ernährt sich das Eichhörnchen – diese erste Lektion, die ich in Sachen Social Media gemacht habe, gilt heute immer noch. Dummerweise gilt ebenso die Meinung mancher Chefs unverändert, dass dieses Facebook da doch umsonst ist und uns Kunden en masse bringt.

Eine eigene YouTube-Playlist erstellen

Eigentlich sollte man ja meinen die Usability bei YouTube sei zumindest ausreichend, damit sich Otto-Normal-User damit zurecht findet. In vielen Fällen stimmt das ja auch, wer allerdings auf seiner Webseite schon mal eine Playlist eingebunden hat, wird da vielleicht anders denken. Denn nicht wenige User dürfte die ausklappbare Playlist links oben schlicht entgehen.

Dem kann man an sich nicht wirklich Abhilfe leisten, allerdings kann man mit Hilfe von ein wenig JavaScript relativ simpel eine eigene Playlist wie jene in diesem Screenshot zusammenbauen:

youtubplaylist

Dabei ist das obere Video das Standard-iFrame von YouTube, während die unteren Vorschaubilder die eigene Playlist abbilden. Natürlich ist das Ganze so miteinander verknüpft, dass ein Klick auf eines der Vorschaubilder im eingebundenen iFrame das entsprechende Video abspielt.

Der Code für iFrame und erstes Vorschaubild sieht folgendermaßen aus:

<iframe id="vid_frame" width="1100" height="620" src="https://www.youtube-nocookie.com/embed/mL5YtfBgK1M?list=PLOLx2a4eonZUD7ePvVvh_Ex5I4AX22qsa" frameborder="0" allowfullscreen></iframe>

<p><strong>Playlist:</strong></p>
<div class="vid-list">
<div class="vid-item" onClick="document.getElementById('vid_frame').src='http://youtube.com/embed/mL5YtfBgK1M?autoplay=1&rel=0&showinfo=0&autohide=1'">
<div class="vid-item">
  <div class="thumb">
   <img src="http://img.youtube.com/vi/mL5YtfBgK1M/0.jpg">
  </div>
  <div class="desc">
      Mercedes GLE Coupe Tuning mit Maserati Ghibli V8 Sound
  </div>
</div>
</div>

Zuerst kommt das von YouTube kopierte iFrame, das allerdings mit id=”vid_frame” ergänzt wird. Das ist notwendig, damit die JavaScript-Funktion weiß, wo es das in der Playlist angeklickte Video abspielen soll.

Eingebunden wird das ganze mittels des EventHandlers onClick, hier begegnet uns das vid_frame innerhalb der JavaScript-Funktion ja wieder. Als Quelle, src für Source, wird dann das YouTube-Video angegeben, das abgespielt werden soll – hier inklusive der Anweisung automatisch gestartet zu werden und die Info auszublenden. Im Prinzip reicht es in ‘http://youtube.com/embed/mL5YtfBgK1M?autoplay=1&rel=0&showinfo=0&autohide=1’ die Video ID mL5YtfBgK1M durch die des gewünschten Videos zu ersetzen.

Theoretisch könnte man dann auch einen einfachen Textlink setzen, mit einem Vorschaubild sieht das ganze aber doch viel besser aus. Gut, dass man eine ganze Reihe von Vorschaubildern eines YouTube-Videos auch direkt ansteuern kann. nämlich mit der URL http://img.youtube.com/vi/mL5YtfBgK1M/0.jpg. Auch hier muss man einfach nur die gewünschte Video-ID austauschen. Gefällt einem das 1. Thumbnail nicht, kann man mit 1.jpg das zweite ansehen usw. usf.

Das komplette Beispiel zum herunterladen gibt es hier, im Einsatz befindet es sich unter www.powersoundmodul.de.

Der heiße Scheiß der Woche (066)

+ + +  Facebook, in Cross Hairs After Election, Is Said to Question Its Influence + + +

Hat Facebook einen Einfluss auf den Ausgang der US-Wahlen gehabt? Mark Zuckerberg sagt nein, schließlich will man im Silicon Valley nicht am Sieg von Trump Schuld sein. Einige seiner Mitarbeiter denken da ein bisschen kritischer.

+ + + Inking-Trend: Produktiver mit Stift + + +

Ganz ehrlich, ich liebe mein Surface Pro 4. Aber ohne den Surface Pen wäre selbst dieses Gerät nur halb so geil! Und ja, ich bin mir eigentlich im Klaren darüber, dass es schon ein bisschen komisch ist, dass ausgerechnet ein Stift ein so modernes Geräte noch verbessern kann.

+ + + Hälfte der deutschen Unternehmen hat “keine echte Digitalstrategie”  + + +

Deutsche Unternehmen und die Digitalisierung, ein leidiges Thema. Aber daran wird sich wohl nichts ändern, weil viele eben noch die Realität beharrlich ignorieren.

+ + + YouTube SEO – Der umfassende Guide + + +

Umfassend trifft es ganz gut. Wer einen informativen Einstieg in das Thema Suchmaschinenoptimierung bei YouTube sucht, ist mit dieser Seite recht gut bedient.