Module: Programmation Web Côté Client
Ce module de compétence particulière aborde les notions avancées du développement des sites web interactifs du côté client. Ce module constitue un préalable pour le module "Développement web côté serveur".
L'objectif du module est de faire acquérir les connaissances et les compétences nécessaires pour maîtriser le développement des sites web interactifs à l’aide des technologies très riches et d’actualité, à savoir le code HTML5, les feuilles de style CSS3, le langage JavaScript, les bibliothèques JQuery, les schémas XML ainsi que l’utilisation d’un éditeur web wysiwyg.
A l’issue de ce module, le stagiaire doit obligatoirement passer la certification Microsoft: «Programming in HTML5 with JavaScript and CSS3 - 70-480».
Stratégies d'enseignement:
Au démarrage du module, le stagiaire est renseigné sur la compétence à atteindre, les supports qu'il aura à sa disposition, les comptes rendus qu'il aura à faire. Au démarrage de chaque séance, le stagiaire est motivé par la nécessité de ce cours et ce pour remplir une tache bien précise ou acquérir des connaissances nécessaires pour pouvoir effectuer une tache.
Les études de cas et exercices abordés doivent avoir pour but de mettre en place les techniques de conception, de mise en page et de création d'interactivité au niveau des sites web.... L'apprentissage de ce module nécessite l'exploitation de nombreuses activités tels que:
Travaux pratiques en salle spécialisée abordant les techniques suivantes:
- Développer des pages web HTML5 intégrant notamment les tableaux et les formulaires en utilisant un éditeur de texte.
- Intégrer des feuilles de styles CSS3.
- Réaliser des pages web en utilisant un éditeur web.
- Réaliser des scripts clients intégrant notamment des fonctions personnalisées qui contrôlent l'activité de l'utilisateur.
- Manipuler les feuilles de styles CSS3 via des scripts clients.
- Gérer les événements des formulaires.
- Intégrer des composants multimédia et reproduire une charte graphique.
- Créer une structure XML bien formée et validée avec traitement XSLT.
- Créer un formulaire de login.
- Utiliser le Framework JQuery.
- Faire un compte rendu sur le travail réalisé.
- Faire un exposé oral sur le travail réalisé.
1- Introduction à HTML5 et CSS3:
• Différents composants d’un document HTML (titre, paragraphe, lien tableau, formulaire…).2- Histoire du HTML:
• Rappels sur les versions du HTML.• Organismes de normalisation WHATWG, W3C.
3- Normalisation et compatibilité de HTML5:
• Compatibilité de HTML5 avec les navigateurs.4- Les balises obsolètes:
• Balises obsolètes center, font, frame.. et meilleure gestion par les feuilles de style CSS3.A. Pratiquer les balises HTML5:
- Balises de structure d’un document HTML5:• déclaration.
• en-tête, corps.
- Balises de formatage:
• texte.
• paragraphe.
- Balises de listes:
• listes de définition.
• listes numérotées.
• listes à puces.
- Balises d'hyperliens:
• ancres.
• liens vers des adresses url.
- Balises d’objets multimédia en HTML5:
• images.
• imagemaps.
- Balises de tableaux:
• tableau.
• lignes.
• cellules.
• alignement.
• fusion.
- Nouvelles balises html5: section, article, aside, nav, menu, command, details, summary.
- Éléments sémantiques, microdata.
B. Manipuler les formulaires HTML5:
- Balise form.- Zones de saisie basiques (zones de texte, monoligne, multiligne, libellé, mot de passe…).
- Zones de texte enrichies (e-mail, URL, tél, nombre, curseur, couleur, date, recherche…).
- Contrôle de validation HTML (required…).
5. Connaître les formats et supports audio et vidéo:
• Codecs, WebM, MP3, MP4, H264, Ogg, Wav…A. Insérer des éléments audio et vidéo:
• Éléments audio et vidéo.B. Manipuler une feuille de style CSS:
- Mettre en place le CSS:• Appliquer un style : sélectionner une balise.
• Appliquer un style à plusieurs balises.
• Des commentaires dans du CSS.
• Appliquer un style : class et id.
• Les balises universelles.
• Appliquer un style: les sélecteurs avancés.
- Formatage du texte:
• Mettre en italique.
• Mettre en gras.
• Soulignement et autres décorations.
• L'alignement.
• La couleur et le fond.
• Couleur du texte.
• Indiquer le nom de la couleur.
• Couleur de fond.
- Images de fond:
• Appliquer une image de fond.
• Options disponibles pour l'image de fond.
• Combiner les propriétés.
• Plusieurs images de fond.
• La transparence.
• La propriété opacity.
- Les bordures et les ombres:
• Bordures standard.
• Bordures arrondies.
• Les ombres.
• box-shadow: les ombres des boîtes.
• text-shadow: l'ombre du texte.
- Création d'apparences dynamiques:
• Au survol.
• Au clic et lors de la sélection.
• :active : au moment du clic.
• :focus : lorsque l'élément est sélectionné.
C. Effectuer la mise en page et le positionnement:
- Positionnement CSS, modèles de boîtes:• Positionnement relative.
• Positionnement absolu.
• Positionnement fixed.
D. Appliquer les transitions en CSS3:
- Transitions CSS3.- Animations 2D et 3D.
6. Connaître les éléments de base de JavaScript:
• Notions de script, variables, opérateurs, tableaux, boucles, fonctions, erreurs et exceptions.A. Pratiquer la programmation en JavaScript:
- Types et déclaration de variables.- Utilisation des tableaux.
- Opérateurs et expressions.
- Instructions de conditions et de boucles.
- Fonctions et procédures.
- Gestion du dialogue avec l’utilisateur.
- Intégration du script dans du code HTML.
- Gestion des exceptions.
- Interaction avec les objets prédéfinis:
• date.
• heure.
• chaîne.
- Manipulation des contenus de formulaires, fonctions de validation.
- Événements liés aux formulaires.
B. Utiliser le Framework JQuery:
- Présentation de jQuery.- Méthodes utilitaires de jQuery.
- Les sélecteurs.
- La gestion des événements.
- Manipulation des contenus de formulaires, fonctions de validation.
- Exploitation des objets JSON.
- Utilisation des requêtes asynchrones AJAX.
C. Manipuler les fichiers XML:
- Composants d’un document XML:• prologue.
• arbre d’éléments.
• commentaire.
- Document DTD.
- Création des schémas XML, document XSD:
• principes de validation de la structure d’un document XML.
• définition du schéma.
• définition des éléments et des attributs.
• types simples et complexes.
• regroupement d’éléments.
- XPath.
- Mettre en forme un document XML pour le publier sur Internet avec la technologie XSLT.
Le lien de téléchargement sera bientôt disponible
....
Advertisement
les Liens de téléchrgement :
Télécharger le cours du Module: Programmation Web Côté Client
Afficher tout le texte
Enregistrer un commentaire