tkdmatze

Natürlich gibt es auch anderen Änderungen, wie die Aktualisierung der CellTable oder der Integrierte GWTDesigner,
eine Übersicht dazu gibt es hier. Doch die neuen HTML5 Features, mit denen ja einige Firmen wie zB Facebook schon Arbeiten,
sollen heute das Thema sein.

Vorwarnung

GWT ist ein Framework, welches die unterschiedlichen Javascript- Implementierungen der  Browser weitgehend vom Entwickler fernhält.
Doch beim Thema HTML5 und vor allem Canvas gibt es nicht nur unterschiedliche Implementierungen, es kann auch gar nicht vorhanden sein.
Um welchen speziellen Browser es sich handelt, muss man wohl kaum erwähnen, in der neunten Version sollen aber die Features dabei sein.
Wenn es doch schon so weit wäre.

Auch Google hilft einem Webentwickler, welcher die Existenz des bösen Browsers vergessen hat mit ungewohnten Konstruktoren.

canvas = Canvas.createIfSupported();
audio = Audio.createIfSupported();

Entwicklung

In Java ist die Entwicklung kaum anders als mit Javascript.

public void draw(Canvas toDraw) {
		Context2d context = toDraw.getContext2d();
		context.clearRect(x, y, 72, 72);
		String toPrint = image[type][index % image[type].length];
		Image map = new Image(IMAGEPATH + toPrint);
		context.drawImage(ImageElement.as(map.getElement()), x, y);
		index++;
	}
 
	audio.getAudioElement().setSrc("audio/elf/attack.ogg");
		audio.getAudioElement().setAutoplay(true);

Sinn und Zweck

Interessanterweise halte ich Apple’ s iPhone für einen Meilenstein der Webentwicklung mit HTML5. Die Entscheidung kein Flash zuzulassen, nebenbei auch kein Siverlight,
hat viele Entwickler vor ein Problem gestellt: Wie kriege ich meine Multimedia-Inhalte aufs iPhone? Neben Videos und Sound geht es auch um dynamische Grafiken.
Und Apple hat als Lösung des Problems HTML5 propagiert.  Seit dem letzten Update des App Stores, dass es verbietet, das finanzielle Transaktionen in Apps am Marketplace vorbeilaufen,
suchen Firmen wie Amazon nach einer Alternative um auf dem iPhone weiterhin vertreten zu sein.

Neben den 3 Tags Audio, Video und Canvas gibt es noch andere Features, wie LocalStorage, Offlinemodus und Websockets, welche ich bald auch im GWT erhoffe.

Auch die Branche der Browser- und Socialgames wird wohl kaum an HTML5 vorbeikommen. Zwar scheint dort Flash der Platzhirsch zu sein, das wird sich aber wohl in den nächsten Jahren ändern. Vielleicht schon mit der Version 9 des böses Browsers.
Dass es durchaus möglich ist, mit HTML5 schicke Sachen zu erstellen, soll eine meine kleine Demo zeigen:

http://myasciigenerator.appspot.com/

Ich hab das “Preload” Problem von Canvas nocht nicht ganz behoben, aber es ist auch nur eine Demo.

Grafiken und Sounds stammen aus dem Open-Source Game “Battle for Wesnoth“.

HTML5 kann und wird ein Flashkiller sein und GWT das Framework für Browsergames der Zukunft.

Oder seid ihr anderer Meinung?

Motivation

Ich habe bisher vor allem das JQuery- Javascript Framework benutzt und bin mit Grails zum ersten Mal mit YUI (2)in Berührung gekommen.
Und ich denke es ist eine mehr als unglückliche Wahl.

Syntax#1

Fangen wir mit Groovy an. Nehmen wir mal und das wirklich nur angenommen, der Browser könnte Groovy wie Javascript ausführen.
Wir würde man dann alle “divs” mit der Klasse “selected” eines Dokuments suchen?

def divs = document.findAllByTypeAndClass("div","selected")

Wäre da so meine erste Idee. Ähnlich den Dynamic Finders. Aber das wäre mir nicht “Groovy” genug.
Laut IBM sähe die Lösung etwa so aus:

def divs = document.div.[@class="selected"]

Quasi wie E4X. Bleiben wir einfach mal bei dieser Lösung. Sie ist Groovy genug.

Gehen wir weiter zu YUI

var elements = YAHOO.util.Dom.getElementsByClassName('test', 'div');
oder
var elements = YAHOO.util.Selector.query('div.test');

Und dann zu JQuery

var elements = $("div.selected");

Welches Framework ist nun Grooviger?

Syntax#2

Okay vielleicht ist das Beispiel noch zu einfach. Gehen wir mal weiter und markieren die eben gewählten divs mit einem rotem Hintergrund.

Zunächst wieder Groovy

