CURSUS COMPLET

Développement web

Cette formation est destinée à faire de vous quelqu’un d’autonome dans la création de sites web de façon accélérée.

Nous y voyons les 4 langages clés du web (HTML5, CSS3, Javascript, PHP) ainsi que 2 frameworks (jQuery, Bootstrap)  pour développer plus efficacement.

Nous abordons également le CMS le plus populaire, WordPress, afin d’être en mesure de sortir des sites encore plus rapidement en travaillant sur des sites pré-paramétrés.

Durée : 13 jours, soit 91 heures, modulables

Dates : sur demande

Lieu : formation dans vos locaux, ou les nôtres (vieux lyon)

Public & prérequis : toute personne souhaitant être autonome dans la création de sites web, formation qui ne requiert aucune connaissance en programmation.

Objectif : acquérir une autonomie dans le développement web : savoir développer en HTML / CSS, utiliser Bootstrap et les techniques de responsive design pour améliorer le rendu, augmenter les interactions, l'ergonomie, et le dynamisme d'une page avec javascript, accélérer son développement avec jQuery, connecter le site à une base de données, gérer les sessions et les formulaires avec PHP, et savoir créer un site rapidement et efficacement avec WordPress.

Tarif standard: 5200 € H.T.
Intra-entreprises : 500 € H.T./jour pour 1 pers. + 75€/jour par pers. sup.
Tarifs modulables en personnalisant la formation : nous contacter.

Programme (adaptable)

Résumé du programme :

  1. HTML5 / CSS3 – 2 jours
  2. Responsive Design – 1 jour
  3. Bootstrap – 1 jour
  4. Javascript – 2 jours
  5. jQuery – 2 jours
  6. PHP – 3 jours
  7. WordPress – 2 jours

 

1. HTML5 / CSS3 – 2 jours

  1. Introduction
    • différence HTML / CSS
    • historique et évolution du HTML et du CSS
    • conséquences de l’arrivée du HTML5 et du CSS3
  2. Contenu simple HTML
    • structure minimaliste d’une page
    • éléments textuels
    • liens
    • listes
    • tableaux
    • fenêtres
    • images
    • blocs
  3. Les styles CSS
    • lier HTML et CSS
    • structure CSS
    • sélecteurs et pseudo-classes
    • couleurs
    • propriétés communes
    • fonds
    • textes, polices, et multi-colonnes
    • ombres
    • bordures
    • transparence
    • dégradés
    • positionnements
    • compatibilité
  4. Mise en page
    • contenu sémantique
    • outline
    • types de contenus
    • process pour faire un site
  5. Gérer les médias
    • intégrer des vidéos
    • intégrer des sons
    • intégrer des images SVG
  6. Gérer les formulaires
    • les divers éléments de formulaires
    • validation des formulaires avec HTML5
  7. Animations simples et transistions CSS3
    • transitions simples CSS
    • transformations CSS
  8. Outils pour le responsive design
    • le responsive design
    • viewport
    • mediaqueries
    • positionnement par grille
  9. Présentation simple des possibilités liées aux APIs javascript
    • contrôle audio / vidéo
    • site web hors ligne
    • glisser / déposer
    • stockage local
    • stockage session
    • dessin 2D sur canvas
    • géolocalisation

 

2 – Responsive design – 1 jour

  1. Etat des lieux
    • la multiplication des terminaux
    • quelques chiffres sur le marché mobile aujourd’hui
    • les problèmes pour le développement mobile
  2. Introduction au responsive design
    • reponsive design : définition
    • technologies utiles
    • évolution des techniques
    • mobile first
    • graceful degradation
    • étapes pour réaliser un site flexible
  3. Rendre la structure flexible
    • concevoir son site
    • bonnes pratiques pour la maquette
    • l’utilisation d’une grille CSS
    • intégrer la maquette en tirant parti d’HTML5
    • structure flexible : bien gérer les largeurs
    • compatibilite du site
  4. Réorganiser le site avec les mediaqueries
    • viewport
    • mediaqueries
    • points de bascule types
    • résolutions
    • fonctionnalités
    • compatibilité des mediaqueries
    • mediaqueries en javascript
  5. Rendre les contenus flexibles
    • images fluides
    • videos fluides
    • menus fluides
    • polices fluides
    • formulaires fluides
    • tableaux fluides
  6. Outils utiles, et optimisation du site
    • autres stratégies
    • présentation de iUI
    • détecter un mobile
    • frameworks CSS
    • détecter les ressources avec Modernizr
    • vérifier le temps de chargement
    • sources de veille technologique

 

3 – Bootstrap – 1 jour

  1. Présentation de Boostrap
    • qu’est ce que Bootstrap ?
    • les concurrents
    • mise en place de Bootstrap
    • organisation des fichiers
  2. Le système de grille
    • structure HTML recommandée
    • grille et grille fluide
    • lignes et colonnes
    • classes utiles pour le responsive design
  3. Les styles CSS prédéfinis
    • typographie
    • blocs de code
    • tables
    • images
    • formulaires
    • helpers
  4. La navigation
    • boutons
    • boutons déroulants
    • groupes de boutons
    • boutons pills
    • onglets
    • listes
    • barre de navigation
    • fil d’Ariane
    • pagination
  5. Les éléments de mise en page
    • jumbotrons
    • en-têtes de pagne
    • vignettes
    • barres de progression
    • panels
    • objets média
  6. Les scripts javascript intégrés
    • mise en place de javascript
    • transitions
    • modal
    • dropdown
    • scrollspy
    • tab
    • tooltip
    • popover
    • alert
    • button
    • collapse
    • carousel
    • affix
  7. Ressources Bootstrap
    • export personnalisé de bootstrap
    • templates bootstrap
    • utiliser jQuery UI et jQuery Mobile
    • projets basés sur Bootstrap
    • outils de mise en page et de personnalisation
  8. Annexe : introduction à LESS
    • mise en place
    • variables
    • opérations
    • mixins
    • règles imbriquées

 

