Für die Webseite myjobenextdoor.com habe ich umfangreiche Infografiken implementiert. Über die Webseite lassen sich Stellenangeboten zu beliebigen Orten in Deutschland anzeigen. Ab sofort werden auch die Arbeitsmarktdaten des nächstgelegenen Kreises aus der Datenbank des Kunden ermittelt und optisch als Graph aufbereitet:

Arbeitsmarktdaten Lüneburg

Die Arbeitsmarktdaten für die Kreise stehen in der Typo3-Datenbank zur Verfügung und werden von der Webseite ortsabhängig abgefragt und ausgegeben. Sowohl Art und Größe der Charts als auch Farbgebung sind frei definiert.

Häufig reicht das Standard-Mailformular Plugin für einfache Kontaktformulare aus. Insbesondere da sich einfach Felder definieren lassen, die Überprüft werden, ob sie ausgefüllt werden (durch Setzen eines * beim Feldnamen). Heißt ein Feld “email” wird es — wenn es ein Pflichtfeld ist — per Regular Expression daraufhin überprüft, ob es sich um eine valide Email-Adresse handelt. Mit folgendem TypoScript kann man die gegebenenfalls zurückgegebenen Fehlermeldungen anpassen (bzw. aus dem Englischen übersetzen):
tt_content.mailform.20.badMess =Bitte die folgenden Felder ausfüllen:
tt_content.mailform.20.goodMess = Vielen Dank!
tt_content.mailform.20.emailMess = Bitte eine gültige Email-Adresse eingeben
Mit diesen drei Zeilen definieren Sie die Ausgabe des Javascript-Popups, abhängig davon, ob entweder die Email-Adresse in einem falschen Format eingegeben wurde oder Pflichtfelder nicht ausgefüllt wurden.

Heute kam im Gespräch mit einem Kunden eine Frage auf, mit der ich mich bis jetzt intensiv noch nicht auseinandergesetzt hatte, da Webspace immer kein Problem darstellte: “Leert Typo3 den Temp-Ordner nach einer gewissen Zeit”. Die Antwort scheint “nein” zu sein.

Der /typo3temp-Ordner kann allerdings im Install Tool unter Punkt 6 (der treffenderweise mit “typo3temp/” bezeichnet ist) geleert werden. Nachdem der Ordner geleert ist, müssen die entsprechenden Referenzen auf die (jetzt nicht mehr vorhandenen Dateien) im Anschluss in der Datenbank bereinigt werden. Dies geschieht, in dem man unter Punkt 7 den Punkt “Clean Up Database” anklickt (Screenshot). Damit die Referenzen und benötigten Temporären Dateien jetzt wieder angelegt werden können, muss abschließend noch der komplette Cache geleert werden.

In der Regel werden Typo3 Content Management Systeme nach der Fertigstellung durch den Kunden eigenständig gepflegt. Teilweise gibt aber das Design strenge Formatvorgaben für z.B. Textelemente und Bilder vor. So auch auf der Startseite der DSAI auf der der Designer mehrere Inhaltselemente (tt_content textpic) vorgesehen hatte — wobei die Grafik immer eine fest definierte Größe haben muss. Typo3 kann zwar für Text mit Bild Elemente automatisch eine Skalierung vornehmen, auf ein bestimmtes Format beschnitten werden die Bilder allerdings in der Standardkonfiguration nicht. Da für die Startseite sowieso ein eigenes Template verwendet wird, habe ich einfach die Eigenschaften des Textpic-Elements im Typoscript überschrieben:
tt.content.image.20.1.maxH >
tt.content.image.20.1.maxW >
tt.content.image.20.1.maxH = 65
tt.content.image.20.1.maxW = 65
tt_content.image.20.1.file.width >
tt_content.image.20.1.file.width = 65c-0
tt_content.image.20.1.file.height >
tt_content.image.20.1.file.height = 65c-0
tt_content.image.20.equalH >
tt_content.image.20.equalW >
Durch diese Typoscript-Anweisungen im Template-Setup werden die zu einem Text mit Bild-Element hochgeladenen Bilder auf ein Format von 65×65 Pixeln gecroppt (mittig beschnitten). Die Editoren müssen nur noch das Bild hochladen bzw. auswählen und den Text verfassen. Die Bilder müsen nun nicht mehr vorab von Hand mit einem Bildbearbeitungsprogramm auf das richtige Format bzw. Seitenverhältnis gebracht werden.

Nach dem Update des Typo3-Systems eines Kunden von Version 4.2.x auf 4.3.3 funktionierten neu im System angelegte URLs nicht mehr. Die entsprechenden Seiten wurden zwar mit den suchmaschinenfreundlichen URLs verlinkt, ein Klick auf den Link führte aber immer nur zur Startseite.

Nach kurzer Recherche ergab sich, dass die Ursache hierfür darin lag, dass durch das Update auf Typo3 4.3.3 wieder die Extension “Simulate Static URLs” (simulatestatic) aktiviert wurde, die — trotz anderslautender Angaben — mit RealURL kollidiert. Nach deaktivieren dieser Extension (Extension Manager » Install Extensions » Display shy extensions) funktionierte alles wieder einwandfrei.

Das Problem ist erst relativ spät aufgefallen, da nur URLs auf der ersten Ebene (also mit nur einem “/” nach der Domain) betroffen waren.

Im Auftrag der Agentur ultrabold wurde der Online Shop des Mannheimer Verlages Edition Panorama von osCommerce zu Typo3 portiert.

http://editionpanorama.com

Für die DSAI habe ich ein Portal auf Typo3-Basis realisiert. Das Design der Seiten wurde von der Agentur ultrabold aus Mannheim entwickelt.

Die User der Seite haben jeweils eine eigene Profilseite (Pinnwand) auf der sie öffentliche Nachrichten ablegen können. Außerdem ist es möglich anderen Usern auf die Pinnwand zu schreiben, vorausgesetzt man ist mit Ihnen befreundet (gegenseitige Autorisierung). Auch das Hochladen eigener Fotos/Bildergalerien ist möglich.

Basierend auf den bestehenden Freundschaften schlägt das System weitere mögliche Freunde vor (Freunde von Freunden).

Das Portal verfügt auch über eine private Nachirchten-Funktionalität, deren Inhalt nicht öffentlich ist.

Eine Anmeldung ist nur für die jugendlichen Mitglieder der DSAI möglich.

Für Baker & Harrison habe ich das von Uwe C. Beyer entworfene Design als Typo3-Website in XHTML und CSS realisiert. Die Texte der Webseite stammen von Christian Pfaff.
http://www.bakerharrison.de

Ich bin heute über einen kuriosen Fehler im Kickstarter gestolpert
MD5 was different from the original files MD5

Dieser sorgte nun dafür, dass die Extension-Files zwar wie gewünscht ins Dateisystem geschreiben wurden (auch mit den neuen Spezifikationen), aber leider die notwendigen Änderungen und Ergänzungen in der Datenbank nicht vorgenommen wurden (und auch nicht vornehmbar waren).

Nach etwas Recherche habe ich dann folgendes durchgeführt:

• Im Verzeichnis der Extension befanden sich die Dateien “0″ bis “13″ – diese habe ich gelöscht
• Anschließend habe ich die Extension Editiert und oben rechts Backup/Delete ausgewählt
• Im nächsten Schritt habe Update extension EM_CONF file gewählt um die neuen MD5-Werte in der ext_emconf.php zu schreiben

Anschließend konnte ich bei Anwahl der Extension problemlos die gewünschten Updates in der Datenbank anstoßen.

Bei der Arbeit mit Typo3 und unterschiedlichen Gruppenberechtigungen (zum Beispiel Administrator und Editoren) kann es dazu kommen, dass neue – vom Administrator angelegte – Seiten für die Editoren nicht sichtbar und editierbar sind. Dies liegt daran, dass Typo3 die Seiten grundsätzlich mit den Rechten der jeweils erstellenden Person erzeugt (also z.B. Adminrechten). Folglich können die Editoren die Seiten anschließend weder bearbeiten noch sehen.

Will man, dass neue Seiten bei Teilen des Typo3-Systems (oder die ganze Präsenz) immer für bestimmte Gruppen sichtbar und editierbar sind, kann man im TSconfig (unter Optionen in den Seiteneigenschaften) der Wurzelseite folgenden Code ergänzen:

TCEMAIN.permissions{
groupid = 1
user = show,editcontent,edit,delete,new
group = show,editcontent,edit,delete,new
everybody =
}

Durch diese Konfiguration werden alle unterhalb dieser Seite angelegten Seiten der Gruppe 1 zugeordnet und die Gruppenrechte wie beschrieben gesetzt. Selbstverständlich ist es auch möglich die einzelnen Rechte je nach Bedarf zu ergänzen oder zu kürzen.

Obwohl (oder gerade weil) es sich bei tt_news um eine sehr umfangreiche und funktionsreiche Extension handelt, deren Einzelnews grundsätzlich immer auf der selben Typo3-Page ausgegeben werden erhält man grundsätzlich Seitentitel, Keywords und Descriiption dieser Seite, wenn man den Einzelbeitrag geöffnet hat. Dies ist natürlich unter Gesichtspunkten der Suchmaschinenoptimierung sehr suboptimal, insbesondere da der Seitentitel stark zum Ranking der Einzelseite beiträgt.

Mit dem Folgenden Typoscript können im Typo3-Seitentemplate Setup Meta-Keywords, Description und Seitentitel durch den Einzelbeitrag definiert werden, so dass Title und Description nicht für alle Newsbeiträge gleich sind:

# Hier stehen (kommasepariert) die Seiten die die
# tt_news Einzelseite ausgeben:
[globalVar = TSFE:id=2336]
#
# Leert die Meta-Description, falls diese bereits anderswo
# definiert wurde
page.meta.description>
page.meta.description = TEXT
# Weist den News-Subheader dem Feld Description zu
page.meta.description.data = register:newsSubheader
#
# Leert die Meta-Description
page.meta.keywords >
page.meta.keywords = TEXT
# Hier werden die News-Keywords
# den Meta-Keywords zugewiesen
page.meta.keywords.data = register:newsKeywords
#
# Seitentitel soll von Typo3 generiert werden
config.noPageTitle = 0
# Seitentitel soll von tt_news definiert werden
plugin.tt_news.substitutePagetitle = 1
#
## Hier könnte noch folgendes stehen:
page.headerData.10 >
# Um einen evtl. manuell in headerData.10 gesetzten Title zu löschen
[end]

Ein weiterer Nachteil von tt_news in der standardkonfiguration sind die extrem Suchmaschinen-Unfreundlichen URLs, die von dieser Extension generiert werden. Auf diese Problematik werde ich in einem separaten Post eingehen – eine schneller Tipp sei an dieser Stelle das Verwenden der Extension CoolURI.

Wird in einem Typo3-System mit CoolURI eine weitere Domain angelegt, kann es – abhängig von der Konfiguration – dazu kommen, dass CoolURI seiteninternen Links die falsche Domain zuordnet. Um das Problem zu beheben kann man einfach nach Abschluss der Arbeiten an der neuen Domain/Seite im Typo3 Backend unter Tools/CoolURI/Delete Update All >> “Force Update of all Links” anklicken. Im Anschluss werden alle Links neu und mit der richtigen URL generiert.

