Parcours

Chris obtient un diplome supérieur dans une École d’art avec comme spécialités: Arts graphiques, céramique et multimédia (principalement avec Flash).
Rapidement, après son diplôme, le Web Design l’intéresse. Ses premiers sites sont réalisés avec WordPress. Naturellement c’est vers la logique XHTML/CSS qu’il se tournera aux dépens des sites en Flash.

Aujourd’hui, Chris Coyier s’occupe de Digging Into WordPress avec Jeff Star. C’est un site de ressources sur WordPress. Avec Jeff ont également édité un livre sur le même sujet. Quand vous achetez la version numérique, les mises à jour sont retransmises ad vitam aeternam.

Chris est aussi en poste à WooFoo, un service de formulaire en ligne. Enfin, c’est CSS tricks, son site personnel, qui a rendu Chris célèbre.

Si vous recevez l’article par email, la vidéo est ici.

CSS tricks

Ce site a commencé au moment ou Chris a démarré la profession. C’était une manière de s’améliorer en partageant sa connaissance.

CSS-Tricks, contrairement à ce qu’évoque le nom, ne concerne pas seulement les CSS. C’est une véritable encyclopédie sur de nombreux aspects de notre profession. Vous pouvez y trouver:

• des articles réguliers sur les nouvelles approches et tendances
• des modules, morceaux de code à télécharger avec une démonstration en ligne
• des tutoriaux vidéos à voir en ligne, dans iTunes (podcast) ou à télécharger
• un forum
• une bibliothèque de code organisée par catégories
• une bibliographie

Les sujets sont vastes comme vous pouvez le constater. Pour retrouver une information, le mieux est de passer par le moteur Google search, directement intégré au site.

Grandes lignes de l’interview

Plusieurs pistes sont abordées pendant cette interview. Pour ceux qui sont moins à l’aise avec l’anglais, voici les grandes lignes:

• WordPress et l’expérimentation sur un thème pour apprendre. Autrement dit, charger un thème et tester les changements sur les styles et les fonctions PHP
• le modèle de boîte (box model en anglais) dont voici un tutoriel en français. Tout fonctionne en terme de boîte et c’est capital dès que vous commencez à concevoir des maquettes avec des « floats ». Voici un tutoriel en français sur le positionnement CSS.
• la puissance des standards, leur respect dans la profession et l’énorme avantage de cette situation. Regardez les problèmes que l’on rencontre dans d’autres domaines avec les milles et unes normes incompatibles entre elles
• le choix du design au service de UX (User Experience ou expérience utilisateur) est plus important que la différence d’affichage d’un navigateur à l’autre
• Woofo et les choix HTML5 sont faits pour des raisons de compatibilité générale. Il s’agit de trouver le bon équilibre
• les Media query (article en français) et le choix des formats prioritaires en fonction des statistiques de visite du site. Dans une approche marketing, il s’agit de connaître son public et s’accorder
• Sass et Less et les variables CSS. D’après Chris, il faudra attendre au moins 2015 avant de l’utiliser directement en ligne. Pour l’instant, il s’agit d’utiliser les compilateurs cités précédemment pour générer une feuille de styles standard.
• participation aux nouveaux standards en s’inscrivant aux mailing lists et en justifiant ces besoins
• de la technologie flash vers le canvas HTML5
• librairie commune à tous les navigateurs comme standard en ligne et centralisé
• quelques trucs très utiles sur la spécificité en CSS

Quelques liens

• Je donne beaucoup de liens venant de Chris Coyier sur le Web Design dans cette partie de mon site.
• Un autre interview de Chris Coyier sur le site de sitepoint (août 2011). C’est un podcast audio et la transcription est donnée en fin d’article. Vous pouvez enfin souscrire au podcast de sitepoint par iTunes.

Mais avant d’arriver là, Dans ce premier épisode, nous allons aborder les bases de la forme (ou pinceau) dans Photoshop. Je parle de base, mais je vous réserve une petite surprise de taille dont bénéficie la dernière version de Photoshop (v.12 comprise dans la CS5).

Commencer avec l’outil Forme

La forme ou pinceau fait partie des éléments incontournables de la palette d’outils.

La palette Outils

