Tag-Archive for » CSS «

Webbasierter Cloud-Editor ACE 0.2.0 mit neuen Sprachen

ACE ist ein webbasierter Programmeditor mit einem Funktionsumfang, der einem normalen Editor schon ziemlich nahe kommt. Es ist ein Nachfolge-Projekt von Mozilla Bespin. Die neue Version 0.2.0 bringt eine vertikal oder horizontal geteilte Ansicht des Editors, Code-Folding und einen Syntax-Check während der Eingabe.

An Sprachen werden aktuell PHP, Java, Javascript, Ruby, C++, Python, HTML und CSS unterstützt. In Arbeit ist die Sprachunterstützung für Scala, C#, Perl, Groovy und JSON.

Der Cloud-Editor ACE ist komplett in JavaScript geschrieben. Weitere Informationen und einen Download-Link findet man auf der ACE-Homepage.

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.

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>
Category: HTML  Tags: , , , ,  Leave a Comment

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.

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 auf Plausibilität – das ist aber extrem aufwändig.

Eine der effizientesten Methoden ist der Honeypot. Dabei handelt es sich um ein für den menschlichen Benutzer per CSS unsichtbar gemachtes Formularfeld, das von den Spam-Robots ausgefüllt wird. Wenn etwas im Honeypot-Feld eingetragen ist, wird der Eintrag verworfen. Ein Beispiel dazu zeigen wir im nächsten Artikel.

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.

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 die Lösung zur Zentrierung einer Seite dann so aus, dass man einfach nur ein DIV in der XHTML-Seite einsetzt (im Beispiel mit dem Bezeichner „#maincentered“) und dazu folgende CSS linkt:

#maincentered {
position:  absolute;
visibility: visible;
left: 50%;
top: 50%;
width: 700px;
height: 500px;
margin-left: -350px;
margin-top: -250px;
z-index : 1;
}

Damit hat man wohl die sauberste Möglichkeit gewählt, eine Seite zu zentrieren. Wenn es keine besonderen Gründe dafür vorliegen, ist die Variante in XHTML mit CSS die erste Wahl.

Category: Allgemein  Tags: , ,  Leave a Comment

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 2.0

Bluefish 2.0

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).

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 im Kopf der PHP-Datei  abgefragt und die passende CSS-Datei dazu eingebunden werden, damit das Ganze auch funktioniert. Dafür ist der folgende Code-Schnipsel zuständig:

<?
switch ($design) {
case
“rot”:
echo ”
<link rel =\stylesheet\ type=\”text/css\” href=\”rot.css\”> ”;
break;
case
“gruen”:
echo ”
<link rel =\stylesheet\ type=\”text/css\” href=\”gruen.css\”> ”;
break;
default:
echo ”
<link rel =\stylesheet\ type=\”text/css\” href=\”blau.css\”> ”;
break;

}

Die Fallverzweigung liest den Wert des Parameters “design”, mit dem die Datei aufgerufen wurde und lädt abhängig davon eine der drei CSS-Dateien rot.css, gruen.css oder blau.css. Dabei ist blau.css als Standardwert eingetragen und würde ausgewählt, wenn bei einem Aufruf des Programms kein Designparameter mitgegeben würde.

Falls bei Ihrem Server der Initialisierungswert „register_globals“ ausgeschaltet ist, funktioniert die Übergabe des Design-Parameters so nicht. In dem Fall hilft die Zeile

$design = $_GET[design];

vor dem eigentlichen Switch-Befehl. Dadurch wird der Parameter explizit in die PHP-Variable $design kopiert und steht dem Programm zur Auswertung zur Verfügung.

Category: Allgemein  Tags: ,  Leave a Comment