Logo Angular

Mise en forme attrayante de données JSON

Site web

Mars 2015

Contexte

Des données JSON à afficher

Dans le cadre scolaire, un jeu de données en JSON a été fourni et il a été demandé aux étudiants de les mettre en page totalement librement du moment que l’intégralité de ces données était utilisée.

Les langages à utiliser devaient être JavaScript, HTML et CSS.

Objectif

Présenter les données de manière attractive

Mon but était de présenter les données pour susciter l’envie de tout regarder, par exemple, comme si c’était pour expliquer le système solaire à des enfants.

Comme le JSON était en français et en anglais, cela rentrait toujours dans mon idée d’application à visée pédagogique pour de jeunes élèves !

Compétences développées

  • Prise en main d’AngularJS
  • Montée en compétences en JS
  • Traitement d’un format JSON
  • Autonomie

Compétences développées

Prise en main d’AngularJS
Montée en compétences en JS
Traitement d’un format JSON
Autonomie

Solution

Des planètes souriantes

Pour le traitement du fichier JSON et la gestion des langues, j’ai choisi d’utiliser AngularJS.

Les planètes ont été positionnées en fonction des distances réelles et leur diamètre a été calculé en prenant en compte la taille de la fenêtre et les données fournies.

Lors du clic sur une planète, le détail des informations la concernant s’affiche de façon attrayante notamment avec des sourires aléatoires pour amuser les enfants !

Technologies utilisées

Logo Angular
HTML 5
CSS 3
Vanilla JS