SteviesWebsite Webmaster Blog

Werbebanner als Easter Eggs – Mit Canvas

Stefan Wienströer — Sun, 13 May 2012 17:40:49 +0000

Einen Werbebanner möchte man als Webmaster immer prominent Platzieren. Doch leider bringt das manchmal nicht das gewünschte Ergebnis. Der User ist irgendwann genervt von den Bannern und nimmt sie auch gar nicht mehr richtig wahr (Bannerblindheit).

Warum also nicht mal die Werbung verstecken und wenn ein User diese findet zum Beispiel einen Coupon oder Ähnliches anzubieten? Dann sehen die Werbung zwar viele nicht, die die sie sehen, wundern sich aber und werden vielleicht schneller darauf klicken.

Als kleinen Einstieg, möchte ich heute mal einen Werbebanner erstellen, der erst mal gar nicht zu sehen ist. Fährt der User aber zufällig über die Stelle, wird der Banner nach und nach gemalt.

Als Basis hierzu dient ein Canvas-Element, welches als Hintergrundbild einen Werbebanner bekommt:


<html>
  <body>
    <canvas id="canvas" width="300" height="250" 
      style="cursor:pointer;background-image:url('banner.gif')">
    canvas>
  body>
html>

Mittels JavaScript übermalen wir nun den Hintergrund und fügen ein onclick ein, um den Banner auch anklickbar zu machen


<html>
  <body>
    <canvas id="canvas" width="300" height="250" 
      style="cursor:pointer;background-image:url('banner.gif')">
    canvas>
    <script>
      var canvas = document.getElementById('canvas');
      if (canvas.getContext){
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = "#fff"
        ctx.fillRect(0,0,canvas.width,canvas.height);
      }
      canvas.onclick = function(){
        window.location.href = "http://www.contentlion.de";
      }
    script>
  body>
html>

Das einzige, was jetzt noch fehlt, ist das Übermalen. Dies geht einfach über mousemove. Wir löschen dabei den Bereich, über dem die Maus gerade fährt:


<html>
  <body>
    <canvas id="canvas" width="300" height="250" 
      style="cursor:pointer;background-image:url('banner.gif')">
    canvas>
    <script>
      var canvas = document.getElementById('canvas');
      if (canvas.getContext){
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = "#fff"
        ctx.fillRect(0,0,canvas.width,canvas.height);
      }
      canvas.onmousemove = function(e){
        ctx.clearRect(e.x - 5,e.y - 5,10,10);
      }
      canvas.onclick = function(){
        window.location.href = "http://www.contentlion.de";
      }
    script>
  body>
html>

Und fertig ist unser Werbebanner! Diesen kann man dann zum Beispiel innerhalb eines Textes verstecken, damit die User auch darüberfahren. Mein Ergebnis ~~findet~~ sucht ihr hier

Social Media mit Google Analytics analysieren

Stefan Wienströer — Mon, 07 May 2012 18:05:57 +0000

Google Analytics bietet unter Besucherquellen Neuerdings “Soziale Netzwerke”. Hiermit ist es noch leichter möglich, seine Social Media Aktivitäten zu tracken.

Soziale Interaktion

Man kann die sozialen Netzwerke nun leicht miteinander und mit der Gesamtzahl der Besucher vergleichen. Bei mir wurden zurzeit folgende “soziale Netzwerke” erkannt:

Facebook
Twitter (in älteren Daten auch Hootsuite)
YouTube
Facebook Apps
Google+
Stack Overflow
Blogger
Delicious
paper.li
Bloglines
Diigo
Instantpaper
Netvibes
Read It Later
LinkedIn

Die Anzahl der Zugriffe könnte man auch durch seine bisherigen Zugriffsquellen leicht erfassen. Doch hier kann man innerhalb mancher Netzwerke auch noch ins Detail gehen. So kann ich zum Beispiel sehen, wie sich meine Google+ Besucher zusammensetzen:

Google+ Statistiken

Natürlich kann man auch die geteilten Urls analysieren.

In Sachen Social Media habe ich meistens eine hohe Absprungsrate. Um dies zu optimieren, gibt es auch eine Grafik für den Benutzerfluss. Dabei sieht man, wo die sozialen Besucher überall hergewandert sind:

Besucherfluss

Ein sehr starker Fokus scheinen mir aber die Conversions zu sein, hier scheinen die Daten aber noch nicht ganz vollständig zu sein. Trotz Conversions habe ist keine Conversion-Rate zu sehen:

Conversions (contentlion.de)

Ihr solltet euch die neuen Berichte auf jeden Fall einmal ansehen, die Daten sind sehr interessant. Ich denke diese Statistiken sind ein erster Schritt in Richtung Monetisierung von Google+. Wenn man hier erst mal die ersten Schrauben gezogen hat, wird man sich später vielleicht auf einen Versuch mit Google+ Werbung einlassen.

Ich möchte mir die Datensätze mal etwas genauer für euch ansehen, also schön liken, twittern und was es sonst noch so gibt

Siehe auch

Googles Coding-Guidlines für HTML & CSS

Stefan Wienströer — Sat, 05 May 2012 13:54:34 +0000

Google hat vor kurzen eigene Guidlines für HTML & CSS vorgestellt. Solche Coding-Guidlines sind gut, damit der Quellcode z.B. in einem Projekt immer gleich aussieht. So ist der Code geordneter und man weiß bei einigen Sachen so ungefähr wo man suchen kann. Coding-Guidlines können auch dafür sorgen, dass performant programmiert wird. So können strukturbasierende Performanceengpässe vermieden werden.

Coding-Guidlines für HTML & CSS habe ich bisher nur im kleinen Umfang gesehen. Google hat da schon einiges aufgestellt. Eine Einhaltung der Guidlines wird die Crawlbarkeit erleichtern, die Performance steigern, sowie auch die Vermeidung von browserspezifischen Fehlern.

Im Endeffekt habe ich dort viele Sachen gefunden, die ein guter Entwickler eigentlich schon kennen sollte. Aber neben den “normalen” Sachen habe ich auch ein paar Regeln gefunden, die ich bisher so nicht angewendet habe, die aber trotzdem Sinn ergeben.

Protokoll

Google schlägt vor das http: und https: bei Scripten, Stylsheets wegzulassen, damit die Seite ohne Probleme mit und ohne https läuft.
Beispiel: //blog.stevieswebsite.de statt http://blog.stevieswebsite.de.

Todo

Aufgaben sollen als Kommentar mit gekennzeichnet werden. Hier ist es aber von Vorteil, wenn man PHP-Kommentare oder Ähnliches benutzt, damit diese nicht an den Browser übergeben werden.

Umlaute sollen Umlaute bleiben

Google lehnt das Kennzeichnen von Umlauten, wie zum Beispiel dem ü mit ü ab. Dies sollte stattdessen durch die UTF8-Kodierung geschehen.

Kein kein

Seit HTML5 ist es möglich, den Head- bzw. den Body-Tag auszulassen. Und dies möchte Google auch, um den HTML-Quelltext schmaler zu machen.

type Attribute auslassen

Beim Script- oder Style-Tag, gibt man ja häufiger mal den type (z.B. mit text/css) an. Seit HTML5 ist auch dies nicht mehr erforderlich und sollte auch nicht mehr gemacht werden.

CSS IDs und Klassen so kurz wie möglich

IDs und Klassen sollten so kurz wie möglich aber so lang wie nötig sein. Als Beispiel wird aus navigation nav gemacht, aus atr aber author.

Keine CSS-Selection aus Kombination mit id/classe und typ

Statt input.color sollte man dann nur noch .color benutzten. Für verschiedene Typen kann man sich dann mit neuen Klassen aushelfen. Dies soll sich positiv auf die Performance auswirken.

Namen, ids und Klassen durch Bindestrich trennen

Ich persönlich nutze entweder CamelCasing, oder Unterstriche um Wörter in Namen usw. zu trennen. Besser wäre laut Google aber Bindestriche zu nutzen.

Mehr Regeln

Das waren nur die Regeln, die ich bisher noch so gar nicht angewand habe. Ein Blick in die Guidlines lohnt sich auf jeden Fall! Wenn ihr noch eine Regel findet, die dort noch nicht ist, bzw. eine, der ihr so gar nicht zustimmen könnte, könnt ihr euch gerne in den Kommentaren auslassen

