Application HyperMedia

Module 20 : Applications Hypermédias
Code : TDI-20		Durée : 80 h
PRECISIONS SUR LE COMPORTEMENT ATTENDU	CRITERES PARTICULIERS DE PERFORMANCE
A.     Concevoir une application hypermédia.	§  S’adapter aux notions du client, serveur. §  Distinguer entre les sites web statiques et dynamiques. §  S’initier aux échanges via le protocole http. §  Différence entre Internet/Intranet/Extranet ; §  Différents types d’applications pour Internet ; Architecture du web ; §  Différentes technologies de développement pour le web. §  Plateforme matérielle et logicielle nécessaire pour l’Install d’un logiciel de services web ; §  Configuration TCP/IP et DNS ; §  Configuration un site web par défaut et des sites virtuels. ·Fonctionnalités d’une application hypermédia : ·type ; ·objectifs ; ·population cible ; ·Spécifications techniques et fonctionnelles. ·Établir un système de navigation : ·organigramme ; · barres de navigation. ·Charte graphique : ·choix des couleurs ; ·choix des images ; ·typographie ; ·mise en page. ·Cahier de charges.
B.     Écrire du code HTML.	·Structure d’une page HTML ·Balises de structure d’un document HTML5 : ·déclaration ; ·en-tête, corps. ·S’initier aux balises de structure et leurs attributs : HR, P, BR, H1-H6. · Balises de listes : ·listes de définition ; ·listes numérotées ; ·listes à puces. ·Balises de formatage : ·texte ; ·paragraphe. · S’initier aux balises de formes et leurs attributs : B, Strong, I, Em, U, Strike, Blink, Marque, Acronym, Font, Sub, Sup. · Se familiariser avec la balise Div. ·Balises d’hyperliens : ·ancres; ·liens vers des adresses url. · S’initier aux liens externes.             · Maitriser les liens externes. ·Balises d’objets multimédia en HTML5 : ·images ;             · Rendre une image cliquable. · Manier les attributs HSpace, VSpace et            border ·imagemaps ; ·fichiers sons ; ·séquences vidéo. ·Balises de tableaux : ·tableau ; ·lignes ; ·cellules ; ·alignement ; ·fusion. ·Balises de cadres : ·types de cadres ; ·jeu de cadres. · IFrames · Tableaux ·Balises de formulaires : ·formulaire ; ·différents types de champ. ·Contrôles riches ·Validation via HTML 5 ·Balises de création de feuilles de style en CSS3 : ·styles liés ; ·styles incorporés ; ·styles intégrés. ·Insérer des balises de contenu exécutables : ·applets java. ·Composants ActiveX.
C.     Développer des scripts clients.	·styles incorporés ; ·styles intégrés.               · S’initier à la syntaxe CSS             · Connaitre les types de sélecteurs               · Propriété Background · Propriétés Texte, Font, List et liens. · Propriétés de transition et transformation · Propriétés d’animations. · Propriétés Margin, Padding et Border · Structurer une page avec CSS. · Propriétés Float et Position ·Insérer des balises de contenu exécutables : ·applets java. ·Composants ActiveX. ·    Types et déclaration de variables. ·    Opérateurs et expressions. ·    Fonctions et procédures. ·    Gestion du dialogue avec l’utilisateur. ·    Intégration du script dans du code HTML. ·    Gestion des exceptions. ·    Instructions de conditions et de boucles. ·    Interaction avec les objets prédéfinis : ·  date ; ·  heure ; ·  chaîne. ·    Utilisation des tableaux. ·    Interaction avec le modèle objet du navigateur ·    La gestion des événements ·    Accès à l'arbre DOM ·  Lire, modifier le style et le contenu des balises. ·  Modifier l’arborescence d’une page web en ajoutant, supprimant et remplaçant des balises. ·    Validation, coté client, des données saisies par l’utilisateur ·    Objet Window ·    Présentation de jQuery ·    Méthodes utilitaires de jQuery ·    Les sélecteurs ·    Effets visuels et interface riche avec jQuery ·    Ajax et jQuery
D.     Développer une application hypermédia en utilisant un éditeur wysiwyg.	·Système de navigation de l’application : ·les liens hypertextes ; ·les barres de navigation ; ·les comportements). ·Réaliser la mise en page de l’application hypermédia : ·les cadres ; ·les tableaux ; ·les feuilles de style. ·Effets spéciaux : ·Images ; ·animations pour le web. ·Préparer l’application pour l’exploitation en interne ou sur Internet : ·test sur différents types du navigateur ; ·vitesse de connexion; ·résolution d’écran ; ·nombre de couleurs.

Activité d’apprentissage 1
Module	TDI-20	Applications hypermédias
Précision	A	Concevoir une application hypermédia
Code Activité	A001
Activité	Répondre à des affirmations concernant le processus d’exécution d’une requête web
Durée     Phase d’apprentissage	2H30 BASE
Détails sur les objectifs visés par l’activité	Cette activité d’apprentissage doit vous permettre de : §  S’adapter aux notions du client, serveur. §  Distinguer entre les sites web statiques et dynamiques. §  S’initier aux échanges via le protocole http. §  Différence entre Internet/Intranet/Extranet ; §  Différents types d’applications pour Internet ; Architecture du web ; §  Différentes technologies de développement pour le web.
Matière d’œuvre et/ou  outillage

Description de l’activité

Travail à réaliser : Répondre aux questions suivantes : 1-     Qu’est-ce qu’une architecture client-serveur ? 2-     Comment communique le client et le serveur dans le web ? 3-     A quoi sert le DNS ? 4-     Quels types de messages peut-on avoir dans un protocole http ? 5-     Quel est le rôle de chaque un des langages suivants : HTML, CSS, JavaScript et Asp.net ? 6-     Quelle est la différence entre un site web statique et dynamique ?

Activité d’apprentissage 2
Module	TDI-20	Applications hypermédias
Précision	A	Concevoir une application hypermédia
Code Activité	A002
Activité	Établir un cahier de charges
Durée     Phase d’apprentissage	2H30 BASE
Détails sur les objectifs visés par l’activité	Cette activité d’apprentissage doit vous permettre de : §  Fonctionnalités d’une application hypermédia : o   type ; o   objectifs ; o   population cible ; o   Spécifications techniques et fonctionnelles. §  Établir un système de navigation : o   organigramme ; o   barres de navigation. §  Charte graphique : o   choix des couleurs ; o   choix des images ; o   typographie ; o   mise en page. §  Cahier de charges.
Matière d’œuvre et/ou  outillage

Description de l’activité

Travail à réaliser : Établir un cahier de charges d’un site web de présentation des activités d’une société de votre choix en précisant les éléments suivants : -PRESENTATION DE L’ENTREPRISE ü  Histoire ü  Taille (CA et nombre de salariés) ü  ses activités principales ü  ses produits et services vendus ü  Positionnement concurrentiel -Existant ü  Logo et identité visuelle, ü  Plaquettes, ü  Courriers, ü  E-mails avec ü  Nom de domaine, ü  PLV, ü  Intranet, ü  Extranet, ü  Blog, ü  Newsletter, ü  Compte sur les réseaux sociaux, -Définir les outils à conserver ou supprimer. -Comment interfacer le nouveau site avec cet existant ? Faut-il assurer la reprise des données dans le projet ? -Objectifs du site ü  site d’information, ü  support de communication, ü  support de fidélisation, -Principaux résultats attendus: ü  Chiffre d’affaire souhaité dans le cas d’un site de vente ü  Nombre de nouveaux prospects ü  Améliorer l’image de l’entreprise ü  inscrits club newsletter -A qui s’adresse le site ü  Le nombre de cibles différentes et les hiérarchiser. ü  Caractéristiques de la cible (entreprise, particulier, étudiant, retraité...), ü  Importance de la cible (primaire, secondaire), ü  Centres d’intérêts de la cible (recherche d’informations, besoins de services...) -Plan du site ü  Proposez une arborescence pour montrer l’architecture du site telle que vousl’imaginez. Celle-ci sera présentée sous forme schématique avec les rubriquesprincipales, les sous rubriques et les liens qui les unissent. -Contenus ü  Image ü  Photos ü  Textes ü  Éléments à scanner -Fonctionnalités ü  Lister de manière exhaustive les fonctionnalités attendues du projet, par ordre ü  de priorité. Cette partie peut être développée selon la rubrique où elle sera présente -Langues ü  Préciser ici en quelles versions linguistiques le site sera disponible. ü  Si le site est en plusieurs langues, s’agira-t-il de versions identiques ou deversions adaptées. Dans ce cas précisez. ü  Indiquez également qui se chargera des éventuels besoins en traduction. -Charte graphique et charte éditoriale ü  Quelle sera la charte graphique à respecter ü  Qu’attendez-vous en termes de charte graphique ü  Existe-t-il une charte éditoriale ü  Faudra-t-il créer une charte éditoriale spécifique au web -Développement ü  Dynamique ou statique ü  formulaire de collecte d’information, ü  Gestion automatique d’actualités, ü  Interface d’administration, ü  Dépôt du nom de domaine et adresses mail ü  Référencement ü  Statistiques de fréquentation -Hébergement ü  Interne ou externe

Activité d’apprentissage3
Module	TDI-20	Applications hypermédias
Précision	B	Écrire du code HTML
Code Activité	B001
Activité	Manipuler les balises de structure
Durée     Phase d’apprentissage	2H30 Entrainement
Détails sur les objectifs visés par l’activité	Cette activité d’apprentissage doit vous permettre de : §  Structure d’une page HTML §  Balises de structure d’un document HTML5 : o   déclaration ; o   en-tête, corps. §  S’initier aux balises de structure et leurs attributs : HR, P, BR, H1-H6.
Matière d’œuvre et/ou  outillage	15 Postes de travail équipés d’un navigateur et un éditeur HTML en l’occurrence NotePad.

Description de l’activité

Travail à réaliser : Déterminer :             - Les balises de formes qui doivent être utilisées - Leurs attributs Réalisezla page précédente puis affichez-la dans le navigateur de votre choix

Activité d’apprentissage4
Module	TDI-20	Applications hypermédias
Précision	B	Écrire du code HTML
Code Activité	B002
Activité	Manipuler les balises de listes
Durée     Phase d’apprentissage	2H30 Entrainement
Détails sur les objectifs visés par l’activité	Cette activité d’apprentissage doit vous permettre de : §  Balises de listes : o   listes de définition ; o   listes numérotées ; o   listes à puces.
Matière d’œuvre et/ou  outillage	15 Postes de travail équipés d’un navigateur et un éditeur HTML en l’occurrence NotePad.

Description de l’activité

Travail à réaliser : Déterminer :             - Les balises de listes qui doivent être utilisées - Leurs attributs - Utiliser la balise « Pre » pour dessiner la maison dans le bas de la page Réalisezla page précédente puis affichez-la dans le navigateur de votre choix

Activité d’apprentissage5
Module	TDI-20	Applications hypermédias
Précision	B	Écrire du code HTML
Code Activité	B003
Activité	Manipuler les balises de styles
Durée     Phase d’apprentissage	30 Min Entrainement
Détails sur les objectifs visés par l’activité	Cette activité d’apprentissage doit vous permettre de : §  Balises de formatage : o   texte ; o   paragraphe. o   S’initier aux balises de formes et leurs attributs : B, Strong, I, Em, U, Strike, Blink, Marque, Acronym, Font, Sub, Sup. o   Se familiariser avec la balise Div.
Matière d’œuvre et/ou  outillage	15 Postes de travail équipés d’un navigateur et un éditeur HTML en l’occurrence NotePad.

Description de l’activité

Travail à réaliser : Déterminer :             - Les balises de styles qui doivent être utilisées - Leurs attributs - Centrer les deux dernières phrases en utilisant une balise conteneur adaptée Réalisezla page précédente puis affichez-la dans le navigateur de votre choix

Activité d’apprentissage6
Module	TDI-20	Applications hypermédias
Précision	B	Écrire du code HTML
Code Activité	B004
Activité	Manipuler les liens internes
Durée     Phase d’apprentissage	30 Min Entrainement
Détails sur les objectifs visés par l’activité	Cette activité d’apprentissage doit vous permettre de : §  Balises d’hyperliens : o   ancres; o   liens vers des adresses url.
Matière d’œuvre et/ou  outillage	15 Postes de travail équipés d’un navigateur et un éditeur HTML en l’occurrence NotePad.

Description de l’activité

Travail à réaliser : Déterminer :             - Le type de liens utilisés - La méthodologie pour découvrir le type de liens affichés Compléter la page de l’activité B001 en affichant au début de la page les liens précédents puis visualisez le résultat dans le navigateur de votre choix

Activité d’apprentissage7
Module	TDI-20	Applications hypermédias
Précision	B	Écrire du code HTML
Code Activité	B005
Activité	Manipuler les liens externes
Durée     Phase d’apprentissage	30 Min Entrainement
Détails sur les objectifs visés par l’activité	Cette activité d’apprentissage doit vous permettre de : §  Balises d’hyperliens : o   S’initier aux liens externes.
Matière d’œuvre et/ou  outillage	15 Postes de travail équipés d’un navigateur et un éditeur HTML en l’occurrence NotePad.

Description de l’activité

Travail à réaliser : Déterminer :             - Le type de liens utilisés - Le protocole utilisé dans chaque un des liens précédents. Compléter la page de l’activité B001 en ajoutant le morceau de page précédent à sa fin, puis affichez le résultat dans le navigateur de votre choix

Activité d’apprentissage8
Module	TDI-20	Applications hypermédias
Précision	B	Écrire du code HTML
Code Activité	B006
Activité	Utiliser les liens externes dans une arborescence HTML.
Durée     Phase d’apprentissage	2H Maitrise
Détails sur les objectifs visés par l’activité	Cette activité d’apprentissage doit vous permettre de : §  Maitriser les liens externes.
Matière d’œuvre et/ou  outillage	15 Postes de travail équipés d’un navigateur et un éditeur HTML en l’occurrence NotePad.

Description de l’activité

Travail à réaliser : Déterminer :             - Le chemin de chaque lien En affichant dans chaque page le nom de la ville sous forme de titre un paragraphe de votre choix contenant des informations sur cette ville.Réalisez les pages suivantes -       Les pages des villes marocaines doivent être enregistrées dans le répertoire du Maroc et les villes françaises doivent être enregistrées dans le répertoire de la France. -       Chaque page doit contenir sous forme de menu horizontal des liens vers toutes les autres pages.

Activité d’apprentissage9
Module	TDI-20	Applications hypermédias
Précision	B	Écrire du code HTML
Code Activité	B007
Activité	Insérer les images.
Durée     Phase d’apprentissage	30 Min Entrainement
Détails sur les objectifs visés par l’activité	Cette activité d’apprentissage doit vous permettre de : §  Balises d’objets multimédia en HTML5 : o   images ; o   Rendre une image cliquable.
Matière d’œuvre et/ou  outillage	15 Postes de travail équipés d’un navigateur et un éditeur HTML en l’occurrence NotePad.

Description de l’activité

Travail à réaliser : Déterminer :             - L’attribut nécessaire pour afficher un message ToolTip              - Les attributs nécessaires au dimensionnement et centrage de l’image. -       Créer une page web incluant l’image précédente en veillant à ce que lorsqu’on clique sur cette image, elle nous redirige vers lien internet suivant htttp://www.dgr.ma

Activité d’apprentissage10
Module	TDI-20	Applications hypermédias
Précision	B	Écrire du code HTML
Code Activité	B008
Activité	Maitriser l’espacement et les bordures des images.
Durée     Phase d’apprentissage	2H Entrainement
Détails sur les objectifs visés par l’activité	Cette activité d’apprentissage doit vous permettre de : §  Balises d’objets multimédia en HTML5 : o   Manier les attributs HSpace, VSpace et border
Matière d’œuvre et/ou  outillage	15 Postes de travail équipés d’un navigateur et un éditeur HTML en l’occurrence NotePad.

Description de l’activité

Travail à réaliser : Déterminer :    - Les attributs d’espacement, bordure qui régissent les images ci-dessus en plus de leurs valeurs. -       Créer une page web principale reflétant la configuration précédemment illustrée, en plus de 9 autres pages montrant de manière agrandie l’une des images citées précédemment. Chaque page n’apparait que lorsque son image respective est cliquée dans la page principale.

Activité d’apprentissage 11
Module	TDI-20	Applications hypermédias
Précision	B	Écrire du code HTML
Code Activité	B009
Activité	S’initier aux ImagesMaps
Durée     Phase d’apprentissage	2H30 Entrainement
Détails sur les objectifs visés par l’activité	Cette activité d’apprentissage doit vous permettre de : §  Balises d’objets multimédia en HTML5 : o   imagemaps ;
Matière d’œuvre et/ou  outillage	15 Postes de travail équipés d’un navigateur et un éditeur HTML en l’occurrence NotePad.

Description de l’activité

Travail à réaliser : Créer 5 Pages représentant les continents du monde. chacune est accessible après un clic sur l’emplacement du continent sur la carte. (Utiliser le logiciel MapEdit)    En cliquant sur les continents, on atteindra les images correspondantes

Activité d’apprentissage 12
Module	TDI-20	Applications hypermédias
Précision	B	Écrire du code HTML
Code Activité	B010
Activité	S’initier aux contrôles audio et vidéo.
Durée     Phase d’apprentissage	2H30 Entrainement
Détails sur les objectifs visés par l’activité	Cette activité d’apprentissage doit vous permettre de : §  Balises d’objets multimédia en HTML5 : o   fichiers sons ; o   séquences vidéo. .
Matière d’œuvre et/ou  outillage	15 Postes de travail équipés de deux navigateurs mis à jour : Google Chrome et Firefox en préférence afin d’exécuter le code HTML 5.

Description de l’activité

Travail à réaliser : Déterminer :    - Les différentes balises audio et les versions d’HTML qui leur sont associées.   - Les différentes balises vidéo et les versions d’HTML qui leur sont associées. -       Créer une page web implémentant une audio et une vidéo de votre choix moyennant les trois méthodes de déclaration de balises audio et vidéo.

Activité d’apprentissage13
Module	TDI-20	Applications hypermédias
Précision	B	Écrire du code HTML
Code Activité	B011
Activité	Déclarer des tableaux.
Durée     Phase d’apprentissage	2H Entrainement
Détails sur les objectifs visés par l’activité	Cette activité d’apprentissage doit vous permettre de : §  Balises de tableaux : o   tableau ; o   lignes ; o   cellules ; o   alignement ; o   fusion.
Matière d’œuvre et/ou  outillage	15 Postes de travail équipés d’un navigateur et un éditeur HTML en l’occurrence NotePad.

Description de l’activité

Travail à réaliser : Déterminer :    - La structure du tableau précédent en veillant à spécifiant dans les colonnes la valeur de l’attribut Colspan.    - les attributs nécessaires pour colorer et centrer les cellules. -       Créer une page web affichant le tableau illustré précédemment.

Activité d’apprentissage 14
Module	TDI-20	Applications hypermédias
Précision	B	Écrire du code HTML
Code Activité	B012
Activité	Maitriser les tableaux.
Durée     Phase d’apprentissage	2H Entrainement
Détails sur les objectifs visés par l’activité	Cette activité d’apprentissage doit vous permettre de : §  Balises de tableaux : o   tableau ; o   lignes ; o   cellules ; o   alignement ; o   fusion.
Matière d’œuvre et/ou  outillage	15 Postes de travail équipés d’un navigateur et un éditeur HTML en l’occurrence NotePad.

Description de l’activité

Travail à réaliser : Déterminer :    - La structure du tableau précédent en veillant à spécifiant dans les colonnes la valeur de l’attribut Colspan. -       Créer une page web affichant le tableau illustré précédemment.

Activité d’apprentissage 15
Module	TDI-20	Applications hypermédias
Précision	B	Écrire du code HTML
Code Activité	B013
Activité	Structurer une page HTML.
Durée     Phase d’apprentissage	5 H Base
Détails sur les objectifs visés par l’activité	Cette activité d’apprentissage doit vous permettre de : §  Structurer une page avec les tableaux, les Framesets et les Iframes. o   Balises de cadres : o   types de cadres ; o   jeu de cadres. o   IFrames o   Tableaux
Matière d’œuvre et/ou  outillage	15 Postes de travail équipés d’un navigateur et un éditeur HTML en l’occurrence NotePad.

Description de l’activité

Travail à réaliser : Déterminer :    - La structure du tableau précédent en veillant à spécifiant dans les colonnes la valeur de l’attribut Colspan.    - les attributs de body qui doivent être spécifiés afin d’annuler l’espace entre le     tableau et body.    - Le nombre d’iFrames constituant la page.    - L’attribut nécessaire aux liens afin qu’ils puissent afficher leur contenu dans le frame de bienvenue. -       Créer trois pages web implémentant chaque une un type de structuration à savoir les tableaux et les Iframes.

Activité d’apprentissage 16
Module	TDI-20	Applications hypermédias
Précision	B	Écrire du code HTML
Code Activité	B014
Activité	Travailler avec les contrôles relatifs au formulaire.
Durée     Phase d’apprentissage	2H30 Entrainement
Détails sur les objectifs visés par l’activité	Cette activité d’apprentissage doit vous permettre de : §  Balises de formulaires : o   formulaire ; o   différents types de champ
Matière d’œuvre et/ou  outillage	15 Postes de travail équipés d’un navigateur et un éditeur HTML en l’occurrence NotePad.

Description de l’activité

Travail à réaliser : Déterminer :    - Les contrôles HTML et  leurs attributs nécessaires à la mise en place de la page précédente. -       Créer une page web implémentant l’illustration ci-dessus.

Activité d’apprentissage 17
Module	TDI-20	Applications hypermédias
Précision	B	Écrire du code HTML
Code Activité	B015
Activité	Structurer un formulaire en HTML.
Durée     Phase d’apprentissage	5H Transfert
Détails sur les objectifs visés par l’activité	Cette activité d’apprentissage doit vous permettre de : §  Balises de formulaires : o   formulaire ; o   différents types de champ
Matière d’œuvre et/ou  outillage	15 Postes de travail équipés d’un navigateur et un éditeur HTML en l’occurrence NotePad. En outre, ils devront inclure un logiciel de type Colorpicker tel EyeDropper.

Description de l’activité

Travail à réaliser : Déterminer :    - Les contrôles HTML et  leurs attributs nécessaires à la mise en place de la page précédente.   - La méthode de structuration du formulaire illustré précédemment. -       Créer une page web implémentant l’image ci-dessus.

Activité d’apprentissage 18
Module	TDI-20	Applications hypermédias
Précision	B	Écrire du code HTML
Code Activité	B016
Activité	Découvrir les contrôles HTML5 relatifs aux formulaires.
Durée     Phase d’apprentissage	2H30 Transfert
Détails sur les objectifs visés par l’activité	Cette activité d’apprentissage doit vous permettre de : §  Balises de formulaires : o   Contrôles riches o   Validation via HTML 5
Matière d’œuvre et/ou  outillage	15 Postes de travail équipés de deux navigateurs mis à jour : Google Chrome et Firefox en préférence afin d’exécuter le code HTML 5.Les 15 pcs devront en outre inclure un éditeur HTML en l’occurrence NotePad. Ils doivent encore inclure un logiciel de type Colorpicker tel EyeDropper.

Description de l’activité

Travail à réaliser : Déterminer :    - Les contrôles HTML5 et  leurs attributs nécessaires à la mise en place de la page précédente.   - Les méthodes de structuration de la page et du formulaire que vous allez adopter. -       Créer une page web implémentant l’image ci-dessus.

Activité d’apprentissage 19
Module	TDI-20	Applications hypermédias
Précision	B	Écrire du code HTML
Code Activité	B017
Activité	Découvrir les propriétés de background.
Durée     Phase d’apprentissage	2H30 Entrainement
Détails sur les objectifs visés par l’activité	Cette activité d’apprentissage doit vous permettre de : §  Balises de création de feuilles de style en CSS3 : o   styles liés ; o   styles incorporés ; o   styles intégrés. o   S’initier à la syntaxe CSS o   Connaitre les types de sélecteurs o   Propriété Background
Matière d’œuvre et/ou  outillage	15 Postes de travail équipés d’un navigateur et un éditeur HTML en l’occurrence NotePad. En outre, ils devront inclure un logiciel de type Colorpicker tel EyeDropper.

Description de l’activité

Travail à réaliser : Déterminer :    - La propriété Background utilisé dans chaque un des exemples précédents. -       Créer la page ci-dessus moyennant une intégration interne puis externe en choisissant les sélecteurs adéquats.

Activité d’apprentissage 20
Module	TDI-20	Applications hypermédias
Précision	B	Écrire du code HTML
Code Activité	B018
Activité	Découvrir les propriétés de background.
Durée     Phase d’apprentissage	2H Entrainement
Détails sur les objectifs visés par l’activité	Cette activité d’apprentissage doit vous permettre de : §  Balises de création de feuilles de style en CSS3 : o   Propriété Background
Matière d’œuvre et/ou  outillage	15 Postes de travail équipés d’un navigateur et un éditeur HTML en l’occurrence NotePad. En outre, ils devront inclure un logiciel de type Colorpicker tel EyeDropper.

Description de l’activité

Travail à réaliser : Déterminer :    - La propriété Background utilisé dans chaque un des exemples précédents. -       Créer la page ci-dessus en choisissant les sélecteurs adéquats.

Activité d’apprentissage 21
Module	TDI-20	Applications hypermédias
Précision	B	Écrire du code HTML
Code Activité	B019
Activité	Découvrir les propriétés de texte, font, listes et liens.
Durée     Phase d’apprentissage	3H30 Entrainement
Détails sur les objectifs visés par l’activité	Cette activité d’apprentissage doit vous permettre de : §  Balises de création de feuilles de style en CSS3 : o   PropriétésTexte, Font, List et liens.
Matière d’œuvre et/ou  outillage	15 Postes de travail équipés d’un navigateur et un éditeur HTML en l’occurrence NotePad. En outre, ils devront inclure un logiciel de type Colorpicker tel EyeDropper.

Description de l’activité

Travail à réaliser : Déterminer :    - La propriété Texte, Font, List utilisé dans chaque un des exemples précédents.    - L’état du lien sur laquelle la propriété CSS s’applique. -       Créer la page ci-dessus en choisissant les sélecteurs adéquats.

Activité d’apprentissage 22
Module	TDI-20	Applications hypermédias
Précision	B	Écrire du code HTML
Code Activité	B020
Activité	Découvrir les effets de transition et de transformation
Durée     Phase d’apprentissage	1H30 Entrainement
Détails sur les objectifs visés par l’activité	Cette activité d’apprentissage doit vous permettre de : §  Balises de création de feuilles de style en CSS3 : o   Propriétés de transition et transformation
Matière d’œuvre et/ou  outillage	15 Postes de travail équipés d’un navigateur et un éditeur HTML en l’occurrence NotePad. En outre, ils devront inclure un logiciel de type Colorpicker tel EyeDropper.

Description de l’activité

Travail à réaliser : Déterminer :    - La propriété Transform ou Transition utilisé dans chaque un des exemples précédents. -       Créer la page ci-dessus en choisissant les sélecteurs adéquats.

Activité d’apprentissage 23
Module	TDI-20	Applications hypermédias
Précision	B	Écrire du code HTML
Code Activité	B021
Activité	Découvrir les animations
Durée     Phase d’apprentissage	45 Min Entrainement
Détails sur les objectifs visés par l’activité	Cette activité d’apprentissage doit vous permettre de : §  Balises de création de feuilles de style en CSS3 : o   Propriétés d’animations.
Matière d’œuvre et/ou  outillage	15 Postes de travail équipés d’un navigateur et un éditeur HTML en l’occurrence NotePad. En outre, ils devront inclure un logiciel de type Colorpicker tel EyeDropper.

