[wpms_breadcrumb reverse="0"]
Développement web et Mobilité

Créer des sites et applications WEB avec HTML5 et CSS3

Reference : IM10

5

jours
- 2775 € HT
Télécharger la fiche
Prochaines sessions
    Créer des sites et applications WEB avec HTML5 et CSS3
    Objectifs

    • Savoir développer un site Internet en HTML5
    • Comprendre comment créer un site « propre » en dissociant le contenu de la mise en forme
    • Assimiler les techniques permettant de développer des sites fonctionnant avec tous les navigateurs
    • Être capable de proposer des applications autorisant des interactions dynamiques avec les utilisateurs
    • Savoir profiter des dernières nouveautés HTML5 pour enrichir le contenu d’un site d’éléments vidéo ou audio

    Pré requis

    • Connaissance internet standard, notions d’algorithmie

    Modalités et délais d’accès

    Bulletin d'inscription à retourner complété

    Public visé

    Tout public

    Pré-inscription

    Programmes de Créer des sites et applications WEB avec HTML5 et CSS3

    1ère partie :

    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 meta-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
    • Insérer un script dans un document HTML/XHTML

    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
    • Écrire et lire des cookies

    2ème partie :

    Introduction

    • 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 HTML 5 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
    • Adapter ses formulaires à l’environnement mobile (téléphone, tablette)
    • Les contrôles disponibles (slider, etc.)
    • Mettre en place des validations

    Audio et Vidéo

    • Les éléments audio et vidéo
    • Contrôler l’interface, les paramètres par défaut
    • Les conteneurs, le problème des codecs
    • Mettre en place une politique HTML5 + Flash pour le multimédia

    Vue d’ensemble des APIs

    • Les APIs HTML5
    • Site web hors ligne : manifest
    • Drag et Drop
    • Extension de HTMLDocument
    • Extension de HTMLElement

    Dessiner en HTML

    • Canvas vs SVG
    • Dessiner une ligne, un carré, un cercle
    • Le remplissage
    • 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éo-localisation

    • Vue d’ensemble
    • Avec ou sans l’utilisation de GPS
    • Savoir manipuler l’API
    • La vie privée de l’utilisateur

    Stockage

    • Gears, le pionnier
    • Stockage local
    • Stockage en session
    • Bases de données SQL Web
    • IndexedDB sera-t-il utilisé ?

    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