Photoshop et les gif animés

Si comme moi, votre gif animé exporté via Flash est d’une qualité plus que médiocre (notamment lorsqu’il y a des dégradés…), fermez vite Flash et ouvrez Photoshop !

Ouvrez votre document Photoshop ou partez d’un document vierge.

Cliquez sur « Fenêtre > Montage ». Vous voyez apparaître la fenêtre suivante :

Capture d’écran 2015-04-08 à 16.21.49

Cliquez sur « Créer une animation d’image » :

Capture d’écran 2015-04-08 à 16.23.10

Le principe du gif animé, c’est de faire des séquences d’images. En soi, faire apparaître ou non des images. Avec les calques de Photoshop, rien de plus simple !

Nous allons d’abord créer le scénario, avec des calques, puis les grouper pour faciliter les enchaînements (un groupe de calques par visuel différent).

Capture d’écran 2015-04-08 à 16.34.06

Maintenant, nous allons passer au « Montage d’images ».

Sur la première image, cochez les calques que vous voulez faire apparaître :

Capture d’écran 2015-04-08 à 16.36.52

Ensuite, cliquez sur l’icône « Duplication des images sélectionnées » : Capture d’écran 2015-04-08 à 16.38.37Une deuxième image identique à la première apparaît. Pour celle-ci, cochez les calques à rendre visibles :

Capture d’écran 2015-04-08 à 16.39.56

Vous remarquez, que les calques visibles sur votre scénario se retrouvent sur votre deuxième image.

Continuez ainsi de suite, jusqu’à l’enchaînement voulu :

Capture d’écran 2015-04-08 à 16.42.07

Maintenant, nous allons nous occuper de la durée des images. Vous pouvez choisir le temps d’apparition pour chaque image. Cliquez sur la flèche à droite du temps « 0 s » :

Capture d’écran 2015-04-08 à 16.44.39

Si par exemple, vous souhaitez faire clignoter le bouton « Cliquer ici ! », il suffit de mettre à la suite des images avec le bouton / sans le bouton :

Capture d’écran 2015-04-08 à 16.55.27

Vos séquences d’images sont terminées, nous allons passer à l’export. Cliquez sur « Fichier > Enregistrer pour le Web », choisissez le format GIF, un petit clic sur « Enregistrer » et hop le tour est joué !

animation

Pour les améliorations, nous pouvons utiliser les transitions avec fondus, les déplacements de calques, …

Pour ce faire, placez vous sur l’image où vous voulez faire la transition (par exemple fondu entre le visuel 1 et le visuel 2). Puis, cliquez sur le bouton « Trajectoire des images animées » :

Capture d’écran 2015-04-08 à 17.08.32

Sur cette fenêtre, vous pouvez choisir si la transition se fait avec l’image suivante / précédente, le nombre d’images à rajouter (plus il y a d’images plus la transition est longue) et les paramètres pris en compte (Position –> déplacement de calques, Opacité –> fondu entre les calques) .

Capture d’écran 2015-04-08 à 17.11.39

Voilà le résultat, 3 images ont été intercalées après l’image 2 avec des opacités progressives (ne pas oublier de passer à 0 s les durées des images de transition) :

Capture d’écran 2015-04-08 à 17.12.39

Pour faire des interpolations de mouvement (faire bouger un calque), déplacez un calque sur une image, placez vous sur l’image précédant l’interpolation, cliquez sur l’icône « Trajectoire des images animées », choisissez vos paramètres et voilà :

Capture d’écran 2015-04-08 à 17.17.24

Résultat final en beaucoup moins de temps qu’avec Flash 😉

animation2

Accompagner la transition agile d’un grand projet agile par Christophe Addinquy – Printemps Agile 2015

