RE-Design

Top Secret – Grundschule Wesseling

admin — Fri, 26 Feb 2010 14:00:43 +0000

Bis gestern war ich 2 Tage für den Transparenz e.V. in der Jugendherberge in Bad Münstereifel tätig. Dort leitete ich das Top-Secret-Programm für eine 4. Klasse einer katholischen Grundschule aus Wesseling. Hierbei handelt es sich um ein Spielepädagogisches Programm in dem die Kinder viele Spiel und Aufgaben bekommen zu Thema: Wir werden Detektive!

Die Kinder suchen dabei z.B. als Nachtaktion im Wald nach Lösungsbuchstaben, bauen Kodierräder für geheime Botschaften oder schreiben sie unsichtbar mit Milch. Auch nehmen sie Finderabdrücke und erstellen sich gegenseitig Steckbriefe.

Wie immer hat es nicht nur mir sondern auch den Kindern sehr viel Spaß gemacht und ich freue mich immer wenn solche Programme stattfinden.

EP-Kurzprogramm – Grundschule Übach-Palenberg

admin — Fri, 19 Feb 2010 10:25:00 +0000

In den letzten 2 Tage war ich wiedermal als Erlebnispädagoge tätig. Diesmal waren 3 Klassen der Grundschule aus Übach-Palenberg in der Jugendherberge Hellenthal zu besuch und wieder einmal war die Zeit zu knapp. In 1½ Tage kann man effektiv nur sehr wenig in der Kindern bewegen. Schade eigentlich, denn die 27 kleinen Racker waren sehr neugierig und erste Erfolge stellen sich dann zum Schluss auch ein. Aber leider noch nicht bei allen und ich habe die Vermutung auch nicht nachhaltig.

Besser wäre für sie eine Klassenfahrt mit einen 4-Tage-Programm gewesen.

XML für InDesign

admin — Wed, 03 Feb 2010 10:26:54 +0000

In den letzten beiden Tage habe ich zwei weitere Mitarbeiter von Westteam Marketing GmbH im Bereich XML geschult. Auch diesmal war das große Thema: Wie bekomme ich aus einen in Adobe InDesign erstellten Katalog eine XML-Datei? Dazu haben wir uns am Anfang erstmal den Aufbau von XML, die Regeln und die Definitionen angesehen.

Im zweiten Teil sind wir dann näher auf das Regelwerk und die damit zusammenhängende DTD eingegangen. Wir haben uns Gedanken darüber gemacht, wie ein Regelwerk eines fiktiven Adressbuches aussehen könnte. Später haben wir als Übung noch ein Regelwerk, also DTD, für den Aufbau von Büchern erstellt.

Zusätzlich habe ich zum Vergleich hier noch ein XML-Schema

Aus diesen beiden Regelwerken könnte dann eine folgende XML Datei entstehen:

alle Dateien zum Download

Hauptschule Hückelhoven

admin — Fri, 22 Jan 2010 09:35:46 +0000

In den letzten beiden Tage habe ich die 7. Klassen der Hauptschule Hückelhoven betreut. Sie hatten ein erlebnispädagogisches Kurzprogramm mit Hochseilgarten in der Jugendherberge Hellenthal gebucht.

Nachdem ich am ersten Nachmittag durch Kennlern-Aktionen die Klasse besser einschätzen konnte, unternahmen wir abends dann eine Nachtaktion (sehr nette Atmosphäre – bei Schnee im Dunklen quer durch den Wald). Am 2. Tag ging es dann in den Hochseilgarten, wo nicht wie üblich durch Eigensicherung sondern durch das gegenseitige Sichern, die Teilnehmer mehr Vertrauen und Hilfsbereitschaft üben konnten. Nebenbei wird dadurch das Selbstbewusstsein bzw. Selbstwertgefühl gesteigert. So war es am Schluss eine neue und sehr gute Erfahrung für alle Schüler.

PHP – Einzelcoaching

admin — Mon, 18 Jan 2010 10:01:29 +0000

Am Samstag hatte ich wieder einmal ein Einzelcoaching. Die Teilnehmerin besuchte schon mit ihren Kolleginnen Mitte letzten Jahres ein Seminar von mir zum Thema “Websites für Entscheider”. Ein Seminar speziell konzipiert um Entscheidern die Möglichkeiten und Probleme beim Erstellen von Websites – aber auch die dahinter steckenden Technologien näher zu bringen.

Diesmal sollte es um PHP gehen. Sie hatte schon einige Vorkenntnisse, weshalb wir nicht komplett bei Null anfangen musste. Wir konzentrierten uns an Anfang auf das Zusammenspiel und Einrichten vom Webserver mit PHP und mySQL sowie die Unterschiede zwischen einem LAN und WAN. Später haben wir durch ein Mini-Projekt ein sinnvolles Struktur bzw. Aufbau von PHP-Seiten erarbeitet. Zum Schluss zeigte ich noch durch ein kleines Script wie man eine XML-Ausgabe über die DOMDocument-Klasse, also ein bisschen OOP, erzeugt.

Free Monitor for Google

admin — Fri, 15 Jan 2010 10:03:44 +0000

Endlich hab ich ein kostenloses Tool gefunden, welches mir die Platzierung bei Google anzeigt. Nachdem man eine Site per URL angegeben hat, definiert man die Suchbegriffe von denen man die Platzierung seine Site angezeigt haben will. Nach einer kurzen Analyse wird die aktuelle Platzierung und später die beste Platzierung angezeigt. Zusätzlich wird beim Klick auf einen Suchbegriff die Top10 unter diesen Begriff angezeigt.

Ein wirklich brauchbares Freeware-Tool – danke an die Hersteller ClerverStat.

Adobe Browser Lab

admin — Fri, 15 Jan 2010 09:51:40 +0000

Gestern habe ich ein neues Tool von Adobe kennengelernt und bin begeistert. Es handelt sich um ein Analyse-Tool. Adobe bietet an Screenshots von der angegebenen URL zu machen und darzustellen. Dabei gibt es eine Liste der gängigsten Browser zu Auswahl:

Windows XP
- Chrome 3.0
- Firefox 2.0
- Firefox 3.0
- Firefox 3.5
- Internet Explorer 6.0
- Internet Explorer 7.0
- Internet Explorer 8.0
Mac OS X
- Firefox 2.0
- Firefox 3.0
- Firefox 3.5
- Safari 3.0
- Safari 4.0

Direkt zur Anwendung: Adobe Browser Lab

Über Adobe Browser Lab

Dreamweaver Erweiterungen: Part 1 & Part 2

Einzelcoaching Flash Grundlagen

admin — Thu, 14 Jan 2010 13:15:04 +0000

So wie letzte Woche habe ich auch gestern wieder einmal ein Einzelcoaching gegeben. Diesmal zum Thema Flash.

Der Teilnehmer hatte schon viele Photoshop- und Illustrator bzw. Freehand-Kenntnisse und so konnte ich den Teile des Zeichnens in Flash relativ klein halten. Wir haben uns dann eher auf das Animieren von MovieClips und die optimale Ausgabe in SWF konzentriert. Auch nutzten wir die Zeit den Umgang mit Videos in Flash durchzusprechen.

Dreamweaver Grundlagen

admin — Fri, 08 Jan 2010 12:30:11 +0000

In den letzten beiden Tage habe ich 2 Teilnehmern ein Einführung in Dreamweaver CS3 gegeben. Beide kamen aus dem Print-Bereich und haben sehr in Bilder gedacht – was nicht weiter schlimm wäre wenn eine Website nicht auch maschinenlesbar und damit auf Text aufbauend wäre.

Nach anfänglichen Schwierigkeiten – Dreamweaver als Authorentool zu sehen – haben wir eine schöne und effektive Seminarzeit gehabt. Ich hoffe das sie durch das Seminar einen guten Einstieg bekommen habe – eigentlich bin ich mir da aber ziemlich sicher

Einzelcoaching Webdesign-Grundlagen

admin — Fri, 08 Jan 2010 12:16:17 +0000

Am Dienstag hatte ich nach einer kleine Pause um die Feiertage herum ein Einzelcoaching zum Thema HTML- und CSS-Grundlagen. Es sollte die Vorbereitung auf das dann folgende Dreamweaver-Seminar sein.

Der Teilnehmer kam, wie so oft, aus dem Print-Bereich und hatte keinerlei Vorkenntnisse. Die große Herausforderung besteht dann darin die Denkweise (ist ja Print bezogen) auszuweiten, da ja beim Konzipieren und Layouten von Webdesign die technischen Vorgaben einen großen Einfluss haben.

Der Teilnehmer war sehr zufrieden, hat schon weiter Seminare gebucht und würde – laut Beurteilung – mich weiter empfehlen.

Flash Grundlagen

admin — Wed, 18 Nov 2009 18:49:00 +0000

Gerade habe ich eine 2-tägige Grundlagen-Schulung in Flash hinter mir. Die beiden Teilnehmer sind Angestellte von Miltenyi Biotec GmbH und für die Pflege der Website zuständig.

Beide habe schon guter Erfahrungen in der Vektorverarbeitung mitgebracht, so dass wir uns auf die Animation und optimierte Ausgabe von Flash konzentrieren konnten. Auch war der Import von Illustrator- bzw. Photoshop-Vorlagen ein großes Thema, sowie die Einbindung von Text.

Endlich Urlaub

admin — Mon, 17 Aug 2009 11:07:00 +0000

Ich war vom 14. Juli bis zum 15. August wieder einmal in Norwegen. Dort habe ich aber nicht einfach nur Urlaub gemacht und mir die Gegend angesehen – nein – ich habe wie in den letzten Jahren auch als Guide 2 Jugendgruppen aus Deutschland betreut.

In den ersten 2 Wochen kamen 16- bis 21-Jährige und machten in 2 Gruppen jeweils 2 Touren – eine Trekking- und eine Kanu-Tour. Leider war ich so stark erkältet, dass ich die erste Tour nicht kommen konnte.Selbst die Übernachtung im Zelt war nicht möglich und nicht musste ins Gästehaus wechseln. Später ging es mir wieder besser und die 2. Tour konnte ich als Kanu-Guide mitfahren.

In der letzten Hälfte meines Urlaubes kamen dann 13- bis 15-Jährige (15 Stück) mit denen wir geplant hatten eine 10tages Kanu-Tour auf den Nidelva zu machen. Aber leider hat es so stark geregnet, dass wir in den ersten 2 Tagen nicht starten konnten. Wir haben dann die gesamte Tour auf geteilt und als erstes mit einer 3tages Tour begonnen. Später folgte dann noch eine 5tägige.

HTML & CSS – Grundlagen

admin — Fri, 10 Jul 2009 10:55:00 +0000

Anfang dieser Woche habe ich wieder einmal eine nette Grundlagenschulung zum Thema HTML und CSS gegeben. Besonders an diesem Kurs war dass die Teilnehmer schon gute Grundkenntnisse in Bereich HTML mitbrachten und wir uns deshalb auf die Eigenheiten von CSS stürzen konnten.

Screengrab Pro

admin — Sat, 04 Jul 2009 10:13:49 +0000

Ich bin gerade, auf der Suche nach einem Programm für Bildschirm-Bild, auf Screengrab Pro von Traction Software gestoßen.

Das Programm ist kostenlos und bietet alles was man für Einzelbildaufnahmen haben soll. Schön an der ganzen Sache ist, dass man das gemachte Bild sowohl als BMP, JPG, ICO und PDF speichern kann. Weiterhin kann man relativ einfach auswählen, welches Fenster – also welches Programm man aufnehmen möchte.

Einziger, kleiner Nachteil den ich bis jetzt gefunden habe ist das es das gemachte Bild in der internen Zwischenablage speichert und so den benötigten Arbeitsspeicher heraufsetzt.

Flash CS 4 – Grundlagen

admin — Fri, 03 Jul 2009 11:25:09 +0000

Am 29. und 30. Juni habe ich für Reuter Onlineshop GmbH eine individuelle Schulung gehalten. Das spezielle an dieser Schulung war, dass es 3 Gestalter gab, die mit Flash nur rudimentäre Erfahrungen hatten und 2 Programmierer, die zwar schon mit Flash programmiert hatten, aber nur in ActionScript 2. In den 2 Tagen musste ich also einen Spagat zwischen Gestalten – Programmieren und Anfänger – Umsteigern in Flash schaffen.

Begonnen hatten wir dann mit den Veröffentlichungseinstellungen, Dateivorbereitungen und Datenreduzierungen in und für Flash. Im Verlauf des Seminare wurden dann noch Animationsmöglichkeiten mit MovieClips gezeigt und einfachen Button-Steuerungen programmiert.

Am 2. Tage gingen wir dann näher auf die Programmierung ein. Gegen Ende des Seminares hatten dann die Einsteiger Zeit ihre neues Wissen zu verarbeiten, während ich immer wieder für die Programmierer interessante Aspekte der ActionScript3-Programmierung einwarf.

Premiere Pro – Firmenschulung

admin — Sat, 20 Jun 2009 11:00:00 +0000

Für die Kunstsammlung NRW habe ich ein 2-tägiges Seminar über Adobe Premiere Pro CS3 gehalten. Da ich Premiere Pro nicht sehr häufig schule, war es auch für mich eine spannende Unterrichtssituation.

Leider bietet Adobe nur die neusten Programme zum Download an und so konnte das KWTZ nur auf eine Testversion aus einem Buch drauf zurückgreifen. Diese wiederum lief aber nur einen Tag und verkomplizierte die Schulungsvorbereitungen und später auch die Durchführung. Hinzu kam das es zwar auf der Adobe-Website eine Testversion von Encore DVD gibt, wenn man sie aber heruntergeladen und installiert hat, muss man aber eine Seriennummer eingeben. Solche Download-Möglichkeiten sind nicht gerade förderlich für Einsteiger die nur mal eben die Programme testen möchten um dann sich für eins zu entscheiden.

HSG-Trainer

admin — Sat, 20 Jun 2009 10:33:00 +0000

Am Mittwoch habe ich als Hochseilgarten-Trainer im Auftrag vom Transparenz e.V. gearbeitet. Die Gruppe war eine 6. Klasse eines Gymnasiums und ihre Sozialkompetenz war ausgesprochen hoch. Wir Trainer mussten nicht oft die Kinder dazu animieren sich gegenseitig zu helfen und so hatten wir viel Spaß. Die Gruppe schaffte es dass viele Kids viele Stationen ausprobieren konnten. Einige haben sogar ihre eigene Angstgrenze überwunden.

Ein toller Tag für alle!

PHP – Einzelcoaching

admin — Sat, 20 Jun 2009 10:20:00 +0000

Für das Büro Düsseldorf der JP│KOM GmbH habe ich in dieser Woche ein PHP-Einzelcoaching gehalten. Wie immer ist ein solches Einzelcoaching sehr intensiv und ich kann gezielt auf die Bedürfnisse des Teilnehmers eingehen.

In diesem Seminar haben wir die Grundlagen von PHP und mySQL kennengelernt. Wir haben eine kleine Datenbank-Anwendung geschrieben und uns mit Serverkommunikation und Sicherheit beschäftigt.

Himmel und Erde

admin — Sun, 14 Jun 2009 09:57:00 +0000

Gestern war ich mit einer Kollegin in der Jugendherberge Hellenthal um eine Gruppe von Vätern mit ihren Kindern im Hochseilgarten zu betreuen. Die insgesamt 18 Teilnehmer hatten riesigen Spaß und einige Väter waren über die Leistung ihrer Kinder sehr überrascht. Zum Schluss war das Vertrauen von einigen Väter so groß, dass sie sich selbst von ihren eigenen Kindern sichern haben lassen.

EP – Sonderschule Köln

admin — Fri, 12 Jun 2009 09:43:00 +0000

Am 08. und 09. Juni war ich wieder in der Jugendherberge Hellenthal und habe für den Transparenz e.V. ein verkürztes Erlebnispädagogisches Programm durchgeführt.

Es war ein schwieriges Programm da es sich um 16 Schüler einer Sonderschule handelte. Wiedermal stellte ich fest, dass gerade diese Kinder solche besonderen Programm nötig haben, aber leider nicht die finanziellen Mittel. So buchten sie statt den üblichen 4 Tagen ein Kurzprogramm welches schon nach 2 Tagen beendet ist.

Trotz der schwierigen Umstände bin ich mir sicher in den meisten Kids ein kleines Bewusstsein für soziales Verhalten erschaffen zu haben. Ich hoffe dass die Lehrer und ihr Umfeld damit weiterarbeiten.

individuelle Joomla!-Schulung

admin — Sat, 06 Jun 2009 08:38:00 +0000

Das individuelle Training für die IHK Düsseldorf fand über 2 Tage statt. Dabei ging es hauptsächlich um deren Intranet-Lösung. Sie hatten einige Probleme nach dem Update ihrer Version und Frage zur Konfiguration ihrer Module. Weiterhin nutzen wir das Seminar um nach effektiveren Lösungsansätzen im Bereich Workflow und Fehlermanagement zu suchen.

Zusätzlich modifizierten wir einige Modul von Joomla! um sie an die Bedürfnisse der IHK Düsseldorf anzupassen. Dabei versuchten wir möglichst wenig in den bestehenden Quellcode einzugreifen um Aktualisierungen nicht zu gefährden. Auch wurde kurz auf die Template-Engine eingegangen so dass eigene Modifizierungen von bestehenden Templates ermöglicht wurden.

Das Seminar hatte nichts mit den herkömmlichen Schulungen zu tun, wo die zu schulenden Themen stark vorgegeben sind. Hier war es eher so, dass die Teilnehmer Fragen zu einzelnen Problemen stellten und ich darauf reagierte. Wir suchten so immer gemeinsam einen Lösungsweg für das gestellte Problem.

EP + HSG – Realschule Düsseldorf

admin — Sat, 30 May 2009 07:47:00 +0000

Nach längerer Seminarpause hatte ich nun endlich wieder einmal ein Erlebnispädagogisches Programm in der Jugendherberge Hellenthal für den Transparenz e.V. Es war eine 6. Klasse einer Realschule aus Düsseldorf.

Nach der üblichen Begrüßung am Montag Mittag begannen wir direkt mit einer Gruppenaufgabe zur Förderung der Interaktivität. Leider machte uns der Regen aber einen Strich durch die Rechnung und wir mussten abbrechen.

Am Dienstag starteten wir wieder gut gelaunt mit Vertrauens- und Wahrnehmungsübungen. Nach dem Vertauensfall, überraschenderweise trauten sich viele von denen, wagte ich nochmals einen Versuch einer Kooperations- bzw. Interaktionsaufgabe. Doch leider platzte wieder einmal das Wetter mit heftigen Regen in unsere Aufgabe hinein. Schade eigentlich, denn die Gruppe war auf einen sehr guten Weg es zu schaffen.

Am Mittwoch war dann der große Hochseilgarten-Tag angesagt. Da bei uns alles überdacht ist waren wir vom Wetter unabhängig. Abend ging es dann auf eine Nachtaktion. Viele von den Teilnehmern waren aber mit dieser Aufgabe, geht allein einen Pfad durch den Wald, überfordert. Hochseil-Aktionen und Nachtaktion sind für eine 6. Klasse vielleicht zu viel.

Der letzte Tag verlief nach so viel Anstrengung überraschend gut. Die Kooperations- und Interaktionsaufgaben wurden hervorragend gemeistert. Leider blieb zu wenig Zeit übrig um die Kommunikation zwischen den Schülern zu fördern, denn dann wären viele Aufgaben stressfreier und effektiver gelöst worden.

100 Jahre Jugendherbergsverband

admin — Mon, 18 May 2009 08:02:00 +0000

An diesem Sonntag hat die Jugendherberge Hellenthal das 100-jährige Bestehen der Verbandes gefeiert. Dazu wurde ein Tag der offenen Tür veranstaltet. Der Transparenz e.V. öffnete der Hochseilgarten und Eltern wie Kinder konnten sich der Herausforderung stellen in 4 bzw. 8 Metern Höhe gemeinsam oder alleine zu balancieren.

Anschließend lud der Transparenz e.V. alle Trainer die dafür kostenlos gearbeitet haben zu einem noblen Abendessen ins Restaurant im Schloß Schleiden ein. Leider hat Enrico, also ich, die Einladung nicht richtig gelesen und vergessen neben den Outdoor-Klamotten auch noch Sachen mitzunehmen die man bei einen solchen Besuch hätte brauchen können. Naja, was soll’s! Ich durfte trotzdem rein und das Essen war fantastisch.

12 Animationen für Flash CS4

admin — Wed, 06 May 2009 06:44:19 +0000

Auf der Adobe Developer Seite wurde 12 neue Tutorials für Flash CS4 hinterlegt, in den Möglichkeiten zur Animationserstellung erklärt wird.

Animation Learning Guide for Flash CS4 Professional | Adobe Developer Connection.

Flash-Aufbau

admin — Fri, 01 May 2009 11:21:00 +0000

Weiterführend zum vorherigen Grundkurs haben die Teilnehmer im Aufbaukurs die Nutzung der neuen 3D-Funktion und den Bewegungseditor kennengelernt und intensiv genutzt. Zusätzlich haben wsie die Vorbereitung von Videomaterial, das Einbinden von externen Videos gelernt. Auch wurde das Laden von externen SWF-Dateien bzw. von Bildern gezeigt, so dass sie in der Lage sind mit kleinen SWF-Dateien umfangreiche Projekte zu erstellen. Auch gab es eine kleine Einführung in die ActionScript-Programmierung mit Packeten und (Dokumenten-)Klassen. So haben wir über externe Skripte Animationen programmiert und ein simplen Soundplayer gebaut.

In diesem Aufbau-Kurs waren insgesamt 3 Teilnehmer anwesend. 2, einmal von BMG Labtech und einmal von Jahns and Friends, haben beim KW Trainingszentrum den Grundkurs schon absolviert. Der dritte Teilnehmer war noch in der Ausbildung zum Mediengestalter und wurde von seiner Firma Interlutions GmbH zusätzlich zu dieser Schulung geschickt.

Flash-Grundlagen

admin — Fri, 01 May 2009 10:59:00 +0000

Am Montag und am Dienstag habe ich nach längerer Zeit mal wieder eine Grundlagen-Schulung gehalten. Es waren 2 Teilnehmer anwesend, also ein sehr kleiner Kurs. Die Teilnehmerin von RTL interactive hatte schon paarmal mit Flash gearbeitet – traute sich aber den Aufbaukurs noch nicht zu. Die andere Teilnehmerin von BMG Labtech hatte keinerlei Erfahrungen mit Flash und war somit ein absoluter Neuling.

So hatten wir eine gute Voraussetzung um sehr intensiv in das Programm einzusteigen. Wir lernten das Programm mit all seinen grundlegenden Fähigkeiten kennen. Stellten fest, dass die Malfunktionen in Flash zwar gut sind – es aber besser ist alles in Illustrator und Photoshop vorzubereiten und dann zu importieren. Weiterhin beschäftigen wir uns mit Animationen, dem Verschachteln von MovieClips und dem Erstellen von Buttons, die wir später auch mit einfachen Skritpen interaktiv machten.

Adobe Premiere Elements – Color Expert

admin — Sat, 25 Apr 2009 10:10:00 +0000

Es kommt sehr selten vor, dass ich ein Videoschnitt-Programm schule und wenn doch dann ist es meist Adobe Premiere Pro. Aber in diesem Fall wollte die Firma bewusst kein großes, professionelles Programm mit tausend Funktionen, sondern ein leicht zu bedienendes, semiprofessionelles Werkzeug welches auch Heimanwender nutzen können.

Wir einigten uns auf Adobe Premiere Elements 7, welches in Kombination mit Adobe Photoshop Elements 7 ein sehr effizientes Werkzeug ist, ich berichtete.

Der Kunde war Color Expert, der zur ColorExpert-Storch-Group gehört und die eigenen Produkt-Videos zu präsentablen Vorführungen gestalten möchte. Da das Unternehmen weltweit tätig ist, sollte in der Schulung auch über das Einbinden von verschiedenen Sprachen und die Veröffentlichung als DVD gesprochen werden.

Nachdem ich mit dem Funktionsumfang des Programmes vertraut gemacht habe, empfahl ich eine 2 tägige Schulung um alle Möglichkeiten nicht nur anzusprechen, sondern auch die Zeit zu haben sie auszuprobieren. Leider war der Kunde auf den möglichst schnellsten Einsatz ihrer Schulungsteilnehmer bzw. des vermittelten Wissens bedacht und so buchte er nur einen Tag Schulung.

Wie von mir prophezeit war der Lerneffekt sehr gering und es blieb keine Zeit zum Üben und zum Verstehen. Am Ende der Schulung verblieben wir das ein weiterer Tag nachgebucht wird falls doch noch die Entscheidung zu Gunsten des vertiefenden Verstehens fällt.

EP – Realschulde Bedburg

admin — Fri, 24 Apr 2009 18:39:00 +0000

Vom 20. bis zum 23. April habe ich in der Jugendherberge Hellenthal für den Transparenz e.V. ein erlebnispädagigisches Grundprogramm durchgeführt. Wie immer war es schön mit einer 6. Klasse die die Grundprinzipien des sozialen Verhaltens zu trainieren. Als Höhepunkt der der Tage empfanden die Schüler das Abseilen von 12 Meter in einem alten Steinbruch. Für mich persönlich war das Highlight zu beobachten wie die Kinder innerhalb von nur 4 Tagen gelernt haben mehr Rücksicht aufeinander zuhalten. So dass sie am Ende gemeinsam versuchen konnten auf eine riesige Wippe aufzusteigen ohne dass diese links oder rechts den Boden berührte. Leider waren aber auch diesmal einige Kinder sehr beratungsresistent und so war die Gruppe leider nicht in der Lage komplett auf der Wippe zu stehen.

Rette mich wer kann

admin — Fri, 20 Mar 2009 13:08:00 +0000

Ein relativ neues Programm ist das “Rette mich wer kann”. Wie Kurt Hahn, der Urvater der Erlebnispädagogik, schon erkannt ist die soziale Hilfe ein wichtiges Mittel um den Menschen das Zusammenleben zu erleichtern.

In diesem Programm hatte die Gelegenheit einer 5 Klasse aus Bonn mal zu zeigen wie man sich richtig in einer Unfallsituation verhält. Und damit meine ich nicht nur wie man Druckverbände anlegt oder eine stabile Seitenlage macht. Diese Ausbildung bekommt man beim Deutschen Roten Kreuz oder ähnlichen Einrichtungen schon zu genüge.

In unserem Programm geht es viel mehr um das ganze Drumherum. Dass heißt wir reden und üben nicht nur im Klassenraum mit den Teilnehmern den Ablauf von Rettungsmaßnahmen, sondern wir gehen mit ihnen in die Natur – dort wo sie am ehesten mit solchen Situationen konfrontiert werden.

HSG – Auszubildende des WDR

admin — Sat, 07 Mar 2009 18:43:00 +0000

Heute Vormittag war ich für die Firma “Konzilianz e.K.” als Sicherheitstrainer tätig. Der WDR hatte sie für ein Kompetenz-Training (softskill) gebucht. Wir waren für mehrere Stunden in einem Hochseilgarten und haben mit diesem Medium versucht die Teamfähigkeit der Auszubildenden zu fördern.

Einzelcoaching – PHP-XML Schulung

admin — Wed, 04 Mar 2009 12:57:00 +0000

Einzelcoachings die über 3 Tage gehen sind selten, aber nur so haben die vermittelten Themen eine Chance langfristig im Gedächtnis der Teilnehmer hängen zu bleiben.

Das besondere bei diesem Training war, das ich diesen Teilnehmer ungefähr ein Jahr zu vor schon in einer AJAX-Schulung hatte. Es ist schön wiederkehrende Teilnehmer in den Schulungen zu sehen, denn nur so kann ich ein Feedback der gelaufenen Seminare einfordern und sehen ob und was ich verbessern kann. Die sonst üblichen Feedbackbögen am Ende einer Schulung vermitteln ja leider nicht die Langzeitwirkung.

Da der Teilnehmer bei der Messe Düsseldorf für die Pflege der Websites zuständig ist, erzählte er mir dass im Laufe der Zeit viel wenn nicht sogar alle Website eine AJAX-Unterstützung, also Web 2.0, bekommen sollen. Das begrüße ich natürlich hiermit.

Einzelcoaching – Flash Aufbau

admin — Fri, 27 Feb 2009 12:21:00 +0000

Und wieder einmal ein Einzelcoaching zum Thema “Flash CS4 – Aufbau”. Neben vertiefenden Animationstechniken haben wir auch die Grundlagen der ActionScript 3-Programmierung besprochen.

Einzelcoaching – Cinema Aufbau

admin — Thu, 26 Feb 2009 12:48:00 +0000

Eigentlich sollte es ein Seminartag über die verschiedenen Module in Cinema 4D werden. Der Teilnehmer bat mich aber um einen Workshop-Tag, da beim eigenständigen Arbeiten immer noch Probleme bei der Vorgehensweise vorhanden sind.

Der Teilnehmer war der gleiche wie beim letzten Cinema 4D Training.

Und so haben wir die Module nur am Rande angesprochen und uns eher mit dem Import einer Illustrator-Datei, dem Optimieren dieser Inhalte, dem Texturieren und schließlich dem Animieren der Objekte beschäftigt. In der Illustrator –Datei war das Logo der RheinLand Versicherungs AG. Das größte Problem beim Teilnehmer lag darin, dass nach dem Import das Extrudieren der Pfad nicht funktionierte. Da die Illustrator-Datei leider sehr schlecht vorbereitet war (sie beinhaltete mindestens doppelt so viele Pfad wie benötigt), mussten wir sie erstmal in Illustrator optimieren.

Der Rest war dann keine große Hürde mehr.

<\/param><\/embed><\/object><\/div>";" alt="">

Logo Animation

EP-Kurzprogramm

admin — Fri, 20 Feb 2009 12:08:00 +0000

Am Montag und Dienstag hatte ich ein erlebnispädagogisches Kurzprogramm mit einer Hauptschule aus Essen. Es war ihre Abschlussfahrt.

Leider geht der Trend von erlebnispädagogische Programme immer mehr zu solchen Kurzprogrammen. Dabei weiß jeder Lehrer, jeder Jugendliche und alle Eltern, dass innerhalb von 48 Stunden keine dauerhaften Änderungen stattfinden können. Trotzdem müssen immer mehr Jugendherbergen solche verkürzten Programme anbieten – da die Buchungen immer mehr zurück gehen.

Viel Eltern können sich solche Klassenfahrten mit Programmangeboten nicht leisten. Dabei kostete dieses von mir durchgeführte Programm inklusiven Aufenthalt und Vollverpflegung in der Jugendherberge gerade mal 75,50 €.

HSG-Trainer

admin — Fri, 13 Feb 2009 11:56:00 +0000

Am Mittwoch und am Donnerstag habe ich als Hochseilgarten-Trainer im Auftrag vom Transparenz e.V. gearbeitet. Die Wetterlage war zwar nicht wirklich passend und viele Kinder haben gegen Nachmittag gefroren – trotzdem behaupteten sie das es viel Spaß gemacht hat ihr eigenen Ängste zu überwinden und Vertrauen in die Klassenkameraden zu bekommen, die sie sicherten.

Einzelcoaching – Cinema 4D

admin — Fri, 06 Feb 2009 11:32:00 +0000

Wieder einmal habe ich eine Cinema 4D Schulung gegeben. Es ist verblüffend, dass Cinema 4D Schulungen verstärk Anfang des Jahres gebucht werden. Schon im letzten Jahr habe ich im ersten Quartal mehr Cinema 4D Schulungen gehalten als das gesamte restliche Jahr und diesmal sieht es ähnlich aus.

Bei dieser Schulung war es aber ein Einzelcoaching. Der Teilnehmer arbeitet für die Rheinland Versicherung.

HTML Grundlagen und Aufbau

admin — Sun, 01 Feb 2009 10:12:00 +0000

HTML – die Grundlage vom gesamten World Wide Web. Um gute Website erstellen zu können, kommt man nicht um das Wissen um HTML bzw. XHTML herum. Deshalb gebe ich selbst heute noch gern diese Basisschulung.

Mittlerweile reicht es aber nicht aus einfache, statische, klassische HTML-Seiten zu machen. Meistens verlangt der Kundeschon bei kleinen Projekten die zusätzliche Einbindung von Web-Technologien die über XHTML hinausgehen. Und so kommt immer in meinen Schulungen eine gute Portion CSS, SEO und Web 2.0 hinzu.

Flash Aufbau

admin — Sun, 25 Jan 2009 09:41:00 +0000

Bei einer “Flash Aufbau”-Schulung ist der Anfang immer recht schwer, denn man weiß nie welche Vorkenntnisse die Teilnehmer mitbringen. Schließlich wollen ja alle direkt was Neues lernen und nicht erst durch Teilnehmer mit weniger Wissen ausgebremst werden.

In solchen Fällen versuche ich mit unterschiedlichen Aufgaben die einzelnen Teilnehmer zum Arbeiten zu bringen. so können die Erfahreneren ihr Wissen gut testen und die anderen haben etwas Zeit aufzuholen. Trotzdem bleibt es ein schwieriger Spagat.

Haupschule Tönisvorst

admin — Fri, 16 Jan 2009 09:26:00 +0000

Nun ist es so weit, der erste Eintrag meines 2. Standbeins kommt. Es war eine 6. Klasse der Hauptschule Tönisvorst. Es war eine gute Woche. Die Klasse machte ihre Klassenfahrt zu uns und ich versuchte mit ein paar Übungen den Kids klar zu machen das es besser ist miteinander statt gegeneinander zu arbeiten und dabei auch noch Spaß zu haben.

5 Jahre Erlebnispädagogik

admin — Sat, 10 Jan 2009 09:22:00 +0000

Ich glaube viele wissen es noch nicht aber 2003 habe ich neben meiner Tätigkeit als IT-Trainer auch angefangen als Referent in der Erlebnispädagogik zu arbeiten.

Da ich schon seit meiner Jugend ehrenamtlich erst Jugendmannschaften im Handball später Jugendgruppen in Ferienfreizeiten betreute/betreue, war es ein nächster, logischer Schritt dies auch beruflich zu machen.

Seit nun mehr fast 5 Jahren bin ich für den Transparenz e.V. als Referent in der Jugendherberge Hellenthal tätig und leite dort verschiedene Angebote.

In diesem Jahr möchte ich diesem Standbein meiner Arbeit auch ein kleinen Platz in meinem Arbeitsbuch geben und regelmäßig darüber berichten.

Cinema 4D Grundlagen und Aufbau

admin — Fri, 09 Jan 2009 09:43:00 +0000

Wau, was für eine Woche! in den letzten 4 Tagen habe ich 2 Tage Grundlagen in Cinema 4D geschult und direkt danach noch einen Aufbaukurs zu Cinema 4D gehabt. Ich freue mich jedes mal wenn ich dieses, doch recht komplexe Programm, schulen darf, denn es macht schon sehr viel Spaß mit wenigen Handgriffen nette virtuelle Figuren herzustellen.

Vielleicht werde ich später einige Bilder und Videos aus der Schulung veröffentlichen.

Update 25. Januar 2009

Nun habe ich es doch geschafft einige Dateien und Bilder online zu legen. Ich hoffe ihr freut euch genauso wie ich über die gelungen Beispiele.

<\/param><\/embed><\/object><\/div>";" alt="">

Tag 24 – Abschluss

admin — Tue, 23 Dec 2008 22:00:36 +0000

Nun ist es geschafft. Ich schreibe nun den letzten Artikel für meinen Adventskalender. Als Resümee kann ich sagen – es gibt noch viel zu tun bis mein Projekt endlich einsatzbereit ist. In den letzten Artikeln habe ich ja schon mal angedeutet was ich alles noch gern drin haben würde. Ich hoffe ich werde in der nächsten Zeit Zeit finden meine Wünsche umzusetzen.

Auf jeden Fall hat es riesig viel Spaß gemacht mein eigenes CMS zu entwickeln und dazu eine kleine Dokumentation zu schreiben. Auch wenn ich wiedermal den Aufwand, gerade für das Schreiben der Dokumentation, unterschätzt habe.

Ich hoffe euch, meine Leser, hat das Lesen meiner Artikel auch Freude bereitet und ihr habt vielleicht zusätzlich auch noch was neues gelernt.

Nun wünsche ich euch ein besinnliches Weihnachtsfest und einen guten Rutsch ins neue Jahr.

Zum Abschluss meiner REDcms Dokumentation bekommt ihr natürlich auch nochmal den gesamten REDcms 17, einschließlich dem Datenbank-Backup.

Tag 23 – Mehrbenutzer- und Rechtesystem

admin — Mon, 22 Dec 2008 22:00:57 +0000

Am vorletzten Tag meines Adventskalenders möchte ich mich nochmals mit den Erweiterungen meines REDcms beschäftigen. Fast jedes Redaktionssystem wird von mehreren Mitarbeitern betreut und so möchte auch ich in naher Zukunft mein System mit diesem Feature ausstatten. Zusätzlich möchte ich, dass jeder registrierte Benutzer seine Rechte, also das was er im System alles machen darf, individuell eingestellt bekommt.

Mehrbenutzer-System

Um in meinem System auch mit mehreren Benutzern Arbeiten zu können, sollte natürlich als erstes die Anmeldung am System und damit verbunden die Verwaltung der Benutzer geändert werden.

Zur Zeit wird die Anmeldung, also der Benutzername und das Kennwort innerhalb der „Login“-Klasse verwaltet. Wenn es jetzt mehrere Benutzer geben soll, dann wäre es sinnvoller die Benutzernamen und Passwörter in die Datenbank auszulagern. Wenn sich dann ein Benutzer am System anmelden möchte wird in der Datenbank nachgesehen ob es den Benutzer mit dem dazugehörigen Passwort auch gibt. Falls ja können zum Beispiel dann weitere Informationen aus der Datenbank geladen werden, wie bspw. der Vor- und Zuname des Benutzers. So können die Benutzernamen Nicknamen, also fiktive Name, sein und der Benutzer wird trotzdem mit seinem richtigen Namen angesprochen. Auch könnte dann automatisch beim Schreiben neuer Seite bzw. neuer Boxen der Name des Redakteurs eingetragen werden und nicht wie zur Zeit von Hand.

Das schöne an der OOP ist das die „Login“-Klasse in ihrer Benutzung wahrscheinlich nicht geändert werden bräuchte, denn auch weiterhin wird man sich darüber an- und abmelden können. Selbst die Anfrage ob der Benutzer schon angemeldet ist, die von den verarbeitenden Klasse an die „Login“-Klasse gestellt wird, wird bleiben. Hinzukommt eigentlich nur, dass in der Session zusätzliche Angaben, wie den Vor- und Zunamen, hinzugefügt werden.

Rechte-System

Auch die Erweiterung meines REDcms mit einem Rechte-System wird aller Voraussicht nach gar nicht so schwer. Ich könnte mir bei der Rechtevergabe zwei Funktionsarten vorstellen.

Auf der einen Seite wäre da die individuelle Rechtevergabe für jeden einzelnen Benutzer des Systems. Der Vorteil wäre die völlig freie Einstellbarkeit der Rechte für jeden Benutzer. Aber das kann gerade bei sehr vielen Benutzern schnell auch sehr aufwendig werden. Vor allem wenn ständig die Berechtigungen der Benutzer sich ändert.

Auf der anderen Seite könnte die Rechtevergabe gruppenspezifisch geschehen, dass heißt jeder Gruppe bekommt individuelle Berechtigungen und jeder Benutzer kann dann einer oder mehreren Gruppen zugewiesen werden. Aber auch dieses Vorgehensweise hat Nachteile. Zum einen ist der Aufwand zum Erstellen eines solchen Systems viel höher und zum anderen müssen gerade bei vielen individuellen Benutzereinstellungen jedes mal eine neue Gruppe angelegt werden. Was den Aufwand schnell wieder hoch treibt.

Ich werde mich aber wahrscheinlich für die letztere Möglichkeit entscheiden, da sie aus meiner Sicht heraus am praktikabelsten ist.

Tag 22 – Bild-Upload und RSS-Feed

admin — Sun, 21 Dec 2008 22:00:48 +0000

Heute möchte ich über 2 mögliche Erweiterungen meines Systems schreiben. Zum einen ist das die Möglichkeit Dateien auf den Server hochzuladen, das ist zwar schon durch die „CKfinder“-Erweiterung des „FCKeditor“ zum Teil abgedeckt, aber die kostenlose Version blendet immer eine kleinen, störenden Hinweis ein. Zum anderen das Erstellen von RSS-Feeds um REDcms auch als kleines Blog-System nutzen zu können.

Datei-Upload

In meinen verwendeten Online-Editor gibt es eine nette Erweiterung mit deren Hilfe man Bild, Flash-Dateien und andere Format auf den Server hochladen kann. Da diese Erweiterung für kommerzielle Projekte nicht kostenlos ist, könnte ich mir vorstellen in einer der nächsten Versionen die Möglichkeit des Uploads selber zu schreiben und in das System zu integrieren. So wäre ich davon unabhängig. Auch den Editor könnte ich in diesem Zuge selber erstellen, aber ich habe mich schon mehrfach daran gesetzt dies zu machen und habe es wegen des Aufwandes immer wieder abgebrochen. Naja vielleicht klappt es doch noch.

RSS-Feeds

RSS-Feeds sind zwar nicht die neue Form von Newsletter, aber man könnte sie damit vergleichen. Auf der eigenen Website gibt man den Besucher die Möglichkeit einzelne Seiten bzw. die gesamte Website als RSS-Feed zu abonnieren. Wenn dann Änderungen an diesem Feed entstehen werden diese in einer separaten XML-Datei abgespeichert.

Mit einer geeigneten Software, ich benutze dazu „Windows Live Mail“ kann man dann die Abos anfordern und bekommt die neuen Meldungen angezeigt. Das Praktische als Besucher der Website daran ist, dass man seinen Email-Account nicht veröffentlichen muss, denn man selber stellt dieses Abo in seiner Software ein. So ist auch das Abbestellen kinderleicht, denn man löscht ganz einfach in seiner Software das Abo und schon bekommt man keine Neuigkeiten mehr.

In einer der nächsten Überarbeitungen meines REDcms möchte ich diese Erweiterung des Abonnierens mit anbieten. Dass heißt das beim Anlegen und Ändern von Seite und Boxen die XML-Datei geändert werden muss. Dabei gibt es aber folgendes zu beachten. Was passiert wenn der Administrator des Systems eine Box von der Seite 1 in die Seite 2 verschiebt? Bekommen dann die Abonnenten die komplette Überarbeitung der XML-Datei zugeschickt?

Also gerade bei späteren Änderungen von abonnierten Informationen sollte ich mir genauere Gedanken machen. Vielleicht könnt ihr als Leser meines RSS-Feeds mir dabei helfen und ein paar Tipps im Kommentar hinterlassen.

Tag 21 – Erweiterung durch AJAX

admin — Sat, 20 Dec 2008 22:00:06 +0000

Um den Bedienungskomfort der Seite zu verbessern, habe ich mir gedacht das die Administration am besten immer innerhalb eines Popups.

Also wenn man z.B. eine neue Seite hinzufügen möchte, sollte nicht eine neue Browser-Seite geladen werden, wie es zur Zeit der Fall ist, sondern besser wäre es wenn über die Thickbox-Erweiterung das Formular innerhalb einer darübergelegten Ebene angezeigt wird. Eigentlich könnte jede Modifikation am System damit erweitert werden. So auch eine Zwischenabfrage vor dem Löschen eines Menüpunktes, einer Box oder gar einer gesamten Seite – auch könnten verlinkte Bilder in dieser neuen Ebene angezeigt werden.

So schön dies klinkt, einen kleinen Nachteil hätte diese Erweiterung allerdings doch. Wenn JavaScript deaktiviert ist, könnte es zu Problemen kommen, da ja AJAX bekanntlich auf JavaScript aufbaut. Aus diesem Grund empfehle ich bewusst zur Zeit solche Erweiterungen nur im kontrollierten Rahmen anzuwenden. In meinem Fall wäre das der Administrationsbereich. Hier sollte JavaScript schon aus dem Grund aktiviert sein, um den Online-Editor zu benutzen. Im Frontend-Bereich wo jeder Besucher die Links benutzen möchte, ist es vielleicht zu viel verlangt.

Auch habe ich zur Zeit die Thickbox-Erweiterung nicht mit integriert, um die Übersichtlichkeit und damit die Verständlichkeit nicht zu gefärhden.

Tag 20 – CSS-Design

admin — Fri, 19 Dec 2008 22:00:57 +0000

Heute möchte ich etwas über das verwendete Design schreiben. Da das Projekt Schulungszwecken dient, habe ich mich für ein recht einfaches Design entschieden. Auch muss ich zugeben bin ich nicht der wirkliche Kreative in diesem Bereich.

Screen-Design

Das Design besitzt den klassischen Aufbau eines 2spaltigen Layouts mit einem Kopfbereich und einer Fußzeile. So können alle wichtigen Informationen übersichtlich untergebracht werden.

+------------------------------------+
| Website-Titel                      |
| Slogan                             |
+---------------+--------------------+
| Seitentitel   | Sidebar            |
| Einführung    | +----------------+ |
| +-----------+ | | Navigation     | |
| | Box-Titel | | +----------------+ |
| | Box-Text  | | +----------------+ |
| +-----------+ | | Administration | |
|               | +----------------+ |
+---------------+--------------------+
| Copyright                          |
+------------------------------------+

Reset-Datei

Um die unterschiedlichen CSS-Werte der verschiedenen Browser besser in den Griff zu bekommen, wird als erstes eine Reset-Datei geladen die alle wichtigen Style-Angaben für mich vordefiniert.

body, div, dl, dt, dl, ul, ol, li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, p, blockoute, th, td {
margin:0;
padding:0;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
}
ol, ul {
list-style:none;
}
adress, caption, cite, code, dfn, em, strong, th, var {
font-style:normal;
font-weight:normal;
}
table {
border-collapse:collapse;
border-spacing:0;
font-size:100%;
}
fieldset, img {
border:0;
}
caption, th, td {
text-align:left;
vertical-align: top;
}
q:before, q:after {
content:”;
}

Bei umfangreicheren Designs im Webbereich hat sich weiterhin eingebürgert, dass man das Layout der Site vom Design getrennt behandelt. Auch ich habe zwei separate Datei („layout.css“ und „design.css“) dazu erstellt.

Layout-Datei

Als Erstes möchte ich das Layout erklären. Um die Website zu zentrieren, habe ich um den gesamten Inhaltsbereich eine „div“-Container erstellt. Somit kann ich alles gut mittig mit einer Breite von 720 Pixeln platzieren.

body {
margin: 0;
padding: 0;
text-align: center;
}
#page {
width: 720px;
margin: 0 auto;
text-align: left;
}

Die Überschriften innerhalb meines Kopfbereichen sind jetzt sehr nah am Rand weswegen ich ihnen etwas Abstand gegeben habe.

#branbing {
padding: 5px;
}

Im Prinzip werde ich jedem „div“-Container diesen Abstand geben. Ich habe ihn bewusst in die Layout-Datei und nicht in die Design-Datei geschrieben, weil er die Breiten der „div“-Container beeinflusst.

Um die zwei Spalten zu platzieren, habe ich beide per „float“-Befehl angeordnet, ihnen Breiten und Abstände gegeben.

#content {
float: left;
width: 500px;
margin-right: 10px;
padding: 5px;
}
#sidebar {
float: left;
width: 190px;
padding: 5px;
}

Damit der Fußbereich dann auch wieder unterhalb dieses Bereiches weiterläuft, habe ich auch ihn in der Layout-Datei ein paar Werte gegeben.

#copyright {
clear: both;
padding: 5px;
}

Zum Schluss habe ich noch den Inhalt der Administrationsbox layoutet. Dabei rücke ich den Code per Tab weiterein je tiefer die Verschachtelung ist.

#content .adminBox {
font-size: 0.8em;
}
#content .adminBox p {
margin: 0;
}
#content .adminBox li {
display: inline;
}
#content .adminBox li a {
float: left;
display: block;
}

Design-Datei

Zur Zeit habe ich nur wenige design-technische Änderungen vorgenommen. Als erstes habe ich allgemeinen Definitionen erstellt.

body {
color: #FFF;
background-color: #CCC;
font: 14px/1.4em “Trebuchet MS”, Arial, Helvetica, sans-serif;
}
input:focus, textarea:focus, select:focus {
color: #000;
background: #fff;
border: 1px solid red;
}

Div-Page

Der „page“-Container bekommt zusätzlich noch eine kleine Überarbeitung.

#page {
color: #000;
background-color: #FFF;
}

Div-Branding

Da in meinem Fall der Kopfbereich nur Angaben über das Projekt enthalten soll besteht dieser nur aus zwei Überschriften.

```
	RE-Design
```
```
	REDcms Advents
```

In der CSS-Datei wird dann folgende Formatierung darauf angewendet:

#branding {
background-color: #333;
color: #FFF;
font-family: Georgia,”Time New Roman”, Times, serif;
font-style: italic;
}
#branding h1 {
font-size: 3em;
line-height: 1em;
}
#branding h2 {
font-size: 1.5em;
line-height: 1em;
color: #3C0;
}

Div-Content

Als nächstes werden alle wichtigen Tags im „content“-Container definiert.

#content h2, #content h3, #content h4, #content h5, #content h6 {
font-family: Georgia,”Time New Roman”, Times, serif;
font-style: italic;
line-height: 1em;
margin-bottom:0.5em;
}
#content h2 {
font-size: 2em;
}
#content h3 {
font-size: 1.4em;
}
#content h4 {
font-size: 1.2em;
}
#content h5 {
font-size: 1.1em;
}
#content h6 {
font-size: 1em;
}
#content p {
margin-bottom: 1em;
text-align: justify;
}

Zusätzlich werden noch die Listen der Metaangaben gestylt.

#content ul.meta {
font-size: 0.8em;
}
#content ul.meta li {
margin-bottom: 0.5em;
}

Auch die angezeigten Formulare sind nicht von der Überarbeitung durch das Design-CSS verschont geblieben.

#content .add fieldset {
border: 1px solid #333;
padding: 5px;
margin-bottom: 1em;
}
#content .add legend {
border: 1px solid #333;
background-color: #CCC;
padding: 0 1em;
}
#content .add label {
font-size: 0.8em;
}
#content .add label.before {
display: block;
}
#content .add input,
#content .add textarea {
width: 470px;
font-family: sans-serif;
font-size: 1em;
padding: 5px;
}
#content .add option:hover {
background-color: #CCC;
}

Div-Sidebar

Da in der Sidebar mehrere Boxen existieren können, habe ich als erstes grundlegende Einstellungen vorgenommen.

#sidebar .box {
border:1px solid;
margin-bottom: 1em;
}
#sidebar .box h4 {
background-color:#333;
color: #FFF;
text-align: center;
margin-bottom: 0.2em;
}

Für die Navigation gab es dann noch separate Einstellungen.

#sidebar #navigation {
}
#sidebar #navigation ul {
margin: 5px 5px 1em 5px;
}
#sidebar #navigation ul ul {
margin: 0 0 0 1.5em;
}

Ebenso für den Login bzw. das Logout und die Box „über mich“.

#sidebar #login {
}
#sidebar #login p {
font-size: 0.8em;
margin: 5px;
}
#sidebar #login legend {
font-style: italic;
margin: 0;
padding: 0;
text-transform: uppercase;
}
#sidebar #login strong {
font-weight: bold;
text-transform: uppercase;
}
#sidebar #login ul {
margin: 5px;
}
#sidebar #login a {
padding-left: 20px;
}
#sidebar #login .page {
background: transparent url(“/REDcms/templates/images/icons/page.png”) no-repeat;
}
#sidebar #login .box {
background: transparent url(“/REDcms/templates/images/icons/box.png”) no-repeat;
border: none;
}
#sidebar #login .menu {
background: transparent url(“/REDcms/templates/images/icons/menu.png”) no-repeat;
}
#sidebar #about_us {
}
#sidebar #about_us p {
font-size: 0.8em;
margin: 5px;
}

Div-Footer

Was noch fehlt, ist der Fußbereich. Hier sind nur die Farben geändert worden.

#copyright {
background-color: #333;
color: #FFF;
}
#copyright a {
color: #FFF;
}

Div-Debug

Eine kleine Besonderheit habe ich meinen Debugging gegeben. Jedes mal wenn die allgemeine Funktion „code()“ aufrufe, erzeuge ich eine „div“-Container mit der Klasse „debug“.

function code($msg, $code=HTML_CODE)
{
$msg = print_r($msg, true);
if($code == HTML_CODE)
{
$msg = htmlentities($msg);
}
echo
‘
```
’.$msg.‘
```
’
;
}

Zusätzlich designe ich per CSS das dieser Container über allem anderen angezeigt werden soll. Somit sehen ich ihn immer.

.debug {
position:absolute;
width: 300px;
height: 400px;
overflow: auto;
text-align: left;
padding: 5px;
color: #FFF;
background-color: #300;
border: 1px solid #000;
}

Print-Design

Eigentlich wollte ich eine spezielle Druckversion per CSS für die Ausgabe erstellen – doch leider fehlte mir dafür die Zeit. Da sie aber auch schon auf meiner ToDo-Liste steht, wird sie bestimmt im nächsten Release vorhanden sein.

Ich hoffe ihr habt Verständnis dafür.

Downloads

Tag 19 – Formulare

admin — Thu, 18 Dec 2008 22:00:24 +0000

In vielen Artikeln in diesem Adventskalender habe ich schon über die verwendeten Formulare berichtet. Heute möchte ich mich diesen Formularen etwas genauer widmen.

Page-Formular

Als erstes möchte ich das „Page“-Formular beschreiben. Wie schon im Artikel über die „Page“-Klasse geschildert werden nicht viele Information, die sich in 2 Gruppen unterteilen, vom Benutzer verlangt.

Im Inhaltsbereich wird der Titel der Seite, der Name des Autors und der Einführungstext angegeben, wobei nur der Titel als Pflicht verlangt wird. Da der Einführungstext sehr umfangreich sein kann, habe ich mich hier entschlossen einen online WYSIWYG-Editor einzubinden.

In den 2. Teil des Formulars werden vom Benutzer Zusatzinformationen für die Seite abgefragt. Als erstes ist das der Dateiname des zu verwendenden Templates. Mit der Select-Box kann der Veröffentlichungszustand der Seite angegeben werden. Die letzte Angabe, das Berechtigungslevel, wird zwar zur Zeit noch nicht benötigt, weshalb der Wert Null ist, kann aber später für bestimmte Zugangsberechtigungen dienen. So können später die einzelnen Seiten über verschiedene Level vor nicht berechtigten Besuchern geschützt werden.

Menu-Formular

Ähnlich wie das „Page“-Formular braucht auch das „Menü“-Formular nicht wirklich viele Angaben. Im Gegensatz zum „Page“-Formular sind die Eingaben aber in 3 Bereiche untergliedert.

Im ersten werden Angaben über den Namen des Menüpunktes und seinen Titel, er ist optional, verlangt.

Im zweite Teil des Formulars werden die Verbindungsangaben benötigt. Da der Benutzer beim Anlegen einer neuen Seite nicht direkt mitangeben muss wie sie im System verlinkt ist, kann er dies nun nachholen. Auch ist es so möglich mehrere Menüpunkte auf eine Seite zu verlinken oder er kann Seiten anlegen, die gar nicht verlinkt sind, wie z.B. Fehlerseiten.

Der letzte Bereich ist, ähnlich wie bei dem „Page“-Formular, wieder mit den Meta-Angaben über den Menüpunkt bestückt.

Box-Formular

Das letzte Formular in diesem Artikel ist das „Box“-Formular. Es ist wohl das umfangreichste von den Drein. Auch hier sind die Angaben in 3 Bereiche unterteilt.

Der Inhaltsbereich verlangt wieder nach einem Titel und nach einem Einführungstext, wie beim „Page“-Formular. Zusätzlich kann aber optional auch noch ein weiterführender Text mit angegeben werden. So ist es später möglich Übersichtsseiten mit nur den Einführungstexten der Boxen zu erstellen und über einen Link zu den weiterführenden Informationen zu gelangen.

Da jede Box zu einer Seite zugewiesen werden muss, wird im zweiten Teil des Formulars nach der Seite für die Box gefragt.

Wie bei den beiden vorhergehenden Formularen werden auch hier, im dritten Teil des Formulars werden vom Benutzer Angaben über das zu verwendende Template, über den Veröffentlichungsstatus und dem Zugriffslevel verlangt.

Donwloads

Dreamweaver und CSS

admin — Thu, 18 Dec 2008 07:13:00 +0000

Seit gestern gebe ich beim KW Trainingszentrum eine offenes Seminar zum Thema Dreamweaver und CSS. Es ist schön Teilnehmer zu haben, die schon mit den Grundlagen des Programmes vertraut sind. So kann man direkt mit den bevorzugten Interessen der Teilnehmer beginnen.

Warum möchten Teilnehmer Dreamweaver in einer Schulung lernen, wo es doch so viele Bücher, Lern-DVDs und online Tutorials gibt? Ich glaube es liegt an der Bequemlichkeit. In den Schulungen kann man den Trainer direkt fragen. Wenn man ein Problem mit der Erstellung seiner Website hat, kann der Trainer direkt helfen. Bei allen anderen Medien muss man erst selber auf die Suche nach einer Lösung gehen und hoffen, dass jemand dieses spezielle Problem schon mal gelöst und veröffentlicht hat.

Tag 18 – HTML-Vorlagen

admin — Wed, 17 Dec 2008 22:00:05 +0000

Heute möchte ich etwas über die verwendeten Templates schreiben. Wie schon im Artikel über die „Template“-Klasse geschrieben habe, setzt sich die Website aus verschiedenen Code-Schnipsel zusammen. Sie werden ineinander verschachtelt.

Index-Seite

In der Index-Seite steht das gesamte Grundgerüst. Neben dem allgemeinen Aufbau der HTML-Seite werden hier auch alle CSS-Dateien und JavaScript-Dateien geladen.

DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“de” lang=“de”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8″ />
<title>##TITLEBAR##title>
<link rel=“stylesheet” href=“##BASEURL##/templates/styles/reset.css” />
<link rel=“stylesheet” href=“##BASEURL##/templates/styles/layout.css” />
<link rel=“stylesheet” href=“##BASEURL##/templates/styles/design.css” />
<script type=“text/javascript” src=“##BASEURL##/templates/scripts/script.js”>script>
<style type=“text/css”>style>
head>
<body lang=“de” dir=“ltr”>
<div id=“page”>
<div id=“branding”>
<h1>##WEBSITETITLE##h1>
<h2>##TAGLINE##h2>
div>
<div id=“main”>
<div id=“content”>
##CONTENT##
div>
<div id=“sidebar”>
##SIDEBAR##
div>
div>
<div id=“copyright”>
<p>© 2008 – <a href=“http://www.re-design.de”>RE-Designa>p>
<ul class=“valid”>
<li><a href=“http://validator.w3.org/check?uri=referer”><img src=“http://www.w3.org/Icons/valid-xhtml10″ alt=“Valid XHTML 1.0 Transitional” height=“31″ width=“88″ />a>li>
<li><a href=“http://jigsaw.w3.org/css-validator/”><img style=“border:0;width:88px;height:31px” src=“http://jigsaw.w3.org/css-validator/images/vcss” alt=“CSS ist valide!” />a>li>
ul>
div>
div>
body>
html>

In dieser Datei gibt es eigentlich nur zwei Schlüsselworte die durch neue Schnipsel ersetzt werden: ##CONTENT## und ##SIDEBAR##. Die restlichen Schlüsselworte werden direkt in der „Application“-Klasse mit Inhalt gefüllt.

Content-Bereich

Da der Content-Bereich sehr viele verschiedene Aufgaben erfüllen muss, gibt es auch sehr viele verschiedene Code-Schnipsel die an diesem Platz eingesetzt werden:

page.tpl.html
page.form.tpl.html
menu.form.tpl.html
box.form.tpl.html

Der wohl wichtigste Bereich in diesem System ist die „page.tpl.html“-Datei, weswegen ich sie hier auch näher mal beschreibe.

Page-Bereich

Der „Page“-Vorlage wird von der „Page“-Klasse benutzt und mit Inhalt gefüllt. Aber zusätzlich wird in der „Page“-Klasse auch die Inhalte für die einzelnen Boxen gesammelt. Deshalb wird das „##BOXES##“-Schlüsselwort nicht direkt von der „Page“-Klasse gefüllt.

<div class=“page” id=“page_##ID##”>
<h2>##TITLE## ##ADMIN##h2>
<ul class=“meta”>
<li>##AUTHOR##li>
<li>##MODIFIED##li>
ul>
<div class=“teaser”>
##TEASER##
div>
<div class=“boxes”>
##BOXES##
div>
div>

Box-Bereich