Hierbei ist darauf zu achten, dass Seiten immer nur über eine Domain erreichbar sein dürfen, da CoolURI ansonsten die URL der zuerst generierten Domain verwendet.

Obwohl es grundsätzlich mit geringem Aufwand möglich ist die Produkte manuell sortierbar zu machen, ist diese Funktion bei tt_products standartmäßig deaktiviert. Dennoch ist es mit zwei Handgriffen möglich, dafür zu sorgen, dass die Artikel (z.B. in der LIST-Darstellung) durch den Shop-Betreiber im Typo3-Backend beliebig sortiert werden können (über Pfeil-Hoch und Pfeil-Runter, wie von Typo3 gewohnt).

Um dies zu erreichen, müssen Sie:

1. in der ext_tables.php der Extension (i.d.R. im Ordner /typo3conf/ext/tt_products) die Zeile // 'sortby' => 'sorting', unkommentieren, also in 'sortby' => 'sorting', ändern
2. Im Template-Setup der Seite folgende Zeile ergänzen:
   plugin.tt_products.conf.tt_products.LIST.orderBy = sorting

Anschließend (ggf. Frontend-Cache leeren) werden die Produkte in der (im Backend in der Listenansicht) durch den Admin definierbaren Reihenfolge dargestellt.

Als ich heute auf einem etwas älteren System für suchmaschinenfreundliche URLs CoolURI (eine Alternative zu RealURL) installiert habe gab der Server trotz korrekter Konfiguration lediglich eine leere Seite aus.

Eine kurze Recherche im Netz ergab keine Lösung – zum Glück viel es mir dann doch noch relativ schnell ein: CoolURI benötigt (da eine XML-Datei als Grundlage verwendet wird) PHP in einer Version > 5! Glücklicherweise konnte man die PHP-Version beim Hoster (Weiland – für Typo3 nur zu empfehlen) mit nur einem Klick umstellen.

Et voilá – alles läuft.

Will man zum Zwecke der Suchmaschinenoptimierung im HTML Header Meta-Angaben wie Keywords oder Description auf einer Typo3 basierten Webseite darstellen, genügen wenige Handgriffe im Typo3-Template.

TypoScript für das Typo3 Seitentemplate

page.meta.keywords.field = keywords
page.meta.description.field = description

Einstellungen für die Seite

Nachdem Sie diese Einstellungen vorgenommen haben, werden die von Ihnen im Backend für den Menüpunkt spezifizierten Angaben an der entsprechenden Stelle im Header der Seite dargestellt.
Setzen Sie hierzu bei den Seiteneigenschaften den Typ auf “Erweitert” – so erhalten Sie weitere Felder dargestellt. Die Meta-Keywords werden in das Feld “Stichworte” eingegeben, die Meta-Description in das Feld “Untertitel” “Beschreibung” (Achtung nicht in das Feld “Inhaltsangabe”).

Update 18.11.2009: “Untertitel” durch “Beschreibung” ersetzt. Vielen Dank an Kurt Kunig: http://www.kupix.de/

Für die auf Typo3 basierenden Internetseiten eines Kunden wollte ich zur Suchmaschinenoptimierung elegante URLs verwenden. Erste Wahl zur Lösung dieses Problems ist grundsätzlich die Verwendung von RealURL – was aber in vielen Fällen nur wenig Sinn macht, weil der Konfigurationsaufwand sehr hoch sein kann.

Zweite Wahl war dann die Verwendung von Simulatestatic – hier wird allerdings in der Standardkonfiguration immer “.[ID].[TYPE]” angehängt. Dies würde also z.B. “suchmaschinenoptimierung.32.0.html” oder gar nur “32.0.html” ergeben, was natürlich nicht sonderlich ästhetisch ist.

Dennoch lässt sich Simulatestatic verwenden um aus “index.php?id=32″ die URL “suchmaschinenoptimierung.html” zu machen. Vollziehen Sie einfach die folgenden Schritte in Ihrem Typo3 CMS:

1. Typo3 Template Setup für SimulateStaticDocuments

config.simulateStaticDocuments = 1
config.simulateStaticDocuments_noTypeIfNoTitle = 1

Wichtig ist hierbei, dass die Option “config.simulateStaticDocuments_addTitle” nicht verwendet wird, da Sie die Option config.simulateStaticDocuments_noTypeIfNoTitle überschreiben würde.

Nachdem Sie diese Einstellungen vorgenommen haben würde unsere Beispiel-URL wie folgt aussehen “32.html” – dies entspricht natürlich noch nicht dem gewünschten Ergebnis.

2. Vergabe eines Alias in den Seiteneigenschaften

Nun können Sie einfach bei den Seiteneigenschaften unter dem Punkt “Seitentitel” einen frei wählbaren Alias vergeben – am besten ganz unten “zweite Optionspalette anzeigen” anhaken, dann erscheinen die weiteren Optionen unter den Hauptoptionen. Dieser Titel wird dann für die Generierung der URL verwendet. Geben wir also bei unserer Beispielseite als Alias “suchmaschinenoptimierung” ein, lautet die URL für diese Seite “suchmaschinenoptimierung.html”.

3. Fehlerquellen und Nachteile

Wie so oft im Leben, hat diese Vorgehensweise unter Verwendung von SimulateStaticDocuments (insbesondere gegenüber der Verwendung von RealURL) den Nachteil, dass keine “Pseudo-Unterverzeichnisse” generiert werden können – URLs wie “diensteistungen/suchmaschinenoptimierung.html” lassen sich auf diese Weise leider nicht erzeugen. Allerdings sei an dieser Stelle angemerkt, dass Google “Flache” Seiten mit weniger tiefen Unterverzeichnis-Strukturen schneller indiziert und besser findet.

