Le blog Gconnexions présente tous les éléments qui me touchent sur la toile. C'est ce qui nourrit une partie de ma culture.
Les tutoriels plus techniques ( WordPress ...) sont dans la partie Formations. Pour rester informé, abonnez-vous!

Lire Mediapart sur le iPhone

Je suis abonné à Mediapart. Soutenir ce journal en ligne me paraît important. Il est complètement indépendant, dépourvu de publicité et soutenu par ses abonnés.
Il a été créé par quatre journalistes: François Bonnet, Gérard Desportes, Laurent Mauduit et Edwy Plenel. Pour avoir le détail du projet Mediapart, je vous recommande ce PDF.

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.

capture de la Fenêtre Safari

[Lire plus...]

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

Chris Coyier est un Ninja du Web

Voici une interview de Chris Coyier.

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.

Photo de Chris Coyier

[Lire plus...]

Article / Page: Chris Coyier est un Ninja du Web | 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 )

YOU ADS

Je suis heureux de vous présenter un nouveau réseau de sites pour l’Atelier de Sèvres à Paris.

Image du site

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.

Steve Jobs 1955-2011

image du Site Apple le 6 octobre 2011

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

 

Article / Page: Steve Jobs 1955-2011 | retour vers l'accueil, sur le site de Grégoire Noyelle ( WebDesigner Développeur WordPress freelance à Paris :: Web Designer )

Émilie di Nunzio Joly

Site personnel d’Émilie di Nunzio Joly.

Image du site

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.

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 )

Migration vers un serveur virtualisé (VPS)

J’ai changé de serveur cette nuit. Ou plutôt le service de WebHostingBuzz s’en est occupé. Très réactifs comme toujours. Je suis chez eux depuis 2008 et suis toujours étonné par leur réactivité 24/24. La configuration WordPress s’est faite en douceur et sans encombre.

Je suis passé d’un serveur mutualisé à un serveur virtualisé (VPS). Le site fut inaccessible pendant quelques heures samedi 13 août, au matin. Au premier abord, les premières minutes, je fus un peu déçu par la reprise du site. Je le trouvais lent. Et rapidement,  les changements s’avérèrent vraiment significatifs. Les pages se chargent beaucoup plus vite. Une période de rodage est sans doute nécessaire.

J’ai accès à la racine du serveur et j’ai beaucoup plus d’options dans la gestion de son rendement. Enfin, comme mes ressources ne sont plus partagées, je n’ai normalement plus de mauvaises surprises quand un autre site est trop gourmant. Ceci est très courant sur les serveurs mutualisés et cela me causait de plus en plus de problèmes.

La prochaine étape va consister à créer une nouvelle plate-forme sur une des partitions.

À suivre….

Article / Page: Migration vers un serveur virtualisé (VPS) | 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 )

Noyelle&Co

Site personnel pour les photographies d’I-Chun et de moi-même.

Image du site

website // clic

  • Client: noyelle&Co
  • Caractéristique: Construit sur une structure Genesis.
  • Réalisation: Création de l’interface complète: fonctionnalité et montage du thème