Alter Ego

La mission locale de l'agglomération de Limoges (Antenne du Val d'Aurence) a souhaité mettre en place un travail de autour du quartier (présentation des différentes structures publiques ou associatives) qui serait réalisé par 3 cohortes de jeunes.

• La première a travaillé sur l'identification de ces structures,
• La seconde sur la mise au format numérique (diaporama, fiche excel, ...)
• La troisième avait pour mission de réunir ces données sur une maquette de site internet.

Dès le début le choix s'est porté vers une version totalement gratuite pour cette maquette site. La plateforme wordpress.com est une plateforme d’hébergement qui permet de créer un site et de l’administrer gratuitement. Cependant, cet aspect gratuit limite les possibilités (insertion vidéo, ...) et la flexibilité dans la mise en œuvre.

Voir le résultat

Travail préparatoire

La construction d’un site demande souvent un travail préparatoire important avant de passer à la rédaction de pages en ligne.

Il s’agit dans un premier temps d’analyser le travail déjà réalisé, de le corriger voire de le compléter.

Ce travail préparatoire doit aboutir à une organisation (papier) des différentes pages.

Partie 1 : analyse des ressources disponibles

Le site « brouillon » armonia001 et le diaporama du fichier powerpoint constituent la base principale de nos ressources. Le travail à réaliser est le suivant :

Détricotage des ressources sur papier

Pour chaque écran, (diapo ou site) prendre une feuille (A5) et retranscrire :

• Le nom de la page
• Par quel chemin, nous devons y arriver,
• Vers quel page on peut aller
• Les éventuelles informations manquantes

Construction du site papier

• Organiser les feuilles de façon cohérente
• Ajouter des feuilles pour les informations manquantes

Partie 2 : Organiser le travail numérique

Avant de se connecter

Propriétaire du site : adresse mél, drive, collecter et classer les différentes ressources.

Rôle : Administrateur, Éditeur, Auteur, Contributeur, Abonné

Création du site

• Nom du site, choix du thème,
• Premier pas avec le logiciel Wordpress
• Artciles
• Page
• widget
• Média
• Menu

Rédaction des premières pages

• Mise en page,
• Menu

Mise en page de photos - utilisation de colonnes

La mise en page sur la version en ligne de wordpress n'est pas des plus faciles. Les paragraphes suivants proposent une solution pour mettre en place texte et photos au sein d'une même page. En pratique, l’insertion de plusieurs photos sur une même page peut s’effectuer selon différents procédés :

• la galerie photos
• la division de la page en plusieurs colonnes

Pour une meilleure mise en page, les documents doivent avoir des caractéristiques proches, l’idéal étant un même format.

Préparation des photos

Questions préalables

• Quelles sont les photos qui devront apparaître sur la page et selon quelle disposition ?
• Quelles photos seront liées avec une autre page ?

Remarque 1 : si les photos ne sont liées à aucune page, il peut être opportun de les réunir au préalable en un seul média.

Remarque 2 : si un lien est construit autour de chaque photo, la division en colonne devient incontournable.

Mise au format des média

Utiliser un logiciel de traitement d’image (paint, photoshop, gimp, ...) pour :

• adapter les documents dans un rapport hauteur sur largeur identique ;
• réduire les documents pour disposer d’un format identique ;
• renommer les documents pour qu’ils soient plus facilement manipulables.

Chargement des photos

Les documents peuvent maintenant être téléchargés dans le catalogue des média.

Mise en page

1) Créer une nouvelle page

2) Ajouter bloc

Colonne

3) Définir le nombre de colonnes

4) Positionner les images

...puis

5) Régler les dimensions de l’image

6) Puis définir pour chaque image un lien

Dupliquer une mise en page

Dans le cas ou l’on souhaite plusieurs pages organisées de la même manière, il peut être opportun de créer une « page modèle » et de la recopier. C’est le cas ici pour les fiches structures qui doivent toute se ressembler.

Méthode 1 : code html

a) Vue = Barre d’outils du haut (permet d’avoir une vision globale du code de la page)

b) Éditeur de code

c) Copier l’ensemble du code

d) Repasser en éditeur visuel

e) Créer une nouvelle page

f) Passer en éditeur de code

g) Copier le code

h) Repasser en éditeur visuel, puis modifier la page selon besoin

On peut répéter l’opération, pour créer autant de nouvelles pages que nécessaire

Méthode 2 : blocs réutilisables

a ) Rendre chaque bloc structuré réutilisable attribuer un nom à chaque bloc

b) Créer une nouvelle page

c ) Puis ajouter les blocs « modèles » ainsi réutilisables.

Attention les blocs ainsi créés sont liés entre eux. Une modification sera répercutée sur l’ensemble des pages utilisant ces blocs.

d) Pour désolidariser ces blocs il suffit de convertir le bloc ainsi créé en bloc Gutemberg.

e) Puis de le modifier