Sometimes we don't want turn on the TV. We just want something else, another media. For that, Internet is great.

And when we want entertainement, we're going to youtube, daylimotion and we're letting us flow around the related videos.

But sometimes, we want still something else. Some video less OMG lol wtf. More artistic. More poetic maybe. For that, we can browse to vimeo. No need to search for a long time, the only video in the homepage are a real gold mine. I don't know if the HD make a lot, but these videos transport more emotion than the other videos we used to see.

Small selection of my vimeo session of this evenning (To watch the video in HD, you have to go to the vimeo page by using the corresponding link):

First an interssant effect and well done:

Then an other great idea:

Let's change of register with a weird guy we're following in his parties (at Los Angeles if I saw good)

Calmer with some classic music and a video format very atypic, which is fitting exactly with the need:

Shifting the scene and the music, direction South Africa:

Overall I really liked this video:

A little look at project Pedal to watch the other episodes could be a good idea. 

Where did all these creative people express themselves before the sharing video website?..

Version française de ce billet

Il y a des fois où l'on pas envie d'allumer la télé. On a envie d'autre chose, d'un autre média. Pour ça, internet est très bien.

Et quand on veut du divertissement, on se dirige vers youtube, daylimotion et on se laisse porter au grès des vidéos liées.

Mais parfois, on veut autre chose. Des vidéos moins kikoo lol mdr. Un peu plus artistique. Plus poétique peut-être. Pour ça, on se tourne vers vimeo. Pas besoin de chercher bien longtemps, les seules vidéos en page d'accueil sont une vrai mine d'or. Je ne sais pas si la HD y est pour beaucoup, mais ces vidéos transportent beaucoup plus d'émotions que les autres vidéos qu'on a l'habitude de voir.

Petite sélection de ma séance vimeo de ce soir (Pour voir les vidéos en HD, vous devrez vous rendre sur vimeo en cliquant sur les liens correspondant) :

Tout d'abord un effet intéressant et bien réalisé :

Puis une autre idée sympathique :

Puis changement de registre avec un drôle de bonhomme que l'on suit dans ses soirées (à Los Angeles si j'ai bien vu)

Puis plus calme avec du classique et un format de vidéo très atypique, mais qui correspond tout à fait au besoin :

Changement de décor et de musique, direction l'Afrique du Sud :

Mais j'ai eu un group coup de coeur pour cette vidéo :

Un petit tour sur project Pedal pour voir les autres épisodes ne vous fera pas de mal. 

A se demander où s'exprimait tous ces créatifs avant les sites de partage de vidéo...

English Version of this post

2 weeks since my last English post, 1 month before my real new post (the last was only translation of older posts). During this time I was busy to translate these posts, busy at work in Fluidesign, busy to live in LA.

During the last days, I developed my first own jQuery plugin: nyroModal.

Why a new plugin of this kind when there is already too many?

4 answers:

• There is no too much using jQuery, most of them use Prototype/Scriptaculous
• Most of them aren't too customizable as expected
• When you find a bug, it's difficult to contact the developer -who often ask some Paypal donations- or understand the code to fix it
• Because it's still pleasant for his ego to realize the things by himself

My plugin provides all the features I saw in the differents plugins I tried. In bulk:

• Ajax Request
• Display an hidden DOM element
• Image
• Gallery
• Form
• Iframe

But I also added some stuff I don't believe see elsewhere, or not enough:

• You can target the content inside an Ajax request or a form
• Forms works with a file upload
• Background color is modifiable dynamically
• Display an error message if needed
• Ability to resize from an Ajax Request

Moreover I took care about the ability to customize the modal, to allow everybody to change the way the elements are animated. There is alos many possible callbacks to done every JavaScript action tou need. Thus every animation function could be fully rewritten and everything is documented: all available settings and the full modal process to allow each developer to understand how it works et to do what ever he want. I probably create more callback than necessary but better more than not enough!

And yes, it's already the 1.1 version because I showed it to my Fluidesign colleagues and all told me the transition -especially for the gallery- didn't look so good. So I created 2 new animations callback the same evening to get round of that.

• Project Page (en)
• Project Page (fr)
• Google Code Page
• jQuery Plugin Page

If you have any suggestions, bug, improvement idea or if you use it, don't hesitate to let a comment. I'll be glad to answer it.

PS : I know, I didn't search too far for the name...

Version française de ce billet

Bientôt un mois que je n'ai pas publié de billet en français. Occupé à traduire des billets en anglais, occupé à développer chez Fluidesign, occupé à vivre à Los Angeles.

Et puis ces derniers temps, je me suis aussi attelé à développer mon premier plugin jQuery : nyroModal.

Alors pourquoi un nouveau plugin de ce genre alors qu'il en existe déjà tant ?

4 réponses :

• Il n'en existe pas tant que ça sous jQuery, la plupart étant sur Prototype/Scriptaculous
• La plupart ne sont pas autant personnalisable qu'il ne le laisse entendre
• Lorsqu'on trouve un bug, il est difficile de contacter le développeur (qui demande souvent un peu de Paypal) ou d'appréhender le code d'un autre pour le corriger
• Parce qu'il est toujours plaisant pour son égo de réaliser les choses soi-même.

Mon plugin reprend donc l'ensemble des fonctionnalités que j'ai pu voir dans les différents plugins que j'ai testés. En vrac :

• Requête Ajax
• Affichage d'un élément du DOM caché
• Image
• Galerie
• Formulaire
• Iframe