Aufgrund der fehlenden Unterverzeichnis-Möglichkeiten kann es natürlich vorkommen, dass ein Alias versehentlich für zwei Seiten vergeben wird. Dieses Problem wird von Typo3 klammheimlich abgefangen, so dass der Seitenalias automatisch auf alias[i] geändert wird. Lege ich also eine zweite Seite mit dem Alias “suchmaschinenoptimierung” an, wird der Alias von Typo3 beim Speichern automatisch auf “suchmaschinenoptimierung0″ geändert – was eventuell nicht so schick ist. Allerdings kann man den Alias völlig problemlos in etwas bezeichnenderes – zum Beispiel “suchmaschinenoptimierung-fuer-fortgeschrittene” ändern.

4. Achtung bei bereits indizierten Seiten!

Möchten Sie diese Änderungen vornehmen, haben aber schon eine große Anzahl Seiten im Google-Index, müssen Sie Google mitteilen, dass die bisherigen Seiten auf die neue Schreibweise “umgezogen” sind, da Sie sonst den bestehenden PageRank und entsprechend Ihre Position auf den Ergebnisseiten der Suchmaschine (SERP) verlieren können.

5. Anregungen oder Probleme

Falls Ihnen dieses kurze How-To geholfen hat, oder Sie noch eine Frage haben zögern Sie bitte nicht, einen Kommentar zu schreiben. Möchten Sie Ihre Webseiten auf diese Art optimieren lassen kann ich diese Arbeiten natürlich gerne für Sie vornehmen – kontaktieren Sie mich einfach per Email.

Ich musste eben die Benutzerrechte eines Users bzw. einer Usergruppe im Typo3 CMS eines Knden so modifizieren, dass der User Teile der Menüstruktur einblenden oder ausblenden kann. Dies erfolgt über die Rechte der Usergruppe, in dem man unter “Allowed excludefields” folgendes auswählt:

• Seite: Seite verstecken (eine Seite kann vollständig versteckt werden)
• Seite: Im Menü verstecken (die Seite bleibt erreichbar, wird aber im Menü nicht angezeigt)

Anschließend kann der entsprechende User im Seitenbaum Seiten ein- und ausblenden und verstecken.

Es scheint ein sehr weit verbreitetes Problem zu sein, dass sich externe Links (und teilweise einige Interne Links von diversen Extensions) bei Typo3 in einem neuen Fenster öffnen, was vom Entwickler häufig nicht gewünscht ist.

Um ein Öffnen von (internen bzw. externen) Links im selben Fenster zu erzwingen können die folgenden selbst erklärenden Zeilen im Template unter Config eingegeben werden:
styles.content.links.extTarget = _self
styles.content.links.intTarget = _self
styles.content.links.target = _self

Ein Kunde wünschte die Darstellung bestimmter Inhaltselemente der rechten Spalte auf allen seinen Unterseiten. Nach kurzer Recherche im Internet fand ich heraus, dass dies über einen statischen Verweis im TypoScript auf die entsprechende Mutterseite möglich ist:
page.10.marks{
ALWAYS_RIGHT = CONTENT
ALWAYS_RIGHT {
table = tt_content
select{
where = colPos = 2
orderBy = sorting
pidInList = 15
}
}
}
Das abgebildete TypoScript greift auf die rechte Spalte (colPos = 2) der Seite mit der ID 15 (diesen Parameter müssen Sie an Ihre Bedürfnisse anpassen) zu und stellt den Inhalt dar.

De Fakto sorgt dieser Code dafür, dass auf allen Unterseiten (bzw. Kindseiten oder Children) der Inhalt der rechten Spalte der Seite mit der ID 15 an der Stelle des Markers “ALWAYS_RIGHT” dargestellt wird. Ändert man den Inhalt der rechten Spalte auf Seite 15, schlägt die Änderung auf alle Unterseiten durch.

Kunde

Die Agentur Netprofit Webseitenoptimierung von Robert Hartl fragte mich an, ob ich Interesse an der Realisierung eines Online-Shops für einen ihrer Kunden hätte.

Ich hatte.

Anforderungsprofil

Der Kunde Winwood vertreibt hochwertige Produkte aus Rosskastanienholz und strebte eine geeignete, suchmaschinenoptimierte Präsenz als weiteren Vertriebskanal an. Es sollten einige Produkte angeboten werden, die durch die Seitenbesucher in einen Warenkorb abgelegt werden können und anschließend auf Rechnung bestellt werden können.
Änderungen an den Inhalten der Seiten sowie an den Produkten wollte der Kunde selber vornehmen können.

Ergebnis

Winwood ShopAuf der Basis des Content Management Systems Typo3 sowie der Extension tt_products steht dem Kunden nun ein vollständig selbst administrierbarer Online-Shop zur Verfügung. Es können nach Belieben neue Produkte und Produktkategorien ergänzt werden. Auch die Inhalte können über das Typo3 Backend komfortabel gepflegt werden.

Die Seiten des Kunden finden Sie unter:

• http://www.winwood.at

Realisation

Erstellung des Typo3 Templates

Nach Erteilung des Auftrags und Übermittlung der PDF-Vorlage wurde innerhalb von zwei Werktagen ein statisches Template gestaltet und vom Kunden abgesegnet. Anschließend wurde das Template für die Verwendung im Typo3 CMS angepasst.

Einpflege der Inhalte des Kunden

In den folgenden Tagen wurden sukzessive die Inhalte – die teilweise bereits als PDF vorlagen – eingepflegt.

Realisation unterschiedlicher Spaltenbreiten