Wie gerade beschrieben, füllt die „Box“-Klasse die „Box“-Vorlage und gibt sie dann an die „Page“-Klasse weiter, die diese dann an den richtigen Platz innerhalb der „Page“-Vorlage einsetzt.

<div class=“teaserbox” id=“box_##ID##”>
<h3>##TITLE## ##ADMIN##h3>
<ul class=“meta”>
<li>##MODIFIED##li>
ul>
<div class=“teaser”>##TEASER##div>
<div class=“body”>##BODY##div>
div>

Sidebar-Bereich

Auch die „Sidebar“-Vorlage wird von eine Klasse benutzt. Allerdings gibt es hier keine eigene Klasse sondern es ist die gleiche wie schon bei der „Index“-Vorlage. Es ist die „Application“-Klasse.

<h3>Sidebarh3>
<div class=“box” id=“navigation”>
##NAVIGATION##
div>
<div class=“box” id=“login”>
##LOGIN##
div>
<div class=“box” id=“about_us”>
<h4>Über das Projekth4>
<p>Die ist nur ein kleines CMS-Beispiel. Ich hoffe ihr habt Spaß dieses zu benutzen. Falls ihr Fehler findet dann schreibt eine Nachricht an: <a href=“mailto:enrico@re-design.de” class=“nowrap”>enrico@re-design.dea>p>
div>

