TYPO3, iOS & Web-Development Blog

Anforderungen an professionelle TYPO3 Entwickler

Hier fassen wir einmal für euch zusammen, was einen guten TYPO3 Entwickler ausmacht. Heute reicht es nämlich nicht mehr aus, dass eine Website im Frontend funktioniert und wie gewünscht arbeitet, sich jedoch schlecht bis mittelmäßig gut pflegen lässt. Das Gesamtpaket TYPO3 sollte bei entsprechenden Kosten für Umsetzung natürlich auch zuverlässig und rund laufen, jedoch auch zukunftssicher umgesetzt werden, damit bei Updates von TYPO3 das Projekt weiterhin funktionsfähig ist und bleibt – mit jeder Funktion des Projektes.

Design und Layout

Das Design sollte W3C valide nach modernem HTML Doctype (XHTML 1.1, HTML 5) umgesetzt werden. Ein Aufbau als Div-Box-Modell setzen wir hier als Grundlage voraus. Tabellenlayouts sind seit vielen Jahren out (abgesehen von Newsletter Templates). Das Wunschdesign sollte so gut wie möglich nach Vorgaben mittels HTML und CSS erstellt werden – im Idealfall pixelgenau nach Vorgabe.

TYPO3 Grundlegendes

Daten die der Benutzer in ein TYPO3 Projekt ablegt kommen in den Ordner „fileadmin“. Alle weiteren Ordner werden automatisch von TYPO3 verwaltet und bedürfen im Normalfall keiner Benutzeraktion. Dass das Passwort des Admin Benutzer sowie des Install-Tools von TYPO3 auf ein besonderes sicheres Passwort gesetzt wird, sollte während der Grundeinrichtung erfolgen. Bedenkt: Das Standardpasswort „joh316“ kennt jeder TYPO3 Entwickler und damit könnte man so einiges an Unsinn machen.

Weiterlesen

Google Maps API: Distanzbasiertes, serverseitiges clustern von Markern

Hat man sehr viele Marker auf einer Google Maps Karte, kann es sehr schnell sehr unübersichtlich werden. Oft überlagern sich die Marker Icons und man erkennt nichts mehr. Ihr kennt das auch?

Heute zeigen wir euch, wie ihr Google Maps Marker serverseitig durch eine Cluster-Funktion schickt, damit eure Karten immer schön übersichtlich bleiben. Ein Cluster bildet in unserem Fall einen Punkt, der die in seiner Umgebung befindlichen Marker zusammenfasst und deren Anzahl darstellt.

Fangen wir an:

Wir beginnen mit einer einfachen MySQL Datenbank Abfrage zum Auslesen aller unserer Google Map Marker in einem PHP Array.Hinweis: Diese Abfrage dient lediglich als simples Beispiel und sollte so nicht Live genutzt werden.

// Neues Marker Array definieren
$alleMarker = array();
 
$sql = "SELECT * FROM mapping_marker";
$qry = mysql_query($sql);
while($res = mysql_fetch_array($qry)) {
	$alleMarker[] = $res;
}

stroeer_01Würden wir nun dieses Marker Array ausgeben, fänden wir – je nach Menge und Distanz der Marker – möglicherweise rechts stehendes Bild vor.

Dieses Bild zeigt das Mapping Tool der Außenwerbefirma Ströer mit einigen, jedoch noch wenigen Markern (auf der Ströer Karte werden nur maximal 250 Marker angezeigt).

Die Marker liegen einfach übereinander, damit kann – zumindest ich persönlich – nicht viel anfangen.

Weiterlesen

TYPO3 PDFs für Redakteure Basics: Die Grundlagen

Da wir unseren Kunden bisher immer persönlich oder telefonisch eine kleine Einführung in das CMS TYPO3 geben durften, haben wir uns nun einmal dafür entschieden eine TYPO3 PDF Reihe zu erstellen, damit unseren Kunden der Umgang mit dem System zum Einen bebildert erklärt wird, zum Anderen aber auch als „TYPO3 Nachschlagewerk“ fungiert, sollte der Kunde vergessen haben, wie eine bestimmte Aktion ausgeführt wird.

Die PDFs werden je nach „Gebiet“ sehr verständlich (Basics) bis etwas anspruchsvoller umgesetzt werden. Dem liegt einfach die teilweise komplexität von TYPO3 zugrunde.

Wir beginnen hier und heute mit der TYPO3 Basics PDF für Einsteiger.