Da die Vorlage auf den einzelnen Unterseiten unterschiedliche Spaltenbreiten vorsah, wurden im CMS hierfür verschiedene “Extension Templates” angelegt, die den entsprechenden DIV-Containern zusätzlich zur “class” auch eine “id” übergeben die so eine differenzierte Formatierung per CSS ermöglichen.

Implementierung der Extension tt_products

Zur Integration der gewünschten Shop-Funktionalität entschied ich mich für die Verwendung der Extension tt_products. Der Menüpunkt Produkte verlinkt auf die Produkt-Einzelseite des wichtigsten Produkts des Kunden eine Rosskastanienmatte – die restlichen Produkte können über eine weitere Navigation angesteuert werden.

Interesse?

Falls Sie Interesse an der Realisation eines ähnlichen Projektes haben, stehe ich Ihnen gerne zur Verfügung. Schreiben Sie mir einfach eine Email!

Ein Kunde bat mich die Qualität der auf seiner Seite angezeigten Bilder grundsätzlich zu erhöhen. Grundsätzlich werden skalierte Bilder auf Typo3-Seiten mit einer Qualität von 70% komprimiert, was dafür sorgt, dass die Bilder teilweise sichtweise Komprimierungsspuren haben.

Um nun die Qualität der Komprimierung global zu erhöhen habe ich folgenden Zeile in der typo3conf/localconf.php eingefügt bzw. geändert:

$TYPO3_CONF_VARS['GFX']['jpg_quality'] = "85";

Hierdurch wurd die Qualität der skalierten und komprimierten JPEGs erheblich erhöht.

Google Maps IntegrationMittlerweile hat sich Google Maps gegen alle Konkurrenten durchgesetzt. Der einfache Grund: Google Maps ist kostenlos, eine Integration in Ihre Website ist nicht nur ohne Lizenzkosten möglich sondern von Google auch explizit gewünscht. Sie können also nun eine Google Karte in Ihre Seiten integrieren, Ihre Logos in die Karte integrieren, Routenplanung anbieten und Standorte darstellen.

Ich helfe Ihnen gerne weiter, wenn Sie sich nicht mit den technischen Details der Realisierung beschäftigen möchten.

Integration von Google Maps in Typo3

Anmeldung für die Google Maps API

Zuerst müssen Sie Ihre Domain auf der Google Maps API – Seite anmelden (in Englisch). Dies geschieht problemlos, Sie müssen lediglich den Namen Ihrer Domain angeben und erhalten anschließend einen API-Lizensschlüssel sowie ein Script, dessen Integration eine erste Karte in Ihrer Seite darstellt.

Hinzufügen des Scripts in den Header des Typo3-Templates

Das Hinzufügen des Scripts erfolgt durch die Eingabe des folgenden Codes in das Typo3 Template Setup:
page.headerData.10 = TEXT
page.header.Data.10.value = [...]
page.headerData.10.value = [...]

Hinzufügen des Scripts in den Body des Typo3-Templates

Nun muss lediglich noch beim Laden des Bodys der Seite das Script auch aufgerufen werden. Hierzu muss der Body-Tag verändert werden. Dies Geschieht über folgende Anweisung im Typo3 Template Setup:
page.bodyTag = <body onload="load()" onunload="GUnload()">

Hinzufügen der Karte in den Typo3 Content

Legen Sie nun im Typo3-Backend ein Inhaltselement mit reinem HTML-Content an und fügen dort folgendes HTML ein:
<div id="map"></div>
Die Größe des Containers und seinen rahmen können Sie dann wie gewohnt in CSS formatieren.

Weiterführende Fragen

Gerne Berate ich Sie über die Integration von Google Maps in Ihre Internetseite. Wenden Sie sich einfach an mich oder schreiben Sie einen Kommentar.

Anforderungsprofil

Die Seiten sollten durch ein Content Management System bereitgestellt werden, um dem Kunden die nachträgliche Pflege der Seite – insbesondere der Ansprechpartner und Produktseiten – ohne Kenntnisse von HTML zu ermöglichen. Darüber hinaus sollten die Standorte des Kunden über eine Google Maps-Karte in die Internetpräsenz integriert werden sowie eine Liste mit Ansprechpartnern und Abteilungen angelegt und gepflegt werden können.

Ergebnis

Manzke Website Dem Kunden steht nun eine selbst administrierbare Interntepräsenz in standardkonformen XHMTL 1.0 Strict zur Verfügung. Das Layout orientiert sich am Corporate Design und den Firmenfarben. Die Wahl des Content Management Systems fiel auf Typo3, da es sich gerade für solche Projekte hervorragend eignet, keine Lizenzkosten anfallen und eine Unmenge an Modulen und Add-Ons zur Verfügung stehen.
Die Seiten sind unter http://www.manzke-gruppe.de zu erreichen.

Features

Google Maps Integration

• Typo3 Content Management System
• Erweiterung bzd_staff_directory zur Darstellung der Mitarbeiter und Abteilungen
• Integration von Google Maps in die Seite über die von Google bereitgestellte API
• Routenplanung mit Typo3 via Google Maps
• W3C Standardkonformes XHTML 1.0 Strict
• CSS 2.0

Interesse an einem ähnlichen Projekt?

Gerne helfe ich Ihnen Ihr Internet-Projekt zu realisieren. Wenden Sie sich einfach an mich.

Ergebnis

Tannkosh-WebsiteDem Kunden steht jetzt mit Typo3 ein mächtiges Content Management System zur Verfügung. Die Seiten wurden von mir in XHTML 1.0 Strict programmiert und werden bei Weiland gehostet – das Design stammt von den Kollegen von ultrabold.
Die vier Hauptsäulen der Seite verfügen über je ein anderes Template, so dass der User auf den ersten Blick sehen kann, in welchem Bereich er sich aufhält. Die Seiten sind unter folgender URL zu erreichen: http://www.edmt.com

