> Formations > Technologies numériques > Technologies Web > Gestion de contenu, e-commerce > Formation Joomla!, Web design > Formations > Technologies numériques > Formation Joomla!, Web design

Formation : Joomla!, Web design

Joomla!, Web design

Télécharger le programme Partager cette formation

Télécharger le programme Partager cette formation

Vous apprendrez à installer les outils pour développer en HTML/CSS et utiliser Bootstrap pour personnaliser vos pages à l’aide de class CSS. Vous serez capable de créer et modifier des templates et de gérer l’administration avancée pour la mise en place de contenu.


Inter
Intra
Sur mesure

Cours pratique en présentiel ou en classe à distance

Réf. JKE
Prix : Nous contacter
  4j - 28h00
Pauses-café et
déjeuners offerts




Vous apprendrez à installer les outils pour développer en HTML/CSS et utiliser Bootstrap pour personnaliser vos pages à l’aide de class CSS. Vous serez capable de créer et modifier des templates et de gérer l’administration avancée pour la mise en place de contenu.

Objectifs pédagogiques
À l’issue de la formation, le participant sera en mesure de :
  • Connaître les bases des langages HTML/CSS par la pratique
  • Créer et structurer une page Joomla! à l'aide du framework Gantry 5

Public concerné
Tout administrateur maîtrisant les fonctionnalités de base de l'administration et souhaitant personnaliser ou concevoir son propre template Joomla!.

Prérequis
Posséder des connaissances de bases en HTML/CSS.
Vérifiez que vous avez les prérequis nécessaires pour profiter pleinement de cette formation en faisant  ce test.

Programme de la formation

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.
Travaux pratiques
Installation de Komodo Edit.

HTML

  • Le langage HTML : les balises de base.
  • Structurer une page HTML statique.
Travaux pratiques
Création d’un code HTML.

CSS

  • Les bases du langage CSS.
  • Créer une feuille de styles interne ou externe.
Travaux pratiques
Création d’une feuille de style CSS.

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.
Travaux pratiques
Installation et manipulation de Bootstrap.

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.
Travaux pratiques
Personnalisation d’un module Joomla!.

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.
  • Introduction à la notion de particules Gantry 5.
  • Gestion des menus et hyper menus.
  • Mise en place de la feuille de style de personnalisation.
  • Compilateur de code CSS : le langage Sass dans Gantry 5.
  • Ajout d'une police de caractères.
Travaux pratiques
Personnaliser un template Joomla! avec Gantry 5.

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 style.
Travaux pratiques
Création d’un modèle à partir d’une maquette Photoshop.


Modalités pratiques
Méthodes pédagogiques;
Formation alternant théorie et pratique. Tout ce qui est appris sera expérimenté.

Modalités d'évaluation
Le formateur évalue la progression pédagogique du participant tout au long de la formation au moyen de QCM, mises en situation, travaux pratiques…
Le participant complète également un test de positionnement en amont et en aval pour valider les compétences acquises.

Solutions de financement
Pour trouver la meilleure solution de financement adaptée à votre situation : contactez votre conseiller formation.
Il vous aidera à choisir parmi les solutions suivantes :
  • Le plan de développement des compétences de votre entreprise : rapprochez-vous de votre service RH.
  • Le dispositif FNE-Formation.
  • L’OPCO (opérateurs de compétences) de votre entreprise.
  • France Travail sous réserve de l’acceptation de votre dossier par votre conseiller France Travail.
  • Le plan de développement des compétences de votre entreprise : rapprochez-vous de votre service RH.
  • Le dispositif FNE-Formation.
  • L’OPCO (opérateurs de compétences) de votre entreprise.
  • France Travail sous réserve de l’acceptation de votre dossier par votre conseiller France Travail.

Horaires
En présentiel, les cours ont lieu de 9h à 12h30 et de 14h à 17h30.
Les participants sont accueillis à partir de 8h45. Les pauses et déjeuners sont offerts.
En classe à distance, la formation démarre à partir de 9h.
Pour les stages pratiques de 4 ou 5 jours, quelle que soit la modalité, les sessions se terminent à 16h le dernier jour.