Tutorial: Social Media Buttons selbstgemacht

Veröffentlicht von Raffael am 14. Dezember 20138. Mai 2014 Veröffentlicht in HTML, JavaScript, PHP, Tutorials & Hilfestellungen, Wordpress Tagged Gravatar, jQuery, JSON, Like-Button, Like-Counter, Like-Zähler, Share-Button, Teilen-Button

Kaum eine Webseite kommt heutzutage noch ohne sie her. Worum es geht? Um Like-Buttons, Share-Buttons, Like-Counter, Benutzerbilder, usw. – aus der heutigen Netzlandschaft sind sie kaum noch wegzudenken.
Und deshalb möchte ich euch heute zeigen, wie man die Teilen- und Liken-Funktionalitäten von Facebook und Twitter sowie Benutzerbilder von Gravatar in das eigene Website-Theme einbaut.
Ich sage bewusst “Funktionalitäten”, weil ich nicht zeigen möchte, wie man die fertigen Standardkomponenten nutzt, sondern wie man die Kernfunktionalitäten anspricht, sodass man hinterher in der Gestaltung des Like-Counters zum Beispiel ganz frei agieren kann.
Wie das dann aussehen kann, wenn man in der Gestaltung der Social-Funktionalitäten ganz frei ist, könnt ihr in dem Artikelbild oben-links unter der Unterschrift dieses Artikel sehen.
Facebook Share-Button und Share-Counter einbinden

Bilder verpixeln in Javascript

Veröffentlicht von Raffael am 30. Oktober 2013 Veröffentlicht in HTML, JavaScript, Tutorials & Hilfestellungen Tagged Bilder in Javascript bearbeiten, Bilder mit JS verpixeln, Close Pixelate, JavaScript, Javascript verpixeln, JS

Heute gibt es mal wieder ein bisschen Javascript-Code. Es soll darum gehen, wie man Bilder mittels Javascript verpixeln kann. Die hat sowohl vor als auch Nachteile, welche ich nachfolgend einmal kurz aufzählen möchte.
Vorteile:

Das Verpixeln kann dynamisch geschehen (Händischer Aufwand im Grafikprogramm fällt weg. Grafiken müssen vorher nicht bekannt sein.)
Die benötigte Rechenleistung wird auf den Client ausgelagert. Im Gegenteil zu einer serverseitigen Lösung (z.B. mittels PHP/Imagick), wird die Rechenlast verteilt, sodass bei hohen Besucherzahlen der Webserver nicht mit Grafikberechnungen ausgelastet wird

Nachteile:

Die Verpixelung sollte eher als grafischer Effekt bzw. zur Gestaltung genutzt werden, da die Daten ja erst einmal unverpixelt zum Client geschickt werden. Soll also wirklich der Bildinhalt unkenntlich gemacht werden, muss die Verpixelung weiterhin vor der Auslieferung an den Client geschehen

Wie funktioniert das Verpixeln?
Um Bilder in Javascript zu verpixeln machen wir uns eine Bibliothek […]

Javascript escape() in C# – ein C# äquivalent zur escape()-Funktion

Veröffentlicht von Raffael am 18. August 201227. August 2013 Veröffentlicht in C#.Net, JavaScript, Tutorials & Hilfestellungen Tagged C#, c# equivalent javascript escape, c# escape quotes javascript, C#.Net, JavaScript, javascript escape c# unescape, JS, Jscript

csharp_vs_javascript Das .Net-Framework bietet eine große Anzahl an Möglichkeiten, um HTML-Code und Urls zu encodieren. Da wären zum Beispiel Uri.EscapeDataString(), Uri.EscapeUriString(), System.Web.HttpUtility.UrlEncode(), System.Web.HttpUtility.UrlPathEncode(), System.Web.HttpUtility.HtmlEncode() oder System.Web.HttpUtility.HtmlAttributeEncode().
Wenn man jedoch eine gleichwertige Funktion zu Javascript‘s escape() sucht, so wird man von all diesen Funktionen enttäuscht. Keine dieser standardmäßig vom .Net-Framework mitgelieferten Funktionen ist äquivalent zur Javascript escape()-Funktion.
Zur Verdeutlichung habe ich mal folgendes Beispiel gemacht:

// Original Ausgangsstring
// Raffi’s ärgerlicher C# Teststring/Testcode.

// JS Original (erzeugt durch escape() )
// Raffi%27s%20%E4rgerlicher%20C%23%20Teststring/Testcode.

// Uri.EscapeDataString():
// Raffi’s%20%C3%A4rgerlicher%20C%23%20Teststring%2FTestcode.

// Uri.EscapeUriString():
// Raffi’s%20%C3%A4rgerlicher%20C#%20Teststring/Testcode.

// System.Web.HttpUtility.UrlEncode():
// Raffi%27s+%c3%a4rgerlicher+C%23+Teststring%2fTestcode.

// System.Web.HttpUtility.UrlPathEncode():
// Raffi’s%20%c3%a4rgerlicher%20C#%20Teststring/Testcode.

// System.Web.HttpUtility.HtmlEncode():
// Raffi's ärgerlicher C# Teststring/Testcode.

// System.Web.HttpUtility.HtmlAttributeEncode():
// Raffi's ärgerlicher C# Teststring/Testcode.

Doch ich würde nicht darüber bloggen, wenn ich nicht auch eine Lösung parat hätte. Und diese ist gar nicht mal so kompliziert.
Schritt 1:
Fügt eurem Projekt einen Verweis auf Microsoft.JScript hinzu.
microsoft jscript verweis hinzufügen

globalCompositeOperation Copy Fix – transparente Flächen in Javasript Canvas zeichnen

Veröffentlicht von Raffael am 7. Januar 201228. April 2013 Veröffentlicht in JavaScript Tagged Canvas, copy, ctx.fill(), destination-out, globalCompositeOperation, JavaScript, Opacity, transparente Flächen, Transparenz

Heute gibt es mal einen sehr speziellen Beitrag. Ich denke, die Leute die betroffen sind, werden verstehen worum es geht. Allen anderen sei gesagt, dass der nächste Artikel wieder ein für ein breiteres Publikum sein wird.
Ich hatte hier im Blog vor einiger Zeit ja eine kleine Progressbar vorgestellt, die ausschließlich in JavaScript umgesetzt ist. Besonderes Augenmerk hatte ich unter anderem auf die schönen runden Ecken gelegt. (Siehe: nachfolgender Screenshot)
Javascript only Progressbar
Ursprünglich hatte ich die transparenten Ecken mittels eigener Pfade realisiert, die ich mit

ctx.globalCompositeOperation = "copy";
ctx.fillStyle = "rgba(0,0,0,0.0)";
ctx.fill();

gefüllt habe.
Leider musste ich beim erneuten betrachten der Progressbar gestern sehen, dass das Script so nicht mehr funktioniert. Die Javascriptkonsolen in diversen Browsern (IE, FF, Chrome) gaben mir merkwürdiger Weise aber keinen Fehler aus.
Nach einigem googlen fand ich heraus, dass die globalCompositeOperation “copy” nicht mehr […]

JavaScript Progressbar mit HTML5 Canvas

Veröffentlicht von Raffael am 30. Juni 20114. Januar 2013 Veröffentlicht in JavaScript Tagged Canvas, HTML5, JavaScript, JS, Progressbar

Da ich für ein zukünftiges Webprojekt eine Progressbar brauchte, wenn möglich auf JavaScript basierend, und ich keine Komponente finden konnte, die meinen Vorstellungen entspricht, habe ich mich entschieden, meine eigene Progressbar zu schreiben.
Umgesetzt wurde das Projekt in Javascript unter Zuhilfenahme des HTML5 Canvas Elements. Dadurch kommt die Progressbar vollständig ohne irgendwelche Bilddateien aus, wie es zumeist bei anderen JS/CSS Lösungen der Fall ist. Die Progressbar kann momentan einen Status von 1 bis 100 Prozent anzeigen. Fehleingaben werden abgefangen und es wird, auch optisch, eine Errormeldung angezeigt.
Da ich meine Entwicklungen gerne teile und sicherlich nicht der Oberprofi in JavaScript bin, stelle ich euch die Progressbar natürlich zur Verfügung. Für Kritik, Lob und Verbesserungsvorschläge bin ich wie immer jederzeit offen.
Eine Demo der Progressbar könnt ihr euch […]