Anforderungsprofil

Der Kunde wollte seine bestehenden Webseiten “Flugplatz Tannheim”, “Flugschule Tannheim” und die Internetpräsenz des jährlich stattfindenden Flieger-Events “Tannkosh” unter einem Dach vereinen. Zusätzlich sollte noch die Gastronomie / Übernachtungsmöglichkeit vor Ort auf der neuen Seite integriert werden.
Der Kunde wollte die Seiten ohne HTML-Kenntnisse im Anschluss an die Fertigsstellung selbstständig pflegen können.
Da auf Grund der des Tannkosh-Events an dem Wochenende der Veranstaltungen extrem hohe Zugriffszahlen zu erwarten waren, war ein äußerst zuverlässiges Content Management System gefragt – auch musste ein Provider mit den entsprechenden Kapazitäten gefunden werden.

Features

Die Seite verfügt über folgende Features:

• Knapp 300 Einzelseiten
• Vier Hauptsäulen mit jeweils eigenem Template
• Im Backend definierbare Quicklinks für die vier Hauptkategorien
• Mehrsprachigkeit
• Webcam
• Wetterdaten
  Die Wetterdaten werden von der Wetterstation in Tannheim zur Verfügung gestellt und in Typo3 geparsed.
• Mehrere Foto-Gallerien
• Integration einer Mitflugzentrale

Interesse an einem ähnlichen Projekt?

Falls Sie Interesse haben, zögern Sie nicht, mir eine Email zu schreiben – gerne helfe ich Ihnen bei der Umsetzung Ihres Projektes.

Obwohl Typo3 Templates sich mit css_styled_content schon sehr detailliert mit CSS formatieren lassen, ist es mit css_styled_contend standardmäßig nicht möglich, via CSS die einzelnen Content Elemente anzusteuern. Wenn man zum Beispiel bei Typo3 erreichen will, dass sich um jedes Inhaltselement ein Rahmen befindet, muss man einen Container um jedes einzelne Content-Element legen. Diesen kann man dann anschließend mit CSS formatieren.

Einen Container mit der Klasse “content-element” wird mit folgender Zeile im Setup des Typo3 Templates um jedes Inhaltselement gelegt:

tt_content.stdWrap.dataWrap = <div class="content-element"><a id="c{field:uid}"></a>|</div>

anschließend kann dieser Container mit CSS formatiert werden.

Diese vorgehensweise ist natürlich erheblich effizienter als die Datei typo3/sysext/css_styled_content/setup.txt zu editieren, da Änderungen dort bei einem Update der Typo3 Version verloren gehen könnten.

Link zu HostEurope (aff.)Die Wahl des Hosting Providers ist nicht immer einfach. Insbesondere da der Umzug einer Domain (zumindest bei der Portierung der Email-Adressen) einigen Aufwand verursachen kann, bindet man sich in der Regel sehr langfristig an den initial gewählten Provider.

Da ich immer wieder von Kunden und Interessenten gefragt werde, welchen Hoster ich empfehlen würde, veröffentliche ich hier nun eine Liste mit Providern, mit denen ich durchgehend positive Erfahrungen gesammelt habe:

• HostEurope (aff.)
  Ist ideal für kleine bis Mittelgroße Projekte mit mäßigem Anspruch an die Serverleistung. Blogs sowie kleinere CMS wie Joomla lassen sich dort problemlos hosten.
• Mittwald
  Erstklassiger Hoster für Typo3 Content Management Systeme.
• JWeiland
  Ebenfalls guter und im Vergleich zu Mittwald preisgünstigerer Hoster für Typo3 CM Systeme. Allerdings müssen Upgrades der Typo3-Version im gegensatz zu Mittwald von Hand vorgenommen werden, was je nach Erfahrung und Inhalt ca. eine Stunde Arbeitsaufwand pro Upgrade bedeutet.

Meine Erfahrungen mit 1&1 sind hingegen nicht so gut, auch wenn ich aktuell dort einige Seiten Hoste. 1&1 neigt dazu, seine Server sehr stark auszulasten, ist vergleichsweise teuer und hat lange Vertragslaufzeiten.
Ich selber bin zur Zeit dabei meine Internetseiten von 1&1 zu HostEurope zu portieren.

Im Zuge eines Relaunches des Internetauftritts des Aeroclub Heidelberg wurde das Design der Seite überarbeitet sowie der Inhalt auf das Content Management System Typo3 portiert.

Ergebnis

www.aec-hd.deNach Abschluss der Arbeiten stand dem Aeroclub eine eigenständig administrierbare Plattform zur Information von Mitgliedern und Interessenten zur Verfügung.
Durch die Verwendung des CMS Typo3 ist es nun möglich aktuelle Meldungen im News-Bereich zu ergänzen sowie die Inhalte der Seite zu überarbeiten und neue Menüpunkte hinzuzufügen. Darüber hinaus gibt es auf den Seiten nun einen internen Bereich, der ausschließlich den Mitgliedern des Vereins noch vorangegangenem Login vorbehalten ist.

Programmierung in XHTML und CSS

In Zusammenarbeit mit den Designern des Layouts wurde das neue Aussehen der Seite als Template für Typo3 umgesetzt. Besonderer Wert wurde hierbei auf dynamische Elemente wie Navigationsstrukturen gelegt, so dass sich Änderungen im Typo3 Backend ohne einen Webdesigner hinzuziehen zu müssen auf das Frontend auswirken. So können zum Beispiel beliebig viele neue Menüpunkte ohne Kenntnis von HTML durch das entsprechnnd Zuständige Mitglied ergänzt werden.
Das Layout lag ursprünglich als Bilddatei vor und wurde von mir anschließend in XHTML und CSS programmiert. Falls Sie Interesse an einer ähnlichen Dienstleistung haben können Sie mich gerne jederzeit kontaktieren.

