Mémo Checklist + Cours
Communiquer ? Il n’y a que les vases qui communiquent.
Votre page personnelle
Objectif
- Présenter votre profil d’étudiant en master infocom en recherche d’alternance (cette page doit présenter la singularité de votre profil indépendamment de vos cv, lettre de motivation édités en pdf)
- Présenter un contenu éditorial digital multimédia
- Utiliser WordPress pour la mise en place de cette page
Oui, mais comment ?…
Qui parle sème ; qui écoute récolte.
Vu en cours
#pov conception
- Recenser le contenu éditorial, réfléchir à son « positionnement » et à sa « stratégie » ;
- Concevoir un contenu éditorial digital ;
- Hiérarchiser son contenu ;
- Optimiser la mise en forme.
- Votre travail doit faire preuve…
- d’un travail de mise en page (lisibilité / intelligibilité / esthétisme) ;
- d’une organisation, structuration et hiérarchisation du contenu ;
- d’un contenu respectant la législation européenne #droitsdauteurs ;
- de la prise en charge de connaissances techniques (formats/tailles/dénomination des fichiers, organisation de la base média, structuration des blocs WordPress, etc.) ;
- de pratiques basiques de SEO (hiérarchie des titres, renseignement des textes alternatifs des contenus visuels éditoriaux #accessibilité, contraste des couleurs #accessibilité, optimisation Yoast SEO (méta-description, requêtes, etc.), url de la page et des publications annexes le cas échéant) ;
- de pratiques UX (liens vers autres sites > ouverture dans un nouvel onglet, menu de navigation avec ancrage si nécessaire, facilité de contact)
- d’un minimum de soucis du responsive.
#pov CMS
#pov Technique
- Utiliser les blocs Spectra ;
- Mettre son contenu dans des conteneurs (3 au minimum) ;
- Optimiser du CSS personnalisé le cas échéant.
#pov Juridique
- Respecter les droits d’auteurs (Creative commons).
Bonnes pratiques WordPress
Organiser sa base media (supprimer doublons et media non utilisés) en plaçant ses téléchargements dans son dossier personnel
Lors de l’importation de vos fichiers media il faut optimiser le nom du fichier et renseigner la balise alt si votre media contribue au contenu éditorial
Votre page personnelle doit être éditée sous la forme d’une page
Vous pouvez publier du contenu supplémentaire sous la forme d’articles et les rendre accessibles sur votre page avec un bloc « publications / post » (carrousel/grille) en ciblant une catégorie spécifique (qu’il faudra attribuer à vos articles).
Pour insérer des posts de réseaux sociaux
- Instagram / Tiktok
Utilisez le bloc « html personnalisé » avec les fonctions d’intégrations des réseaux
- Youtube / vimeo
Utilisez les blocs dédiés en renseignant l’url des vidéos
Technique
Utilisez en priorité les blocs bleus (Spectra). Il faut explorer et paramétrer les réglages de vos blocs (spectra ou autres) qui présentent différentes options généralement sous 3 onglets (General, styles et advanced)
Votre contenu doit être dans des containers (3 au minimum > en-tête (intro) / contenu principal / pied de page (contact) que vous pouvez renommer
Un container permet :
- de maitriser la largeur du contenant et du contenu
- Avoir des « sections » hiérarchisées
- Utiliser des fonds de sections (couleurs / photos / vidéos)
- Créer des colonnes
Les colonnes ont une largeur en %. La somme des largeurs doit être égale à 100%…
- JPG (Joint Photographic Experts Group)
> compression (avec perte) > photos (16 millions de couleurs) > pas de transparence > à privilégier pour les photos - PNG (Portable Network Graphics)
> fond transparent > png8 256 couleurs > png24 + de 16 millions de couleurs sans perte > fichiers + lourds versus jpg - GIF (Graphics Interchange Format)
> animation > transparence > 256 couleurs max - SVG (Scalable Vector Graphics)
> format vectoriel > animation possible en css > transparence - Webp
> format google… animation, transparence, compression (généré automatiquement par un plugin installé sur le site) - PDF (Portable Document Format)
> conserve la mise en page & typographie > fichier pouvant être « lourd » > privilégier le téléchargement versus affichage dans le navigateur - Mp4
> video > format compressé versus .mov - Mp3
> audio
Vous pouvez ajouter du css personnalisé sur votre page
- Onglet Spectra (en haut à droite…)
- la bible des propriétés CSS
SEO
- Nom des fichiers
- Poids des fichiers #formats
- Balise « alt »
UNE seule balise H1…
Respecter une hiérachie
- H1 TITRE principal (unique)
- H2 titres chapitres
- H3 sous titres
- etc.
- <p> = paragraphes
Une hiérarchie de contenu
Yoast est un plugin qui vous aide à optimiser votre SEO
Vous devez optimiser à minima (en bas de votre page en back-office dans l’onglet Yoast SEO) :
- la requête cible > indique aux moteurs de recherches sur quel terme de recherche vous souhaitez que votre page soit référencée (exple « alternance communication master Paris »)
- la meta description > préconise aux moteurs de recherches le texte à afficher dans les résultats de recherche (yoast vous montre l’aperçu)
L’accessibilité comprend la prise en compte de l’expérience utilisateur selon son environnement, ses handicaps potentiels et la cohérence entre le contenu offert et sa quête.
Cela implique :
- du responsive
- contraste des couleurs
- hiérarchie du contenu
- balise alt
- ergonomie
- temps de téléchargement (optimisation des fichiers)
Le responsive
Pour tester le responsive, il vous faut consulter votre page côté visiteur (en frontend) avec votre téléphone.
Vous pouvez ensuite ajuster des réglages dans les blocs SPECTRA en cliquant sur le pictogramme représentant un écran d’ordinateur. Vous avez ensuite le choix entre 3 pictogrammes correspondants à 3 familles d’écrans (ordinateur, tablette, mobile). En activant celui du téléphone mobile, vous pouvez ajuster vos réglages pour cette catégorie d’écrans.
Vous avez aussi la possibilité de désactiver un bloc selon le type d’écran dans les réglages avancés des blocs.
Stan VINCENT
Vous avez le droit à 1 email « SAV » (date limite à venir) pour exposer vos demandes d’aide / signalement de bugs récapitulant l’ensemble de vos difficultés / incapacités / questions avec screenshots, liens, descriptifs pour que je vous accompagne une dernière fois.
