Enseignement de l'informatique et du numérique au lycée Boissy d'Anglas
https://icn-isn-boissy.yj.fr/wp/2018/08/27/mini-projet-creer-son-site-internet/
Export date: Fri May 17 14:51:57 2024 / +0000 GMT

Mini-projet : créer son site internet


Activités du mini-projet :

  1. Créer un compte chez un hébergeur 1
  2. Apprendre les rudiments du HTML/CSS avec Mozilla 2
  3. Créer une première page web 3
  4. Créer votre propre site internet 4

Activité 1 : Créer un compte chez un hébergeur

Pour pouvoir être accessible, un site internet doit être hébergé sur un serveur informatique. Pour commencer, choisir un hébergeur. Il existe des hébergeur en ligne, dont certains sont gratuits. Mais il est aussi possible de bénéficier gratuitement d'un hébergement web auprès de son fournisseur d'accès à internet (chez ceux qui le proposent, c'est par exemple le cas chez orange ou free). Voir la liste des hébergement web gratuits en ligne 5.

Activité 2 : Apprendre les rudiments du HTML/CSS avec Mozilla

La fondation Mozilla 6 est un organisme à but non lucratif, qui œuvre au développement d'internet. C'est elle qui développe par exemple le navigateur web Firefox 7. Mozilla publie aussi une documentation de référence des outils du web, et notamment des langages informatiques HTML et CSS qui servent à afficher une page web. On utilisera pour apprendre les rudiments du HTML et du CSS :
  • Le guide d'apprentissage de Mozilla.
  • Glich ou jsfiddle un éditeur de code en ligne .
Il est possible d'utiliser Glich de manière anonyme, sans créer de compte. Créer un compte sur Glich vous permettra cependant de retrouver votre travail entre deux sessions. (Il n'est pas obligatoire d'utiliser une adresse email valide pour cela. Mais avec une fausse adresse mail, du type quelquechose@example.com, il ne sera pas possible de retrouver un mot de passe perdu). Pour commencer, suivre ce tutoriel : tutoriel HTML avec Mozilla 8 pour débuter nous pouvons utiliser Glitch 9 ou jsfiddle 10 voici un autre tutoriel , mais en anglais. W3Schools est un site Web destiné à l'apprentissage en ligne des technologies Web. Son contenu inclut des didacticiels et des références relatives à HTML, CSS, JavaScript, JSON, PHP, AngularJS, SQL, Bootstrap, Node.js, jQuery, XQuery, AJAX et XML. Il reçoit plus de 10 millions de visiteurs uniques chaque mois. tutoriel HTML5 w3schools 11

Activité 3 : Créer une première page web

Installation des fichier

Télécharger le projet projet-batman.zip 12. Extraire l'archive dans un nouveau répertoire sur votre session. Vous aller éditer les fichiers html pour créer un mini site web de deux pages. Pour cela, il vous faut un éditeur. Prendre par exemple Notepad++ 13 qui est installé au lycée.

Travail à faire

À vous de jouer, vous aller éditer les fichiers batman.html et bruce-wayne.html afin d'aboutir au résultat suivant (cliquer sur les images pour agrandir) :
Page batman.html Page bruce-wayne.html
page-web_batman page-web_bruce-wayne
On doit pourvoir passer d'une page à l'autre en cliquant soit sur le texte (page batman.html) soit sur l'image (page bruce-wayne.html). Les images sont dans le répertoire img créé lors de la décompression de l'archive zip.

Pour information les deux images sont sous licence Creative Common 14 (l'image de batman a été créée par l'utilisateur BoggieNightBoy 15sur deviantart.com 16 ; celle de Christian Bale a été déposée sur wikipedia.org 17 par l'utilisateur Siebbi 18).

Lorsque tout fonctionne parfaitement, vérifier que votre code html ne comporte pas d'erreurs sur le validateur html de la W3C 19. Appeler le professeur en cas de problème.

Activité 4 : Créer votre propre site internet

Il est temps de passer à la création de votre propre site internet.

Objectif

Votre site devra compter au minimum les pages suivantes :
  • Une page d'accueil, nommée index.html, contenant la présentation rapide du site ;
  • Un cahier de bord (sur une ou plusieurs pages), qui devra garder une trace de ce qui a été fait à chaque séance ;
  • Une page exposé, recensant les exposés faits par vous-même et les autres élèves de la classe ;
  • Une page projet, présentant l'avancé de votre projet ;
  • Une page À propos présentant la raison d'être du site et donnant la référence de toutes les sources utilisées pour la réalisation de votre site internet.

Réalisation

Il est conseillé de s'aider pour cela d'un des gabarits du site de Florent Verschelde 20 . Vérifier tout d'abord ce que vous avez le droit de faire et de ne pas faire (voir la page Licence). À partir d'un de ces gabarits, commencer à créer le squelette de votre site internet, constitué d'un fichier par page et d'un menu permettant de naviguer d'une page à l'autre. Quand le squelette du site est fonctionnel, il est temps de commencer à lui donner du contenu. Si besoins, on trouvera tout ce que l'on peut avoir besoin sur le site de la fondation Mozilla :

Publication

Une fois votre site suffisamment abouti, vous pouvez le transférer chez votre hébergeur. Attention, à partir de ce moment il est en ligne et accessible par tout le monde. On prendra soin de tester que tout fonctionne aussi en ligne (une étape intermédiaire est de copier le site par exemple sur une clé usb, et de s'assurer qu'il fonctionne toujours).

Bonus, pour ceux qui veulent : vous pouvez même choisir votre propre nom de domaine 23.

Validité du code HTML/CSS

On prendra le soin de vérifier que les code HTML et CSS ne comporte pas trop d'erreurs grâce au validateur HTML/CSS :

https://validator.w3.org/unicorn/ 24.
Links:
  1. http://icn-isn-boissy.yj.fr/wp/2018/08/27/mini-pro jet-creer-son-site-internet/2/
  2. http://icn-isn-boissy.yj.fr/wp/2018/08/27/mini-pro jet-creer-son-site-internet/3/
  3. http://icn-isn-boissy.yj.fr/wp/2018/08/27/mini-pro jet-creer-son-site-internet/4/
  4. http://icn-isn-boissy.yj.fr/wp/2018/08/27/mini-pro jet-creer-son-site-internet/5/
  5. http://icn-isn-boissy.yj.fr/wp/specialite-isn-en-t erminale-s/site-internet/hebergement-gratuit-non-t este/
  6. https://www.mozilla.org/fr/foundation/
  7. https://www.mozilla.org/fr/firefox/
  8. https://developer.mozilla.org/fr/docs/Apprendre/HT ML/Introduction_%C3%A0_HTML/Getting_started
  9. https://glitch.com/edit/#!/apricot-wrinkle?path=RE ADME.md:1:0
  10. http://jsfiddle.net/
  11. https://www.w3schools.com/html/default.asp
  12. http://icn-isn-boissy.yj.fr/wp/wp-content/uploads/ 2016/07/projet-batman.zip
  13. https://notepad-plus-plus.org/fr/
  14. https://fr.wikipedia.org/wiki/Creative_Commons
  15. http://boggienightboy.deviantart.com/
  16. https://www.deviantart.com
  17. https://commons.wikimedia.org/wiki/Accueil
  18. http://www.ipernity.com/doc/siebbi
  19. https://validator.w3.org/
  20. https://fvsch.com/gabarits-html/html/index.html
  21. https://developer.mozilla.org/fr/docs/Web/HTML/Ele ment
  22. https://developer.mozilla.org/fr/docs/Web/CSS/Refe rence
  23. http://icn-isn-boissy.yj.fr/wp/specialite-isn-en-t erminale-s/site-internet/nom-de-domaine/
  24. https://validator.w3.org/unicorn/?ucn_lang=fr
Post date: 2018-08-27 15:39:45
Post date GMT: 2018-08-27 13:39:45

Post modified date: 2019-09-17 08:43:04
Post modified date GMT: 2019-09-17 06:43:04

Export date: Fri May 17 14:51:57 2024 / +0000 GMT
This page was exported from Enseignement de l'informatique et du numérique au lycée Boissy d'Anglas [ https://icn-isn-boissy.yj.fr/wp ]
Export of Post and Page has been powered by [ Universal Post Manager ] plugin from www.ProfProjects.com