Travail noté #

Question 1 : Expressions mathématiques avec MathML et CSS #

Dans cette première question, vous créerez des expressions mathématiques complexes en utilisant MathML (Mathematical Markup Language) et les mettrez en forme avec du CSS spécifique à MathML. Vous développerez une page web présentant différentes formules mathématiques avec une mise en forme élégante.

Voici la structure HTML de base que vous devez utiliser :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mathématiques avec MathML</title>
    <style>
        /* C'est à vous d'implémenter le CSS spécifique à MathML ici */
    </style>
</head>
<body>
    <h1>Formules Mathématiques avec MathML</h1>

    <section>
        <h2>Équation quadratique</h2>
        <math display="block">
            <mi>x</mi>
            <mo>=</mo>
            <mfrac>
                <mrow>
                    <mo>−</mo>
                    <mi>b</mi>
                    <mo>±</mo>
                    <msqrt>
                        <msup>
                            <mi>b</mi>
                            <mn>2</mn>
                        </msup>
                        <mo>−</mo>
                        <mn>4</mn>
                        <mi>a</mi>
                        <mi>c</mi>
                    </msqrt>
                </mrow>
                <mrow>
                    <mn>2</mn>
                    <mi>a</mi>
                </mrow>
            </mfrac>
        </math>
    </section>

    <section>
        <h2>Intégrale</h2>
        <math display="block">
            <mrow>
                <msubsup>
                    <mo>∫</mo>
                    <mn>0</mn>
                    <mi>π</mi>
                </msubsup>
                <msup>
                    <mi>sin</mi>
                    <mn>2</mn>
                </msup>
                <mi>x</mi>
                <mo>ⅆ</mo>
                <mi>x</mi>
                <mo>=</mo>
                <mfrac>
                    <mi>π</mi>
                    <mn>2</mn>
                </mfrac>
            </mrow>
        </math>
    </section>
</body>
</html>

Vous devez créer un CSS qui améliore la présentation des expressions MathML avec les propriétés suivantes :

Élément math :
- font-family: 'Times New Roman', serif; pour une police mathématique appropriée
- font-size: 18px; pour une taille lisible
- line-height: 1.4; pour un espacement confortable
Fractions (mfrac) :
- padding: 2px 0; pour espacer la fraction
- L’élément <mfrac> dessine déjà nativement la barre de fraction ; ajustez-la au besoin avec fraction-bar-thickness plutôt que d’ajouter une border (ce qui produirait une double barre)
- margin: 4px 0; pour aérer la fraction
Variables (mi) :
- font-style: italic; pour différencier les variables
- color: #2E7D32; pour une couleur verte distinctive
- font-weight: normal; pour les maintenir lisibles
Opérateurs (mo) :
- color: #1976D2; pour une couleur bleue
- font-weight: bold; pour les mettre en valeur
- padding: 0 2px; pour les espacer des autres éléments
Constantes numériques (mn) :
- color: #D32F2F; pour une couleur rouge
- font-weight: bold; pour les distinguer
- font-variant-numeric: tabular-nums; pour un alignement uniforme

Ressources :

Spécification MathML : https://www.w3.org/TR/MathML3/
Guide MathML MDN : https://developer.mozilla.org/fr/docs/Web/MathML

Livrables : Page HTML complète avec MathML et CSS, et documentation des choix de mise en forme.

Question 2 : Graphiques vectoriels avec SVG et CSS #

Dans cette deuxième question, vous créerez des graphiques vectoriels complexes en utilisant SVG (Scalable Vector Graphics) et les mettrez en forme avec du CSS spécifique à SVG. Vous développerez une visualisation de données statistiques avec animations et interactions.

Voici la structure HTML de base que vous devez utiliser :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Visualisation de données avec SVG</title>
    <style>
        /* C'est à vous d'implémenter le CSS spécifique à SVG ici */
    </style>
</head>
<body>
    <h1>Visualisation de données avec SVG</h1>

    <svg width="600" height="400" viewBox="0 0 600 400">
        <!-- Dégradés réutilisables pour les barres -->
        <defs>
            <linearGradient id="degradeBarre" x1="0" y1="1" x2="0" y2="0">
                <stop offset="0%" stop-color="#4CAF50"/>
                <stop offset="100%" stop-color="#81C784"/>
            </linearGradient>
            <linearGradient id="degradeBarreSurvol" x1="0" y1="1" x2="0" y2="0">
                <stop offset="0%" stop-color="#66BB6A"/>
                <stop offset="100%" stop-color="#A5D6A7"/>
            </linearGradient>
        </defs>

        <!-- Titre -->
        <text x="300" y="30" class="title">Ventes mensuelles 2024</text>

        <!-- Axes -->
        <line x1="50" y1="350" x2="550" y2="350" class="axis"/>
        <line x1="50" y1="50" x2="50" y2="350" class="axis"/>

        <!-- Barres du graphique -->
        <rect x="70" y="250" width="40" height="100" class="bar" data-value="100"/>
        <rect x="130" y="200" width="40" height="150" class="bar" data-value="150"/>
        <rect x="190" y="180" width="40" height="170" class="bar" data-value="170"/>
        <rect x="250" y="220" width="40" height="130" class="bar" data-value="130"/>
        <rect x="310" y="160" width="40" height="190" class="bar" data-value="190"/>
        <rect x="370" y="190" width="40" height="160" class="bar" data-value="160"/>

        <!-- Étiquettes des mois -->
        <text x="90" y="375" class="label">Jan</text>
        <text x="150" y="375" class="label">Fév</text>
        <text x="210" y="375" class="label">Mar</text>
        <text x="270" y="375" class="label">Avr</text>
        <text x="330" y="375" class="label">Mai</text>
        <text x="390" y="375" class="label">Jun</text>

        <!-- Points de données animés -->
        <circle cx="90" cy="240" r="5" class="data-point"/>
        <circle cx="150" cy="190" r="5" class="data-point"/>
        <circle cx="210" cy="170" r="5" class="data-point"/>
    </svg>
</body>
</html>

Consignes spécifiques pour le CSS SVG :

Vous devez créer un CSS qui améliore la présentation du graphique SVG avec les propriétés suivantes :

Titre (.title) :
- text-anchor: middle; pour centrer le texte
- font-family: Arial, sans-serif; pour une police élégante
- font-size: 18px; pour une taille appropriée
- font-weight: bold; pour le mettre en valeur
Axes (.axis) :
- stroke: #333; pour une couleur sombre
- stroke-width: 2; pour une épaisseur visible
Barres (.bar) :
- En SVG, la propriété fill n’accepte pas la fonction CSS linear-gradient(). Pour obtenir un dégradé, définissez un <linearGradient> dans une section <defs> du SVG, puis référencez-le : fill: url(#degradeBarre);
- stroke: #2E7D32; pour une bordure plus foncée
- stroke-width: 1; pour une bordure fine
- Au survol : référencez un second dégradé plus clair, par exemple fill: url(#degradeBarreSurvol);
Étiquettes (.label) :
- text-anchor: middle; pour centrer sous les barres
- font-size: 12px; pour une petite police
- fill: #666; pour une couleur discrète
Points de données (.data-point) :
- opacity: 0; pour les rendre invisibles par défaut
- fill: #FF5722; pour une couleur orange visible
- transition: opacity 0.3s ease; pour une apparition en douceur
- Faites-les apparaître au survol. Notez qu’en CSS il n’existe pas de sélecteur « parent » : comme les barres et les points sont des éléments frères, .bar:hover .data-point ne fonctionne pas. Utilisez plutôt un survol du conteneur SVG (svg:hover .data-point { opacity: 1; }) ou un sélecteur de frères.

Ressources :

Spécification SVG : https://www.w3.org/TR/SVG2/
Guide SVG MDN : https://developer.mozilla.org/fr/docs/Web/SVG

Livrables : Page HTML complète avec SVG et CSS, et documentation des choix de mise en forme.

Rapport vidéo #

Vous pouvez remettre votre rapport sous forme de vidéo plutôt qu’en format écrit : une démonstration commentée à l’écran dans laquelle vous présentez votre code, son exécution et vos résultats. Le code source et les fichiers demandés doivent tout de même être remis. Les critères du barème s’appliquent de la même façon, que le rapport soit écrit ou filmé.

Barème de correction #

Ce travail est noté sur 15 points, soit les 15 % qu’il vaut dans la note finale.

Critère	Points
Question 1 — MathML et CSS	7
Question 2 — SVG et CSS	7
Validation HTML et documentation des choix	1

Les points de chaque critère sont accordés au prorata de ce qui fonctionne et de ce qui est démontré dans la remise. Un travail qui ne compile pas ou ne s’exécute pas ne peut obtenir plus de la moitié des points.