EUR DS4H Mineure "Big Data System" 1/3 : Introduction à JavaScript et à l'Open Data

De $1

Version de 23:27, 18 Avr 2024

cette version.

Revenir à liste des archives.

Voir la version actuelle

Introduction

Bonjour, bienvenue sur la première partie de cette mineure. Je m'appelle Michel Buffa, je suis enseignant chercheur à l'Université Côte d'Azur. Je suis spécialiste des technologies Web, et je vais vous donner trois séances pendant lesquelles vous apprendrez les bases de JavaScript, le seul langage de programmation pouvant fonctionner dans un navigateur Web. Grace à ce langage vous pourrez réaliser des sites web dynamiques, mais aussi ce qu'on appelle des "WebApps": des applications Web! Nous verrons entre autres comment consommer des données issues de l'Open Data.

Moyens de communication utilisés pour ce cours

  • Vous pourrez me joindre par mail à l'adresse suivante : michel.buffa@univ.cotedazur.fr
     
  • J'ai également mis en place un canal slack pour le cours, clickez sur ce lien d'invitation , vous pouvez me joindre au fil de l'eau mais j'assurerai une permanence le vendredi de 17 à 19h.
     

Modalités d'évaluation de cette partie du cours

Vous devrez faire les quizzes du MOOC lorsque c'est demandé (les résultats font partie de la note), et à l'issue de la troisième semaine vous aurez une semaine pour réaliser un micro projet qui sera noté.

Séance 1 : prise de contact, inscription au MOOC "JavaScript Introduction"

J'ai préparé une petite vidéo d'introduction (en français) :

 Travail à faire :

  1. Vous inscrire au MOOC "JavaScript Introduction" (accessible depuis https://w3cx.org/)
  2. Installer sur votre machine l'outil "Visual Studio Code" pour éditer du HTML, CSS, JavaScript (https://code.visualstudio.com/)
  3. Suivre la première semaine du MOOC
  4. Répondre aux questions posées à la fin de la semaine, m'envoyer sur michel.buffa@univ.cotedazur.fr l'adresse mail que vous avez utilisée pour vous inscrire sur le MOOC.
  5. Faire une page Web perso "à la main" qui dit qui vous êtes, ce que vous faires, quelle est votre formation, etc. mais dans laquelle vous aurez mis un minimum d'interactivité en vous inspirant des exemples vus dans ce cours (ex: bouton qui change quelque chose), la mettre en ligne sur codepen.io, m'envoyer par mail l'URL

Séance 2 : démarrer la Week 2, faire un des mii projets proposé

Bonjour, alors visiblement vous n'êtes pas tous très "rigoureux" dans les consignes, j'ai été obligé de vous courir après pour que vous vous inscriviez au MOOC, entrez le code pour avoir le droit de faire les quizzes, etc... ;-)

Rappel pour les codes à entrer dans le MOOC :

TRAVAIL A FAIRE :

Suivre la Week 2 jusqu'à la section 2.4 comprise,

  1. Faire un ou plusieurs des exercices à la fin de la section 2.2
     
  2. Pour les MIAGEs et les Master Informatique, en plus : plotter la fonction  correspondant à l'équation du second degrès l'aide du plotter vu dans la semaine 1, en plus de coder la résolution de l'équation.
     
  3. TOUS : aller voir ceci http://opendata.nicecotedazur.org/site/ le site OpenData de la ville de Nice. Regardez par exemple : http://opendata.nicecotedazur.org/da...et?q=v%C3%A9lo ça donne les positions des gares de vélos bleus à nice http://opendata.nicecotedazur.org/da...tions-velobleu, ici une visualisation sur une carte  de ces données : http://opendata.nicecotedazur.org/da...b-3625a4eebff8 le format des données est geojson, c'est du json en fait mais avec des noms de propriétés particulières dedans comme dans le format de description des courbes à dessiner dans la week1 je ne vous demande pas de comprendre tout cela mais on va apprendre à exploiter ces données pas encore cette semaine mais bientot...

Séance 3 : on continue :-)

Bon, j'ai passé pas mal de temps à vous courir après car certains sont déjà bien en retard, ont attendu aujourd'hui pour rentrer le code dans le MOOC et le code a expiré (et oui!) du coup je les ai enguelé car c'est compliqué pour obtenir ces codes etc.
 
CE QUI EST DEMANDE DANS CETTE PARTIE DU MODULE (les 4 premières séances) est à faire au final pour le 6 Mars, ce qui permet aux élèves en alternances à s'organiser. Ce qui sera à rendre est la somme de tout ce que je demande chaque semaine.

JE CONSEILLE NEANMOINS FORTEMENT DE FAIRE LES CHOSES AU FUR ET A MESURE POUR NE PAS ETRE DEBORDE !
 
Pour la semaine prochaine :
  • Finir le MOOC Week 2 + REPONDRE A TOUS LES QUIZZES DE LA FIN DE LA SEMAINE
  • Week 3 : juste faire 3.1 et 3.2, les curieux pourront voir le reste bien sur.
  • Week 4: faire 4.1 et 4.2

Exercice à faire :

Créer un tableau d'objets JavaScript pour décrire des albums de musique et affichez les dans une page HTML créée dynamiquement. Vous utilisez des objets JavaScript comme ceux présentés dans les sections 4.1 et 4.2 et vous utiliserez l'API du DOM pour générer dynamiquement le HTML pour les afficher. Minimum 5 albums de musique, avec liste des chansons, pochette (un url), durées, artiste, lien YouTube (bonus si video intégrée dans le HTML) etc. Faites vous plaisir.

Pour les MIAGEs et Master IFI : démerdez-vois mais les données doivent venir de cette API : https://wasabi.i3s.unice.fr/apidoc/ vous utiliserez l'API fetch pour récupérer les données.