CURSUS COMPLET

Intégration web

Cette formation est destinée à faire de vous quelqu’un d’autonome dans l’intégration web, c’est à dire que vous serez en mesure de transformer une maquette ou un croquis en page web. Dans cette formation, nous nous focalisons sur l’aspect de la page web, sans en gérer les fonctionnalités (plugins, évènements javascript, connexion à la base de données, etc.).

Nous y voyons le HTML5 / CSS3, ainsi que le framework CSS le plus connu : Bootstrap, afin de savoir réaliser des mises en page encore plus rapidement si nécessaire. Par ailleurs, cette formation aborde les techniques du reponsive design, un incontournable vous permettant d’adapter votre page web à des écrans de toutes tailles.

Durée : 5 jours, soit 35 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 l'intégration de sites simples, formation qui ne requiert aucune connaissance en programmation.

Objectif : acquérir une autonomie dans l'intégration de sites web simple : savoir convertir un maquette en exportant et préparant les éléments, savoir les intégrer dans une page web et transcrire une maquette en code HTML / CSS. Savoir tirer partie de Bootstrap pour accélerer l'intégration, et utiliser les techniques du Responsive Design pour que l'intégration soir flexible et s'adapte aux diverses tailles d'écrans.

Tarif standard: 2500 € H.T.
Intra-entreprises : 600 € 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. Bootstrap – 1 jour
  3. Responsive Design – 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 – 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

 

3 – Responsive design – 2 jours

  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

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.