Die „Application“-Klasse füllt dabei 2 Schlüsselworte mit Inhalt. Auf der einen Seite (##NAVIGATION##) ist es die Menüstruktur und auf der anderen Seite (##LOGIN##) der Administrationskasten. Zusätzlich ist hier auch noch ein fester Kasten eingetragen. Er kann später entweder mit mehr, bzw. anderen Inhalt gefüllt oder gelöscht werden.

Downloads

REDcms_13.zip

Tag 17 – WYSIWYG-Editor

admin — Tue, 16 Dec 2008 22:00:11 +0000

Ein „WYSIWYG“-Editor ist ein Bearbeitungswerkzeug für Texte. Da der sichtbare Text im Browser nicht unbedingt mit dem im Quellcode übereinstimmt, müsste der Redakteur im einfachsten Fall den Quellcode von Hand schreiben. Dies ist aber fast immer sehr umständlich und zeitaufwändig.

Deshalb haben Software-Programmierer Werkzeuge entwickelt in denen man relativ einfach seinen Text schreiben kann und über spezielle Buttons dann nach seinen Wünschen formatieren. Die Software übernimmt dann die Formatierung. Das macht das Arbeiten mit HTML-Quellcode recht simple. Trotzdem sollte man immer wissen was man tut. Schließlich herrschen im Internet ein paar andere Regeln als im alt geliebten Druck.

FCKeditor

Ich habe mich bei REDcms für den FCKeditor entschieden. Er ist sehr einfach an die speziellen Bedürfnisse anzupassen, bietet aber trotzdem einen sehr großen Funktionsumfang.

Der Editor wurde mit JavaScript umgesetzt und ersetzt ein Eingabefeld durch den im iframe befindlichen Editor. Das Einbinden kann über verschiedene Sprachen geschehen. In meinem Fall ist das PHP 5. Die Syntax zum Einbinden des Editors bzw. die Verwendung der „Editor“-Klasse sieht dann wie folgt aus:

$teaser = new FCKeditor(‘teaser’);
$teaser->Value = ‘
Anzuzeigender Text
’;
$teaser->Create();

Der übergebene Parameter beim Instanziieren der „Editor“-Klasse ist die ID des „textarea“-Tags der ersetzt werden soll. Um den Editor an den Browser zu senden kann man benutzen. In meinem Fall benutze ich die „CreateHTML()“-Methode der „Editor“-Klasse, um sie individuell in mein System einzusetzen.

Konfiguration

Die Konfiguration des Editors ist recht simple, da fast alle wichtigen Einstellungen schon vorgegeben sind. Da ich aber in meinem Fall ein paar Änderungen bzw. Anpassung vornehmen wollte, habe ich die „FCKeditor“-Klasse mit meiner „Editor“-Klasse erweitert.

Der Editor geht als erstes davon aus im Stammverzeichnis der Domain abgespeichert zu sein. Da ich mein System aber flexibel halten wollte, habe ich die „BasePath“-Eigenschaft angepasst. Auch habe ich die „ToolbarSet“-Eigenschaft auf „REDcms“ geändert. So kann ich in der Konfigurationsdatei des Editors meine eigenen Menüleisten erstellen. Auch empfand ich die Höhe des Eingabebereiches als zu klein, weswegen ich die „Height“-Eigenschaft auf 400 Pixel gesetzt habe. Zum Schluss passte ich die Konfiguration selbst mit 3 Einstellungen noch ein wenig an. Als erstes habe ich den Pfad zur Konfigurationsdatei geändert. Dann die Spracheinstellung auf deutsch geändert und zum Schluss die Verwendung des „LinkBrowsers“ aktiviert.

class Editor extends FCKeditor
{
function __construct( $instanceName )
{
parent::__construct( $instanceName );
$this->BasePath = BASEURL.‘/fckeditor/’;
$this->ToolbarSet = ‘REDcms’;
$this->Config["CustomConfigurationsPath"] = BASEURL.“/templates/scripts/myEditorConfig.js”;
$this->Config['DefaultLanguage'] = ‘de’;
$this->Height = 400;
$this->Config['LinkBrowser'] = true;
}
function __destruct(){}
}

myEditorConfing.js

Alle weiteren Einstellungen für die Inbetriebnahme des Editors habe ich dann in die „myEditorConfig.js“-Datei ausgelagert. So kann auch später noch relativ schnell Anpassungen vorgenommen werden.

Als erstes habe ich, wie oben schon beschrieben, meine neuen Menüleisten konfiguriert.

FCKConfig.ToolbarSets["REDcms"] = [
['Source','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteWord','-','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
‘/’,
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
‘/’,
['Style','FontFormat'],
['FitWindow','ShowBlocks','-','About'] // No comma for the last row.
] ;

Als nächstes habe ich die URLs des „LinkBrowser“ angepasst. Damit habe ich die Möglichkeit Links auf Dateien, wie z.B. Bilder, Flash-Dateien oder ähnliches, schnell und komfortabel zu regeln.

FCKConfig.LinkBrowserURL = ‘/REDcms/ckfinder/ckfinder.html’;
FCKConfig.ImageBrowserURL = ‘/REDcms/ckfinder/ckfinder.html?type=Images’;
FCKConfig.FlashBrowserURL = ‘/REDcms/ckfinder/ckfinder.html?type=Flash’;
FCKConfig.LinkUploadURL = ‘/REDcms/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files’;
FCKConfig.ImageUploadURL = ‘/REDcms/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images’;
FCKConfig.FlashUploadURL = ‘/REDcms/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash’;

CKfinder

Um aber auch den „LinkBrowser“ benutzen zu können, habe ich die Erweiterung „CKfinder“ des FCKeditor mit in mein System installiert. Sie erweitert den Editor um die Möglichkeit komfortabel Dateien die verlinkt werden sollen, zu managen. Die Erweiterung ist so eingestellt dass sie automatisch im Unterordner „userfiles“ des REDcms-System nach Dateien sucht. Auch hier gibt es eine Konfigurationsdatei „config.php“, aber die Anpassungen sind hier mit einer kleinen Änderung schnell erledigt. Geändert werden muss nämlich nur wieder einmal die „$baseUrl“.

$baseUrl = ‘/REDcms/userfiles/’;

Leider konnte ich hier nicht mit meiner Konstanen „BASEURL“ arbeiten, da diese Datei separat aufgerufen wird und nicht direkt ins System eingebunden ist. Vielleicht werde ich später noch eine Routine dafür schreiben.

Downloads

REDcms_12.zip

Tag 16 – Zusatzklassen

admin — Mon, 15 Dec 2008 22:00:36 +0000

So bald habe wir es geschafft alle Klassen zu beschreiben. Es fehlen jetzt nur noch 2 Hilfsklassen. Auf der einen Seite ist das die „Date“-Klasse und auf der anderen die „Editor“-Klasse.

Date Class

Als erstes nun die „Date“-Klasse. Sie hat im gesamten System die wohl kleinste Rolle, denn sie managt die Konvertierung von einer internationalen Schreibweise der Zeit (YYYY-MM-DD HH:MM:SS +00:00) in eine deutsche Schreibweise. Dabei unterscheide ich 2 verschiedene Ausgaben. Einmal ist das die Kurzschreibweise des Datums (DD. MM. YYYY) und dann noch die umfangreichere Schreibweise (Tag. Monatsname Jahr).

class Date
{
static $formatShort;
static $formatLong;
static function setShortFormat($format)
{
self::$formatShort = $format;
}
static function setLongFormat($format)
{
self::$formatLong = $format;
}
static function getShortFormat($date)
{
$ts = strtotime($date);
return strftime(self::$formatShort, $ts);
}
static function getLongFormat($date)
{
$ts = strtotime($date);
return strftime(self::$formatLong, $ts);
}
}

Um die Darstellung des Formates schnell ändern zu können wird diese in der Konfiguration abgespeichert und kann dadurch jeder Zeit geändert werden.

[Application]
dateformatlong = “%d. %B %Y”
dateformatshort = “%d. %m. %Y”

Ich habe mich bewusst hier für statische Methoden entschieden, um schneller auf die Konvertierungen zuzugreifen. So bekomme ich mit dem Befehl „Date::getLongFormat()“ und dem übergebenen Zeitstempel direkt die deutsche Schreibweise.

Editor Class

Um die Texte online besser editieren zu können habe ich mich für FCKeditor als WYSIWYG-Editor, also als Online-Editor entschieden. Dadurch wird den Redakteuren die Arbeit mit REDcms erleichtert. Wobei man nicht vergessen darf dass es nur ein Hilfsmittel ist. Die Kenntnisse über HTML wird trotzdem vorausgesetzt.

In der „Editor“-Klasse, die die „FCKeditor“-Klasse des Online-Editors erweitert, wird nur während der Instanziierung verschiedene Einstellungen schon mal mit geladen. Wie z.B. wo der Editor gespeichert ist, wo die Konfiguration zu finden ist, bzw. welche Sprache der Editor benutzen soll.

class Editor extends FCKeditor
{
function __construct( $instanceName )
{
parent::__construct( $instanceName );
$this->BasePath = BASEURL.‘/fckeditor/’;
$this->ToolbarSet = ‘REDcms’;
$this->Config["CustomConfigurationsPath"] = BASEURL.“/templates/scripts/myEditorConfig.js”;
$this->Config['DefaultLanguage'] = ‘de’;
$this->Height = 400;
$this->Config['LinkBrowser'] = true;
}
function __destruct(){}
}

Downloads

REDcms_11.zip

Tag 15 – Login Class

admin — Sun, 14 Dec 2008 22:00:51 +0000

Nachdem ich gestern wiedermal eine sehr umfangreiche Klasse beschrieben habe, heute nun wieder etwas einfacheres – die „Login“-Klasse.

Sie regelt das An- und Abmelden am System. Um die angemeldeten User verwalten zu können, nutze ich Sessions. Deshalb wird im Konstruktor mit der „session_start()“-Funktion eine Verbindung zur Session aufgebaut.

function __construct()
{
session_start();
}

Nach einer erfolgreichen Anmeldung z.B. werden in einer Session-Variablen „$_SESSION['REDcms']“ die Werte des Benutzers abgespeichert. Das geschieht in der „checkLogin()“-Methode. Sie prüft ob innerhalb der globalen Variablen „$_POST“ die korrekten Angaben sich befinden, die in der Klasse selbst abgespeichert sind.

public function checkLogin()
{
if($_POST['user'] == self::$user && $_POST['password'] == self::$password)
{
$_SESSION['REDcms'] = array();
$_SESSION['REDcms']['user'] = $_POST['user'];
$_SESSION['REDcms']['access'] = 0;
}
header(‘Location: ‘.$_POST['request']);
exit();
}

Natürlich gibt es auch die „logout()“-Methode, die die gespeicherten Werte aus der Session wieder löscht.

public function logout()
{
$_SESSION['REDcms'] = array();
unset($_SESSION['REDcms']);
header(‘Location: ‘.$_POST['request']);
exit();
}

So kann über die „isLogged()“-Methode relativ einfach überprüft werden ob der Benutzer angemeldet ist oder nicht. Das ist besonders bei den Verarbeitungsmethoden der „Page“-, „Box“- und „Menu“-Klasse wichtig.

public function isLogged()
{
if(isset($_SESSION['REDcms']) && $_SESSION['REDcms']['user'] == self::$user)
{
return true;
}
return false;
}

Als letztes gibt es noch die „getAdminBox()“-Methode. Sie hat die Aufgabe bei nicht angemeldeten Benutzern das Anmelde-Formular, bzw. bei angemeldeten Benutzern eine zusätzliches Menü anzuzeigen.

public function getAdminBox()
{
$content = ‘
Administration
’;
$tpl = new Template(TEMPLATEPATH);
if(empty($_SESSION['REDcms']))
{
$tpl->load(‘login.tpl.html’);
$tpl->set(‘##URL##’, BASEURL.‘/login.php’);
}
else
{
$tpl->load(‘logout.tpl.html’);
$tpl->set(‘##URL##’, BASEURL.‘/logout.php’);
$tpl->set(‘##URLPAGE##’, BASEURL.‘/page/0/add’);
$tpl->set(‘##URLBOX##’, BASEURL.‘/box/0/add’);
$tpl->set(‘##URLMENU##’, BASEURL.‘/menu/0/add’);
$tpl->set(‘##USERNAME##’, $_SESSION['REDcms']['user']);
}
if(isset($_SERVER['REDIRECT_URI']))
{
$tpl->set(‘##REQUEST##’, $_SERVER['REDIRECT_URL']);
}
else
{
$tpl->set(‘##REQUEST##’, BASEURL);
}
$content .= $tpl->get();
return $content;
}

Um die An- und Abmeldung relativ einfach zu machen, habe ich für jeden Prozess eine eigene PHP-Seite erstellt. Der Inhalt dieser Dateien ist sehr überschaubar.

error_reporting(E_ALL | E_WARNING);
require_once ‘includes.php’;
$login = new Login();
$login->checkLogin();
?>

error_reporting(E_ALL | E_WARNING);
require_once ‘includes.php’;
$login = new Login();
$login->logout();
?>

Zu einem späteren Zeitpunkt werde ich wahrscheinlich diese separaten Dateien mit in die „index.php“-Datei integrieren.

Downloads

REDcms_10.zip

Tag 14 – Template Class

admin — Sat, 13 Dec 2008 22:00:38 +0000

Schon seid vielen Jahren benutzte ich diese Klasse. Immer wenn ich ein kleines Template-System brauche setze ich auf diese Klasse. Die Funktionsweise meiner Klasse ist dabei recht einfach.

Als erstes wird im Konstruktor festgelegt wo die Vorlagen zu finden sind, dazu wird ihn der Pfad mit übergeben. Zusätzlich wird die „value“-Eigenschaft mit einem leeren Array vorbereitet.

public function __construct( $path )
{
$this->path = $path.‘/’;
$this->values = array();
}

Um aber auch eine konkrete Vorlage zu laden, gibt es in der „Template“-Klasse die „load()“-Methode. Ihr wird der Dateiname übergeben. Die geladene Datei wird als String in die „source“-Eigenschaft abgelegt. Zusätzlich wird die „reload()“-Methode aufgerufen.

public function load( $file )
{
$this->source = file_get_contents( $this->path.$file );
$this->reload();
}

Sie kopiert den geladene String in die „template“-Eigenschaft. So muss nicht beim wiederholten Aufrufen der gleichen Vorlage immer wieder erst die Datei von der Festplatte geladen werden.

public function reload()
{
$this->template = $this->source;
}

Über die „set()“-Methode werden die Werte mit ihren Schlüsselworten in die Klasse geladen. Dabei werden 2 Parameter erwartet: der Schlüssel mit folgender Schreibweise „##SCHLÜSSELNAME##“ (Name in Großbuchstaben) und optional ein Wert.

public function set( $key, $value=” )
{
$this->values[$key] = $value;
}

Neben der „set()“-Methode gibt es natürlich auch die „get()“-Methode. Sie hat als Aufgabe aus dem Template einen brauchbare Quellcode für den Browser zu generieren. Dabei prüft sie als erstes ob überhaupt das Template schon geladen wurde. Danach ruft sie die „parse()“-Methode auf, um das Template mit den Werten zu verarbeiten. Falls der Methode über der „sourcecode“-Parameter der statische Wert Template::DISPLAY_CODE mitgegeben wurde, wird die Ausgabe in lesbaren HTML-Code konvertiert.

public function get( $sourcecode=true )
{
if( $this->source==null || $this->source==” )
{
return null;
}
$this->parse();
if( !$sourcecode )
{
$out =
‘
```
’;
```
$out .= htmlentities( $this->template );
$out .= ‘’;
}
else
{
$out = $this->template;
}
return $out;
}

Die „parse()“-Methode hat nun die Aufgabe die Schlüsselworte innerhalb der Vorlage durch die Werte innerhalb der „values“-Eigenschaft zu ersetzen. Dabei prüft sie als erstes ob überhaupt das Template schon geladen ist. Danach ersetzt sie alle Werte. Zum Schluss werden noch alle nicht ersetzten Schlüsselworte in der Vorlage gelöscht, um unschöne Darstellungen zu vermeiden.

private function parse()
{
if( $this->source == null || $this->source==” )
{
die(‘TPL-Error: file not loaded!’);
}
foreach ( $this->values as $key => $value )
{
$this->template = str_replace( $key, $value, $this->template );
}
$this->template = ereg_replace( ‘##[A-Za-z0-9_]+##’, ”, $this->template);
}

Als letzte Methode innerhalb der „Template“-Klasse gibt es noch die „write()“-Methode. Sie macht im Grunde genau das was die „get()“-Methode auch macht, nur gibt sie das Ergebnis direkt an den Browser weiter.

public function write( $sourcecode=true )
{
echo $this->get( $sourcecode );
}

Wie schon eingangs erklärt, ist diese Klasse eine meiner ersten Klassen die ich konstant in meinen Projekten einsetze. Die Verwendung ist dabei sehr einfach. Als erstes erstellt man eine Vorlagendatei mit folgenden exemplarischen Quellcode:

DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8″ />
<title>##TITLEBAR##title>
head>
<body lang=“de”>
<div id=“page”>
<div id=“branding”>
<h1>##WEBSITETITLE##h1>
<h2>##TAGLINE##h2>
div>
<div id=“main”>
<div id=“content”>
##CONTENT##
div>
<div id=“sidebar”>
##SIDEBAR##
div>
div>
<div id=“copyright”>
<p>© 2008 – <a href=“http://www.re-design.de”>RE-Designa>p>
div>
div>
body>
html>

Um diese Vorlage verwenden zu können muss man in PHP nur folgendes schreiben:

include_once ‘core/Template.php’;
$tpl = new Template(‘./templates/layouts’);
$tpl->load(‘index.tpl.html’);
$tpl->set(‘##TITLEBAR##’, ‘RE-Design - Beispiel-Template-Code’);
$tpl->set(‘##WEBSITETITLE##’, ‘RE-Design’);
$tpl->set(‘##TAGLINE##’, ‘Template-Klassen-Beispiel’);
$tpl->set(‘##CONTENT##’, ‘
Lorem ipsum dolor sit amet, … et netus et malesuada fames ac turpis egestas.
’);
$tpl->set(‘##SIDEBAR##’, ‘
Autor
Enrico Reinsdorf
’);
echo $tpl->get(Template::DISPLAY_HTML);
?>

Downloads

REDcms_09.zip

AJAX – PHP Schulung in Stuttgart

admin — Sat, 13 Dec 2008 11:34:00 +0000

Vom Montag bis Dienstag habe ich ein Einzelcoaching zum Thema AJAX-PHP-Programmierung gegeben. Der Teilnehmer war im öffentlichen Dienst (Gerichte) tätig und hatte schon viele Vorkenntnisse in PHP.

So haben wir uns dann auf die Schulung von JavaScript konzentriert. Thema war dann speziell das DOM-Scripting, sowie die Verarbeitung von XML-Daten und JSON.

Um die einzelnen Themen in einem kleinen Projekt besser verständlich zu machen, haben wir ein kleines Adressbuch programmiert.

Tag 13 – Content Class

admin — Fri, 12 Dec 2008 22:00:19 +0000

Ähnliche BeiträgeTag 16 – ZusatzklassenTag 15 – Login ClassTag 14 – Template ClassTag 10 – Request ClassTag 9 – Application Class

Tag 12 – Database Class

admin — Thu, 11 Dec 2008 22:00:15 +0000

Dies wird heute ein sehr kurzer Beitrag, denn ich habe nicht wirklich eine eigene „Database“-Klasse geschrieben. Vielmehr habe ich auf die „DB“-Klasse des PEAR-Frameworks zurückgegriffen, da dieses Framework mittlerweile in fast jeder installiert hat.

require_once (‘DB.php’);
class Database extends DB
{
}

Wichtig aus dieser Klasse ist einmal die „connect()“-Methode, die als ersten Parameter die Verbindungsangaben für die Datenbank als String erfordert. Der Rückgabewert dieser Methode ist dann das Datenbank-Objekt.

Mit diesem Objekt können dann alle SQL-Anfragen abgewickelt werden. Hier kein kleines Beispiel :

$query = ‘SELECT * FROM page’;
$res =& $db->query($query);
if (PEAR::isError($res)) {
die($res->getMessage());
}
while ($res->fetchInto($page))
{
array_push($pages, $page);
}

Downloads

REDcms_07.zip

Tag 11 – Configuration Class

admin — Wed, 10 Dec 2008 22:00:39 +0000

Jedes System sollte eine einfache Möglichkeit besitzen konfiguriert zu werden. In den meisten Fällen gibt es eine Konfigurationsdatei – so auch bei mir. Allerdings habe ich mir überlegt, die Konfiguration nicht in eine PHP-Datei einzubetten, sondern in eine INI-Datei. So ist es schnell möglich diese einfache Textdatei anzupassen.

Allerdings hat die Vorgehensweise auch Nachteile. Da diese besondere Datei nicht vor fremden Augen geschützt ist, kann sie jeder leicht einsehen, der die URL kennt. Um das Ausliefern der Datei von Apache zu verhindern, habe ich die „.htaccess“-Datei angepasst.

Order allow,deny
Deny from all

Kommen wir jetzt zur Konfigurationsdatei. Sie ist in 3 wichtige Bereiche eingeteilt. Der erste Bereich enthält Angaben die für die Webapplikation wichtig sind. Hier ist es z.B. die beiden Datumsformate um eine Kurz- und Langschreibweise des Datums festzulegen.

[Application]
dateformatlong = “%d. %B %Y”
dateformatshort = “%d. %m. %Y”

Im zweiten Bereich werden alle wichtigen Zugangsdaten für die Datenbank hinterlegt. In meinen Fall ist das die Serveradresse (host), der Benutzername (user), das dazugehörige Kennwort (password) und der Datanbank-Name (db)

[Database]
host = “localhost”
user = “demouser”
password = “password”
db = “redcms_advent”

Im letzten Bereich werden Informationen abgespeichert, die für das Anzeigen der Website wichtig sind. Da ich zur Zeit nur den Website-Titel und die Tagline brauche, habe ich auch das dort hingeschrieben.

[Website]
Title = “RE-Design”
Tagline = “REDcms Advents”

Was muss nun die „Configuration“-Klasse nun alles machen? Im Grunde genommen nur diese „INI“-Datei in einen zweidimensionalen Array laden und Methoden anbieten auf die Werte der Konfiguration zuzugreifen.

Das Laden der Konfigurationsdatei geschieht im Konstruktor. Mit der Methode „getValue()“ und ihrem 2 Parametern für die Sektion und dem Schüssel bekommt man den entsprechenden Wert zurück. Falls man statt einen einzelnen Wert die gesamte Sektion als Array bekommen möchte, so kann man mit der „getSection()“-Methode dies tun.

class Configuration
{
public $version = 1.0;
private $file;
private $config;
public function __construct($file) {
$this->file = $file;
try {
$this->config = parse_ini_file($file, true);
} catch (Exception $e)
< {
die(‘Config-Error parseIni: ‘.$e.‘: ‘.$file);
}
}
public function __destruct() {}
public function getValue($key, $section) {
return $this->config[$section][$key];
}
public function getSection($section) {
return $this->config[$section];
}
}

Um die „Configuration“-Klasse nicht versehentlich mehrmals zu laden, könnte man sie innerhalb eines Updates als Singelton-Pattern anlegen und benutzen. Auch wäre später das Ändern von Konfigurationseinstellungen möglich, womit man dann schnell im Administrationsbereich das System anpassen könnte.

Downloads

REDcms_06.zip

Tag 10 – Request Class

admin — Tue, 09 Dec 2008 22:00:54 +0000

Gestern hatte ich sehr ausführlich über die „Application“-Klasse geschrieben. Heute möchte ich über den Inhalt der „Request“-Klassen meines REDcms schreiben.

Die wichtigste Verarbeitung findet innerhalb des Konstruktors statt. Dem Konstruktor werden 2 Arrays als Parameter mit übergeben, wobei z.Z. nur der Erste wichtig ist. Es handelt sich hierbei um die „GET“-Werte der URL. Da ja per „mod_rewrite“ und „.htaccess“ Anhänge an die „index.php“-Datei gemacht werden.

Als erstes wird der Modus gesetzt, dabei kommen die 4 Klassenkonstanten Request::MODE_PAGE, Request::MODE_BOX und Request::MODE_MENU zum Einsatz.

Als nächstes wird die ID ausgelesen. Falls sie nicht vorhanden ist wird ihr Wert auf 1 gesetzt.

Zum Schluss wird versucht die Aktion aus dem „GET“-Wert zu ermitteln. Falls keiner vorhanden ist, wird standardmäßig die Aktion „show“ benutzt. Auch hier kommen wieder Klassenkonstanten zu Einsatz. Diesmal sind es aber 5 Stück: Request::ACTION_ADD, Request::ACTION_EDIT, Request::ACTION_UPDATE, Request::ACTION_DELETE und Request::ACTION_SHOW.

function __construct($get, $request)
{
$this->request = $request;
if (!empty($get['mode'])) {
switch ($get['mode']) {
case self::MODE_BOX:
$this->mode = self::MODE_BOX;
break;
case self::MODE_MENU:
$this->mode = self::MODE_MENU;
break;
default:
$this->mode = self::MODE_PAGE;
}
} else {
$this->mode = self::MODE_PAGE;
}
if (!empty($get['id']) && !is_nan($get['id'])) {
$this->id = $get['id'];
} else {
$this->id = 1;
}
if(!empty($get['action'])){
switch ($get['action']) {
case self::ACTION_ADD:
$this->action = self::ACTION_ADD;
break;
case self::ACTION_EDIT:
$this->action = self::ACTION_EDIT;
break;
case self::ACTION_UPDATE:
$this->action = self::ACTION_UPDATE;
break;
case self::ACTION_DELETE:
$this->action = self::ACTION_DELETE;
break;
case self::ACTION_SHOW:
default:
$this->action = self::ACTION_SHOW;
}
} else {
$this->action = self::ACTION_SHOW;
}
}

Warum arbeite ich nicht mit Strings sondern mit Konstanten, die ja auch Strings beinhalten? Durch die Verwendung von Konstanten gewährleiste ich, dass die Werte unverändert eingesetzt werden können. Ohne Angst haben zu müssen, dass sie versehentlich überschrieben werden. Auch kann ich so später aus den String-Konstanten relativ schnell z.B. Integer-Konstanten machen und die Verwendung bleibt gleicht.

Die restlichen Methoden dieser Klasse sind ausschließlich die „Getter“- und „Setter“-Methoden von Mode, ID und Action.

Downloads

REDcms_05.zip

Tag 9 – Application Class

admin — Mon, 08 Dec 2008 22:00:26 +0000

Wie schon im gestrigen Artikel geschrieben, ist die „Application“-Klasse die Hauptklasse meines Systems. Sie sorgt für den reibungslosen Ablauf beim Anfordern einer Seite.

Wie funktioniert nun so was? Eigentlich recht simple. Die „index.php“-Datei, die automatisch bei jedem Request, also beim Aufrufen einer Seite, gestartet wird, initialisiert die „Application“-Klasse und speichert sie in der Variable $app ab. Somit habe ich die Möglichkeit jeder Zeit weitere Methoden dieser Klasse aufzurufen. Obwohl, eigentlich brauche ich nur 2 Stück, und auch die könnten rein theoretisch reduziert werden.

„init()“-Methode

Was passiert bei der Instanziierung? Der Konstruktor ruft die private Methode „init“ auf und diese lädt die zusätzlich benötigten Objekte. Zuerst wird aber das Datumsformat mit „setlocale(LC_ALL, ‘de’);“ gesetzt.

Danach wird in die „config“-Variable die „Configuration“-Klasse instanziiert. Diese lädt die Konfiguration, die in der „configuration.ini“-Datei hinterlegt ist. Um später auch eine HTML-Ausgabe benutzen zu können, wird die „Template“-Klasse anschließend in die „tpl“-Variable geladen. Ihr wird die Konstante mit dem Pfad zum Template-Ordner übergeben.In einer lokalen Variablen wird aus der Konfiguration der Array mit den Verbindungsangaben für die Datenbank geladen. Und in einer 2. lokalen Variablen wird der String vorbereitet der später für den Aufbau einer Datenbank-Verbindung wichtig ist. Nun wird die Verbindung zur Datenbank hergestellt und in der „db“-Variable abgespeichert. Nach einer Fehlerüberprüfung ob die Verbindung zum Datenbankserver hergestellt werden konnte, werden zum Schluss die Datumsformate auf der Konfiguration in das System integriert.

private function init()

{

setlocale(LC_ALL, ‘de’);

$this->config = new Configuration(‘./configuration.ini’);

$this->tpl = new Template(TEMPLATEPATH);

$db = $this->config->getSection(‘Database’);

$dsn = ‘mysql://’.$db['user'].‘:’.$db['password'].‘@’.$db['host'].‘/’.$db['db'];

$this->db = Database::connect($dsn);

$this->db->setFetchMode(DB_FETCHMODE_OBJECT);

if($this->db->isError($this->db))

{

die($this->db->getMessage());

}

Date::setLongFormat($this->config->getValue(‘dateformatlong’, ‘Application’));

Date::setShortFormat($this->config->getValue(‘dateformatshort’, ‘Application’));

}

„main()“-Methode

Nach der Initialisierung wird über die „index.php“-Datei die „main()“-Methode aufgerufen. Als erstes in dieser Methode wird die „Request“-Klasse in die „request“-Variable geladen. Ihr werden die globalen Variablen $_GET und $_REQUEST übergeben. Dies wird benötigt um anschließend über eine „switch“-Verzweigung zu entscheiden welche Informationen in die Klassenvariable „content“ geladen werden. Zum Schluss wird in die Klassenvariable „sidebar“ die Informationen zum Anzeigen der Sidebar gespeichert.

public function main()

{

$this->request = new Request($_GET,$_REQUEST);

switch ($this->request->getMode())

{

case Request::MODE_BOX:

$this->content = $this->getBox($this->request->getId());

break;

case Request::MODE_MENU:

$this->content = $this->getMenu($this->request->getId());

break;

case Request::MODE_PAGE:

default:

$this->content = $this->getPage($this->request->getId());

break;

}

$this->sidebar = $this->getSidebar($this->request->getId());

}

„getBox()“-, „getMenu()“-, „getPage()“-Methode

Alle drei Methoden besitzen den gleichen Aufbau, weshalb ich hier nur die „getPage()“-Methode erklären möchte.

Als erstes wird die passende Klasse in eine Klassenvariable geladen. Ihr wird die Verbindung zum Datenbankserver mitgegeben. Als nächstes wird über die „request“-Variable und ihrer „getAction()“-Methode entschieden, welche Aktion nun folgen soll. Dabei gibt es 4 zur Auswahl.

hinzufügen
ändern
löschen
anzeigen

Wobei die letzte Aktion generell immer aufgerufen wird, wenn keine Aktion vorhanden sein sollte. Die habe ich mit eingefügt, falls das System mal keine Aktion in der „request“-Variable findet. Anschließend wird aus der jeweiligen Klasse der Titel für die Titelleiste des Browsers angefordert um ihn später mit dem Titel des Systems zu kombinieren.

private function getPage($id=1)

{

$this->page = new Page($this->db);

$content = ”;

switch ($this->request->getAction()) {

case Request::ACTION_ADD:

$content = $this->page->add();

break;

case Request::ACTION_EDIT:

$content = $this->page->edit($id);

break;

case Request::ACTION_DELETE:

$content = $this->page->delete($id);

break;

case Request::ACTION_UPDATE:

$content = $this->page->update();

break;

case Request::ACTION_SHOW:

default:

$content = $this->page->get($id);

break;

}

$this->titlebar = $this->page->getTitle();

return $content;

}

private function getBox($id=1)

{

$this->box = new Box($this->db);

$content = ”;

switch ($this->request->getAction()) {

case Request::ACTION_ADD:

$content = $this->box->add();

break;

case Request::ACTION_EDIT:

$content = $this->box->edit($id);

break;

case Request::ACTION_DELETE:

$content = $this->box->delete($id);

break;

case Request::ACTION_UPDATE:

$content = $this->box->update();

break;

case Request::ACTION_SHOW:

default:

$content = $this->box->get($id);

break;

}

$this->titlebar = $this->box->getTitle();

return $content;

}

private function getMenu($id=1)

{

$this->menu = new Menu($this->db);

$content = ”;

switch ($this->request->getAction()) {

case Request::ACTION_ADD:

$content = $this->menu->add();

break;

case Request::ACTION_EDIT:

$content = $this->menu->edit($id);

break;

case Request::ACTION_DELETE:

$content = $this->menu->delete($id);

break;

case Request::ACTION_UPDATE:

$content = $this->menu->update();

break;

case Request::ACTION_SHOW:

default:

$content = $this->menu->get($id);

break;

}

$this->titlebar = $this->menu->getTitle();

return $content;

}

„getSidebar()“-Methode

In der „getSidebar()“-Methode wird als erstes in der lokalen Variable „login“ die Anzeigebox für die Sidebar gespeichert. Danach wird das selbe mit der Navigationsbox gemacht.

Zum Schluss wird dann mit Hilfe der Variable „tpl“ ein Template gefüllt und an die „main()“-Methode zurückgegeben.

private function getSidebar($id=1)

{

$login = Login::getAdminBox();

$navi = $this->getMenuBox(0);

$this->tpl->load(’sidebar.tpl.html’);

$this->tpl->set(‘##NAVIGATION##’, $navi);

$this->tpl->set(‘##LOGIN##’, $login);

return $this->tpl->get($id);

}

„getMenuBox()“-Methode

Hier wird einfach nur mit der „Menu“-Klasse der Navigationsbaum erstellt und an die „getSicebar()“-Methode zurückgegeben.

private function getMenuBox($page_id=1)

{

$content = ‘

Navigation

’;

$menu = new Menu( $this->db );

return $content.$menu->getTree( $page_id );

}

„display()“-Methode

Die letzte Methode innerhalb der „Application“-Klasse ist die „display()“-Methode. Auch diese wird ähnlich wie die „main()“-Methode von der „index.php“-Datei direkt aufgerufen. Hier laufen dann alle vorherigen Verarbeitungen zusammen.

Als erstes wird der Website-Titel aus der Konfiguration geladen. Danach wird dieser mit dem Seitentitel kombiniert.

Zum Schluss wird das Template geladen, mit den Informationen gefüllt und dann an die „index.php“-Datei zurückgegeben. Diese zeigt den Inhalt schließlich an.

public function display()

{

$website = $this->config->getSection(‘Website’);

$this->titlebar = $website['Title'].‘ – ‘.$this->titlebar;

$this->tpl->load(‘index.tpl.html’);

$this->tpl->set(‘##BASEURL##’, BASEURL);

$this->tpl->set(‘##TITLEBAR##’, $this->titlebar);

$this->tpl->set(‘##WEBSITETITLE##’, $website['Title']);

$this->tpl->set(‘##TAGLINE##’, $website['Tagline']);

$this->tpl->set(‘##CONTENT##’, $this->content);

$this->tpl->set(‘##SIDEBAR##’, $this->sidebar);

return $this->tpl->get();

}

Downloads

REDcms_04.zip

Tag 8 – Klassenprogrammierung

admin — Sun, 07 Dec 2008 22:00:58 +0000

Um ein flexibles aber dennoch stabiles Programmiergerüst zu bekommen, habe ich mich für das objekt-orientierte Programmieren entschieden. Das bedeutet, das die gesamte Funktionalität des Systems in Klassen gekapselt ist. Es gibt insgesamt 12 Klassen.

Klassenübersicht

In den folgenden Tagen werde ich die einzelnen Klassen näher erklären. An dieser Stelle möchte ich euch erstmal nur eine kleine Übersicht über die verwendeten Klasen geben.

Application
Request
Configuration
Database
Content
- Page
- Box
- Menu
Template
Login
Editor
Date

Ich habe versucht möglichst wenige Klassen zu benutzen, um den Überblick bei der Entwicklung nicht zu verlieren. Wobei die „Application“-Klasse hier ein sehr zentrale Rolle spielt. Weitere wichtige Klassen sind „Page“, „Box“ und „Menu“. Sie beinhalten die eigentliche Verarbeitung der einzelnen Bereiche.

In der „Request“-Klasse werden die Angaben der URL, also der Adressierung verarbeitet. Um REDcms schnell anpassen zu können, habe ich mich für die Verarbeitung von einer externen INI-Datei entschieden. So bekommt der Administrator einen schnellen Zugriff auf die wichtigsten Einstellmöglichkeiten ohne großartig in den einzelnen Klassen suchen zu müssen.

Um eine einfache Trennung zwischen der Programmierung und den HTML-Dateien zubekommen benutze ich eine eigenen „Template“-Klasse. Sie stellt mir alle wichtigen Funktionen für das Verarbeiten zur Verfügung.

Mit der „Login“-Klasse wird die An- und Abmeldung am System geregelt. Weiterhin kann darüber geprüft werden ob ein Benutzer berechtigt, also angemeldet, ist eine Seite bzw. deren Informationen einzusehen.

Um die Datumsausgabe besser zu verarbeiten, habe ich mir eine Hilfsklasse „Date“ erstellt. Damit bin ich in der Lage den Timestamp in ein deutsche Datumsformat zu konvertieren.Und ich habe noch zwei weitere Hilfsklassen erstellt. Wobei ich bei der „Database“-Klasse nur eine Ableitung der „DB“-Klasse des PEAR-Framework und bei der „Editor“-Klasse eine Ableitung des FCKeditors.

Tag 7 – Datenbankstruktur

admin — Sat, 06 Dec 2008 22:00:04 +0000

Ich habe mich bei der Umsetzung meines REDcms für eine mySQL-Datenbank entschieden, da die Verwaltung relativ einfach ist und sie bei den meisten Provider installiert ist. Auch kann man von den Apachefriends ein kostenloses Paket mit Server und Datenbank herunterladen und installieren.

Da mein System zur Zeit noch sehr einfach strukturiert ist, reichen mir 3 Datenbank-Tabellen: Page, Box und Menu.

Page-Tabelle

Page Tabelle

In dieser Tabelle werden alle Informationen abgespeichert die für das Anzeigen einer einzelnen Seite wichtig sind. Wobei nur Basisinformationen abgespeichert werden, denn jede Seite kann ja beliebig viele zusätzliche Boxen haben.

Was wird also nun in dieser Tabelle abgespeichert? Natürlich erstmal die ID der Seite, die für die Adressierung wichtig ist. Weiterhin der Seitentitel, um auch dem Besucher der Website einen aussagekräftige Namen zu präsentieren. Auch habe ich mir überlegt das jede Seite die Möglichkeit hat einen Einführungstext abzuspeichern, sowie den Namen des Autors.

Um die einzelne Seite individuell zu gestalten, wird zusätzlich der Dateiname eines Templates mit abgespeichert.

Box-Tabelle

Box Tabelle

Zunächst einmal wird in jeder Box neben der eigenen ID auch die ID der Seite abgespeichert. Weiterhin gibt es auch die Möglichkeit einen Titel, einen Einführungstext und einen Haupttext abzuspeichern. Während der Titel und der Haupttext zwingend notwendig sind, ist der Einführungstext optional. So habe ich mir die Möglichkeit offen gehalten später Übersichtsseiten in mein REDcms hinzuzufügen.

Auch wird hier wieder eine Template-Datei gefordert, um die Gestaltung individuell anzupassen. Zusätzlich wird noch die Sortierung der einzelnen Boxen innerhalb der Seite mit abgespeichert. Diese Sortierung wird aber in der derzeitigen Version (1.0) noch nicht mitberücksichtigt. Ich habe aber vor in eine der nächsten Versionen auch die Sortierung mit zu implementieren.

Menu-Tabelle

Menü Tabelle

Getrennt von den einzelnen Seiten speichere ich die Menüstruktur ab. Das hat den Vorteil, dass ich so Seiten anlegen kann, die nicht direkt in der Website erscheinen sollen, wie z.B. Übersichtsseiten mit Suchergebnissen oder die Folgeseite eines Formulars oder Fehlerseiten (404-Error, etc.). Auch kann ich so mehrere Menüpunkte auf ein und die selbe Seite verlinken, wenn es nötig sein sollte das der Inhalt öfters angezeigt werden soll.

Hier wird also, wie bei der Box neben der eigen ID auch die ID der Seite abgespeichert. Zusätzlich wird aber auch der anzuzeigende Name des Links und optional ein Titel abgespeichert.

Downloads

REDcms 03.zip

Tag 6 – hilfreiche Funktionen

admin — Fri, 05 Dec 2008 22:00:11 +0000

Da meine Application relativ klein ist, brauche ich nicht viele Hilfsfunktionen bzw. zusätzliche Dateien. Es werden lediglich 2 Dateien und selbst die können später bei den Optimierungsmaßnahmen vielleicht eingespart werden. Beide Dateien werden auf der obersten Ebene des Systems abgespeichert. So dass der Zugriff schnell stattfinden kann.

„include“-Datei

Zu einem ist das die „include“-Datei. Sie lädt über den Befehl „include_once()“ die einzelnen Dateien die für den reibungslosen Ablauf des Systems benötigt werden. Weiterhin enthält sie eine kleine Funktion, die ich nicht mehr missen möchte.

function code($msg, $code=HTML_CODE)
{
$msg = print_r($msg, true);
if($code == HTML_CODE)
{
$msg = htmlentities($msg);
}
echo ''.$msg.' ';
}

Sie ist sehr hilfreich, da es immer wieder vorkommt Quellcode, oder ähnliche Angaben im Browser zu veröffentlichen. Die Funktion erwartet mindestens einen Parameter – das was sie anzeigen soll. Der 2. Parameter ist hilfreiche wenn man HTML-Quellcode anzeigen möchte, da ja jeder Browser erstmal jeden Quellcode durch seine Render-Engine jagt und somit umwandelt. Standardmäßig wird jede Anzeige konvertiert, außer man setzt den 2. Parameter auf „HTML_RENDER“. Dabei handelt es sich, wie bei „HTML_CODE“ um eine Konstante, die 2. Datei definiert wird.

Auch habe ich noch eine 2. Hilfsfunktion eingebaut, sie aber später wieder daktiviert, weil sie bei den vielen Änderungen an der Struktur des Systems nur im Wege stand. Trotzdem möchte ich die hier kurz aufzeigen. Vielleicht kommt auch sie später wieder mit in die Application.

function __autoload($class_name)
{
$path = str_replace('_','/',$class_name);
$path = strtolower($path);
require_once('./core/'.$path.'.php');
}

„defines“-Datei

In der „defines“-Datei werden alle wichtigen Konstanten geladen, die das System und der Entwickler braucht. Gott sei dank sind das nur 4 Stück.

define('HTML_RENDER', 0);
define('HTML_CODE', 1);
define('BASEURL', dirname($_SERVER['PHP_SELF']));
define('TEMPLATEPATH', 'layouts');

Die ersten beiden Zeilen hatte ich ja gerade schon erklärt. Die Definition der BASEURL legt den absoluten Pfad zur Application fest. In meinen Fall ist das z.B. „http://www.re-design.de/weblabor/REDcms/demo“. So kann man später relativ schnell benötigte Dateien nachladen oder URL-Weiterleitungen programmieren.

Die letzte hat eigentlich das gleiche Ziel – schnell auf den Zielordner der Templates zuzugreifen. Wenn ich mir das aber hier jetzt näher ansehe, stelle ich fest dass es wohl auch sinnvoll wäre diese Definition in die Konfiguration des System auszulagern. So hat später der Verwalter des Systems schnelleren Zugriff um diesen Wert zu ändern. Vielleicht werden ich diese Angabe später noch optimieren.

Downloads

REDcms_02.zip

Tag 5 – Interaktion

admin — Thu, 04 Dec 2008 22:00:39 +0000

Die genaue Interaktion des Programmeres mit dem Benutzer ist sehr vielfältig. Als erstes kann man sich von dem Frontend, also dem Bereich den der normale Benutzer sieht, über eine Anmelde-Maske an das Backend, dem Administrationsbereich, anmelden.

Danach erscheinen im Administrationskasten 3 weitere Links, um eine neue Seite, eine neue Box oder einen neuen Menüpunkt anzulegen. Außerdem kann man über den Button „abmelden” sich vom Administrationsbereich wieder abmelden.

Weiterhin erscheint hinter jedem Seitentitel, jedem Boxtitel und jedem Menüpunkt zwei Icons. Eins um die Seite, die Box bzw den Menüpunkt zu bearbeiten und eins um es zu löschen.

Es gibt also auch bei meinem CMS die klassischen Möglichkeiten zur Verwaltung von Content: hinzufügen, bearbeiten und löschen.

Welche Idee steckt hinter diesen 3 Bereichen?

Als erstes war mir wichtig die einzelnen Seiten sehr flexibel zu halten. Dazu habe ich mir überlegt, dass die tatsächlichen Texte der Seite in einzelne Boxen zu verpacken. Dadurch kann eine Seite sehr individuell aufgebaut werden.

Seite-Angaben

Was beinhaltet nun eine Seite? Eigentlich nur ihren Seitentitel und den Namen des jeweiligen Templates. Alle weiteren Angaben wie Einleitungstext und Autor sind optional.

Box-Angaben

Auch in der Box gibt es nicht viele, zwingende Informationen. Hier sind es der Boxtitel, der Haupttext, der Name des jeweiligen Templates und die Auswahl zu welcher Seite die Box gehört. Optional kann aber auch hier ein Einleitungstext und die Position (die Stelle innerhalb der Boxauflistung in der Seite).

Menü-Angaben

Hier sind nur 3 Angaben zwingend notwendig: der Name des Menüeintrages, die Zuordnung zu eines bestehenden Seite und ob der Menüeintrag ein Untermenü eines bestehenden Eintrages ist. Optional kann der Link mit einem Titel belegt werden.

Weitere Angaben

In allen drei Bereichen besteht die Möglichkeit die Veröffentlichung zu verneinen und damit die Seite, die Box bzw. den Menüpunkt im Frontend nicht anzeigen zu lassen. Außerdem ist schon ein Eingabefeld eingebaut, welches später das Zugriffslevel, also die Berechtigung, definiert.

Downloads

Interaktion.zip

Tag 4 – URL-Design

admin — Wed, 03 Dec 2008 22:00:59 +0000

Das Schwierigste bei der Umsetzung von REDcms war das URL-Design. Ich wollte über eine Seite „index.php“ das alle Anfragen abgearbeitet werden. Früher hat man für jede Anfrage-Art eine eigene PHP-Seite erstellt. Wurde also die Übersichtsseite aufgerufen, dann gab es dafür bspw. eine Seite namens „overview.php“. Wurde hingegen die Detailseite aufgerufen, so gingen alle Befehle an die „detail.php“-Seite.

Bei komplexen bzw. skalierbaren Systemen entsteht dadurch schnell eine Unmenge an bei einzelnen Verarbeitungsdateien. Wenn man nun bedenkt, dass bei diesen Dateien oft ähnliche Verarbeitung zu Gange sind, wird einem schnell klar warum heutige CMS mit einer zentralen Verarbeitungsdatei arbeiten. Auch ich wollte bei REDcms diesen Trend verfolgen. Der Nachteil der dadurch entsteht, ist der das alle verarbeitungsrelevanten Befehle an diese zentrale Datei an gehangen werden müssen. Ein Beispiel für einen solchen Anhang wäre folgende URL:

„http://www.domain.tld/index.php?mode=page&id=1&action=show“

Solche URLs sind aber nicht gerade Suchmaschinen freundlich. Weswegen man mit der Konfigurationsdatei „.htaccess“ und der Modul-Erweiterung „mod-rewrite“ vom Apache-Server die URLs umschreibt. Eine bessere URL für das vorhergehen Beispiel wäre:

„http://www.domain.tld/page/1/show“

oder zumindest:

„http://www.doamin.tld/page/1“

Genau für diesen Zweck gibt es das Modul „mod_rewrite“ mit der man die URLs umschreiben kann.

Wie sieht die „.htaccess“-Datei aus?

Als erstes muss man Rewrite starten und dann braucht man die folgenden 3 Regeln:

RewriteRule ^([a-z]+)/*$ index.php?mode=$1&id=1&action=show
RewriteRule ^([a-z]+)/([0-9]+)/*$ index.php?mode=$1&id=$2&action=show
RewriteRule ^([a-z]+)/([0-9]+)/([a-z]+)$ index.php?mode=$1&id=$2&action=$3

Die Angabe nach RewriteRule ist das Suchmuster gefolgt von der Ersetzungsangabe. Das bedeutet in der ersten Regel, dass alle Angaben nach der Domain umgeleitet werden in die Ersetzungsangabe wobei die Angabe die im Suchmuster in den runden Klammern ([a-z]+) steht in den Platzhalter $1 in der Ersetzungsangabe eingefügt wird. Dazu ein paar Beispiele:

/ – /index.php?mode=&id=1&action=show
/test – /index.php?mode=test&id=1&action=show
/helloworld – /index.php?mode=helloworld&id=1&action=show

So gibt in der zweiten Regel 2 Platzhalter und dementsprechend auch 2 Bereiche mit den runden Klammern und in der dritten Regel alles dreifach.

Downloads

REDcms_01.zip

Tag 3 – Ablauf

admin — Tue, 02 Dec 2008 22:00:41 +0000

Wie soll nun also der Ablauf aussehen und was kann eigentlich alles eingestellt werden? Neben dem eigentlichen Frontend, also das was der Besucher der Website zu sehen bekommt, gibt es noch das Backend – den Administrationsbereich. Nach der Eingabe soll an den passenden Stellen Symbole erscheinen an denen REDcms Änderungen erlaubt.

Was soll nun genau alles änderbar sein?

Grob gesagt bestehen alle CM-Systeme aus einem einfachen Prinzip. Man kann etwas hinzufügen, ändern und löschen, so ist es auch bei meinem CMS. Wie schon am 2. Tag geschrieben, gibt es 3 wichtige Bereiche die man administrieren kann. Der erste ist die eigentliche Seite. Hier soll man neue Seiten anlegen, bestehende ändern und löschen können. Das gleiche sollte man natürlich auch für die einzelnen Boxen auf den Seiten machen können. Zum Schluss gibt es auch noch das Menü. Auch hier sollte man einen neuen Menüpunkt hinzufügen können, aber auch bestehende ändern und löschen können.

Tag 2 – Aufbau

admin — Mon, 01 Dec 2008 22:00:52 +0000

Als erstes möchte ich euch den allgemeinen Ablauf von REDcms erklären, um dann näher auf die Details einzugehen. Wie schon im ersten Artikel geschrieben, gab es bei mir schon lange den Wunsch ein eigenes CM-System zu erstellen. Ich habe mich auch schon oft hingesetzt und angefangen eins zu schreiben, aber meistens scheiterte es nicht nur an der fehlenden Zeit, sondern auch an dem geplanten Umfang und der detaillierten Planung. Oft habe ich alles auf einmal erstellen wollen und verstrickte mich in zu viele Fragestellungen; was wäre wenn und warum nicht dies oder jenes mit einbauen. Dies sollte sich mit diesem System ändern.

Als erstes habe ich die Funktionalität von REDcms radikal gekürzt, was nicht nur der allgemeinen Machbarkeit dienlich ist, sondern auch der Verständlichkeit. Es gibt also nicht mehr Tausende von Funktionen, sondern mir war es diesmal wichtig die Möglichkeiten sehr einfach und damit überschaubar zu halten.

Was kann also nun REDcms?

Eigentlich wollte ich ein CMS schaffen mit dem man neue Seite anlegen und diese in einer Menüstruktur sortiert kann. Weiterhin wollte ich innerhalb der einzelnen Seite Boxen hinzufügen, um den Inhalt besser zu untergliedern. Das was´s schon.

Das Ganze sollte dann über eine einfache Anmeldung administrierbar gemacht werden. Also anmelden, Dinge ändern und dann wieder abmelden. Ich glaube das dies dadurch sehr intuitiv benutzbar wird. So hoffe ich es zumindest, denn bis jetzt hat keiner mein REDcms getestet.

Wer also Lust hat in diesem System etwas herum zuspielen, der kann sich mit den folgenden Daten anmelden.

Benutzername: admin
Kennwort: demo

Bitte beachtet, das sich das CMS Mitternacht wieder in den Urzustand zurücksetzt. Bitte habt dafür Verständnis. Wer Anregungen zur Verbesserung bzw. zur Erweiterung hat, kann an den passenden Stellen einen Kommentar hinterlassen. Auch würde ich mich über jeden gefunden Fehler bzw. Bug freuen, oder auch nicht! Bedenkt aber, dass das System auf Rücksicht der Einfachheit keine Fehlerüberprüfung bei Eingaben macht. Dieses folgt dann bei der Umstellung auf den Produktionsstatus.

Tag 1 – Einleitung

admin — Sun, 30 Nov 2008 22:00:15 +0000

Mit dem großen Erfolg letztes Jahr mit meinen Adventskalender 2007 habe ich nicht wirklich gerechnet, deshalb möchte ich das dieses Jahr wiederholen. Im letzten Jahr habe ich aus den verschiedenen Webtechnologien einzelne Themen herausgenommen und darüber berichtet. Dieses Jahr möchte ich mich auf ein Thema konzentrieren. Da ich schon seit sehr langer Zeit ein eigenes CM-System erstellen wollte, fand ich dieses als hervorragenden Aufhänger für meinen diesjährigen Adventskalender. Ich hoffe ihr könnt meine Begeisterung teilen und freut euch mit mir über jeden Tag an dem ich mehr von der Konzeption über die Programmierung bis hin zum Design meines eigenen CM-System veröffentliche.

Warum habe ich ein solches System erstellt, werden sich jetzt einige Leser denken. Es gibt doch genug. Das stimmt! Mir geht es auch nicht direkt um die tatsächliche Verwendbarkeit des Systems. Mir geht es hier um die Wissensvermittlung wie solche Systeme funktionieren können.

Seit mittlerweile 11 Jahren bin ich als freier Dozent im Webbereich tätig und gebe natürlich immer wieder Programmier-Seminare. Dort kommt man leider nicht in die Tiefe ein eigenes System zu entwickeln. Und trotzdem kann man mit relativ wenigen Mitteln bzw. Kenntnissen ein solches System erstellen und genau das soll dieser Kalender verdeutlichen.

Um aber nicht völlig bei Null anzufangen, wäre es gut wenn gute HTML- und CSS-Kenntnisse vorhanden sind. Und da das System eine mySQL-Datenbank voraussetzt und in PHP geschrieben ist, sind Kenntnisse in diesem Bereich erforderlich um alles zu verstehen. Aber ich glaube auch ohne diese Kenntnisse kann man einen Großteil dieses Tutorials gut verstehen und nachvollziehen. Falls nicht, bitte ich euch in Kommentaren offene Fragen zu stellen, die ich dann beantworten kann.

Zum Schluss möchte ich meinem System noch einen Namen geben. Ich hoffe ihr findet ihn passend. Mein Projekt nennt sich „REDcms“. „RED“ kommen von RE-Design und „cms“ naja es ist ja nun mal ein CM-System.

Wer das CMS testen möchte, der findet in meinem Weblabor das entsprechende Demo. Dort werden später auch alle Releases zum Download veröffentlicht.

Adventskalender 2008

admin — Sat, 29 Nov 2008 14:11:24 +0000

Übermorgen ist es soweit. Mein 2. Adventskalender startet. Schon letztes Jahr habe ich 24 Artikel rund um das Internet geschrieben und guten Zuspruch bekommen. Deshalb möchte ich auch in diesem Jahr 24 Artikel euch präsentieren.

Ich hoffe, ich werde euren Geschmack treffen und ihr lest nicht nur fleißig mit sondern beteiligt euch an den daraus entstehenden Diskussionen.

Adventskalender der Webkrauts

admin — Fri, 28 Nov 2008 09:18:05 +0000

Auch in diesem Jahr werden die Webkrauts einen Adventskalender mit 24 interessanten Artikeln zum Thema Best Practice im Web” erstellen. Schon bei den Kalendern 2007, 2006 und 2005 waren immer wieder gute und hilfreiche Tipps dabei. Deshalb rühre ich hiermit die Werbetrommel.

Dreamweaver-Schulung bei ABW

admin — Wed, 12 Nov 2008 11:34:53 +0000

In der vergangenen Woche war ich bei der ABW GmbH. Dort habe ich eine Woche lang 6 Teilnehmern eine Schulung im Umgang mit Dreamweaver CS3 gegeben. Interessant waren die Schulungszeiten, da die Teilnehmer weiterhin an ihren Tagesgeschäften arbeiten sollten, haben sie immer nur einen halben Tag am Unterricht teilgenommen. Das heißt ich habe 3 Teilnehmerinnen vormittags geschult und 3 Teilnehmern dasselbe nachmittags beigebracht. Ja es war wirklich so wie ich es geschrieben habe – sie hatten eine Geschlechtertrennung (vormutlich aber nur rein zufällig).

Da die Adobe Werbung suggeriert ohne HTML- und CSS-Kenntnisse professionelle Website zu erzeugen, war es auch diesmal bei der Dreamweaver-Schulung so, dass sie überrascht waren was zu guten Website alles dazugehört. So war also 2 weitere wichtige Themen in der Schulung (X)HTML und CSS. Wir sprachen aber auch über Suchmaschinen-Optimierung, Barrierefreiheit und Benutzbarkeit von Websites.

Alles in allem war es eine sehr interessant Woche in München – und auch mein erstes Mal in der Landeshauptstadt von Bayern.

Cinema Schulung bei Tools

admin — Tue, 01 Jul 2008 09:30:45 +0000

Am Samstag habe ich eine 2tägige Schulung für Tools Communication gehalten. Da Tools bei Münster ihren Sitz haben, bin ich 2 mal ins schöne Münsterland gefahren.

Das besondere an dieser Schulung war, dass der erste Schulungstag von 4 Wochen und der zweite am letzten Samstag war. Es ist nicht gut so lange Pause zwischen diesen Terminen zu haben. In diesem Fall ging es zwar nicht anderes, aber es hat sich wieder mal gezeigt dass es nicht von Vorteil ist. Am 2. Seminartag haben wir fast 2 Stunden nur wiederholt – hätten jedoch die Zeit besser nutzen können.

Flash Grundlagen für das Max-Born-Berufskolleg

admin — Tue, 24 Jun 2008 09:48:14 +0000

Am Montag habe ich für 6 Lehrerinnen des Max-Born-Berufskolleg in Recklinghausen eine Einführung in die Möglichkeiten von Flash CS3 gegeben.

Wieder mal musste ich feststellen, dass ein Tag nicht ausreicht alles wichtige dieses umfangreichen Programmes zu erzählen.

Buttons mit Photoshop

admin — Sun, 01 Jun 2008 10:25:59 +0000

Heute habe ich bei sitepoint.com ein schönes Tutorial über die Erstellung von Schaltflächen in Photoshop gefunden. Der Workshop geht über ganze 4 Seiten.

Build Beautiful Buttons in Photoshop

Dreamweaver-Schulung für den Solar Verlag

admin — Sat, 26 Apr 2008 10:47:24 +0000

Von Montag bis Mittwoch war ich beim Solar-Verlag in Aachen und habe 6 Teilnehmerinnen eine Einführung in Dreamweaver CS3 gegeben. Es war eine sehr entspannte Schulung, weil das Klima im Verlag sehr harmonisch ist.

Die Schwierigkeit in der Schulung war, dass die Teilnehmerinnen bis dato nur mit Frontpage als Entwickler-Tool gearbeitet haben und somit viele neue Features des Webdesigns, wie z.B. das Layouten mit CSS nicht wirklich kannten. Deshalb haben wir gleichzeitig beim Erlernen von Dreamweaver auch noch eine Einführung in CSS und Standard HTML gemacht.