Formation Créer des sites WEB dynamiques avec HTML et CSS

Le dialogue Navigateur/Serveur Web.

Format général d’une URL (Uniform Resource Locator)
Cas du site WEB et exemple de « dialogue » HTTP
Pourquoi différents types de requêtes (GET, POST, etc..) ?

La structure d'un document HTML

Structure type d'une page HTML
Les balises principales HTML (en-tête, corps, etc.)
L'instruction !DOCTYPE.
Les balises BDO, INS et DEL
Les autres formats (texte, image, vidéo, etc.)
Balises et moteurs de recherche

Liens entre les documents

Les ancres (changement de site, nouvelle page, etc.)
Références absolues et relatives des URL
Ouvrir ou non une nouvelle fenêtre
Se déplacer rapidement dans une page (liens internes)
Liens vers d’autres applications (mail, forum, ftp, etc.)

Les feuilles de style CSS

Que signifie « Cascade » dans Cascade Style Sheet (CSS) ?
Définition d'un style
La balise LINK
La notion de cascade
Les attributs des styles

Mise en forme du texte

Privilégier les CSS
Balises relatives aux paragraphes
Les sauts de ligne
Les titres
Les lignes horizontales
Formatage des textes
Les balises DIV et SPAN
Conseils et astuces

Mise en forme des caractères

Privilégier les CSS
Les styles physiques
Les caractères accentués
Les styles logiques

Les listes

Recommandations sur les listes ?
Les listes à puce
Les listes ordonnées (numérotation automatique))
Les listes avec définitions (format dictionnaire)
Les listes de menu et répertoire
Combinaison des différentes listes

Les images et les couleurs

Avantages et inconvénients des différents formats (GIF, JPEG, PNG)
La balise IMG
La balise OBJECT et PARAM
Les images de fond
Décomposer une image en zones (images réactives,, , etc.)
Recommandations sur les couleurs (charte graphique)

Les tableaux

Les balises de définition de table et leurs attributs TABLE, TH, TR, TD, etc...
Aligner les éléments du tableau
Les tableaux complexes
Fusion de lignes et de colonnes
Mise en page des tableaux
Gestion des couleurs
Imbrications de tableaux

Le multifenêtrage

Définition
Utilisation
Création
Les balises de multifenêtrage : frame et frameset
La balise noframes

Les formulaires

Exemples de formulaire (inscription, connexion, recherche, etc.)
Qui va traiter le formulaire ?
Les balises utilisées par les formulaires (INPUT, SELECT, TEXTAREA, etc.)
Les boutons (radio, reset, submit, graphiques, etc.)

Les calques

Présentation et définition des calques
Mise en place des calques avec les feuilles de style
Utilisation des balises DIV et SPAN
Les layers

Présentation des technologies HTML5

HTML5, standards et (rétro-)compatibilité
Navigateurs et outils de travail (Modernizr, etc.)
HTML5 vs Flash
Sémantique, référencement et accessibilité en HTML5
DOCTYPE, encodage, règles de syntaxe
Les nouvelles balises sémantiques
Micro-formats et micro-données
Quels impacts du HTML 5 sur le référencement ?

HTML5 Forms (Web Forms)

Vue d’ensemble des formulaires nouvelle génération
Les nouveaux éléments (progress, meter, datalist, keygen, output)
Nouveaux types de champs (tel, url, email, search, number, etc.)
Nouveaux attributs (autofocus, placeholder, form, required, etc.)
Validation par le navigateur (required, pattern, formnovalidate)
Suggestions automatiques
Exemple récapitulatif

Vidéo et audio

Codecs et formats (H264/MP4, OGG/theora, WebM/VP8)
Compatibilité et navigateurs
Les outils de conversion (rapide)
Savoir utiliser les services existants (dailymotion, youtube,viemo)
Les balises (video,audio)
Proposer plusieurs sources dans plusieurs formats
Pré-requis (type MIME et .htaccess)
Les attributs (controls, preload, autoplay, poster)
Test de téléchargement d’une vidéo selon plusieurs formats depuis plusieurs navigateurs

Les nouveaux sélecteurs CSS3

Les pseudo-classes et pseudo-éléments
Les sélecteurs d’attributs (^, $, *)
Exemple d’application de style « intelligente » combinant les nouveautés

Mise en page et box model

Les positionnements (absolu, fixe, naturel)
Mise en page avec float
Mise en page avec Flex (box-sizing, border box, etc.)
Système de grid
Disposition en colonnes
Régions et exclusions
Limites et apports des frameworks (bootstrap, etc.)

Graphisme avancé

Polices de caractères personnalisées
Couleurs avancées et dégradés
Ombres et opacité
Bordures et arrière-plans avancés

Animations et transformations

Transformations de base (rotation, translation, etc.)
Transformations 3D (perspective)
Transitions : changement progressif d'un style
Animations autonomes

Responsive design

Problèmes techniques posés par l’hétérogénéité (PC, téléphone, tablette)
Solutions apportées par le Responsive Design
Pré-requis pour faire du responsive Design
Media-queries : s'adapter à la résolution d'écran et à l'orientation
Viewport
Déterminer la valeur d’une propriété CSS (calc)
Positionnement colonnes, tailles fluides et media queries

Compatibilité des navigateurs avec HTML5/CSS3

Etat des lieux
La détection des capacités des navigateurs
Recommandations

La place de Javascript dans les architectures WEB

Ce que ne permettent pas de faire le HTML et le CSS
Possibilités et traitements classiques en Javascript
Aperçu du langage
Comprendre la constellation de framework Javascript (Jquery, ExtJS, Angular, Node.js, PhoneGAP, ionic, etc.)

Les outils et les méthodes du développeur WEB

Quels outils pour développer et debugguer ?
Les outils pour améliorer ma productivité et ma rapidité de codage
Les outils d’une bonne veille technique
Les méthodes de codage moderne pour un code maintenable
Les tendances à venir