HTML, CSS, Javascript & PHP

Tipps & Tricks fürs Webdesign

20.8.2012 von Anna Kobylinska und Filipe Pereira Martins

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

ca. 1:35 Min
Ratgeber
Tipps & Tricks fürs Webdesign
Tipps zur Menügestaltung mit CSS
© Archiv

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 lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.