Retour vers la page Formations avec la liste de tous les tutos.
Pour rester informé, abonnez-vous!

Tous les « Tuto »

Google Documents :: régler les fonctions avancées de partage

Dans ce rapide tutoriel sur les Google Apps,  je vous montrerai comment utiliser les fonctions poussées de partage pour les documents Google. Elles permettront à n’importe quel utilisateur (connecté ou non) de pouvoir modifier votre document.

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.

capture de Bouton Partager

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.

capture du lien: Modifier les options de partage

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).

capture de: option pour les actions

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
Une fois votre réglage terminé, vous pouvez cliquer sur « Enregistrer« . Nous revenons alors à la fenêtre précédente  (voir image ci-dessous) avec en prime un lien unique. C’est ce dernier qui donnera accès au document ainsi partagé.
capture du Lien unique

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.

Article / Page: Google Documents :: régler les fonctions avancées de partage | retour vers l'accueil, sur le site de Grégoire Noyelle ( WebDesigner Développeur WordPress freelance à Paris :: Web Designer )

Photoshop CS5 :: présentation des formes (pinceaux)

Voici le début d’une série de tutoriels sur les Formes dans Photoshop. Ce sont des éléments que j’enseigne régulièrement à l’école des Gobelins. Et au regard de l’enthousiasme que génère ce sujet, je me suis dit qu’il serait utile de le partager avec une plus grande audience. Mon objectif est de vous montrer au final comme utiliser les formes dynamiques dans Photoshop.

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.

capture pour Palette outil et pinceau

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).

palette pour Réinitialiser les formes

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).

palette pour Sélecteur de couleur

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.

capture pour taille et dureté

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%.

capture pour Modifier l'opacité

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

image pour lancer le plein écran

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

image pour montrer le réglage hd

Article / Page: Photoshop CS5 :: présentation des formes (pinceaux) | retour vers l'accueil, sur le site de Grégoire Noyelle ( WebDesigner Développeur WordPress freelance à Paris :: Web Designer )

WordPress :: MarkDown et la mobilité dans l’édition

Avec l’arrivée des smartphones et tablettes, le langage MarkDown est sur les devants de la scène.
Dans ce tutoriel, je vous montrerai comment mettre en place le plus gros de vos articles WordPress n’importe où avec votre iPhone. Je ne parlerai pas des nombreuses applications Android compatibles Markdown. Pour ça les commentaires sont ouverts.

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.

[Lire plus...]

Article / Page: WordPress :: MarkDown et la mobilité dans l’édition | retour vers l'accueil, sur le site de Grégoire Noyelle ( WebDesigner Développeur WordPress freelance à Paris :: Web Designer )

WordPress :: Gestion des Menus depuis la version 3

Depuis la version 3 de WordPress, la gestion des menus s’est énormément simplifiée. Ce qu’il s’agissait de programmer à l’avance dans le thème est désormais modifiable par l’administrateur du site quand le thème le supporte.

Dans ce tutoriel nous verrons dans un premier temps comment créer et gérer les menus et, dans un deuxième temps, comment intégrer les menus dans les différentes zones de votre site. Au final, comme extra, je vous parlerai de l’utilisation du plug-in “Genesis Simple Sidebar

Création et gestion des menus

Une fois connecté à votre site, sur le côté, dans la partie “Apparence”, vous trouverez un lien vers vos “Menus”.

Présentation de l’interface

L’interface de la page “Menus” se présente en deux grandes parties. La zone droite et la zone gauche. En haut à droite, avec “Options de l’écran”, vous pourrez ajouter de nouvelles options, valables dans les deux parties.

Nous allons commencer par la zone droite pour juste créer notre premier menu. Cette action permettra d’ajouter le contenu qui se gère par la zone gauche. Entrez le “Nom du menu” et cliquez sur “Enregistrer le menu”. Du coup, la zone gauche ne sera plus grisée et vous pourrez l’utiliser.

[Lire plus...]

Article / Page: WordPress :: Gestion des Menus depuis la version 3 | retour vers l'accueil, sur le site de Grégoire Noyelle ( WebDesigner Développeur WordPress freelance à Paris :: Web Designer )

WordPress :: Organiser les « Custom Post Type » comme des dossiers

Dans ce tutoriel, je ferai référence à un projet web en cours où il s’agissait de créer une série de FAQ sous la forme de “Custom Post Type”. Le challenge consistait à rendre l’organisation des questions/réponses facile à classer dans l’administration de WordPress.

Je me suis donc arrangé pour classer les éléments par dossier en utilisant une hiérarchie de type page et deux plug-ins pour réorganiser plus facilement l’ordre des FAQ.

Evidemment, il est possible d’appliquer ces principes à d’autres types de contenus hiérarchiques

Mise en place

Outils utilisés

[Lire plus...]

Article / Page: WordPress :: Organiser les « Custom Post Type » comme des dossiers | retour vers l'accueil, sur le site de Grégoire Noyelle ( WebDesigner Développeur WordPress freelance à Paris :: Web Designer )

WordPress :: Intégrer une galerie Photo

Dans ce tutoriel nous verrons comment fonctionne la galerie d’images WordPress. Toutes les étapes décrites ici sont valables aussi bien pour les articles que pour les pages. Par commodité, dans ce tutoriel,  je ne citerai que les « articles » à chaque fois.

