Mit ein paar Zeilen mehr im Plugin läufts auch mit beliebig vielen Objekten. So funktionierts:

Die Anforderung

...ist alt bekannt. Folgendes HTML liegt vor:

<div class="test">

  Wir sind <strong>wichtig</strong>

</div>

Wenn man dieses HTML auslesen will und nur weiß, dass das Zielelement die Klasse test hat, schlägt folgender Versuch fehl:

$('.test').html(); //funktioniert nicht

Funktioniert nicht, weil das Ergebnis nicht komplett ist.

Wir sind <strong>wichtig</strong>

Mein kleines Plugin entireHtml hilft weiter, und liefert wie erwartet das komplette HTML. So wirds allerdings nervig:

<div class="test">

  Wir sind <strong>wichtig</strong>

</div>

<div class="test">

  und das ist <strong>schön</strong>.

</div>

Die Funktion entireHtml liefert nur das HTML des ersten divs zurück.

Die Lösung

Im Plugin stehen alle Objekte in der Variable this zur Verfügung. Das Plugin muss, wenn mehr als ein Element im Stack liegt, jedes Element durchgehen und das komplette HTML zurückgeben.

Und ohne große Worte folgt jetzt das komplette Plugin:

/*
 *  entireHtml
 *  Ein kleines, nettes Plugin um das komplette HTML eines Selectors zu bekommen.
 *
 *  Mehr Infos unter http://www.interaktionsdesigner.de
 */

(function($) {
  jQuery.fn.entireHtml = function() {
    if(this.length == 1) {
      return this.clone().wrap('<div></div>').parent().html();
    }
    else {
      var html = '';
      $(this).each(function() {
        html+= $(this).entireHtml();
      });
      return html;
    }
  }
})(jQuery);

Fazit

Schön, oder? Funktioniert wie erwartet. Noch eine Antwort: Wozu braucht man das? Im Moment arbeiten wir an einem interaktiven Tool um PDFs zu erstellen. Das Formular kommt aus der Extension Powermail für TYPO3 und wird von einem Redakteursteam gepflegt. Im Frontend sollen aber bestimmte Optionen erst auf Nachfrage sichtbar sein.

Redakteur fügt also Dateiuploadfelder hinzu und speichert. jQuery "merkt" das, nimmt das komplette HTML raus, packt es in eine Box, versteckt die Felder und legt einen Link ala "Klicken Sie hier, wenn Sie eine Datei hochladen möchten".

Ich sach nur: Kundenprojekte...

Marker, wie in TYPO3 mit "ausgedachten" Zeichen zu umgeben, um anschließend eine neue Syntax für Schleifen und Bedingungen zu lernen, finde ich zu kompliziert. Außerdem habe ich mich hier im Blog schon einmal positiv über die Kurzschreibweisen von PHP geäußert. Da ist es natürlich nur noch ein kleiner Schritt zu einer funktionalen Klasse, welche ein PHP Template mit Inhalt befüllt.

Im folgenden Beitrag stelle ich meine einfach zu nutzende Möglichkeit vor. Es ist mein erster Ansatz Richtung Template und ich freue mich sehr über Kommentare und Verbesserungsvorschläge!

Vorüberlegungen

Viele Projekte münden in eine variable HTML Ansicht. Dabei muss der Kunde keine Templates erstellen, er hat nur viele verschiedene Anforderungen an ein und die selben Daten. Der Entwickler ist fähig, PHP Scripte zu schreiben und hat Spaß daran. Warum also keine PHP Templates?

Es ist natürlich gefährlich, was die Trennung von Layout und Logik angeht und erfordert an dieser Stelle besondere Vorsicht, aber belohnt wird man durch eine sehr schnelle Umsetzung und sehr variable Einsatzmöglichkeiten.

Das Template

Das PHP Template greift auf die Variablen des Objektes zu, über die Variable $this. Ein Beispiel:

<h1><?=$this->title?></h1>

<? if(isset($this->subtitle)): ?><h2><?=$this->subtitle?></h2><? endif; ?>

<p><?=$this->text?></p>

<small><?=$this->footer?></small>

Der Aufruf

Um im PHP Script dieses Template zu benutzen muss nur ein neues Template Objekt erzeugt werden:

$content = array(

  "title" => "Hallo Welt",

  "subtitle" => "Die Welt zu Gast im Template",

  "text" => "Lorem Ipsum usw."

);

include("class.template.0.2.php");

$output = new template("einfaches-template.php", $content);

echo $output;

Alternativen

Ich habe versucht die Klasse so einfach und logisch wie möglich aufzubauen. So können Daten auch einzeln während der Laufzeit des Programms übergeben werden:

$output = new template("einfaches-template.php");

$output->title = "Hallo Welt 2";

$output->text = "Ich bin auch möglich.";

echo $output;

Automatische Verarbeitung

Um eine automatische Vearbeitung der Marker zu ermöglichen merkt sich die Klasse die angeforderten Schlüssel! Nach dem Parsen kann mit der Funktion $output->keys() ein Array der verwendeten Schlüssel zurückgegeben werden. Dabei akzeptiert die Funktion zwei Parameter: 'set' oder 'unset'. Erweitert man also das zweite Beispiel um eine Zeile:

echo "<hr><pre>".print_r($output->keys(), 1)."</pre>";

Array
(
    [0] => title
    [1] => text
)

Und mit dem Parameter 'unset' dann:

Array
(
    [0] => footer
)

Sehr praktisch für die automatische Information bei der Verwendung von neuen Templates.

Dynamische Erweiterung

Aktuell hatten wir in der Agentur ein Projekt, in dem die Anforderung darin bestand, ein bestimmtes Wort immer kursiv darzustellen. Mit meiner Template Klasse habe ich, wie ich finde, einen sehr eleganten Weg gefunden dies zu realisieren ohne die Aktualisierbarkeit der Klasse zu verlieren. Zum Beispiel das Wort Welt. Der Trick liegt in einer neuen Klasse, welche die Funktion $this->afterParse() überschreibt:

class custom_template extends template {

  function afterParse() {

  [tab]$this->_output = str_replace("Welt", "<i>Welt</i>", $this->_output);

  }  

}

$output = new custom_template("einfaches-template.php");

Funktionen, die überschrieben werden wollen sind:
function afterParse() - aufgerufen nach dem Parsen. Der geparste Inhalt steht in $this->_output.
function beforeParse() - wird aufgerufen bevor das Parsen beginnt. Alle verfügbaren Variablen stehen in $this->_data.
function out($value, $set) - wird aufgerufen wenn ein Platzhalter im Template ersetzt werden soll. In dieser Funktion definiert man, was bei nicht vorhandenen Inhalten ausgegeben werden soll (dann steht $set auf false). Die Standardfunktion sieht so aus:

function out($value, $set) {

  if(!$set)

  [tab]return '{'.$value.'?}';

  

  return $value;

}

Einschränkungen

Interne Variablen beginnen in der Klasse immer mit einem Unterstrich. Deshalb dürfen diese weder gesetzt, noch im Template abgefragt werden. Beides führt zu einer Fehlermeldung.

Ansonsten habe ich noch keine Einschränkungen entdeckt. Es sind viele interessante Dinge möglich, wie Schleifen, Abfragen, dynamische Reaktion auf Inhalte usw. Das verleitet natürlich zur Vermischung von Logik und Layout. Bitte immer doppelt nachdenken, wo eine Funktion hin gehört.

Fazit

Ich bin von meiner Lösung recht begeistert und empfinde die Arbeit mit dieser Klasse als sehr angenehm. Über Hinweise und Kommentare freue ich mich sehr! Die komplette Klasse kann man sich hier ansehen oder als Zip Datei herunterladen. Natürlich gebe ich keine Garantie für die korrekte Funktionsweise, wünsche aber viel Spaß beim Ausprobieren und Erweitern!

Wenn jemand Einsatzmöglichkeiten in seinem eigenen Projekt dafür sieht, dann ist die Vorraussetzung eine kurze Meldung bei mir, vielen Dank!

Kann Google in die Zukunft sehen...
...oder stecken sie noch in der Vergangenheit?

via GoogleWatchBlog

Enterprise vs. Star Wars

via Macadelic

Pulp Fiction mal anders

via Arbeitskollege (ein Hoch auf ein internes Blog)

