Der SSH-Client Putty

By dmi · 2. August 2010

Wenn man häufig auf Rechner im Internet zugreifen muss, stellt sich schnell die Frage nach einer sicheren Verbindung. Wenn man auf die Einrichtung eines Virtuellen Privaten Netzwerks (VPN) verzichten möchte, bietet das SSH-Protokoll, auch Secure Shell genannt, eine gute und kostengünstige Alternative.

Die Putty-Oberfläche

Über SSH kann man eine verschlüsselte Verbindung zwischen zwei Rechnern aufbauen und so den gesamten Datenverkehr wirksam vor fremdem Zugriff schützen.

Dabei ist es völlig unerheblich, ob man auf dem entfernten Server die Internetseite pflegt, Datenbanken sichert oder beliebige andere Daten austauscht – mit SSH-Verbindungen über Putty ist man auf der sicheren Seite.

Putty ist vor drei Jahren zum letzten Mal upgedatet worden. Dabei ist er immer noch der beliebteste SSH-Client der Profis. Seine Beliebtheit bei Server-Admins hat sicher auch damit zu tun, dass das Programm nicht installiert werden muss und damit schnell einsatzbereit ist. Natürlich hat auch die kostenfreie Nutzung zu Puttys weiter Verbreitung beigetragen.

Category: Allgemein  Tags: , , ,  Leave a Comment

CSS 3: Transparenz ohne Tricks

By dmi · 29. Juli 2010

Zu den besonders beliebten und deshalb schon heute sehr viel benutzten CSS 3-Eigenschaften gehört die Transparenz (opacity). Sie legt  den Grad der Transparenz eines Elements fest. Der Wertebereich geht von 0 bis 1, und je niedriger der Wert ist, umso durchsichtiger wird das Element. Die Zuweisung geschieht einfach mit:

< div class=”halbdurchsichtig”></div>.

Der CSS-Code dazu lautet:

.halbdurchsichtig {

opacity: 0.5;

}

Und schon klappt es in allen modernen Browsern – bis auf den Internet-Explorer von Microsoft.  In der neuen Version 9 funktioniert das auch mit dem Microsoft-Browser, aber für die älteren Versionen brauchen Sie spezielle Microsoft-Filter, eins für den Internetexplorer 8 und ein weiteres für Versionen unter 8. Erweitern Sie den Style für die Klasse “halbdurchsichtig” wie folgt

.halbdurchsichtig {

-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50);

filter: progid:DXImageTransform. Microsoft.Alpha(Opacity=50);

zoom: 1;

opacity: 0.5;

}

und die Microsoft-Browser zeigen das DIV-Element jetzt auch halbdurchlässig an.

Category: Allgemein  Tags: , , ,  One Comment

CSS 3: Google bietet 18 kostenlose Web-Fonts an

By dmi · 26. Juli 2010

CSS 3 buhlt mit seinen neuen Eigenschaften um die Gunst der Web-Entwickler. Da gibt es nicht nur Boxen mit runden Ecken sondern auch Schatten und Transparenzen. Auch herunterladbare Schriften, Webfonts genannt, gehören zu den neuen Features, die uns CSS 3 bringt.

Die kostenlosen Google Webfonts

Diese Schriften liegen auf dem Server, so dass sie auch bei Besuchern angezeigt werden, auf deren Computer sie nicht installiert sind. Damit wird man endlich unabhängig von den wenigen Schriften wie Arial und Verdana, die die Browser von Haus aus mitbringen, ohne auf grafiklastige Lösungen mit ihren bekannten Nachteilen ausweichen zu müssen.

Noch gibt es verschiedene Schriftformate für unterschiedliche Browser und zusätzlich diverse rechtliche Einschränkungen, die den Einsatz von Standardschriften als Webfonts erschweren. Da kommt das Angebot von Google gerade recht. Der Internet-Gigant bietet 18 verschiedene Schriften zum Einsatz als Webfonts auf seiner Website (google.com/webfonts) an.

Einbinden können Sie diese Schriften recht einfach. Man wählt eine der Schriften und klickt sie an. Jetzt wird angezeigt, wie die gewählte Schrift in unterschiedlichen Größen aussieht. Die Option “Character Set” zeigt, welche Zeichen in dieser Schrift zur Verfügung stehen, so dass man vorher nachsehen kann, ob auch Umlaute und andere benötigte Sonderzeichen unterstützt werden. Die Option “Get the code” zeigt die Codezeilen zum Einbinden der Web-Schrift. Das sieht für Tangerine so aus:

<link href=’http://fonts.googleapis.com/css?family=tangerine’ rel=’stylesheet’ type=’text/css’>

Mit dier Zeile, die man im Head-Bereich der Internetseite einbindet,  wird das jeweils zum aktuell verwendeten Browser passende Stylesheet mit allen nötigen Angaben eingebunden.

Man kann die Webfonts mit dem Internet Explorer ab Version 6.0, mit Firefox ab Version 3.5, mit Google Chrome ab Version 4.2, mit Safari ab Version 3.1 und mit Opera ab Version 10.5 nutzen. Auf anderen Browsern greift die angegebene Fallback-Schrift.

Category: Allgemein  Tags: , ,  Leave a Comment

NoSQL – Nicht nur SQL

By dmi · 22. Juli 2010

Der Begriff NoSQL wird meist falsch interpretiert. NoSQL steht nicht für “kein SQL” (no SQL), sondern für “nicht nur SQL” (not only SQL). Damit soll das Ziel dieser neuen Techniken verdeutlicht werden: Es geht darum, die Schwächen der SQL-Systeme  mit ihrem riesigen Overhead durch differenzierte Vorgehensweisen zu überwinden. Die Diskussion läuft erst seit 2009, bis dato galten SQL-Systeme als der unbestrittene Standard bei Webanwendungen.

Die ersten NoSQL-Systeme kamen von großen Internetdiensten wie zum Beispiel Google mit BigTable, das bei Google Maps, Google Earth, YouTube und Blogger eingesetzt wird und als HBase frei verfügbar ist. Das Netzwerk Facebook entwickelte dafür Cassandra, das ebenfalls frei verfügbar ist. Auch Twitter will jetzt auf Cassandra umstellen, um mehr Tweats pro Zeiteinheit ausliefern zu können. Dazu kommen noch Open Source Projekte wie Couch DB, Hypertable oder MongoDB.

Die meisten NoSQL-Datenbanken haben eine HTTP-basierende Schnittstelle nach dem REST-Konzept (Representational State Transfer) zum Zugriff auf ihre Inhalte realisiert. Statt der üblichen Befehle in der Datenbankabfragesprache SQL werden die Befehle Get, Put, Post und Delete benutzt.

Category: Allgemein  Tags: , , ,  Leave a Comment

HTML 5: Web-Video ohne Plugins

By dmi · 19. Juli 2010

HTML 5 bringt natürlich mehr als nur semantische Tags. Eines der neuen Features ist das <video> – Tag. Damit können endlich Audio- und Videoclips auf Webseiten angeboten werden, die der Besucher ohne irgendein Plugin abspielen kann.

Web-Video mit HTML 5 ist wirklich sehr einfach einsetzbar. Mit <video src=“meinvideo.mp4“ controls> ist der bewegte Inhalt schon abrufbar. Mit einem Startbild, das man gene benutzt, wenn der Inhalt von einem anderen Server kommt, sieht es dann so aus:

<video width = “640“ height = “480“ src = http://www.meinserver.de/pfad/meinvideo.mp4“ autobuffer controls poster = meinstartbild.png”>

Das Microsoft mit HTML 5 am weitesten zurück liegt, verwundert eigentlich niemanden. Selbst der aktuelle Browser Internet Explorer 8 kann HTML 5 – Elemente nativ nicht unterstützen. Aber es gibt Möglichkeiten, auch dem Microsoft-Browser das neue HTML beizubringen. Damit Sie wissen, bei welchen Plattformen man beim Einsatz von Webvideos mit HTML 5 eventuell nacharbeiten muss, haben wir hier eine kurze Übersicht der wichtigsten Browser bezüglich ihrer Fähigkeit, mit dem <video> – Tag umgehen zu können:

+ Google Chrome
+ Firefox 3.5
+ Safari 3
+ Opera 10.5
- Internet Explorer 7
- Internet Explorer 8

Category: Allgemein  Tags: , ,  Leave a Comment

Häufige Sicherheitslücken bei Webanwendungen

By dmi · 15. Juli 2010

In einer vor Kurzem veröffentlichten Analyse des Open Web Application Security Projekts, kurz OWASP, wurden die häufigsten zehn Fehler in Webprogrammen und auch die dadurch erzeugten Schwachstellen dargelegt.