Link

http://www.aec-hd.de

Die Internetseiten der Deutschen Selbsthilfe Angeborene Immundefekte wurden einem vollständigem Redesign unterzogen und nach Typo3 portiert. Neben den Inhalten wurde auch das bestehende Forum auf das CMS Typo3 portiert.

Ergebnis

www.dsai.deNach Abschluss der Arbeiten stand dem Verein ein komplett neu gestaltetes Informationsportal auf Typo3-Basis zur Verfügung. Die Überarbeitung des Inhalts kann nun bequem von den hierfür verantwortlichen Mitgliedern übernommen werden – Kenntnisse in HTML-Programmierung oder Ähnlichem sind nicht notwendig. Die Seiten werden seit dem Relaunch vollständig eigenständig von dem Mitgliedern betreut – die Dienstleistungen eines Webdesigners müssen für Aktualisierungen nicht mehr in Anspruch genommen werden.

Design

Von der Agentur ultrabold Kommunikationsdesign mit der ich eng zusammenarbeite, wurden dem Kunden zwei verschiedene Layouts vorgeschlagen. Der Kunde wählte eines der Designs aus und hatte Gelegenheit weitere Wünsche bezüglich des Aussehens der Seiten einzubringen. Im Anschluss wurde aus dem bis dahin nur als Bild vorliegende Design von mir ein XHTML-Template für das Content Management System Typo3 entwickelt.

W3C valide XHTML-Programmierung

Das Typo3-Template der Seiten wurde in XHTML 1.0 Strict entwickelt und validiert gemäß der Standarts des W3-Konsortiums (validierung einsehen).

Portierung der Inhalte nach Typo3

Typo3 ist mit weit mehr als einer Million Installationen ein sehr weit verbreitetes Content Management System. Es ermöglicht die komfortable Verwaltung von Inhalten einer Internetseite, ohne dass Kenntnisse in der Programmierung von HTML oder XHTML benötigt werden. Nach der Erstellung des Layouts wurden die Inhalte der bestehenden Seite auf ein bei Mittwald Medien gehostetes Typo3 CMS portiert.

Portierung des Forums nach Typo3

Auf den alten Seiten des Vereins wurde mit “Stephanos Bulletin Board” eine sehr alte und wenig verbreitete Forensoftware eingesetzt. Schnittstellen zu Typo3 waren bis dahin nicht existent. Da die Datensätze für moderne Forensoftware untypisch nicht in einer mySQL-Datenbank sondern in Textdateien abgelegt waren wurde von mir eine Schnittstelle entwickelt um die bestehenden Beiträge in der Typo3 Erweiterung chc_forum zu nutzen. Das Forum steht nun vollintegriert in Typo3 und ohne Verlust von Daten auf den neuen Seiten des Vereins zur Verfügung.

Link

http://www.dsai.de

Portierung Ihrer Internetseite nach Typo3

Falls auch Sie Interesse an einer Portierung Ihrer Internetseiten nach Typo3 haben, zögern Sie bitte nicht, sich an mich zu wenden. Gerne mache ich Ihnen ein individuelles Angebot.

Zuerst möchte ich erläutern, warum ich den Begriff “Webdesigner” grundsätzlich in Anführungszeichen schreibe: Es handelt sich hierbei keinesfalls um einen erlernbaren Beruf oder Studiengang. Jeder kann sich als “Webdesigner” bezeichnen und entsprechend können natürlich auch die Ergebnisse aussehen. Daher verwende ich den Begriff nur sehr ungern, um meine Tätigkeit zu beschreiben, da sowohl mein Angebot, als auch meine Fähigkeiten über ein reines Webdesign hinausgehen.

Anschließend möchte ich auf die Fragen, die man nicht nur von potentiellen Kunden gestellt bekommt, sondern sich natürlich vor dem Schritt in die Selbstständigkeit auch selber stellt, eingehen:

• “Wie unterscheide ich mich von der Konkurrenz?”
• “Was ist mein Wettbewerbsvorteil?”

1. Jahrelange Erfahrung in Entwicklung und Einsatz von Webseiten, Web-Software und Web-Technologien

Seit 1997 entwickle und programmiere ich Internetseiten für eine Vielzahl von Kunden. Die Aufgaben umfassten hierbei:

• Die Erstellung einfacher Internetseiten
• Die Entwicklung von Templates (Layoutvorlagen) für Content Management Systeme (CMS) und Weblogs sowie Online-Shop-Systeme
• Implementierung verschiedener CMS (unter anderem Typo3 und Joomla)
• Entwicklung umfassender Web-Applikationen (wie zum Beispiel komplette Online-Shops)
• Anpassung von Open-Source Applikationen an die Bedürfnisse eines Kunden durch Entwicklung zusätzlicher Module bzw. umprogrammierung der bestehenden Software
• Optimierung von Internetpräsenzen für Google AdSense
• Organisiation von AdWords-Kampagnen sowie Optimierung von Internetseiten auf die speziellen Anforderungen durch AdWords-Besucher
• Administration von Linux-Webservern (Apache, mySQL, PHP)
• Administration und Einrichtung von Linux-Desktop Systemen
• Implementation von auf Asterisk basierenden VoIP-Telefonanlagen

2. Intensive Beratung zu Beginn der Planungsphase