Deine E-Mail Adresse verrät mir dein Alter!

Stefan Wienströer — Sun, 22 Apr 2012 12:23:21 +0000

Wer diese Woche mal meine Facebook-Timeline gecheckt hat, der wird vielleicht ein Bild von face.com entdeckt haben. Das ist ein Dienst, der Gesichter auf Bildern erkennt und analysiert. Bei mir sah dies zum Beispiel so aus:

Das mit dem Alter hat bei mir zwar nicht so gut geklappt, aber ich habe auch schon Bilder gesehen, dessen Ergebnis zutraf.

Das Besondere ist, man kann den Dienst über die API selbst benutzten. Man gibt einfach ein Bild an und bekommt die im Bild gezeigten Daten zurück. Diese können dann zum Beispiel für personalisierte Werbung genutzt werden. Frauen bekommen dann zum Beispiel Cola Light Werbung und Männer Coke Zero

Verknüpfung mit Gravatar

Man muss also nur noch an ein Bild des Users kommen. Das geht über den Dienst Gravatar. Dort können User ein Bild hochladen, dass dann auf sehr vielen Websites neben den Kommentaren angezeigt wird. Dies geschieht über eine Verknüpfung der E-Mail Adresse.

Also kann man über eine Verknüpfung von Gravatar und face.com an die sozialen Daten eines Nutzer kommen – Nur mit der E-Mail Adresse!

Prinzip für fremde Websites

Man kann sogar noch einen Schritt weiter gehen. Man liest einfach alle Gravatar-Bilder einer Website aus und bestimmt damit die Zielgruppe der Website. Suchmaschinen können sich dies zur Nutze machen und die Personalisierung der Suche auch an Hand sozialer Daten ganz leicht ausbauen.

Vorsicht bei Fotos

Wer solch eine Personalisierung nicht möchte, sollte sich bei Diensten wie Gravatar gar nicht erst anmelden, oder aber kein echtes Foto zur Verfügung stellen. Nur seien wir mal ehrlich: Wer von uns ist nicht bei Facebook? Durch die Nutzung dessen Logins und ähnlichen Technologien sind die Daten so oder so schon im Umlauf.

Letztendlich sollte man darauf achten, was man im Internet preisgibt und was nicht. Mir persönlich ist es egal, ob ich personalisierte Werbung angezeigt bekomme. Denn dadurch wird auch weniger Werbung gezeigt, weil die Anzeigen schon so wirken.

Auswertung: Nutzung sozialer Netzwerke

Stefan Wienströer — Thu, 12 Apr 2012 18:20:59 +0000

Auf Alexa kann man die Nutzungsstatistiken von Websites untersuchen. Neben den Zugriffsquellen ist es bei großen Seiten auch möglich zu sehen, was für eine Art von Menschen diese Website besuchen. Ich habe mal die Statistiken als Infografiken zusammengefasst.

Leider konnte ich Google+ nicht aufnehmen, da es nur das komplette google.com gibt.

Altersverteilung

Geschlechter

Schulbildung

Kinder

Ort der Nutzung

Ist gilt natürlich zu beachten, dass die Werte nich unbedingt genau sein müssen

ContentLion Beta veröffentlicht!

Stefan Wienströer — Sat, 07 Apr 2012 11:58:41 +0000

ContentLion Dashboard

Vor knapp über drei Jahren hat in diesem Blog alles angefangen: Ein CMS musste erstellt werden. Es wurde in über 250 Beiträgen zusammen mit den Usern erstellt und hat somit einen ganz besonderen Open Source Stil an sich.

Nach und nach hat sich das Ganze entwickelt und heute steht die Beta-Version zum Download bereit. Diese Version soll erstmals auf eine breitere Masse an Usern ausgeliefert werden. Zuvor gab es bereits eine längere Testphase. Die Entwicklung hat echt lange gedauert (wenn auch nicht täglich daran entwickelt wurde) und ich hoffe, einige von euch als Tester gewinnen zu können.

Grundprinzip

