TYPO3: Website in 30 Minuten Teil 2: TypoScript Templates, Inhalte pflegen

Im ersten Teil des TYPO3 Kurs: Website in 30 Minuten habe ich folgende Themen behandelt:

• Vorbereiten einer HTML Datei, setzen von Subparts
• Backend-Spalten anpassen
• Dateibaum erstellen
• Seitenbaum erstellen

Du hast in der Anleitung gelernt wie man ein HTML Dokument mit Subparts erstellt, wie Du das Backend mit den Spalten an Deine eigenen Bedürfnisse anpassen kannst, und was der Dateibaum und der Seitenbaum innerhalb des TYPO3-Backends ist. Wenn Du Dir das Video Tutorial angesehen hast, findest Du Dich auch in TYPO3 etwas zurecht.

In diesem Tutorial werden wir das angefangene beenden. Du wirst danach ein TypoScript Template erstellt haben. In diesem TypoScript Template werden wir die Subparts aus dem HTML Dokument ansprechen und dynamisch gegen die Inhalte aus dem TYPO3 Backend austauschen lassen. Du konfigurierst ein einfaches Listenmenü mit TypoScript inklusive einer Active-Regel. Zudem konfigurieren wir per TypoScript das Headerimage im oberen Bereich der Internetseite. Wenn Du auf der jeweiligen Seite kein Bild hinterlegst, greift das System auf ein definiertes Headerbild zurück.

(weiterlesen…)

AJAX Loader für einen kleinen Bereich

Ich nehme Bezug auf mein Tutorial zum AJAX Loader - Ladeanzeige mit JavaScript vor einiger Zeit. Viele Leser haben mich angeschrieben mit der Bitte, ein kleines Tutorial zu schreiben, wie mann einen AJAX Loader mit JavaScript für einen kleinen Bereich auf der Seite schreiben kann. Aufgrund dessen habe ich mich nochmal hingesetzt, und ein zweites Tutorial zum Thema AJAX Loader mit JavaScript gemacht.

Ziel dieses kleinen Tutorials ist folgendes: Wir binden ein AJAX Programm auf einem bestimmten Bereich einer Internetseite ein. Dieses AJAX Programm ruft eine loader-Funktion auf sobald sie gestartet wird. Ist die Funktion beendet wird eine unloader-Funktion aufgerufen.

(weiterlesen…)

DRI/HDR: Nachtaufnahme einer Erdgas Anlage der BASF Ludwigshafen

Nachtaufnahme (DRI/HDR) einer Anlage der BASF Ludwigshafen/Mannheim

Dieses HDR (High Dynamic Range) Bild oder auch DRI (Dynamic Range Increase) entstand am nördlichen Ende von Ludwigshafen (Mannheim). Das HDR Bild stellt eine kleine, etwas im Abseits gelegene Erdgas-Anlage der BASF Ludwigshafen dar. Wenn man von Mannheim auf der A6 über den Rhein fährt, kann man die Anlage schon gut auf der rechten Seite erkennen. Wenn Du dahin willst, solltest Du gleich nach der Rhein-Brücke die Ausfahrt 9 nehmen. Von da aus gelangst Du direkt zur Anlage.

Die Anlage selbst ist ziemlich eingezäunt. Es gibt in kleiner Entfernung vor der Anlage der BASF einen Schotterweg auf dem Du dich gut postieren kannst. Andere Ansichten von der Anlage sind leider nicht drin. Du solltest auf die Windverhältnisse acht geben. Ein ständig wechselnder Wind kann dir Probleme mit der Rauchfahne bereiten

(weiterlesen…)

HTML: Online Kurs in HTML und CSS Teil 2

Im ersten Teil des HTML Online Kurses haben wir den Grundaufbau eines HTML Dokumentes behandelt. Du weißt nun wie man den Doctype und die Zeichenkodierung einstellt, was der Unterschied zwischen HTML und BODY ist, und wie Du was aus dem HTML Dokument im Browser anzeigen kannst.

In diesem 2. Teil des HTML Kurs geht es um die einzelnen HTML Elemente. Ein HTML Element umschließt einen Text oder ein Bild um deren Erscheinung zu ändern. Jeder HTML Befehl wird innerhalb der <> Klammern geschrieben. Danach kommt der eigentliche Text oder ein Bild, und anschließend  wird der HTML Befehl in den <> Klammern wieder geschlossen. Ein einfaches Beispiel:

<h1>Dies ist eine sehr grosse Überschrift</h1>

So sieht es im Browser aus
Hier wird ein Text als eine H1 Überschrift ausgewiesen. Der Aufbau eines HTML Befehles ist also gar nicht so schwer.

Inhalt:

1. Block und Inline Elemente
2. Überschriften (H1 bis H6)
3. Absätze (p)
4. Manueller Textumbruch (br)
5. Bild einfügen (img)
6. Text mit einem Link belegen (a)
7. Aufgabe: Eigenes HTML Dokument erstellen

(weiterlesen…)

TYPO3: Website in 30 Minuten Teil 1: HTML Template, Seitenbaum, Ressourcen

In diesem kleinen Online Tutorial möchte ich Dir zeigen, wie Du in 30 Minuten eine Internetseite mit TYPO3 erstellen kannst. Ziel dieser Anleitung soll es sein, Dir näher zu bringen, wie sich der Ablauf mit TYPO3 gestaltet, und welche Schritte Du abarbeiten musst, um am Ende auch Erfolg zu haben.

Themen in diesem Kurs:

1. Vorbereiten einer HTML Datei, setzen von Subparts
2. Backend-Spalten anpassen
3. Seitenbaum erstellen
4. Dateibaum erstellen
5. Video-Toturial ansehen

Was kann ich am Ende des Kurses mit TYPO3 machen?

Wir werden das HTML Template für TYPO3 vorbereiten. Ich gehe davon aus, dass Du bereits mit HTML vertraut bist, und ein Layout erstellen kannst. Sollte das nicht der Fall sein, steht Dir am Ende der Download mit den Dateien zur Verfügung. An denen kannst Du Dich dann weiter orientieren. Alternativ kannst Du auch meinen HTML Online Kurs durcharbeiten. Wir werden das TYPO3 für ein 3 spaltiges Layout einrichten, und zusätzlich ein austauschbares Headerbild (Emobild) anlegen. Du lernst wie man eine Dateistruktur sowie einen Seitenbaum anlegt und einen TypoScript Template Record erstellt. Am Schluss des Lehrgangs werden wir eine Seite mit Content pflegen. Wenn Du nicht selbst Lust hast ein TYPO3 zu installieren und einzurichten, möchte ich Dir Mittwald als Hoster für TYPO3 empfehlen. Die Preise sind klein und die Leistungen sehr gut: Mittwald TYPO3 Hosting.

(weiterlesen…)

Die Insel Mainau am Bodensee

Blick in Richtung Österreich

Dieses Bild zeigt den Blick von der Insel Mainau über den Bodensee Richtung Österreich.

Das Bild entstand abends in der Dämmerung und wurde vom Stativ aus gemacht. Die Brennweite ist auf 37mm eingestellt, die Belichtungszeit liegt bei 1/100 sekunde.

Aufgenommen wurde das Bild am 19.11.2006 und ist also schon ein paar Tage alt Am Zauber der wunderschönen Blumeninsel hat sich allerdings nichts verändert. Wer hier in der Region ansässig ist, und öfters da hin geht, sollte sich eine Jahreskarte zu legen. Im Sommer ist immer was los und im Winter lädt die Insel zu verträumten Spaziergängen in aller Ruhe ein. Es gibt Hotels auf der Mainau, ein Schloß, Gastronomie und schöne Plätze zum entspannen. Man kann entweder mit dem Auto direkt anfahren oder mit der Fähre über den Bodensee anlegen.

(weiterlesen…)

HTML: Online Kurs in HTML und CSS Teil 1

HTML Kurs Teil 1: Grundaufbau einer HTML Seite

Ich möchte die nächste Zeit gerne etwas über HTML und CSS Code schreiben. Ich werde die Beiträge als eine Art Serie verfassen und immer wieder einen neuen Artikel zum Thema HTML und CSS verfassen. Ziel der Blogbeiträge soll es sein, Anfängern ein wenig etwas über HTML und CSS zu zeigen. Am Ende der Seite siehst du referenzierte Links zu anderen Artikeln die mit diesem in Verbindung stehen.

Inhalt:

1. Doctype
2. HTML Bereich
3. HEAD Bereich
4. Meta: Charset
5. Title Tag
6. Meta: Keywords
7. Meta: Description
8. Link Ressource: CSS Dateien
9. Body Bereich
10. Kompletter HTML Code von diesem HTML Kurs

HTML und CSS: Überblick über wichtige grundsätzliche HTML Befehle

Doctype

Beginnen wir mit dem Grundgerüst einer HTML Seite. Bevor ich irgendwas per HTML machen kann, benötige ich eine html Datei. Diese Datei muss vorweg einige Anweisungen enthalten. Nötig sind dabei folgende Angaben:

(weiterlesen…)

Multibox: Diashow mit der Tastatur

Eine neue Idee eines Multibox Users hat nun ihren Platz in der Multibox gefunden. Seit der Version 1.2.7 der Multibox kann man mit den Pfeiltasten auf der Tastatur durch die Diashow blättern. Außerdem wurden wieder einige Codeoptimierungen vorgenommen.

Natürlich wurde diese Funktion in die Version 1.11 von Mootools sowie in die aktuelle Version 1.2 des Mootools Framework integriert. Zusätzlich wurde in diesem Release der Multibox der horizontale  Scrollbar beim laden eines Multibox Content entfernt.

Das bestehende Problem mit dem aktuellen Opera und der Zentrierung der Bilder in der Fenstermitte konnte leider noch nicht behoben werden.

Ressourcen:

• Offizielle Multibox Seite auf meinem Blog (deutsch)
• Wordpress Multibox Plugin Seite auf wordpress.org

And now for english speaking visitors

A multibox user had found an interesting idea: just browse trough pictures in the slideshow with the arrow keys on your keybord. And now, included in the brand new version 1.2.7 of the multibox, this feature is added.

At this time i make some code improvements. The horizontal scrollbar that appears on loading content in multibox is now fixed. All the changes are included in the mootools version 1.11 and in the new version 1.2 of mootools for the multibox.

The problem with the actual opera browser and the multibox are not resolved. The multibox is in opera > 9.5 not loading in the center of your browser window. I hope i can fix this problem in once of the next releases!

Ressources:

• Official multibox page on my blog (english)
• Wordpress multibox plugin page at wordpress.org

Makro: Wespenspinne (Argiope Bruennichi)

Makroaufnahme einer nicht gerade kleinen Spinne

Diese Bild von einer Wepsenspinne (Argiope Bruennichi) entstand am Wegesrand bei einem kleinen gemütlichen Spaziergang mit der Kamera. Das Bild entstand mit einem 50mm 1.8 Objektiv sowie 20mm Zwischenringe.

Leider sind mir die EXIF-Daten abhanden gekommen, so dass ich die weiteren technischen Eigenschaften des Bildes nicht aufzählen kann.

Die Spinne auf dem Bild ist, wie man sehr deutlich erkennen kann, weiblicher Natur. Die weiblichen Tiere der Wespenspinne (auch Zebraspinne genannt) können gute 25 mm gross werden, wobei die männlichen Tiere eher kümmerliche 6 mm groß werden können.

Übrigens wurde diese Art der Radnetzspinnen 2001 zur Spinne des Jahres gewählt. Seit dieses Bild entstanden ist, habe ich leider keine Spinne dieser Art mehr gesehen.

Neues Multibox Update

Wie mir ein User gerade eben berichtet hat, hatte die Version 1.2.5 der Multibox für Wordpress ein kleines Problem: es haben einige Icons für die Steuerung unter dem Bild gefehlt. Ich habe natürlich sofort ein neues Update der Multibox veröffentlicht. Die Version 1.2.6 des Wordpress Multibox Plugin enthält nun alle Bilder die für das vor und zurück blättern nötig sind. Ausserdem werden die Grafiken für die automatische Slideshow (Diashow) nun auch angezeigt.

Viel Spass mit der neuen Multibox!

Ressourcen:

• Offizielle Multibox Seite auf meinem Blog (deutsch)
• Wordpress Multibox Plugin Seite auf wordpress.org

English part:

New multibox update

A user have me informed about missing icons in the version 1.2.5 from the wordpresss multibox. I have shortly updated the version up to 1.2.6 for the multibox. Now all icons for the slideshow are included in the new package. Download, update, and have fun

Ressources:

• Official multibox page on my blog (english)
• Wordpress multibox plugin page at wordpress.org