Mrz 09 2009

jQuery UI 1.7 zieht nach – Mehr als nur ein Update

Tag: jQueryPatrick @ 2:50 pm

Zwei Wochen nach der Veröffentlichung von der Javascript-Bibliothek jQuery in Version 1.3.2 erschien vor wenigen Tagen nach etlichen Beta-Versionen das 1.7er-Release der Benutzerinteraktions-Erweiterung jQuery UI.

Etliche der Neuerungen im Überblick:

  • jQuery UI 1.7 ist die erste Version der Schnittstelle, die auf jQuery 1.3 als Untersatz baut. Dadurch profitiert auch jQuery UI in vielen Bereichen erheblich von den Geschwindigkeitsverbesserungen und Erweiterungen der neuen Bibliothekenversion.
  • Neben dem Beheben einer Vielzahl von Fehlern und dem Einpflegen unzähliger Verbesserungen, wurde jedes einzelne, verfügbare Plugin dahingehend überarbeitet und optimiert möglichst sauberen HTML-Code zu verwenden. Dabei wurde jedoch auch darauf geachtet, dass Web-Entwickler einfache aber dennoch vielfältige Möglichkeiten haben, die Plugins den eigenen Vorstellungen entsprechend zu erweitern und zu optimieren.
  • jQuery UI 1.7 basiert zudem auf dem brandneuen und mächtigen CSS-Framework, das so entwickelt wurde, dass es nicht nur die jQuery UI-eigenen, sondern auch nutzerspezifische Plugins unterstützt. Damit ist jeder Web-Entwickler in der Lage seine eigenen Plugins auf einfache Weise ThemeRoller-kompartibel zu machen. Das Framework bietet CSS-Klassen für die meisten UI-Elemente, Zustände, Container und Icons.
  • ThemeRoller, der jetzt nun vollständig überarbeitet in Version 2 vorliegt, ist ein CSS-Framework, das sich ganz speziell der Entwicklung von Benutzerschnittstellen widmet. Mittels  ThemeRoller können die CSS-Framework-Klassen verändert und angepasst werden.

Auf der jQuery UI-Seite finden sich eine Reihe von Beispielen und Anwendungsmöglichkeiten. Wenn es euch interessiert, schauts euch an und macht was geniales daraus – falls berichten wir dann darüber.


Mrz 06 2009

Verhältnis von Inhalt und Markup berechnen

Tag: ToolsPatrick @ 11:49 am

Wer sich mit Suchmaschinenoptimierung (SEO) und der (Lade-)Geschwindigkeit der eigenen Website beschäftigt, sollte auch mal einen Blick auf das Verhältnis von Inhalt und Markup, also der Struktur, anschauen.

Stoyan Stefanov interessierte sich dafür und schrieb ein kleine Javascript-Funktion die genau dieses Verhältnis berechnet.

Nach dem Einbau in eine Homepage und dem Setzen des Funktionsaufrufes, erhält man neben den Werten Gesamt- und Inhaltsgröße (jeweils in Byte) zwei Zahlen zurück, die das Verhältnis vom gesamten Code zum Content ausdrücken.

Der erste Wert ist ziemlich hart, der zweite ist etwas „loyaler“, imdem dort alt-, title- und value-Attribute als Inhalt gezählt werden. Somit fällt dieser „fairer“ aus.

Wer Lust hat, kann es ja mal ausprobieren und uns die Werte eurer Seite als Kommentar hinterlassen. Ich werde Ajaxschmiede übers Wochenende auch mal testen. Bin gespannt, was da für ein Ergebnis rauskommt.


Feb 26 2009

Safari 4: Apple zündet Nitro und besteht ACID3-Test

Tag: TrendsPatrick @ 6:55 am

Apple präsentierte vor wenigen Tagen eine Betaversion der vierten Generation des hauseigenen Safari-Browsers.

