Les Moutons Sauvages

Panolens.js porté en plugin SPIP 3.2

Charles Stephan — 2017-11-03T11:39:27Z

Installation

Le plugin s'installe comme tous les autres plugins.

Création d'un panorama

Créer l'objet par le menu édition
Joindre au moins un document de type video ou image

Le modele

En squelette :

#MODELE{panorama,env} ou #MODELE{panorama,id_panorama}

En redaction avec un identifiant transmit

 Exemple :

En redaction avec une image déjà jointe

 Exemple :

En redaction avec une vidéo déjà jointe, vous pouvez aussi l'utilisez avec une ressource internet jointe

 Exemple :

Configuration

Enfin en configuration, vous pourrez rajouter vos options en modifiant la configuration du plugin au regard de la doc du créateur du plugins js

Voir en ligne : plugins.spip.net/panolens

TODO :

Faire les trads de la page config cfg

Vimeo porté en plugin SPIP 3.2 pour manager son site Sur Vimeo

Charles Stephan — 2017-11-03T09:09:00Z

Historique

Ce plugin est en fait le fruit d'un travail fait pour un ami réalisateur de film 3D.

Il doit manager son compte Vimeo mais aussi les distribuer sur son site.
Aussi l'idée m'est venu de baser un site SPIP sur un compte Vimeo.

Installation

Le plugin s'installe comme tous les autres plugins.

Configuration

Dans la page de configuration du plugin vous trouverez pas mal d'explications pour chaque ligne.
Cependant pour faire fonctionner ce plugin, vous devrez préalablement créer une clef d'api chez Vimeo

Un cron récupère régulièrement les films du compte inscrit.

Pourquoi ne pas faire tout dans une boucle data ?

Car les performances sont toujours étonnantes chez Vimeo.

Voir en ligne : plugins.spip.net/vimeo

Todo :

Parfaire cette doc
Voir si le cron peut se faire film/film, film/diff, compte/nouveautés...
Retirer ou parfaire les regexp (encore trop relative à l'historique)
Des idées ?

Le plugin Swiper.js porté en plugin SPIP 3.2

Charles Stephan — 2017-11-03T08:58:07Z

Installation

Le plugin s'installe comme tous les autres plugins.

Figure

Il dispose par défaut des figures avec sa caption (figcaption).

Création d'un swiper

Créer l'objet par le menu édition
Joindre les images que vous voulez voir défiler
Eventuellement mettre un lien dans #URL_LIEN, #NOM_LIEN
Cela disposera un lien dans a dans la figure balise figure.

Le modele

En squelette :

#MODELE{swiper,env}
ou
#MODELE{swiper,id_swiper}

En redaction sans identifiant tranmit
Le modèle prendra les documents joints à l'article.

En redaction avec un identifiant transmit


Exemple :

En redaction avec de multiple identifiants transmits


Exemple :

Configuration

Enfin en configuration, vous pourrez rajouter vos options en modifiant le json au regard de la doc du créateur du plugins js

Voir en ligne : plugins.spip.net/swiper

Todo :

Checker la validité du json dans configurer (cfg)
Ou changer la méthode, mais comment se baser sur la configuration du plugin ? Voir limiter les options et en faire un tableau de config simple

L'atomic design : une nouvelle approche de conception

2017-09-15T14:02:44Z

L'atomic design est une méthode développée par le designer Brad Frost dans son livre intitulé Atomic Design

Cette méthode n'est pas récente, mais elle s'inscrit comme une nouvelle approche de la conception d'interface. Brad Frost s'est approprié le concept de Modular design pour imager l'atomic design tel qu'on le connaît aujourd'hui.

L'idée est de créer une harmonie entre les composants pour faciliter l'intégration des éléments dans n'importe quel environnement. Aujourd'hui les utilisateurs disposent d'une multitude de supports différents pouvant accueillir la même interface, on parle alors de multisupports.
Il faut donc adapter le contenu initialement prévu pour un écran d'ordinateur à la taille d'un écran mobile en fonction de l'espace qui lui est alloué.

C'est ainsi que la conception par « page » telle qu'on la construisait auparavant, n'est plus valable dans le contexte actuel.

L'imposition d'un format peut avoir un impact sur la réalisation finale. Entre un écran interactif et une montre connectée, les interactions seront différentes. On ne peut pas simplement rétrécir une interface sans réfléchir au support utilisé.

Les principes de l'atomic design

Au départ il y a l'atome, c'est l'élément inflexible d'une interface. Il n'a aucune utilité seul mais, il compose la base de tous les éléments de l'interface. (couleurs, typographie, boutons etc.)

Puis nous avons la molécule. Comme en science, elle forme un ensemble suite au regroupement des atomes. La réunion des atomes permet d'avoir une vision plus claire des éléments afin d'obtenir une meilleur adaptation sur toutes les tailles d'écran. Pour faire simple, il faut penser la molécules comme le composant d'une interface responsive, aussi elle détermine la création des éléments et leur affichage en fonction du support. (UI kit responsive)

L'organisme quand à lui est la combinaison de plusieurs molécules. L'objectif est de former un ensemble cohérent et fonctionnel. C'est à ce stade que l'on obtient le pattern d'une interface.

Le templates permet l'organisation des composants moléculaires dans l'espace dédié à un écran. C'est ici que l'on structure les organismes de manière à donner un sens à une interface.

Pour finir la page, est la finalité de la composition. Elle vise à rendre l'ensemble des éléments graphiques harmonieux. C'est une manière de visualiser avec du vrai contenu l'interface finale.

Ces étapes ne sont pas figées, il est possible durant la phase de templates ou bien de pages de revenir sur celle de l'atome ou de la molécule.

Le principe est donc de commencer à travailler sur les éléments clés pour définir au fur et à mesure l'intégralité d'une interface.

Pour conclure, l'atomic design permet d'avoir une vision de l'ensemble des éléments de votre projet quelque soit sont support. Elle permet aussi de gagner un temps considérable pour les équipes créatives et de développement.

La méthode Agile (Scrum) : l'union fait la force !

2017-09-05T12:55:00Z

Pourquoi parler de la méthode Agile (Scrum) ?

Il n'existe pas une méthode Agile, mais des méthodes Agile. Les méthodes proviennent du manifeste, Agile Manifesto. C'est un ensemble de 4 valeurs et de 12 principes qui découlent de ces 4 valeurs. On va s'intéresser ici à la méthode Agile (Scrum) qui est aujourd'hui la plus couramment utilisée dans les entreprises.

Les 4 valeurs des méthodes Agile :

– Les individus et leurs interactions sont plus importante que les processus et les outils
– Un logiciel qui fonctionne plus qu'une documentation exhaustive
– Collaborer avec les clients plutôt que d'entretenir des négociations contractuelles
– S'adapter au changement au lieu de rester sur le suivi d'un plan

Comment le Scrum incarne-t-il ces 4 valeurs ?

Scrum est un environnement de travail qui permet de gérer au mieux un projet. Il se repose sur la transparence par le développement d'un langage commun entre les différents acteurs d'un projet. L'inspection - elle - permet de prendre du recul sur l'avancement d'un projet. Ce que l'on a fait, ce qui est en cours, ce qu'il reste à faire. Ce pilier est généralement représenté par un tableau dont l'objectif est de vérifier les tâches du projet.

L'adaptabilité permet de rebondir à un problème grâce à la recherche de nouvelles solutions.

Le Scrum est basé sur une équipe autogérée et polyvalente. Cela permet d'éviter qu'une seule personne fasse le lien entre l'équipe et le client. Elle peut être composée de Product Owner, Scrum Master, UX/UI designer, Lead Dev et une équipe de développement.

L'organisation du Scrum se base sur un cycle qui s'appelle un sprint d'une durée moyenne de 1 à 3 semaines selon le projet.
Le backlog du produit qui est réalisé par le Product Owner est découpé par celui-ci en différentes tâches ou fonctionnalités. Elles sont ensuite compilées et priorisées dans un document qui s'appelle le product backlog qui est présenté à toute l'équipe. Celle-ci choisit les fonctionnalités les plus utiles au projet.
Une fois les fonctionnalités choisis, elles sont compilées dans le sprint backlog. C'est alors l'heure de commencer le sprint !

Durant le sprint, se déroule une mêlée quotidienne. Elle consiste à réaliser chaque matin une réunion de 5 à 10 minutes debout dans le but de définir ce qui a été réalisé le jour précédent, les éventuelles problématiques rencontrées et ce qu'il faut avancer pour le jour même. Ainsi chaque personne de l'équipe à un aperçu de l'avancement du projet et du travail de chacun.
Une fois le sprint terminé, le produit prototypé est livré.

À chaque fin d'un projet une revue de sprint (sprint review) est organisée dans le but d'évoquer l'avancement du projet, les erreurs rencontrées etc. On en revient à la valeur d'inspection qui a pour objectif d'apprendre de ses erreurs pour progresser davantage.

Cette méthode s'utilise de plus en plus dans les entreprises françaises, surtout dans les start-ups et les agences new-tech.

J'espère que cette vulgarisation vous a permis de comprendre les grands principes de cette méthode. C'est à vous de jouer maintenant !

Pour en savoir plus vous pouvez lire l'Agile Manifesto.

Nono le robot

Charles Stephan — 2017-08-29T15:30:48Z

Voir en ligne : Envie de le tester ?

Carte de Voeux Interactive

Charles Stephan — 2017-03-10T16:02:08Z

Design du site

Le retour des années 90

L'inspiration du design est venue de la série des années 90 "Parker Lewis ne perd jamais". Nous avons décidé d'aborder cette époque graphiquement très riche.

Synchronisation des montres

Les mini-jeux

Le LOL

Les blagues sonores

Voir en ligne : Découvrez ^la carte de voeux

Dossier de presse 2017

Charles Stephan — 2016-12-30T11:11:00Z

Digitalisation des contenus

Voir en ligne : Il ^faut le vivre

Souriants

Charles Stephan — 2016-12-07T18:33:24Z

Pas une journée sans sourires !
😀

Laboratoire

Charles Stephan — 2016-12-07T18:33:06Z

Laboratoire d'expériences, nous allouons du temps à la veille et à la recherche pour disposer et offrir de nouvelles trouvailles.

Testez l'expérience n°47