Physical Graffiti : blog d’un webdesigner curieux

Dans l’optique du développement multiplateformes, on nous demande de penser en amont à toutes les options possibles pour qu’un projet web soit conçu pour passer aussi bien sur les navigateurs web mais aussi sous smartphones et tablettes. J’ai fait des recherches pour un projet ou beaucoup de vidéos étaient présentes. Non seulement les CSS doivent s’adapter aux formats, mais les médias aussi. Avec HTML5 on peut utiliser la balise native « video » avec max-width:100% + height:auto, mais ceci ne marche pas avec l’iframe intégré ou la balise object.
Heureusement, j’ai trouver un petit tuto sur webdesignerwall, qui traite de ce sujet. En HTML5 le code est basique :

Html

video {
max-width: 100%;
height: auto;
}

Comme je l’ai dit au début, ce code ne fonctionne pas si l’intégration utilise balise iframe ou la balise objet, qui est couramment utilisé par la plupart des sites de partage vidéo comme YouTube et Vimeo.

Pour des balises iframe & objet élastiques

Rien de compliqué, il faut juste envelopper le code d’intégration avec une DIV et spécifiez 50% à 60% en bottom. Il faut ensuite définir les éléments enfants (iframe, object et embed) en largeur et hauteur à 100%, le tout en position absolue. Ceci afin de forcer les éléments intégrés à s’élargir automatiquement. Ce qui donne :

Html

< div class="video-container" >
< iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0"
width="800" height="450" frameborder="0" >
< /div >

CSS

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }

Comment faire pour créer Largeur fixe & élastique ?

Pour contraindre la largeur d’une vidéo, une DIV supplémentaire est nécessaire. Enveloppez la vidéo avec cette autre DIV et spécifiez une valeur de largeur fixe avec max-width: 100%.

CSS

.video-wrapper {
width: 600px;
max-width: 100%;
}

Html

< div class="video-wrapper" >
< div class="video-container" >
< iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0"
width="800" height="450" frameborder="0">
< /div >
< !-- / video -->
< /div >
< !-- / video-wrapper -->

Compatible ?

Ceci fonctionne sur les principaux navigateurs (Chrome, Safari, Firefox, Internet Explorer, Opera, l’iPhone et l’IPAD).

Pour aller plus loin :
http://www.alistapart.com/
http://www.tjkdesign.com/

Depuis un petit moment, j’ai remarqué un nombre croissant de commentaires type Spam dans mes commentaires indésirables. Bien connus, ceux ventant les pilules bleues, ou les charmes des filles de l’Est … que du sérieux ! Bien sûr, avec Askimet, le barrage est efficace puisqu’ils se retrouvaient dans les indésirables, mais la corvée de les supprimer était assez déprimant. Certains jours, j’en avais jusqu’à 3 pages … Je me suis mis donc en quête d’une protection efficace, un bon Captcha, ou du moins un équivalent pour ne plus avoir à vider ces indésirables.

Pour ceux qui se demandent encore : un captcha est un test qui permet de différencier l’utilisateur humain d’un robot. Le plus souvent celui ci se présente sous forme d’une image contenant des lettres et des chiffres à recopier dans un champ texte. Pour compliquer la tâche des robots, l’image est déformée ou le fond contient des formes pour rendre la lecture difficile aux machines.

Après quelques recherches, je me suis aperçu que les robots spammeurs étaient de plus en plus performants, puisqu’ils arrivaient à « lire » la plupart des captchas images. J’ai découvert alors une solution pas si bête : le calcul mathématique. En effet, les robots, bien qu’évolués, ont du mal à reconnaitre des opérations mathématiques, pour eux 4 + 6 n’est qu’une suite de chiffres avec un symbole, et non pas une question mathématique.

J’ai donc installé Block-Spam-By-Math-Reloaded. Facile à installer et à paramétrer, même si j’ai eu à refaire le texte en français, modifier un peu le PHP pour que certains textes n’apparaissent pas. On peut aussi le placer sur la page de connexion à l’admin. Depuis 2 semaines, je n’ai eu que 2 commentaires indésirables qui ont passé ce filtre, mais ce sont retrouvés quand même dans les indésirables grâce à Askimet.

Conclusion, tout bénéfice pour moi, même si la solution passe par 2 filtres, le gain de temps et l’efficacité n’est plus à démontrer.

Merci aux développeurs d’Askimet et de Block-Spam-By-Math-Reloaded !!