Die PDFs selber befinden sich hier: TYPO3 PDFs für RedakteureWir haben mit der TYPO3 Basics PDF begonnen und werden uns in der nächsten Zeit auch anderen PDFs zum Umgang mit TYPO3 widmen.

TYPO3 Basics kann hier sofort heruntergeladen werden.

Weiterlesen

SEO für sg_glossary: Titel, Keywords und Beschreibung

Heute zeigen wir euch, wie ihr die TYPO3 Extension sg_glossary etwas mehr in Richtung SEO optimieren könnt. Das ganze passiert lediglich über TypoScript und ist wirklich simple.

Zunächst sei gesagt, dass wird davon ausgehen, dass die Extension bereits installiert ist und läuft. Auf die „sprechenden URLs“ gehen wir hier nicht weiter ein, da es dazu schon viele Beiträge gibt, welche wunderbar funktionieren.

Update

Beim Neuaufbau unserer neuen Website haben wir bemerkt, dass der hiergenannte TypoScript Code leider nicht 100% einwandfrei überall funktionierte.Wir haben den Artikel aktualisiert.

Hinweis: Wir nutzen sg_glossary mit RealURL.

Um die Glossar-Einträge etwas mehr für Suchmaschinen zu optimieren müsst ihr lediglich folgendes TypoScript in euer Template einbinden (eine Erklärung dazu folgt danach):

[globalVar = GP:uid > 0]

# Bugfix sg_glossary
lib.tx_sgglossary_pi1.pageTitle.10.source >
lib.tx_sgglossary_pi1.pageTitle.10.source.data = GP:uid
lib.tx_sgglossary_pi1.pageKeywords < lib.tx_sgglossary_pi1.pageTitle
lib.tx_sgglossary_pi1.pageKeywords.10.conf.tx_sgglossary_entries.field = pagekeywords//word
lib.tx_sgglossary_pi1.headerData.title.15 < lib.tx_sgglossary_pi1.pageTitle
lib.tx_sgglossary_pi1.headerData.keywords.15 < lib.tx_sgglossary_pi1.pageKeywords

# Pagetitle
page.config.noPageTitle = 2
lib.tx_sgglossary_pi1.headerData.title.15.wrap = <title>|: Begriffserklärung im Mediendesign Glossar</title>
page.headerData.5 >
page.headerData.5 < lib.tx_sgglossary_pi1.headerData.title
 
# Keywords
lib.tx_sgglossary_pi1.headerData.keywords.15.wrap = <meta name="keywords" content="|,typo3,printdesign,mediendesign,webdesign,eifel,sinzig,bonn,köln,koblenz,online-shop" />
page.headerData.999.local.keywords >
page.headerData.1400 < lib.tx_sgglossary_pi1.headerData.keywords

# Description
lib.tx_sgglossary_pi1.pageDesc < lib.tx_sgglossary_pi1.pageTitle
lib.tx_sgglossary_pi1.pageDesc.10.conf.tx_sgglossary_entries.field = description//pagetitle//word
lib.tx_sgglossary_pi1.pageDesc.10.conf.tx_sgglossary_entries.stripHtml = 1
lib.tx_sgglossary_pi1.pageDesc.10.conf.tx_sgglossary_entries.crop = 156 | ... | 1
lib.tx_sgglossary_pi1.headerData.description.15 < lib.tx_sgglossary_pi1.pageDesc
lib.tx_sgglossary_pi1.headerData.description.15.wrap = <meta name="description" content=" | " />
page.headerData.999.local.description >
page.headerData.1300 < lib.tx_sgglossary_pi1.headerData.description

[global]

Weiterlesen

Service-Monitor Plugin für QNotifier (iPad / iPhone Monitoring)

Wir haben ein Plugin für QNotifier entwickelt mit dem es möglich ist, definierte Services auf einem Linux Server mit seinem iPhone oder iPad zu überwachen und ggf. vollautomatisch neu starten zu lassen.

Der ein oder andere hat vielleicht schonmal etwas von QNotifier gehört. Es ist eine App für iPhone oder iPad und ist derzeit gratis im AppStore erhältlich.

Mit QNotifier ist es möglich seinen Linux Server am iPhone oder iPad zu überwachen. Neben den Standard-Funktionen welche Speicher-, CPU-Auslastung, Load etc. anzeigen, ist es möglich für QNotifier auf Ruby Ebene eigene Plugins zu erstellen und diese natürlich auch zu nutzen.

Die Installation von QNotifier geschieht über die Ruby-Gems und sollte an sich nicht besonders schwer sein.

Service-Monitoring Plugin für QNotifier

Unser eigenes Plugin bietet nun die Möglichkeit, die über „ps fax“ ausgegebene Prozessliste nach bestimmten Prozessen zu durchsuchen und den entsprechenden Status auf dem iPhone wiederzugeben.

Weiterlesen

MySQL Datenbank und Tabellen in UTF-8 umwandeln

Heute zeigen wir euch, wie ihr bereits gefüllte MySQL Datenbanken in UTF-8 umwandeln könnt. Das ganze ist im Bereich TYPO3 und mehrsprachigen Seiten relativ sinnvoll, damit alles wie gewünscht angezeigt wird.

Für unsere Konvertierung in UTF-8 benötigt ihr Shell-Zugriff auf euren Server und die Datenbank.

Backup erstellen

Zunächst solltet ihr ein Backup erstellen. Ganz einfach geht das mit dem wunderbaren Tool MySQLDumper.

MySQL Dump als UTF-8 erstellen

Mit dem folgenden Shell Kommando erstellt ihr eine .sql-Datei, welche direkt auf UTF-8 ausgelegt wird und ihr somit nur noch entsprechend importieren müsst.

Bitte beachtet: Datenbankdaten wie Benutzer und Datenbankname müsst ihr auf eure Gegebenheiten anpassen.

mysqldump --opt -Q -u USER -p  DATABASE | sed s'/DEFAULT CHARSET=.*;/DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;/g' > temp.sql

MySQL Restore als UTF-8

Als nächstes Importieren wird diesen UTF-8 Dump wieder in die Datenbank wie folgt:

mysql -u USER -p --default-character-set=utf8 DATABASE < temp.sql

Weiterlesen

Facebook Like Button XFBML in validem XHTML 1.1 – Version 4.0

Es ist wieder soweit. Eine neue und vielleicht letzte Version des beliebten Facebook Object Validation Scriptes ist verfügbar. Damit lassen sich XFBML Tags von Facebook (z.B. Like-Button) auch in XHTML 1.1 W3C-Konform einbinden. Lasst euch überzeugen, denn die Neuerungen sprechen für sich.

Was ist neu?

Dieses neue Facebook Object Validation Script stellt alle Vorgänger in den Schatten. Die Neuerungen betreffen den Rechenaufwand des Besuchers sowie die Dateigröße der JavaScript Datei.

Dateigröße: Wie schon in Version 2 ist die Dateigröße sehr gering – es sind gerade einmal 930 Byte. Hinzu kommen keine weiteren JavaScript Dateien.

Funktion: In der neuen Version wird nicht einfach alles ersetzt wie in unserem Vorgänger, der Version 2. Auch wird nicht nach einer zusätzlich angegeben Klasse gesucht wie in Version 1 und Version 3.

Es werden vordefinierte Standard-Tags gesucht (div, span, p, ul, li – Die Liste kann natürlich in der JavaScript Datei erweitert werden) und geschaut ob in den gefunden Tags ein <!– FBML xxx FBML –> existiert. Existiert nun kein XFBML Object in dem gefunden Tag, wird dieses verworfen und weiter gesucht. Existiert ein Object wird es sichtbar gemacht.

Weiterlesen

Klick-Zähler für HTML Links im Facebook-Style

Mit unserem neuen Script könnt ihr sehen wie oft bestimmte Links oder Downloads angeklickt wurden. Dieses Script verwenden wird auch bei uns im eigenen Blog und ist euch bestimmt schon einmal aufgefallen. Schicke Counts im Facebook Stil!

Unsere Idee war es ein Script zu entwicklen, welches die Anzahl der Klicks auf einen Link oder Download anzeigt. Am besten im schicken und modernen Facebook Like-Button Stil.

Es ist uns gelungen ein solches Script zu erstellen und möchten euch dieses natürlich nicht vorenthalten.

Update

Nun gibt es den Download Counter auch für jQuery!

Die Funktion

Nach dem Einbinden unseres JavaScripts sowie Mootools muss dem Link im Prinzip nur noch die Klasse class=“downloadCounter“ mitgeteilt werden. Danach werden ein paar Elemente, welche Ihr mittels CSS auf eure eigenen Bedürfnisse anpassen könnt angehangen und die entsprechende Funktion vollautomatisch hergestellt.

Weiterlesen