Série d’images liées à un article ou à une page

Dans WordPress, à partir du moment où vous avez plusieurs images liées à un article, vous pouvez directement afficher une galerie photographique avec les vignettes des images les unes à côté des autres. Quand, je dis que les images sont liées, cela sous-entend que vous avez ajouté plusieurs images dans le contenu de l’article ou simplement que vous avez chargé plusieurs images à partir d’un article, sans pour autant les rendre visibles dans le contenu.

Essayez d’ajouter une image dans un article, dans lequel il existe au moins deux photos, à l’aide de l’icône « Ajouter une image« . Dans la pop-up qui apparaît, en sélectionnant l’onglet « Galerie », vous avez accès à toutes les images qui sont liées à votre article (voir image « Ajouter une image » ci-dessous).

Capture de la fenêtre insertion d'image

[Lire plus...]

Article / Page: WordPress :: Intégrer une galerie Photo | retour vers l'accueil, sur le site de Grégoire Noyelle ( WebDesigner Développeur WordPress freelance à Paris :: Web Designer )

WordPress :: Gestion basique des Images

Dans ce tutoriel nous allons voir comment intégrer une image a du contenu déjà existant. Le procédé est le même  pour les articles ou les pages.
Attention: Comme tout fichier sur le Web, il est important de respecter cette nomenclature dans le nom des images (ou des fichiers):

  • pas d’espace
  • pas de signe bizarre (!,?§….) à part le « - » et le « _ »
  • pas de lettres accentuées

Par contre, le titre de l’image ou du fichier comme nous le verrons accepte toutes ces restrictions.

[Lire plus...]

Article / Page: WordPress :: Gestion basique des Images | retour vers l'accueil, sur le site de Grégoire Noyelle ( WebDesigner Développeur WordPress freelance à Paris :: Web Designer )

WordPress :: Coller du texte Word dans les articles ou les pages

Dans ce tutoriel sur WordPress, nous allons voir comment coller du texte Word directement dans un article ou une page WordPress. Le processus est le même dans les deux cas.

Formatage du texte Word

Ce logiciel génère beaucoup de marqueurs propres à son fonctionnement qui rendent le texte copier (dans votre presse-papier) difficilement utilisable dans le contenu de votre site. Si vous le coller le texte tel quel, vous risquez de voir des bizarreries apparaître au niveau de la mise en forme de votre article.

Gardez à l’esprit que les styles de votre site sont normalement homogène, car ils sont centralisés dans ce que nous appelons les feuilles de styles (ou CSS pour Cascading Style Sheet). Du coup, il est préférable de ne pas ajouter des marqueurs Word qui vont dérégler cette centralisation.

[Lire plus...]

Article / Page: WordPress :: Coller du texte Word dans les articles ou les pages | retour vers l'accueil, sur le site de Grégoire Noyelle ( WebDesigner Développeur WordPress freelance à Paris :: Web Designer )

WordPress :: Gestion basique des articles

Attention, il est préférable de voir ce tutoriel sur l’édition des Pages avant celui-ci. De nombreuses options sont similaires entre l’édition des Pages et des Articles.

La notion d’Article dans un site dynamique

Les articles par rapport aux pages se gèrent de manière différente dans un site dynamique de type CMS. Ce sont les catégories et les mots-clefs qui permettent les classements. Dans ce cadre, les catégories supportent une arborescence, les mots-clefs non. Enfin, selon la configuration de votre thème, des raccourcis peuvent être installés pour s’afficher à certains endroits: les derniers articles de la catégorie « WordPress Tuto » ou les derniers articles de la catégorie « WordPress Plugin ».

Enfin, sachez que les moteurs de recherches sont gourmands d’articles. Ce sont les nouvelles fraîches, ce qui fait que votre site est vivant. Souvent, je recommande, quel que soit le projet de Site Internet, d’ajouter une partie « Blog » ou « News » afin d’améliorer naturellement le référencement. Blog est juste le mot générique pour décrire le système qui permet la gestion des articles. Il y a souvent un contre-sens par rapport à ce terme. Souvent j’entends: « Je ne veux pas que mon site fasse Blog ». Mais le Blog est l’expression la plus simple de ce que représente un site dynamique de type CMS et quasiment tous les sites actuels reposent sur ce type de structure.

[Lire plus...]

Article / Page: WordPress :: Gestion basique des articles | retour vers l'accueil, sur le site de Grégoire Noyelle ( WebDesigner Développeur WordPress freelance à Paris :: Web Designer )

WordPress :: Gestion basique des pages

Ajouter une nouvelle page

Sur le tableau de bord, vous avez un accès direct pour créer une nouvelle page en cliquant sur « Ajouter« . Si vous vouliez modifier une page déjà éditée il suffirait de cliquer sur « Page » pour afficher toute la liste des pages et sur le titre pour modifier son contenu.

capture d'écran de l'interface

Une fois la page ouverte, tous les outils pour la gestion de vos pages / articles s’affichent (voir image ci-dessous. En cliquant sur l’image, vous pouvez l’agrandir).

capture de l'interface de page

[Lire plus...]

Article / Page: WordPress :: Gestion basique des pages | retour vers l'accueil, sur le site de Grégoire Noyelle ( WebDesigner Développeur WordPress freelance à Paris :: Web Designer )