DA-BestellFormular 3.0

Neuigkeiten für Benutzer von DA-BestellFormular: Version 3.0 ist erschienen. Als Neuerung ist es jetzt auch möglich responsive Bootstrap-Formulare zu erstellen. Damit machen die Formulare nun auch auf mobilen Endgeräten eine gute Figur.

Das Update ist wie immer für alle bestehenden Nutzer kostenlos. Einfach herunterladen und installieren.

weiterlesen

Tooltips mit Hint.css

Eine kleine feine CSS-Bibliothek: hint.css. Nachdem das Stylesheet eingebunden ist, kann man Elemente seiner Webseite sehr leicht mit Tooltips ausstatten, welche erscheinen, wenn man mit der Maus über dem Element ist:

Hint CSS

Das Einbinden im Code geht sehr einfach, Beispiel:

<a href="javascript:void(0)" class="hint--top" data-hint="Yeah, I am >:D">Look, there is something over me.</a>

Mehr Beispiele gibt es auf der Webseite. Es gibt verschiedene Arten von Tooltips, zum Beispiel für Warnungen oder Fehlermeldungen. 

SiteSucker für den Mac

Gut, mittlerweile hat man ja DSL-Flatrates und ist eigentlich immer online.

Aber ab und zu ist es sinnvoll eine HTML-Seite offline verfügbar zu haben, z.B. eine Dokumentation die man unterwegs benötigt, wo man oft kein oder nur langsames Internet hat. Hier kommt Sitesucker ins Spiel:

image

Einfach die Adresse eingeben und schon wird die Webseite heruntergeladen und offline verfügbar gemacht. Eine iOS Version für das iPhone gibt es auch.

HTML-Dateien als PHP-Datei ausführen

HTML-Dateien enden mit .html und PHP-Dateien mit .php oder .php5. Will man also PHP-Code ausführen, muss die Datei zwingend eine PHP-Endung haben. So läuft es auf den meisten Webspaces.

Was ist aber, wenn ich eine HTML-Datei nachträglich um etwas PHP erweitern will?

Erste Möglichkeit die Datei einfach umbenennen. Hat allerdings ein paar Nachteile, Links müssen geändert werden, Seiten sind in Google nicht mehr auffindbar.

Zum Glück gibt es eine Möglichkeit den Webserver dazu zu bringen, auch HTML-Dateien einmal durch den PHP-Parser zu schicken. Dazu muss eine .htaccess Datei angelegt werden und in das HTML-Verzeichnis kopiert werden.

Fragt ggf. euren Provider ob er .htaccess unterstützt, aber in der Regel ist dies der Fall. Die Datei hat den folgenden Inhalt:

RemoveHandler .html .htm
AddType application/x-httpd-php .php .htm .html

Nun teste wir das Ganze mit einer kleinen Testdatei:



  Test-HTML-Seite mit PHP


  

PHP-Test

Datum: 19.10.2017 | Uhrzeit: 16:05

Diese mit der Endung .html abspeichern und auf den Webspace übertragen. Im Browser aufgerufen sollte das aktuelle Datum erscheinen, in diesem Fall funktioniert alles wie erwartet:

image

Fotos und Bilder als Polaroid darstellen

Mit Hilfe von CSS3 und jQuery können Sie Ihre Fotosammlung in effektvoller Weise als Polaroid darstellen lassen. Das hier vorgestellte Beispiel mischt die einzelnen Polaroids beim Start der Seite nach einem Zufallsprinzip und stellt diese ungeordnet auf dem Bildschirm dar. Zum Anschauen der Bilder holt man sich diese durch Anklicken in den Vordergrund. Außerdem lassen sich alle Bilder zu einer anderen Position verschieben. Einfach das nachfolgende Video anschauen, um die beschrieben Funktionen zu sehen.

Video zur Polaroid-Darstellung

Nutzen Sie die folgenden Buttons um das Beispiel genauer anzusehen und zu testen oder um das Beispiel herunterzuladen. Mit dem in Download enthalten Dateien können Sie Ihre eigene Polaroid-Seite erstellen.

btnBsp btnDownload

Nun noch ein paar Innereien zu diesem Script zum besseren Verständnis und zur Variation bestimmter Parameter:

HTML-Datei (index.html)