ContentLion ist ein CMS, welches auf einem Ordnersystem basiert. Man kann innerhalb des Ordners unter anderem Menüs und Artikel erstellen, sowie Bilder hochladen. Aber man kann auch die kompletten Einstellungen ändern. So ist es zum Beispiel möglich für einen Unterordner ein komplett anderes Design anzuzeigen oder auch eine andere Sprache zu nutzen. Und es geht sogar noch weiter: Dies geht auch mit verschiedenen Benutzergruppen. So ist das Backend mit denselben Komponenten gemacht, wie das Frontend.

Suchmaschinenoptimiert

Da ich mich selbst mit dem Thema Suchmaschinenoptimierung auseinander setze, habe ich dies natürlich nicht zu kurz kommen lassen. Dazu gehören zum Beispiel folgende Funktionen:

Generierung der Sitemap, inkl. Priorisierung und Änderungsfrequenz
Automatische Canonical-Tags, die man aber auf Wunsch von Hand ändern kann
Integrierte Weiterleitungen, die wahlweise als 301 oder 302 fungieren.
Suchmaschinenfreundliche Urls (eigentlich Standard, oder?)
Meta Description, Keywords & Robots können direkt angepasst werden. Wenn das nicht reicht, kann man auch den HTML-Head erweitern.

Erweiterbarkeit

Wenn ich ein CMS nutze, möchte ich es nach meinen Wünschen anpassen können – Das ist auch ein Grund, warum ich mich entschieden hab ein CMS zu gründen. In ContentLion kann man verschiedene Seitentypen nutzen. Diese kann man durch ein Plugin erweitern, und somit eine komplett dynamische Seite erstellen.

Es gibt so genannte Datentypen. Diese Stellen beliebige Objekte, wie zum Beispiel Seiten oder auch Benutzer da. Wenn man einen solchen Typ per Plugin erstellt, kann man im CMS ganz leicht ein Formular zur Erfassung basteln, oder aber auch erfasste Datentypen über die API nach außen freigeben.

Es ist auch möglich, eine Liste zu erstellen, die mit einem SQL-Query befüllt wird.

Mobil nutzbar!

Das mobile Web hat sich mittlerweile etabliert. Viele Seiten haben bereits eine mobile Version im Angebot. ContentLion erkennt Smartphones automatisch und zeigt für diese ein eigenes Design an. Dies kann natürlich auch frei gewählt werden.

Tester gesucht

Wie ihr vielleicht am Anfang schon gemerkt habt, ist ContentLion ein CMS, was durch die Community lebt. Na klar hat nicht jeder Zeit mitzuentwickeln, aber ein wenig testen wäre schon schön Wir werden euer Feedback auswerten und so viel wie möglich davon auch verwirklichen.

Also: Jetzt herunterladen!

Erster Screenshot der Facebook Suchmaschine

Stefan Wienströer — Sat, 31 Mar 2012 12:22:39 +0000

Vor ein paar Tagen wurde bekannt, dass Facebook möglicherweise an einer eigenen Suchmaschine arbeitet. Ich habe mir mal die Mühe gemacht, und einen Entwurf der Oberfläche gebastelt, wie ich mir die Suche vorstellen könnte.

Facebook Suchmaschine

(Einfach auf das Bild klicken, um mehr zu sehen)

Meiner Meinung nach wird Facebook versuchen, so viele eigene Inhalte wie möglich einzubinden. Aus diesem Grund werden vermutlich Gruppen und Seiten an prominenter Position auftauchen. Ich habe sie mal nach ganz oben gesetzt.

Es wird natürlich auch normale Webergebnisse geben. Da Facebook ja schon eine eigene Kommentar-Funktion zum Einbinden in externe Seiten hat, könnte ich mir vorstellen, dass diese auch in der Suche auftaucht. So könnte man jedes Ergebnis kommentieren, ob es der Webmaster will oder nicht. Die Anzahl der Kommentare und Likes wird dann vermutlich auch ein Rankingkriterium sein.

Facebook und Bing?

