Startseite
Presse
Impressum
Weblog
Drupal Theming Tipps
Hier ein paar Tipps, die beim Programmieren eines Drupal-Designs hilfreich sein könnten:
- Während der Entwurfsphase genau definieren, welches Menüs existieren sollen, wieviele Navigationsebenen die Menüs haben sollen und wie aktive Menüpunkte angezeigt werden.
- Frühzeit die system.css oder andere Standard-CSS-Dateien einbinden. Damit vermeidet man doppelte Definitionen und auch die Integration in das Drupal-System ist einfacher.
- Navigationsleisten sollten sich an den bestehenden Klassen der Standard-Navigationsleisten orientieren, um ein umständliches Theming der Menüs zu vermeiden.
- Regionen sollten auch als solche im HTML-Code lesbar sein. Deswegen am besten die Regionen nach einem einheitlichen Schema bennen, zum Beispiel <div id="region-sidebar">...</div>
Kostentreiber im Web-Design
Als freier Programmierer kann man ja ganz gut seine eigenen Aufwände kontrollieren. So habe ich in den letzten Wochen mal ganz genau hingeschaut, wo denn eigentlich die Aufwände beim Erstellen eines Drupal-Templates liegen. Die wichtigsten Punkte habe ich hier mal zusammen getragen:
- Gesamtüberblick verschaffen
Zunächst muss man verstehen, was eigentlich entwickelt werden soll und wo das Design eingesetzt werden soll. Eventuell muss auch ein bestehendes Design erweitert werden. - Funktionsumfang definieren
Was soll das Design leisten können? Dieser Punkte wird im wesentlichen dadurch beeinflusst, was auf der Website angeboten werden soll. - Zielgruppen definieren
Ein auf dem Endnutzer abgestimmtes Design erhöht die Zufriedenheit der Webseiten-Besucher und bestimmt damit maßgeblich den Erfolg einer Website. - Wireframe erstellen
Wenn die Anforderungen geklärt sind, kann mit den ersten Entwürfen begonnen werden. Diese werden meistens mit Papier und Bleistift erstellt und dem Auftraggeber vorgestellt. - Screendesign erstellen
Sind sich Auftraggeber und -nehmer über den Grobentwurf einig, wird dieser als Screendesign in einem gängigen Grafikprogramm umgesetzt. Wieder muss das Ergebnis mit dem Auftraggeber abgestimmt werden. - HTML/CSS Design erstellen
Anschließend muss ein Programmierer das Screendesign in gültigen HTML und CSS-Code umwandeln. Kostentreiber sind hier Schattierungen, Rundungen und AJAX-Elemente, die standardmäßig (noch) nicht in HTML vorgesehen sind. - Browsertests
Das Design sollte auf den gängigen Browsern gleich angezeigt werden. Schon frühzeitig sollte man mit den Browsertests beginnen, ansonsten sind die Aufwände kaum kontrollierbar. - Integration des Designs in das Gesamtsystem
Das fertige HTML-Design muss nun in die Template-Engine oder das Content-Management-System (z.B. Drupal) eingepflegt werden. Meistens beinhaltet dies nicht nur die Programmierung einer zentralen Template-Datei, sondern auch das Anlegen von Navigationsleisten und andere Regionen. Gerade Navigationsleisten können äußerst komplex werden, wenn man dem Nutzer eine verständliche und intuitive Navigation bis in die tiefsten Ebenen ermöglichen möchte. Zudem müssen Konflikte mit konkurrierenden CSS-Dateien (z.B. anderer Module) gelöst werden. - Validierung nach HTML- und CSS-Standard
Die offiziellen Valididatoren vom W3C dienen als Werkzeug zur Qualitätssicherung. - Abnahme
In einem gemeinsamen Walkthrough wird das Design auf die Erfüllung seiner Anforderungen hin überprüft.
Mit dieser Liste wird es hoffentlich klarer, wo die Aufwände beim Web-Design entstehen. Die Reihenfolge der einzelnen Punkte ist etwas idealisiert dargestellt, in realen Projekten werden einzelne Schritte häufig wiederholt. Auch sollte man nicht die Aufwände der "kleinen Extrawünsche" des Auftraggebers unterschätzen.
Zend Framework Cheat Sheet
Cheat Sheets sind ein wichtiges Mittel, um die Arbeit der Programmierer zu erleichtern und den Quelltext zu vereinheitlichen. Wir haben die für uns wichtigsten Klassen und Methoden zusammen getragen und auf ein ausdruckbares PDF gepresst.
- Zend Framework Cheat Sheet für die Version 0.9+
Neuerungen von PHP 5.3
Eigentlich hätten wir zu diesem Zeitpunkt schon über die neuen Möglichkeiten von PHP 6 sprechen sollen, aber entgegen der ursprünglichen Planung müssen wir uns nun noch mit einer 5 vor dem Komma zufrieden geben. Zugegebenermaßen gibt es aber trotzdem einige interessante Neuerungen, die es sich lohnt, zu erwähnen:
- Es wurde eine neue Fehlerklasse E_DEPRECATED eingeführt, um Programmierer vor nicht mehr erwünschten Funktionen zu warnen. Genauso wie E_STRICT-Fehlermeldungen führen diese aber nicht zum Programmabbruch.
- Die magischen Methoden (z.B. __get() oder __isset()) wurden um die magische Methode __callStatic() erweitert. Diese Methode wird immer dann aufgerufen, wenn eine nicht existierende statische Methode einer Klasse aufgerufen wurde. Somit kann man nun auch nicht existierende statische Methoden einer Klasse abfangen.
- Es wurde eine neue Funktion array_replace() eingeführt, mit der man Arrays zusammenführen kann und dabei bestehende Schlüssel überschrieben werden (anders als bei array_merge()).
- Es wurde eine neue Konstante __DIR__ eingeführt, die das Verzeichnis des gerade ausgeführten Skriptes enthält. Damit können Include- und Require Anweisungen optimiert werden, um die Einbindung anderer Dateien basierend auf einem absoluten Pfad zu ermöglichen. Das evtl. Durchsuchen anderer Verzeichnisse ralativ zur aktuellen Position im Verzeichnisbaum entfällt damit.
- Es wurden Namespaces eingeführt, um Namenskonflikte in größeren PHP-Projekten zu vermeiden. Das Trennzeichen für Namensräume (namespace separator) ist zwar gewöhnungsbedürftig, aber sinnvoll ist dieses Sprachfeature allemal. Gerade bei der Arbeit mit externen Bibliotheken wie PEAR, Zend Framework oder sonstigen Frameworks kann es leicht zur Dopplung von Klassennamen kommen.
- Lamda-Funktionen müssen jetzt nicht mehr umständlich mit create_function() erzeugt werden, sondern können jetzt direkt im Quelltext angelegt werden.
Natürlich kann man diese Liste noch beliebig erweitern, aber wir haben uns auf die wichtigsten Neuerungen beschränkt. Leider lässt die Unicode-Unterstützung weiter auf sich warten, so dass man momentan noch die PHP-Erweiterung mbstring verwenden muss, um vernünftig mit UTF-8-Strings zu arbeiten.
Automatisierte Funktionstests mit Selenium
Sobald Web-Anwendungen eine gewisse Komplexität überschreiten, ist es schwierig und zeitaufwendig alle Flows dieser Anwendung manuell zu überprüfen. Um die Entwickler hier zu unterstützen, gibt es Tool namens Selenium, welches auch als Firefox-Plugin verfügbar ist. Mit diesem Tool kann man Funktionstests für die Web-Anwendung erstellen und zu jedem Zeitpunkt automatisiert ablaufen lassen. Dazu legt man in dem Tool eigene Test Cases an, die bestimmte Nutzeraktionen (z.B. Formulareingaben, Mausklicks) simulieren und die erwarteten Ergebnisse validieren.
Natürlich sagen diese Art von Tests nichts über die Code-Qualität aus, aber die oberste Schicht kann sehr effizient überprüft werden. Im Folgenden haben wir einen Testfall für ein Registrierungsformular mit einigen zufälligen Eingabewerten erstellt. Bitte nicht wundern, die Selenium Test Cases werden als einfache HTML-Dateien gespeichert.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://selenium-ide.openqa.org/profiles/test-case">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="selenium.base" href="" />
<title>TestCaseRegistration</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">TestCaseRegistration</td></tr>
</thead><tbody>
<tr>
<td>open</td>
<td>/foo/bar/</td>
<td></td>
</tr>
<tr>
<td>type</td>
<td>firstname</td>
<td>Hans</td>
</tr>
<tr>
<td>type</td>
<td>lastname</td>
<td>Mustermann</td>
</tr>
<tr>
<td>store</td>
<td>javascript{ Math.floor( Math.random()*10000 ) }</td>
<td>random</td>
</tr>
<tr>
<td>type</td>
<td>username</td>
<td>testnutzer${random}</td>
</tr>
<tr>
<td>type</td>
<td>email</td>
<td>testnutzer${random}@testnutzer.de</td>
</tr>
<tr>
<td>type</td>
<td>street</td>
<td>Testraße. 1</td>
</tr>
<tr>
<td>type</td>
<td>postcode</td>
<td>12345</td>
</tr>
<tr>
<td>type</td>
<td>city</td>
<td>Teststadt</td>
</tr>
<tr>
<td>type</td>
<td>password</td>
<td>123456</td>
</tr>
<tr>
<td>type</td>
<td>password2</td>
<td>123456</td>
</tr>
<tr>
<td>click</td>
<td>agreement-useragreement</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>agreement-privacypolicy</td>
<td></td>
</tr>
<tr>
<td>clickAndWait</td>
<td>register</td>
<td></td>
</tr>
<tr>
<td>assertTitle</td>
<td>Registrierung erfolgreich</td>
<td></td>
</tr>
</tbody></table>
</body>
</html>
Bild oder Text neben Formularelement einblenden
Mit Hilfe der Klasse Zend_Form kann man mit dem Zend Framework sehr komplexe Formulare erstellen. Falls man ein Bild oder Text neben einem Formularelement einblenden möchte, helfen einem die Dekoratoren. Im folgenden ist ein Beispiel für ein einfaches Formular mit einem Dekorator, der ein Bild neben dem Eingabefeld einblendet.
$form = new Zend_Form();
$form->setAction('/foo/bar/')
->setMethod('post');
$foobar = new Zend_Form_Element_Text('foobar');
$foobar->setLabel('Your name')
->setAttrib('maxLength', 50)
->setDescription('<img src="/images/icon.gif" width="16" height="16" />')
->setDecorators(array(
'ViewHelper',
array('Description',array('tag'=>'','escape'=>false)),
'Errors',
array('HtmlTag', array('tag' => 'dd')),
array('Label', array('tag' => 'dt')),
));
$form->addElement($foobar);
Die Benutzung von $foobar->addDecorator('Description',array('tag'=>'','escape'=>false)); würde zwar prinzipiell auch gehen, allerdings können wir dann nicht festlegen, an welcher Stelle vom Decorator Stack der neue Decorator eingefügt wird.
Bundesländer-Formularfeld für Drupal
Für alle Entwickler, die mal schnell ein Bundesländer-Select für Drupal brauchen ;-)
$form['state'] = array(
'#type' => 'select',
'#title' => t('Bundesland'),
'#options' => array('Baden-Württemberg'=>'Baden-Württemberg','Bayern'=>'Bayern',
'Berlin'=>'Berlin','Brandenburg'=>'Brandenburg','Bremen'=>'Bremen','Hamburg'=>'Hamburg',
'Hessen'=>'Hessen','Mecklenburg-Vorpommern'=>'Mecklenburg-Vorpommern','Niedersachsen'=>
'Niedersachsen','Nordrhein-Westfalen'=>'Nordrhein-Westfalen','Rheinland-Pfalz'=>
'Rheinland-Pfalz','Saarland'=>'Saarland','Sachsen'=>'Sachsen','Sachsen-Anhalt'=>
'Sachsen-Anhalt','Schleswig-Holstein'=>'Schleswig-Holstein','Thüringen'=>'Thüringen'),
'#required' => false,
);
Web-Formulare einfach entwerfen und zeichnen
In jedem Projektplan müssen Formulare in angemessener Form beschrieben werden. Durch Zufall sind wir hier auf die Möglichkeiten bei Microsoft Visio 2003 gestoßen. Dort kann man unter Datei > Neu > Software > Windows XP-Benutzeroberfläche ganz leicht anschauliche Formulare für Webseiten erstellen. Hier ein kleines Beispiel:
Weitere Informationen:
Google SOAP Search API ohne Apache Axis
Wer kennt sie noch, die gute alte SOAP API von Google? Damit lassen sich Suchanfragen mit herkömmlichen Java-Programmen über das Simple Object Access Protocol durchführen. Zwar gibt es von Google keinen neuen Keys mehr für diesen Service, stolze Besitzer eines alten Keys können jedoch den Service weiterhin nutzen.
Wer nicht die Lust hat, sich für eine simple SOAP-Anfrage noch extra den Apache Axis einzurichten, kann auch mit Hilfe der Google-Bibliothek auf den Web Service zugreifen.
import com.google.soap.search.*;
import java.io.*;
/**
* Simple class to access google web service via SOAP
*
*/
public class SimpleSOAPRequest {
public static void main(String[] args) {
// Create a Google Search object, set our authorization key
GoogleSearch s = new GoogleSearch();
// INSERT YOUR OWN KEY HERE
String key = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
s.setKey(key);
s.setQueryString("YOUR SEARCH KEYWORDS");
GoogleSearchResult result = null;
try {
result = s.doSearch();
} catch (GoogleSearchFault f) {
System.out.println("Call to the Google SOAP API failed: "
+ f.toString());
}
System.out.println("Search Results");
System.out.println("");
GoogleSearchResultElement[] resultElements = result.getResultElements();
int i = 0;
int length = resultElements.length
while (i < length) {
GoogleSearchResultElement element = resultElements[i];
System.out.println("Title: " + element.getTitle() + " ("
+ element.getURL() + ")");
i++;
}
}
}
Das Programm kann von der Kommandozeile einfach Kompiliert und ausgeführt werden:
javac -classpath googleapi.jar SimpleSOAPRequest.java java -cp googleapi.jar;. SimpleSOAPRequest
Weitere Informationen:
- Offizielle API Referenz
- JavaDoc für die Google-Bibliothek
- Tutorial zum Kompilieren und Starten
Kostenlose Karten und schier endlose Möglichkeiten
So langsam entwickelt sich das OpenStreetMap-Projekt zu einer echten Konkurrenz von Google Maps. So kann man nun mit Hilfe der JavaScript-Bibliothek OpenLayers problemlos Karten auf die eigene Internetpräsenz einbinden - ohne dabei einen eigenen Schlüssel beantragen zu müssen wie bei Konkurrenzprodukten. Das Datenmaterial ist teilweise besser als bei der Konkurrenz, zudem sind wichtige Punkte wie Parkplätze, Sehenswürdigkeiten, Restaurants usw. bereits eingezeichnet.
Weitere Informationen:
- OpenStreetMap - Mutterprojekt mit freien Karten
- OpenStreetMap Schaufester - Zeigt die neuen Möglichkeiten mit den freien Karten auf
- OpenLayers - JavaScript-Bibliothek zum Einbinden der freien Karten auf der eigenen Website
- Map Compare - Vergleich der Karten von verschiedenen Anbietern
- Wiki-Seite - Informationen zur Einbindung der Karten auf die eigene Website
Nützliche Tastaturbefehle für das Aptana Studio
In unserem Unternehmen hat sich das Aptana Studio als die Entwicklungsumgebung für PHP-Anwendungen etabliert. Um mit dem Programm noch effektiver zu arbeiten, gibt es eine Reihe nützlicher Tastenkombinationen:
- Strg+H Projektweite Suche nach bestimmten Schlüsselwörtern im amtuellen Tab.
- Strg+J Inkrementelle Suche nach Schlüsselwörtern im geöffneten Dokument. Mit den Pfeiltasten kann von einem Treffer zu dem nächsten gesprungen werden.
- Strg+D Die aktuelle Zeile löschen.
- Strg+L Gehe zu Zeilennummer.
- Strg+Q Um zur letzten Stelle zurückzukehren, wo der Quelltext modifiziert wurde.
- Alt+Linke/Rechte Pfeiltaste Um zwischen den letzten Stellen hin- und herspringen, wo der Quelltext modifiziert wurde.
- Alt+ Hoch/Runter Pfeiltaste Die aktuelle Zeile hoch bzw. runter schieben.
- Strg+E Zeigt eine Liste aller momentan geöffneten Tabs.
- Strg+M Maximieren bzw. Minimieren des aktuellen Tabs.
7 unentbehrliche Werkzeuge für Web-Entwickler
Für die Entwicklung von Web-Anwendungen gibt es eine ganze Reihe kostenloser und nützlicher Tools, die den Erfolg oder Misserfolg eines Projekts maßgeblich beeinflussen.
- Em Calculator - Ungemein wichtig um skalierbare Schriftgrößen in HTML-Dateien korrekt zu berechnen.
- CSS Formatierer und Optimierer - Um CSS-Dateien zu komprimieren.
- JavaScript Compressor - Um die JavaScript-Dateien zu komprimieren.
- Google Trends - Um zu bestimmen, nach welchen Suchbegriffen häufig gesucht wird.
- Yahoo Backlinks Checker 1.0 - Ein Firefox-Plugin, um die Backlinks auf eine bestimmte Website zu bestimmen.
- Color Blender - Um schöne Farben für den Webauftritt zu bestimmen.
- Whois Lookup - Um herauszufinden, wer sich hinter einen Domainnamen verbirgt und welche Domains auf den gleichen Namen registriert sind.
Google Maps mit dem Zend Framework darstellen
Einfache Ausgabe des notwendigen Javascript Codes über einen View Helper
Mit Hilfe des Helpers headScript() im Zend Framework ist es relativ problemlos möglich, eine Google Map über wenige Zeilen PHP-Code einzubinden. Aber Vorsicht, beim Einbinden des Javascript-Codes für die Google Map müssen die Parameter richtig verknüpft werden. Die Vernknüpfung darf nicht über die Zeichenkette & erfolgen, da sonst die Google Map nicht dargestellt wird. Die folgende Beispielklasse zeigt die Vorgehensweise.
class MapController extends Zend_Controller_Action {
function indexAction() {
/*
* Set the JavaScript code for the google map
*/
$apikey = Zend_Registry::get('config')->googlemap->key;
$this->view->headScript()->appendFile('http://maps.google.com/maps?file=api
&v=2&key='.$apikey)
// do not use appendFile('http://maps.google.com/maps?file=api
&v=2&key='.$apikey)
->appendScript('
window.onload = function() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(51.760,14.327), 5);
map.addControl(new GSmallMapControl());
}
}
window.onunload = function() {
GUnload();
}
');
}
}
Drupal-Module mit Aptana Studio bearbeiten
Syntax Hervorhebung für *.module, *.info und *.install Dateien
Es ist ganz leicht Aptana Studio auch für die Entwicklung von Drupal-Modulen fit zu machen. Um die Moduldateien wie herkömmliche PHP-Dateien zu bearbeiten, muss man lediglich in der Menüleiste unter "Window > Preferences... > General > Content Types" zum Punkt "PHP Source File" die Drupal-Dateiendungen hinzufügen.
Um dem Drupal Coding Standard gerecht zu werden, muss außerdem unter "Window > Preferences... > Aptana > Editors" im Bereich "Tab Insertion" die Option "Use Spaces" mit einer Breite von 2 ausgewählt werden.
Kostenlose Entwicklungsumgebung zum Bearbeiten von PHP-Skripten
Mit dem Aptana Studio entsteht Konkurrenz zum Dreamweaver
Es gibt am Markt vielerlei Programme zum Bearbeiten von PHP- und HTML-Dateien. Der Platzhirsch ist sicherlich der Adobe Dreamweaver, dennoch sind in den letzten Jahren auch andere ausgereifte Entwicklungsumgebungen entstanden. Ein ernstzunehmender Konkurrent zu Dreamweaver ist das Aptana Studio, welches auf Eclipse basiert.
Das Schöne am Aptana Studio ist die Tatsache, dass es nicht nur PHP sondern auch HTML und CSS beherrscht (inkl. Code-Vervollständigung) und damit viele andere kostenlose Editoren in den Schatten stellt. Nur die Suchfunktion ist im Aptana Studio noch nicht ganz ausgereift, hier ist man vom Dreamweaver besseres gewöhnt. Es bleibt abzuwarten, wie sich die Software weiter entwickelt.
Mehr Informationen:
Tool zum Bearbeiten von ungeschützten PDFs
OpenOffice macht es möglich
Zum einfachen Bearbeiten von PDF-Dokumenten gab es bislang nur die Möglichkeit, auf kostenpflichte Programme wie Acrobat ode rIlllustrator zurückzugreifen. Mit dem neuen OpenOffice 3.0 und der "Sun PDF Import Extension" ist dies auch kostenlos möglich.
Mehr Informationen:
Sicherer Passwortschutz für PHP
Die Passwörter mit gesalzenen Hashfunktionen sicherer machen
Es ist ja mittlerweile überall bekannt, dass man Passwörter nicht im Klartext in einer Datenbank speichern sollte. In mySQL gibt es dazu Hashfunktionen wie SHA1 (Secure Hash Algorithm) oder MD5 (Message-Digest Algorithm 5), die ein Passwort in eine kryptische Zahlen-/Buchstabenkombination verwandeln.
Allerdings ist diese Art der Passwortspeicherung auch nicht mehr so sicher, da verschiedene Anbieter sogenannte Rainbow-Tables entwickelt haben, die für verschlüsselte Passwörter das passende Klartext-Passwort liefern. Sie glauben es nicht? Probieren Sie einfach mal Ihre verschlüsselten Passwörter beim GData Hash Lookup aus, das Ergebnis wird Sie überraschen.
Um eventuellen Angreifern das Leben schwerer zu machen, sollte man beim Verschlüsseln der Passwörter etwas Salz hinzugeben. Damit werden Rainbow-Tables nutzlos. Im folgenden Beispiel wurde das Passwort 'passwort123' um etwas Salz erweitert und anschließend mit MD5 verschlüsselt. Das Salz sollte auf einer Produktions-Umgebung natürlich anders gewählt werden.
INSERT INTO user (email, password)
VALUES ('info@wasauchimmer.de', MD5(CONCAT('passwort123', 'salz123'))); ... SELECT id FROM user WHERE email = 'info@wasauchimmer.de' AND password = MD5(CONCAT('passwort123','salz123'));
Damit sind die Passwörter nicht mehr so einfach über eine normale Rainbow-Table auffindbar.
Mehr Informationen:
Kostenlose Karten für Web-Anwendungen
Kartenmaterial nach dem Wiki-Prinzip
Bislang gab es im Internet zwar viele Anbieter von kostenlosen Kartenmaterial, allerdings gibt es dabei immer Einschränkungen für die kommerzielle Nutzung. Abhilfe schafft OpenStreetMap, eine Art Wiki für Karten. Jeder kann dort die Karten lesen und auch bearbeiten. Die Stadt Cottbus ist schon ganz gut modelliert, in Schwedt sieht es allerdings noch sehr düster aus.
Mehr Informationen:
Drupal Menüs aufteilen
Navigationsmenu und Administrationsmenu auf zwei Menüs aufteilen
Für Drupal-Neulinge ist es sehr verwirrend, wenn sich nach dem Login in das Backend plötzlich die normale Navigation um einige Links erweitert wird. Deshalb ist es ratsam, das Menü einfach aufzutrennen und einen Block für die Navigation auf der Internetpräsez zu wenden und den anderen für die Links im Login-Bereich.
Um dies zu tun, muss man zunächst unter "Verwalten > Strukturierung > Menüs" (admin/build/menu) ein neues Menü hinzufügen. Dies erzeugt automatisch einen neuen Block, den man nun unter "Verwalten > Strukturierung > Blöcke" (admin/build/block) noch im gewünschten Bereich aktivieren machen muss. Wenn dieser Block nur im Backend angezeigt werden soll, so muss man dies unter den Blockspezifischen Einstellungen noch festlegen.
Anschließend muss dieser neue Block mit Links gefüllt werden, was man wieder unter "Verwalten > Strukturierung > Menüs" (admin/build/menu) erledigt. Danach hat man zwei optisch getrennte Menüblöcke.
Neuerungen in Drupal 6
Die neueste Version des beliebten Content-Management-Systems ist verfügbar und wir haben eine Liste der wichtigsten Verbesserungen für Euch zusammen getragen:
- Bei der Installation können andere Sprachen als Englisch ausgewählt werden.
- Es wird standardmäßig das modernere mysqli statt mysql verwendet.
- Es gibt einen neuen Menupunkt unter "Administer > Report", der einen Überblick über sämtliche Statusmeldungen liefert.
- Ein neuartiges Syslog-Modul erlaubt das Speichern von Fehlermeldungen direkt im Betriebssystem. Bei Drupal 5 wurde dafür ausschließlich die Datenbanktabelle "watchdog" verwendet.
- Ein neuartiges Action-Modul erlaubt die gezielte Benachrichtigung per E-Mail bei bestimmten Benutzeraktionen wie z.B. beim Erstellen neuer Inhalte und beim Schreiben von Kommentaren.
- Es können nun benutzerdefinierte Datumsformate vergeben werden.
- Zusätzlich zum altbekannten "Page Caching" ist nun auch "Page Compression" möglich, um den Seitenaufruf zu beschleuningen.
- CSS- und JavaScript-Dateien können nun automatisch zusammengefügt werden, um die Anzahl der Requests bei Seitenaufrufen zu reduzieren. Gerade diese Option bietet einen ungemeinen Geschwindigkeitsvorteil bei großen Websites.
Darüber hinaus gibt es eine Reihe von Usability-Verbesserungen, unter anderem:
- Es gibt neue AJAX-Features um zum Beispiel die Reihenfolge der Blocks oder Menueinträge zu verändern.
- Bei der Tabelle der Benutzerberechtigungen bleibt der Tabellenkopf immer sichtbar. Damit können einfacher die Berechtigungen für spezifische Benutzer vergeben werden.
Fazit: Alles in allem sind dies sehr sinnvolle Verbesserungen, die das CMS noch besser machen aber es trotzdem nicht überladen. Es bleibt allerdings abzuwarten, wie schnell die bereits existierenden Module aus der Moduldatenbank auch für Drupal 6 verfügbar sind.
Google Map nachträglich laden
Google Map dynamisch nachladen um Ressourcen zu sparen
So schön Google Maps auch sind, um eine Google Map auf einer Internetseite darzustellen muss auch immer eine Menge JavaScript Code und Kartenmaterial geladen werden. Dies verlangsamt den Seitenaufbau erheblich und kann zum Teil sehr störend sein. Möchte man die Google Map erst laden, wenn der Benutzer eine bestimmte Aktion auf der Seite ausführt (abgefangen durch ein onclick oderonmouseover event) muss man dazu die Google API mit einem callback Parameter aufrufen. Dieser callback stellt eine selbst definierte JavaScript-Funktion dar, welche beim nachträglichen Laden der Google Map ausgeführt wird.
Beispiel:
<html>
<head>
<title>Google Map nachträglich laden</title>
<script type="text/javascript">
var mapCodeLoaded = false;
loadMap = function() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
var marker = new GMarker(map.getCenter());
map.addOverlay(marker);
marker.openInfoWindowHtml('Beschreibung zum Marker');
// nicht vergessen die GUnload-Funktion zu registrieren
window.onunload = function() {
GUnload();
}
}
}
showMap = function() {
if (!mapCodeLoaded) {
// den Kartenbereich sichtbar machen
document.getElementById('map').style.display = 'block';
var script = document.createElement("script");
// nicht vergessen den Google API Key einzutragen
script.setAttribute("src", "http://maps.google.com/maps?file=api&
v=2.x&key=XXXXX&async=2&callback=loadMap");
script.setAttribute("type", "text/javascript");
document.documentElement.firstChild.appendChild(script);
mapCodeLoaded = true;
}
}
</script>
</head>
<body>
<button onClick="showMap();">Google Map Einblenden</button>
<div id="map" style="display:none;width:300px;height:300px;"></div>
</body>
</html>
Datenbank mit allen Orten, Postleitzahlen und Geokoordinaten
Für ein aktuelles Projekt benötigten wir einer Datenbank mit allen Ortsnamen in Deutschland und den zugehörigen Postleitzahlen sowie Geo-Koordinaten. Hierbei sind wir auf den kostenlosen Datenbestand von OpenGeoDB gestoßen. Diese Datenbank ist frei und kann somit von jedem bearbeitet und verwendet werden. Dadurch ensteht eine sehr hohe Qualität an Daten, die sich durchaus mit der kommerziellen Konkurrenz messen kann.
Weitere Informationen:
Grundeinstellungen von Drupal
Hilfreiche Konfigurationsschritte zur Erstellung einer Internetpräsenz mit dem beliebten CMS
Gerade für Anfänger ist es nach der Installation von Drupal schwierig, die Einstellmöglichkeiten von Drupal zu überblicken. Hier ist nun eine Liste mit Optionen, die häufig von uns angepasst werden.
- Anzeige des Autors deaktivieren
Standardmäßig wird bei allen erstellten Inhalten die Informationen zum Autor angezeigt. Für eine normalen Internetauftritt ist dies allerdings meistens nicht erwünscht. Man kann die Autorinformation einfach unter 'Administer > Site building > Themes' im Tab 'configure' für bestimmte Inhaltstypen abschalten. - Änderung der Homepage (Startseite)
Möchte man die Startseite der mit Drupal verwalteten Internetpräsenz festlegen, wird man unter 'Administer > Site configuration > Site information' fündig. Dort kann man übrigens auch den Footer festlegen (Fußnote auf jeder Seite) oder aber den Titel der Internetpräsenz festlegen. - Kommentare für bestimmte Inhaltstypen Standardmäßig deaktivieren
Standardmäßig können alle mit Drupal erstellen Inhalte mit Kommentaren versehen werden. Für normale Internetseiten ist dies meinstens nicht erwünscht. Unter 'Administer > Content management > Content types' kann man für jeden Inhaltstyp einzeln festlegen, ob Kommentare erwünscht sind oder nicht.
Programm zum Erzeugen von ER-Modellen
Datenbankmodellierung ohne große Umwege
Als ich für ein Datenbankprojekt ein sehr komplexes Entity-Relationship-Modell (ER-Modell) zeichnen musste, war ich auf der Suche nach einem kostenlosen und leicht bedienbaren Programm. Durch einen Tipp bin ich dabei auf das Programm "Dia" gestoßen und ich kann es nur weiter empfehlen. Damit lassen sich jegliche UML- oder Netzwerk-Modelle auf einfache Weise erstellen und in gängige Bildformate exportieren. Die Software ist kostenlos für Windows, Linux und Unix erhältlich.
Weitere Informationen:
DocBook-Format für wissenschaftliche Texte
Diplomarbeiten ohne Stress
Klassische Schreibprogramme sind für wissenschaftliche Texte eher ungeeignet, denn damit können wissenschaftliche Formeln oder Grafiken nur sehr umständlich dargestellt werden und außerdem gibt es Probleme beim Setzen des Buches. Abhilfe schafft der SGML Dokumenttyp DocBook. Damit lassen sich Texte einfach schreiben und korrekt formatieren sowie in gängige Formate (wie z.B. PDF) konvertieren. Folgende Einstellungen haben sich bei der XSL-Transformation bewährt:
paper.type = A4 header.rule = 0 footer.rule = 0 section.autolabel = 1 section.label.includes.component.label = 1 double.sided = 1
Weitere Informationen:
- Tutorial des Lehrstuhls Internet-Technologie an der TU Cottbus
Schönere Verweise mit CSS
Mit CSS die Ausgabe von Links ändern
Möchte man kleine Bildchen gleich neben einem HTML-Link anzeigen, so eignet sich dafür am besten CSS. Über die Style-Definition
a.pdf:after {
content: url(pdf-icon.fig);
}
kann man beispielsweise bequen ein Logo rechts neben allen Links der Klasse pdf anzeigen.
Inkrementieren eines Integer-Wertes in einer mySQL-Datenbank
Mit nur einer Datenbankabfrage
Häufig muss man bei der Web-Programmierung einen numerischen Wert erhöhen oder erniedrigen. Dazu benutzen unerfahrene Benutzer gerne zwei Abfragen. Eine erste, um den aktuellen Wert aus der Datenbank zu lesen und eine zweite, um den neuen Wert in die Datenbank zu schreiben. Dies kann man jedoch mit einer einzigen Datenbank-Abfrage realsieren. Beispiel:
<?php $sql = "UPDATE `visits` SET `no_visitors` = `no_visitors`+1 WHERE `provider` = 'telecom'"; ?>
Das spart nicht nur Zeit sondern ist auch viel effizienter. Die einzige Bedingung ist, dass der entsprechende Datentyp numerisch und nicht leer ist (0 ist erlaubt).
Wieviele HTML-Tags kennen Sie?
Online-Quiz zum Ausprobieren
Für eine kleine Erheiterung auf Arbeit sorgte heute das Online-Quiz von www.justsayhi.com. Dort muss man innerhalb von 5 Minuten möglichst viele HTML-Tags aufzählen und bekommt für jeden richtigen Tag einen Punkt. Der Rekord im iDeveloper-Team lag bei 48 Punkten. Wer kann das überbieten?
Weitere Informationen:
Typo3 vs. Drupal
Welches CMS ist angenehmer für einen Web Developer?
In den letzten Monaten haben wir parallel mit Typo3 und Drupal gearbeit. Hier ein paar positive und negative Punkte, die uns bei der Arbeit mit beiden Systemen aufgefallen sind.
Typo3
+ Typo Script ist sehr mächtig und man kann damit viele Funktionen realisieren
+ Ist das Template einmal eingerichtet, können einzelne Seiten relativ einfach mit Text, Tabellen und Bildern bestückt werden
- das Installationspaket beinhaltet sehr viele Dateien und ist sehr umfangreich
- bevor man eine Website erstellen kann, muss man erst ein Template erstellen (oder man nimmt eine nicht mehr zeitgemäße Lösung mit Frames in Kauf)
- man muss erst Typo Script erlernen, um spezielle Funktionen zu realisieren
Drupal 5
+ man kann eine Website relativ schnell mit dem Standard-Template erstellen
+ das Aussehen der Website kann mit PHP direkt geändert werden
+ von Hause aus Unterstützung für Foren, Weblogs, Taxonomien und natürliche URLs
+ viele Tutorials im Internet und eine große Entwicklergemeinde
- man muss PHP und PHPTemplate erlernen, um eigene Template zu erstellen
- in der Standard-Installation gibt es keinen Rich-Text-Editor für Texteingaben
- Verschmelzung der Oberfläche von Frontend und Backend manchmal verwirrend
- Umstellung auf Deutsche Sprache etwas kompliziert
Typo3 Grundeinstellungen
Mit TypoScript die Eigenschaften von Internetseiten festlegen
Durch diese kleinen Codeschnipsel können verschiedene Angaben im HTML-Header eine Typo3-Internetseite gemacht werden. Inbesondere für die Suchmaschinen sind diese Angaben besonders wichtig, damit die Seite auch später gefunden werden kann.
page.meta {
keywords = auto garage carport
description = Eine Internetseite über ein Carport
author = Michael Mustermann
}
page.sitetitle = Internetpräsenz von Michael Mustermann
page.stylesheet = stylesheet*.css
Weitere Informationen: