Peruns Weblog - Webwork und Internet

Was man mit CSS alles machen kann zeigt die Demo von Roman Cortes. Er hat mit jede Menge div-Elementen und CSS das Portrait von Homer Simpson gezeichnet. Einfach mal in den Quelltext schauen.

Ned Batchelder hat die Demo erweitert und daraus mit ein bisschen jQuery eine Animation erstellt.

Vielen Dank an Sahanya für den Hinweis.

NicEdit ist zwar ein kleiner, aber dennoch leistungsfähiger WYSIWYG-Editor. Das Einbauen ist sehr einfach, man muss das Javascript in seiner Website einbauen. Dazu benutzt man entweder den vorbereiteten Code-Schnippsel, dann wird auf das Javascript auf der Hersteller-Website zurückgegriffen oder man speichert es auf dem eigenen Webspace ab.

Wenn das Script eingebaut ist, werden alle Textbereiche bzw. Textboxen (textarea) durch einen bearbeiteten Bereich ersetzt. Doch das ist nicht alles. Im Prinzip kann man auch div-Blöcke oder Absätze mit so einem Editor beglücken, einfach id="myNicPanel" zuweisen.

Man könnte jetzt stundenlang über die Vor- und Nachteile von WYSIWYG-Editoren diskutieren, ich persönlich arbeite auch innerhalb von WordPress lieber mit den Quciktags bzw. in der Code-Ansicht. Aber wenn WYSIWYG gewünscht wird, warum nicht auf schon eine vorgefertigte Lösung setzen.

Ich habe es vorhin hier im Weblog getestet und es funktioniert so weit gut. Es werden dann ca. 35 KB mehr geladen, aber die Qualität des ausgelieferten Codes ist OK.

Via: Jens (ICQ)

Seit sehr langer Zeit setze ich hier im Weblog eine CSS-Datei für die Druckausgabe, hier der Code aus dem entsprechenden Bereich:

<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Das Ergebnis ist jedem halbwegs erfahrenem Webworker klar. Der Browser liest beide CSS-Dateien ein [1] und je nach dem im welchen Modus man sich befindet (z.B. Druckvorschau) wird die entsprechende CSS-Datei eingesetzt. Somit kann man z.B. für die Druckausgabe eine optimiertes Dokument ausgeben lassen. Hier in diesem Weblog blende ich so gut wie alles was nicht direkt zum Inhalt gehört aus. Einfach mal im Browser die Druckvorschau aufrufen oder auf den Druckvorschau-Link klicken. (weiterlesen…)

Eins der Themengebiete, vor dem ich mich bis neulich erfolgreich gedrückt habe, war das Thema Lightbox. Für die die es nicht wissen: es geht u.a. darum die Präsentation der Bilder durch Javascript zu verschönern und mit einfachen Mitteln rudimentäre Galerien mit netten Effekten zu realisieren.

Als ich das Layout für Herr der Ringe-Weblog erstellt hatte, habe ich mich entschlossen auch dieses Thema anzugehen, da ich das neue Weblog u.a. deswegen gestartet habe um mich mit neuen Themen zu beschäftigen. Für Wordpress-Blogs gibt es jede Menge Lightbox-Plugins und ich habe vier getestet. Am meisten hat mir aber Thickbox zugesagt, es ist schlank, leicht anzupassen und mein Bauch hat gesagt: "nimm dieses Plugin" :-).

Wie alle Plugins ist auch dieses einfach zu installieren: einfach den Ordner hochladen und das Plugin aktivieren. Die Anpassungen nimmt man entweder in der CSS-Datei (thickbox.css) vor oder in der Javascript-Datei (thickbox.js) wenn man z.B. die Bezeichnungen anpassen oder eindeutschen will.

Wenn man dann den Lightbox bei den Bildern einfügen will, dann muss man nur class="thickbox" einfügen:

<a href="..." class="thickbox" title="..."><img src="..." alt="..." /></a>

Und schon hat man einen kleinen und netten JS-Effekt wenn man das Bild aufruft und der Wert bzw. der Inhalt des title-Attributs dient als die sichtbare Beschreibung des Bildes. Hat man mehrere Bilder zu einem Thema innerhalb des Beitrages und man will diese Bilder zu einer Art Galerie verknüpfen, dann schaut der Code folgendermaßen aus:

<a href="..." class="thickbox" title="..." rel="galerie-name"><img src="..." alt="..." /></a>

Mit dem Attribut rel und dem eindeutigen Wert (der bei den zu verknüpfenenden Bildern identisch sein muss) erreicht man, dass das Skript die einzelnen Bilder durch ein "Weiter"- bzw. "Zurück"-Link verbindet. Hier zwei Beispiele: Beispiel 1 und Beispiel 2

Hier einige Links zum Thema Javascript & Co. welche ich in den letzten Monaten gesammelt habe:

Prototype

Prototype is a JavaScript framework that aims to ease development of dynamic web applications.

qooxdoo

qooxdoo is an advanced open-source JavaScript-based GUI framework.

jQuery

New Wave Javascript: jQuery is a new type of Javascript library. It is not a huge, bloated, framework promising the best in AJAX - nor is just a set of needlessly complex enhancements… Nachtrag: jQuery für Wordpress.

moo.fx

moo.fx is a superlightweight, ultratiny, megasmall javascript effects library, written with prototype.js.

script.aculo.us

Effects and controls library built on Prototype.

Rico

An open-source Javascript library for creating rich internet applications (basiert auf Prototype).

Yahoo! User Interface Library

The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX.

Aptana - the WEB IDE

Aptana is a robust, JavaScript-focused IDE for building dynamic web applications.

Ich bin gerade dabei meinen Lesezeichen-Ordner "Abarbeiten" auszumisten, daher hier mal eine Liste mit Linklisten zu diversen Themen rund um den Bereich Webwork:

• The Web Developer's Handbook
• Eine Liste mit Online-Generatoren (von CSS bis XML)
• Internet in Zahlen (Internet-Nutzung in Zahlen)
• Tutorialsammlung (von Ajax bis XML)
• CSS- und Design-Galerien
• Schriften und Typographie
• Symbole, Buttons und Icons zum Download

Ein kleines aber feines Browserspiel für Zwischendurch hat der "Man in Blue" entwickelt: Bunny Hunt. Zutaten:

• XHTML 1.0
• CSS
• Jede Menge Javascript
• Nix Flash