Webmaster avec WordPress

Module 1 : Photoshop pour le web (3Jrs – 21H)
Module 2 : WordPress  (5Jrs – 35H)
Module 3 : HTML 5 CSS 3 – Initiation (3Jrs – 21H)

Module 1 : Photoshop pour le web 

1-NOTIONS DE BASE

• La couleur
• L’image numérique
• Image bitmap et image vectorielle
• Les principaux formats d’image bitmap
• Définition et résolution d’image

2- L’INTERFACE DU LOGICIEL

• Les différents éléments constituant l’interface du logiciel
• La barre d’outils
• La barre d’options
• Le jeu des palettes flottantes
• Les espaces de travail prédéfinis
• Personnaliser son propre espace de travail
• Présentation du sélecteur

3 – RECADRER UNE IMAGE

• L’outil recadrage
• Correction de l’objectif d’une image

4- LES OUTILS DE SÉLECTION

• Les différents outils de sélection
• Le rectangle et l’ellipse de sélection
• Créer un contour progressif
• La baguette magique
• Les différents lassos
• Transformation manuelle
• L’enregistrement d’une sélection
• La combinaison d’outils de sélection
• L’outil de sélection rapide

5- LA RETOUCHE D’IMAGE

• L’outil tampon de duplication
• L’outil correcteur localisé
• L’outil pièce
• L’outil œil rouge
• L’outil correcteur localisé
• Correction d’une image avec analyse du contenu

6- PHOTOMONTAGE ET GESTION DE CALQUES

• Le principe des calques et du photomontage
• Les types de calque
• Gestion d’un photomontage
• Les masques de fusion
• Peindre un masque de fusion
• Créer un masque de fusion à partir d’une sélection

7- DETOURAGE

• Détourer avec les outils de sélection et les masques de fusion
• Dupliquer un calque d’un fichier à un autre
• Sélectionner et détourer avec un masque de fusion
• Transformation manuelle sur un calque comportant un masque de fusion
• Gestion d’un groupe de calques

8- LA GESTION DES COULEURS

• Les différents calques de réglages
• Le calque de réglage luminosité/contraste
• Le calque de réglage balance des couleurs
• Le calque de réglage teinte/saturation
• Modifier la couleur d’un élément

9- TEXTE

• Texte linéaire et bloc de texte
• Mise en forme du texte: les palettes caractère et paragraphe

10- FORMES VECTORIELLES

• Les outils vectoriels de Photoshop
• Créer un bouton web
• Les styles de calques
• Les masques d’écrêtage

11- PREPARATION DE FICHIERS POUR LE WEB

• Les principaux formats de fichiers pour le Web
• Les spécificités des différents formats
• Le redimensionnement et le recadrage des photos au format Web
• Optimisation des fichiers pour le web

12- CREER LE WEBDESIGN D’UN SITE WEB

• Méthodologie pour créer un webdesign
• Les cinq zones standards d’un site Web
• Présentation des wireframes et des grilles modulaires
• Personnalisation des préférences du logiciel pour le Web
• La mise en place d’une grille de composition
• Gestion des calques et des zones prédéfinies
• Gestion des groupes de calques et mise en couleur
• Exportation et optimisation des images : enregistrer pour le Web

Module 2 : WordPress 

1. Les prérequis à l’utilisation de WordPress

• Internet, le web quésaco ?
• Comment fonctionne un site web ?
• Qu’est-ce que WordPress ?
• Quelles sont les étapes de création d’un site WordPress ?
• De quoi a-t-on besoin pour créer un site WordPress ?
• Quelques conseils avant de démarrer

2. Installer WordPress sur son ordinateur avec Local by Flywheel

• Pourquoi réaliser un site dans un environnement de travail local ?
• Comment installer et déployer WordPress avec Local by Flywheel ?

3. Comprendre l’administration de WordPress

• Quelle est la différence entre le back office et le front office de WordPress ?
• Comment se présente le back office ?
• Quels sont les fichiers qui composent un site WordPress ?

4. Effectuer les réglages de base d’un site WordPress

