Share on Facebook

Jeder, der schon einmal genervt von der teils sehr umständliche Syntax von JavaScript war, sollte sich diesen interessanten Helfer einmal näher anschauen.

CoffeeScript besticht mit seiner klaren und intuitiven Syntax, welche an die Sprachen Python und Ruby angelehnt ist. Der geschriebene CoffeScript code kann eins zu eins in gut lesbaren JavaScript code kompiliert werden und ist unter anderem direkt im Open Source Web Application Framework Ruby-on-Rails integrierbar.

Ein kurzer Beispielauszug von der CoffeeScript Website:

number = 42 if opposite

if (opposite) number = -42;

func = (x,y) ->
  x*x
  x+y

var func;
func = function(x, y) {
  x * x;
  return x + y;
};

alert "I knew it!" if elvis?

if (typeof elvis !== "undefined" && elvis !== null) {
  alert("I knew it!");
}

switch day
  when "Mon" then go work
  when "Tue" then go relax
  when "Thu" then go iceFishing
  when "Fri", "Sat"
    if day is bingoDay
      go bingo
      go dancing
  when "Sun" then go church
  else go work

switch (day) {
  case "Mon":
    go(work);
    break;
  case "Tue":
    go(relax);
    break;
  case "Thu":
    go(iceFishing);
    break;
  case "Fri":
  case "Sat":
    if (day === bingoDay) {
      go(bingo);
      go(dancing);
    }
    break;
  case "Sun":
    go(church);
    break;
  default:
    go(work);
}

Die verwendete Entwicklungsumgebung ist ein Ubuntu 11.04, CoffeeScript Version 1.1.2, Vim und das vim-coffee-script plugin. Auf dem  Ubuntu wurden die zusätzlichen Quellen ppa:gias-kay-lee/coffeescript für den CoffeeScript Compiler und ppa:developmentseed/mapbox für nodejs (>= 0.4.12) benötigt. Danach ist der CoffeeScript Quellcode von der Kommandozeile kompilierbar entweder einmalig mittels coffee -cb file.coffee, oder bei jedem Veränderung des Dokuments mittels coffee -cbw file.coffee.

Zur Unterstützung der Entwicklung mit dem Editor Vim steht ein vim-coffee-script Plugin zur Verfügung.

Dieses erweitert Vim nicht nur um Syntax-Highlighting von CoffeeScrip Codet, sondern auch um die Funktion des Vim-internen Kompilieren von ausgewähltem Code in einem neuen Split-Fenster mittels :CoffeeCompile vertical. Auch das Kompilieren in Vim kann bei jeder Veränderung des Quellcodes automatisiert werden mittels :CoffeeCompile watch vertical.

Share on Facebook

Wer auf der Suche nach einer simplen, schnellen aber durchaus schicken Lösung für eine TagCloud ist sollte mal einen Blick auf die TagCanvas – HTML5 Canvas Tag Cloud  werfen.

Das als Standalone Version, sowie als jQuery Plugin verfügbare Javascript Projekt erstellt eine Animierte Tag Cloud basierend auf dem HTML-Element canvas. Auf der TagCanvas Projektseite gibt es ausserdem eine zusätzliche Javascript Lösung die das Darstellen der Tag Cloud in IE-Versionen ermöglicht die kein canvas Tag unterstützen ( Internet Explorer Versionen kleiner 9 ).

Für die Animation der Tag Cloud gibt es zahlreiche Optionen, so das konfiguriert werden kann wie schnell die Tags rotieren sollen oder welcher Form, Farbe oder Größe die Tag Cloud dargestellt werden soll.

Wer über die entsprechende Hardware verfügt kann sich das Verhalten der Cloud mit dem Accelerometer / Motion Sensor anschauen

Für WordPress-Benutzer gibt es das ganze auch schon fertig als WordPress Plugin

Share on Facebook

Über HTML5 wird zurzeit viel geredet, doch mit den vielen Neuerungen die HTML5 bringt
ergeben sich auch neue Möglichkeiten die für bösartige Zwecke genutzt werden können.
Hinzu kommt das nicht alle Browser die neuen HTML5 Tags gleich interpretieren,
was z.B. beim XSS (Cross-site Scripting) dazu führt das diese Art des Angriffs in manchen Browser möglich ist, und in anderen eben nicht.

Cross-site Scripting

HTML5 bringt eine ganze Reihe an neuen HTML Tags, allerdings auch neue Attribute für bereits bekannte Tags. Diese sorgen für viele neue Möglichkeiten Javascript Code einzuschleusen und zur Ausführung zu bringen. Beispielsweise ist es nun auch erlaubt in schließende Tags Attribute einzufügen. : </a onmouseover=”alert(‘XSS’)”>
Eine Liste von möglichen Angriffen enthält das HTML5 Security Cheat Sheet
Generell empfiehlt es sich, sofern möglich, mit einer Whitelist-Lösung für zulässige Eingaben zu Arbeiten um das Risiko neuer XSS Schwachstellen durch neue Attribute oder Tags zu verkleinern

Local Storage