Avant de commencer, ouvrir un fichier de 1000px par 1000px environ.

Ensuite, il s’agit de se rendre dans la palette d’outils, communément placée à gauche de votre interface (voir capture qui suit). Si cette palette n’apparaissait pas, l’activer dans le Menu Fenêtre > Outils.

Le raccourci pour accéder à la forme est B comme “Brush” (pinceau en anglais). A ce propos, je me demande pourquoi la traduction française utilise l’intitulé “forme” et non “pinceau”.

Une fois l’outil activé, vous pouvez avoir accès au sélecteur de forme prédéfinie, dans la barre du haut de l’interface (voir capture qui suit).

En utilisant le menu déroulant (voir capture ci-dessus), “Réinitialiser les formes…” de manière à utiliser les formes par défaut.

Nous allons dans cet exercice utiliser une forme basique: « Arrondi Net ».

Les couleurs

Dans le document ouvert, vous pouvez expérimenter le pinceau en commençant à dessiner. C’est la couleur de premier plan qui sera utilisée. Pour activer la couleur d’arrière-plan, il suffit d’appuyer sur la touche X. Celle-ci permet de passer d’un plan à l’autre. Pour changer la couleur d’un des plans, double cliquer dans l’icône de couleur (voir capture ci-dessous). Une nouvelle fenêtre, le sélecteur de couleur, s’ouvrira (voir même capture).

Si vous désirez extraire la couleur d’un autre élément de votre écran, c’est possible une fois le sélecteur et un document ouvert. Nous aborderons cette technique dans la vidéo présente à la fin du tutoriel. Décrire le processus par l’intermédiaire du texte serait un peu fastidieux.

L’épaisseur et la dureté

Quand vous utilisez la forme, vous pouvez modifier l’épaisseur et la dureté. Le moyen classique est de lancer la commande par le clic droit (voir la capture suivante). Nous verrons plus tard qu’il existe un moyen plus rapide depuis la version CS5. En attendant, vous pouvez utiliser ces deux réglages grâce à cette fenêtre.

L’épaisseur change la taille tandis que la dureté permet de changer les bords de la forme. Plus cette dernière est faible et plus les bords sont flous.

L’opacité

L’opacité de la forme agit sur l’intensité des coups de pinceau. Plus l’opacité est faible et plus vous devrez accumuler vos coups pour obtenir une opacité à 100%.

Cette fonctionnalité est très utile dès que vous travaillez avec des masques de fusion (un futur tutoriel sur le sujet est prévu).

Utilisation des raccourcis dans la CS5

Depuis la CS4 un nouveau raccourci est apparu pour les formes. Il est vraiment optimisé depuis la CS5.

Une fois le pinceau activé, pour changer très rapidement l’épaisseur et la dureté de votre forme, vous allez activer deux touches: ctrl + commande sur Mac (je n’ai pas pu tester sur PC).
En gardant ces deux touches enfoncées, si vous déplacez votre souris horizontalement, vous changez automatiquement l’épaisseur de la forme. Si vous la déplacez verticalement, vous agissez sur la dureté.
Quand vous utilisez ces raccourcis, une prévisualisation rouge vous indique l’aspect de la forme. Attention, si vous utilisez une forme personnalisée (un tutoriel est dans les cartons), cette fonctionnalité sera moins utile. Le rendu se base toujours sur la forme ronde.

Processus total en image

Si vous recevez l’article par email, la vidéo est ici.

Pour visionner cette vidéo en HD:

Lancer le mode plein écran

En mode plein écran, choisir le réglage HD

(Photo de JR par Antoine Levy)

A cette occasion, comme le veux la tradition TED, le nominé présente son voeux.
Le sujet est le suivant: « Comment l’Art peut-il changer le monde? » Et au terme de sa perfomance, le voeux de JR: « I wish for you to stand up for what you care about by participating in a global art project, and together we’ll turn the world…INSIDE OUT. » (« J’aimerez que vous preniez position pour ce qui vous tiens à coeur en participant à un projet artistique mondial, et ensemble nous mettrons le monde à l’envers »). Le site Inside Out supporte le projet. Je vous laisse découvrir sa portée en visionnant la vidéo.

