[wpms_breadcrumb reverse="0"]
Developpement - Mobile - Formation numérique

Les fondamentaux du développement d’interfaces graphiques avec HTML5, CSS3 et JavaScript

Reference : IM22
5 jours - 2,620 € € HT
Prochaines sessions
  • Le 30/11/2020
Les fondamentaux du développement d’interfaces graphiques avec HTML5, CSS3 et JavaScript
Objectifs

  • Disposer des compétences nécessaires au développement d’un site internet full HTML5 / CSS3
  • Savoir produire des pages compatibles avec les différents navigateurs internet
  • Être capable de créer des interactions dynamiques avec l’utilisateur sans développement serveur
  • Comprendre comment tirer parti des dernières nouveautés HTLM5 comme le lecteur vidéos compatible mobiles

Pré requis

  • Connaissance internet standard, notions d’algorithmie

Modalités pédagogiques

Cours dispensé en mode présentiel avec une alternance d’apports théoriques et méthodologiques, et de mises en situations pratiques

Public visé
  • Développeurs .Net ou Java souhaitant savoir exploiter les possibilités offertes par HTML5 et CSS3
  • Chargés de développement d’applications informatiques
Inscription

Programmes de Les fondamentaux du développement d’interfaces graphiques avec HTML5, CSS3 et JavaScript

PRÉSENTATION

  • HTML : le langage du Web
  • Contexte historique

ENVIRONNEMENT ET STRUCTURE

  • Le concept des balises
  • Le bon usage des balises
  • Particularités et pièges du HTML
  • Le document HTML minimum

MISE EN FORME DU DOCUMENT

  • Le texte simple
  • Les objets d’un document
  • L’en-tête d’un document HTML

MISE EN FORME DU TEXTE

  • Les titres
  • Les paragraphes de texte
  • Le contrôle de passage à la ligne
  • Le formatage du texte
  • L’alignement
  • La taille, la couleur et la police
  • Les caractères spéciaux
  • Les commentaires
  • Les autres balises de texte

LES LISTES

  • Numérotées
  • A puces
  • Imbriquées
  • Les listes de définition

LES TABLEAUX

  • Les cellules de tableau
  • La fusion des cellules
  • Gestion de la taille du tableau
  • En-tête et légende
  • Les bordures
  • Les groupes de colonnes
  • Les groupes de lignes

LES HYPERTEXTES

  • La balise de liens
  • Liens vers une autre page
  • Liens à l’intérieur d’une page
  • Liens vers un autre site Web
  • Liens vers une adresse électronique
  • Liens pour télécharger un fichier
  • Les Target
  • L’attribut titre
  • La couleur des liens
  • Liens et feuilles de style

INSERTIONS D’IMAGES

  • Les images du Web
  • L’insertion d’une image
  • L’espace autour d’une image
  • L’alignement d’une image
  • L’insertion d’une couleur d’arrière-plan
  • L’insertion d’image d’arrière-plan
  • L’insertion d’un lien sur une image
  • Les images réactives

LES FORMULAIRES

  • La déclaration de formulaire
  • Zone de texte à une ligne, à plusieurs lignes
  • Menu déroulant
  • Bouton radio
  • Bouton checkbox
  • Bouton d’envoi
  • Bouton d’annulation
  • Bouton de commande
  • Les formulaires cachés
  • Les formulaires de transfert de fichier
  • Les formulaires de mot de passe
  • L’organisation des éléments d’un formulaire

LES MÉTA-INFORMATIONS

  • Doctype ou DTD

LES FEUILLES DE STYLE

  • Les propriétés : couleur, police, marge,…
  • Les classes
  • Dynamiser un site avec CSS
  • Gérer les positionnements

INTRODUCTION À JAVASCRIPT

  • JavaScript pour quoi faire ?
  • L’environnement du client Web
  • Le navigateur
  • Les outils

JAVASCRIPT : LE COEUR DU LANGAGE

  • La syntaxe
  • Les variables
  • Les fonctions globales
  • Les opérateurs
  • Les structures de contrôle
  • Les fonctions : définition, arguments, fonctions littérales, fonctions sous forme de données
  • Les objets personnalisés : constructeur, méthodes et propriétés, prototype, objets littéraux, objets sous forme de tableaux associatifs
  • Les objets globaux : Array, Date, Math, RegExp, String…
  • Manipuler les tableaux, les dates, les chaînes de caractères

LES OBJETS DU NAVIGATEUR

  • La hiérarchie des objets
  • Les principaux objets : window, document, location, screen, navigatior, form… Leurs propriétés et méthodes
  • Manipuler des fenêtres
  • Gérer des timers

INTRODUCTION À HTML5

  • Contexte : fonctionnement d’un site internet
  • Histoire du HTML
  • Les organismes de normalisation : WHATWG et W3C
  • La nouvelle vision HTML5
  • Roadmap HTML5

COMMENT UTILISER LE HTML5 AUJOURD’HUI

  • Savoir quand choisir le HTML5
  • Utiliser le HTML5 avec des navigateurs qui ne le supportent pas

LE BALISAGE HTML5

  • Structure d’une page
  • Doctype
  • Les nouveaux éléments et les éléments obsolètes
  • HTML5 et CSS3

LES FORMULAIRES

  • La balise form
  • Créer et utiliser des formulaires HTML5

AUDIO ET VIDÉO

  • Les éléments audio et vidéo
  • Les conteneurs, les codecs
  • Compromis pour un site à forte audience

VUE D’ENSEMBLE DES APIS

  • Les APIs HTML5
  • Audio et vidéo
  • Site web hors ligne
  • Drag et Drop

DESSINER EN HTML

  • Canvas vs SVG
  • Contexte et accessibilité

LA COMMUNICATION EN HTML5

  • Les évènements
  • Envoi de messages entre documents
  • Envoi de messages par canaux
  • Le push et les WebSockets pour plus de performances

LA GÉOLOCALISATION

  • Vue d’ensemble
  • La vie privée de l’utilisateur

STOCKAGE

  • Stockage local
  • Stockage en session
  • Bases de données SQL Web

CSS3 : STANDARDISER DES PROPRIÉTÉS

  • Vue d’ensemble : se passer d’images, éviter les astuces
  • Coins arrondis, ombres portées, transparence, animations
  • Mise en page et positionnement
  • Autres nouveautés

CSS3 : MISE EN PAGE ET POSITIONNEMENT

  • Vue d’ensemble : clarifier le code, éviter la multiplication de div imbriquées
  • Niveau de présentation
  • Mise en page par patron
  • Mise en page multi-colonnes
  • Mise en page par boites horizontales ou verticales
  • Positionnement par grille
  • Autres nouveautés
  • CSS3 pour mobiles et tablettes : bonnes pratiques