Ajaxschmiede.de

Nach unzähligen Betas wurde nun die Version 1.2 des bekannten Javascript-Debuggers Firebug veröffentlicht.

Die größte Neuerung besteht in der Unterstützung des Firefox 3, der zum Leidwesen unzähliger Entwickler bisher außen vor blieb.

Desweiteren geht das als Firefox-Addon erhältliche Tool nun deutlich flotter zu Werke. Besonders die Kernanwendung, der Javascript Debugger, wurde beschleunigt.

Das gesamte Erscheinungsbild von Firebug erfuhr ein grundlegendes Update, das etliche Fehler ausmerzt, ebenfalls erheblich fixer arbeitet und die Bedienung komfortabler gestaltet.

Vor allem die Konsole erhielt zahlreiche Verbesserungen, in Bezug auf mögliche Sicherheitsprobleme, die durch das Verwenden von Firebug auftreten könnten.

Damit steht die Entwicklung des Tools aber noch längst nicht still. Kaum sind die Arbeiten an der Bugfix-Version 1.2.1 angelaufen, wird auch an den Eckpfeilern des nächsten Hauptreleases 1.3 gefeilt.

Wie von Microsoft-Guru Bill Gates für den August angekündigt, erschien vor wenigen Tagen die zweite Betaversion des Internet Explorer 8.

War die vor über fast einem halben Jahr erschienene erste Beta vorrangig als Entwicklervorschau veröffentlicht worden, geht der Redmonder Konzern im firmeneigenen Blog davon aus, dass die neue Version jede Art von User ansprechen und begeistern wird.

Die Jahre in den Microsoft sich um bestehende Web-Standards kein bisschen kümmerte und stattdessen sein eigenes Süppchen kochte scheinen vorbei zu sein. Nach der Ankündigung, bei der Vorstellung des IE8, sich an die W3C-Vorgaben zu halten folgen nun auch weitere Schritte.

So streicht Microsoft im Standardmodus die Unterstützung von CSS-Expressions, auch dynamische Eigenschaften genannt. Diese werden nur noch im Quirksmodus des IE8 beziehungsweise im Strict-Modus des IE7, der mittels Button aktiviert werden kann, unterstützt.

Folgender Beispielcode zeigt eine CSS-Expression zur Überbrückungen der fehlenden max-width-Eigenschaft des Explorers:

div.class {
/* Internet Explorer */
width: expression(document.body.clientWidth> 600) ? "600px" : "auto";
/* Standards-compliant browsers */
max-width: 600px;
}

Im Gegenzug halten die in HTML4 und CSS2.1 eingeführten alternativen Stylesheet-Angaben die Unterstützung durch den Browser.

Noch sind zwei schwerwiegendere Probleme vorhanden, die Entwickler beim Testen ihrer Anwendungen im IE8 beachten müssen.

Das erste betrifft die Navigation und History von Ajax-Applikationen und die damit zusammenhängende cross-domain-Kommunikation, also das Verwenden von Daten und Skripten anderer, externer Seiten, das in Microsofts jüngstem Sprössling mittels window.location.hash geschieht.

Fehler Nummer Zwei besteht darin, dass das onload-Ereignis nicht zuverlässig ausgelöst wird.

Weitere wichtige Hinweise finden sich in den Release Notes.

Neben der angesprochenen Unterstützung aktueller Web-Standards legt Microsoft im zukünftigen IE viel Wert auf Sicherheit, im Besonderen in Bezug auf das genannte Cross-Domain-Skripting.

Um Anwender vor cross-site scripting-Angriffen (XSS) zu schützen, integrierten die Redmonder einen XSS-Filter, der im Falle einer böswilligen Attacke alle Anfragen an die betreffende Seite blockiert.

IE8 Beta 2 steht für alle 32- und 64-bit Versionen von Windows Vista, Windows XP, Windows Server 2003 und Windows Server 2008 in den Sprachen Englisch, Japanisch, Chinesisch (vereinfacht) und Deutsch zum Download bereit.

