Code, CSS, xHTML, JS, XML

Asynchrones Laden großer Datenmengen; XML, JSON und TXT im Vergleich

AJAX ist immer öfter ein Argument und die Lösung beim Laden großer Datenmengen. Aus der historischen Sicht ist XML eines der ersten Formate, die dabei zum Einsatz kommen. Alternativ wird JSON immer populärer und TXT ist einigen Bereichen nicht tot zu bekommen. Um so schöner, wenn man mal einen direkten Vergleich der drei Formate in diesem Anspruch hat und direkt am Vergleich sieht, wo die Vor- und Nachteile liegen.

Diesem Thema hat Andrés Nieto verschrieben und es lohnt den Artikel zu überfliegen, die Übersetzungsfunktion bringt sicher nicht das beste Ergebnis, aber mit ein wenig Verständnis und Mühe ist das Ergebnis seiner Bemühungen ersichtlich. Daher meine Empfehlung: „Carga asíncrona de grandes cantidades de dátos con Ajax“ lesen.

XML, JSON, TXT im Vergleich
Weiterlesen

Standard
Webküche

Web-Anwendungen offline laufen lassen

Das Beta-Stadium hat Google Gears noch nicht verlassen, trotzdem steht schon ein mächtiges Applikation zur Verfügung. Gears arbeitet mit Ajax, also JavaScript und asynchroner Kommunikation. Mit dieser Applikation schließt Google eine Lücke im Frameworkbereich, denn nun können Applikationen offline genutzt werden. Der Abgleich findet dann statt, wenn wieder eine Netzverbindung zur Verfügung steht. Als Beispiel wurde der Google Reader mit einer Offline-Funktion ausgestattet.

Gears erlaubt Synchronisation findet im Hintergrund statt.

Gears kommt mit einem Webcache, der HTML-Objekte lokal speichert und zur Verfügung stellt. Ebenso steht eine Miniversion der Datenbank SQLite zur Verfügung. Damit das Arbeiten im Browser nicht eingeschränkt wird, kommt das Modul „WorkerPool“ mit. Damit teilen sich Tasks bei Clinets mit Mehrkern-CPUs auf. Damit kann die Web-Applikation entstehen und gleichzeitig eine Desktop-Version – kein Stocken und Einfrieren.

Damit wird der Browser zu einer zentralen Arbeitsappliaktion, es wird ein Nachteil beseitigt, denn vorallem immer Microsoft hervorhebt. Die Nutzung wird einfacher und angenehmer. Hinzu kommt, dass Adobe das Projekt mit unterstützt und einsetzen will [FlexBlog]. Ebenso machen Mozilla und Opera mit – damit wird wohl Microsoft einen weiteren Punkt auf ihrer „Wunschliste“ haben.

mehr Infos:

Standard
Webküche

Diagramme mit Prototype erstellen

Chart mit PlotrWer mit dem Bibliothek Prototype arbeitet und diverse Diagramme/Charts darstellen will, der sollten sich das Framework Plotr ansehen. Mit Hilfe von SVG-Elementen wird das Diagramm dargestellt. Das Projekt ist bei Google-Code hinterlegt. Einzige Vorraussetzung ist Prototype Version 1.5 oder höher.

Bisher sind drei wunderbare Beispiele zu sehen. Eine Dokumentation gibt es nicht, da es ausgesprochen leicht ist, das Framework zu nutzen – so der Autor. Die Beispiele, die mit entsprechendem Code vorliegen, sollten ausreichen.

Standard
Code, Tipps, Webküche, WordPress

script.aculo.us Effekte in WordPress Themes integrieren

