Peruns Weblog - Webwork und Internet


Ist das private Weblog von Vladimir Simovic mit Berichten zum Thema Webwork und Internet. Ich wohne in Köln und arbeite als freier Webworker, Blogger und Autor.



Die Kategorie "PHP-JS"

Hier sind alle Beiträge aufgelistet, die in die Kategorie PHP-JS einsortiert wurden. Die Beschreibung dieser Kategorie lautet:

Alles um die serverbasierte Scriptsprache PHP und der Clientbasierte Scriptsprache Javascript

Du hast die Möglichkeit den RSS-Feed speziell nur für diese Kategorie zu abonnieren.

Homer Simpson macht CSS

Von Perun am 06. Mai 2008 um 08:20

Homer Simpson mit CSS 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: ein kleiner WYSIWYG-Editor

Von Perun am 19. März 2008 um 01:55

NicEdit in Aktion 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)

Druckvorschau, CSS und die Nutzer

Von Perun am 16. Dezember 2007 um 18:04

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…)

Bilder schöner präsentieren

Von Perun am 09. Mai 2007 um 15:57

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

Javascript: Bibliotheken, Frameworks und IDE

Von Perun am 26. August 2006 um 15:53

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.

Liste mit Linklisten

Von Perun am 07. Mai 2006 um 01:41

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

Hasenjagd und Javascript

Von Perun am 19. April 2006 um 19:22

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

1 2 3 ... 5 »