Im Jahr 2010 wurden als größtes Problem die Injection-Angriffe identifiziert.  Als nächstes folgen in der Liste das Cross Site Scripting und fehlerhaftes Anmeldungs- und Session-Management.

Hier die gesamte Fehlerliste der OWASP geordnet in der Reihenfolge der Häufigkeit ihres Auftretens:

  1. Injection
  2. Cross Site Scripting
  3. Broken Authentication and Session-Management
  4. Insecure Direct Object References
  5. Cross Site Request Forgery (CSRF)
  6. Security Misconfiguration
  7. Insecure Cryptografic Storage
  8. Failure to Restrict URL Access
  9. Insufficient Transport Layer Protection
  10. Unvalidated Transport Layer Protection

Der Report will auf diese Sicherheitsrisiken bei der Webprogrammierung hinweisen und vor allem die Entwickler von Webanwendungen für die typischen Fehler dieser Art bei der Programmierung sensibilisieren.

Category: Allgemein  Tags: , ,  Leave a Comment

HTML 5 zum Zweiten

By dmi · 12. Juli 2010

In allen moderneren Webbrowsern außer dem Internet Explorer 8 laufen HTML 5 – Seiten mit CSS 3 problemlos. Da aber viele Surfer noch steinzeitliche Browser benutzen, gibt es Möglichkeiten, diese zur Zusammenarbeit mit der Kombination HTML 5 / CSS 3 zu bringen.

Da der Internet Explorer 8 CSS-Deklarationen für HTML-Elemente, die er nicht kennt, einfach ignoriert, hilft ein Workaround, der die Elemente zur Laufzeit mittels Javascript erzeugt:

<script>
document.create.element(‘header‘);
document.create.element(‘nav‘);
document.create.element(‘section‘);
document.create.element(‘article‘);
document.create.element(‘aside‘);
document.create.element(‘footer‘);
</script>

Zum Testen der per Javascript erzeugten DOM-Elemente können Sie eine einfache HTML 5-Seite benutzen:

<!doctype html>
<html>
<head>
<title> HTML 5 wird getestet…</title>
<style type=“text/css“>css3.css</style>
</head>
<body>

<header>Der Test beginnt mit einer Überschrift</header>

<nav>
<ul>
<li>Home</li>
<li>Impressum</li>

<li>Kontakt</li>
</nav>

<section>
<h1> Erster Bereich</h1>
<article> Dies ist der erste Artikel…</article>
</section>

<footer>
<p>Hier steht der Inhalt der Fußzeile</p>
</footer>

</body>
</html>

Ein weiteres Hilfsmittel, mit dem man die alten Microsoft-Browser Internet Explorer 6, 7 und 8 auf HTML 5-Kompatibilität bringen kann, ist das Plugin Google Chrome Frame. Das Plugin ist kostenlos, aber es ist aus der Erfahrung nicht einfach, seine Besucher davon zu überzeugen, dies Plugin zu installieren. Mit diesem Plugin brauchen Sie die oben beschriebene Erzeugung der fehlenden DOM-Elemente per Javascript nicht mehr durchführen.

Category: Allgemein  Tags: , ,  Leave a Comment

HTML 5 zum Ersten

By dmi · 8. Juli 2010

Keine Frage – HTML 5 ist im Anmarsch. Es gibt zwar noch keine finale Version der neuen Markup-Sprache fürs Web, aber im Grunde ist der neue Standard einsatzbereit. Ein guter Anlass, sich das jetzt nicht nur anzuschauen, sondern auch aktiv zu werden und die erste eigene Seite mit HTML 5 und CSS 3 zu entwickeln.

HTML 5 bringt viele neue Funktionen und Möglichkeiten. Aber nichts ist so anders wie die neuen semantischen Tags. Dadurch wird es für Suchmaschinen, aber auch für Ihren Browser überhaupt erst möglich, sich ein Bild von den Inhalten der Website zu machen, den immer häufiger zum Surfen benutzten Smartphones wird die Navigation durch die Site erleichtert oder gar erst möglich gemacht, und last not least werden auch Sie als Webdesigner mit HTML 5 letztlich einfacher durchs Leben kommen.

Wer schon einmal einen Satz Designs für ein CMS erstellt hat, der weiß, wie unnötig komplex der Aufbau eines Dokumentes mit den bisherigen nichtssagenden Tags gerät. Der korrekte Einsatz von HTML 5 eliminiert diese Probleme und wird Ihr Leben als Webdesigner auch dahingehend verändern, dass Sie sich mehr aufs Design konzentriern können und weniger um dessen Mechanik kümmern müssen!