WordPress und JSIn einem kleinen Tutorial soll es diesmal darum gehen, wie man die Effekte von script.aculo.us in ein WordPress-Theme einbindet. Eine ganze Reihe schöner Effekte kann man sich auf der Demo-Site der Library ansehen. Man sollte allerdings erwähnen, dass script.aculo.us nicht unbedingt die schlankeste der JS-Bibliotheken ist, aber ich habe mich dafür entschieden, da ich schon seit einiger Zeit damit arbeite und somit die Doku kenne, leichter zurecht komme und weil sie bei WordPress seit V2.1 zum Standard gehört.

Ich hoffe, dass damit einige Anfragen, die ich bezüglich dieses Themas bekommen habe, beantwortet sind.

Die populäre AJAX-Library ist schon recht lange auf dem Markt und seit der WordPress Version 2.1 ist sie standardmäßig mit eingebunden. Ab dieser neuen Version ist sie im Ordner wp-includes/js/ zu finden. Wer nun mit seinem Blog den Sprung auf die neue Version nicht durchgeführt hat, der sollte die nötigen Dateien unter diesem Pfad ablegen, so liegen in Zukunft bei einem Update keine doppelten Dateien auf dem Webspace.

Für unser kleines Tutorial, in dem ich nur auf den Scroll-Effekt und den Slide-Effekt (auch Akkordeon-Effekt) eingehe, benötigen wir die prototype.js und scriptaculous/effects.js. Den Download gibt es unter folgenden Adressen: script.aculo.us und Prototype, oder die aktuelle WordPress-Version downloaden und die beiden Dateien aus dem js-Verzeichnis holen.

Im WordPress-Verzeichnis sieht es nun so aus:

— wp-admin/
— wp-content/
— wp-includes/
|—- js/
|—— prototype.js
— wp-includes/
|—- js/
|—— scriptaculous/
|——– effects.js
— …

Das ganze Tutorial lasse ich unter XAMPP laufen, also lokal – damit kann man einfach besser experimentieren, ohne das der Leser des Weblogs etwas bemerkt. Wie man WordPress lokal auf XAMPP laufen läßt, erklärt Olaf im deutschen WordPress-weblog ausgezeichnet.

Einbinden der JS-Files

Als erstes müssen die beiden Dateien eingebunden werden, denn sonst können wir nicht auf die Funktionen der Library zugreifen.
Dazu bearbeiten wir die Daten im Header. In den meisten Themes gibt es eine eigene Datei dafür – header.php. Wo diese fehlen sollte, werden die Daten sicherlich mit in der index.php stehen.
Im Header, Abschnitt head, hinterlassen wir nun folgende Zeilen.


<script src="<?php bloginfo('url'); ?>/wp-includes/js/scriptaculous/prototype.js" type="text/javascript"><!--mce:0--></script>
<script src="<?php bloginfo('url'); ?>/wp-includes/js/scriptaculous/scriptaculous.js" type="text/javascript"><!--mce:1--></script>

Dazu folgender Hinweis – man kann bei scriptaculous alle Bibliotheken laden, wie im obigen Code, oder man lädt auch nur einzelne, die man benötigt. So wird die Größe der zu ladenden Daten doch erheblich reduziert. Kann man sich übrigens sehr schön mit Firebug im Firefox ansehen.
Da wir für das Tutorial nur die Bibliothek der Effekte benötigen, ändern wir den Link ab – ?load=effects.


>script src="<?php bloginfo('url'); ?>/wp-includes/js/scriptaculous/scriptaculous.js?load=effects" type="text/javascript">>!--mce:2-->>/script>

Bei Verwendung mehrerer Scripte, kann man diese auch bündeln, einfach mit Komma.


<script src="&lt;?php bloginfo('url'); ?&gt;/wp-includes/js/scriptaculous/scriptaculous.js?load=effects,slider" type="text/javascript"></script>

Derzeit stehen folgende Möglichkeiten bereit:

  • builder
  • effects
  • dragdrop
  • controls
  • slider

