Manuel
100%
Cliquez ou glissez un élément depuis la palette.
Besoin d’idées ? Bouton « 💡 Exemples » du bandeau d’étape.
⇕ hauteur de page
Maj : sélection multiple · Alt : sans aimant · Double-clic : modifier le texte ou entrer dans un groupe

Le projet

Commencez par ici : qui pilote le projet, pour qui est le site, qui le relit, et pourquoi. Ces informations figurent sur la page de garde du dossier et dans le nom des fichiers. Les trois champs doivent être remplis pour enregistrer et exporter.

Le projet et l’équipe

Semestre
Unité d’enseignement
UE MM01
Adresse du site (URL)

Le sujet du site sur Wikipédia

Collez le lien de la page Wikipédia du sujet (l’artiste, le club, le lieu…) : son image principale illustre la page de garde du dossier, avec son crédit (auteur et licence).

Page Wikipédia

Présentation du projet

Partie « Présentation du projet » du dossier. Répondez aux questions en quelques phrases : une rubrique vide apparaît en orange « À compléter » dans le dossier exporté.

Avancement du dossier

Équipe, client et présentation du projet renseignés ?

Arborescence du site

📄 Page = un fichier .html avec son zoning · 📁 Rubrique = un dossier qui regroupe des pages (sans fichier). Cliquez sur l’icône pour passer de l’un à l’autre. ↑ ↓ changer l’ordre · → placer sous l’élément précédent · ← remonter d’un niveau. Le nom du fichier se modifie directement ; la page d’accueil (la première) est toujours index.html.

Adresse du site en ligne

Pages, rubriques et noms de fichiers terminés ?

Exporter

Que voulez-vous obtenir ?

Le document à rendre ou à imprimer, selon le plan MM01 : page de garde, sommaire, puis les parties cochées. Chaque page du site y est montrée en mobile, tablette et ordinateur.

1Ce que contient le dossier
Parties, dans l’ordre du dossier (↑ ↓ pour changer l’ordre)

    Textes de justification rédigés :

    2Mise en page des maquettes
    3

    L’image de l’arborescence (pour un document, une présentation) et le fichier sitemap.xml, à déposer à la racine du site.

    Une image par format (mobile, tablette, ordinateur), pour un diaporama, un rendu sur Moodle ou une impression.

    1Quelles maquettes ?
    2Fichier et affichage
    Type de fichier
    Résolution
    3

    Un fichier SVG par format, avec des calques nommés et des textes modifiables. Glissez-déposez-le dans Figma ou Penpot pour poursuivre la maquette.

    1Quelles maquettes ?
    2Affichage
    3

    Ouvrir

    Versions sauvegardées automatiquement

    Votre travail est sauvegardé en continu dans ce navigateur, images comprises, et une version est gardée toutes les 5 minutes de travail. Ces versions restent sur ce poste et dans ce navigateur : le fichier .json reste votre vraie sauvegarde.

    Enregistrez votre projet

    Exemples

    ⚠️ Nom de fichier à corriger

    Le nom pose problème sur un serveur web (Linux) :

    Nom proposé :

    La règle : tout en minuscules, sans accent, sans espace, sans signe spécial, mots séparés par des tirets, extension .html. Exemple : « Débuts et Formation.html » → debuts-et-formation.html

    Nouvelle page

    La nouvelle page commence…

    Guide de style

    Construisez le guide de style de tout le site : votre palette sur le cercle chromatique, vos typographies, vos boutons. Il « habille » le wireframe en vue UI. Rien n’est imposé : justifiez vos choix dans le Dossier.

    Contrôle d’accessibilité

    Vérifie la maquette telle qu’elle apparaît en vue UI, d’après les règles WCAG 2.1 (niveau AA) : contrastes des textes, tailles de texte, zones cliquables sur mobile, textes alternatifs des images, structure des titres. Un contrôle automatique ne remplace pas un test avec de vrais utilisateurs.

    Réinitialiser

    Que voulez-vous effacer ?

    Avant d’effacer, l’outil garde une version de votre travail : Ouvrir → « Versions sauvegardées automatiquement » permet de la retrouver. Ctrl+Z annule aussi juste après.

    🖥️

    Écran trop petit

    Cet outil est conçu pour un ordinateur (fixe ou portable) avec souris et clavier, sur un écran d’au moins 1024 px de large.

    Sur tablette ou téléphone, le glisser-déposer, les info-bulles et les raccourcis clavier ne fonctionnent pas correctement.
    Sur ordinateur, agrandissez la fenêtre ou réduisez le zoom du navigateur (Ctrl + -).

    MM01 Studio

    Du besoin du client à la maquette UI

    Concevez votre site web étape par étape, en suivant les onglets : Projet, Arborescence, Zoning, UX et UI, en mobile, tablette et ordinateur.

    Le manuel et les raccourcis clavier sont disponibles en haut à droite (boutons Manuel et ?).

    Version
    © Nicolas THOREL et Claude

    À quoi sert cette étape

    Ce qu’il faut faire

    Raccourcis clavier

    Construisez le zoning de votre page d'accueil pour chaque format (onglets). Commencez par les grandes zones, puis placez les contenus. L'aimant cale les blocs sur les colonnes et sur les autres éléments.

    Clic / GlisserAjouter depuis la palette Maj+ClicSélection multiple (ou cadre de sélection sur le fond) Alt en glissantDésactiver l'aimant Maj + coinRedimensionner en gardant les proportions ←↑→↓Déplacer de 1 px (avec Maj : 8 px) Ctrl+C / VCopier / coller (aussi d'un format à l'autre) Ctrl+DDupliquer SupprSupprimer Ctrl+Z / YAnnuler / rétablir Ctrl+SEnregistrer le fichier .json Ctrl+moletteZoom Ctrl+GGrouper la sélection (Ctrl+Maj+G : dégrouper) Double-clicSélectionner un élément à l’intérieur d’un groupe Ctrl+Maj+LVerrouiller / déverrouiller (un élément verrouillé ne bouge plus) Ctrl+Maj+HMasquer / afficher (un élément masqué n’est pas exporté) Ctrl+↑ / ↓Avancer / reculer d’un plan + PageAjouter une page (bloc Projet, en haut à gauche) · Dupliquer copie la page ouverte avec son zoning · clic sur une page pour l’ouvrir, double-clic pour la renommer, ▸ pour plier une rubrique ArborescenceOrganiser pages (📄 fichiers .html) et rubriques (📁 dossiers), nommer les fichiers, télécharger le schéma, exporter / importer un sitemap.xml Élément commun« Rendre commun à toutes les pages » : l’élément est ajouté aux autres pages et ses modifications s’appliquent partout (sauf sa position verticale)

    Manuel et procédure complète (nouvel onglet).

    Le travail est conservé automatiquement dans ce navigateur, mais pensez à Enregistrer un fichier .json pour le reprendre sur un autre poste.