L’intervenant de cette conférence, Christophe Addinquy,  a abordé 12 leçons apprises lors de la transition agile du grand projet Linky, en y associant des conseils.

      1. L’immersion agile
        • pas facile, pas naturel
        • une journée d’immersion : ateliers, jeux, discussions pour appréhender les mécanismes de l’agilité
      2. Commencer lentement et délibérément
        • qualité = les bons gestes, du code testé
        • les premières itérations : focaliser l’attention sur la qualité et pas le nombre de stories réalisées
        • /!\ équipes cherchent à aller vite quand même
      3. Le droit à l’erreur
        • rassurer, logique d’expérimentation
        • erreur = opportunité d’apprendre quelque chose
        • laisser l’erreur arriver car on apprend par nous-même
      4. Les tests d’acceptation
        • avant de coder
        • spécifications avec de vraies valeurs
        • permet de trouver des bugs en les écrivant
        • créer des compréhensions partagées avec les équipes fonctionnelles, développeurs…
      5. La posture du management
        • pas le droit de dire aux personnes comment elles doivent faire
        • manager : porteur de l’objectif, de la vision et du sens. Il est responsable du cadre (moyens, motivation)
      6. Veiller à l’auto-organisation
        • écouter et surveiller les phrases comme « on m’a demandé que »
      7. Craftmanship
        • la qualité du code = pré-requis de l’agilité
        • 3 axes : facteurs externes (coding dojo), injecter du savoir-faire dans les équipes (binômage, refactoring) et créer de la masse critique pour la qualité du code (augmenter le nombre de personnes agiles pour faire basculer la balance de l’autre côté)
      8. Le fond et non la forme
        • « Comment » (=folklore) : post-it, rôles, cérémonies
        • « Pourquoi » : collaboration, feedback, implication, transparence
      9. Apprendre à s’améliorer
        • amélioration continue
        • rétrospective : actions faisables, review des actions précédentes
        • pendant l’intégration : action n’importe quand
      10. L’architecture compte !
        • importance du feedback
        • ne pas regarder seulement les fonctionnalités, mais comment travailler avec au jour le jour, qu’on peut le tester
      11. Off/on : comment faire la transition agile ?
        • par petits pas : apporte une confusion j’y suis / j’y suis pas
        • bien si brutale
        • autonomie de l’équipe
        • terminer un sprint avec un livrable, des tests dans l’itération
        • pas de challenges trop élevés
      12. Parfois il faut plonger pour mieux réussir
        • quand on a compris, on ne fait plus appel à l’aide
        • on ne peut pas forcer les gens à écouter
        • phase de dégradation après la mise en place mais on remonte toujours, elle est plus ou moins longue, c’est plus facile à expliquer après cette phase

// Une interface doit être facile à bien utiliser et difficile à mal utiliser.

// Faites attention à ce que vous demandez, vous risquez de l’obtenir

        • pas de mesure de vélocité car sinon rapidité au lieu de la qualité
        • nombre d’indicateurs le plus limité possible (=1), ils doivent permettre de prendre une décision (=indicateur actionnable)

Outils et pratiques pour mieux travailler ensemble ! par Simon Jaillais & Aurélien Morvant – Printemps Agile 2015

Conférence présentée par Simon Jaillais et Aurélien Morvant ayant pour but de nous montrer des ateliers pour accompagner les gens dans le changement.

Fonctionnement

Pour commencer, ils nous ont présenté le fonctionnement des ateliers. Voici quelques idées à retenir pour une bonne organisation :

Innovation game

  • commencer et terminer à l’heure
  • respecter celui qui parle
  • une conversation à la fois
  • l’opinion de chacun compte

Pratique des 7P

Peu d’espoir quand on est dans l’improvisation, un bon atelier demande 70% de préparation.

  • Product : qu’est-ce que j’attend à la fin de l’atelier ?
  • Purpose : quels sont les objectifs ?
  • People : qui va participer (rôles, préparation, déléguer – time keeper, scribe) ?
  • Practices : quelles sont les pratiques ?
  • Preparation : préparations (post-it, vidéoprojecteur…)
  • Process : que doit-on mettre en œuvre ?
  • Pitfalls : quels sont les risques associés (distances géographiques des participants) ?

Ensuite, Simon et Aurélien ont proposé aux participants de choisir un atelier parmi ceux proposés. Pour l’atelier sélectionné, ils nous ont proposé un déroulé composé d’un certain nombre de pratiques collaboratives. Voici deux ateliers choisis.

Résolutions des problèmes par la créativité

Ice breaker : alphabet des concepts

  • une question à poser au groupe et chacun répond avec un mot correspondant à une lettre en donnant la définition de ce mot
  • phase de réflexion individuelle avant celle de réflexion en groupe
  • prendre la température du groupe

Techniques de créativité

  • Purge : sortir toutes les idées sur un post-it ou sur des grandes feuilles avec des dessins
  • Analogies : donner des contextes pour lesquels on peut rencontrer le même problème (=phase de projection). Pour chaque environnement, ramener à notre contexte (=phase de convergence)

QQOQCP : plan d’actions

  • Quoi ? Qui ? Où ? Quand ? Comment ? Pourquoi ?
  • caractériser les actions avec les questions / réponses
  • une action (=ce que je peux faire) non portée = une discussion
  • chaque personne qui ressort à une action

Cohésion d’équipe

L’arbre à personnages (=15 min)

  • plusieurs personnages dans un arbre situés à des hauteurs différentes, dans des diverses positions (de dos, seul, par groupe, en train de sourire, de tomber…)
  • chaque personne cherche sa position dans l’arbre
  • chacun vient se positionner sur l’arbre (gommettes) et explique pourquoi devant le groupe
  • caractériser l’état d’esprit pour l’animation
  • /!\ poser une question avant d’utiliser l’arbre

La crevasse (=30 min)

  • jeu en binôme, les personnes s’appuient sur les mains de l’autre en face à face (pour faire un pont) et on doit avancer le long de deux lignes droites
  • l’un sans l’autre c’est difficile de travailler
  • confiance aille dans les deux sens

Conclusion

La co-construction + cohésion est une motivation pour les équipes. Les pratiques collaboratives apportent beaucoup de valeurs, sont des bons moyens de polliniser et restent des moments privilégiés.

Foldercouch et la compression d’images

Foldercouch est une gem pour Ruby On Rails qui permet une manipulation des fichiers liés à un objet sans base de données. Elle a été développée par notre équipe de développement.

Compression d’images

Avoir des images compressées sur son site web permet de réduire le temps de chargement des pages. Dans le cas du Responsive Design, l’idéal est d’avoir une image par terminal (mobile, tablette et pc). Comment faire la compression avec Foldercouch ?

Les images enregistrées via Foldercouch respectent l’arborescence et la convention de nommage suivante :

Une fois l’image enregistrée dans le bon dossier, voici la démarche de compression. Les méthodes utilisées sont incluses dans Foldercouch.

1. Récupérer le chemin où sera enregistrée la nouvelle image compressée :

2. Créer le répertoire :

3. Créer le chemin de la nouvelle photo :

4. Récupérer la photo qui sert de base pour la compression :

5. Utiliser ImageMagick et la méthode convert pour compresser l’image, avec les options qui vont bien : taille, qualité, format… :

Vous pouvez faire cette méthode pour autant de formats que vous souhaitez.

Lien complémentaire :  http://www.imagemagick.org/ 

Bonnes pratiques de l’intégration

Le but des intégrations est de fournir un contenu de qualité qui fonctionne sur plusieurs navigateurs et appareils.

Navigateurs

Chaque projet étant différent, c’est en vérifiant les données de navigation, que vous allez choisir quels navigateurs vous supporterez.
Un site ne doit pas s’afficher de la même façon sur tous les navigateurs mais les pages ne doivent pas être cassées et offrir aux utilisateurs le meilleur contenu en fonction de l’appareil.

Quels navigateurs supporter ?

Les navigateurs modernes et les navigateurs mobiles :

  • IE 9+, Firefox, Chrome, Safari, Opera
  • Iphone et Ipad, Android téléphone et tablette, Blackberry, Windows Phone, Firefox mobile et Opera mobile

Mobile

Quelques astuces à ne pas oublier lors d’une intégration :

    • optimiser les styles pour les petits écrans avec les requêtes @media et la balise meta viewport
    • pour le support tactile, les zones cliquables doivent avoir des dimensions minimales de 44px x 44px
    • pas d’événements mouseover, ou de propriétés css :hover

Moteurs de rendu

Le moteur de rendu d’un navigateur interprète le HTML, CSS et autres standards et converti le tout en pixels. Comprendre les différences des moteurs de rendu permet de réduire le temps pour la mise en page et les tests de compatibilité.
Il y en a quatre :

  • Trident (IE)
  • Gecko (Firefox)
  • Webkit (Safari et appareils Apple)
  • Blonk (Chrome, Opera et appareils Android)

Un site qui permet de connaître les compatibilités multi-navigateurs pour le HTML5, CSS3 et autres technologies : http://caniuse.com/

HTML

Il faut respecter le marquage : si c’est un titre, on utilise une balise titre (h1, h2), si c’est une liste, on utilise des listes (ul, li, ol).

Sémantique

Les titres h1 et h5 mettent le contenu en avant pour une navigation plus facile. Quand un utilisateur clique sur un label for=« nom », ça coche l’input associé à l‘id id=« nom ».

Bonnes pratiques

  • le HTML doit fonctionner sans CSS, ni Javascript
  • utiliser le HTML5 dès que possible
  • utiliser le moins d’éléments possible
  • ne jamais coder les styles de façon inline (tout comme le Javascript)

CSS

 Maintenable

  • css séparé du HTML
  • modules pour le système (reset, formulaires, typographie)
  • priorité : coder pour les navigateurs respectueux des standards. Fixer les bugs pour IE par la suite

Internet Explorer

Pour rendre compatible votre site à Internet Explorer, vous pouvez utiliser des commentaires conditionnels :

En modifiant l’en-tête HTML, on peut utiliser des classes pour cibler des versions spécifiques.

Media queries

Elles permettent de donner des styles spécifiques aux différents appareils. Ca identifie : écran ou print, hauteur/largeur, portrait/paysage.

La balise meta viewport est nécessaire pour gérer correctement l’affichage des appareils mobile et la version pc :

Bonnes pratiques

Un site intéressant qui donnent des conseils et des bonnes pratiques pour le CSS : http://guidecss.fr/

 

 

Meta Facebook

Lorsqu’on met un lien « Partager » de Facebook sur une page html, il arrive parfois que ce ne soit pas les bonnes informations qui apparaissent sur l’encart Share…

encart-share

Nous allons donc étudier comment gérer les données utilisées par cet encart.

Tout d’abord, nous allons mettre un lien html simple qui permet de partager notre page :

/!\ Ce n’est pas un plugin Facebook et il n’y a pas de javascript d’utilisé.

Par défaut, si nous ne spécifions pas de meta données, Facebook va prendre dans la page html les informations suivantes :

  • pour le titre : meta title de la page (si présent)
  • pour la description : meta description (si présente, sinon du texte quelconque de la page)
  • pour l’image : une qui est présente sur la page

L’inconvénient, c’est qu’on risque d’avoir des informations qui ne nous conviennent pas : une image ne correspondant pas à notre information, un titre non significatif, une description trop courte…

Pour y remédier, nous allons insérer les balises meta de Facebook dans le <head> de notre page.

/!\ L’image doit avoir une taille minimale de 200*200px.

Avec ces meta, nous pouvons contrôler les informations affichées sur les encarts « Partager ».

Attention, quand même, lorsque vous faites une modification dans ces données, Facebook garde en cache les meta pendant 2-3 jours minimum (ou plus !). Pour pallier à ce souci, il faut vider le cache de Facebook grâce à un outil de debug :

https://developers.facebook.com/tools/debug/og/object/

Si après avoir tapé l’url du site, nous cliquons sur « Show existing scrape information », les données affichées vont être celles en cache… Pas très intéressant !

Donc, nous allons cliquer sur le bouton « Fetch new scrape information » et là… ce sont les nouvelles informations qui apparaissent. En réalité cette action vide le cache de Facebook.

Et en retournant sur notre lien « Partager », ce sont bien les nouvelles données qui apparaissent !

Lien intéressant : https://css-tricks.com/essential-meta-tags-social-media/

Conversion de vidéos avec ffmpeg

Voici la procédure de conversion de vidéos reçues au format .mp4 ou .mov inexploitables pour le Web vu leur taille.

1- Traitement par ffmpeg

1.1 Installation

/!\ Lors de l’installation , il faut vérifier à installer les bons codecs.

NB : S’il vous manque un codec lors de votre conversion, il faut utiliser la commande suivante :

1.2 Conversion

  • D’une vidéo au format mp4 (ou mov) vers du mp4 plus léger

Vous pouvez changer la résolution avec -s et en spécifiant la résolution (elle doit rester proportionnelle à celle d’origine).

Encodage 2-pass

Cette technique permet d’encoder une première fois à débit constant pour faire un index des moments qui vont être encodés avec une qualité exécrable. Ensuite lors du deuxième encodage, la qualité sera équilibrée en baissant la qualité globale des meilleures scènes pour augmenter la qualité des plus mauvaises.

Les paramètres sont simples : on choisit le débit constant voulu (-b), le débit minimum (-minrate) que l’on peut atteindre, et le débit maximum (-maxrate).

Ensuite, -pass 1 signifie que nous sommes en train d’effectuer la première passe.

Pour la seconde passe, utilisez les mêmes paramètres à une exception ! La seule chose à modifier est le paramètre -pass 1 à changer en -pass 2.

  • D’une vidéo au format mp4 convertie vers du mov

Les paramètres sont presque les mêmes à l’exception des codecs utilisés : libtheora pour la vidéo et libvorbis pour l’audio. Et n’oubliez pas de faire la deuxième passe !

Erreur openSSL en local sur un projet rails

Quand vous démarrez un projet rails en local et que vous avez cette erreur suivante :

il vous suffit de réinstaller ruby avec votre version :

Ajouter une version d’export player flash pour Flash CC 2014

1- Allez à l’adresse suivante : http://helpx.adobe.com/flash-player/kb/archived-flash-player-versions.html#playerglobal pour télécharger le fichier 10.1 playerglobal.swc Flash Player

2- Allez dans le dossier /Applications/Adobe Flash CC 2014/. Puis sur le fichier Adobe Flash CC 2014.app, faites un clic droit et cliquez sur « Afficher le contenu du paquet« .

Naviguez jusqu’au dossier Contents/Common/Configuration/ActionScript 3.0. Dans ce dernier, créez un nouveau répertoire parmi les autres dossiers FPxx.x nommé « FP10.1 » et placez votre fichier SWC nouvellement téléchargé ici.

Remarque : Le fichier téléchargé est nommé playerglobal10_1.swc. Renommez le en playerglobal.swc.

3- Revenez en arrière vers le dossier ../Configuration (à droite en dehors du dossier ActionScript 3.0) et allez dans le dossier « Players« . Il y a un certain nombre de fichiers XML ici. Trouvez celui nommé « FlashPlayer10_3.xml » dupliquez-le et renommez-le en « FlashPlayer10_1.xml« .

4- Vous aurez besoin d’un éditeur de texte pour cette partie. Ouvrez le fichier nouvellement dupliqué et remplacez les chaines de caractères « 10.3 » par « 10.1« , enregistrez et vous avez terminé.

5- Redémarrez flash CC 2014 et assurez-vous que vous avez une nouvelle option dans vos paramètres d’exportation pour « Flash Player 10.1« .

Problème d’installation de la gem libv8

Si vous rencontrer un souci avec la gem libv8 lors d’un bundle install sur votre pc (avec un projet ruby 1.8.7), faites ce qui suit :

– ajouter dans votre Gemfile (en dehors d’un group :assets)

group :production do  gem 'therubyracer', :platforms => :rubyend
group :development do  gem 'execjs'end

– dans votre terminal, à la place du bundle install, faites :

bundle install --without production