Bei der Suche selbst könnte ich mir vorstellen, dass sich Facebook hierbei mit Bing zusammentut. Das hätte Vorteile für beide Seiten. Bing bietet bereits einiges an Technologie für die Websuche. Sie indexieren bereits fleißig und haben auch Lösungen, um die Ergebnisse so passend wie möglich zu machen. So etwas komplett neu wäre für Facebook ein harter Weg. Aber auch Bing hätte etwas davon. Es kann vom Traffic her noch lange nicht mit Google mithalten. Durch die Integration von Facebook könnten sie ein großes Publikum erreichen. Nicht zuletzt arbeiten Facebook und Microsoft schon seit längeren zusammen, was meine Theorie noch unterstützt.

Suche mit Fragen

Ich könnte mir vorstellen, dass auch die Fragen auf Facebook eine große Rolle spielen könnten. Tippt jemand eine Frage ein, werden bereits erstellte Fragen durchsucht und dessen Ergebnis angezeigt. Ist noch keine Frage vorhanden, könnte der User diese auf seiner Pinnwand posten. Auch hier hätte Facebook eine Möglichkeit um eine gigantische Menge an Content zu kommen – Content, an den Google und Co nicht rankommen.

Stefan Wienströer sucht “test”

Wenn Facebook den Datenschützern einen kleinen Streich spielen möchte, könnten sie ein Widget machen, in dem die aktuellen Suchanfragen der Freunde angezeigt werden. So könnte man sich gegenseitig Ergebnisse vorschlagen. Sowas gibt es glaub ich auch noch nicht.

Fazit

Es wird auf jeden Fall spannend, wenn Facebook mit einer Suchmaschine ankommt. Durch das große Publikum könnte es Google, zumindest ein wenig, vom großen Kuchen der Websuche klauen. Ich bin mal gespannt, ob die Suche ein paar meiner Ideen wirklich eingebaut hat. Vielleicht lassen die sich ja auch von dem Artikel inspirieren

Infografik deiner Facebook Nutzung

Stefan Wienströer — Sun, 25 Mar 2012 11:58:11 +0000

Inforgrafiken gibt es letzter Zeit in großer Masse. Aber jetzt gibt es einen Dienst, der eine Infografik an Hand deiner Facebook Nutzung: GetAboutMe. Einen Teil der Statistik gibt es so, für einen anderen muss man einen Like ausführen (kann man ja nach der Nutzung wieder rausnehmen )

Analyse der letzten Posts

Das besondere an der Grafik ist, dass die das “ö” in meinem Nachnamen vergessen haben Ich habe im Schnitt jeden Tag einen Post geschrieben. Dafür gab es 180 Likes und 134 Kommentare. Am meisten schreibe ich meistens am Freitag und allgemein so um 19 Uhr. Die Uhrzeit kann passen, da ich um die Zeit meistens abends meinen Rechner anschalte Gegen 12 hab ich Mittagspause, wo dann vielleicht auch mal ein Post geschrieben wird. Aber so 100%tig genau, sind die andern Uhrzeiten nicht.

Über mich

Von mir gibt’s nicht viele Fotos auf Facebook, dass zeigt auch die Statistik. Die meisten meiner Facebook Freunde sind männlich, was wohl an meinen eher technischen Posts liegt.

Mehr über mich

Da ich nirgends einchecke, habe ich auch noch keine KM zurückgelegt. Auch Gruppenmitgliedschaften hab ich nicht viele. Meine Freunde sind ungefähr so alt wie ich (21).

Insgesamt ist es ein interessantes Tool. Mich würd mal interessieren, was bei euch so rausgekommen ist.

Gefunden auf TheNextWeb.

Bildbearbeitung mit HTML5

Stefan Wienströer — Sun, 18 Mar 2012 15:39:50 +0000

Mit dem Canvas-Element von HTML5 kann man vieles machen. Man kann zum Beispiel aus Bildbearbeitungsprogrammen bekannte Filter-Funktionen, wie zum Beispiel das Negieren eines Bildes nachbauen. Und genau das werde ich heute mit euch machen.

Bild in das Canvas laden

Als erstes müssen wir ein Bild in das Canvas-Element laden. Dieses muss aus Sicherheitsgründen auf der gleichen Domain liegen. Fangen wir mal an mit der HTML-Datei:

 html>

  
    </span>HTML <span style="color: #cdb7b5;">5</span> Bildbearbeitung<span style="color: #f0e68c;">
     src="imageeditor.js" type="text/javascript">
  
  
     id="canvas">

Hier wird einfach nur ein Canvas-Element platziert und das Script imageeditor.js geladen. Dieses Script müssen wir jetzt erstellen:

function ImageEditor(imageUrl,canvasId)
{
  //Den Context brauchen wir um mit den Canvas zu interagieren
  var context = document.getElementById(canvasId).getContext('2d');

  //Ein neues Image-Objekt erstellen
  var image = new Image();

  //Die im Parameter angegebene Url laden
  image.src = imageUrl;

  //Wenn das Bild fertig geladen hat, können wir weiter machen
  image.onload = function(){
    //Das Canvas soll die gleiche Größe haben, 
    //wie das Bild
    document.getElementById(canvasId).width = image.width;
    document.getElementById(canvasId).height = image.height;

    //Bild in das Canvas zeichnen
    context.drawImage(image,0,0);
  }

}

Diese Funktion soll später als Klasse interagieren. Wir benötigen ein context-Objekt, mit welchen gezeichnet werden kann. Dieses Objekt wird über die, als Parameter übergebene, ID des Canvas-Elements erstellt. Hauptverantwortlich für die Bilder ist das Image-Objekt. Dies bietet die Funktion onLoad, die aufgerufen wird, wenn das Bild vollständig heruntergeladen wurde.

Jetzt müssen wir das ganze nur Noch in der HTML-Datei aufrufen:

 html>

  
    </span>HTML <span style="color: #cdb7b5;">5</span> Bildbearbeitung<span style="color: #f0e68c;">
     src="imageeditor.js" type="text/javascript">
  
  
     id="canvas">

     type="text/javascript">
      var editor = new ImageEditor('avatar.jpg','canvas');

Wenn jetzt die Datei avatar.jpg im Ordner liegt und der Browser das Canvas schon unterstützt, sollte nun das Bild angezeigt werden. Beispiel anzeigen

Bild negieren

Ist das Bild geladen, können wir mit dem Bearbeiten anfangen. Als Beispiel habe ich mir das Negieren des Bildes überlegt. Dafür erweitere ich den ImageEditor um die Funktion invert:

function ImageEditor(imageUrl,canvasId)
{
  //Den Context brauchen wir um mit den Canvas zu interagieren
  var context = document.getElementById(canvasId).getContext('2d');

  //Ein neues Image-Objekt erstellen
  var image = new Image();

  //Bild noch nicht geladen
  var ready = false;

  //Die im Parameter angegebene Url laden
  image.src = imageUrl;

  //Wenn das Bild fertig geladen hat, können wir weiter machen
  image.onload = function(){
    //Das Canvas soll die gleiche Größe haben, 
    //wie das Bild
    document.getElementById(canvasId).width = image.width;
    document.getElementById(canvasId).height = image.height;

    //Bild in das Canvas zeichnen
    context.drawImage(image,0,0);

	//Bild geladen
	ready = true;
  }

  //Neue Funktion zum Farben-Umdrehen
  this.invert = function ()
  {
    //wenn das Bild noch nicht geladen hat, können
    //wir dies noch nicht bearbeiten.
    if(!ready)
    {
      //Deswegen warten wir einfach 100ms und versuchen es dann erneut.
      setTimeout(this.invert,100);
    }
    else
    {
      //Aus dem Context das Bild laden.
      var image_data = context.getImageData(0, 0, image.width, image.height);

      //Aus den Bilddaten ein Array von Pixeln holen
      var pixel = image_data.data;

      for (var i = 0, n = pixel.length; i < n; i += 4)
      {
        //Zum negieren vom max. Farbwert den aktuellen Farbwert
        //abziehen
        pixel[i]   = 255 - pixel[i]; //Rot
        pixel[i+1] = 255 - pixel[i+1]; //Grün
        pixel[i+2] = 255 - pixel[i+2]; //Blau

        //Der vierte Eintrag, ist der Wert für die Transparenz
      }

      //Das Bild neu zeichnen.
      context.putImageData(image_data, 0, 0);
	}
  }

}

