• Client: Air Liquide et Gesco
• Version: 1
• Caractéristique: Interface pour une mediathèque visible en interne. Le back office est réalisé par la société Gesco
• Réalisation: Création de l’interface complète.

Au moment du lancement de Google Document et jusqu’à il y a 2 ans environ, il était nécessaire d’avoir un compte gmail ou Google Apps pour accéder aux documents Google en ligne. Ce n’est plus le cas. Désormais et vous pouvez partager votre document en ligne avec qui vous souhaitez. La ou les personnes n’ont plus besoin d’être connectées du tout.

Accéder aux fonctions de partage

Une fois votre document ouvert (ici un document texte, voir image ci-dessous). Vous avez sur la droite un bouton « Partage« . En cliquant dessus, vous accédez aux options.

Une nouvelle fenêtre s’ouvre (voir image ci-dessous). Elle présente les options de partage actuelles et le lien « Modifier » donne accès aux paramètres possibles.

Régler le partage du document

En cliquant sur « Modifier« , une autre fenêtre s’ouvre (oui je sais…). Et cette fois, nous y sommes vous pouvez rendre votre document accessible à tous (voir image qui suit).

Ici j’ai choisi « Tous les utilisateurs disposant du lien« . Plus bas, un menu déroulant donne a ce futur utilisateur:

• Modification autorisée
• Commentaire autorisé
• Consultation autorisée

Le process en image

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

Voici en image le résumé de ce que nous venons de voir. La vidéo est enregistrée en HD, n’hésitez donc pas à la visionner en plein écran.

website // clic

• Client: Sophie Badens, photographe à Paris
• Version: 2.0 (Février 2011)
• Caractéristique: Construit sur une structure Genesis.
• Réalisation: Création de l’interface complète: fonctionnalité et montage du thème.

Je lis beaucoup d’informations sur mon iPhone par contre je ne suis pas fan de l’application dédiée pour iPhone qui est sortie fin décembre 2011. Du coup, je préfère surfer directement dans le navigateur. Et même si le site Mediapart « mobile » est bien optimisé pour les smartphones, je trouve la navigation par page moins pratique (voir capture qui suit).
En faisant quelques tests, j’ai remarqué que Safari, le navigateur par défaut sur iPhone avec une icône « Lecteur » (voir capture qui suit) qui permettait d’afficher le contenu d’un article dépourvu de tout autre élément que le texte.

En cliquant sur ce dernier, une nouvelle fenêtre apparaît et comme par magie, il est possible d’accéder à toutes les pages d’une seule traite sans avoir besoin d’utiliser les numéros qui permettent de passer d’une page à l’autre.

Ici, une capture de cette nouvelle fenêtre. La taille du texte est modifiable en cliquant sur les lettres en haut à gauche.

Et une autre capture qui montre le passage d’une page à l’autre. En cliquant sur « Terminé » vous quittez ce mode d’affichage.

Bonne  lecture.

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

website // clic

• Client: Atelier de Sèvres
• Caractéristique: Construit sur une structure Genesis.
• Réalisation: Mise en place de la plate-forme Multisite WordPress. Tous les étudiants peuvent réaliser facilement leur propre portfolio. Création de l’interface complète en collaboration avec Agathe Hoffmann pour la partie graphique.

Mon père a acheté son premier Apple en 1981. Depuis le début, le logo à la pomme m’a fasciné. Steve m’a vraiment inspiré. Je m’amusais en disant à mon épouse que j’avais une messe ce soir, à chaque fois qu’une nouvelle Keynote était diffusée.
Hier, pour la première fois depuis longtemps, la Keynote présentait les nouveautés sans la présence de Steve. Et la même journée, Steve nous quittait. Apple était sa vie, sa raison d’être.  Merci infiniment Steve

Stay hungry, stay foolish

website // clic

• Client: Émilie di Nunzio Joly
• Caractéristique: Construit sur une structure Genesis.
• Réalisation: Création de l’interface complète: fonctionnalité et montage du thème.

MarkDown

Qu’est-ce que MarkDown?

Markdown a été créé en 2004 par John Gruber et Aaron Swartz. Le but initial était de créer un outil de simplification pour éditer sur le web et générer du HTML. Un autre exemple de ce type de publication est le système Wiki dont le représentant le plus connu est Wikipedia. En résumé, si je devais lister les avantages de Markdown, je garderais:

• le texte reste bien lisible tout en pouvant être utilisé sur le Web
• les options d’exportations permettent de générer un texte avec sa sémantique HTML
• l’édition peut se faire avec n’importe quel éditeur de texte

Tous ces points donnent un nouvel élan avec l’édition sur iOS. Il est alors possible, même sur un iPhone de générer facilement du code HTML pour alimenter du contenu. Ainsi, il est possible sur ce smartphone de créer un email avec une vraie mise en forme: gras, italique, titrages, listes, liens…
Par contre, Markdown est moins adapté pour construire des pages Web et ce n’est pas son but. C’est avant tout un outil qui fonctionne à merveille avec une structure préétablie comme le email ou un CMS de type WordPress.

Ressources en Anglais

Sur le site de John Gruber, Daring Faringball, vous avez accès à plusieurs ressources en anglais:

• introduction
• syntaxe de base
• syntaxe en détail
• Dingus (éditeur/convertisseur Markdown en temps réel)

D’autres ressources:

• Fichier PDF avec la syntaxe complète Par Mark Boszko
• Why Markdown par Brett Terpstra (créateur de l’application Marked)
• Mardown Service Tools, par Brett Terpstra, ajoute des services directement intégrés au menu contextuels de OSX
• Créer des références de liens par David Sparks
• Les Bases de Markdown par Ryan Irelan
• Bloguer avec Markdown par Chris Coyer

Ressources en Français

Il existe moins de ressources en français. En voici une sélection. Si vous êtes moins à l’aise avec l’anglais, je vous conseille Google traduction; c’est une traduction automatique certes, mais c’est amplement suffisant pour comprendre le sens général.

• Guide Complet Mardown par Michel Fortin
• Tutoriel sur CSS4 design par Bruno Bichet sur le plugin Markdown on save
• Markdow sur Wikipedia

Synchroniser avec iOS

La synchronisation entre le iPhone et l’ordinateur sera effectuée avec DropBox.

Je me concentre ici sur les applications mobiles iPhone. Beaucoup d’applications sont compatibles iPad. Il suffit de taper “Markdown” dans le apps Store. Beaucoup d’outils similaires existent sur Android merci de partager votre expérience avec les commentaires.

DropBox

DropBox est un outil de partage de fichiers multiplateforme (Mac, PC, Linux). Les documents sont stockés en ligne et sur vos machines. Il est gratuit jusqu’à 2Go.

Une fois votre compte en ligne créé, vous téléchargez l’application sur votre ordinateur. Au premier lancement, un guidera pour les fonctions principales.

Une fois le lien fait avec votre compte en ligne, la synchronisation sera effective dans les deux sens et ce avec autant d’ordinateurs que vous le souhaitez à condition de respecter:

• avoir installé DropBox
• avoir fait la connexion avec le même compte en ligne
• placer les fichiers à synchroniser dans le dossier parent ou enfant de Dropbox

Différentes petites icônes vous indiquent l’état de la synchronisation.

Note: Apple a annoncé en juin dernier la sortie de iCloud en septembre 2011. Ce service sera un super DropBox.

Applications tierces sur iPhone

Les applications sur iOS, compatibles Markdown et DropBox sont nombreuses. Je n’en citerai que quelques-unes.

• Notesy que j’utilise quotidiennement et notamment pour écrire cet article. Cette application possède beaucoup d’options avancées.
• Elements: Presque aussi complète que Notesy. Les différentes exportations possibles sont bien pensées.
• Note & Share: Autre application recommandée que je n’ai pas encore eu l’occasion de tester.

Vous l’avez compris, c’est Notesy que j’utiliserai pour ce tutoriel. Voici quelques captures d’écran de cette application.
Édition (à gauche) et prévisualisation (à droite) d’un texte Markdown avec mes styles personnels (voir image ci-dessous).

Réglages des styles CSS dans Notesy en rédigeant ses propres CSS (voir image ci-dessous).

Applications tierces sur Mac

Les applications qui servaient à éditer le code sur les ordinateurs furent en toute logique les premières à pouvoir générer du code à partir de Markdown. BBEdit sur Mac fut sans doute la première. Comme John Gruber, avant de devenir indépendant, travaillait chez Bare Bones Software, compagnie éditrice de ce logiciel, tout devient plus clair.

Dans le même registre, des plug-ins existent pour d’autres éditeurs (PC ou Mac):

