WiPDESIGN

Cet espace web dynamique a été créé par et pour les étudiants et enseignants Design Graphique de l’Ecole Supérieure des Beaux-Arts de Valence (Drôme - France). Ce tutorial correspond à la version 2.0.5 de WordPress. Si vous ne trouvez pas ce que vous cherchez, allez voir sur le site dédié par WordPress aux tutoriaux en vidéo.
Si vous êtes un lecteur de passage :

- Vous pouvez écrire des billets ou contribution (posts) à la suite des articles écrits dans le site. Utilisez pour celà le formulaire proposé en lien à la suite de chaque article. Vous n’avez pas besoin de login particulier.

Si vous êtes étudiant(e) Design Graphique en 2006-2007 en deuxième ou troisième année, ou enseignant et possédez un login :

- Vous pouvez écrire des articles dans cet espace, vous avez le statut d’auteur
- Deux d’entre vous ont le statut d’éditeur qui donne la possibilité de modifier d’autres options du site

Cet espace est un espace collectif d’écritures, il convient donc de prendre en compte certaines règles, à suivre d’autant plus scrupuleusement que son statut (auteur, éditeur, administrateur) possède de pouvoirs.

Un auteur peut créer et modifier des articles, y insérer des images, documents .pdf ou autres, des vidéos et des liens. Il peut (et doit) associer des TAGs ou mots-clés à son article, dans le champ prévu à cet effet sous la zone de saisie de son texte. Lors de la saisie, une liste apparaît, suggérant les mots-clés déjà présents et utilisés. Comme toujours en matière de mots-clés, il en faut mais point trop faute de quoi ils nes servents plus à faire des nuages ou des ensembles mais du brouillard !
Un éditeur peut ajouter - en plus des articles - des pages (le concept de page dans WordPress est celui de page fixe et non pas de rubrique), des catégories de mots-clés, des liens et agir sur les options de présentation du site. Le design du site est fait grâce à des feuilles de styles CSS qui contiennent les règles de mise en page codées dans un langage (CSS ou Cascading Style Sheet) et inclus dans des boucles de programmation PHP (Personnal Home Page) qui génèrent des pages HTML (Hypertext Markup Langage) afin qu’elles s’affichent dans les navigateurs web.

Ces styles font partie d’un ensemble appelé Thèmes sous WordPress, il va de soi que modifier ces fichiers est possible mais qu’il est préférable de faire auparavant une sauvegarde de l’ensemble de la base de données du site. Ensuite, il faudra faire des modifications progressivement, en étant sûr de ce qu’on modifie (la taille du coprs des caractères et non pas un numéro de référence, le nombre d’occurences présentes sur la page et non pas le corps de typo de leur affichage, etc.)

Il faut tester de petites modifications et les mesurer en activant le lien “Voir le site” et au besoin en réactualisant le lien pour forcer les données (sinon c’est le cache du navigateur qui sert de base pour afficher les fichiers).

ECRIRE UN ARTICLE

Vous devez vous connecter (LOGIN) avec votre USER et PASSWORD dans l’espace d’édition et suivre cette URL :

< http://www.erba-valence.fr/wpdesign/wp-admin/post.php > Ces informations vous ont été données par email en début d’année.

1) Le titre : Choissisez un titre court de préférence, et s’il doit être long, construisez le en “Titre - sous-titre”, par exemple : “Data-Design - interview de Martin Wattenberg”. Vous aurez ainsi dans le seul champ texte de titre, deux à trois informations importantes : le sujet ou le thème( design d’information), le type de document (interview), et le nom propre du designer.

Pour les LUNDIS appelés aussi “Qu’est-ce qu’un média ?” donnez un titre selon le modèle “lundi/date/moisannée - titre de l’article” soit par exemple :
lundi 20 nov. 06 - introduction au Net-Art(s)

ou pour un résumé de l’abécédaire : lundi 30 oct. 06 - L’abécédaire : T comme Tennis

2) Le corps du texte : Vous avez à structurer des informations de différentes nature : texte, images, illustrations, vidéo, sons, etc.

