Lors de la troisième édition de dotCSS (conférence dédiée aux CSS), Kevin Mandeville (@KevinMandeville) était venu défendre son amour de l’emailing.
Je vais remettre en avant son speak en tant que dévelopeur chez litmus
Matthieu POULLIN
Qu’est-ce que l’audiodescription ?
L’audiodescription permet aux non-voyants et malvoyants de mieux suivre la vidéo proposée. Il s’agit d’une source audio différente qui décrit les éléments visuels de la vidéo. L’audiodescription fait partie des problématiques d’accessibilité d’un site.
Il est bon de rappeler que depuis février 2005, la loi demande aux sites internet du service public d’être accessibles.
Aujourd’hui je vous propose une solution possible pour faire de l’audiodescription sur une vidéo HTML5.
Généralement, deux solutions sont proposées pour faire de l’audiodescription : changer la source vidéo ou audio.
Le problème avec ces deux solutions est que l’on duplique plus ou moins la ressource.
Dans le cas du changement de source vidéo, on devra bien entendu stocker/rendre deux ressources plus ou moins volumineuses.
Les solutions dépendent de votre besoin. Dans tout les cas, je vous conseille l’utilisation de videojs, qui a l’avantage d’avoir une bonne accessibilité.
Voici quelques ressources:
- Pour switcher la source vidéo :
https://github.com/vidcaster/video-js-resolutions
https://github.com/Hussnain1/Video.js-HD-Toggle-Plugin - Pour switcher la source audio (attention à la faible compatibilité de ce dernier)
Mise en place de l’audiodescription
Dans notre cas, le besoin est légèrement différent car l’audiodescription est une source audio différente qui ne contient pas l’audio de base de la vidéo.
Nous devons donc « superposer » la source audio de l’audiodescription à la source audio de la vidéo.
Nous allons également ajouter un bouton au player afin d’activer ou non l’audiodescription.
Le code proposé ici se base sur la version 5 de videojs.
Vous allez voir c’est assez simple et rapide à mettre en place :
Voici un codepen pour voir le résultat.
C’est tout pour aujourd’hui. La prochaine fois on verra comment créer un plugin videojs pour implémenter tout ça directement 😉
Crédit photo : https://twitter.com/born2rollmc/status/587450752035065856
J’aime bien utiliser compass en ce moment. Et le fait qu’il soit présent sur la version 1.6 de Prestashop n’y est pas pour rien je pense.
J’ai écrit plusieurs articles concernant les shortcodes.
Dans le premier nous avons vu comment en créer un, et dans le second, comment simplifier son utilisation.
Mais aujourd’hui nous allons voir comment faire pour que l’utilisateur n’ai plus besoin de les taper directement.
Il est vrai que dans le deuxième article, nous avons tenté de simplifier leur utilisation en créant plusieurs shortcodes afin de réduire leur taille à l’écriture.
Mais finalement, les shortcodes peuvent être pratiques, mais il ne sont pas spécialement intuitifs pour l’utilisateur.
Ou le apt-get pour Windows
Dans cette article nous verrons l’utilisation de l’attribut HTML5 « contextmenu » qui nous permet d’ajouter des éléments dans le menu contextuel affichée lors d’un clique droit sur un élément.
Dans un précédent article, je vous avez présenté la création de shortcodes dans Wordpress. L’article est toujours disponible ICI.
Aujourd’hui je souhaite vous présenter comment créer plusieurs shortcodes pour une même fonction.
L’API de facebook est plutôt simple à prendre en main. D’autant plus que l’explorateur de graph permet vraiment de tester ce que l’on souhaite.
Au final, lorsque l’on a besoin d’utiliser l’API js, on répond régulièrement aux mêmes problématiques (connexion, permissions, liste d’amis…)
C’est pour cela que je vous propose ici de mettre à disposition tout ce dont vous avez besoin la plupart du temps 😉
Les microdatas permettent une sémantique au plus juste et apportent plus de sens au éléments qui composent une page HTML.
L’intérêt principal de ces microdatas est qu’elles sont reconnues par les principaux moteurs de recherches tels que Google, Bing, Yahoo !, ou en encore Yandex.
Grâce à un vocabulaire spécifique, nous pouvons définir différents items tels que des produits, des personnes, des événements, du contenu créatif, une entreprise…Les microdatas permettent une sémantique au plus juste et apportent plus de sens au éléments qui composent une page HTML.
L’intérêt principal de ces microdatas est qu’elles sont reconnues par les principaux moteurs de recherches tels que Google, Bing, Yahoo !, ou en encore Yandex.
Grâce à un vocabulaire spécifique, nous pouvons définir différents items tels que des produits, des personnes, des événements, du contenu créatif, une entreprise…
Qu’est-ce qu’un shortcode
Un shortcode est un bout de code à insérer dans n’importe quel éditeur de contenu au sein de Wordpress.
En clair, vous pouvez proposer de nouvelles fonctionnalités accessibles simplement depuis l’administration de Wordpress, enrichissez WordPress, c’est facile !