• Plug-in pour Coda (Mac)
• Plug-in pour TexMate (Mac)
• Markdown et Notepad++(PC)

Vous pouvez également écrire en Mardown avec votre éditeur de texte. Préférez des logiciels avec le moins de mises en forme possible: TextEdit sur Mac ou Notepad sur PC. Vous pourrez visualiser et générer le code HTML en ligne avec Dingus.

Ces applications pour ordinateur, contrairement aux applications iOS, ne nécessitent pas de compatibilités particulières avec Dropbox. La seule chose à respecter est de placer les fichiers dans le dossier parent ou enfant de Dropbox.

Enfin, depuis la renaissance de Markdown, de nouvelles applications ont vu le jour. Elles se distinguent des autres éditeurs de texte par la sobriété de leur ergonomie. Certaines simplifient l’écriture Markdown, quelques-unes sa visualisation, son exportation et d’autres exécutent toutes ces tâches. Et comme les applications de votre ordinateur dont je vous parlais, elles fonctionnent parfaitement avec DropBox.

Voici un choix de quelques-unes des ces applications:

• ByWord: qui permet d’éditer en Markdown et de prévisualiser la page HTML. (Mac 7,99€)
• Marked: qui ne sert qu’à la prévisualisation en HTML. Vous éditez dans n’importe que éditeur et la mise à jour se fait automatiquement. Vous pouvez même ajouter vos propres styles CSS. (Mac 2,39€)
• Macchiato: éditeur de texte et Markdown (Mac 15,99€)
• Markdown Pro: éditeur Markdown avec fenêtre simultanée: markdown et rendu (Mac 7,99€)
• Notational Velocity: application gratuite pour éditer sur Mac
• writemonkey: application gratuite PC
• codeboje application gratuite PC

Intégration dans WordPress

Avec tous ces outils, je travaille souvent sur mes articles en déplacement et je complète certains éléments sur l’ordinateur. En arrière-plan, DropBox synchronise tout. Une fois votre article finalisé, vous pouvez l’intégrer dans WordPress. Soit à partir de votre ordinateur, soit en unissant l’application WorsPress dédiée pour iOS (iPhone et iPad).

Intégration à partir de l’ordinateur

Il s’agit d’obtenir le code HTML que peut générer Markdown. Pour ce faire vous avez plusieurs possibilités:

• utililiser Dropbox avec une des applications compatibles (voir la partie : synchroniser avec iOS) qui pourra générer automatiquement le HTML. Coller ce contenu dans la partie Code de votre article
• exporter le code Markdown par email à partir du iPhone (comme le fait Notesy) et utiliser Dingus pour générer le HTML à partir de contenu en Markdown. Et le coller dans la partie “code” de WordPress.
• en copier/coller envoyer le texte Markdown et le coller dans la partie WYSIWYG de WordPress en utilisant le plugin Mardown On Save (par Mark Jaquith) ou Mardown for WordPress and bbPress par Mitcho Erlewine qui générent automatiquement le HTML directement à partir d’une syntaxe Markdown.

Intégration avec l’application iPhone

Il est possible bien sûr d’éditer la plupart de son article avec l’application par défaut. Par contre plusieurs obstacles la rendent difficile à utiliser:

• il faut une connexion internet
• l’édition avancée est ardu. Pour les liens, listes, titrages…
• l’édition est moins spontanée sur l’ordinateur

Toutefois il est possible d’ajouter des médias. Du coup, nous verrons comment combiner les deux.

Notesy permet de copier dans le presse-papier le code HTML généré par Markdown si vous activez « Copy on Preview » dans « Settings ».

Il s’agit ensuite de coller ce code directement dans l’application iPhone. Attention à bien enlever le code superflu, utiliser pour la prévisualisation:

• au début, enlever la partie du "<html>" au « <body>" inclus
• à la fin, enlever la partie du « </html>" au « </body>" inclus

Il serait très intéressant qu’Automattic, éditeur de l’application iPhone, s’inspire de ces nouveaux développements de Markdown pour l’intégrer nativement dans une prochaine version. Celle-ci deviendrait le coeur de la publication.

Enjoy!

Note (évidente cette fois):
Article initialement écrit avec le langage Mardown; sur le iPhone avec Notesy et sur le Mac avec Bywords. La synchronisation est faite avec DropBox. Au final, le tout est exporté en HTML vers l’interface de WordPress. C’est également dans WordPress que j’ajoute les images ou les médias.