Tipps & Tricks fürs Webdesign
Wir geben Ihnen nützliche Tipps und hilfreiche Tricks fürs WEbdesign mit HTML, CSS Javascript und Co.
HTML5, Javascript: Zähler mit lokalem Speicher Zur Umsetzung eines Zählers eignet sich hervorragend lokaler Speicher in HTML5 mit etwas Javascript. Konkret also:...
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.