Das optische Erscheinungsbild wurde zum Teil grundlegend überarbeitet. So gibt es nun eine 3D-Vorschau der meistbesuchten Seiten beim Öffnen des Browsers (sehr schick!).

Das auf den ersten Blick sehr fremd anmutende und gewöhnungsbedürftige Tab-System in der Titelleiste weiß mir besonders zu gefallen. Vor allem auf kleinen Bildschirmen wie bei Netbooks hat man so einige Pixel mehr.

Wie schon im Mozilla Firefox 3 spendierte Apple seinem Schützling ein intelligentes Adressfeld, das die Benutzereingabe mit zuvor besuchten Seiten und Lesezeichen vergleicht und entsprechende URL-Vorschläge anzeigt.

Auch unter der Haube des Safari 4 hat sich einiges getan. Das flotte HTML-Rendern übernimmt eine aktuelle Version des WebKit-Browsers, wodurch S4 auch den ACID3-Test erfolgreich besteht.

In Sachen Javascript vertraut Apple auf die neu entwickelte Nitro-Engine, die – zumindest laut firmeneigenen Angaben – die weltweit schnellste JS-Engine auf dem Markt ist und alle Kontrahten in jedem Test hinter sich lässt (bis zu 30mal schneller als IE7). Unabhängige Tests müssen dies noch beweisen.


Feb 24 2009

display: inline-block für alle modernen Browser

Tag: AllgemeinesPatrick @ 10:07 pm

Ryan Doherty hat im Mozilla Webdev-Blog einen tollen Artikel darüber geschrieben, wie er die geniale CSS-Eigenschaft display: inline-block, die bisher nur von den aktuellsten Browsern (Firefox 3, Opera 7, Safari 3) unterstützt wird, nachgebaut hat.

Inline-Block ist – wie der Name bereits suggestiert – eine Mischung der Elementtypen block und inline.

Während Block-Elemente (h1-h6, div, usw.) im Textfluß stets neue Zeilen und größere Abstände zum nächstfolgenden Element erzeugen, erzeugen inline-Elemente (a, u, i, img, usw.) keine neue Zeile ordnen sich nebeneinander statt untereinander an.

Inline-Elemente belegen nur den Platz, den sie auch wirklich benötigen, und lassen sich in Höhe und Breite nicht beeinflußen. Einzige Ausnahme ist das img-Elemente, das zu den inline-Elementen gezählt wird. Dieses ist aber in Wirklichkeit ein Mittelding zwischen block und inline, also inline-block.

Elementen dieser Art verhalten sich wie inline-Elemente, lassen sich also in den Ausmaßen verändern, verursachen jede keine neue Zeile und ordnen sich somit nebeneinander an. Besondern attraktiv ist diese Darstellungsform für Fotogalerien, die bisher meist umständlich über Tabellenlayout umgesetzt wurden.

Und hier ist nun der Code für die perfekte Galerie, die vollständig auf CSS basiert:

<style>
    li {
        width: 200px;
        min-height: 250px;
        border: 1px solid #000;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: top;
        margin: 5px;
        zoom: 1;
        *display: inline;
        _height: 250px;
    }
</style>

<li>
        <div>
            <h4>This is awesome</h4>
            <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg"
            alt="lobster" width="75" height="75"/>
        </div>
</li>

Galerie mit inline-block


Feb 24 2009

jQuery schaltet nochmals einen Gang rauf

Tag: jQueryPatrick @ 3:10 pm

Nach Erscheinen der überragenden jQuery-Version 1.3 vor 5 Wochen und dessen kleinem Bugfix 1.3.1 kurze Zeit später, präsentierten die Entwickler vor wenigen Tagen das 1.3.2er Release ihrer Javascript-Bibliothek.

In dieser Version beschleunigten die jQuery-Macher die Perfomance nochmals deutlich, vor allem im Internet Explorer. So verarbeitet der IE jetzt Selektoren im Schnitt um 25% schneller.

Desweiteren wurde die Geschwindigkeit des :hidden/:visible-Selektors in allen Browsers extrem verbessert und erkennt zudem nun auch Elemente korrekt als „nicht sichtbar“, wenn dieses sich innerhalb eines verdeckten Elements befindet.

Sämtliche Höhen- und Breitenangaben werden von den verschiedenen Browsern nun ebenfalls nur noch in einem Bruchteil der Zeit berechnet.

Weitere Änderungen:

Funktionen zum Einfügen von Elementen in die HTML-Struktur geben nun anstatt des Elternelements die eingfügten Elemente zurück.

<div></div>
<div></div>
<script>
$('<p/>')
.appendTo('div')
.addClass('test');
</script>
// Ergebnis jQuery 1.3.1 (and älter)
<div><p class="test"></p></div>
<div><p></p></div>
// Ergebnis jQuery 1.3.2
<div><p class="test"></p></div>
<div><p class="test"></p></div>

Zudem wurde die Reihenfolge der zurückgegeben Elemente – wie in der Selektor-API vorgesehen – nun dahin gehend geändert, dass diese in entsprechend dem Vorkommen im Dokument zurückgeliefert werden.

// jQuery 1.3.1 (and älter)
$("h1, h2, h3");
Reihenfolge: h1, h1, h2, h2, h3, h3
// jQuery 1.3.2
$("h1, h2, h3");
Reihenfolge: h1, h2, h3, h3, h1, h2

Feb 21 2009

Norwegen sagt IE6 den Kampf an

Tag: Allgemeines,TrendsPatrick @ 10:36 pm

Für viele Web-Entwickler und – Programmierer ist er ein Graus, der Internet Explorer in der Version 6. Der IE 6 ist nichts Ganzes und nicht Halbes.

Konsequent ignoriert der Microsoft-Browser über 5 Jahre hinweg nahezu alle Web-Standards vo W3C. Die Redmonder kümmerten sich lange Zeit nicht um ihr Kind, das vor etlichen jahren quasi das Web-Monopol besaß.

Während Microsoft schlief, entstand eine harte Konkurrenz. Angeführt von Mozillas Firefox rungen die Alternativ-Browser wie Opera, Safari/WebKit und seit Kurzem Googles Chrome dem IE Prozent um Prozent beim Marktanteil ab.

Nun haben Norwegens Adminstratoren die Schnauze gestrichen voll vom Internet Explorer 6. Die Betreiber von sämtlichen großen und pobulären Webseiten stellen die Unterstützung des Steinzeit-Renders umgehend ein.

Sollte ein Besucher mit IE6 auf einer dieser Seiten unterwegs sein, wird ihm ein Infofenster angezeigt, indem er aufgefordert wird, den Browser upzudaten oder einen der genannten Alternativ-Browser zu verwenden, um Zugriff auf den gesamten Inhalt der Homepage zu bekommen.

Anti-IE6-Kampagne der Norweger


Feb 20 2009

Physikengine mit Javascript

Tag: CanvasPatrick @ 7:23 pm

Seit einger Zeit gibt es die Physikengine Box2D. Diese Bibliothek hat der Japaner Ando Yasushi automatisch in Javascript portiert.

Um JS-Box2D nutzen zu können, benötigt man neben der eigenen Klasse noch Prototype und ExplorerCanvas, da die Darstellung sonst in Microsoft-Browser nicht funktioniert.

Auf der Projektseite stehen einige Beispiele und auch Codeschnipsel zur Verfügung um eigene Anwendungen mit Physikeffekten zu erstellen.

Ich kann mir vorstellen, dass einige pfiffige Leute daraus einen js-basierten Bridgebuilder entwerfen. Was für eine coole Vorstellung.

Beispiel für Box2D in Javascript


Feb 08 2009

Vega und Carakan: Opera will Rechenkraft aktueller Grafikkarten zum Rendern nutzen

Tag: TrendsPatrick @ 9:41 pm

Lang, lang ist’s her als der Browser aus dem Namen Opera nicht nur der schlankeste, sondern auch der schnellste war.

Doch die Konkurrenz holte in den vergangenen Monaten sehr auf und überholte sogar das einstige Optimierungswunder. Nun möchte Opera die Performancekrone gerne zurückgewinnen und geht dabei neue Wege.

Die Vektorgrafik-Bibliothek Vega

Seit Version 8.0 kommt Opera mit der Vektorgrafik-Bibliothek Vega daher, die dem Browser Unterstützung für svg- und Canvas-Grafiken brachte.

Zur Berechnung der Grafiken bediente sich Vega jeher der Hardwarebeschleunigung moderner Grafikkarten  mittels Direct3D- und OpenGL-Schnittstelle.

Derzeit befindet sich mit der Version 2.3 der Presto-Engine zur HTML-Darstellung, der Nachfolger des für Opera 10 (Erscheinungstermin 2009) vorgesehenen Presto 2.2-Renderers, in der Entwicklung. In jener Version wird es möglich sein, die hardwarebeschleunige Vega-Engine auch für herkömmliches Rendern von HTML-Code einzusetzen. Aus Kompartibilitätsgründen wird es dennoch einen bisherigen Software-Renderpfad geben.

Für die Entwickler überwiegen die Vorteile dieses Weges deutlich.

Erstens lassen sich Hintergründe und Rahmen nach dem neuen CSS3-Standard über Vektorgrafiken viel leichter umsetzen.

Zweitens ist der Weg über die Hardwarebeschleunigung mittels moderner Grafikkarten um ein vielfaches performater als die langsamere Variante des Softwarerenderns.

Zudem wird es über Vega möglich, schnell und einfach zusätzliche, aufwendigere Grafikeffekte in die Benutzeroberfläche und letztlich auch in Webseiten einzubetten.

Voraussetzung für das Rendern mittels Vega ist, dass das Gerät auf dem der Browser läuft – theoretisch auch ein Smartphone wie das iPhone – eine DirectX 9- beziehungsweise OpenGL samt Framebuffer-Object (FBO)-kompartible Grafikkarte (oder Onboardgrafik) besitzt.

Desweiteren ist die Unterstützung von Pixel Shadern 2.0 beziehungsweise Fragment Shadern in OpenGL von Nöten. Diese Shader werden für das Darstellen von Filtern in SVG und Canvas sowie für für alle Arten von Schatten in den eben genannten Sprachen und HTML verwendet.

Ein Softwaremodus ist aber ebenso vorhanden, der notfalls alle Berechnungen über die CPU ausführt und damit mit jedem Gerät funktioniert.

Mit Carakan gegen SquirrelFish, Tracemonkey und V8

Im Vergleich mit den aktuellen HighSpeed-Javascript-Engines wie WebKit’s SquirrelFish Extreme und Google Chrome’s V8 ist die sparsame und dennoch performate JS-Engine Futhark ins Hintertreffen gerade. Die derzeit in der Entwicklung sich befindende Engine Carakan soll dies wieder ändern und Opera an die Spitze verhelfen.

Um das Ziel zu erreichen, erfährt das Innenleben Operas radikale Änderungen.

Das bisher verwendete stapelspeicher-basierte Bytecode-System weicht einem weniger Instruktionen beanspruchendem Register-Bytecode-System.

Obwohl die neue Engine diesen Bytecode bedeutend schneller ausführen kann, ensteht hierdurch ein größerer Mehraufwand bei einfachen Skripten, der sich wiederum negativ auf die Gesamtgeschwindigkeit auswirkt. Um diesem Effekt entgegen zu wirken, werden ganze Funktionen (oder Teile davon) zusammengefasst und als ganzes umgesetzt.

Aber auch die Methoden zum Anwenden von einfachen und komplexen regulären Ausdrücken bekamen eine Generalüberholung spendiert. So arbeitet die RegExp-Engine nun sehr viel effizienter indem viele unnötige und doppelte Arbeitsschritte unter Zuhilfenahme von einen „Tricks“ eingespart werden.

Desweiteren wurde die Verwaltung von Objekten überarbeitet. So werden Objekte in Carakan intern wie Klassen behandelt. Dies soll wiederum in Anwendungen, die eine Vielzahl von Objekten benutzen, einen enormen Geschwindigkeitschub verpassen.

In Zahlen ausgedrückt, soll Carakan im SunSpider-Benchmarkt mehr als 2,5mal schneller als die in Opera 10 (Alpha) verwendete Presto 2.2-Engine.

Die Arbeiten dauern noch an. Noch funktioniert nicht alles perfekt. Jedoch sprechen die Entwickler, dass Geschwindigkeitsverbesserungen um dem Faktor 50!!! in einigen speziellen Bereichen möglich sind.

Wann wird dies verfügbar sein?

Ich gehe davon aus, dass Opera seine neue Powerarchitektur noch in diesem Jahr – zumindest in Form einer Alpha-Version – neugierigen Entwicklern zur Verfügung stellen wird. Realistisch dafür ist ein Opera 10.5 oder Opera 11. Eine Roadmap liegt mir leider nicht vor.


Jan 29 2009

„\v“==“v“ – 9 Zeichen für IE-Erkennung in Javascript

Tag: JavascriptPatrick @ 11:16 am

Auf der Seite Web Reflections wurde kürzlich ein Wettbewerb ausgerufen mit dem Ziel, den von der Zeichenanzahl kürzesten Weg zu finden, den Internet Explorer in Javascript zu identifizieren.

Solche Weichen werden im Alltag immer wieder gebraucht, um speziellen Browser Extraanweisungen mitzugeben.

Als kürzeste Variante setzte sich der nachfolgender Code durch, der nur im IE (einschließlich 8) „true“ zurückliefert, in allen anderen Browsern „false“ zurückgibt.

IE="\v"=="v" // true only in IE

Damit zog diese Variante an dem zuvor favorisierten, nachfolgenden Code vorbei:

try{IE=window=!1}catch(e){IE=!0}

Jan 28 2009

YAF4AJN jetzt auch auf Sourceforge

Tag: JSON,PrototypeTobi @ 11:51 pm

Fast 1 Jahr ist es her, als die Deutsche Telekom ihre JSON-Bibliothek YAF4AJN präsentierte. Nun gibt es auch eine offizielle Projektseite bei Sourceforge.net, auf der die Bibliothek unter der LGPL Lizenz veröffentlicht ist. YAF4AJN (ausgesprochen: „ja fein“) ist die Abkürzung für „Yet Another Frontendcontroller for Ajax-Json-Networks“.

Die Bibliothek basiert zwar auf Prototype, ermöglicht aber eine sehr viel striktere Trennung von statischen HTML-Inhalten und dynamischer Werteberechnung, indem die Webseite dem Nutzer sofort angezeigt wird und dann einzubettende Werte asynchron von der Server-Applikation geholt werden. Eine Werte berechnenden Applikation muss also keine HTML-Seiten mehr als Output liefern. Seitenspezifisches Javascript entfällt ebenfalls. Dies ermöglicht u.a. eine frei redaktionelle Bearbeitung und vollständige Verwaltung der Seiten in einem Web Content Managment System.

Auf der Demo-Seite zum Projekt demonstriert die Telekom dieses Verfahren.

Neben der Sourceforge-Projektseite existiert natürlich weiterhin das Developer Portal der Telekom, auf diesem YAF4AJN inklusive einer einfachen „Hello World“-Applikation ebenfalls herunter geladen werden kann.


« Vorherige SeiteNächste Seite »