HTML5 CSS3 Responsive, création de pages web


3 j (21 heures)
Tarif : 1950€HT
À DISTANCE PRESENTIEL
 5/5  
Ref : HTM5

Descriptif de la formation

L’orientation web des applications actuelles a conduit à l’émergence d’un nouveau standard, plus adapté aux besoins et usages que la norme précédente. Enrichissement du jeu de balises, améliorations sémantiques, nouvelles fonctionnalités externes : le HTML5 apporte un nouveau souffle à un langage vieillissant, et le repositionne au centre du développement Web. Au-delà des évolutions de langage, c’est une nouvelle approche du développement des IHM mais aussi des modèles de communication qu’il est nécessaire d’acquérir pour tout concepteur d’application web moderne. A l’issue de la formation, vous serez capable de créer des applications web dynamiques et responsives, en utilisant conjointement les nouvelles possibilités du langage HTML5 et des feuilles de style CSS3.

Action collective OPCO ATLAS - Inscription CampusAtlas

'

Les objectifs

- Concevoir et développer des applications Web en HTML5 et CSS3
- Mettre en place et valider la structure HTML 5 des pages Web
- Habiller des pages Web en CSS 3 afin de les rendre plus attractives
- Produire des pages compatibles avec les différents navigateurs internet
- Rendre responsive design les pages Web d'un site
- Créer des images et des animations vectorielles

En quelques mots...

Public

Développeurs, concepteurs web, chefs de projets…

Pré-requis

Niveau : Avoir des connaissances internet standard. Une expérience pratique du web est souhaitable.
Techniques (formations en classe virtuelle) : Vous devez disposer d’un ordinateur connecté à internet, d’un micro et d’une caméra

Méthodes et Moyens pédagogiques

Modalité : Formation présentielle ou Formation distancielle (classe virtuelle) - Inter / Intra - Groupes de 4 à 12 stagiaires
Méthodes : Présentation des concepts, discussion technique, démonstrations, exercices et TP
Matériel :
Présentiel : Un poste informatique par stagiaire connecté à internet, à une imprimante en réseau et au réseau informatique,
Les salles sont équipées d’un tableau interactif ou d’un vidéoprojecteur et d’un paperboard
Distanciel : Aelion met à disposition de chaque stagiaire
- Un PC équipé des outils et logiciels nécessaires à la formation auquel vous accédez via un outil de prise en main à distance
- Un accès à un outil de classe virtuelle (Meet)
Support de formation : Un support de formation sera remis à chaque stagiaire en fin de formation : plateforme collaborative intégrant le code source des exercices réalisés en formation, webographie, mémos

Modalités de suivi et d'évaluations

Questionnaire d’évaluation des pré-requis, suivi des connaissances tout au long de la formation, Evaluation des acquis en fin de formation
Questionnaire d’évaluation de la satisfaction en fin de stage, feuille de présence émargée par demi-journée par les stagiaires et le formateur, Attestation de fin de formation

Informations pratiques

Accessibilité , modalités et délais d'accès

Programme mis à jour le 15/01/2024

Programme détaillé

S1 – CONCEVOIR ET DEVELOPPER DES APPLICATIONS WEB EN HTML5 ET CSS3

  • A l’issue de cette séquence, vous êtes capable d’expliquer le fonctionnement des sites web ou applications web. Vous savez identifier le rôle des langages HTML, CSS et JS. Vous comprenez la vision de HTML5 (triptyque HTML, CSS, JS). Vous savez créer une page HTML et utiliser des éléments et balises de base (DOCTYPE, titres, textes, images, liens, tableaux, formulaires).
  • Fonctionnement d’un site internet ou d’une application web
  • Principes et nouveautés de HTML5
  • Environnement de développement
  • Utiliser HTML5 avec CSS3 et Javascript

S2 – METTRE EN PLACE ET VALIDER LA STRUCTURE HTML 5 DES PAGES WEB

  • A l’issue de cette séquence, vous êtes capable de structurer une page HTML avec les balises de structure adéquates. Vous savez que le respect des bonnes pratiques HTML (comme la structure des pages, l’emploi de certaines balises ou attributs) permet de favoriser la validation des pages ou l’accessibilité.
  • Les balises HTML5 et balises de structure
  • Les validateurs HTML (normes W3C)
  • Les normes d’accessibilité (normes WCAG, RGAA)

S3 – HABILLER DES PAGES WEB EN CSS 3 AFIN DE LES RENDRE PLUS ATTRACTIVES

  • A l’issue de cette séquence, vous êtes capable de charger et utiliser des styles sur une page HTML.
  • Le design et les CSS3
  • - Les transformations
  • - Les animations
  • - Les dégradés et effets de bordures
  • - Pseudo-classes et pseudo-éléments
  • - Les polices
  • - Le Responsive-Design et les média-queries
  • - Les Framework CSS avec LESS ou SASS

S4 – PRODUIRE DES PAGES COMPATIBLES AVEC LES DIFFERENTS NAVIGATEURS INTERNET

  • A l’issue de cette séquence, vous êtes capable d’identifier les contraintes de rétrocompatibilité. Vous savez identifier différentes méthodes pour y remédier. Vous savez utiliser l’une d'entre elles.
  • Tableaux de compatibilité navigateurs HTM5, CSS3
  • Outils de détections (par exemple Modrnizer)
  • Rétrocompatibilité et limites avec les polyfills
  • Rétrocompatibilité avec les outils de compilation CSS

S5 – RENDRE RESPONSIVE DESIGN LES PAGES WEB D'UN SITE

  • A l’issue de cette séquence, vous êtes capable d’identifier les résolutions d’écrans principales. Vous savez appliquer les médias-queries pour cibler une résolution spécifique. Vous savez tester le responsive.
  • Les médias queries CSS et le flex
  • Les librairies de grilles
  • Les outils pour le responsive
  • - Outils développeurs intégrés au navigateur et vue responsive
  • - Emulation de navigateurs ou périphériques (local ou cloud)
  • - Tests automatisés et captures d’écrans
  • - Créer des images et des animations vectorielles

S6 – CREER DES IMAGES ET DES ANIMATIONS VECTORIELLES

  • A l’issue de cette séquence, vous êtes capable d’identifier le principe du rendu vectoriel en HTML. Vous savez utiliser des images ou animations vectorielles en HTML.
  • Images matricielles vs. Images vectorielles
  • Polices d’icones
  • Dessins CSS (formes géométriques simples) et animations
  • SVG et animations
  • Canvas et animations

Ils parlent de cette formation

'

Test témoignage Excel - Initiation

Marcel DUPONT

'

Test témoignage Excel - Initiation

Maxime DUPONT

'

Test témoignage Excel - Initiation Test

Axel ALEX

'

Test commentaire Excel - Initiation

Marcel DUPONT

'

Test témoignage Excel - Initiation

Marcel DUPONT

'

Test témoignage Excel - Initiation

Marcel DUPONT

'

Test témoignage Excel - Initiation

Marcel DUPONT

'

Test témoignage Excel - Initiation

Marcel DUPONT

'

Test témoignage Excel - Initiation

Marcel DUPONT