Mais j'ai aussi ajoutés des choses que je ne crois pas avoir vu ailleurs, ou pas assez souvent :

• Il est possible de cibler l'élément affiché au sein d'une requête Ajax ou d'un formulaire
• Les formulaires fonctionnent même avec un upload de fichiers
• La couleur de fond est paramétrable dynamiquement
• Affichage d'un message d'erreur si besoin
• Possibilté de modifier la taille de la modale depuis une requête Ajax

De plus, j'ai beaucoup prêté attention à la personnalisation, pour permettre à chacun de modifier la façon dont sont animés les éléments. Il y a aussi de nombreux callback possible pour effectuer toutes les actions JavaScript dont vous avez besoin. Ainsi, toutes les fonctions d'animations sont entièrement redéfinissable et tout est documenté : l'ensemble des paramètres disponibles et le processus complet de la modale pour permettre à toute personne de comprendre comment il fonctionne et d'en faire ce qu'il en veut. J'ai sans doute créer plus de callback que nécessaire, mais de cette façon tout est possible.

Et oui, on en est déjà à la version 1.1 puisque je l'ai montré à mes collègues de bureau et tous m'ont dit que les transitions (pour la gallerie notamment) n'était vraiment pas bon. J'ai donc créer deux nouvelles fonctions d'animation le soir même pour pallier à cela.

• La page du projet (en)
• La page du projet (fr)
• La page google code du projet
• La page dans le répertoire des plugins jQuery

Si vous avez une suggestion, un bug, une idée d'amélioration ou si l'utiliser sur votre site, n'hésitez pas à laisser un commentaire. J'y répondrai avec plaisir.

PS : hé oui, je ne suis pas allé chercher bien loin pour le nom...

English version of this post

Si vous réaliser l'intégration de sites Web, vous vous êtes surement déjà posé la question de quelle propriété allait être appliqué, selon quel ordre d'importance.

Sitepoint a écrit un article pour vous aidé dans la compréhension de ce mécanisme.

Je vous traduit ici le principe de base, en 5 étapes (par déclaration, on entend définition d'une propriété à appliquer comme la couleur du texte) :

1. Si une déclaration est faite dans l'attribut style de l'élément, (un style en ligne, ex style="color: red;"), elle a la plus grande spécificité. S'il n'y a aucune déclaration en ligne, passer à l'étape 2.
2. Compter le nombre de sélecteur d'ID (#monId). La déclaration avec le plus grand nombre est la plus spécifique. Si plusieurs déclarations ont le même nombre de sélecteur d'ID (ou 0), passez à l'étape 3.
3. Compter le nombre de sélecteur de classes (.maClass), de sélecteur d'attributs ([type="submit"]) et de pseudo classes (:hover). La déclaration avec le plus grand nombre est la plus spécifique. Si plusieurs déclarations ont le même nombre (ou 0), passez à l'étape 4.
4. Compter le nombre de sélecteur de type (div) et de pseudo éléments (:first-letter). La déclaration avec le plus grand nombre est la plus spécifique. Si plusieurs déclarations ont le même nombre (ou 0), passez à l'étape 5.
5. Si deux ou plusieurs sélecteur ont la même spécificité, on applique la dernière règles trouvées.

Bien sûr, à chaque étape, on ne garde que ceux qui arrivent en tête du classement.

Puis l'article va plus loin en indiquant la méthode de calcul et une représentation en matrice, pour finir sur la gestion des éléments un peu plus poussé comme le sélecteur global * ou d'élément enfant avec >.

Un article à lire pour être conscient de comment fonctionne réellement les CSS, et s'éviter quelques maux de têtes dans certains cas...

Je suis tombé complètement par hasard sur ce site et j'ai apprécié tout ce qui y est dit, et la façon dont c'est présenter.

Nos amis graphistes apprécieront les transitions et les jeux avec le texte, les couleurs et les contrastes changeant très vite pour mieux relever le sens du propos.

Dommage que la version française soit traduite avec les pieds (ou par un logiciel/site, ce qui revient au même...)

Et faites attention à vos yeux : à la fin de l'animation vous serez redirigé sur une page d'inscription à leur newsletter. Le passage du fond noir au fond blanc peut surprendre...

Il m'est arrivé à plusieurs reprises de parler de Vente-Privée, ce magasin en ligne qui fait des chiffres d'affaires énormes en vendant des habits de fins de séries (d'où le nom...).

Et leurs présentations des ventes sont toujours de mieux en mieux. La dernière en date pour Reebok ne présente pas simplement et bêtement les produits, mais c'est un véritable court-métrage (vraiment court) d'un boxeur et son entraîneur.

J'ai un peu de mal avec la voix de l'entra?neur. Elle ne me paraît pas à 100% réel. Mais pour le reste, wahou !

Ils sont passé un cran au dessus là ! On pourrait faire passer ça pour la bande-annonce d'un film ou dans les pubs TV. D'ailleurs je les vois bien se lancer dans le créneau dans les années à venir. Ils ont les capacités et les moyens pour ça.

Au passage, ils ont m?me sortis un CD, VP Sound, qui reprend les univers sonore créées pour ces présentations en les allongeant et ajoutant quelques voix parfois. A peine la première version de sortie qu'ils travaillent déjà sur la prochaine...

Et pour ce CD, quoi de plus naturel pour eux de réaliser un clip :