Dez 23 2008

jQuery 1.3 mit neuer CSS Selector-Engine

Tag: jQueryTobi @ 6:27 pm

Das jQuery Team hat an der neuen Release hart gearbeitet, diese wurde jetzt in der Version Beta 1 veröffentlicht und eignet sich noch nicht für den echten Einsatz bei der Entwicklung von Internet-Anwendungen. Die Entwickler sind über jeden Tester dankbar, umso schneller können Fehler gefunden und behoben werden.  Den Download der Beta Version, einen Link zum Bug-Tracker usw. findet ihr hier.

Was ist neu in jQuery 1.3?

  • Die CSS Selector-Engine wurde komplett überarbeitet. jQuery setzt jetzt auf die Selector-Engine „Sizzle„, die von John Resign entwickelt wurde. Diese Engine ist nur 3kb groß und soll viel schneller sein. Außerdem ist sie von keiner anderen Bibliothek abhängig.
  • Weiterhin wurde die DOM-Manipulation (append/prepend/before/after) überarbeitet.
  • Die offset() Methode wurde komplett neu geschrieben.
  • Die Logik für den Handhabung von namenraumbasierten Ereignissen wurde komplett umgeschrieben.

Es gibt noch eine Menge weiterer neuer Features, aber darauf möchten die Entwickler später eingehen. Die finale Version wird für den 14. Januar 2009 angepeilt. Für Feedback und die Meldung von Fehlern sind die Entwickler sehr dankbar.


Dez 20 2008

DOMTRIS – Tetris als Javascript-Spiel

Tag: SpielePatrick @ 8:58 pm

Jacob Seidelin präsentierte mit DOMTRIS vor kurzem einen weiteren Spieleklassiker, den er in mit HTML, Javascript und Canvas als Browsergame umgesetzt hat.

DOMTRIS ist – wie der Name bereits suggestiert – ein Tetris-Klone und orientiert sich an der ersten, schnörkelfreien Tetris-Version. Extras sucht man vergebens.

Das Auslöschen einer Reihe bringt im ersten Level 30 Punkte ein. Mit höherer Levelzahl steigt auch zu erhaltende Punkteanzahl aber auch die Geschwindigkeit der herabfallenden Objekte nimmt zu.

Das gleichzeitige Auslöschen mehrerer Reihen bringt um einiges mehr Punkte. Neue Level beginnen ab 500, 1000, 2000, 5000, 10000, 25000 Punkten und so weiter.

Die Tetris-Steine sind nur farbige div-Elemente, deren Rahmen mit CSS formatiert worden. Bis auf den Internet Explorer, der mit dem Rahmentyp „outlet“ Probleme hat, sieht das Ergebnis in allen Browsern sehr gelungen aus.

Ein besonderes Feature bietet DOMTRIS dennoch: Der Spielstand kann durch Drücken der S-Taste gesichert werden. Anschließend erhält man eine URL, die beim Aufruf den Spielstand wiederherstellt.

Beim Drücken der Speichertaste erzeugt das Spiel aus dem aktuellen Zustand einen ziemlichen langen querystring (URL-Anhängsel), welcher via json-tinyurl extrem verkürzt wird.

Steuerung:

  • Stein bewegen: Pfeiltasten links / rechts
  • Stein drehen: Pfeiltaste oben / Leertaste
  • Stein fallen lassen: Enter
  • Spiel pausieren: P
  • Spiel speichern: S
  • Spiel starten: Leertaste

Wer mag kann nun loslegen und DOMTRIS spielen.

Domtris - Tetris als Javascript-Spiel


Dez 19 2008

DLINK – mehr Farbe für deine Links

Tag: JavascriptPatrick @ 11:19 pm

David King programmierte die kleine Javascript-Bibliothek DLINK, die es ermöglicht unterschiedliche Link-Typen unterschiedlich anzuzeigen.

Dadurch ist es für einen Webseitenbesucher leichter zu erkennen, ob ein Verweis auf die selbe, eine externe, eine interne oder eine Subdomain-Seite verweist. Außerdem erkennt DLINK auch Verweise auf Emails und Subdomains.

Um DLINK zu nutzen, bindet man zuerst die JS-Datei im Header ein, gruppiert die Links, die hervorgehoben werden sollen und weist der Gruppe die dlink-CSS-Klasse zu. Anschließend formatiert man noch die Link-Typen in CSS. Fertig.

Der folgende Quellcode soll das Vorgehen verdeutlichen:

<script type="text/javascript" src="http://oopstudios.com/dlink/dlink.js"></script>

<style type="text/css">
a.internal  {color: #D47700;}
a.external  {color: #0074D4;}
a.subdomain {color: #D43500;}
a.email     {color: #00B235;}
</style>

<div class="dlink">
your <a href="#">link filled</a> content...
</div>

Links mit DLINK markiert


Dez 19 2008

Return of the Amiga-Raster-Bar

Tag: Canvas,JavascriptPatrick @ 2:54 am

Stefan Pettersson veröffentlichte in seinem Blog vor wenigen Tagen eine Raster-Bar-Demo, die an alte Amiga-Zeiten erinnert.

Um seine Querbalken darzustellen, nutzte er einzig Canvas. Mit ein wenig JavaScript hauchte er diesen durch Animation Leben ein.

Das Ergebnis ist vielleicht die alltagstaugliche Einsatzmöglichkeit für moderne Web2.0-Anwendungen, aber jedoch ein schicke Anregung für eigene Spielereien.

Raster Bar mit Canvas und Javascript


Dez 08 2008

jQuery in Aktion: JavaScript Operating System

Tag: jQueryPatrick @ 7:51 pm

James Luterek präsentierte vor wenigen Tagen seine Implementierung eines Betriebssystemdesktops mit Web-Methoden. Das bisherige Ergebnis namens JSOS (JavaScript Operating System) kann sich sehen lassen.

Die ganze Anwendung nutzt einzig die Programmiertechniken Javascript (inbesondere jQuery), HTML und CSS. Das Hintergrundbild ist die einzige vorhandene Grafik. Das restliche Aussehen wurde per Stylesheets erstellt.

Folgende Funktionen wurden bisher von Luterek umgesetzt:

  • Start-Button
  • Taskleiste – Anzeigen geöffneter Fenster und Hervorheben/Minimieren
  • Fenster – Erstellen, Bewegen, Vollbild, Minimieren, Größe verändern, usw.
  • Desktop anzeigen mittels Rechtsklick
  • Eigenschaften/Aussehen (bestimmen von Textfarbe, Hintergrundfarbe und -grafik)
  • Speichern der Einstellungen in Cookies für den nächsten Besuch

Obwohl Firefox das bessere Ergebnis liefert, funktioniert JSOS vollständig im IE ab Version 7. Firefox wird ab der 2. Generation unterstützt. In der aktuellen Opera-10-Alpha läufts es – wenn auch stockend -, im Safari (3.2.1) gab es etliche Darstellungsfehler.

JSOS - JavaScript Operating System