In den meisten Fällen ist den Kunden nicht klar, was für eine Internetpräsenz sie eigentlich benötigen und vor allem, wie ihre Seiten aufgebaut sein sollten um das Ziel zu erreichen. Viele Firmen, insbesondere aus dem Mittelstand benötigen eine Internetseite primär, weil es “zum guten Ton gehört” im Internet erreichbar zu sein. Die Bedürfnisse gehen aber selten über eine Visitenkarte hinaus.
Will der Kunde aber über seine Seite direkt (Online-Shop o.ä.) oder indirekt (durch Herstellung von Kontakt) Umsatz generieren müssen Aufwand und Kosten für die Internetseite in einem reelen Verhältnis zu den erwarteten Erlösen stehen.

3. Strukturierter Ablauf der Entwicklung Ihrer Internetpräsenz

In den Jahren der Entwicklung hat sich folgendes Ablauf-Schema kristallisiert, dass sich immer wieder bewährt hat:

1. Initialgespräch zur Festlegung von Bedürfnissen, Anforderungen und Budget
2. Konzipierung von Layoutvorschlägen als Bilddateien gemäß der Anforderungen
3. Auswahl des ansprechendsten Layouts durch den Kunden und eventuelle Anpassung
4. Entwicklung einer statischen Seite (XHTML, CSS) und anschileßendes Review durch den Kunden
5. Entwicklung eines Templates für die eingesetzte Software (CMS, Blog) bzw. Erstellung der Internetpräsenz
6. Einpflegen des Inhalts in die Seite
7. Erneutes Review durch den Kunden und anschließende Freischaltung der Internetpräsenz

4. Umfassende Kenntnisse von Web-Applikationen, Standardkonformer Programmierung sowie neuester Web-Technologien

In den letzten Jahren habe ich verschiedenste Web-Applikationen, wie Typo3, Joomla, Wordpress und osCommerce (und Derivate wie OSIS-Online-Shop und XTCommerce) für die Internetpräsenzen meiner Kunden eingesetzt.

Ich programmiere Internetseiten grundsätzlich standardkonform (XHTML 1.0 Strict und CSS2.0). Von mir entwickelte Seiten lassen sich in allen gängigen Browsern (Internet Explorer 6 und 7, Firefox, Opera, Safari, Konqueror) darstellen – sie wären überrascht, wenn Sie wüssten wie viele Seiten nur in einem oder zweien der Browser ordentlich angezeigt werden.

Gerne setze ich für Ihre Internetseiten bei Bedarf innovative Technologien wie AJAX, RSS-Feeds, XML und andere ein, um den Wert Ihres Internetangebots für Sie und Ihre Kunden zu erhöhen.

5. Betriebswirtschaftliche Kenntnisse

Als studierter Betriebswirtschaftler beschränke ich meine Arbeiten nicht nur auf die Ästhetik ihrer Seiten, sondern auch für den für Sie durch Ihre Internetpräsenz generierten Wert (ROI). Insbesondere bei Online-Shops und anderen Seiten deren Zielsetzung es ist Umsatz zu generieren kommt es häufig nicht nur auf den optischen Reiz einer Seite, sondern auch auf die Organisation der Inhalte an, so dass es dem Interessenten möglichst leicht gemacht wird Kontakt aufzunehmen oder ein Produkt zu kaufen. Dies ist von besonderer Wichtigkeit, wenn Affiliate- oder Werbeprogramme – wie z.B. AdWords von Google – zum Einsatz kommen, da hierbei die Besucher “eingekauft” werden.

6. Intensive Erfahrungen mit Google AdSense und AdWords

Ich arbeite seit Anfang 2006 intensiv und erfolgreich mit Google AdSense und AdWords. Darüber hinaus übernehme ich die Optimierung von AdSense-Anzeigen auf den Seiten meiner Kunden und verwalte AdWords-Werbekampagnen.

7. Erfahrungen in der Optimierung von Internetseiten für Suchmaschinen (SEO)

Insbesondere, wenn es um die Positionierung bei Suchmaschinen von Google geht, werden Interessenten seitens der “Webdesigner” häufig Informationen vorenthalten, wenn nicht sogar schlichtweg belogen. An dieser Stelle sei vorweg geschickt, dass eine bestimmte Position bei den Suchmaschinen weder versprochen noch garantiert werden kann.
Ganz besonders möchte ich von windigen Angeboten abraten, das Ranking bei Suchmaschinen durch sogenannte Link-Farmen zu verbessern deren Aufgabe alleine in der Verlinkung anderer Seiten besteht. Ein derartiges vorgehen ist nicht nur unmoralisch sondern verstößt auch gegen Googles Richtlinien für Webmaster und kann in einer Entfernung aus dem Google-Index resultieren. Anschließend würden die Seiten von Google nicht mehr gelistet, was grade bei kleinen und mittelgroßen Präsenzen relativ schnell vorkommen kann.

Erheblich wichtiger für die Indizierung und das Ranking Ihrer Suchmaschine bei Google ist die klare (und standardkonforme) Programmierung Ihrer Seiten – insbesondere die Darstellbarkeit im “Nur Text”-Modus, da der Google Suchroboter genau so Ihre Internetseite “sieht”. Alle Seiten Ihrer Präsenz müssen über (X)HTML-Links – also nicht über Technologien wie Flash – ansteuerbar sein, da sie sonst vom Googlebot nicht gefunden und folglich auch nicht indiziert werden können. Auch die richtige und eindeutige Kennzeichnung von Überschriften und Meta-Informationen im (X)HTML-Quellcode ist von großer Wichtigkeit, da hier dem Crawler aufgezeigt wird, mit welcher Thematik sich die Seite vorwiegend beschäftigt.

Kontakt aufnehmen

Falls ich Ihr Interesse geweckt haben sollte, können Sie mich gerne jederzeit per Email kontaktieren, ich rufe Sie dann umgehend zurück. Alternativ stehe ich Ihnen natürlich auch gerne telefonisch, per Fax oder per Briefpost zur Verfügung: