• Home
  • Nous contacter

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab

Matthieu POULLIN

Frontend

Hacking HTML with CSS

Hacking HTML with CSS

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

LIRE LA SUITE
21/09/2017 TAGS: CSS, emailing, hack, html BY: Matthieu POULLIN
SHARE
LIRE LA SUITE
Outils

Vidéo et audiodescription

Vidéo et audiodescription

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

LIRE LA SUITE
24/03/2016 TAGS: Audio description, dev, vidéo, videojs BY: Matthieu POULLIN
SHARE
LIRE LA SUITE
Frontend

Le sprite generator de compass

Le sprite generator de compass

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.

LIRE LA SUITE
20/08/2015 TAGS: Compass, CSS, sprite BY: Matthieu POULLIN
SHARE
LIRE LA SUITE
CMS

Les shortcodes et l’utilisateur

Les shortcodes et l’utilisateur

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.

LIRE LA SUITE
30/07/2015 TAGS: shortcode, Wordpress, wysiwyg BY: Matthieu POULLIN
SHARE
LIRE LA SUITE
Outils

Chocolatey

Chocolatey

Ou le apt-get pour Windows

LIRE LA SUITE
16/07/2015 TAGS: Chocolatey, installer, windows BY: Matthieu POULLIN
SHARE
LIRE LA SUITE
Frontend

Context menu

Context menu

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.

LIRE LA SUITE
12/05/2014 BY: Matthieu POULLIN
SHARE
LIRE LA SUITE
CMS

Simplifier les shortcodes

Simplifier les shortcodes

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.

LIRE LA SUITE
22/04/2014 BY: Matthieu POULLIN
SHARE
LIRE LA SUITE
Outils

Snippets Facebook JS

Snippets Facebook JS

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 😉

LIRE LA SUITE
11/04/2014 BY: Matthieu POULLIN
SHARE
LIRE LA SUITE
Frontend

Les microdatas HTML5

Les microdatas HTML5

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…

LIRE LA SUITE
26/03/2014 BY: Matthieu POULLIN
SHARE
LIRE LA SUITE
CMS

Les shortcodes dans WordPress

Les shortcodes dans WordPress

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 !

LIRE LA SUITE
20/01/2014 BY: Matthieu POULLIN
SHARE
LIRE LA SUITE
1 2 Next

A propos d’Adfab

Nous sommes un studio de production digitales et d’innovation digitales au service des agences et des annonceurs
Nous recherchons le scintillement dans les regards et le plaisir de réalisations sur-performantes
Nous sommes techno-agnostiques
Nous sommes Adfab

Le blog d'Adfab
Copyright © 2018 Adfab Connect