Jul 31 2008

Webseitenbesucher auf Updates ihres Browsers hinweisen

Tag: JavascriptPatrick @ 1:44 pm

Nick Stakenburg versucht mit seinem „Pushup: Pushing up th web“-Projekt die Verbreitung von modernen und geupdateten Browsern voran zu bringen.

Dazu bietet er ein Skript zum Einbau in eine bestehene Homepage an, das Benutzer über ein kleines Infofenster über neuere Versionen ihres Webrenderes informiert.

Um das Skript auf der eigenen Seite nutzen zu können, müssen die zwei Dateien im head-Bereich eingebunden werden:

<link href="http://www.ajaxschmiede.de/wp-admin/css/pushup.css" rel="stylesheet" type="text/css" />
<script src="http://www.ajaxschmiede.de/wp-admin/js/pushup.js" type="text/javascript"></script>

Über so ein Infofenster wird der Besucher über Browserupdates informiert.


Jul 31 2008

ProtoChart – Diagramme zeichnen mit Prototype und Canvas

Tag: Canvas,JavascriptPatrick @ 1:40 pm

Deensoft arbeitet mit ProtoChart seit einigen Monaten an einer frei verfügbaren Bibliothek zur Erstellung von Diagrammen mit Hilfe von Canvas und dem Framework Prototype.

Vor wenigen Tagen veröffentliche das Team um Obaid Ahmed eine stabile Version im Firmenblog und bietet gleichzeitig eine Vielzahl von Demos samt Einbauanleitung (englisch) an.

Folgende Graphenarten werden unterstützt:

  • Liniendiagramm
  • Säulendiagramm
  • Kreisdiagramm
  • Punktdiagramm
  • Flächendiagramm
  • gemischte Diagramme

Zu den Stärken von ProtoChart gehört die hochgradige Anpassungsfähigkeit. So lassen sich Legende, Achsen, Gitternetz und Hintergrund auf die jeweiligen Bedürfnissen einstellen. Außerdem können mehrere Datenserien in einen Graphen gezeichnet werden.

Unterstützt werden alle üblichen Browser (IE6+, FF2+ und Safari) .

Als kleine Besonderheit: ProtoChart funktioniert auch auf dem iPhone.

ProtoChart - ein Liniendiagramm ProtoChart - ein Säulendiagramm


Jul 29 2008

querySelector-API des W3C erhält umfassende Browserunterstützung

Tag: TrendsPatrick @ 8:31 pm

Die in nahezu allen Frameworks wie jQuery, mooTools oder DomAssistant implementierte Selector-API, mit deren Hilfe es möglich ist, DOM-Elemente mittels CSS-Selektoren anzusprechen, wird in naher Zukunft von allen großern Browser nativ unterstützt.

So gab Microsoft bereits zur Vorstellung der ersten Beta des Internet Explorers 8 dessen Support des vom W3C als NodeSelector bezeichneten Interface-Vorschlags bekannt. Über die beiden neuen Methoden document.querySelectorAll() und document.querySelector() kann somit alternativ zu den bisherigen Funktionen auf DOM-Elemente zugegriffen werden.

// gibt alle divs mit der Klasse special zurück
document.querySelectorAll("div.special");
// gibt das erste div mit der Klasse special zurück
document.querySelector("div.special");

Seit geraumer Zeit wird die neue, schlanke Art des Zugriffs auf DOM vom Opera– und WebKit-Browser unterstützt. Auch Mozilla, als letzter in der Reihe der großen Webrenderer, kündigte für die Ende des Jahres zu erwartende Firefoxversion 3.1 an, die querySelector-Methoden zu unterstützen.

Die weiteren Neuerungen im FF3.1 betreffen die Unterstützung einer Text-API für Canvas und von border-images zur Rahmenbeschreibung.

Durch den nativen Support der Selektor-API sollten alle Frameworks im Grunde einen gehörigen Geschwindigkeitszuwachs erfahren, sobald diese auf die implementieren Browsermethoden zugreifen. Nach meiner Kenntnis nutze dies bisher jedoch nur DOMAssistant aus.


Jul 27 2008

Eigene Schriftarten – das ungeliebte Kind der Web-Entwicklung

Tag: TrendsPatrick @ 2:23 pm

Seit den Anfängen des Internetbooms, Mitte der Neunziger Jahre des vergangenen Jahrtausends, beschäftigt die Wahl der passenden Schriftart die Web-Designer auf dem gesamten Globus.

Das Einbinden von Schriften in Webprojekte ist von jeher ein breites und komplexes Themengebiet. Vor allem das große Problem der Rechte ließ bisher keinen einheitlich unterstützten Standard zu.

Microsoft führte 1997 / 98 mit dem Internet Explorer 4 das Embedded OpenType-Format (kurz: EOT), eine im stark komprimierte Version von OpenType, ein. Zum Erstellen von diesen eot-Dateien stellte das Redmonder Unternehmen das Web Embedding Fonts Tool (WEFT) zur Verfügung.

Eingebunden wurden diese Schriften über die @font-face-Definition in den internen oder externen Stylesheet-Angaben.

<style type="text/css">
@font-face { font-family:ajax; src:url(ajax.eot), url(ajax.pfr); }
</style>
...
<p style="font-family:ajax">Text in Garamond</p>

@font-face wurde vom W3C bereits Mitte 1998 mit CSS2 eingeführt, jedoch wegen mangelhafter Browserunterstützung in der Revision 2.1 wieder rausgestrichen.

Im zukünftigen, modular aufgebauten CSS3 wird diese Art der Fontbeschreibung in Form eines eigenen Webfonts Moduls in überarbeitet wiederbelebt. Nach aktuellem Stand sollen hierbei die folgenden Schriftformate unterstützt werden:

  • TrueDoc Portable Font Resource
  • Embedded OpenType (nach Vereinbarung zwischen Microsoft und dem W3C)
  • PostScript Type 1
  • TrueType
  • OpenType, einschließlich TrueType Open
  • TrueType with GX extensions
  • Speedo
  • Intellifont

Trotz der 10 jährigen Geschichte von @font-face halten sich die Browserentwickler aus den verschiedensten Gründen zurück, es in ihre Web-Renderer zu implementieren.

Doch was ist es, was die Mehrheit der Browserentwickler zurückhält? Ein Punkt ist die rechtliche Seite einer solchen Implementierung.

Jede Schriftartendatei unterliegt dem Urheberrecht, darf also nicht frei und ohne Erlaubnis des Autors veröffentlicht und verbreitet werden. Doch genau dies geschieht, wenn man eine solche Datei auf dem Webserver platziert und durch das Einbinden in die eigene Homepage praktisch jedem zugänglich macht.

Da dies eine Urheberrechtsverletzung darstellt, ist es durchaus möglich, dass nach dem Bekanntwerden rechtliche Schritte gegen den Websitebetreiber eingeleitet werden, oder er zumindest eine Abmahnung zugesandt bekommt.

Bei Bildern und schriftlichen Werken (Liedtexte, Bücher, …) wird im Internet bereits seit langem so verfahren.

Da die großen Firmen der Schrifterstellungsbranche verständlicher Weise Interesse daran haben, ihre Produkte weiterhin gegen Lizenzgebühren gut zu verkaufen, werden diese Druck auf die Browerentwickler ausüben um eine ausartende Verbreitung ihrer Werke zu verhindern.

Nach Jahren des Stillstandes scheint nun endlich Bewegung in Sachen Web-Fonts zu kommen.

So hat Microsoft jüngst, wie Bill Hill im IE8Blog berichtet, die Ascender Corporation, einem der größten Schriftersteller der USA, zur Unterstützung des EOT-Formates überzeugt.

Dank des Programmieres Dave Hyatt unterstützt der Webkit-Browser als erster Web-Fonts nach CSS3. Dadurch ist davon auszugehen, dass @font-face bald auch im weitaus verbreiteteren Safari in einer der nächsten Hauptversionen Einzug hält.

Mozilla wird sich mit Sicherheit nicht lumpen lassen und zur gegebener Zeit Firefox ebenfalls entsprechend nachrüsten.

Fazit:

Ich halt @font-face für eine interessante und überaus coole, aber auch gefährliche Sache – und das nicht wegen der rechtlichen Seite.

Meiner Meinung nach gefährlich ist der übertriebene Einbau. Stellt euch nur mal Seiten vor, die 10-20 verschiedende Schriftarten benutzen – ganz abgesehen von den unzählichen Schriften, die man nur mit Mühe lesen kann. Bedenklich dabei ist ebenso die Gesamtgröße der zu übertragenden Schriften.

Ich gehe fest davon aus, dass in den kommenden zwei Jahren Web-Fonts sehr an Bedeutung gewinnen.


Jul 24 2008

SoundManager 2 ermöglicht Musikwiedergabe und -steuerung

Tag: JavascriptPatrick @ 8:37 pm

Scott Schiller, ein engagierter Web-Entwickler, der gerne seine Freitzeit damit verbringt coole Web-Features zu erstellen, hat mit SoundManager 2 ein javascript-gesteuertes Tool geschrieben, das die fehlenden Möglichkeiten von JS in Sachen Musikwiedergabe nachzuliefern versucht.

Dabei bedient sich Schiller des Adobe Flash Players (Version 8 und höher), der unbedingt erforderlich ist zur Wiedergabe und Steuerung der Tonausgabe.

Von der Browserseite her stellt der Soundmanager kaum Ansprüche. Opera, Safari, Firefox (1+) und IE (5+) für Windows und Mac werden unterstützt.

Dank der felxiblen API kann der Web-Entwickler frei entscheiden, welche der zur Verfügung stehenden Steuerelemente und Wiedergabeinformationen er dem Besucher anbietet. Von Lautstärkenreglung, Stummschalten bis Pausieren und Fortsetzen stehen alle üblischen Bedienfunktionen zur Vefügung.

Mit jsAMP bietet Schliler auch gleich eine interessante Beispielanwendung an, die von der von ihm entwickelten SM2-Schnittstelle gebraucht macht.

jsAMP ist – wie der Name vermuten lässt – ein in Javascript geschriebender mp3-Player. Die gesamte Playerfunktionalität wird in JS verwaltet. Flash-Kenntnis sind nicht notwendig.

So durchsucht jsAMP die Seite nach verlinkten mp3-Dateien und erstellt aus diesen eine Wiedergabeliste. Während des Ladevorgangs werden die ID3-Tag-Informationen ausgelesen und angezeigt.

Der Player befindet sich jedoch noch im Alpha-Stadium und kann unter Umständen abstürzen.

Der Einbau des SoundManager 2 geschieht durch Einfügen des nachfolgenden JS-Codes.

<-- Einbinden des SM2 -->
<script type="text/javascript" src="/path/to/soundmanager2.js"></script>
<-- individuelle Einstellungen -->
<script type="text/javascript">
soundManager.url = '/path/to/sm2-flash-movies/'; // Verzeichnis, wo die SWF-Dateien liegen

// soundManager.debugMode = false; // Deaktivieren des debug-Modus nach dem erfolgreichen Einbau

soundManager.onload = function() {
// SM2 wurde geladen - Erstellungen und Abspielen von Musikdateien
soundManager.createSound('helloWorld','/path/to/hello-world.mp3');
soundManager.play('helloWorld');
}
</script>

Der SM2 ist jedoch nur auf mp3s ausgelegt, andere Formate werden nicht unterstützt!

Schiller hat eine verspielte Anwendung erstellt, die zeigt, wozu man den SoundManager 2 nutzen kann. Nämlich um in Javascript basierten Spielen Ton einzubauen.

Eine ganz einfache Demo habe ich hier erstellt.


Jul 21 2008

IEPNGFix erhält Update

Tag: AllgemeinesPatrick @ 9:32 pm

Das durchaus sehr bekannte IEPNGFix, das den fehlenden Support von transparenten png-Grafiken für den Internet Explorer 5.5 und 6 nachliefert, hat vor wenigen Tagen ein Update erfahren und bietet nun volle Unterstützung der CSS1-Eigenschaften background-position und background-repeat.

Die vollständige Featureliste sieht nun wie folgt aus:

  • automatische Aktivierung der Transparenz von png-Grafiken in der Homepage
  • Unterstützung von <img src=““>-Elementen
  • Unterstützung PNG-Hintergrundgrafiken
  • volle Unterstützung der CSS-Eigenschaften background-repeat und background-position (durch eine optionale Erweiterung)
  • erlaubt das Definieren von Hintergrundgrafiken sowohl in der Datei als auch in externen Stylesheets
  • automatisches Aktuallisieren bei Änderungen der IMG-Quelldatei (SRC) oder der Hintergrundgrafik durch Javascript – funktioniert auch beim Ändern der festgelegten CSS-Klasse
  • bietet automatisches Workaround für <a href=““>-Elemente mit PNG-Hintergrundelementen
  • geringe Größe des Skripts
  • frei verfügbar

Der große Vorteil des Fixes besteht darin, dass man nur eine einzige Zeile CSS-Zeile einfügen muss um den Fix einzubauen. Weitere Codeanpassungen sind nicht nötig.

Vorgehen zum Einbau:

1.) Kopieren der Dateien iepngfix.htc and blank.gif in das Verzeichnis der Seite

2.) Füge die folgenden Zeilen Code in die HTML- beziehungsweise CSS-Datei ein (Der Pfad muss eventuell entsprechend angepasst werden):

<style type="text/css">
img, div { behavior: url(iepngfix.htc) }
</style>

3.) Falls Unterverzeichnisse verwendet werden, muss der Pfad in der HTC-Datei die Zeile IEPNGFix.blankImg = ‚/images/blank.gif‘; per Hand angepasst werden.

4.) Für die Unterstützung von  background-position und background-repeat muss die Javascriptdatei iepngfix_tilebg.js eingebunden werden.

5.) Einbau abgeschlossen.


Jul 18 2008

Erfahrungsbericht: Probleme mit standardkonformen XHTML

Tag: AllgemeinesPatrick @ 10:22 am

Bei meinem täglichen Umgang mit Web-Programmierung bin in letzter Zeit in Bezug auf 100 Prozent standkonformes XHTML(1.1) auf 2 Bugs gestoßen, die mich sehr nervten. Der erstere betrifft den Internet Explorer und ist eher harmlos, der zweite ist allgemeiner Natur.

Wie angesprochen, behandle ich den IE-Fehler zuerst.

In meinen eigenen Projekten bevorzuge ich es, den XHTML-Standard nach Version 1.1 – also sehr strikt – einzuhalten. Meine üblichen Header beginnen dementsprechend wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Jedoch genügt dies nicht, um den Validatortest des W3C zu bestehen, da hierfür auch der korrekte Datei-Header mitgeschickt werden muss. Dies sollte ja in PHP kein Problem sein.

Wie so üblich, war es dann doch nicht so einfach, da Microsofts Internet Explorer mit der Anweisung „Content-Type: application/xhtml+xml“ überhaupt nichts anzufangen weiß und idiotischer Weise die Seite zum Download anbietet.

Um Abhilfe zu schaffen, baute ich eine einfache IE-Browserweiche in meinen PHP-Code ein. Alle Webbrowser, bis auf den aus Redmond, bekommen den korrekten Datei-Header zugesandt.

$browser = get_browser( null, true );
if ( $browser['browser'] != "IE" ) {
header("Content-Type: application/xhtml+xml; charset=ISO-8859-1");
}

Das zweite Problem ist, wie bereits im Vorwort erwähnt, allgemeiner und betrifft die XHTML-Definition selbst. Diese sieht vor, dass beispielsweise kein document.write in XHTML gibt.

Bisher störte dies mich nur wenig. Jedoch kam ich die Tage mit einem Scipt in Berührung, das durch den massiven Gebrauch von document.write Emailadressen für Mailbots unzugänglich bzw. unlesbar macht.

Anschließend schrieb ich an einer eigenen document.write-Funktion, die jedoch 100% DOM-kompartibel sein sollte. Hierzu erwies sich das innerDOM-Script von Simon Kühn als sehr nützlich, da es einen (validierten) XHTML-String in ein DOM-Objekt konvertiert. Dieses Objekt lässt sich dann leicht an einer beliebigen Stelle im bestehende Dokument einfügen.

Die letzte Hürde bestand darin, die richtige, also „letzte“, Position im Dokument zu finden, so dass meine Funktion write ähnelt. Dazu nutzte ich in einer rekursiven Schleife die lastChild-Methode. Da Firefox und IE in Bezug Textknoten unterschiedlich behandeln, musste noch eine Fallunterscheidung eingebaut werden.

Die komplett Funktion lautet nun wie folgt:

function writeDom ( string ) {
var path = document;
while ( path.lastChild ) {
if ( path.lastChild.nodeType === 1 ) {
path = path.lastChild;
} else break;
}
path.parentNode.insertBefore( stringToDOM( string ), path );
}
document.writeDom=writeDom;

Der Aufruf geschieht ganz einfach über document.writeDom( String ).

Im Dokumentkopf muss das innerDOM-Script eingebunden sein!


Jul 16 2008

Sichere und kompakte Eigenschaftenabfrage

Tag: JavascriptPatrick @ 8:24 pm

Auf der Seite Getting Things Coded wird ein interessantes Verfahren beschrieben, wie man die Existenz eines Knotens und die Existenz einer oder mehrerer Eigenschaften des Knotens kompakt und fehlerfrei überprüfen kann.

Es ist bekannt, dass null nicht nur keine Eigenschaften besitzt, sondern auch deren Existenz kann nicht überprüft werden. So gibt null.Eigenschaft einen Fehler anstelle des Wertes undefined zurück.

Eine If-Anfrage, wie die nachfolgende, produziert also immer einen Fehler sobald nextSibling fehlschlägt – kein unmittelbar nachfolgender Knoten existiert – oder node den Wert null besitzt.

if (node.nextSibling.className == ...) {
...
}

Die Lösung besteht darin, alle möglichen Überprüfungen abzufragen. Das kann dann schnell ziemlich viel werden und so entsteht dann eine Struktur wie im nächsten Beispielcode.

if (
(node) &&
(node.nextSibling) &&
(node.nextSibling.className == ...)
... ) {
...
}

Um dem entgegen zu wirken, bedienen wir uns eines kleinen Tricks, der den boolschen Ausdruck vereinfacht. Der Trick besteht darin eine Alternive in Form eines leeren Objektes {} oder der 0 anzubieten.

So entsteht dann ein Gebilde wie das folgende:

if (((node || 0).nextSibling || 0).className == ...) {
...
}

Jul 15 2008

Mit Spacius in den Weltraum

Tag: SpielePatrick @ 8:06 pm

Matt Hackett hatte sich vor einer Woche an die Arbeit gemacht, mit „Spacius! A Space Adventure“ einen weiteren Klassiker der Spielegeschichte im „Javascript-Reich“ auferstehen zu lassen.

Im Gegensatz zu anderen Spieleumsetzungen, über die wir bereits berichteten, verwendete Hackett kein Canvas sondern einfach nur div-Elemente, wodurch es nicht nur in Firefox, Opera und Safari sondern auch in Microsofts Internet Explorer (6/7) einwandfrei läuft.

Die musikalische Untermalung geschieht mittels des SoundManagers 2, einem Script, das auf Adobe Flash-Basis die fehlende Audioschnittstelle für Javascript versucht nachzuliefern.

Mit der Leertaste wird sowohl das Spiel gestartet als auch im Game selber geschossen. Die Pfeiltasten dienen zum Bewegen des Gleiters im virtuellen Weltraum.

Wer nun Lust hat in die unendlichen Weiten einzutauchen, kann dies in der normalen oder doppelt so großen 800×600-Pixel-Variante tun.

Spacius - Startszene Spacius in Action


Jul 14 2008

Mit ddMenu eigene Kontextmenüs erstellen

Tag: mootoolsPatrick @ 10:28 pm

Der Deutsche Jan A. Manolov hat auf Grundlage des Frameworks MooTools (1.2) das ddMenu-Script zum Erstellen von eigenen Kontextmenüs geschrieben.

Ein einziger Klick auf die rechte Maustaste genügt, um anstatt des standardmäßigen Menüs eine individuelle, an die jeweiligen Bedürfnisse angepasste Optionenliste aufzurufen.

Sowohl das Erscheinungsbild, als auch die Steuerung des Menüs ähneln der gewohnten Betriebssystemumgebung lässt sich aber gleichzeitig völlig frei an die eigenen Vorlieben und Vorstellungen anpassen.

Durch gedrückthalten der Strg-Taste beim Rechtsklicken wird das Standardmenü aufgerufen. Wenn man die Shift-Taste beim Klicken der rechten Maustaste drückt, werden beide Menüs nebeneinander angezeigt.

ddMenu, das sich auch sanft Ein- und Ausblenden lässt, bietet Unterstützung für alle üblichen Browser (Firefox 2+, Safari 3, Internet Explorer 6+, Opera 9+).

Neben dem bereits erwähnten MooTools-Framework benötigt man noch die folgenden beiden Dateien:

Sind alle Dateien eingebunden, erstellt man die Menüstruktur als HTML-Liste. Jedes Item erhält hierbei eine eigene ID.

<div id="ddmenu2" style="display: none">
<li class="title">Hauptmenü</li>
<li class="item" id="menu_item1"><a href="#">HTML</a></li>
<li class="item" id="menu_item2"><a href="#">CSS</a></li>
<li class="item" id="menu_item3"><a href="#">JS</a></li>
<li class="item" id="menu_big_item"><a href="#">Web 2.0 - Alles zusammen</a></li>
<li class="sepline"></li>
<li class="item" id="menu_item_with_icon1"><a class="objects" href="#">Patrick</a></li>
<li class="item" id="menu_item_with_icon2"><a class="letter" href="#">Tobias</a></li>
<li class="item" id="menu_item_with_icon3"><a class="umbrella" href="#">Ajaxschmiede</a></li>
</div>

Zuletzt muss noch die nachfolgende Initialisierungsfunktion in ein Script-Tag eingebaut werden:

function iniz () {
	pagemenu = new DDMenu ('ddmenu2', document, {
	onOpen: function (e) {  //console.log (e);
			this.enableItems(true);
			this.enableItems('menu_item_with_icon2',false);
			$(e.target).get('tag') == 'a' ? this.enableItems('menu_spec_links',true) : this.enableItems('menu_spec_links',false);
		},
		onItemSelect: function (act_id,act_el,act_from) {
			//console.info ("menu action -> item id: \"%s\" from: %o in %o", act_id, act_el, act_from);
			//Hier kommen die Klickevents hinein
		}
	});
}

if ( window.addEventListener ) {
	addEventListener( "load", iniz, false );
} else {
	attachEvent( "onload", iniz );
}

Ich habe selbst ein Demo-Menü erstellt.


Nächste Seite »