A l'issue de cette formation, vous serez capable de :

• Identifier les bases des langages HTML / CSS par la pratique, en vue de les mettre en oeuvre dans la personnalisation et la création de templates du CMS Joomla!
• Créer et structurer une page Joomla! à l'aide du framework Gantry 5.

Jour 1

Les outils pour développer en HTML / CSS

• Installer et paramétrer un éditeur de code : Komodo Edit
• Où trouver les ressources HTML / CSS sur le Web
• Les étapes de la conception d'un site Web : du Mockup à l'intégration
• Sensibilisation au Responsive Design

Exemples de travaux pratiques (à titre indicatif)

• Se rendre sur quelques sites Web et tester leur capacité à être Responsive Design avec les outils pour développeur mis à disposition dans Google Chrome

Remise à niveau en HTML

• Le langage HTML : les balises de base
• Structurer une page HTML statique

Exemples de travaux pratiques (à titre indicatif)

• Créer une page HTML avec les balises structurelles de base (Head, Body, Footer) et des balises de hiérarchisation de contenu (Section, Hn, paragraphe, liste...)

Remise à niveau en CSS

• Les bases du langage CSS
• Créer une feuille de styles interne ou externe

Exemples de travaux pratiques (à titre indicatif)

• Lier une page HTML avec une feuille de styles externe et créer une class CSS de mise en forme des balises Hn, P et définir la taille par défaut du texte courant
• Affecter ensuite des tailles relatives aux balises Hn et P tenant compte de cette valeur par défaut
  

Jour 2

HTML / CSS par la pratique : étude d'un framework Bootstrap

• Télécharger et installer Bootstrap
• Construire une page HTML / CSS avec Bootstrap
• Personnaliser la mise en page à l'aide de class CSS Bootstrap

Exemples de travaux pratiques (à titre indicatif)

• Monter une page HTML, intégrant le framework Bootstrap, et mettre cette page en forme en référence à un modèle à reproduire en utilisant les paramètres, classes et composants Bootstrap

Jour 3

Administration avancée de Joomla!

• Créer une surcharge d'extension dans Joomla!
• Comprendre la structure d'un template Joomla!
• Analyser la structure d'un module Joomla!
• Personnaliser la mise en forme d'un module : les suffixes de class CSS
• Optimiser la mise en forme des articles par l'intégration de class CSS
• Concevoir un contenu d'article fluide et Responsive Design
• Mettre en place des templates de contenu : Content Templater

Exemples de travaux pratiques (à titre indicatif)

• Procéder à la refonte d'un template Joomla! pré-installé en modifiant la mise en forme de certains contenus de type Template, Article et Modules
• Concevoir un modèle d'article avec le composant Content Templater

Concevoir et personnaliser un template Joomla! avec Gantry 5

• Installer et personnaliser Gantry 5
• Les réglages de styles par défaut : le gabarit "Base Outline"
• Comprendre la structure d'un template : le layout
• Création et personnalisation de positions de modules
• Création de gabarit de pages Joomla! et montage d'une page d'authentification d'un site Intranet / Extranet (double gabarit et instance de template Joomla!)
• Introduction à la notion de particules Gantry 5
• Gestion des menus et hyper menu
• Mise en place de la feuille de styles de personnalisation
• Comprendre ce qu'est un compilateur de code CSS : le langage SASS dans Gantry 5
• Ajout d'une police de caractères

Exemples de travaux pratiques (à titre indicatif)

• Concevoir une nouvelle instance de template avec Gantry et reproduire une structure de page à partir d'un modèle fourni

Jour 4

Template à partir d'une maquette graphique

• Analyse d'une maquette sur Adobe Photoshop
• Extraction des éléments graphiques
• Mise en place de la charte graphique dans la feuille de styles du template (variables et mixins SASS)
• Conception du gabarit et mise en place des positions du template Joomla!
• Intégration du contenu (modules, articles...)
• Réalisation et personnalisation du template par l'intégration du code CSS dans la feuille de styles

Exemples de travaux pratiques (à titre indicatif)

• Mise en place d'une feuille de styles personnalisée utilisant des variables avec l'aide du framework Gantry