Semaine 4 – Javascript et le DOM

Interaction entre JS et le DOM

• Ressources:
  • Cours: Introduction to events, UI Events
  • TLDR: getElementById, querySelector, querySelectorAll, innerText, innerHTML, append, remove, cloneNode, classList, dataset
  • Cheat sheet: tutplus cheat sheet
• Document Object Model, window, document
• Walking the DOM: descendants, children, childNodes, firstChild, lastChild, nextSibling
• Searching: getElementById, querySelector, querySelectorAll, closest, matches
• Basic node properties: innerHTML, outerHTML, textContent
• DOM Attributes and properties: hasAttribute, getAttribute, setAttribute, removeAttribute, dataset
• Modifying the document: createElement, cloneNode, append, prepend, remove
• Styles and classes: className, classList (add, remove, toggle, contains), style
• Element size and scrolling: clientWidth, clientHeight, scrollWidth, scrollHeight
• Window scrolling: scrollTo, scrollBy, scrollIntoView
• Coordinates

Exercice: Charger des données

• Tools: Excel, airtable
• Formats: csv, json
• Concepts: views, filtering, grouping, sorting, formulas, pivot tables
• Online tools: CSV to json, JSON viewer
• Datasets: Simpsons episodes list, Swiss Baby Names
• Ready to use datasets: Simpsons csv, Simpsons json, female newborn names csv, female newborn names json, male newborn names csv, male newborn names json

Événements

• Ressources:
  • Cours
  • TLDR: addEventListener, click, pointerover, pointerout, pointerdown, DOMContentLoaded
• Browser events: click, mouseover, mouseout, mousedown, mouseup, mousemove, keydown, keyup
• Browser events
• Add event listener
• Event object
• Event bubbling, event.target, event.stopPropagation() and event delegation
• Pointer events
• Other events: Window resize, Scroll event
• Intersection observer

Pour la prochaine fois : Quantified Self à partir de l’export Instagram

• Objectif général : Explorer vos données Instagram pour mieux vous comprendre et créer une fiche personnelle dynamique. Le focus actuel est sur le chargement automatique et dynamique des données, pas sur l’analyse avancée.
• Étape 1 – Organisation et nettoyage de l’export :
  • Placez vos fichiers dans votre dossier www personnel (racine dédiée à vos données).
  • Supprimez les vidéos et messages privés pour vous concentrer sur les données publiques.
  • Redimensionnez toutes les images à 50 px de large et convertissez-les en WebP pour des raisons de confidentialité, par exemple avec ImageMagick : mogrify -format webp -resize 50 *.jpg
• Étape 2 – Chargement dynamique des données :
  • Chargez vos fichiers JSON avec fetch dans votre page unique (“one-page”).
  • Le but est de charger toutes les stories et autres données intéressantes (marketing, interactions, etc.).
  • Si le chargement complet fait planter le navigateur, limitez à quelques centaines de stories.
  • Ne pas modifier la structure des fichiers pour que les données puissent être combinées avec celles des autres participants à l’avenir.
  • Les graphes et visualisations plus avancées viendront pour la prochaine session. Pour cette fois, concentrez-vous uniquement sur le chargement et l’affichage des données.
• Étape 3 – Création du layout / design :
  • Créez une fiche personnelle de type “Quantified Self” pour visualiser vos données.
  • Réfléchissez aux différentes typologies de données à intégrer (texte, images, autres informations Instagram).
  • Le design doit être extensible et adaptable à différentes informations et à des données d’autres participants dans le futur.
  • Toutes les informations doivent être visibles sur une seule page, sans navigation supplémentaire.
  • Ce design est un exercice de visualisation et d’UX : quelles données sont intéressantes à mettre en avant ?
• Étape 4 – Exploration et analyse facultative :
  • Vous pouvez commencer à regarder vos données dans Excel ou dans data.json pour identifier des patterns ou informations intéressantes.
  • Ce travail est facultatif, mais il aide à préparer les prochaines sessions où nous ferons des comparatifs entre participants.
• Rappel :
  • Vous avez 512 MB au total pour tous vos exercices.
  • Concentrez-vous sur le chargement dynamique et le design visuel pour cette session. L’analyse approfondie et les graphes viendront plus tard.
  • Pensez à la compatibilité avec les données des autres participants pour la prochaine phase, mais cela n’est pas requis maintenant.