2 – Javascript – 2 jours

  1. Présentation de javascript
    • les langages web et la place de javascript
    • caractéristiques de javascript
  2. Le langage javascript
    • où mettre son code ?
    • premières instructions
    • variables
    • opérateurs
    • structures de contrôle
    • boucles
    • fonctions
    • POO simple en javascript
    • quelques objets javascript (Date, Math, etc.)
  3. Manipuler le DOM
    • qu’est-ce que le DOM ?
    • compatibilité des navigateurs
    • quelques objets du DOM
    • noeuds du DOM : ajouts, suppressions, modifications
  4. Réagir aux événements
    • programmer des écouteurs
    • les différents événements : souris, clavier, formulaires…
  5. Utiliser les styles
    • rappels CSS
    • modifier l’id, la classe d’un élément
    • modifier les styles d’un élément
  6. Gérer les formulaires
    • manipuler les éléments de formulaires
    • valider un formulaire
  7. Introduction à jQuery
    • présentation de jQuery
    • installation
    • sélections de noeuds
    • modifications de noeuds
    • ajout / suppression de noeuds
    • réagir à des événements
    • faire de l’AJAX avec jQuery et PHP
    • présenation de jQuery UI

 

3 – jQuery – 2 jours

  1. Introduction à jQuery
    • présentation et avantages de jQuery
    • concurrents
    • le monde de jQuery
    • mise en place
  2. Les sélecteurs
    • sélection directe
    • sélection indirecte
    • sélection par attribut
    • sélections multiples
    • sélections par position
    • filtres
    • boucles
  3. L’arbre DOM
    • qu’est-ce que le DOM ?
    • modification d’attributs d’un noeud
    • modification des styles d’un noeud
    • modification du contenu html d’un noeud
    • création d’un noeud
    • insertion d’un noeud
    • remplacement d’un noeud
    • suppression d’un noeud
  4. Les événements
    • programmer des écouteurs avec jQuery
    • les différents événements : souris, clavier, formulaires…
  5. AJAX
    • principe d’AJAX
    • mise en oeuvre d’AJAX avec jQuery
  6. Effets visuels et interface jQuery
    • animations simples d’éléments
    • présentation de jQuery UI
    • mise en place de jQuery UI
    • tests d’interations, widgets, et effets
    • personnalisation de jQuery UI

 

6 – PHP / MySql – 3 jours

  1. Introduction : rappels techniques, fondamentaux du web
    • architecture client / serveur
    • protocole HTTP
    • évolution et bonnes pratiques HTML / CSS
    • le rôle de PHP
    • mécanisme de PHP
    • installation d’un serveur local
  2. Syntaxe PHP : premiers scripts
    • premier script PHP
    • variables
    • fonctions
    • boucles
    • structures conditionnelles
    • tableaux
    • inclusions
    • programmation orientée objet : objets, classes, héritage
  3. Bases de données avec PHP
    • introduction / rappels sur les bases de données
    • interaction PHP / MySQL
  4. Autres capacités de PHP
    • gérer les sessions
    • traiter les formulaires
    • génération de fichiers CSV
    • génération de fichiers PDF
    • génération d’images
    • génération de graphiques
  5. Gagner en efficacité de codage
    • organiser son code source
    • bien documenter son code
    • frameworks et CMS
    • introduction au CMS WordPress
    • introduction au framework CodeIgniter

 

7 – WordPress – 2 jours

  1. Présentation générale
    • les CMS
    • pourquoi choisir WordPress ?
  2. Installation
    • téléchargement
    • création d’une base de données
    • installation
    • paramétrage initial
    • alternatives pour mettre en place le site
  3. Création et organisation des contenus
    • présentation de l’interface
    • l’éditeur WYSIWYG
    • notions d’articles et de page
    • création d’articles
    • création de pages
    • gestion des médias
    • gestion des catégories
    • hiérarchisation des pages
  4. Gestion des menus
    • les menus dans wordpress
    • créer et organiser les menus
  5. Gestion des widgets
    • les widgets dans wordpress
    • ajouter / paramétrer des widgets
    • rôle et utilisation de divers widgets
  6. Administration et maintenance
    • gestion des utilisateurs
    • gestion des thèmes
    • gestion des extensions
    • maintenance

Moyens pédagogiques, techniques, et d’encadrement
Support de formation remis au stagiaire.
Séances en salle, mise à disposition d’un ordinateur si souhaité ou utilisation de l’ordinateur personnel du stagiaire.
Formation basée sur la pratique, comportant un grand exercice fil rouge, ainsi que de nombreux tests.
La formation sera assurée par Alexandre Beaugrand, développeur web avec plus de 15 ans d’expérience.

Suivi, évaluation et attestation
En plus des exercices pratiques, des points réguliers ponctueront la formation : questions orales, reprises de certains points si nécessaire.
Le contact du formateur sera communiqué pour d’éventuelles questions post-formation.
Le formation nécessite la signature d’une feuille de présence ainsi que la le remplissage d’une feuille d’évaluation par stagiaire.
A la fin de la formation, le stagiaire se verra remis une attestation de fin de formation.