• Définir les règles d’utilisation du site web
• Personnaliser son profil d’administrateur
• Administrer les utilisateurs du site web

5. Créer un site simple à l’aide des fonctionnalités de base de WordPress

• Importer des contenus multimédia dans la bibliothèque
• Définir des catégories et des sous catégories d’articles
• Créer et publier des articles
• Créer et publier des pages
• Créer et organiser un menu de navigation
• Créer des liens hypertexte
• Les bases de la personnalisation graphique
• Enregistrer son site et le partager à l’aide de Local by Flywheel

6. Créer un site complexe en utilisant un thème et des plugins

• Créer un nouveau site WordPress à partir d’un blueprint Local by Flywheel
• Installer un thème WordPress
• Personnaliser la page d’accueil de son thème
• Personnaliser les autres pages du site
• Installer des extensions (lightbox, formulaire, pop-up, boutons de partage sur les réseaux sociaux)
• Présentation de l’outil de code CSS additionnel
• Tester son site WordPress

7. Publier un site WordPress sur le web

• S’inscrire à un service d’hébergement web (ex : OVH)
• Transférer un site web d’un serveur local à un serveur web avec All-In-One WP Migration
• Vérifier que la migration s’est bien déroulée
• Obtenir un certificat SSL
• Rendre le site visible auprès des moteurs de recherche

8. Ressources pour améliorer son site

• Les meilleurs plugins du moment
• Les sites indispensables

9. Installer et manipuler les fichiers de WordPress manuellement

• De quoi a-t-on besoin pour installer un site WordPress manuellement ?
• Installer WordPress manuellement sur son ordinateur
• Migrer son site vers un serveur web

10. Aller plus loin

• Conseils pour entretenir son site
• Conseils pour progresser

Module 3 : HTML 5 CSS 3 – Initiation

Initiation au HTML5 CSS3

• Une petite histoire du web (Les acronymes web)
• Les spécifications du HTML5
• Les éditeurs  : Sublim-text ou Notepad++
• Installation de EMMET (Zencoding google)
• Les balises et leurs attributs
• Structure de base d’une page HTML5
• L’enregistrement des fichiers et création de la racine des pages
• URL relatif ou absolu
• Doctypes et normes W3C
• Balises de type in line et block
• Balises de structuration HTML 5
• Compatibilité entre les navigateurs (Librairie js : Modernizr)
•  Nouvelles balises HTML5
• Exercices de rappel

Organiser les éléments texte

• Les titres
• Les paragraphes
• La mise en valeurs
• Les liens hypertext
• Affichages des sources image
• Créer des listes et son usage (UL, OL, LI et DL, DT, DD)
• Faire un tableau
• Les balises génériques : div, span et leur usage
• (balises TABLE, TR, TD, TBODY, THEAD, TH, attributs colspan et rowspan)
• Les formulaires en html 5 : nouveaux attributs pour les inputs

Les règles CSS2 et CSS3

• Notion de feuille de style en cascades
• Où écrit-on le CSS ? : link,style type et style scoped
• Les sélecteurs html
• Les différents types de sélecteur css : classe, id et pseudo-classe
• Attributs de sélecteur
• Préfixe pour les navigateurs.
• Importation de la police et les possibilités de compatibilité css3 (@font-face)
• Framework : font-squirrel pour l’optimisation d’affichage de la police importé
• Introduction aux différentes unités : px, pt, %, em et rem
• La notion de boite et présentation du modèle de boite
• Gestion des couleurs : notion exadécimal, rgb et rgba
• Utilisation du Framework : Flat-Ui et google material design, colorZilla
• Propriété supplémentaire css : les border, padding, margin et box-sizing
• Float, clear left, right et both
• Background, background-image, background-color et background-size
• Framework font-awesome pour l’application des icônes codés en css
• Exercices pratique de rappel

Le Responsive Design avec HTML5 CSS 3

• Le concept de responsive design
• Adaptation de la page à la largeur des appareils : portable, tablette et pc
• Les Media queris et les meta viewport
• Rappel des unités de mesure px,%, em, rem
• Exercices de mise en pratique

Mis à jour le 28 octobre 2021