Michael Sholk Design
Das ist mal ein entspanntes Poster. Sehr gut. Auch die anderen Arbeiten von ihm lohnen einen Blick.

Gewinnspiel im Designblog
Und wenn ich eh schon dabei bin lauter Links zu sammeln, dann kann ich auch gleich auf das coole Gewinnspiel im Designblog hinweisen, bei dem es einen tollen Kamin zu gewinnen gibt. Der würde sich in meinem Wohnzimmer gut machen. Also, Trackback! Arbeite für mich. Und alle die den Blog noch nicht kennen, den sei ein Blick wärmstens empfohlen.

Zum Beispiel gibt es erhellende Artikel über das neue Logo des Office of Government Commerce. Ich weiß es ist schon alt, lustig bleibt es aber trotzdem.

Neue Einträge im Feedreader: 0. Auf ein neues Morgen früh.

Ohne viele Worte:

Gefunden im jQuery Blog

Dazu empfielt sich natürlich der passende iPod und für alle die zufälliger Weise keinen Nike Schuh besitzen (so wie ich), eine universelle Halterung. Die Installation ist kinderleicht (praktisch überhaupt nicht vorhanden - einfach ran und los) und der Sensor hält gut am Fuß.

Jetzt folgen ein paar Tipps die mir beim Einstieg geholfen haben.

Aufwärmen und Dehnen

Ich fange mit ca. 1,5km ehr schnellem laufen an bis ich im Park an einer schönen Stelle zum dehnen angekommen bin. Aus dem Sportunterricht erinnert man sich ja noch an einige Dehnübungen, die kann man erweitern und ausbauen, wichtig dabei ist vorallem den Rücken gerade zu lassen und nicht zu federn sondern die Muskeln zu strecken. Und vorsicht mit den Sehnen, die sind empfindlich - hat mir ein vorbeieilender Läufer zugerufen. Netter Tipp.

Lauf-ABC

Diese Sammlung an Übungen lassen sich super in den Lauf einbauen und bringen Abwechslung und trainieren die Fußgelenke. Außerdem helfen sie länger durchzuhalten und machen Spaß!
Ich empfehle immer eine Übung (beliebige Reihenfolge) durchzuführen und sobald man sich davon erholt hat die nächste. Es ist ratsam sich einen Fixpunkt zu suchen bis wohin man rennt und die Strecke nicht zu übertreiben.

Ausdauer und Kraft

Anschließend laufe ich ein paar Kilometer, je nach Stimmung und Wetterlage, einfach gerade aus bis es keinen Spaß mehr macht. Danach kann man etwa alle fünf Minuten Pausen einlegen für Liegestütz, Sittups und sonstigen Übungen die einem einfallen.

Man trainiert damit nicht nur die Beine und ich empfinde es als sehr entspannend nach, z.B. Liegestützen weiter zu laufen.

Endspurt

Die letzten 100 Meter dann noch einen kurzen Sprint und nicht vergessen mit einem Siegessprung über die Ziellinie zu fliegen! Geschafft!

Das macht Spaß und gibt neue Kraft. Außerdem hat man kein schlechtes Gewissen weil man ja nicht den ganzen Tag vor dem Computer verbracht hat.

Fazit und Regeneration

Man sollte sich schon eine halbe Stunde entspannen, duschen, Feeds oder Zeitung lesen und dazu Obst essen und eine Magnesiumtablette trinken; gegen Krämpfe und Muskelschmerzen.

Beim Laufen sollte man auch die anderen Jogger anlächeln oder aufmunternd zunicken. Für mehr Kraft und eine große, zusammenhaltende Community!

Abschließend sei noch gesagt das ich kein Sportlehrer bin und jeder auf seinen eigenen Körper hören muss.

Bei Pixelgraphix wurde ein W3C Stand Alone Validator vorgestellt. Das ist doch mal ein praktisches Tool. Einfach eine Datei oder einen Link aus dem bevorzugten Browser auf das Icon im Dock ziehen und die Validierung wird gestartet.

In den Kommentaren werden auch diverse Firefox Erweiterungen vorgeschlagen, aber ich habe das Gefühl der Fuchs hat schon schwer zu ackern mit Firebug, Web Developer, Cache Status, Screengrab, Firecookie, Pencil, Rainbow for Firebug, Screengrab und TYPO3 Backend (das waren lauter Empfehlungen).

Praktisch ist auch das sich ein neues Fenster öffnet sobald eine weitere Datei zur Validierung gebracht wird. Es funktionieren Links vom lokalen Webserver genau so wie Dateien aus dem Dateisystem. Super cool.

Hier gehts zum download.

Einbindung

Um in den Genuss dieses wahnsinnigen Effekts zu kommen, wird die aktuelle jQuery Version benötigt (oder das Dimension Plugin), dann die Datei jquery.shadow.js und jquery.shadow.css. Anschließend den Überschriften zuweisen:

$(document).ready(function() {
  $("h3.shadow").shadow();
});

Optionen

Es gibt zwei mögliche Optionen: Die Farbe des Schatten und die zugewiesene Klasse:

$(document).ready(function() {
  $("h3.shadow").shadow({
    class: "meinSchatten",
    color: "red"
  });
});

Arbeitsweise

Das Plugin umschließt das gewählte Element mit einem Div Container (mit der Klasse shadowWrap) und weißt diesem die Höhe des gewählten Elements zu. Anschließend wird das Element kopiert (clone()) und per CSS in den Hintergrund gerückt.
Damit der gewünschte Effekt entsteht müssen die Elemente innerhalb des Divs absolut positioniert sein. Das könnte bei verschiedenen Konstrukten zu unerwarteten Ergebnissen führen. Das sollte beachtet werden.

Download

Das Plugin und die CSS Datei gibt es als praktische ZIP Datei!

Bekanntermaßen ist bei Mac OS X über das Terminal ja alles möglich. Wer iTunes beendet und folgende Zeile in sein Terminal eingibt, ist die Pfeile los:

defaults write com.apple.iTunes show-store-arrow-links -bool FALSE

Mit TRUE am Ende lassen sich die Pfeile wiederherstellen, der Tipp kommt von den Mac OS X Hints.

Und nach getaner Arbeit lohnt sich ein Blick auf FEIST. Ein kleiner, lustiger Ball der durch eine grafisch sehr gelungene Welt rennt. Könnte mal wieder ein Spiel sein das Spaß macht zu spielen. Neben X Moto natürlich.

Via blog.tice.de.

Und René hält einem dann auch noch vom weiterarbeiten ab: Sehr lustige Fragen und immerhin überlebe ich 3 Sekunden länger als er; bei seinem ersten Versuch.

I could survive for 1 minute, 16 seconds chained to a bunk bed with a velociraptor

Ich würde sagen das sind die Themen die die Branche interessieren!

Bei Dr. Web gibt es eine interessante Liste mit Erweiterungen für den nützlichen Käfer, die einen Blick definitiv wert ist. Im Moment probiere ich noch mit FirePHP rum - interessant, aber der sträubt sich noch gegen meine Versuche informationen aus ihm rauszukriegen.

Bis dahin bleibt nur zu sagen: Guckt euch diese Liste an, und wenn ihr Firebug noch nicht kennt und/oder nutzt, dann ändert das!

Die Version 1.1.12 behebt einige Fehler und bietet eine ganze Liste Neuerungen. Da macht das Arbeiten mit Typoscript doch gleich wieder mehr Spaß.

Und einen wertvollen Tipp konnte er mir auch geben: Mit ein paar Zeilen Typoscript lässt sich das lästige Cache leeren nach jeder kleinen Änderung per FTP verhindern.

Typoscript auslagern

Mit der bekannten Zeile

<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/#YourPath/#YourFile.ts">

lagern wir die Konfiguration aus. Soweit so gut.

Cache leeren verhindern

Davor fügen wir eine Bedingung ein, welche prüft ob ein Backend Benutzer angemeldet ist:

[globalVar = TSFE : beUserLogin> 0]
config.no_cache = 1
[global]

Dazu gehört in das TSConfig Feld des Benutzers noch die folgende Zeile:

admPanel.override.tsdebug.forceTemplateParsing = 1

So einfach! Bleibt mir noch zu sagen: Vielen Dank für die netten Mails, die guten Tipps und diese herrliche Erweiterungen für das liebliche Coda. Ich bin gespannt auf die nächsten Versionen!

Mehr Informationen: Typoscript syntax highlighting für Coda.