[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 675 € € HT Télécharger la fiche
Prochaines sessions
    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