jQuery-Guru John Resig stellte vor wenigen Stunden sein aktuelles Projekt „Sizzle“ vor.

Sizzle ist eine neue, Framework unabhängige Selektor-Engine, die nach Fertigstellung auf allen üblichen Browsern funktionieren soll und dabei einen erheblichen Geschwindigkeitsvorteil gegenüber bisherigen Lösungen bietet.

Die komprimiert gerade einmal 4 Kilobyte große Engine soll in Firefox 3 4x, in Opera 9 3x und in Safari 1,5 mal schneller zu Werke gehen.

Das bisherige Code-Release enthält noch etliche kleinere Fehler in den standardkonformen Browsern und einige schwerwiegendere im Internet Explorer.

Die Arbeiten an Sizzle halten also noch an. Es wird dringend abgeraten die jetzige Version zu verwenden.

Vor wenigen Tagen wurde eine erste Preview-Version des Yahoo! User Interface (YUI) der dritten Generation der Öffentlichkeit vorgestellt.

Wir weisen an dieser Stelle ausdrücklich darauf hin, dass die Vorabversion nicht für den produktiven Einsatz vorgesehen ist. Sie dient lediglich dazu Interessierten und Entwicklern die Vorzüge und Neuerungen aufzuzeigen.

Das Entwicklerteam hat sich erneut große Ziele gesteckt. Schlanker, schneller, einheitlicher, mächtiger und sicherer soll YUI3 werden.

So soll der Code des Frameworks selbst als auch für die meisten Anwendungsfälle sichtlich schmaler ausfallen. Neue und verbesserte Interaktionsmöglichkeiten sollen in der Lage sein viel mehr zu leisten und dabei gleichzeitig weniger Code beanspruchen.

Ein durchgängiges Namensschema für Funktionen, Ereignisse und innerhalb der Widget-APIs soll zur Vereinfachung und Einheitlichkeit beitragen.

Einige der Neuerung im Einzelnen:

„Sandboxing“ (Sandkastenprinzip): Jede YUI-Instanz einer Website ist unabhängig, geschützt und begrenzt. Dadurch werden verschiedene YUI-Instanzen von einander getrennt, wodurch es möglich sein wird, Funktionen maßgeschneidert an die jeweiligen Bedürfnisse anzupassen und gleichzeitig verschiedene YUI-Versionen nebeneinander laufen zu lassen.

Modularität: Die YUI3-Architektur ist auf das Verwenden kleinerer Module ausgelegt. Damit hat der Web-Entwickler eine genauere Kontrolle darüber, welche Funktionen auf der Website zur Verfügung stehen sollen.

Selektoren: Elemente können über die CSS-Selektor-API angesprochen werden. Dies vereinfacht das Selektieren eines Elementes beziehungsweise einer Gruppe von Elementen enorm.

Verkettung: Die Überarbeitung der Rückgabewerte von Methoden und Konstruktoren erlaubt eine verkürzte Verkettungsschreibweise.

mehr benutzerdefinierte Ereignisse: Benutzerdefinierte Ereignis werden in YUI viel mächtiger als bisher sein. Die neue Event-Engine bietet eine durchgängige Syntax zum Erstellen einer komplexen Eventsteuerung. Außerdem stehen ein paar neue Ereignistypen zur Verfügung.

Bereits in diesem Jahr soll noch eine Beta von YUI3 erscheinen.

Christian Effenberger veröffentlichte auf seiner Seite netzgesta.de ein Skript um sehr cool aussehende Lupeneffekte relativ einfach in eigene Homepage einzubauen.

Alles was man dazu benötigt ist sein loupe.js, das aktuell in Version 1.3 vorliegt und für nicht-kommerielle und private bzw. Schulungszwecke frei verfügbar ist.

Zum Einbau müssen die folgenden Zeilen Code in den Head-Bereich eingefügt werden:

// only if the image "loupe.png" is not in the current path
<script type="text/javascript">var loupePath="imagepath/";</script>
// else only this lines...
<script src="loupe.js" type="text/javascript"></script>
<!--&#91;if gte IE 6&#93;>
<script type="text/javascript">var loupePath="vml/";</script>
<script type="text/javascript" src="vml/loupe.js"></script>
<!&#91;endif&#93;-->

Um die Lupenfunktion hinzuzufügen, wird ein onload=“initLoupe(this.id);“-Ereignis auf ein von einem div umschlossenes Bild gesetzt.

<img src="..." id="..." onload="initLoupe(this.id);" alt="..." width="356" height="205" />

Die Lupengrafik lässt sich problemlos ersetzen und den eigenen Vorlieben und Website-Motiven anpassen.

loupe.js funktioniert in allen größeren Browsern (Firefox 1.5+, Opera 9+, Safari und IE 6+). Ältere Browser ignorieren die Anweisungen einfach.

Unzufrieden mit der fehlenden PNG-Unterstützung des IE6 und den bisherigen Lösungen, wie IEPNGFix, die noch einige Elemente und Möglichkeiten vermissen lassen, entwickelte Micah Tischler den mtjs_iepnghandler.

Seine Javascript basierte Lösung unterstützt img-Tags sowohl mit als auch ohne blank-Grafik. Hintergrund-PNGs können genau so positioniert werden wie sich wiederholende, selbst wenn diese kleiner als der Inhalt des Elementes sind. Zudem wurde eine echte Wiederholungsfunktion implementiert anstatt dem bloßen Strecken des Bildes.

Das mtjs_iepnghandler.js-Script durchwandert die DOM-Baumstruktur und fügt einige Zusätze für das richtige Verhalten für IE5 und IE6 – und auch nur für diese Browser! – ein.

Tischlers Lösung ist sogar so klug, dass die Ausmaße des Bildes beachtet werden, um das Wiederholungsverhalten entsprechend anzupassen.

Der Einbau des (einfacheren Solo-) Skriptes geschieht wie folgt:

Zuerst bindet man das Skript in den Kopf seiner Webseite ein (Pfad beachten!):

<script src="mtjs_iepnghandler_solo.js" type="text/javascript"></script>

Anschließend wird die Funktion mtjs_iepnghandler_solo.go() nach dem Laden der Seite aufgerufen. Dies kann im body-Tag mittel onload oder in einer externen Javascript-Funktion geschehen.

<body onload="mtjs_iepnghandler_solo.go();">

Zweifellos jeder Web-Designer und -Entwickler stieß bei CSS-Angaben auf Darstellungsunterschiede in verschiedenen – vor allem älteren – Browsern, durch die man gezwungen war weitere Stylesheet-Dateien einzubinden oder CSS-Hacks zu verwenden um eine einheitliche Darstellung erzielen.

Das Kernpunkt des Problemes ist der unterschiedliche Grad der CSS-Implementierung in den verschiedenen Browsern und deren Versionen.

Allan Jardine bietet mit Conditional-CSS eine, wenn nicht sogar die, Lösung des Problems an: Er nahm die Idee der Conditional-Comment-Syntax des Internet Explorers auf und übertrug diese auf CSS-Anweisungen.

Somit ist es nun möglich, einfacher zu wartenden CSS-Code zu schreiben, der sich an die Eigenheiten des jeweiligen Renderers anpassen lässt. Damit sollten sich die nervigen CSS-Bugs auf einfache Weise umgehen lassen.

Unterstützt werden nahezu alle gängigen und exotischen Browser von IE bis Playstation Portable. Wobei zu beachten ist, dass nicht jede Browserversion auf Grund der Eigenheiten vollen Support erhält. Eine genaue Übersicht gibt dazu gibt es hier.

Hauptsächlich wird Conditional-CSS, wie bereits angesprochen, dazu verwendet werden, um festzulegen, ob ein CSS-Ausdruck an den jeweiligen Browser gesendet werden soll oder nicht. Es ist klar, dass man eigentlich auf solche Tricks verzichten möchte, aber in Ausnahmefällen ist C-CSS äußerst nützlich um einen bestimmten Browser anzusprechen anstatt Stunden mit einem Problem sich rumzuplagen.