Eine weitere Neuheit die HTML5 bringt ist die als Local Storage oder Web Storage bezeichnete Funktionalität, mit der es möglich ist 5-10MB Anwendungsdaten clientseitig  pro Domain zu Speichern. Auch wenn diese Funktionalität sehr viele und mit Sicherheit auch sehr nützliche Möglichkeiten für neuartige Webanwendungen bietet darf, natürlich auch hier nicht die Sicherheit vernachlässigt werden.
Beim Local Storage sollte man sich darüber im Klaren sein das wenn sich verschiedene Benutzer eine Host-Namen teilen, diese auch auf alle Daten zugreifen können, da sie einen gemeinsamen Speicher verwenden. Es gibt keine Möglichkeit die Zugriffe auf bestimmt Pfadnamen o.ä. zu beschränken.
Ein weiteres Problem ist die Erkennung von Angriffen, auf lokale Daten können diese nicht wie es z.B. auf dem Server möglich wäre erkannt und verhindert werden.

SQL Injection

Dachte man bei dem Thema SQL Injection bisher an Serverseitige Schwachstellen sollte man mit HTML5 darauf achten das eine SQL Datenbank als lokaler Speicher für Anwendungsdaten auf dem Client zum Einsatz kommen kann. Bei den SQL Anfragen sollte wie allseits bekannt darauf verzichtet werden die Anfrage aus ungeprüfter Verkettung von Strings zu erstellen. Auch hier sollte auf Prepared Statements zurückgegriffen werden dessen Nutzung durch die HTML Database API erleichtert wird. Wie bei allen von außen kommenden Daten ist darauf zu achten das Serverseitig immer eine Prüfung der vom Client kommenden Daten stattfinden. Auch wenn diese Daten vor der Speicherung auf dem Client schon geprüft wurden, kann nicht davon ausgegangen werden das Clientseitig keine Manipulation der Daten vorgenommen wurde.

WebSocket

Durch die Möglichkeit mit HTML5 eine Netzwerkverbindung aus dem Browser heraus aufzubauen, könnte durch eingeschleusten Schadcode beispielsweise eine Hintertür geöffnet werden. Der Local Storage oder die lokalen Datenbanken könnten für das Zwischenspeichern für die ausgespähten Daten dienen und so der Benutzer langfristig ausgespäht werden.

Je mehr Funktionen der Browser bereitstellt, desto mehr Möglichkeiten gibt es interessante Webanwendungen zu realisieren. Das man bei der Realisierung darauf achten muss keine Schwachstellen einzubauen sollte jedem Entwickler sowieso schon klar sein. Wird für die Realisierung HTML5 eingesetzt gilt es nun noch die neuen Funktionen genauso abzusichern wie der herkömmliche Teil der Anwendungen schon abgesichert wurde. Geht man bei der Implementierung neuer HTML5 Webanwendungen sorgfältig vor, liefert man Angreifern keine zusätzlichen Angriffpunkte sondern kann durch die weiteren Sicherheitsfunktionen die HTML5 mitbringt seine bestehenden Anwendungen sogar noch sicherer machen.

Share on Facebook

Wegen eines aktuellen Projekts hatte ich das Vergnügen, mich mit der Google Maps API zu beschäftigen und möchte nun einige Infos dazu schreiben.

Neben der bekannten Möglichkeit, Google Maps kostenlos im Browser zu benutzen bietet Google gleich mehrere APIs an mit denen man die gesamte Funktionalität dieses Dienstes in seine eigene Webseite integrieren und anpassen kann. Besonders interessant sind dabei die JavaScript API, die Static Maps API und die Web-Dienstleistungen API.

Die Web-Dienstleistungen API bietet unter Anderem die Möglichkeit der Geokodierung. Damit kann man eine beliebige Adresse in Geo-Koordinaten, also Längen- und Breitengrade konvertieren. Ohne diese Koordinaten kann man die restlichen APIs nicht sinnvoll benutzen.

Static Maps bietet die Möglichkeit, einen einzigen Kartenausschnitt ohne Javascript anzuzeigen. Man kann Markierungen setzen (auch mit eigenen Bildern) und auch Linien und Formen darauf farbig anzeigen lassen. Die Einbindung geschieht über ein einfaches img-Tag (s. rechts)

Wer jetzt denkt, das ist zu wenig, muss zur JavaScript API greifen. Mit dieser API kann man mit wenigen Zeilen Code die Google Maps Seite mit allen Diensten nachbauen. Jedoch lässt sich die Anzeige zum Beispiel durch gesetzte Markierungen, eingezeichnete Routen, Höhenangaben, Fotos, etc. erweitern. Dadurch kann man zum Beispiel auf einfache Weise eine Umkreissuche realisieren.

Nutzungsbedingungen:

Möchte man die APIs kostenlos nutzen, muss die Webseite kostenlos und für alle verfügbar sein. Man darf insbesondere (außer in der Entwicklungsphase) den Zugriff nicht ausschließlich durch eine Firewall erlauben und ihn nicht auf ein internes Netzwerk oder eingeladene Personen begrenzen. Eine Ausnahme bilden Premier Kunden und Programme auf mobilen Geräten, die in einem Online Store gekauft und heruntergeladen werden können.