Innerhalb des body-Tags werden die einzelnen Bilder über das <img>-Tag eingefügt, wobei src den Pfad zum Bild enthält. Innerhalb von <p> schreiben wir den Text, der auf dem Polaroid stehen soll. Das Ganze wird dann von einem <div>-Container eingeschlossen, welcher der Klasse polaroid zugeordnet wird. Es können beliebig viele Bilder in dieser Form hinzugefügt werden.

<body>
<div class="polaroid">
  <img src="pics/Schwan_Wald_See.png" alt="Schwan im Waldsee" />
  <p>Schwan im Waldsee</p>
</div>
<!-- Mehr Bilder hier -->
</body>

CSS-Datei (style.css)

Unserem <div>-Container hatten wir oben die Klasse polaroid zugeordnet. Hier werden nun die einzelnen Attribute festgelegt, die das Erscheinungsbild bestimmen.

In der ersten Zeile legen Sie Höhe und Breite des Container als absolute Werte fest sowie den Pfad zu dem Hintergrundbild. Das Hintergrundbild ist in diesem Fall die “Polaroid-Maske”.  Deshalb müssen Höhe und Breite der Größe der Polaroid-Maske entsprechen. Sie können das Polaroid-Bild auch beliebig austauschen gegen z.B. ein andersfarbiges Polaroid oder wenn eine andere Größe benötigt wird.  Erstellen lässt sich eine neue Polaroid-Maske unter anderem mit DA-WebImage.

.polaroid { width:368px; height:376px; background-image:url(../pics/polaroid-bg.png); 
position:absolute; }

In der zweiten Zeile ist die Größe der einzelnen Fotos definiert. Es ist zu beachten, dass alle Fotos dieselbe Größe habe. Weiterhin wird mit margin der Abstand von den Rändern so festgelegt, dass das Bild genau in die Polaroid-Maske passt.

.polaroid img { width:335px; height:275px; margin:25px 0 0 15px; }

In der dritten Zeile legen wir die Eigenschaften, wie Ausrichtung, Schriftfarbe, Schriftart, etc. zum Schriftzug unterhalb des Polaroids fest.

.polaroid p { text-align:center; font-family:Georgia,serif; font-size:20px; color:#2E2E2E;

margin-top:15px; }

jQuery (script.js)

Die Script-Datei stammt von Marco Kuiper und kann dem Download entnommen werden. Hier sind die einzelnen Funktionen enthalten, welche die Animationen, wie das Rotieren und Verschieben der Polaroids bewerkstelligen. Auf eine ausführliche Beschreibung der einzelnen Funktionen verzichte ich an dieser Stelle. Der interessierte  Programmierer kann sich die Funktionen in einem entsprechenden Editor; Texteditor ist ausreichend; anschauen.

Zusammenfassung

Es sei noch gesagt, dass CSS3 und HTML5 derzeit noch nicht in allen Browsern vollständig implementiert sind. So kann es beim Beispiel zu unterschiedlichen Darstellungen bei unterschiedlichen Browsern kommen. Das aufgenommene Video zeigt die Anwendung in Chrome. Dort funktioniert alles super. Aber im Mozilla Firefox funktionierte zum Beispiel die Rotation der Bilder nicht.

btnBsp btnDownload

Externe Links mit Icon versehen

Auf einer Webseite gibt es viele Links. Für den Benutzer der Webseite ist es eine super Sache zu erkennen ob der Link auf eine interne Seite oder auf eine externe Seite verlinkt.

Externe Links, welche von der Webseite wegführen können mittels CSS einfach mit einem Icon versehen werden.

Der Benutzer sieht so auf den ersten Blick wohin der Link in etwa geht. Das ganze sieht so aus:

weiterlesen

CSS: Mit float geschickt Textblöcke oder Bilder positionieren

Erstellt man eine HTML-Seite mit verschiedenen Textblöcken und Bildern, so werden diese erst einmal im standardmäßigem Fluss von links nach recht und von oben nach unten angeordnet. Mittels CSS und der float-Eigenschaft lassen sich Blöcke an eine bestimmte Position ausrichten. Blöcke können in diesem Fall die verschiedensten HTML-Elemente, wie <img>, <div>, <table> und ähnliche sein.

Verwenden wir den folgenden HTML-Code ohne CSS-Definitionen, so werden die Elemente im standardmäßigem Fluss ausgerichtet, wie im darauffolgenden Bild dargestellt:

<img height="176" src="BspBild.JPG" width="132" />
Hier sehen Sie einen Beispieltext wenn ....