Délai de répétition d’une vidéo

Si un jour l’envie vous prend de vouloir lancer une vidéo en lecture automatique et que vous voulez que celle-ci ce relance automatiquement après un délai de quelques secondes, voici comment faire :

il suffit d’écrire la balise vidéo habituelle avec les options que vous souhaitez :

<video width="561" height="374" controls="controls" autoplay="true" id="video" >
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
</video>

puis d’y inclure le JS suivant :

<code>
<script>
  $(function() {
    var video = $("#video").get(0);
    video.addEventListener("ended", function() {
      setTimeout(function(){
          video.play();
      }, 5000);
    });
  });
</script>
</code>

Petite explication du js :

On récupère avec l’id notre balise vidéo via un get(0).

Puis on écoute l’événement ended du gestionnaire d’événement, dans lequel on aura au préalable configuré un setTimeout avant de relancer la vidéo avec la fonction .play()

Dans notre cas la vidéo se relance 5 secondes après s’être arrêter.

Astuce : si l’attribut loop est présent dans la balise vidéo l’événement ended n’arrive jamais.

 

Navigation mobile : alternatives au menu hamburger

Le menu hamburger est un sujet très débattu : les développeurs sont en majorité d’accord mais il y a très peu d’applications qui fonctionnent avec.

En effet, si les applications deviennent trop complexes, il est préférable de découper les fonctionnalités en actions clés et les mettre dans des applications distinctes.

Les menus hamburgers demandent une exploration plus profonde, ralentissent la navigation et peuvent perdre les internautes.

Tabs

Ils permettent d’organiser en catégories, sont connus des internautes, peuvent être combinés avec des labels / icônes.

La navigation en bas

Proche des tabs, système adopté par iOS et Android, la plupart du temps toujours visible. Barre composée d’icônes et labels, qui peut être cachée quand on scrolle et réapparaître par la suite.

Voir plus

S’il y a trop d’éléments dans le menu, on peut ajouter une option « Voir plus ». Il faut réduire la liste à 4 actions principales.

La navigation scrollable

C’est une approche pour les longues listes, barre qui se déplace d’un côté à l’autre. La solution avec les icônes seules est à tester avant la mise en production car elle peut être difficile à comprendre.

Inline

On peut définir les catégories principales sur une même page = page d’accueil. Les groupes peuvent être présentés comme des listes avec des en-têtes distinctes.

Ne pas cacher la recherche

Si la recherche est un point-clé important de l’application, il ne faut pas l’intégrer dans le menu hamburger et la rendre visible tout le temps.

Toujours concevoir avec du contenu

Le contenu seul n’a pas de sens et la mise en page sans contenu non plus.

Sources
https://uxplanet.org/great-alternatives-to-hamburger-menus-d4c76d9414dd#.p4f28msvq

Etendre le support HTML5/CSS3 à IE

N’importe quel navigateur moderne de nos jour est capable de reconnaitre et d’utiliser en grande partie les propriétés CSS3 et les balise HTML 5 tous sauf notre irréductible Internet Explorer.

Nous allons voir dans cet article comment avoir le meilleur support sur les anciens navigateurs et plus particulièrement les anciennes versions d’IE.

Commençons par les balises HTML5

HTML5shiv

Html5shiv est un script JS qui permet d’étendre les balises HTML5 aux versions inférieures d’IE10.

Il suffit pour cela d’ajouter dans le head de la page le script disponible ici

<!-- [if lt IE 9]>
    <script src="chemin/vers/html5shiv.js"></script>
<![endif]-->

Une fois cela fait il ne reste plus qu’à utiliser les nouvelles balises. Attention il est nécessaire d’utiliser un serveur. Sans une boucle localhost le script ne fonctionnera pas.

Passons au CSS.

CSS3 Pie

CSS3 Pie est une bibliothèque qui permet d’émuler des propriétés css de IE 6 – à IE 9, elle est disponible sur le site de css3pie.

Les propriétés qui peuvent être émuler sont les suivantes :

Pour ce qui est de l’utilisation, il suffit d’inclure les fichiers dans votre projet. Ensuite d’écrire votre CSS comme ceci :

.test{
      background-color: FireBrick;
      margin-bottom: 1em;
      border: 1px solid black;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      behavior: url(PIE.htc);
    }