Auch wenn man die oben genannten Bedingungen erfüllt, ist die kostenlose Benutzung der APIs leider begrenzt. Mit jeder API darf man am Tag höchstens 25.000 Kartenladevorgänge erzeugen. Als Ladevorgang zählt bei Static Maps das Aufrufen des Bildes, bei JavaScript das Laden eines einzelnen Kartenteils, also eines Quadrats der Karte. Das Geocoding ist auf 2500 Anfragen pro Tag beschränkt. Google bietet eine Übersicht in seiner FAQ. [1] [2]

Möchte man die APIs über diese Bedingungen hinaus nutzen, so muss man zusätzliches Volumen kaufen. Die Preise sind in der o.g. Tabelle ebenfalls aufgeführt. Es kann automatisch über das API Terminal abgerechnet werden, hierfür braucht man einen Google Account.

Bei großer Beanspruchung kann man zur Premier API Lizenz greifen, die $10.000 im Jahr kostet. Bei zugriffsbeschränkten Netzwerken (z.B. durch notwendige Anmeldung oder in internen Netzwerken) ist man dazu sogar verpflichtet, da man nur in diesem Fall von den Bedingungen befreit wird. Pro Tag sind das etwa $30, was bei einem gewöhnlichen Account etwa 32.000 Ladevorgängen pro Tag entspricht.

Fazit

Insgesamt sind die APIs ein sehr guter und gut dokumentierter Dienst, der für kleine und Große Projekte einsetzbar ist. Sobald man jedoch über 25.000 Zugriffe hinausgeht wird die Benutzung schnell sehr teuer.

Share on Facebook

Die JAR Media geht Bowlen. An dieser Stelle berichte ich von unserem Teamtreffen am 05.11.2011.

Zunächst trafen wir uns am Möllersbaum um für die neue Webseite (http://www.jarmedia.de) Team-Bilder zu erstellen. Von jedem Team-Mitglied wurde ein Portrait-Bild, sowie ein Requisiten-Bild für den Header (siehe Homepage) aufgenommen.
Im Anschluss fuhren wir gemeinsam in den Rainbowpark Wuppertal um bei einem gemeinsamen Abendessen wichtige Dinge unseres Relaunches zu besprechen und um sich untereinander in lockerer Atmosphäre auszutauschen.

Danach stellten wir unsere sportlichen (Un-)Fähigkeiten beim Bowling unter Beweis. Alles natürlich im neuen “JAR Media”-Look, unseren roten T-Shirts.
Einzig Daniel Litz, welcher wegen einer Operation am Handgelenk ausfiel, war leider nicht mit dabei. Das ganze JAR Media-Team wünscht dir gute Besserung!

Ein Bild anbei:

Share on Facebook

Ich, Julian Richter, möchte Sie an dieser Stelle ganz herzlich im neuen Weblog der JAR Media GmbH begrüßen.

Schauen Sie sich um. Ab jetzt finden Sie hier täglich neue Informationen rund um das Thema Webtechnologien und Social Media Marketing.
Unsere Mitarbeiter berichten direkt aus dem Arbeitsalltag und geben dabei wertvolle Tipps und Erfahrungen, die Ihnen als Hilfestellung dienen können.
Tauchen Sie ein in die spannende Welt der professionellen Webtechnologie.

Share on Facebook

Mit einem kompletten Online-Relaunch beginnen wir ein vollkommen neues Kapitel unserer Unternehmensgeschichte.

Der neue Internetauftritt wurde von unseren Spezialisten in Zusammenarbeit mit unseren Designern auf modernen hochglanz gebracht. Neue Web-2.0/3.0-Technologien kommen nun genauso zum Einsatz wie unser geliebtes CMS Joomla in der aktuellen Version.

Aber nicht nur an der Oberfläche gibt es Veränderungen.
Wir haben unser Produktportfolio für Sie komplett überarbeitet und konzentrieren uns nun auf das, weswegen wir von Ihnen am meisten geschätzt werden: Webtechnologie. Angefangen bei Beratungs- und Analyseleistungen über den Entwurf und die Planung von komplexen Webprojekten, die Entwicklung und das Integrieren bis hin zum Webhosting für und mit Speziallösungen bieten wir Ihnen ein komplettes Rund-Um-Paket.
Dabei forcieren wir unsere Arbeit nicht nur auf den B2B-Endkundenbereich, sondern vor allem auch auf die Zusammenarbeit mit Agenturen (z.B. Marketing- und Design-Agenturen), die sich lieber auf das Wesentliche statt auf technische Details konzentrieren möchten. Wir stellen Ihnen mit unserem Know-How eine solide und flexible technische Basis zur Verfügung. Dank unserer weitreichenden und langjährigen Erfahrungen mit dem CMS Joomla und in der PHP-Entwicklung konnten wir Verbindungen gerade im Agentur-Bereich in der Vergangenheit erfolgreich Aufbauen und möchten uns nun in diese Richtung weiterentwickeln.