JR, nous présente avec beaucoup d’humour son parcours, comment petit à petit, avec un bon sens poignant, il donne à voir au monde et sans condition. Dès le début JR travaille dans la rue en taguant. Et depuis il ne démors pas. La rue devient plus large; ses actions sont nombreuses, percutantes, démocratiquement médiatiques.

Si vous recevez l’article par email, la vidéo est ici

Une fois que la vidéo est lancée, il est possible d’activer les sous-titres français (voir image ci-dessous).

Merci à Jean-Christophe Carius de m’avoir indiqué que sur You Tube, les sous-titres français peuvent être activés en cliquant l’icone « cc », comme le montre l’image ci-dessus.
Au passage, si votre connexion internet le permet, passez en HD et en plein écran.

Si vous recevez l’article par email, la vidéo est ici

La démonstration de 14 minutes environ est très convaincante. Le public est invité à respirer par une paille en gesticulant de manière dynamique. C’est la notion de rareté, de concentration qui sont présentées. L’air en fait partie, l’argent aussi.
Pour présenter le système financier actuel, Jean-François Noubel utilise le Monopoly. Comme alternative à ce jeu monétaire, un projet de monnaie libre est en cours. Il s’agit de déconcentrer les réseaux financiers pour reconcentrer les réseaux de proximité.

Des méthodes simples d’accès sont en développement. Elles utilisent notamment les téléphones portables. Sur d’autres plans, plusieurs exemples de monnaies libres (par libre, entendez libres du papier monétaires) sont présentés. De la monnaie sociale japonaise aux « miles » des compagnies aériennes.

Si vous recevez cet article par email, la vidéo est ici

Si vous voulez approfondir sur le système financier, je vous conseille cet ancien article.

Viendront ensuite dans cette série:

• l’utilisation du module x-marks
• la synchronisation entre plusieurs ordinateurs
• la synchronisation entre plusieurs navigateurs
• la gestion des marque-pages dans Safari

A chaque fois, pour chaque tutoriel , je commencerai par un  exposé sommaire. À la fin de l’article, une vidéo HD permettra de voir le processus en direct.

1-Les éléments importants de la fenêtre

La « barre personnelle » est un élément important de Firefox. Elle s’affiche juste au dessous de la barre d’adresse (voir image ci-dessous).

Si la « Barre personnelle » ne s’affichait pas, l’activer grâce au Menu « Affichage » (voir image ci-dessous).

Sur le côté, après l’URL une petite étoile représente le marqueur de page.

2-Utilisation du marqueur de page

C’est la petite étoile à droite de l’adresse. Elle permet de marquer rapidement une page. Si vous cliquez une seule fois dessus, l’adresse est ajoutée automatiquement dans un dossier « Marque-pages non classés ». Firefox crée automatiquement ce dossier pour vous.
Cette fonctionnalité est très utile quand il s’agit de conserver rapidement une série de sites que nous désirons approfondir plus tard.

Je vous montrerai par la suite, dans la vidéo, où retrouver ces marque-pages. En attendant, essayez de visiter plusieurs sites et de cliquer une seule fois dans l’étoile. À ce moment-là, son aspect se modifie. Le contenu de l’étoile se remplit de bleu.

3-Processus en vidéo

Si vous recevez cet article par email, la vidéo est ici

Pour visionner cette vidéo en HD:

Lancer le mode plein écran

En mode plein écran, choisir le réglage HD

A suivre….

Toute remarque sur le processus de présentation est la bienvenue. Merci d’utiliser les commentaires à cette fin.

• Adobe et Flash
• Google
• iPad
• iPhone 4 (sortie prévue en juin)
• ….

Si vous recevez cet article par email, la vidéo est ici

Je ne peux m’empêcher de repenser aux animations que mon Grand Père réalisait pour tous les débuts de ces films de voyage en  super 8. Celles-ci illustraient le parcours effectué durant le périple; une petite voiture circulait sur une carte illustrée. Étant môme, j’étais très impressionné.

Si vous recevez cet article par email, la vidéo est ici.

Sur le site du québécois, Benoît Descary,  vous pourrez suivre en temps réel la plupart des évènements « LeWeb09″. L’article qui annonce cet évènement est ici.

Si vous receviez cet article par email, la vidéo est ici