Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

Sichere Websites mit Zertifikat

Sonntag, 17. April 2016

Auf ungesicherte / nicht zertifizierte Websites kommen zunehmend schwere Zeiten zu. TLS/SSL/HTTPS ist die Zukunft.
So fordert z. B. die bayerische Datenschutz-Aufsichtsbehörde gemäß § 9 BDSG bei der Übermittlung personenbezogener Daten den Einsatz dem Stand der Technik entsprechender Verschlüsselungstechnik.
"Übermittlung personenbezogener Daten", das ist bereits der Fall, wenn es ein Kontaktformular auf der Site gibt.

Aber auch Google & Co. fordern und fördern sichere Sites.
So sieht eine nicht gesicherte Website bereits heute im Google Chrome Browser aus:

Screenshot
Das Schloss-Symbol in der Adressleiste, das eine korrekt zertifizierte Website kennzeichnet, ist ausgegraut und mit einem "X" gekennzeichnet. "https" ist durchgestrichen.

Zumindest bei Google ist die Zertifizierung bereits ein Rankingfaktor.


Accessibility Club 2016 im Rahmen der Nürnberg Web Week

Mittwoch, 13. April 2016

Die doch relativ weite Anfahrt hat sich gelohnt.
Der Accessibility Club am 12. April 2016 bei tollwerk in Nürnberg war klein, aber fein. Danke an Joschi Kuphal für die Orga, an die Sessiongeber für die Vorträge, und an die Teilnehmer für anregende Gespräche am Rande.

Zwei besondere Dinge habe ich für mich mitgenommen:

  1. ally.js von Rodney Rehm, und
  2. Was ist das IndieWeb?

weiterlesen…


Zeilen abwechselnd färben mit CSS

Freitag, 8. April 2016

Die Zeilen einer Liste oder Tabelle abwechseln färben, um die Lesbarkeit zu verbessern. Tausendfach im Netz zu sehen. Wird üblicherweise mittels CSS3 :nth-child() Selector gelöst. Und funktioniert. Allerdings nur, wenn jede Zeile in einem eigenen HTML Element steht. Also beispielsweise einem Listenelement oder einer Tabellenzeile.
Es geht aber auch mit Fließtext. Oder — und diesen Anwendungsfall werde ich beschreiben — in einem mittels <pre> oder <code> vorformatierten Abschnitt. Letzteres setze ich ein, wenn ich Codesnippets hier im Blog zeige.

Das CSS:

Das folgende Codesnippet ist gleichzeitig die Demo :-)

code {
/* Allgemeine Angaben, um Codesnippets preformatted darzustellen */
white-space: pre;
display:block;
overflow-x:auto;
font-family:Courier,serif;
font-size: 1rem;
margin:1em 0;
border:1px dashed;
-moz-tab-size:3;
tab-size:3;
line-height:1.5rem;
padding: 1.5rem .5rem;

/* jetzt die abwechselnde Einfärbung der Zeilen */
background: linear-gradient(
to bottom,
#fff,
#fff 50%,
#eee 50%,
#eee
);
background-size: 100% 3rem;
}

/* Das Codesnippet beim Fokussieren mit der Maus (oder Tastatur) hervorheben */
code:focus, code:hover {
background: linear-gradient(
to bottom,
#fff,
#fff 50%,
#edd 50%,
#edd
);
background-size: 100% 3rem;
overflow-x:scroll;
}

Hinweise

  • Funktioniert in allen aktuellen Browsern (IE ab 10), auch iPhone und iPad, also iOS, sowie Android.
  • tab-size:3; bzw . -moz-tab-size:3; definiert die Einrückung. (Nicht IE bzw. Edge)

Fullscreen Videos auf iPhone automatisch schließen

Sonntag, 3. April 2016

Von YouTube lernen. Ja, das ist möglich.
Doch der Reihe nach:
Das HTML5 <video> Element erzeugt Videos, die auf der Webseite eingebettet sind. Nach dem Betätigen des Startbuttons laufen die Videos innerhalb der Seite.
Nicht so auf dem iPhone. Dort werden alle Videos automatisch und zwangsweise als Vollbild dargestellt. Auf den relativ kleinen Bildschirmen macht das Sinn.
Unschön ist allerdings, dass nach dem Beenden des Videos das Vollbild mit den Bedienungselementen geöffnet bleibt. Man muss also manuell auf den Link "Fertig" oder das Symbol zum Verkleinern rechts unten tippen, um zur aufrufenden Webseite zurückzukehren.
Das ist nervig, und kann irritierend sein. Ein Zustand, der vom Betriebssystem automatisch hergestellt wird, sollte auch automatisch beendet werden, wenn die Voraussetzung nicht mehr gegeben ist.

Dass es auch besser geht, zeigt YouTube. Eingebettete YouTube-Videos werden natürlich auf iPhones ebenfalls als Vollbild dargestellt; aber nach dem Beenden schließt sich das Vollbild automatisch, und die aufrufende Seite wird wieder angezeigt.

Ich hab' mal ein paar Zeilen JavaScript geschrieben, um das meines Erachtens korrekte Verhalten auch bei HTML5 <video> Elementen zu erreichen. Die folgende Funktion bewirkt das automatische Beenden des Vollbildmodus' am Ende des Videos.

function CloseVideo() {
if (navigator.platform.match(/iPhone|iPod|Android/)) {
var e = document.getElementsByTagName('video').length;
for (var i = 0; i <= e; i++) {
document.getElementsByTagName('video')[i].webkitExitFullscreen();
}
}
}

Aufruf der Funktion im <video> Element mit onended=CloseVideo() im <video> Element, also z. B.:
<video controls onended=CloseVideo() ...

Demo z. B. auf der Seite webdesign.weisshart.de/homelink.php


Archiv:

Kategorien:

Creative Commons Lizenzvertrag
Alle Texte (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE