Vorbereiten von Zope & Plone

Zope-Debugging-Modus

Zope im Debug-Modus auszuführen, ermöglicht es, Änderungen an der Oberfläche der Seite sofort wahrzunehmen. Es gibt verschiedene Wege, dies anzuschalten:

• in etc/zope.conf setzen Sie:
  

   debug-mode on

  danach starten Sie Zope mit folgenden Kommando neu (um Fehlermeldungen in Ihrer Konsole anzuzeigen)
  

  zope_instance/bin/runzope 

• Oder starten Sie Zope folgendermaßen:
  

  zopectl fg

• Falls Sie das Windows-Installationsprogramm für Plone benutzt haben, gibt es dort im Plone-Programm-Menü eine Option zum Ausführen im Debug-Modus.

Erneutes Laden von Produkten

Falls Sie nicht den Debug-Modus benutzen, gibt es dennoch einen Weg, Ihre Änderungen am Oberflächenprodukt sichtbar zu machen, indem Sie die Option zum erneuten Laden benutzen. Um diese Option anzuschalten, benötigen Sie eine Datei refresh.txt in Ihrem Produktverzeichnis (Das Skript in DIYPloneStyle zum Erstellen eines Produktgerüstes erstellt dieses standardmäßig). 

• Gehen Sie im ZMI zum Control Panel -> Product Management -> Name Ihres Produktes
• Laden Sie das Refresh-Register und klicken Sie die Schaltfläche 'Refresh this Product button', um das Produkt neu zu laden.

CSS Resource Registry  

Um die Leistungsfähigkeit einer Plone-Seite zu verbessern, führt portal_css alle Stylesheets für eine Seite in genau eine CSS-Datei zusammen. Um Ihnen die Fehlersuche (Debugging) in dem angepaßten CSS einfacher zu gestalten, können Sie seinen Debug-Modus benutzen, wodurch dieses Zusammenführen vermieden wird:

• Gehen Sie im ZMI zu Plone Site -> portal_css
  
• Haken Sie Box für den Debug-Modus an und drücken Sie die Speichern-Schaltfläche.

DOM Inspektor

