Firebug – das Must-Have-Add-On für Webentwickler

Als Webentwickler kommt man an Firebug fast nicht vorbei. Es ist eine sehr leistungsfähige und auch sehr beliebte Entwicklungsumgebung für Internetseiten und Anwendungen, die man mit eigenen Programmen erweitern kann. Die Software hat eine eigene Schnittstelle, an die Entwickler ihre Programme anbinden können. Firebug erhalten Sie kostenlos auf der Addon-Seite von Mozilla. Wenn das Add-On in Firefox eingebunden ist, kann es mit Klick auf den kleinen Käfer (Bug) in der Statusleiste aufgerufen werden. Dann wird das aktuelle Dokument komplett eingelesen und analysiert. Besonders geeignet ist Firebug für die Analyse eigener und fremder Webseiten. Ein integrierter Editor hilft bei der Bearbeitung von HTML-Seiten und CSS-Stylesheets.

2011-09-08T10:43:51+02:00September 8th, 2011|HTML, Javascript|Kommentare deaktiviert für Firebug – das Must-Have-Add-On für Webentwickler

Weniger Klassen machen HTML- und CSS-Dateien übersichtlich

Wer ein kleines Projekt mit CSS beginnt, legt häufig Klassen an, wie er sie gerade braucht. Da findet man dann in der CSS-Datei solche Konstrukte: .h1rot { color=#933 usw. } .h2rot { color=#933 usw. } .prot{ color=#339 usw. } Und es werden immer mehr Klassen, die die HTML-Datei immer unübersichtlicher machen: <div>                <h1 class="h1rot">Überschrift 1</h1>                <h2 class="h2rot">Überschrift 2</h2>                <p class="prot">                                Hier steht der Inhalt                </p> </div>   Dagegen kann man etwas tun. Mit einem gut geschriebenen CSS kann man sich viele Klassen sparen: .rot p { color=#933 usw. } .rot h1 { color=#933 usw. } .rot h2 { color=#933 usw. } In diesem Beispiel wird nur eine Klasse, nämlich rot, benutzt und die unterschiedlichen Kindelemente wie p, h1 oder h2 werden über ihre Elternelemente erreicht. Der HTML-Code sieht dann so wesentlich übersichtlicher aus: <div class="rot">                <h1>Überschrift 1</h1>                <h2>Überschrift 2</h2>                <p>                                Hier steht der Inhalt                </p> </div>

2011-08-11T08:50:52+02:00August 11th, 2011|HTML|Kommentare deaktiviert für Weniger Klassen machen HTML- und CSS-Dateien übersichtlich

Formularspam mit einem Topf Honig abwehren Teil 2

Wie schon im ersten Teil dieses Artikels beschrieben, wird bei der Honeypot-Methode zur Abwehr von Formularspam ein zusätzliches Formularfeld erzeugt, das für Menschen nicht sichtbar ist. Das style-Attribut wurde wegen der Verständlichkeit ins span-Element gesetzt. Besser ist es, hier eine Klasse einzutragen und das style-Attribut in der CSS-Datei des Formulars anzugeben. Das hilft dann auch gegen intelligenter programmierte Spambots. <!—Der Honeypot gegen Formularspam  --> <span style="display:none"> <label for="mail">Das folgende Feld muss leer bleiben:</label> <input type="text" name="mail" id="mail" title="Dieses Feld muss leer bleiben " /> </span> Die Auswertung des Honeypots wird in die meist schon vorhandene PHP-Fallverzweigung mit den Plausibilitäts-Prüfungen eingesetzt. Hat ein Spambot das Honeypot-Feld ausgefüllt, verzweigt das Programm per Header-Befehl zurück zur Formulareingabe. foreach($_POST as $key => $value) { switch ($key) { // Hier stehen alle Plausibilitätskontrollen case "mail":                           // Honeypot-Feld gegen Formularspam muss leer sein If ($value != "") { $go="n"; $location="formular.php "; header("Location: $location"); } break; } } Denken Sie bitte daran, dass der Header-Befehl nur dann funktioniert, wenn vorher noch keine Ausgaben durch das Programm erzeugt wurden.

2011-02-28T12:15:46+02:00März 3rd, 2011|Allgemein|Kommentare deaktiviert für Formularspam mit einem Topf Honig abwehren Teil 2

Formularspam mit einem Topf Honig abwehren Teil 1

Sie kennen sicher den lästigen Formularspam. Spambots tragen ihre zweifelhaften Werbebotschaften in jedes erreichbare Formular ein, selbst Suchformulare mit nur einem Eingabefeld ohne Chance auf Sichtbarkeit der Werbung bleiben nicht verschont. Es sieht natürlich nicht gut aus, wenn im Gästebuch einer Website Werbung für Viagra und Suchanzeigen für Cash-Manager erscheinen. Aber auch in Formularen, die keine öffentlich sichtbaren Resultate produzieren oder deren Resultate vor Veröffentlichung von Menschen gesichtet werden, kann Formularspam die Listen ziemlich unübersichtlich machen. Der erste Gedanke eines Spamgeplagten Webmasters ist häufig die Einführung von Captchas, also verzerrten Bildchen mit Zahlen oder Buchstaben darin, die der Benutzer erkennen und in ein Formularfeld eingeben muss. Wenn die aber so gut sind, dass Roboter damit Probleme haben, haben Menschen auch Probleme damit und müssen häufig mehrere Versuche machen, bis das Formular abgeschickt wird. Es gibt verschiedene bessere Ansätze, die alle mehr oder weniger darauf beruhen, dass es sich bei diesen "Spammern" um Robots handelt, also Programme, die sich so verhalten, wie sie programmiert sind. Man nutzt zum Beispiel die Messung der Zeit zwischen Laden und Absenden des Formulars, um Roboter zu erkennen, die das in Bruchteilen einer Sekunde machen können. Es gibt aber schon Robots, die diese Zeit per Algorithmus erhöhen. Andere Ansätze prüfen alle Inhalte [...]

2011-02-28T10:25:26+02:00Februar 28th, 2011|Allgemein|Kommentare deaktiviert für Formularspam mit einem Topf Honig abwehren Teil 1

SelfHTML als Wiki

Jeder, der Internetseiten erstellt, kennt auch SelfHTML. Hier wird jede Frage zu HTML ausführlich beantwortet und neben den Grundlagen und Befehlsreferenzen auch Tutorials und Kurse zu HTML, XML, XHTML, Javascript, Perl und CSS angeboten. Es gibt fast keine Frage zu diesen Themen, die nicht ausführlich behandelt wird. Jetzt haben die Verantwortlichen eine neue Entwicklung begonnen: SelfHTML wird sukzessive zu einem Wiki umgebaut. Das bisherige SelfHTML unter selfhtml.org wird noch parallel angeboten, bis das Wiki weitgehend aufgebaut ist und einen zufriedenstellenden Standard hat. Wenn ein Thema im neuen Wiki schon gut abgehandelt ist, wird in der alten Dokumentation ein Link auf den Eintrag im Wiki gesetzt. Auf der Startseite des alten SelfHTML gibt es auch einen Aufruf, als Autor beim neuen Wiki mitzuarbeiten. Die Inhalte des Wiki unterliegen der Crative Commons-Lizenz. Das erlaubt die Weiterverwendung und Vervielfältigung der Inhalte bei Nennung des Rechteinhabers. Das neue Wiki von SelfHTML finden Sie unter wiki.selfhtml.org.

2010-05-19T08:17:45+02:00Mai 28th, 2010|Allgemein|Kommentare deaktiviert für SelfHTML als Wiki

Eine Internetseite zentrieren

Sie möchten eine Internetseite erstellen, die im Browser mittig zentriert ist? Zu den guten alten Zeiten des HTML, als CSS noch kaum vorhanden war und das Layout einer Seite in aller Regel mit Tabellen festgelegt wurde, gab es die Standardmethode mit dem Quellcode: <table width = "100%" height = "100%" border = "0" cellspacing = "1" cellpadding = "0" align = "center"> <tr> <td align = "center" valign = "middle" width = "100%" height = "100%"> Der zentrierte Inhalt </td> </tr> </table> Bei dieser Lösung gibt es eine Vertikale und eine horizontale Zentrierung aller Elemente in der Tabelle. Meistens ist es aber gewünscht, nur horizontal zu zentrieren. Eine beliebte Methode dazu war früher auch das <center> - Tag, das inzwischen nicht mehr verwendet werden sollte. Dieses Tag wurde einfach  als erstes Element in den Body der Seite gesetzt, und alle darin befindlichen Elemente dadurch horizontal zentriert. Ein Beispiel dazu sieht so aus: <center> <table width = "700" height = "500" border = "1" cellspacing = "1" cellpadding = "0"> <tr> <td align = "center" valign = "middle" width = "100%" height = "100%"> Der zentrierte Inhalt </td> </tr> </table> </center> In XHTML wird das Layout mit DIV – Containern und CSS – Formatierungen festgelegt. Da sieht [...]

2010-04-27T08:21:47+02:00Mai 4th, 2010|Allgemein|Kommentare deaktiviert für Eine Internetseite zentrieren

Bluefish Version 2.0 – ein guter Programm-Editor für Anfänger

Bluefish ist ein flexibler Editor für Entwickler, der unter Anderem PHP, CSS, Javascript, XML, C, C++, CFML, gettext PO, HTML, Perl, Python, Ruby, Unix Shell, SQL und Java unterstützt. Man kann sehr produktiv mit Bluefish 2.0  arbeiten und spart sich gegenüber einem Standard-Texteditor viel Zeit. Der Editor verfügt über immer mehr Lokalisierungen (zur Zeit zehn) und ist auch auf die deutsche Sprache umschaltbar. Auch die Installationsroutine des Programms spricht Deutsch. Früher war Bluefish nur für Linux und Mac zu bekommen, seit der Version 1.3.7 gibt es auch eine native Version für Windows. Bluefish ist leicht und schnell. Im Vergleich mit anderen Programmeditoren braucht der Editor nur ein Drittel der Speicherressourcen. Er startet auch auf schwächeren Computern wie Netbooks echt schnell und lädt hunderte von Dateien in Sekunden. Dabei kann das Multi-Datei-Interface über 500 Dateien gleichzeitig geöffnet halten. Man kann mehrere Projekte mit Bluefish verwalten und selbstverständlich auch mit Dateien auf Netzwerkrechnern arbeiten. Eine unbegrenzte Undo/Redo-Funktion ist genauso selbstverständlich wie ein Auto-Recovery nach einem Crash oder ähnlichen Problemen. Intern arbeitet der Editor mit UTF8, unterstützt aber die meisten anderen Codierungen. Man kann Bluefish 2.0 kostenlos herunterladen, der Editor steht unter der Gnu Public License (GPL).

2010-04-20T12:37:20+02:00April 25th, 2010|Allgemein|Kommentare deaktiviert für Bluefish Version 2.0 – ein guter Programm-Editor für Anfänger

CSS mit PHP zur Laufzeit ändern

Auch mit PHP kann man zur Laufzeit CSS-Anweisungen oder Attribute verändern und dem Kontext des Programmes oder dem Status eines Benutzers anpassen. Dabei ist PHP von der Geschwindigkeit her Javascript unterlegen und empfiehlt sich, wenn global unterschiedliche CSS-Dateien ausgewählt werden sollen. Das ist zum Beispiel bei Browserweichen interessant, die passend zum vom Client verwendeten Browser die entsprechende CSS-Datei laden. Dabei ist PHP Javascript von den Möglichkeiten der CSS-Verarbeitung und –Manipulation her voraus. PHP ist die erste Wahl, wenn die CSS-Anweisungen und –Attribute aus einer Datenbank geladen werden sollen. Es ist auch möglich, dem Surfer die Auswahl des Styles für eine Webseite zu überlassen. Dazu wollen wir ein kleines Programmbeispiel besprechen: Die Seite kommt normalerweise in einem blauen Design, soll aber vom Besucher auf Rot oder Grün umgestellt werden können. Dazu werden zwei PHP-Elemente gebraucht, nämlich ein Link, der die Umschaltung als Parameter eines erneuten Seitenaufrufes steuert und ein Auswertungsteil im Header der aufgerufenen Seite. Die Link sehen wie folgt aus: <a href=”<? basename($PHP_SELF).“?design=rot”; ?> Seite in Rot </a> <a href=”<? basename($PHP_SELF).“?design=gruen”; ?> Seite in Gr&uuml;n </a> <a href=”<? basename($PHP_SELF).“?design=blau”; ?> Seite in Blau </a> Mit basename($PHP_SELF) wird der Name des aktuellen PHP-Programms ausgegeben und dann um den Parameter „design“ für die Seitenfarbe ergänzt. Dieser Parameter muss [...]

2010-04-16T17:49:33+02:00April 16th, 2010|Allgemein|Kommentare deaktiviert für CSS mit PHP zur Laufzeit ändern
Nach oben