Nun haben wir zwar das Weblog mit den Librarys ausgestattet, nun wollen wir sie aber auch nutzen. Deshalb binden wir nun am Beispiel der Kommentare das Öffnen und Schließen des Kommentar-Abschnittes ein. Die Einbindung kann man natürlich auch an jedem anderen Bereich vornehmen. Wissen muss man, dass man folgende Tags mit der Library ansprechen kann – es muss also keine div-Wahn entstehen.

Mögliche xHTML-Elemente:

  • address
  • blockquote
  • body
  • dd
  • div
  • dl
  • dt
  • fieldset
  • form
  • frame
  • frameset
  • h1, h2, h3, h4, h5, h6
  • iframe
  • noframes
  • object
  • p
  • ol, ul, li
  • applet
  • center
  • dir
  • hr
  • menu
  • pre

Button/ Link zum Öffnen/ Schließen hinzufügen

Dazu bearbeiten wir die comments.php und erweitern den Bereich der Ausgabe, wenn es Kommentare gibt, dann ist der Link da. Sucht dazu die Abfrage


<?php if ($comments) : ?>

In den meisten Templates steht danach die Ausgabe, um wieviel Kommentare es sich handelt. davor setzen wir nun einen Link, der das ID der Kommentarliste anspricht.


<a href="#" onclick="Effect.toggle('commentlist', 'slide', {duration:0.5}); return false;">Hier Klicken</a>

In meinem Beispiel sieht es nun folgendermaßen aus:


. . .
<?php if ($comments) : ?>
	<a href="#" onclick="Effect.toggle('commentlist', 'slide', {duration:0.5}); return false;">Hier Klicken</a>
	<h3 id="comments"><?php comments_number('Keine Reaktion', 'Eine Reaktion', '% Reaktionen' );?> zu “<?php the_title(); ?>”</h3>

	<ol class="commentlist" id="commentlist">

	<?php foreach ($comments as $comment) : ?>

		<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">
. . .

Wir wollen die Liste ol Öffnen und Schließen lassen, somit müssen wir ID commentlist ansprechen.

Erläuterungen zum Code

Nun nochmal ein wenig Erläuterung zum Link, der uns das Öffnen/ Schließen erlaubt. Der Link funktioniert nur unter aktivem JavaScript, klar, denn es handelt sich um eine JS-Library. Deshalb immer überlegen, wie binde ich es ein, so dass auch User ohne JS die Inhalte lesen können. Im bisherigen Beispiel ist das kein Problem, da die Inhalte ersteinmal da sind und nur geschlossen werden, wenn der user den Link benützt.
Wichtig ist onclick, denn diese Anweisung sagt uns, auf wleche ID, welcher Effekt, welche Optionen angesprochen werden sollen. Im Beispiel-Link sprechen wir Effekt.toggle an, ID commentlist, Effekt slide mit Option duration und einem Zeitwert 0,5.
Als Effekte für toggle kann genauso blind oder appear verwendet werden, aber dazu mehr in der Dokumentation von scriptaculous zu effekt.toggle.
Der Code kann auf jeden beliebigen Effekt angewandt werden, dies war nur ein Beispiel, ebenso können mehrere Effekte miteinander kombiniert werden. Das Kombinieren wollen wir nun am Beispiel scrollto durchführen.

Kombination ScrollTo und SlideDown

Um diese Möglichkeit zu demonstrieren, werden wir die single.php bearbeiten. Im obersten Bereich eines Beitrags hinterlegen wir einen Link, der uns zu den Kommentaren bringt und dabei die Kommentare öffnet. Das Öffnen eines Bereiches macht man unter anderem mit SlideDown, mit toggle werden, ja nach Zustand geöffnet und geschlossen – in diesem Fall also unbrauchbar.

Ich hinterlege nun einen zusätzlichen Link unterhalb der Überschrift h3.

<a href="#commentlist" onclick="new Effect.ScrollTo('commentlist', {offset: -14}); Effect.SlideDown('commentlist', {duration:0.5}); return false;" >Zu den Kommentaren</a>

Damit entsteht ein Link „Zu den Kommentaren“, der bei Klick die beiden Effekte scrollTo und slideDown ausführt. Für Attribut href vergebe ich in diesem Fall auch nochmal die ID, damit bei deaktiviertem JavaScript trotzdem der Sprung zu den Kommentaren stattfindet.

Der zweite Effekt ist dabei nicht besonders sinnvoll, da die Liste der Kommentare in der Regel bereits offen sein sollte, es sei denn, ein Leser hat zuvor den anderen Link aus Beispiel 1 benutzt. Man kann allerdings auch direkt beim Laden des Beitrags, der Seite, mit Hilfe von onload eine Funktion aufrufen und den Bereich sofort schließen. Außerdem kann der Bereich mit Hilfe von CSS geschlossen gehalten werden. Beide Beispiele im folgenden.

Bereiche unsichtbar machen, per CSS und JS

Als erstes die einfachere Variante, per CSS. Mit Hilfe von display blenden wir den Bereich ol aus.
Dazu wieder die comments.php bearbeiten und die Zeile mit ol suchen. Diese um folgende Anweisung erweitern.

style="display: none;"

Damit sieht der Code aus dem ersten Beispiel folgendermaßen aus.


. . .
<?php if ($comments) : ?>
	<a href="#" onclick="Effect.toggle('commentlist', 'slide', {duration:0.5}); return false;">Hier Klicken</a>
	<h3 id="comments"><?php comments_number('Keine Reaktion', 'Eine Reaktion', '% Reaktionen' );?> zu “<?php the_title(); ?>”</h3>

	<ol class="commentlist" id="commentlist" style="display: none;">

	<?php foreach ($comments as $comment) : ?>

		<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">
. . .

Diese Möglichkeit hat den Nachteil, dass bei deaktiviertem JavaScript die Kommentare nie zu lesen sind. Deshalb im Firefox das AddOn NoScript installieren und damit mal die Site besuchen.

Deshalb nun die Varinate per JS. Dazu erweitern wir die header.php um ein wenig JavaScript.


<script type="text/javascript">
<!--
function init_effect() {
	Effect.SlideUp('commentlist', {duration:1});
}
//-->
</script>

Der Effekt slideUp wird benutzt und schließt den Bereich mit ID commentlist.

Die entstanden Funktion müssen wir nun nur noch aufrufen, und zwar dann, wenn die Seite geladen wird. Also onload nutzen und die Funktion init_effect aufrufen, im body-Tag.

<body onload="init_effect();">

Wenn man nun die Seite neu lädt, dann wird visuell der Bereich ol mit ID commentlist geschlossen. Ein Klick auf den Link unter der Überschrift öffnet und diesen Bereich und scrollt direkt zum ersten Kommentar.

Nachteil: Wenn man mehrer Scripte mit onload starten will, so ist dies so nicht möglich, dann muss man eine andere Lösung nutzen. Dazu vielleicht in einem weiteren Artikel mehr, wenn gewünscht und Interesse besteht.

Fazit:

Nun einfach mal die Doku von scriptaculous nutzen und spielen. Es ist eine Vielzahl von Effekten möglich. Ob das Blog damit Web 2.0 ist, weiß ich nicht, aber es ist ein Mehrwert, den man nutzen kann und wenn man es geschickt einbaut, dann ist alles auch ohne aktives JavaScript nutzbar – und das sollte sein.
Ein Hinweis, will man einen weiteren Mehrwert an den User übergeben, so kann man in einem Cookie speichern, welche Bereiche der Leser geöffnet bzw. geschlossen haben will. Beim nächsten Besuch findet dann der Leser alles in seiner beliebten Form wieder. Dazu gibt es eine Script und Tutorial von Dominik Gesthuysen.

Weiterführende Links:

Standard
Webküche

JavaScript-Editor gesucht ?

Aptana LogoDann sollte man sich mal Aptana ansehen und vielleicht in Zukunft mit diesem JS/AJAX-Editor umwerfend komfortabel JavaScript/AJAX editieren.
Die Software ist für Windows, Mac und Linux verfügbar oder kann als Plugin in Eclipse integriert werden.
Damit erweitert sich die Mächtigkeit von Eclipse wiedermal um eine tolle Fähigkeit.

Besonders gut gelungen, der Code-Assistent. Weitere Features sind Mehrsprachigkeit und eine JavaScript-Referenz.

Standard
Code, Webküche

FX.Font: mootools und Fontveränderung

Für die Fans der populären AJAX-Library moo.fx gibt es immer wieder neue Anwendungen. Darauf aufbauend gibt es das Framework mootools, mit der sich Bas Wenneker beschäftigt. Dokumentation zu mootools ist auch verfügbar und der Download läßt sich in seiner Datengröße konfigurieren.
Ein schönes Tutorial zum Thema ist eine neues Script in Zusammenhang mit mootools um die Schriftgröße der Website zu verändern. Damit wird die Veränderung ein wenig designter und ist auch für das Auge ansprechend.
Das Tutorial ist übersichtlich aufgebaut und alle nötigen Dateien (in diesem Fall mootools) und Code-Schnippsel sind dort zu finden.

Einen Screencast zum Theme mootols empfiehlt Jens Grochtdreis – F-LOG-GE

Da die kommende WordPress-Version 2.1 die JS-Library Prototype an Board hat, die leider nicht so ausführlich dokumentiert ist, wird es dann auch einfacher, derartige Spielereien, im Sinne von Web 2.0, im Theme unterzubringen und die Leser damit zu begeistern. Vielleicht packen ja die Entwickler von WP auch mootools irgendwann dazu.

Standard
Entwicklung, Webküche

Web 2.0 und die IT-Anbieter

Schon mal aufgefallen, Web 2.0 ist ein Schlagwort und in aller Munde – aller Munde – wohl nicht ganz, denn des öfteren habe ich den Eindruck, dass gerade die „Großen“ der Branche sich nicht mit den neuen Technologien auseinandersetzen. Schade, denn gerade bei den Anwendungen im Unternehmen können AJAX, API und Mashups ihre Stärke ausspielen und Browseranwendungen werden zur Bedienerwohltat und die gesparte Zeit spart Geld. Unternehmen, die global aufgestellt sein wollen, sollten sich damit auseinandersetzen. Web 2.0 mag nur ein Begriff sein, aber gibt Applikationen die Chance einfacher zu sein, nur ein Aufstellungsort, an dem die Software gepflegt werden muss, eine Zugriff für alle Nutzer. Sicher kann man das auch mit anderen Programmen machen, denke da an Serverfähige Tools, aber es gibt viele Anwendungen die einfach und gut über den Browser laufen können und sollten.

Web 2.0 – ein Begriff, der durch Tim O’Reilly und Dale Dougherty greiert wurde. Sie veranstallteten im herbst 2004 eine Konferenz, die sich mit den neuen Trends und Möglichkieten im WWW befasste. Neue Iddeen, die nach der Dotcom-Blase im Mittelpunkt stehe sollten.

AJAX – Der Browser kann auf Benutzeraktionen reagieren, ohne die gesamte Seite neu zu laden.

Mashups – Viele Anwendungen des Web 2.0 basieren auf Open Source-Software (OSS), und haben offene Schnittstellen (APIs) mit denen mehrere Angebote miteinander verknüpft werden können. Beispiel: GoogleMap im eigenen Blog darstellen.

Der Trend sollte als Herausforderung gesehen werden. Besonders im Bereich Standardisierung, offener Datenaustausch und einfacher Zugriff eine Rolle spielen müssen Zeichensätze, Sprache, Optik und Zugriffsberechtigung geklärt werden. Probleme mit der Applikation, lokal, gibt es nicht mehr, was einen enormen Pflegeaufwand in Unternehmen bedeutet. Damit können Kosten gesenkt werden. Die verwendete Plattform ist egal, ich muss nicht für verschiedene Betriebssysteme entwickeln, geschweige denn verschiedene Versionen beachten. Der Versionsstand der Applikation ist überall gleich.
Mietsoftware wird im IT-Bereich immer populärer, und unter dem Begriff SaaS (Software as a Service) gehört es zu den Begriffen des Web 2.0-Trends. Allerdings sehen Beobachter darin keine Zukunft, da oft komplizierte Lösungen gebraucht werden. Aber, wollen nicht gerade Firmen die Software vereinfachen, die Bedienung auf die Punkte beschränken, die vom Kunden benötigt werden. Der iPod macht es vor, er ist erfolgreich, auch ohne Überflutung des Nutzers mit Möglichkeiten. Gerade im beruflichen Umfeld müssen immer mehr Programme beherrscht werden, da ist man dankbar für eine Vereinfachung und besonders im SAP-Bereich höre ich diese Anforderung ständig vom Anwender.

SaaS – Provider stellen ihren Usern Applikationen bereit, die sie hosten und sich auf Zeitbasis (monatlich) bezahlen lassen. Verbesserungsvorschläge von Kunden fließen in das Produkt ein und alle Anwender profitieren davon.

Das Internet als Plattform für Applikationen, als Betriebs- und Kommunikationsplattform ist auch für Unternehmen interessant und besonders der Bereich Vertrieb, wo viele Mitarbeiter an unterschiedlichen Standorten einen einfachen und einheitlichen Zugriff auf gemeinsame Daten benötigen, hätte viele Vorteile.
Aber nicht nur der praktische Nutzen steigt mit Web 2.0 Technologien, sondern viele Applikationen könnten eine Veredelung und benutzerspezifische Bedienung gut gebrauchen. Dazu ist beispielsweise AJAX sehr gut geeignet. Populäre Seiten mit Web 2.0 Technologien, wie Flickr und Ning oder personalisierte Startseiten aller Google und Pageflakes, machen dies vor. Wäre doch schön, wenn man die Startseite des Unternehmens für sich als Mitarbeiter so konfigurieren könnte, dass ich die Informationen sehen, die ich benötige und nicht die, die Mitarbeiter für relevant halten.
Aber Web 2.0 bedeutet auch, interaktive Anreicherung der Inhalte durch User, wie es zum Beispiel Wikipedia vormacht. Auch dies sind Ansätze, die einigen Unternehmen gut tun würden. Nicht nur ein einfaches Ideenmanagement, sondern interaktiv gestalten und so die Firma und den Mitarbeiter bereichern.
Die Idee der personalisierten Startseite könnte im Unternehmen eine große Rolle spielen, hier können Gimmicks, wie die Anwesenheit von Mitarbeitern, bereitgestellt werden. Das eMail-Aufkommen könnte gesengt werden und Projekte, Arbeitsstände können mit vielen Kollegen geteilt werden.

RSS – Really Simple Syndication ist eine Möglichkeit zur automatischen Verbreitung von Inhalten.

Ähnliche Gedanken gibt es zum Thema RSS zu sagen. Auch davon können Unternehmen profitieren. Aber dazu habe ich mich in einem älteren Artikel schon mal ausgelassen – „RSS im Unternehmen“. Viele Hintergründe und INformationen zum Thema RSS gibt Alp Uçkan in seinem Artikel „Was ist RSS“.

Natürlich erinnern sich noch alle an die Dotcom-Blase und Dienstleister haben Angst vor falsch investierten Geldern. Eine abwertende Haltung ist zu spüren und damit stockt das Angebot im IT-Bereich. Ich wünsche mir eine schnelle Integration der Techniken in unsere Unternehmensanwendungen und damit eine Erleichterung der Tätigkeiten am Arbeitsplatz.

Standard