Rédigez votre texte de préférence dans un éditeur de texte équipé d’un correcteur orthographique. Vous n’aimez pas lire des textes comportant beaucoup de fautes, vous ne devriez pas aimer non plus en écrire :=)
Ecrivez de manière à être lus, pensez à votre lecteur : phrases concises de préférence, citez vos sources, créez des liens, votre texte est sur le réseau, milieu par excellence du lien et du rebond ! Et puis enfin relisez-vous. Vous pourrez à tout moment revenir à votre texte pour l’affiner ou le corriger grâce à l’onglet “Gérer“, puis en choisissant l’article désiré et en choisissant “Modifier“. Structurez votre article, au besoin avec des parties et sous parties. Vous pouvez les numéroter par chiffre ou par lettres. Pensez aux images, à leur choix en fonction de votre texte. ENREGISTREZ votre article par la commande (bouton) Enregistrer !

3) les TAGs ou mots-clés : WordPress, comme CMS ou système de gestion de documents sur le web, ne contient pas la notion de rubrique mais offre d’autres avantages. La notion de mots-clés ou aussi appellés TAGs est très intéressante : elle permet d’écrire un article, de lui associer quelques mots-clés (de 3 à 6) et de pouvoir ainsi ensuite le retrouver par l’appel à l’un de ces mots-clés. Un nuage de TAGs ou TAG Cloud a été installé sur WipDesign afin de pouvoir naviguer avec aisance dans les articles qui le composent. C’est le nuage rouge, placé à gauche, tout en bas de la page d’entrée sur le site. Le nuage de droite, en bleu, est celui du répertoire de liens externalisé sur un compte Del.Icio.Us.

Au dessous de la zone de saisie du texte ,vous trouverez la liste des mots-clés utilisés dans les différents articles déjà écrits : vérifiez que vos TAGs n’existent pas déjà de façonà ne pas multiplier les orthographes voisines (ex : langage, language, languages) et de façon à ne pas multiplier inutilement les mots-clés. Leur rareté est aussi la condition de leur pertinence.

ENREGISTREZ votre article par la commande (bouton) Enregistrer !

4) les catégories : à droite de cet espace de saisie, vous avez une liste de mots précédés de cases à cocher (voir capture écran plus loin). Cochez la catégorie désirée selon que vous avez écrit un résumé de contribution aux lundis (médias), une news, annonce, nouvelle (information), un point de vue personnel (point de vue), un résumé de votre travail (WIP Design3 ou 3), une présentation d’intervenant, etc…

ENREGISTREZ votre article par la commande (bouton) Enregistrer !

5) L’horodatage : Vous avez la possibilité de modifier l’horodatage de votre article si celui-ci devait être mis en ligne à une certaine heure par exemple, ou afin d’éviter qu’il apparaisse comme nouveau alors qu’il a simplement subit une correction récente.

ENREGISTREZ votre article par la commande (bouton) Enregistrer !

6) Etat de l’article : Votre article est prêt à être publié, indiquez son statut par les cases à cocher disponibles dans l’onglet latéral droit “Etat de l’article”

ENREGISTREZ votre article par la commande (bouton) Enregistrer !

INSERER UNE IMAGE DANS UN ARTICLE
Vous devez vous connecter (LOGIN) avec votre USER et PASSWORD dans l’espace d’édition et suivre cette URL :
< http://www.erba-valence.fr/wpdesign/wp-admin/post.php >
Pour insérer une image dans votre article, vous pouvez procéder selon deux méthodes différentes et/ou complémentaires.

Dans les deux cas, il vous faut avoir au préalable chargé (upload) l’image sur l’espace WIP Design :

Pour charger une image dans l’espace WIP Design : Utilisez l’onglet “Charger” sous la zone “Tags Suggestions”. [ voir capture écran ci-dessus ]
Après avoir localisé l’image désirée. Utilisez la commande “Parcourir” afin de sélectionner l’image voulue. Remplissez les zones “Titre” et “Description”.
Vous devez voir votre image sous forme de vignette, indiquant qu’elle est bien chargée dans l’espace web.

I) Qualité, mode, format et taille des images :
Vos images peuvent être au format :
.gif (256 couleurs, idéal pour la typographie en images)
.jpg (24 bits ou millions de couleurs, idéal pour les photographies n&b et couleur. Attention : ce format détruit des données en compressant les images)
.png (48 bits, avec couches alpha, ce format comporte les avantages de gif et de jpg mais MS-Explorer ne sait pas très bien le lire selon sa version)
Assurez vous :
a) que votre image ne dépasse pas 450 pixels de largeur, sans quoi elles déborderaient le gabarit et seraient longues à charger.
b) qu’elle est bien en mode RVB (faute de quoi elle ne s’afficherait pas).
c) que son nom ne comporte pas plus de 8 lettres (avant l’extension de 3 lettres) sans accents ni caractères accentués ni espaces, générateurs d’erreurs et problèmes.
d) qu’elle soit libre de droits ou, le cas échéant, lui joindre la mention de son origine et/ou de son photographe.

II) Insertion par l’icône “Insérer une image”

Insérez le curseur en bonne position, entre deux paragraphes de votre texte, un peu comme vous le feriez dans un traitement de textes.
Cliquez sur l’icône graphique-image qui va ouvrir cette fenêtre :

Dans le champ URL (adresse de l’image), collez ce chemin d’accès complet :
http://www.erba-valence.fr/wpdesign/wp-content
suivi directement du nom de votre image avec son extension (ex : image.jpg).
Soit pour notre exemple :http://www.erba-valence.fr/wpdesign/wp-content/image.jpg

Renseignez les champs “Image description” et “Alignement” puis validez avec la commande “Insert”
Votre image devrait apparaître dans la zone de saisie et de mise en page de votre article.

III) Insertion (et/ou modification) par le code source

Si vous souhaitez voir ou travailler directement dans le code source, activez la bascule en code source avec l’icône HTML de l’éditeur de WordPress.
Le code pour insérer une image (il vous faut au préalable l’avoir chargée sur l’espace WIP Design) ressemblera à celui-ci.

Toute modification faite dans le code se répercute dans la fenêtre WYSIWYG (graphique), ci dessous le code d’affichage partiel d’une image nommée image.png :
// img width=”450″ height=”274″ alt=”Andreas Muller - 2004″ xsrc=”http://www.erba-valence.fr/wpdesign/wp-content/image.png” mce_src=”http://www.erba-valence.fr/wpdesign/wp-content/image.png” //
img signifie qu’il s’agit d’une image bitmap
width est sa largeur (en pixels)
height est sa hauteur (en pixels)
alt est le commentaire alternatif et optionnel
src indique la source ou la localisation (chemin d’accès) de l’image à afficher

Les images uploadées (chargées) sont toutes stockées dans le répertoire wp-content contenu par wpdesign
Quelque soit votre méthode d’insertion de médias (images ou autres) respectez bien tout le chemin d’accès soit :
http://www.erba-valence.fr/wpdesign/wp-content/

IV) Créer une galerie

Si vous souhaitez insérer une galerie d’images, activez la bascule en code source avec l’icône HTML de l’éditeur de WordPress.
Importez dans la page, non pas vos images mais leurs vignettes, tout simplement en rajoutant le préfixe : miniature devant l’extension de l’image.

AInsi, l’image “monimage.jpg” possède une vignette, créée automatiquement par WordPress et qui se nomme “monimage.miniature.jpg”

Une fois que vous avez chargé toutes vos vignettes dans votre article, sauvegardez le (sait-on jamais !). Et créez un lien sur chacune de ces images.

Pour activer le plug-in de galerie et ses fonctions de diaporama, il vous faut faire de chaque image une image en lien vers son original plain format. En continuant selon notre example : la vignette “monimage.miniature.jpg” sera en lien vers l’image plein format “monimage.jpg”.

On voit dans l’image ci-dessous, un exemple de code qui permet d’associer plusieurs imagettes (vignettes) à travers l’ajout, dans le lien, de la fonction :

rel=”lightbox[serie]” qui active le plug-in de galerie LightBox.