Document Object Model oder kurz DOM ist ein Begriff, der dazu benutzt wird zu beschreiben, wie eine HTML-Seite (oder ein XML-Dokument) strukturiert ist und stellt ein API (API (für engl. application programming interface, deutsch: „Schnittstelle zur Anwendungsprogrammierung“) für den Zugriff bereit. Der Browser setzt den RAW-Text der HTML-/XML-Datei in ein DOM um und benutzt es dann, um darauf CSS und andere Transformationen anzuwenden.

So, warum ist dies nützlich für uns? Das HTML und CSS in der Standard-Oberfläche von Plone erledigt eine ganze Menge Dinge gut – die Kehrseite von dieser ganzen Mächtigkeit ist, dass es kompliziert ist. So wollen Sie machmal nur  ein einfaches Element verändern, aber Sie wissen nicht, wie Sie einen Griff an dieses Objekt bekommen, um das entsprechende CSS zu schreiben.

Dies ist der Punkt, wo der DOM-Inspektor in's Spiel kommt...... Sie können die Struktur einer Seite in einem Baum sehen und bekommen visuelle Rückmeldungen, während Sie alle Elemente durchlaufen. Sobald Sie es gefunden haben, können  Sie einfach all die Attribute wie Klassen, ID und Elternelemente herausfinden.

Firefox DOM-Inspektor

Falls Sie Firefox installieren, achten Sie darauf, dass Sie die Option für die Web-Developer-Tools im Menü für die angepaßte Installation (custom installation) aktivieren.

Firefox wird mit einem sehr nützlichen DOM-Inspektor-Werkzeug ausgeliefert. Um es zu öffnen, gehen Sie in das Menü Extras und schauen Sie dort weiter unten nach ihm. Alternativ pressen Sie unter Windows im Firefox die Tasten Strg + Umschalt + I oder auf dem Mac im Firefox Apfeltaste + Umschalt + I.

Das erste, was Sie wahrscheinlich tun müssen, ist, den DOM-Inspektor zu maximieren – es funktioniert viel besser mit einer großen Ansicht.

Danach gehen Sie in das Menü Datei und wählen dort "URL inspizieren" aus. Geben Sie die Adresse der Seite ein, die Sie  inspizieren wollen und die Seite wird in den unteren Ausschnitt des DOM-Inspektors geladen.

Es gibt zwei Hauptwege, den Inspektor zu benutzen:

Durchlaufen des Baumes

In dem Baumausschnitt oben links benutzen Sie das Symbol +, um jeden Knoten zu expandieren. Beginnend mit #document, dann HTML und BODY legen Sie mehr und mehr Objekte offen, wenn Sie expandieren. Beachten Sie, dass  es dort Spalten für id und class gibt, um Ihnen dabei zu helfen herauszufinden, wo Sie sind.

Während Sie auf jedes Element klicken, sehen Sie das entsprechende visuelle Element unten in dem Browser-Abschnitt blinken.

Nun lassen Sie uns die Navigationsbaum-Elemente finden:

• Expandieren Sie das DIV mit der id visual-portal-wrapper (der Plone spezifische Container für die ganze Seite).

• Finden und expandieren Sie TABLE mit der id portal-columns (dies enthält den zentralen Teil der Seite).

• Expandieren Sie TBODY, TR und dann TD mit der id portal-column-one (linke spalte).

• Abschließend expandieren Sie das DIV mit der class visualPadding, um die Portlet-Objekte einschließlich des Portlet-Navigationsbaums offenzulegen.

Auswahl von Elementen durch Klicken

Gehen Sie in das Menü Suchen und wählen Sie "Element durch Klick auswählen".

Jetzt gehen Sie in den Browser-Abschnitt und klicken auf das Element, das Sie im Baum hervorgehoben haben wollen.

Um ein anderes Element zu finden, müssen Sie den ersten Schritt wiederholen.

Web-Developer-Erweiterung für Firefox

Die Web-Developer-Erweiterung fügt Ihrem Firefox-Browser eine sehr mächtige und nützliche Symbolleiste hinzu, die wirklich bei der Entwicklung eine Plone-Oberfläche hilft.

Hier sind einige der vielen Funktionen, die sie bereit stellt:

• Sofortiges Bearbeiten des CSS - keine Notwendigkeit, Veränderungen im ZMI oder im Dateisystem vorzunehmen und erneut zu laden.
• Anzeige von Stilinformationen - klicken auf Elemente auf der Seite bringt die entsprechenden CSS-Deklarationen zur Anzeige.
• Abschalten aller/spezieller Stylesheets
• Anwenden von neuen Stylesheets
  
• Anzeige der Umrisse aller/spezieller Elemente in der Seite (z.B. alle <div> oder <ul>)
  
• Erstellen von einer Liste aller Bilder auf der Seite.
• Ändern der Größe des Browserfensters zu üblicher oder kundenspezifischer Größe, z.B. 1024 x 768, 800 x 600 etc.
• Anzeige detailierter Informationen zu Formularen, Links, Meta-Tags, HTTP-Headern, Dokumentengröße und mehr.
• Validieren: von HTML / CSS  / RSS / Zugänglichkeit (Accessibility) / Links
• Maßstab - Messung, wie groß/weit Teile einer Seite sind. Keine Notwendigkeit zu schätzen, wieviele Pixel Ihr CSS weiterhin außerhalb ist!

FireBug-Erweiterung für Firefox

FireBug ist der DOM-Inspektor mit Steroiden und , and is irrsinnig nützlich für das Inspizieren von HTML, CSS und Javaskript.

Sobald sie installiert ist, befindet sie sich still in der Statusleiste von Firefox (unterhalb des Browserfensters). Jedesmal, wenn eine Seite geladen wird, prüft sie sie auf Fehler und protokolliert jeden Fehler, den sie findet in Ihrer Konsole. Falls die Seite keine Fehler hat, zeigt sie ein grünes Hakensymbol, andernfalls zeigt sie ein rotes Kreuz zusammen mit der Anzahl der gefundenen Fehler.

Um all die tollen Funktionen zu nutzen, klicken Sie einfach auf eins dieser Symbole, um den FireBug-Abschnitt anzuzeigen:

Erklärung:

1. FireBug-Symbol (grüner Haken)
2. Inspektor-Register - benutzt um vom Konsolenmodus (Auflistung von Fehlern und Warnungen) zum Inspektionsmodus zu wechseln.
3. Inspektionsschaltfläche - benutzen Sie dies, um das Auswählen von Elementen mit der Maus an-/abzuschalten. Wenn dies angeschaltet ist, können Sie über die Elemente im Browserabschnitt schweben (mit der Maus) und Elemente auswählen, die Sie inspizieren wollen.
4. Register Source & Style - wechseln Sie zwischen diesen, um das HTML oder die CSS-Attribute für die ausgewählten Elemente anzusehen.

Von hier aus können Sie sich die Fehler in der Konsole anzeigen lassen oder zum Inspektor-Register wechseln, um sich das HTML der Seite interaktiv anzeigen zu lassen. Klicken Sie auf die Pfeilsymbole, um jeden Tag zu expandieren/einzuklappen und durchqueren Sie sie bis zu dem benötigten Element. Alternativ nutzen Sie die Inspektor-Schaltfläche, um das Element in der Webseite selbst auszuwählen.

View-Source-Chart-Erweiterung für Firefox

Die View-Source-Chart-Erweiterung macht das Verstehen der Struktur eines HTML-Dokumentes so viel einfacher.

Sobald sie installiert ist, klicken Sie mit der rechten Maustaste einfach irgendwo auf der Seite, die Sie ansehen wollen und  schauen Sie im Kontextmenü nach "View Source Chart"". Dies wird das Schaubild (Diagramm) (der Seite) in ein neues Fenster laden:

Sie werden bemerken, dass verschiedene Elemente zur leichteren Lesbarkeite unterschiedliche Farben haben und dass jeder Container zusammengeklappt werden kann, wenn Sie darauf klicken, was Ihnen wirklich dabei helfen kann, die Elemente zu isolieren, an denen Sie interessiert sind. 

Nun, wo Sie die grundlegenden Werkzeuge für das Suchen nach Klassen und IDs von Elementen, die Sie verändern wollen, haben, können wir damit fortfahren, Plone ein neues Aussehen zu verpassen.