La propriété behavior: url(chemin/vers/le/fichier/PIE.htc) est obligatoire.

Elle ne marche qu’avec internet explorer, elle permet d’associer un script javascript à un objet HTML.

Encore une fois cela ne marche que si l’on passe par une boucle localhost.

Petite précision importante sur cette bibliothèque, elle ne reconnait que les propriétés de type « short-hands » par exemple : border radius: 10px ou border-radius 10px 10px 10px 10px.

Mais ne reconnais pas la propriété suivante border-radius-top-left: 10px;

Selectivizr

Selectivizr est un petit script qui permet d’émuler les pseudos classes pour IE 6 à IE 8 disponible sur le site de seletivizr.

Il suffit d’inclure le script dans le head de la page :

<!--[if (gte IE 6)&amp;(lte IE 8)]>
  <script type="text/javascript" src="selectivizr.js"></script>
<![endif]-->

et de posséder une bibliothèque parmi les suivantes :

  • Jquery
  • Dojo
  • Prototype
  • yahoo
  • DomAssistant
  • mootools
  • nvwmatcher

Par ailleurs pour une émulation de toutes les pseudos classes il est nécessaire d’utiliser mootools ou nvwmatcher. Les autres ne permettent qu’une émulation partielle.

Flexbox

Enfin pour rendre compatible les flexbox avec IE10 il faut doubler les propriétés css avec le préfixe -ms- à chaque fois que vos utiliser une propriété flexbox par exemple de cette façon :

display: -ms-flexbox;           /* TWEENER - IE 10 */
display: flex;

Cela permet une compatibilité avec IE10.

Cependant si vous viser une compatibilité inférieur à IE10 il est possible d’utiliser le Polyfill flexibility disponible ici

Ce polyfill n’est cependant pas complet et ne supporte pas toutes les propriétés flexbox. Cela permet un mode dégradé plus sympathique mais ne vous attendez pas à un support complet.

Mes tests ce sont portés principalement sur une version IE 8 je ne sais pas si sur la version d’IE 9 le support est meilleur.

Pour l’utilisation, il suffit encore une fois d’inclure le script dans notre projet :

<script src="flexibility.js"></script>

Ensuite il faut mettre devant chaque display: flex la propriété suivante :

-js-display: flex;

Pour savoir si le navigateur utilisé supporte ou pas les flexbox il est possible d’utiliser modernizr. (voir l’article)

if (Modernizr.flexbox &amp;&amp; Modernizr.flexwrap) {
    // Modern Flexbox with `flex-wrap` is supported
} else {
    flexibility(document.documentElement);
}

Ridiculously Responsive Social Sharing Buttons

Ridiculously Responsive Social Sharing Buttons est un plugin javascript permettant d’ajouter des liens de partages vers différents réseaux sociaux.

Parmi tout les plugins existant celle-ci comporte plusieurs avantage :

  • il est responsive
  • il est gratuite
  • il possède de nombreux réseaux sociaux de base
  • il est facile d’utilisation

Utilisation

Pour ce qui est de l’utilisation il suffit d’ajouter le fichier css « rrssb.css » dans notre projet et de copier la balise <link> suivante dans notre header :

<link rel="stylesheet" href="css/rrssb.css" />

Ensuite il suffit de choisir les réseaux que l’on souhaite ajouter, en copiant les li correspondant présent dans le fichier index.html.

Et enfin il est nécessaire de copier les lignes de JS suivante est de copier le fichier rrssb.min.js dans notre projet. (Si Jquery est déja présent dans notre projet la première ligne est optionnel)

&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;script&gt;window.jQuery || document.write('&lt;script src="js/vendor/jquery.1.10.2.min.js"&gt;&lt;\/script&gt;')&lt;/script&gt;
&lt;script src="js/rrssb.min.js"&gt;&lt;/script&gt;

Voilà maintenant que nos boutons sont disponible il suffit de changer les liens dans chaque li par le liens que vous voulez partager.

Si jamais vous n’aimer pas faire d’effort inutilement voici un morceau de JS qui permet de remplacer  les liens automatiquement.

&lt;script type="text/javascript"&gt;
 