Jeder CSS-Einzelanweisung oder jedem Anweisungsblock kann eine Bedingung vorangestellt werden.

Hier ein paar Beispiele zur Anwendung:

a.button_active, a.button_unactive {
display: inline-block;
[if lte Gecko 1.8] display: -moz-inline-stack;
[if lte Konq 3.1] float: left;
height: 30px;
[if IE 5.0] margin-top: -1px;
text-decoration: none;
outline: none;
[if IE] text-decoration: expression(hideFocus='true');
}

[if IE] .box {
width: 500px;
padding: 100px 0;
}

Wer sicher näher dafür interessiert, kann das OpenSource-Projekt C-CSS herunterladen und auf dem eigenen Server aufspielen. Eine detailierte Einbaueinleitung für PHP liegt bei.

Frisch veröffentlicht wurde die neue, voll abwärtskompatible, Version 2.2 des Ext JS Javascript-Frameworks. Neben wichtigen Fehlerbehebungen und Geschwindigkeitsverbesserungen  bringt die neue Version auch eine Reihe von neuen Komponenten und Extensions mit sich.

Neue Features sind:

Checkbox- und Radio-Gruppe

Individuelle Checkboxen und Radio Buttons sind nichts neues. Selbst per CSS gestaltet sehen diese Controls jedoch in vielen Browsern unterschiedlich aus. Diese Standard-Controls können ja gegen optisch konsistente Controls von Ext JS ersetzt werden.

Live-Beispiel

History

Eine weitere Komponente, die in Ext JS fehlt, ist eine History. Diese erlaubt es auf einer einzelnen Seite innerhalb der Ext JS Applikation über die Vor- und Zurückbuttons des Browsers in bereits aufgerufenen Inhalten zu navigieren.

Live-Beispiel

MultiSelect / ItemSelector

Multiselect ist ein Control, das, wie der Name schon sagt, die Mehrauswahl von Listen-Elementen erlaubt. Der Itemselector kombiniert zwei Multiselects in einem komplexeren Modul, welches Drag&Drop, Massenauswahl und Abwählen neben weiteren Features enthält.

Live-Besipiel

FileUploadField

Wie schon aus anderen Frameworks bekannt bietet auch Ext JS jetzt eine Möglichkeit, Dateien hochzuladen. Dieses sehr nützliche Control kann sowohl mit (nurlesbarem) Textfeld und „Durchsuchen-Button“ als auch nur mit dem „Durchsuchen-Button“ angelegt werden.

Live-Beispiel

XmlTreeLoader

Der XmlTreeLoader dient zur Demonstration, wie sich eine vorhanden Ext JS Komponente um Funktionalität erweitern lässt, die in eigenen Applikationen benötigt wird.

Live-Beispiel

GMapPanel

Diese Komponente war eigentlich nur als Demo gedacht. Durch den Erfolg in der Community wurde darauf jedoch eine offizielle Erweiterung erstellt. GMapPanel ermöglicht es, Karten von Google Maps in einem Fenster innerhalb einer Website anzuzeigen. Gleichzeitig zeigt dieses nützliche Beispiel, wie sich eine Ext JS Komponente mit einer externen API (der von Google Maps) verknüpfen lässt.

Live-Beispiel

Das Framework erfuhr aber noch zahlreiche weitere Änderungen, wie z.B. die volle Unterstützung von Firefox3. Weiterhin gibt es drei neue umfangreiche Beispiele zu Drag&Dro. Es wurden zahlreiche Performance-Verbesserungen und Bugfixes vorgenommen. Die Entwickler wollen aber auch die Nutzer der 1.x Version nicht im Stich lassen und planen die Version 1.2 von Ext JS, in der ebenfalls Fehler behoben werden.

Zum Ext JS 2.2 Download