Sep 20 2012

2. JavaScript-Conference in Düsseldorf

Tag: JavascriptTobi @ 11:01 am

Am 15. + 16. Oktober 2012 findet in Düsseldorf die zweite JavaScript-Conference statt. Weil die Themen JavaScript, Css3 und HTML5 auch in der Entwicklung mobiler Anwendungen an Bedeutung gewinnen, hat der Veranstalter zwei Konferenzen zusammengelegt. Die „Mobile Times“ am Montag hat als Thema die plattform-unabhängige Entwicklung mobiler Anwendungen; dabei wiederum sind die Frameworks ein Schwerpunkt am 15.10. Es gibt Vorträge und Workshops zum Thema Sencha Touch 2 mit Tommy Maintz von Sencha, jquery-mobile, Titanium Mobile und Enyo. Weiterhin gibt es Vorträge zu HTML5, Firefox OS, GWT, PhoneGap und Backbone JS und Cloud9.

Am Dienstag, den 16.10., ist JavaScript & Co. generell Thema: Testing & Debugging + Popcorn.js + Ext.js + eine ExtJS-Sprechstunde mit Nige White von Sencha, Windows 8 mit Daniel Meixner von Microsoft, Golo Roden hält einen Workshop zu Node.js.

Bis zum 21.09.2012 läuft noch die Konferenz-begleitende JavaScript-Umfrage. Die Umfrage dauert max. 10 Minuten. Es gibt ein Buch zu gewinnen und einen 10%-Nachlass auf die Ticketpreise.


Jun 29 2010

LESS.js – CSS mit Variablen und Funktionen

Tag: jQueryPatrick @ 6:15 pm

LESS ist eine Erweiterung der bestehenden CSS-Definitionen und beinhaltete alle existierenden Formatierungen. Im Unterschied zu CSS beherrscht LESS jedoch den Umgang mit Variablen, erweiterten Klassen, Funktionen und eingebetteten Regeln. Und das ist echt cool.

Hier gleich ein paar Anwendungsbeispiele:

//Variablen
@main_color: #2266bb;

h1 {
 color: @main_color;
}

// erweiterte Klassen
.rounded_corners (@radius: 5px) {
 -moz-border-radius: @radius;
 -webkit-border-radius: @radius;
 border-radius: @radius;
}

#header {
 .rounded_corners;
}

.main_table {
 .rounded_corners(10px);
}

// eingebettete Regeln
#header {
 color: red;
 a {
 font-weight: bold;
 text-decoration: none;
 }
}

// Funktionen
@border-width: 1px;
@base-color: #333333;

#header {
 color: @base-color * 3;
 border-left: @border-width;
 border-right: @border-width * 2;
}

.main_table {
 color: (@base-color + #111) * 1.5;
}

Um LESS zu nutzen bedarf es einer Anwendung, die den LESS-Code in normales CSS umwandelt. Dies kann man beispielsweise über die PHP-Klasse lessphp tun, die ich persönlich auch einsetze. Dies sieht dann in etwa so aus:

require 'lessc.inc.php';

try {
lessc::ccompile('input.less', 'out.css');
} catch (exception $ex) {
exit('lessc fatal error:<br />'.$ex->getMessage());
}

Doch Alexis, der Entwickler von LESS, hat noch etwas viel genialeres vor. Derzeit arbeitet er an einer Javascript-Implementierung von LESS, die LESS-Code zur Laufzeit im Browser im normales CSS konvertiert – und dies in beeindruckender Geschwindigkeit. Damit entfällt das vorherige Parsen weg. Der Browser generiert selbst den CSS-Code. Dabei nutzt Alexis alle Möglichkeiten moderner Browser wie HTML5 und Local Storage voll aus.

Noch befindet sich LESS.js in Arbeit und wurde noch nicht freigegeben. Einen Eindruck der Arbeit kann man sich aber bereits jetzt beim Testen der Entwicklerversion holen.

Zum Einbinden von LESS.js ist folgender HTML-Code nötig (main.less stellt die LESS-Datei da):

<link rel="stylesheet/less" href="/stylesheets/main.less" type="text/css" />
<script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>

Nov 20 2009

XMLHttpRequest bald Webstandard?

Tag: Ajax AllgemeinTobi @ 8:52 pm

Jeder der mit der Entwicklung von Ajax-Anwendungen zu tun hat, kennt sicher auch das XMLHttpRequest-Objekt. Es dient zum Transfer von beliebigen Daten über das HTTP-Protokoll. Mittels XMLHttpRequest kann ein Skript einer Webseite Daten dynamisch vom Webserver abrufen, ohne die Seite neu laden zu müssen. Das ist die Grundlage aller modernen ajaxbasierten Webapplikationen.

Das W3C Konsortium hat nun einen einheitliche Definition für das XMLHttpRequest-Objekt zur Standardisierung vorgeschlagen. Des Weiteren wird eine Spezifikation in Betracht gezogen, die die Domain-übergreifende Abfragen erlauben soll.

Lassen wir uns überraschen ob und wann die Standardisierung kommt und wie sie aussehen wird. Ich befürworte diesen Schritt jedoch grundsätzlich.


Sep 15 2009

Den richtigen Internetanbieter finden

Tag: AllgemeinesTobi @ 11:52 pm

Was wären Technologien wie Ajax, wenn man keinen Zugang zum Internet hat, um die Webseiten, die diese Techniken einsetzen, überhaupt aufrufen zu können?

Doch es ist gar nicht so leicht, im heutigen Tarif-Dschungel den für sich passenden Anbieter mit dem richtigen Tarif zu finden. Nicht immer ist ein anfangs günstiger monatlicher Preis auch der beste Preis über die gesamte Laufzeit. Auf internetanbieter-tarife.de findet man aber eine nette Übersicht, bei der nicht nur der monatliche Preis für jeden Internetanbieter angezeigt wird, sondern über eine Laufzeit von 24 Monaten der durchschnittliche effektive Preis berechnet wird. Dabei sind aktuelle Sonderkonditionen und einmalige Einrichtungspreise berücksichtigt, z. B. die 7 Monate kostenlos von Vodafone.

Interessant für die meisten dürfte die Übersicht auf der Startseite sein, da man dort in Sekundenschnelle auswählen kann, welche Bandbreite man haben möchte, ob eine Telefonflatrate enthalten sein soll und ob man einen eventuell bereits bestehenden Telekomanschluss weiterhin nutzen möchte (für die Sortierung wird übrigens jQuery genutzt).

Wenn man sich die Übersicht anschaut, könnte man es schon fast schade finden, nicht in Baden Württemberg zu wohnen. Der Internetanbieter Kabel BW bietet nämlich Bandbreiten bis 100 MBit/s an. Der Upload könnte mit 2.500 kBit/s schneller ausfallen, ist aber letztlich doch mehr als der Downstream vieler DSL Kunden, wenn sie zu weit vom Verteiler entfernt wohnen.

Insgesamt eine empfehlenswerte und übersichtliche Seite, wenn man sich über aktuelle DSL-Tarife oder Sonderangebote der Internetanbieter informieren will. Aktuell scheint der Trend in Richtung VDSL zu gehen, wobei die Kabelanschlüsse immer leistungsfähiger werden und eine ernsthafte Konkurrenz zu den herkömmlichen DSL-Anbietern darstellen (zumindest in den Gebieten, in denen der Kabelanschluss auch geschaltet werden darf bzw. kann).


Aug 18 2009

Neues aus der Mozilla-Welt

Tag: TrendsPatrick @ 8:37 am

Nachdem Mozilla vor Monaten Version 3.5 ihres Firefox-Browsers veröffentlichten, gibt es bereits heute erste Ideen und Vorschläge für die Releases 3.6, 3.7 und gar 4.0.

Firefox 3.5 bietet gegenüber den Vorgängern einen „private surf“-Modus, eine überarbeitete Chronik und eine verbesserte Tab-Bedienung. Die neue TraceMonkey-Javascriptengine beschleunigt die Ausführung von JS-Code imens. Weitere Infos sind in einem älteren AS-Beitrag bereits aufgelistet.

Im Frühjahr 2010 soll dann die Version 3.6 des Mozilla-Browsers erscheinen. Die Entwickler haben sich vorgenommen, die Programmoberfläche samt Menüleiste nochmals schlanker und übersichtlicher zu gestalten. Es soll sogar möglich sein, die Menüleiste automatisch ganz abzuschalten. Allgemein soll FF schneller starten und auf Benutzereingaben flotter reagieren.

Im Inneres des Browsers werkelt dann die Gecko-Engine in Version 1.9.2, die es ermöglicht Töne bei festgelegten Ereignissen auszugeben. Zudem kann die GeolocationAPI nun neben Breiten- und Längenangaben auch mit für Menschen lesbare Ortangaben zurückgehen.

TraceMonkey wurde nochmals optimiert und arbeitet nun noch ein Stückchen schneller. Einige weitere CSS3-Eigenenschaften werden unterstützt. So können nun mehrere Hintergrundbilder für eine Element definiert werden, als Hintergrund dürfen nun auch Farbverläufe angegeben werden und die Hintergrundgröße seperat festgelegt werden.

Die erste Alpha-Vorversion von 3.6 steht zu Testzwecken zum Download zur Verfügung.

Inzwischen existiert bereits eine erste Entwicklerversion von Firefox 3.7. Über technische Neuerungen schweigt Mozilla sich noch aus. Bekannt wurde jedoch, dass man verstärkt Glass-Effete ala Windows Vista/7 verstärkt einsetzen will.

Aber auch am nächsten Hauptrelease FF4 wird schon getüftelt. Dabei setzt man wie in bei FF3.7 auf Glass-Efekte. Unter den Entwicklern diskutiert man derzeit, ob man, wie bei Googles Chrome, die Tableiste anstelle der Titelleiste in den Fensterkopf verschiebt um so vertikalen Platz zu schaffen. Zudem denkt man darüber nach, die Lesezeichen-Leiste ganz zu entfernen und diese durch ein Widget zu ersetzen.

Hier ein paar visuelle Eindrücke der zukünftigen Versionen, an denen derzeit gearbeitet wird.

Firefox 3.7 Firefox 4.0


Aug 17 2009

Bewegte Canvas-Bilder mit CakeJS

Tag: Canvas,SpielePatrick @ 2:18 pm

Bewegte Bilder, sprich Animationen, sind seit jeher ein Hingucker auf jeder Homepage. In der Vergangenheit griffen Webentwickler bei einfachen Animationen auf bewegte GIF-Dateien zurück, die Einzelbilder beinhalten und zeitversetzt wiedergeben. Für aufwendigere Szenen musste auf das Adobes (ehemals Macromedia) Flash-Format auswischen werden.

Flash bietet sehr vielseitige Möglichkeiten und gilt seit jeher de facto als Standard für Webanimationen. Die Wiedergabe geschieht über den kostenfreien Flash-Player, der mittels Plugin in den Browser eingebunden wird. Jedoch handelt es sich bei Flash um eine proprietäre Software. Sie muss also durch teure Lizenzgebühren erworben werden um eigene Anwendungen in Flash zu erstellen.

Genau hier fehlte es bisher an geeigneten Alternativen.

Bereits vor über einem Jahr veröffentlichte Ilmari Heikkinen – wohl weitestgehend unbemerkt – seine Javascript-Bibliothek CakeJS (Canvas Animation Kit Experiment). CakeJS orientiert sich im Groben am „großen Bruder“ Flash.

Auf der Demo-Seite des Projekts finden sich zahlreiche kleine Beispielanimationen, die einen Vorgeschmack darauf geben, was mit CakeJS möglich ist. Das Highlight sind die beiden mit CakeJS erstellten Spiele Missle Fleet und Web Mega Pong. Beide Spiele lassen sich leicht per Tastatur steuern und machen ziemlich Spaß.

In der umfangreichen Dokumentation findet man eine gute Übersicht aller zur Verfügung stehenden Funktionen und Methoden samt Erklärungen.

CakeJS ist für Browser entwickelt wurden, die von Haus aus Canvas unterstützen und funktioniert mit Firefox (2+), Safari (3+) und Opera (9.6+). Grundsätzlich sollte es zwar möglich sein, dass CakeJS auch in Microsofts Internet Explorer mittels ExplorerCanvas läuft, jedoch scheint die Ausführungsgeschwindigkeit zu langsam und der Resourcenverbrauch zu hoch zu sein um die Animationen ordentlich darstellen zu können.

Vorgenommen hatte sich Heikkinen viel: Physikengine, Kollisionsabfrage und das Senken der CPU-Last, doch seit mehreren Monaten steht die Entwicklung still. Vielleicht kommt demnächst ja doch noch eine neuere Version…

CakeJS Game Missle Fleet CakeJS Game Web Mega Pong CakeJS Beispiel CakeJS Beispiel


Jun 15 2009

Interaktives Datendarstellungsprojekt InfoVis 1.1 erschienen

Tag: JavascriptPatrick @ 9:00 pm

Das Visualisierungprojekt InfoVis bietet wirklich großartige Möglichkeiten um Daten im Internet darzustellen. Vor wenigen Tagen präsentierten die InfoVis-Entwickler die Hauptversion 1.1 ihres Tools.

InfoVis ermöglicht das Darstellen interaktiver, dynamischer Graphen und Baumdiagramme. Das hört sich genial an und sieht in der Praxis noch viel besser aus.

In der nun vorliegenden Version 1.1. wurde die Bibliothek in einzelne Module unterteilt um die Wiederverwendbarkeit des Quellcodes zu erhöhen.

Zudem kann man nun mehrfache Instanzen einer jeden Animation erzeugen. Dadurch können nun die Darstellungsformen kombiniert und hintereinander ausgeführt werden.

InfoVis arbeitet mit jeder Javascript-Bibliothek zusammen, egal ob jQuery, Prototype, YUI, MooTools usw, InfoVis lässt sich zusammen mit allen nutzen.

Vorhandere Klasse können leicht verändert und erweiteret werden, außerdem lassen sich eigene Animation erstellen. Die Möglichkeiten sind grenzenlos.

Eine erstklassige Dokumentation und viele Beispiele sind auf der Entwickler-Seite für jedermann zugänglich.

infovis


Jun 04 2009

Adobe BrowserLab macht Microsoft SuperPreview Konkurrenz

Tag: ToolsPatrick @ 2:20 pm

Im März berichtete ich bereits über ein Microsoft-Programm namens SuperPreview, dass sich derzeit in der Entwicklung befindet und Web-Designern und -Entwicklern beim Erstellen von Homepages Darstellungsunterschiede der einzelnen Browser aufzeigen soll.

Am gestrigen Mittwoch stellte Adobe mit dem eigenen BrowserLab ein von der Funktionalität her ähnliches Tool zur Verfügung, das ebenso die Website-Gestaltung in bezug auf Browserprobleme vereinfachen soll.

Im Gegensatz zu Microsofts Anwendung wird Adobe BrowserLab als Online-Dienst angeboten. Vorerst wird dieser sogar kostenlos verfügbar sein. Adobe möchte sein Tool jedoch später zu einem kostenpflichtigen Dienst umstellen. Wann dies geschehen soll, ist noch offen.

Im BrowserLab ist es zum einen möglich eine Homepage auf zwei verschiedenen Browsern oder sogar Betriebssystem nebeneinander oder überlagend darzustellen, wodurch es recht einfach ist, Unterschiede der einzelnen Renderer auszumachen.

Bisher werden folgende Browser unterstützt (weitere folgen):

  • Internet Explorer 6 (Windows XP)
  • Internet Explorer 7 (Windows XP)
  • Firefox 2 (Windows XP)
  • Firefox 3 (Windows XP)
  • Firefox 2 OS X
  • Firefox 3 OS X
  • Safari 3 OS X

Jun 03 2009

Regelmäßige Vielecke mit Canvas

Tag: CanvasPatrick @ 11:00 pm

In letzter Zeit habe ich mich verstärkt wieder mal mit Canvas beschäftigt. Dabei ging es mir vor allem um regelmäßige Vielecke (englisch: regular polygons).

Von Haus bietet Canvas in keiner Implementierung eine Funktion zum schnellen und einfachen Erzeugen von regelmäßigen Vielecken. Daher setzte ich mich hin und programmierte angeregt durch canvas.quaese.de zwei entsprechenende canvas-Objekterweiterungen.

Außerdem wollte ich gern gezackte Figuren wie Sterne und Sonnen mit einem Funktionsaufruf erzeugen können. Also nahm ich meinen bisherigen Code her und überarbeitete ihn.

Das Ergebnis all des Codens kann sich meines Erachtens sehen lassen. Vor allem bei Mehrfachaufrufen ergeben sich sehr schicke Muster.

Die Methoden selbst sind nach einem simplen Prinzip aufgebaut. Man gibt die Position des Vieleckmittelpunktes, die Anzahl der Ecken, den Radius (Mittelpunkt->Ecke) und Anfangswinkel (meist 0) an.

Den Quelltext der Objekterweitungen kann ich nachfolgend sehen:

canvas.drawPoly = function(x,y,n,r,phi) {
this.translate(x,y);
this.rotate(phi);
this.beginPath();
this.moveTo(0,r);

for( var i=0; i<=n; i++){
this.save();
this.rotate(2*i*Math.PI/n);
this.lineTo(0,r);
this.restore();
}
this.stroke();
this.rotate(-phi);
this.translate(-x,-y);
}

canvas.fillPoly = function(x,y,n,r,phi) {
this.translate(x,y);
this.rotate(phi);
this.beginPath();
this.moveTo(0,r);

for( var i=0; i<=n; i++){
this.save();
this.rotate(2*i*Math.PI/n);
this.lineTo(0,r);
this.restore();
}
this.fill();
this.rotate(-phi);
this.translate(-x,-y);
}

canvas.drawZickzack = function(x,y,n,r1,r2,phi) {
this.translate(x,y);
this.rotate(phi);
this.beginPath();
this.moveTo(0,r1);

for( var i=0; i<=n; i++){
this.save();
this.rotate(2*i*Math.PI/n);
this.lineTo(0,r1);
this.restore();
this.save();
this.rotate(2*i*Math.PI/n+(2*Math.PI/n)/2);
this.lineTo(0,r2);
this.restore();
}

this.stroke();
this.rotate(-phi);
this.translate(-x,-y);
}

canvas.fillZickzack = function(x,y,n,r1,r2,phi) {
this.translate(x,y);
this.rotate(phi);
this.beginPath();
this.moveTo(0,r1);

for( var i=0; i<=n; i++){
this.save();
this.rotate(2*i*Math.PI/n);
this.lineTo(0,r1);
this.restore();
this.save();
this.rotate(2*i*Math.PI/n+(2*Math.PI/n)/2);
this.lineTo(0,r2);
this.restore();
}

this.fill();
this.rotate(-phi);
this.translate(-x,-y);
}

// Anwendungsbeispiel:
canvas.fillStyle = "#009";
canvas.strokeStyle = "rgb(0,0,0)";
canvas.lineWidth = 2;
// Sechseck
canvas.drawPoly(60,60,6,40,0);

Im Grundlagenbeitrag zu Canvas kann man sich genauere Informationen zum Einbau holen. Auch ein Blick in den Quellcode meiner angefertigen Demo hilft sich dem ein oder anderen und zeigt die Möglichkeiten der Methoden auf.

Vielecke und gezackte Muster mit Canvas


Mai 05 2009

DeepLeap – tolles Wörterpuzzle zum Zeit tot schlagen

Tag: SpielePatrick @ 10:23 pm

Findige Internetnutzer haben ein neues Javascript-Spiel des jQuery-Gurus John Resig namens DeepLeap entdeckt.

Ziel des Spiels ist es, aus den zur Verfügung stehenden Buchstaben (englische) Wörter zu bilden, für die Punkte gibt. Manche Buchstaben bringen mehr, andere weniger Punkte. Bei längeren Wörter (mehr als 3 Buchstaben) kommen noch verschiedene Multiplikatoren hinzu, die zu einem gehörigen Punktezuwachs sorgen.

Das noch unfertige Spiel ist im Groben ein Mix aus Tetris und Scrabble. So fern man dem Englischen mächtig ist, macht das Spiel auch richtig Spaß. Achtung: Suchtgefahr!

DeepLeap


Nächste Seite »