Mit der Funktion getImageData bekommt man ein Array mit den Farbwerten des Bildes. Dabei stehen 4 Werte für je ein Pixel. Die Reihenfolge ist dort folgendermaßen:

Rot-Wert
Grün-Wert
Blau-Wert
Alpha-Wert

Diese Werte können wir nach Belieben ändern und somit das Bild bearbeiten. In unserem Beispiel werden alle Pixel durchlaufen und negiert. Das geht, wenn man den maximalen Wert(255) minus den aktuellen Farbwert nimmt.

Ich habe mit der Variable ready eine Überprüfung eingebaut, ob das Bild geladen wurde. Ist das nicht der Fall, wird noch 100ms gewartet. Ohne ein geladenes Bild wird es nämlich einen Fehler geben.

Jetzt muss die Funktion nur noch in der index.html aufgerufen werden und unser Bild wird negiert:

 html>

  
    </span>HTML <span style="color:#cdb7b5">5</span> Bildbearbeitung<span style="color:#f0e68c">
     src="imageeditor.js" type="text/javascript">
  
  
     id="canvas">

     type="text/javascript">
      var editor = new ImageEditor('avatar.jpg','canvas');
      editor.invert();

Beispiel online ansehen

Aufgabe für dich

Den ImageEditor kannst du nun durch eigene Funktionen erweitern. Eine leichte Übungsaufgabe ist es, das Bild in ein Schwarz-Weiß Bild umzuwandeln. Ich habe dies schon gemacht, wenn du nicht weiterkommst schick ich dir mein Ergebnis

Ansonsten kannst du aber auch einfach mal ein Bildbearbeitungsprogramm deiner Wahl öffnen und versuchen andere Filter und Funktionen einzubauen. Beispiele:

Comic-Filter
Farbfilter
Bilderrahmen erstellen

Windows 8 installieren – Bildergalerie

Stefan Wienströer — Sun, 11 Mar 2012 11:56:29 +0000

Ich habe mich heute mal an die Windows 8 Consumer Review gewagt und möchte euch heute eine kleine Bildergalerie dessen Installation bieten. Windows 8 verfügt über einen eigenen App-Store, weshalb man sich als Entwickler mal damit beschäftigen kann – Wer früh einsteigt, kann einen Vorsprung auf spätere Apps aufbauen

Sprache auswählen

Bei der Sprache wähle ich überall Deutsch aus.

Installation starten

Setup wird gestartet

Product Key eingeben

Hier habe ich mich erst gefragt, woher ich einen Product-Key bekommen soll, ist doch nur eine Preview. Den gibt es aber hier.

Windows 8 Lizenzbedingungen

Durchlesen und zustimmen (oder Installation abbrechen und auf Ubuntu umsteigen).

Windows 8 Upgrade

Wer bereits Windows 7 installiert hat, kann diese einfach upgraden. Da ich einen neuen (virtuellen) Rechner aufgesetzt habe, muss ich die zweite Option nehmen.

Festplatte wählen

Man sollte fürs Windows immer seine schnellste Festplatte nehmen, da dies schließlich immer gestartet wird. Wer eine SSD-Festplatte zur Verfügung hat sollte sie auf jeden Fall nutzen.

Windows wird installiert...

Neustart

Registrierungseinstellungen werden aktualisiert

Anpassen

Einstellungen

Ich habe mich für die Expresseinstellungen entschieden.

Anmelden

Um später alle Dienste nutzen zu können, muss man sich mit seiner E-Mail Adresse anmelden. So ähnlich ist es ja zum Beispiel auch bei Android.

Angabe der Benutzerdaten

Nach der E-Mail kommen dann die klassischen Login-Daten. Mein Rechner war noch nicht online, weshalb ich da so eine schöne Notiz bekommen habe.

Einstellungen festlegen

Willkommen

Start - Installation vollendet!

Damit ist die Installation auch schon beendet. Nicht weiter schwer, oder? Ich werde mich jetzt mal die Tage das Ganze etwas näher ansehen, um euch dann vielleicht noch ein paar weitere Dinge zu zeigen./a