Description de l’activité

Travail à réaliser : Déterminer :    - L’état du sélecteur sur lequel s’appliquent les propriétés d’animation de l’exercice suivant. -Appliquer les animations suivantes sur un carré vide(div avec les propriétés width et height) Création de l'animation: @keyframes myfirst { from {background: red;} to {background: yellow;} } Animation: Nom de l'animation durée Animation progressive: Exemple 1: @keyframes myfirst { 0%   {background: red;} 25%  {background: yellow;} 50%  {background: blue;} 100% {background: green;} } Exemple 2: @keyframes myfirst { 0%   {background: red; left:0px; top:0px;} 25%  {background: yellow; left:200px; top:0px;} 50%  {background: blue; left:200px; top:200px;} 75%  {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} }

Activité d’apprentissage 24
Module	TDI-20	Applications hypermédias
Précision	B	Écrire du code HTML
Code Activité	B022
Activité	Découvrir les propriétés Padding,Margin et Border
Durée     Phase d’apprentissage	1H Entrainement
Détails sur les objectifs visés par l’activité	Cette activité d’apprentissage doit vous permettre de : §  Balises de création de feuilles de style en CSS3 : o   Propriétés Margin, Padding et Border
Matière d’œuvre et/ou  outillage	15 Postes de travail équipés d’un navigateur et un éditeur HTML en l’occurrence NotePad. En outre, ils devront inclure un logiciel de type Colorpicker tel EyeDropper.

Description de l’activité

Travail à réaliser : Déterminer :    - La propriété Margin, Padding ou Border utilisé dans chaque un des exemples précédents. -       Créer la page ci-dessus en choisissant les sélecteurs adéquats.

Activité d’apprentissage 25
Module	TDI-20	Applications hypermédias
Précision	B	Écrire du code HTML
Code Activité	B023
Activité	Structurer une page avec CSS
Durée     Phase d’apprentissage	2h30 Maitrise
Détails sur les objectifs visés par l’activité	Cette activité d’apprentissage doit vous permettre de : §  Balises de création de feuilles de style en CSS3 : o   Structurer une page avec CSS. o   Propriétés Float et Position
Matière d’œuvre et/ou  outillage	15 Postes de travail équipés d’un navigateur et un éditeur HTML en l’occurrence NotePad. En outre, ils devront inclure un logiciel de type Colorpicker tel EyeDropper.

Description de l’activité

Travail à réaliser : Déterminer :    - La batterie de propriétés utiliséesafin de structurer la page web.    - Les propriétés CSS nécessaires à la réalisation de la page ci-dessus. -       Créer la page ci-dessus en veillant à animer les 4 blocs (basic...) de manière à les agrandir quand la souris leur passe dessus.

Activité d’apprentissage 26
Module	TDI-20	Applications hypermédias
Précision	B	Écrire du code HTML
Code Activité	B024
Activité	Intégrer une applet
Durée     Phase d’apprentissage	1h Base
Détails sur les objectifs visés par l’activité	Cette activité d’apprentissage doit vous permettre de : §  Balises de création de feuilles de style en CSS3 : o   Insérer des balises de contenu exécutables : o   applets java. o   Composants ActiveX.
Matière d’œuvre et/ou  outillage	15 Postes de travail équipés d’un navigateur et un éditeur HTML en l’occurrence NotePad. En outre, ils devront inclure un logiciel de type Colorpicker tel EyeDropper.

Description de l’activité

Travail à réaliser : Écrire la source de la classe Bonjour et l'enregistrer sous le nom Bonjour.java    import java.awt.Graphics;      import java.applet.Applet; public class Bonjour extends Applet {       String texte = new String ("Bonjour !"); int x = 10       int y = 10;       public void paint(Graphics g)  {          g.drawString(texte, x , y);           }    } Compiler la source par la commande java Bonjour.java Écrire dans le même répertoire la page HTML suivante <body> <applet code="Bonjour.class"  width=100  height=100> </applet> </body> Exécuter l'applet dans le navigateur

Activité d’apprentissage 27
Module	TDI-20	Applications hypermédias
Précision	C	Développer des scripts clients.
Code Activité	C001
Activité	Lire et afficher des variables.
Durée     Phase d’apprentissage	1h30 Base
Détails sur les objectifs visés par l’activité	Cette activité d’apprentissage doit vous permettre de : §  Types et déclaration de variables. §  Opérateurs et expressions. §  Fonctions et procédures. §  Gestion du dialogue avec l’utilisateur. §  Intégration du script dans du code HTML.
Matière d’œuvre et/ou  outillage	15 Postes de travail équipés d’un navigateur et un éditeur HTML en l’occurrence NotePad.

Description de l’activité

Travail à réaliser : Déterminer :    - Les types de variables à utiliser.   - La fonction de lecture adéquate. -       Créer une page web, contenant JavaScript en intégration interne, qui permet d’afficher successivement : 1-     Bonjour. 2-     Une variable string initialisée. 3-     L’âge lu préalablement à partir de l’utilisateur. 4-     La confirmation ou la réfutation que l’utilisateur possède une carte visa.

Activité d’apprentissage 28
Module	TDI-20	Applications hypermédias
Précision	C	Développer des scripts clients.
Code Activité	C002
Activité	Maitriser les conditions
Durée     Phase d’apprentissage	45 Min Base
Détails sur les objectifs visés par l’activité	Cette activité d’apprentissage doit vous permettre de : §  Instructions de conditions et de boucles. §  Interaction avec les objets prédéfinis : o   date ; o   heure ;
Matière d’œuvre et/ou  outillage	15 Postes de travail équipés d’un navigateur et un éditeur HTML en l’occurrence NotePad.

Description de l’activité

Travail à réaliser : Déterminer :    - Les types de variables à utiliser.    - La structure conditionnelle la plus appropriée. -       Créer une page web, contenant JavaScript en intégration externe, qui permet d’afficher « majeur » ou « mineur» selon une date de naissance saisie par l’utilisateur. Affichez ensuite le jour de naissance en lettre et numéro.

Activité d’apprentissage 29
Module	TDI-20	Applications hypermédias
Précision	C	Développer des scripts clients
Code Activité	C003
Activité	Maitriser les boucles
Durée     Phase d’apprentissage	30 Min Base
Détails sur les objectifs visés par l’activité	Cette activité d’apprentissage doit vous permettre de : §  Instructions de conditions et de boucles.
Matière d’œuvre et/ou  outillage	15 Postes de travail équipés d’un navigateur et un éditeur HTML en l’occurrence NotePad.

Description de l’activité

Travail à réaliser : Déterminer :    - Les types de variables à utiliser.    - La structure itérative la plus appropriée. -       Créer une page web, contenant JavaScript en intégration externe, qui permet d’afficher « majeur » tant que l’utilisateur continue à saisir un nombre différent de zéro. -       Modifier le programme pour qu’il affiche « majeur » cinq fois dans chaque colonne dans un tableau composé de 3 lignes. Chaque ligne se divise en deux colonnes.

Activité d’apprentissage30
Module	TDI-20	Applications hypermédias
Précision	C	Développer des scripts clients
Code Activité	C004
Activité	Maitriser les tableaux
Durée     Phase d’apprentissage	1H30 Entrainement
Détails sur les objectifs visés par l’activité	Cette activité d’apprentissage doit vous permettre de : §  Gestion des exceptions. §  Utilisation des tableaux.
Matière d’œuvre et/ou  outillage	15 Postes de travail équipés d’un navigateur et un éditeur HTML en l’occurrence NotePad.

Description de l’activité

Travail à réaliser : Déterminer :    - Les types de variables à utiliser.    - La structure itérative la plus appropriée.    - La fonction à exploiter. -       Créer une page web, contenant JavaScript en intégration externe, qui permet de remplir un tableau avec « n » entiers tel que « n » est donné par l’utilisateur, puis d’afficher la somme, le produit et la moyenne des éléments de ce tableau. -       Affichez après la longueur de ce tableau. -       Inversez le tableau puis affichez-le. -       Triez le tableau puis affichez-le.

Activité d’apprentissage 31
Module	TDI-20	Applications hypermédias
Précision	C	Développer des scripts clients
Code Activité	C005
Activité	Maitriser les fonctions
Durée     Phase d’apprentissage	1H Entrainement
Détails sur les objectifs visés par l’activité	Cette activité d’apprentissage doit vous permettre de : §  Fonctions et procédures. §  Interaction avec le modèle objet du navigateur §  La gestion des événements
Matière d’œuvre et/ou  outillage	15 Postes de travail équipés d’un navigateur et un éditeur HTML en l’occurrence NotePad.

Description de l’activité

Travail à réaliser : Déterminer :    - Les types de variables à utiliser.    - les paramètres et le type de retour de la fonction. -       Créer une page web contenant JavaScript en intégration externe. Dans le fichier script, définissez une fonction qui permet de lire le nombre de lignes et de colonnes d’un tableau à dessiner dynamiquement. -       Faire l’appel de la fonction à partir de l’événement onClick d’un bouton à déclarer.

Activité d’apprentissage 32
Module	TDI-20	Applications hypermédias
Précision	C	Développer des scripts clients
Code Activité	C006
Activité	S’initier à l’HTML DOM2
Durée     Phase d’apprentissage	2H30 Entrainement
Détails sur les objectifs visés par l’activité	Cette activité d’apprentissage doit vous permettre de : §  Accès à l'arbre DOM o   Lire, modifier le style et le contenu des balises. o   Modifier l’arborescence d’une page web en ajoutant, supprimant et remplaçant des balises
Matière d’œuvre et/ou  outillage	15 Postes de travail équipés d’un navigateur et un éditeur HTML en l’occurrence NotePad.

Description de l’activité

Travail à réaliser : Déterminer :    - Les types de variables à utiliser.    - les fonctions et les attributs DOM2 à utiliser. -       Créer une page web avec un seul élément Div à son intérieur et contenant  JavaScript en intégration externe. L’élément Div contient le texte « Bonjour » à son intérieur. Dans le fichier script, définissez le code respectant les règles suivantes : 1-     Lit le contenu de la balise Div. 2-     Ajoute une autre balise Div fille de body avec un id= b. 3-     Affecte le contenu « bbb » au deuxième Div. 4-     Lit le contenu de la 2ème div. 5-     Ajoute une balise div avec un id=’c’ à l’intérieur du Div dont le id est « b ». 6-     Ajoute le contenu « ccc » en tant que fils à la balise div qui porte le id « c ». 7-     Remplace le contenu de la balise dont l’id est «c» par « 333». 8-     Changer la couleur du texte du div dont l’id est «c» avec la couleur rouge en utilisant les attributs HTML. 9-     Changer la couleur du texte du div dont l’id est «b» avec la couleur jaune en utilisant CSS.

Activité d’apprentissage 33
Module	TDI-20	Applications hypermédias
Précision	C	Développer des scripts clients
Code Activité	C007
Activité	Valider les formulaires en utilisant JavaScript
Durée     Phase d’apprentissage	5H Entrainement
Détails sur les objectifs visés par l’activité	Cette activité d’apprentissage doit vous permettre de : §  Validation, coté client, des données saisies par l’utilisateur §  Objet Window
Matière d’œuvre et/ou  outillage	15 Postes de travail équipés d’un navigateur et un éditeur HTML en l’occurrence NotePad.

Description de l’activité

Travail à réaliser : Déterminer :    - Les types de contrôles à utiliser.    - La méthode DOM permettant la lecture de chaque contrôle. -       Créer la page précédente en veillant à ajouter une fonction de validation s’exécutant lors du clic du bouton « envoyer ». La fonction devra faire les vérifications suivantes : 1-     Les zones de texte doivent être non vides. 2-     Le nom doit contenir exclusivement des lettres. 3-     L’âge doit contenir exclusivement des nombres. 4-     L’email doit contenir « @ ». 5-     L’un des boutons radio doit être coché. 6-     L’une des cases à cocher doit être cochée. 7-     L’élément sélectionné dans la liste devra être différent du premier. -       Ajouter un bouton JavaScript qui permet d’imprimer les informations saisies. -       Ajouter un code JavaScript qui ferme la fenêtre en cours 20 secondes après le démarrage.

Activité d’apprentissage 34
Module	TDI-20	Applications hypermédias
Précision	C	Développer des scripts clients. .
Code Activité	C008
Activité	Mettre en pratique la fonction Toogle en Jquery
Durée     Phase d’apprentissage	5H Entrainement
Détails sur les objectifs visés par l’activité	Cette activité d’apprentissage doit vous permettre de : §  Présentation de jQuery §  Méthodes utilitaires de jQuery §  Les sélecteurs §  Effets visuels et interface riche avec jQuery
Matière d’œuvre et/ou  outillage	15 Postes de travail équipés d’un navigateur et un éditeur HTML en l’occurrence NotePad. Les pcs devront comporter aussi la bibliothèque Jquery disponible sur le site web officiel sous forme de fichier JavaScript.

Description de l’activité

Travail à réaliser : Déterminer :    - Les sélecteurs appropriés.    - Les événements et les fonctions Jquery à utiliser. -       Créer la page précédente en veillant à  ce que chaque titre se développe pour afficher son contenu une fois qu’on clique dessus.

Activité d’apprentissage 34
Module	TDI-20	Applications hypermédias
Précision	C	Développer des scripts clients. .
Code Activité	C009
Activité	Maitriser les fonctionnalités DOM de JQuery
Durée     Phase d’apprentissage	5H Entrainement
Détails sur les objectifs visés par l’activité	Cette activité d’apprentissage doit vous permettre de : §  S’initier aux fonctions de DOM dans JQuery. §  Méthodes utilitaires de jQuery §  Validation, coté client, des données saisies par l’utilisateur
Matière d’œuvre et/ou  outillage	15 Postes de travail équipés d’un navigateur et un éditeur HTML en l’occurrence NotePad. Les pcs devront comporter aussi la bibliothèque Jquery disponible sur le site web officiel sous forme de fichier JavaScript.

Description de l’activité

Travail à réaliser : -Les activités 32 et 33  incluaient la validation de formulaire et l’accès aux éléments HTML et CSS via JQuery. Déterminer :    - Les sélecteurs appropriés.    - Les événements et les fonctions Jquery à utiliser. -       Refaire les activités d’apprentissage 32 et 33 en se basant uniquement sur la bibliothèque Jquery

Activité d’apprentissage 35
Module	TDI-20	Applications hypermédias
Précision	C	Développer des scripts clients. .
Code Activité	C010
Activité	Découvrir Ajax
Durée     Phase d’apprentissage	2H30 Base
Détails sur les objectifs visés par l’activité	Cette activité d’apprentissage doit vous permettre de : §  Ajax et jQuery
Matière d’œuvre et/ou  outillage	15 Postes de travail équipés d’un navigateur et un éditeur HTML en l’occurrence NotePad. Les pcs devront comporter aussi la bibliothèque Jquery disponible sur le site web officiel sous forme de fichier JavaScript.

                                                                                                                                                               

Description de l’activité

Travail à réaliser : Déterminer :    - Le format d’échange XML ou JSon -       Saisir deux nombres et demander au serveur d'assurer le calcul d'addition et de renvoyer le résultat en utilisant l'API Ajax

Activité d’apprentissage 36
Module	TDI-20	Applications hypermédias
Précision	D	Développer une application hypermédia en utilisant un éditeur wysiwyg.
Code Activité	D001
Activité	S’initier à un CMS
Durée     Phase d’apprentissage	5H Entrainement
Détails sur les objectifs visés par l’activité	Cette activité d’apprentissage doit vous permettre de : §  Système de navigation de l’application : o   les liens hypertextes ; o   les barres de navigation ; o   les comportements. §  Réaliser la mise en page de l’application hypermédia o   les cadres ; o   les tableaux ; o   les feuilles de style. §  Effets spéciaux : o   Images ; o   animations pour le web. §  Préparer l’application pour l’exploitation en interne ou sur Internet : o   test sur différents types du navigateur ; o   vitesse de connexion; o   résolution d’écran ; o   nombre de couleurs.
Matière d’œuvre et/ou  outillage	15 Postes de travail équipés d’un navigateur et un éditeur HTML en l’occurrence NotePad. Les pcs devront comporter aussi la bibliothèque Jquery disponible sur le site web officiel sous forme de fichier JavaScript.

Description de l’activité

                                                                                                                                                               

Travail à réaliser : Réaliser un site web de présentation d’une entreprise de votre choix dont le cahier de charges a été décrit dont l’activité A002 moyennant le CMS Joomla. Déterminer : -Les plugins nécessaires -Les pages et les posts Publier le site sur un hébergeur gratuit tel funpic.org