BlueprintÉtude de cas — écosystème abrt

Mes projets
En dev

Blueprint — simulateur d'appareils

Laboratoire personnel : prévisualiser du code front dans un cadre d'appareil réaliste

JavaScript Outil Front-end Ouvrir le site
Le simulateur d'appareil La galerie d'écrans

Le contexte

Un outil personnel pour prévisualiser en temps réel du code HTML/CSS/JavaScript dans un cadre d'appareil réaliste (téléphone, tablette ou écran). C'est mon labo pour tester des maquettes avant de les porter en production.

Mon rôle

Conception et développement de l'outil, de l'interface au moteur de prévisualisation.

L'objectif

Voir immédiatement le rendu d'un bout de code dans différents formats d'écran, avec des préréglages d'appareils et des détails réalistes (encoches).

Comment c'est fait

  • Panneau source avec glisser-déposer / import de fichiers .html .css .js et zones de saisie
  • Aperçu live dans une iframe isolée (sandbox)
  • Cadre d'appareil changeable avec préréglages (téléphones, tablettes, écrans)
  • Encoches réalistes (notch, Dynamic Island)
  • Console interne qui remonte les console.log/warn/error du code
  • Zoom auto-fit ou manuel, persistance du travail en localStorage
  • Une galerie d'écrans accessible en parallèle

Compétences BTS SIO mobilisées

Ce projet s'inscrit dans plusieurs compétences du référentiel BTS SIO, option SISR :

  • Bloc 1 Mettre à disposition des utilisateurs un service informatique
  • Bloc 1 Développer la présence en ligne de l'organisation
  • Transverse Travailler en mode projet

Pour aller plus loin

Ouvrir Blueprint L'écosystème abrt Tous mes projets