Manipulations avancées du DOM

Manipulations avancées du DOM

1. Introduction- Les DTD et la syntaxe XML (structuration, commentaires).- La structure d'un document HTML : images, feuilles de style CSS, JavaScript.- La sémantique HTML : titres, paragraphes, liens, tableaux, formulaires.- Le modèle de document (DOM). Le protocole HTTP.- Optimisation du chemin critique de rendu (Critical Render Path).- Topographie des concepts et apports du HTML5.- Test de compatibilité, méthode de détection HTML5.1. Nouvelle structuration- Rappel sur les éléments traditionnels structurant un document HTML (doctype, html, head, body, meta...).- Les éléments de structure : nav, section, article, aside, header et footer.- Les catégories de contenus : Metadata, Flow, Sectioning, Heading, Phrasing, Embedded et Interactive content.- Intérêt des balises structurantes pour le référencement.- Imbrication et type de contenu.1. Les nouvelles balises HTML- Les balises et attributs obsolètes.- Les balises : mark, meter, time, figure, picture...- Les extensions de balises HTML existantes.- Les attributs : a, fieldset, iframe, area, button...- Les microformats. Présentation et avantages sur le référencement.- Les nouveaux champs et attributs de formulaires : range, autofocus, placeholder, menu...- Les dessins : Canvas versus SVG.- Les formats multimédias. Codecs et API Multimédia.- Gestion vidéo et audio avec les nouvelles balises : audio et video HTML5.2. Les sélecteurs CSS3- Rappel sur la syntaxe : les sélecteurs, les règles.- Sélecteurs de répétition nth-child(even), de cible target, de frère antérieur ~, d'enfant unique only-child.- Media Queries pour le chargement conditionnel des CSS selon la résolution ou l'orientation du terminal.2. Les couleurs et la mise en forme du texte- Rappel sur les déclarations RGB et RGBA.- Les modèles HSL et HSLA.- La propriété opacity.- Support des polices distantes @font-face.- Mise en forme du texte.- Création d'un système d'icônes.- Gestion des débordements par text-overflow.- Gestion des enchaînements par wrap-option, white-space-treatment...- Effets de couleur et d'ombre sur texte text-fill-color, text-shadow...- Les modes multicolonnes avec column-count, column-width...3. La mise en forme des boîtes et des fonds- Les ombres avec box-shadow.- Les coins arrondis avec border-radius...- La gestion des fonds multiples.- Les gradients de fond (-webkit-gradient).- Les fonds ajustés aux conteneurs.- Les transformations : translations, rotations, homothéties.- Les animations : les animations, les transitions.4. Grid Layout- Le principe de Grilles "Grid".- Réaliser une mise en page par bloc.- Positionnement de chacun des blocs sur la page.- Changement de la disposition et de la taille des blocs parents en fonction de la taille de l'écran de l'internaute.4- Flexbox- La fin des floats.- Répartitions des sous-blocs dans le bloc parent.- Ordre d'affichage des blocs.- Occupation de l'espace mis à disposition par les parents.- Centrer un bloc en hauteur en 2 lignes de code.- Changement de la disposition et de la taille de ces blocs en fonction de la taille de l'écran de l'internaute.