jQuery(document).ready(function ($) {
 
  $('.rrssb-buttons').rrssb({
    // required:
    title: 'This is the email subject and/or tweet text',
    url: 'http://rrssb.ml/',
 
    // optional:
    description: 'Longer description used with some providers',
    emailBody: 'Usually email body is just the description + url, but you can customize it if you want'
  });
});
&lt;/script&gt;

source :

git hub

demo

Découverte de Verlet-JS

Verlet-Js est une librairie javascript qui permet de créer des formes plus ou moins complexes dans un monde 2D. Pour cela, il faut utiliser un système de particules/contraintes assez complexe à gérer.

Ces formes peuvent être utilisées pour la réalisation de jeux vidéos mais aussi dans des simulations à but scientifique.

Pour télécharger et utiliser la librairie Verlet-JS, un dépôt gitHub est disponible à cette adresse https://github.com/subprotocol/verlet-js

Pour comprendre plus en détail le fonctionnement de cette librairie et comment réaliser des formes plus ou moins complexes. Il existe plusieurs sites ou tutos, comme notamment :

 

Pseudo-classes hover et active : bien les utiliser en responsive

En responsive, on utilise souvent les pseudo-classes pour styliser des éléments comme les liens par exemple.

Sur la version desktop, on souhaite souvent utiliser l’animation au survol avec la pseudo-classe :hover. Par contre, sur les versions tablettes et mobiles, le survol (:hover) n’a pas de logique et on préfère souvent donner de l’effet lorsque nous appuyons dessus en utilisant la pseudo-classe :active par exemple.

Pour que ces pseudo-classes fonctionnent correctement et pour éviter les effets de bord, il faut penser à bien séparer les 2 dans le css à l’aide des médias queries. Dans l’exemple ci dessous, Le :hover c’est pour le desktop et le :active pour mobiles et tablettes.

Attention, je n’ai pas dit que « le :active, c’est uniquement pour les tablettes et mobiles ». Il peut très bien s’utiliser sur desktop.

Codepen - hover et active

Si je n’avais pas séparé, qu’est-ce qui ce serait passé ?

Codepen - hover et active

Sur desktop, pas trop de problèmes. Le hover remplirait bien son job et on aurait aussi un effet lors du clic avec le :active (ce qui n’est pas le plus génant).

Maintenant sur mobiles et tablettes, c’est une autre histoire. Le :hover est tout de même reconnu lorsque l’on appuie dessus (pas pour tout les mobiles et tablettes, mais pour beaucoup). Le problème, c’est qu’il n’a pas le comportement que l’on attend.

Si j’appuie sur mon lien, le :active fonctionne correctement, et au tout début mon lien devient bien rouge. Par contre, dès que je relâche, le :hover s’est lui aussi déclenché et le bouton va devenir bleu en permanence. Ce n’était pas du tout l’effet recherché.

bouton_rouge

bouton_bleu

 

Tout ça pour dire de bien ranger les choses au bon endroit, en séparant bien à l’aide de médias queries pour obtenir le résultat attendu et ne pas avoir de mauvaises surprises.

Le code source utilisé pour l’exemple est disponible sur le lien http://codepen.io/SoisNet/pen/VKEJJm .

Générer une font avec des icônes en rails

Une « fonte-icône » est une police qui utilise des glyphes représentant des icônes vectorielles. Très pratique, car on peut facilement changer la couleur, la taille en css. En plus de leur flexibilité, les polices d’icônes permettent un gain de performance puisqu’il suffit de charger un fichier de police pour avoir accès à beaucoup de caractères.

Nous allons voir comment mettre en œuvre une police d’icônes personnalisée avec Rails.

Nous allons utiliser la gem ‘fontcustom’ de Rails. Cette gem nécessite Ruby 1.9.2+ et FontForge.

1- Installation de fontforge

brew install fontforge --with-python

Si vous avez besoin de Xquartz lors de l’installation de fontforge, vous pouvez le télécharger ici.

2- Ajouter la gem ‘fontcustom’ à votre Gemfile (puis faire un bundle update)

3- Ajouter une tâche rake en créant un fichier /lib/tasks/icons.rake

namespace :icons do
  task :compile do
    puts "Compiling icons..."
    puts %x(fontcustom compile)
  end
end

4- Créer un fichier fontcustom.yml dans config avec les options suivantes :

#config/fontcustom.yml

font_name: icons
css_selector: .icon-{{glyph}}
preprocessor_path: ""
autowidth: false
no_hash: true
force: false
debug: false
quiet: false

input:
  vectors: app/assets/icons

output:
  fonts: app/assets/fonts
  css: app/assets/stylesheets

templates:
 - scss

On va mettre nos icônes svg dans le dossier app/assets/icons. Les fichiers pour la police compilés se mettront dans le dossier app/assets/fonts.

5- Faire la commande suivante pour compiler les icônes :

rails icons:compile

En regardant votre arborescence, vous verrez que des fichiers ont été créés :

create app/assets/fonts/icons.ttf
       app/assets/fonts/icons.svg
       app/assets/fonts/icons.woff
       app/assets/fonts/icons.eot

create app/assets/stylesheets/_icons.scss

6- Importer le fichier _icons.scss dans votre application.scss

*= require _icons

Après l’installation et la compilation, rien de plus simple pour l’utilisation dans vos vues :

<span class="icon-utilisateur"></span>

Pour connaître les noms des classes, il faut aller voir le fichier _icons.scss qui contient ces noms.

Si on ajoute ou supprime une icône dans le dossier, il suffit de recompiler avec la commande suivante :

rails icons:compile

Sources :

Support des fonctionnalités

@supports

Appelé aussi règle conditionnelle, le @supports permet de détecter si une propriété css est compatible avec le navigateur utilisé par l’internaute, et ainsi prévoir une alternative si besoin.

Cette propriété et supporté par à peu près tout les navigateurs modernes sauf l’irréductible IE. Can i use

Tout comme les médias queries, @supports peut intégrer plusieurs règles au sein d’un bloc d’accolade. Et les conditions doivent êtres individuelles et entourées par des parenthèses.

@supports (hyphens: auto){
    p{
       hyphens: auto
     }
}

Si le navigateur supporte la propriété hyphens il va l’appliquer sinon il va s’adapter avec les conditions par défaut.

Il est possible d’ajouter des conditions and et or comme avec les medias queries, ainsi que tester la non reconnaissance d’une propriété avec l’opérateur not.

Toutefois certaines règles que l’on testes sont mieux supportées que le @supports lui même, notamment sur IE. Donc le résultat peut être trompeur.

@supports et javascript

Il est possible d’utiliser @supports avec le javascript. Il y a deux syntaxes possible :

if ( CSS.supports('property', 'value') )  { }
 
if ( CSS.supports( '(property: value) and (property: value') ) { }

Conclusion

C’est une propriété assez intéressante dans la théorie, mais malheureusement du fait de sont manque de compatibilité sous IE, la pratique n’est pas forcément utile.

En effet celle ci ne sera utile que si la propriété testée n’est pas compatible avec plusieurs navigateurs, tels que hyphens, et que celle-ci ne demande pas non plus un travail trop important en solution alternative.

Source: alsacreation, MDN

Les icônes sur le web

Les différentes icônes de déconnexion

icones

L’icône burger Menu VS Texte Menu

Capture d’écran 2016-09-21 à 10.04.02

L’icône avec la bordure est plus cliquée (http://exisweb.net/mobile-menu-icons)

Capture d’écran 2016-09-21 à 10.04.06

Le texte MENU encadré est plus cliqué (http://exisweb.net/mobile-menu-abtest)

Capture d’écran 2016-09-21 à 10.04.11

Le mot MENU est 20% plus cliqué (http://exisweb.net/menu-eats-hamburger)

NB : les utilisateurs d’Android cliquent plus facilement sur l’icône burger contrairement aux IOS qui préfèrent cliquer sur le texte MENU.

Menu accordéon : plus / chevron / flèche et gauche / droite ?

Capture d’écran 2016-09-21 à 10.51.09La majorité des personnes clique sur le label. L’icône est plus cliquée si elle se situe à droite.

Capture d’écran 2016-09-21 à 10.55.39En revanche, le temps du clic est plus long lorsque l’icône est à droite. Les personnes pensent que l’action n’est pas la même sur le label que sur l’icône (surtout si la distance entre les 2 est assez grande)

(https://www.viget.com/articles/testing-accordion-menu-designs-iconography)