Über die neue Dokument-Typdeklaration und die neuen sprechenden Auszeichner von <header> über <nav> und <section> bis <footer>, aber auch über die Frage, wie man denn den bekannten, zu HTML 5 inkompatiblen Altlasten-Browsern HTML 5 unterschieben kann, erfahren Sie mehr im nächsten Artikel zur Einführung des neuen Webstandards.

Category: Allgemein  Tags: , , , , , ,  Leave a Comment

Zufällige Werbe-Banner mit PHP

By dmi · 5. Juli 2010

Werbebanner sind immer noch sehr gefragt, und auch wenn Sie mehrere Banner abwechselnd an einer Stelle anzeigen möchten, ist das mit PHP kein großes Problem. Das soll an einem Beispiel mit zwei zufällig wechselnden Bannern für verschiedene Kunden, Bannergrafiken, Titel- und Alt-Tags gezeigt werden.

Zunächst sollten die Daten der Werbebanner sinnvollerweise in ein Array gepackt werden. Das könnte so aussehen:

<?
$werbung = array( 1 => array(‘ziel‘ =>’adresse1.de‘, ‘grafik‘ => ‘banner1.gif‘, ‘titel‘ => ‘Werbung1‘, ‘alt‘ => ’1. Banner‘), 2 => array( ‘ziel‘ => ‘adresse2.de‘,  ‘grafik‘ => ‘banner2.gif‘, ‘titel‘ => ‘Werbung2‘, ‘alt‘ => ’2. Banner‘));
?>

Die Ausgabe des mit der Funktion array_rand() zufällig ausgewählten Werbebanners mit Bild, Link, Titeltext und Alt-Text kann mit folgender Routine erzeugt werden:

<?
$sb = array_rand($werbung);
echo ‘
<div>
<a href = http://’.$werbung[$sb][‘url’].’/ title = “’.$werbung[$sb][‘titel’].’”>
<img src = “.$werbung[$sb][‘grafik’].’” Alt = “’.$werbung[$sb]['alt‘].‘“ />
</a>
</div>‘;
?>

Dabei müssen die Grafiken im selben Verzeichnis liegen, in dem auch die Programmdatei ist.

Category: Allgemein  Tags: , ,  Leave a Comment

Datenbanksicherung mit phpMyAdmin

By dmi · 3. Juli 2010

Statische Internetseiten lassen sich ja recht einfach sichern. Man kann zum Beispiel alle Dateien vom Rootverzeichnis abwärts per FTP auf seinen PC übertragen und hat eine Sicherungskopie der gesamten Präsenz. Und da statische Seiten sich selten ändern, braucht man den Vorgang auch nicht häufig wiederholen und hat trotzdem immer eine Sicherung des aktuellen Standes.

Das gleiche Verfahren eignet sich auch für dynamische Internetseiten, die einen Teil ihrer Inhalte aus einer Datenbank beziehen. Die statischen Anteile sichert man auf die schon für statische Seiten beschriebene Art und Weise.

Allerdings braucht man auch ein Verfahren, um die Datenbank so zu sichern, dass man sie jederzeit wieder neu aus dem Nichts aufbauen kann. Da hilft das Tool phpMyAdmin, das fast jeder Hoster seinen Rootserver- oder VServer-Kunden zur Verfügung stellt. Man kann  phpMyAdmin aber auch selbst mit wenig Aufwand nachinstallieren, das Programm kostet nichts.

Um eine Sicherungskopie der Datenbank zu erzeugen, wählen Sie den Menüpunkt „Exportieren“. Hier werden verschiedene Formate für den Export angeboten, neben SQL auch CSV und XML und weitere. SQL ist am besten geeignet, denn dabei werden alle informationen der Datenban und ihrer Tabellen mit gesichert, so dass man aus der SQL-Sicherung die komplette Datenbank wieder neu erzeugen kann.

Wenn irgendwann einmal die Rücksicherung der Datenbank nötig ist, braucht man nur die SQL-Datei ausführen und die Datenbank wird komplett mit allen Tabellen und Datensätzen wieder hergestellt.

Category: Allgemein  Tags: , , ,  Leave a Comment
« Previous Entries
Next Entries »