Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

UF Informatique Ann´ ee 2020-2021 Introduction aux Technologies du Web L1 M2IPC

UF Informatique Ann´ ee 2020-2021 Introduction aux Technologies du Web L1 M2IPC PROJET XML / HTML / CSS / JAVASCRIPT 1 Contexte du projet Ce projet est ` a faire en monˆ ome ou en binˆ ome. Les groupes de plus de 2 ´ etudiants sont strictement interdits. Pour ceux qui travaillent en binˆ ome, vous devez faire clairement apparaˆ ıtre, dans chacun de vos ﬁchiers, le nom du contributeur principal via un commentaire. Nous nous r´ eservons le droit de convoquer un ou plusieurs groupes ` a un oral pour des pr´ ecisions sur leur travail, ce qui peut conduire ` a ce que les membres d’un binˆ ome n’aient pas la mˆ eme note au ﬁnal. Ce projet va servir de ﬁl rouge tout au long de l’UE et vous permettra de mettre en œuvre l’ensemble des aspects trait´ es dans ce module : XML, XHTML, CSS et javascript. Objectif ≪pratique ≫du projet : concevoir et r´ ealiser un site web autour d’un catalogue pr´ esentant une ≪collection ≫de votre choix 1. Cette ann´ ee, le th` eme de votre collection doit ˆ etre un sous-th` eme de l’un des th` emes suivants : des œuvres (livres, ﬁlms, tableaux, musiques, . . . ) des personnes / personnages (artistes, scientiﬁques, h´ eros de roman, sportifs, . . . ) des jeux (Jeux de soci´ et´ e, jeux vid´ eo, . . . ) des lieux (Pays, villes, lieux remarquables, . . . ) Vous pouvez, par exemple, choisir de pr´ esenter vos joueurs de football pr´ ef´ er´ es, ou les ﬁlms vainqueurs aux Oscars les derni` eres ann´ ees, les jeux auxquels vous jouez sur votre console, etc. Plusieurs groupes peuvent choisir le mˆ eme th` eme, mais chacun doit rendre un travail original 2. Un exemple est partiellement montr´ e sur UPdago. Il s’agit d’une ≪collection ≫de laur´ eats du prix Turing. Vous trouverez aussi un descriptif des crit` eres qui seront utilis´ es pour la notation. Enﬁn diﬀ´ erentes aides seront ajout´ ees au fur et ` a mesure de vos questions. Donc n’h´ esitez pas ` a en poser ! Cela aidera tout le monde. 2 Originalit´ e du travail vs fraude ´ Evidemment, le travail rendu doit ˆ etre original. Autrement dit, il ne doit pas ˆ etre similaire au travail d’un autre groupe ni ` a un site web existant. Pour les redoublants, il vous est demand´ e de faire un nouveau projet, ne serait-ce que parce que le projet est une aide pour acqu´ erir les comp´ etences pour valider l’UE. Accessoirement, l’´ enonc´ e diﬀ` ere un tantinet de celui de l’an pass´ e. En cas de copie, il s’agit de fraude voire de plagiat et vous risquez le conseil de discipline avec toutes les cons´ equences possibles. ` A noter que le plagiat est tout aussi ill´ egal dans le milieu professionnel et les cons´ equences ´ egalement peu agr´ eables. La limite est parfois t´ enue entre l’inspiration et le plagiat. Si vous avez un doute, n’h´ esitez pas ` a poser la question. 1. ´ Evidemment, la collection choisie doit rester dans les limites de la l´ egalit´ e. 2. On y revient dans un instant. Sylvie Alayrangues page 1/ 7 La r´ ealisation de ce projet comporte deux aspects : l’aspect, disons ≪informatique ≫(structuration des pages du site, styles, scripts. . . ) et le contenu (texte et images). Pour le deuxi` eme, vous avez le droit de reprendre des textes et des photos r´ ecup´ er´ es sur le web (ou ailleurs) MAIS vous devez absolument citer vos sources et bien les r´ ef´ erencer. Notamment, vous devez ˆ etre conscients que si vous r´ ecup´ erez des images sur le web, elles sont soumises ` a droit d’auteur et ont probablement ´ et´ e publi´ ees sous une licence ou une autre. Comme le site que vous fournirez n’a pas vocation ` a ˆ etre publi´ e sur Internet, la seule chose que nous demandons ici est que pour chaque image qui ne vous appartient pas, une info bulle 3 indique l’url du site sur lequel vous avez pris l’image en question. Si vous avez ins´ er´ e une image que vous avez r´ ealis´ ee vous-mˆ eme, indiquez-le ´ egalement dans l’info-bulle. D’autre part, les images pr´ esentes sur un site web, lorsqu’elles ne sont destin´ ees qu’` a l’aﬃchage sur l’´ ecran, n’ont pas besoin d’ˆ etre dans une r´ esolution tr` es ﬁne. Il existe divers outils gratuits pour redimensionner des images. N’h´ esitez pas ` a demander. 3 Travail attendu Dans cette UE, vous allez d´ ecouvrir les technologies de bases pour le Web cˆ ot´ e client ((X)HTML, CSS, Javascript). Il existe des biblioth` eques logicielles et des outils qui permettent de simpliﬁer l’utilisation de ces technologies et la cr´ eation de sites web. Vous ne devez pas les utiliser ici. Le but est de comprendre comment tout cela fonctionne, non de produire de mani` ere eﬃcace un site professionnel. Les outils et biblioth` eques ´ evoluent tout le temps, les principes fondamentaux, eux, ne changent pas. Un site web est classiquement compos´ e de plusieurs ﬁchiers de diverses natures (HTML, CSS, javas- cript. . . ) rang´ es dans des dossiers (ou r´ epertoires). Attention, il ne doit pas y avoir d’accents dans les noms de vos ﬁchiers. Voici l’arborescence de r´ epertoires / dossiers et ﬁchiers que doit respecter votre site Web. Une archive vous est fournie sur UPdago qui contient cette arborescence. Commencez par t´ el´ echarger l’archive en question et extrayez-en l’arborescence de r´ epertoires. Un ﬁchier index.html est pr´ esent dans chacun des r´ epertoires. Vous n’avez pas ` a les modiﬁer. Les ﬁchiers HTML que vous cr´ eerez seront tous suﬃx´ es par .xhtml. Pensez ` a renommer le dossier racine avec vos noms. SITE_nom1_nom2/ |-- Content | |-- Collection | \-- vos fichiers HTML d´ ecrivant la collection | |-- Forms | \-- vos fichiers HTML contenant des formulaires | |-- Miscellaneous | \-- autres fichiers HTML (par exemple, votre bibliographie) |-- Images | \-- vos fichiers image |-- Javascript | \-- vos fichiers javascript |-- Styles | \-- vos fichiers CSS |-- XML | \-- votre DTD 3. attribut title de la balise <img /> Sylvie Alayrangues page 2/ 7 | \-- un exemple de fichier XML \-- index.html \-- README.txt : toutes les informations que vous jugerez utiles Si vous en ressentez le besoin, vous pouvez cr´ eer des sous-dossiers suppl´ ementaires. Tous vos ﬁchiers doivent passer avec succ` es l’´ epreuve du validateur (HTML 4 et CSS 5). 4 Planning pr´ evisionnel 6 Vous devez rendre votre travail r´ eguli` erement (cf calendrier ci-dessous). A noter que, jusqu’` a la ﬁn de votre projet, vous pouvez toujours modiﬁer / compl´ eter le travail d´ ej` a eﬀectu´ e. Il ne sera not´ e qu’` a la ﬁn. Le respect des livraisons interm´ ediaires entrera n´ eanmoins en compte dans la notation 7. 1. Choix du th` eme et constitution des groupes sur UPdago : vendredi 5 f´ evrier 2021 2. Remise sur UPdago de la structure XML des ﬁches (cf section 5) la DTD et un exemple de ﬁche : mardi 23 f´ evrier 2021 3. Remise d’une archive sur UPdago contenant l’ensemble du site statique avec son style (cf section 7) (sans les formulaires) : mardi 16 mars 2021 4. Remise d’une archive sur UPdago contenant l’ensemble du site statique avec les formulaires, les premi` eres interactions avec javascript (cf section 8.1) : mardi 06 avril 2021 5. Remise du site ﬁnal (avec les formulaires et les interactions javascript) : mercredi 5 mai 2021, 19h R´ ealisation de l’archive : Vous pouvez rendre une archive au format tar.gz, tar.bz2 ou zip ` a l’exclusion de toute autre. Le nom de l’archive sera IMP´ ERATIVEMENT compos´ e de vos noms de famille en minuscules s´ epar´ es par un underscore, par exemple dupont dupond, suivi des extensions .tar.gz, .tar.bz2 ou .zip Le d´ esarchivage devra cr´ eer, dans le dossier courant, un dossier s’appe- lant : SITE nom1 nom2. Dans l’exemple pr´ ec´ edent, ce r´ epertoire s’appellerait SITE dupont dupond. Ces directives sont ` a respecter SCRUPULEUSEMENT. Si vous travaillez sous windows, choisissez envoyer vers puis Dossier compress´ e via le menu contextuel obtenu par un clic bouton droit sur le dossier ` a partir duquel cr´ eer l’archive. Vous obtiendrez une archive au format zip. Si vous travaillez sous Linux (ou sous MacOS), ouvrez un terminal et utilisez la commande tar cvzf nom1 nom2.tar.gz SITE nom1 nom2 ou bien tar cvjf nom1 nom2.tar.bz2 SITE nom1 nom2. 5 XML Il s’agit ici de cr´ eer une description XML des ´ el´ ements de votre collection et la DTD correspondante. Quelques contraintes : 4. https://validator.w3.org/nu 5. http://jigsaw.w3.org/css-validator/ 6. Vous aurez not´ e le mot ≪pr´ evisionnel ≫: si n´ ecessaire, le planning peut ˆ etre modiﬁ´ e pour s’adapter uploads/s3/ 2021-sujet-projet.pdf