document.div.[@class="selected"].each(){ it.backgroundcolor="red"}

Schöne und Groovy Lösung! Gehen wir nun über zu YUI

Dom.batch(YAHOO.util.Selector.query('div.test'), function (element) {Dom.setAttribute(element, "background-color","red");});

und dann zu JQuery

$("div.selected").each(function(){$(this).attr("background-color","red");});
//oder sogar
$("div.selected").attr("background-color","red");

Spätestens hier sollte klar werden auf was ich hinaus will. Die JQuery- Syntax passt einfach viel besser zu Groovy und Grails.

Im letzten Beitrag bin ich ja auf die “Einstiegsdroge Userscripts” eingegangen, wer sich das ganze angeschaut hat, stellt fest, das es eine sehr nützliche Sache ist. Warum dann noch das ganze Drumherum mit den Extensions?

Die Vorteile der Userscripts liegen auf der Hand:

• Schnell zu erstellen
• Code schnell sichtbar
• Für viele gängige Browser verfügbar

Die Vorteile der Extensions werden erst beim Anpacken grösserer Projekte deutlich

• Funktionsvielfalt (u.a File-I/O, XML)
• Einstellungen (Prefmanager) die gespeichert werden
• Lokalisierung recht einfach zu bewerkstelligen
• Benutzerdialoge mit XUL
• Mehr übersicht durch Trennung von Code und Oberfläche
• Automatische Updatemöglichkeit
• Anpassbares Design (Skins)

Das man sich dafür mit RDF, XUL und Co. anfreunden muss, ist durch die Vorteile das geringste Problem.

Natürlich kann man viele Vorteile auch mit Workarounds in Userscripts umgehen(Lokalisierung mit Spracharray, Bilder per Base64-Codierung), wer das aber mal gemacht hat, weiss wie schnell sich dann der Code zu einem unübersichtlichen Worthaufen entwickelt.

Noch nie Gehört? Dann wird es Zeit!

Was sind Userscripts?

Userscripts sind Javascripts, die in die Seite clientseitig eingefügt werden, bekannt unter anderem durch den  Youtube Videodownloader oder Google Live Search. Userscripts sind die Möglichkeit der Seitennachbearbeitung. Man kann beliebige Inhalte hinzufügen, ändern oder entfernen, genauso wie Funktionalitäten. Ein kleines Tutorial durchlesen und schon hat man die Mittel, Seiten so zu gestalten, wie man selbst es will.

Auf Userscripts.org findet man mittlerweile fast 7000 dieser Userscripts. Es lohnt sich wirklich, mal das ein oder andere zu studieren, um zu sehen was möglich ist.

Während Opera Userscripts nativ unterstützt, gibt es für fast jeden modernen Browser ein Add-on, das Userscripts ermöglicht. Für den Internet Explorer IE7Pro und für Mozilla Firefox Greasemonkey.

Versucht es einfach, es ist kinderleicht und die Einstiegsdroge zu Extension- Entwicklung, auf die ich in meinem Blog immer mal wieder eingehen werde.

Was war das nicht für ein Hype um Web 2.0 ?

Jede Seite Web 2.0 - jedes Forum Web 2.0 – alles Web 2.0
Und meine Lieblingsposts “Was ist eigentlich Web 2.0″?

Web 2.0 das Internet zum mitmachen – und keiner macht mit !

Um nur ein Beispiel zu nennen:
Mit viel trara (fast alle meine Newsfeeds meldeten es) startete GamePN – ein Netzwerk für Gamer – aber die Reaktionen darauf…
Lest es euch selber durch, die Kommentare auf heise.de sagen alles!

Und nun komm ich mit MyWeb 2.0 ?

Genau! Doch was ist eigentlich MyWeb 2.0 ?

MyWeb 2.0 ist das Internet wie ich es haben will!

MyWeb 2.0 

• ist werbefrei
• ist übersichtlich
• bietet mir genau die Funktionen die ich will

Klingt toll? – Ist toll!
Doch wie erreicht man so etwas ?

Die Antwort ist ganz einfach : Mozilla Firefox, Javascript und zuviel Zeit!

Werbefreiheit

Für die Werbefreiheit sorgen die Erweiterungen Adblock und LayerBlock.

übersichtlichkeit

Mit der Erweiterung Aardvark Löschen wir unnötige Seitenelemente,
ordnen Menus neu und passen so die Seite an unsere Bedürfnisse an.

Funktionalität

Ah, wir kommen zum schweren Teil, denn wem die Funktionen der bestehenden Erweiterungen nicht ausreichen muss sich … selber welche schreiben. Doch keine Angst, ich werde in diesem Blog ab und zu Tipps und Tricks zu Firefox- Extensions schreiben. Schwer ist es nicht … aber die Resultate sind eindeutig:

MyWeb 2.0 – das Internet wie ich es haben will!