Les bonnes pratiques de la conception Web avec XHTML, CSS et JavaScript

Public :

• Ce cours est destiné à tous ceux qui sont impliqués dans la conception, le développement ou la maintenance d'un site Web côté client.

Objectifs :

• Comprendre les principes et la structure d'un document XHTML pour en créer et/ou en maintenir.
• Utiliser les feuilles de styles CSS pour séparer la mise en forme du contenu. Vous serez capable de (suite)
• Ecrire et déboguer des programmes JavaScript.
• Ajouter de l'interactivité et des graphiques dynamiques à votre site Web.
• Créer des formulaires interactifs pour saisir et valider les informations entrées par les utilisateurs.
• Créer des pages Web dynamiques pour tous les navigateurs.

Pré-requis :

• Connaissance de l'internet et de son vocabulaire (Web, URL, …).
• Connaissance pratique de l'algorithmie et d'un langage de programmation.

Contenu pédagogique

Partie 1 : Les bonnes pratiques de la conception Web avec XHTML et CSS

Introduction

• Les standards W3C
• Les normes de conception Web
• • HTML et XHTML
  • Le Web sémantique
• Les éléments propriétaires
• Les navigateurs et le respect des standards
• • Le test Acid2
  • Le test Acid3
• Le contenu d'une page XHTML
• La syntaxe : les éléments et les attributs
• Les entités caractères, les couleurs et les espaces

Structure des documents XHTML

• Structure générale d'une page
• • Le DOCTYPE
  • La zone d'entête HEAD
  • Le corps de la page BODY
• Gestion de fenêtres et des cadres
• • Les éléments frameset, frame, iframe
• Mise en forme du texte
• • Caractères, paragraphes et titres
• Gestion des listes
• • non-ordonnées, ordonnées et de définition
• Gestion des lignes horizontales
• Gestion des tableaux
• Gestion des images
• Gestion des liens hypertextes
• • vers les pages, sites, email, FTP, …
• Gestion des formulaires et des éléments de formulaire
• Insertion des éléments de type méta information

Les feuilles de styles CSS

• Intérêts, principes et inclusions
• Syntaxe et les sélecteurs
• • Les sélecteurs simples
  • Les combinateurs
  • Les pseudo-éléments
• L'héritage et la cascade
• Les unités
• Le modèle de mise en forme
• Gestion du texte et des polices
• Gestion des couleurs et de l'arrière plan
• Propriétés des boites
• • Marges, bordures, padding
• L'affichage et la position des boîtes
• Gestion des listes

Partie 2 : Dynamisez vos sites Web avec JavaScript

Introduction et vue d'ensemble

• Possibilités et limitations
• Comparaison entre JavaScript et JScript
• Caractéristiques de JavaScript

Le modèle de programmation JavaScript

• Imbrication de JavaScript dans HTML/XHTML
• Conventions de formatage et de codage
• Concepts de programmation et de débogage
• • Utilisation de Firebug sous Firefox
• Problèmes de la sécurité et leur résolution

La syntaxe JavaScript

• Déclaration des variables
• Les types de données
• Manipulation de tableaux
• Les opérateurs et expressions
• Les structures et instructions de contrôles
• Déclaration et appel de fonctions
• Gestion des événements
• • Les bonnes pratiques
  • Le cas particulier d'Internet Explorer
• Manipulation des objets JavaScript

Manipulation des objets du navigateur

• Interaction avec le navigateur
• Utilisation des boîtes de dialogue " pop-up "
• Guide de saisie utilisateur
• Écriture de la ligne d'état du navigateur
• Détermination du type et de la version d'un navigateur

Validation des formulaires côté client

• Manipulation des champs des formulaires
• Vérification à la volée des champs des formulaires
• Validation des entrées des utilisateurs
• • Validation par expressions régulières

Manipulation du DOM HTML/XHTML

• Notion de nœud et d'arborescence de nœuds
• Manipulations DOM
• • Ajout, modification, suppression de noeuds
• Manipulation dynamique du HTML/XHTML
• Manipulation dynamique des styles CSS
• Création de menus dynamiques
• Création de listes déroulantes dynamiques
• Création de validateurs de champs de formulaires dynamiques

Optimisation et structuration du code JavaScript en utilisant des Frameworks

• Inconvénients de JavaScript
• Panorama des frameworks JavaScript
• • Les frameworks techniques
  • Les frameworks graphiques
  • Les frameworks de widgets
• Mise en œuvre du framework technique Prototype
• • Utilisation des syntaxes simplifiées
  • Simplification et centralisation de la gestion des événements
  • Simplification des traitements DOM HTML
• Mise en œuvre du framework graphique script.aculo.us
• • Mise en œuvre d'animations graphiques dynamiques sur les éléments constituant des pages HTML