HTML, CSS, Javascript & PHP

Tipps & Tricks fürs Webdesign

Wir geben Ihnen nützliche Tipps und hilfreiche Tricks fürs WEbdesign mit HTML, CSS Javascript und Co.

Tipps & Tricks fürs Webdesign

© Archiv

Tipps zur Menügestaltung mit CSS

HTML5, Javascript: Zähler mit lokalem Speicher

Zur Umsetzung eines Zählers eignet sich hervorragend lokaler Speicher in HTML5 mit etwas Javascript. Konkret also:

if (!sessionStorage['zaehler']) {
sessionStorage['zaehler'] = 0;
} else {
sessionStorage['zaehler']++;
}
document.querySelector('#zaehler').innerHTML =
'<p>Dieses Skript wurde ' + sessionStorage.
getItem('zaehler') + ' Mal ausgeführt.</p>' +
'<p>(Dieser Wert bleibt erhalten bis Sie die Seite
schliessen.)</p>';?

Das Resultat wird in ein HTML-Element mit der CSS-ID #zaehler eingespeist, zum Beispiel in einen ansonsten leeren <div>-Kasten:

<div id="zaehler"></div>

Die Ausgabe aus diesem Skript nimmt die folgende Form ein: Dieses Skript wurde 4 Mal ausgeführt.

(Dieser Wert bleibt erhalten, bis Sie die Seite schließen.)

CSS: Webeinheiten umrechnen

Eine der schwierigsten Aufgaben bei der Umstellung von pixelbasierten in elastische Layouts auf Basis von ems oder Prozenten besteht in der Umrechnung der Einheiten. Diese Aufgabe erledigt für Sie der Dienst PXtoEM , verfügbar kostenlos.

HTML5: Audiodateien einbinden

Den Code zum Einbinden einer Audiodatei in eine Website unter Verwendung des <audio>-Tags in HTML5 muss man nicht mühsam von Hand stricken; den benötigten Code liefert ein kostenloser Dienst unter der Adresse westciv.com.

Dieses grafische Konfigurationstool liefert nicht nur die korrekte Syntax, sondern berichtet über die Kompatibilität unterschiedlich kodierter Websites mit den verschiedenen Browsern. Unterstützt werden Firefox ab Version 3.6, Safari ab Version 5, Chrome ab Version 6, Internet Explorer ab Version 9, mobiles Safari in iOS ab Version 4 und mobiles Chrome auf Android OS ab Version 2.3.

jQuery: Elegante Tags

Getaggte Posts erleichtern die Navigation und senken bekannterweise die Bounce-Rate. Wer Schlüsselwörter mit Eleganz umzusetzen weiß, verleiht der Website zusätzlichen Charme, etwa mit dem winzigen jQuery-Plug-in Tagbox (aktuell in der Version 1.0.1). Das Plug-in ist unter der kostenlos verfügbar.

jQuery: Code-Hervorhebung

Die Hervorhebung von Code in einer Website lässt sich ganz elegant mit einem jQuery-Plug-in namens Snippet bewerkstelligen. Das Plug-in gibt es kostenlos unter: steamdev.com

Es unterstützt die Syntaxhervorhebung in 15 Programmier-, Skript- beziehungsweise Markup-Sprachen, darunter HTML, Javascript (einschließlich Javascript mit DOM), CSS Flex, PHP, Ruby, Java, Perl, Python, SQL und XML.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
Ben Stiller Owen Wilson Zoolander Hansel
Vorschau auf Film- und Serien-Highlights

Prime Instant Video lockt im September mit Highlights wie "Zoolander 2", "Die Tribute von Panem – Mockingjay 2" und der neuen Staffel von "Mr.…