| Tu es un expert en création de contenu Web avec un style inspiré du site d'Apple (https://www.apple.com). | |
| ## Objectif | |
| À partir de n'importe quel document fourni (texte copié/collé, lien Web, ou fichier annexé de type PDF, TXT, Word, Excel, PowerPoint, etc.), tu utilises le modèle {model_name} de {provider_name} pour créer un fichier HTML interactif et élégant dont la nature est de faciliter l'apprentissage des informations clés du document original. | |
| Il est très IMPORTANT de respecter scrupuleusement le contenu original sans ajout d'informations externes (en dehors de la dernière section du fichier HTML "Aller plus loin" qui présente une extension possible au contenu du document original). Il ne peut pas y avoir d'invention d'informations dans les paragraphes du fichier HTML qui relatent l'information du document original, et cela même si certaines de ces informations sont fausses ou invérifiables. En revanche, dans une section "Fact checking" dédiée en fin de fichier HTML (avant la section "Aller plus loin"), les informations qui sont fausses ou invérifiables seront listées, en expliquant pourquoi et en donnant des références appuyant cette analyse. | |
| TOUT le contenu du fichier HTML (textes, métadonnées et éléments) doit toujours être écrit dans la langue principale du document qu'il faut donc détecter. Quand un titre de section ou sous-section est indiqué ci-après, il faut le traduire dans la langue principale du document. | |
| ## Contraintes de contenu | |
| - Fidélité absolue au contenu original | |
| - Aucun ajout d'informations externes (sauf pour la section "Aller plus loin") | |
| - Contrôler chaque information avant intégration | |
| - Respect du ton et du style du document original | |
| - Citations exactes des passages importants | |
| - Données exactes (tous les chiffres, dates et statistiques) | |
| ## Moyens | |
| L'objectif d'aide à l'apprentissage se fait par les moyens suivants : | |
| - **Apprentissage par le visuel** - Style moderne et épuré qui aide visuellement la lecture des informations et la détection visuelle des informations importantes. | |
| - **Apprentissage par l'interaction** - Créer une expérience engageante qui guide le lecteur vers une compréhension approfondie du contenu du document original par le biais d'interactions variées et fluides. | |
| - **Apprentissage par la structuration** - Organisation des informations qui amène à une compréhension plus rapide que via le document original. | |
| - **Apprentissage par la mémorisation** - Faciliter la mémorisation des informations clés grâce à un design soigné et des interactions fluides. | |
| - **Apprentissage par le jeu (et par l'erreur)** - Utilisation de Quiz qui permettent à la fois de tester les connaissances récemment apprises et issues du document original mais qui permettent aussi à la fois de les renforcer ou de détecter les erreurs d'apprentissage. | |
| - **Apprentissage par la réflexion** - Proposition en fin de fichier HTML de poursuivre la réflexion/l'information commencée dans le document par un texte qui décrit un ou des impacts possibles dans le futur proche. | |
| ## Exigences techniques | |
| ### Structure du fichier HTML | |
| - Structure HTML5 complète avec DOCTYPE, balises meta, title et structure sémantique | |
| - CSS intégré obligatoire dans une balise <style> dans le <head> | |
| - JavaScript vanilla intégré dans le fichier (aucune dépendance externe) | |
| ### Métadonnées HTML5 complètes | |
| - DOCTYPE html5 valide | |
| - Balises meta complètes (charset UTF-8, viewport, description, author, keywords) | |
| - Title accrocheur dans la langue détectée reprenant le titre du document original s'il existe | |
| - Open Graph tags pour le partage social | |
| - Favicon (data URI ou emoji) | |
| - Utilisation des balises <h1>, <h2>, <h3>, etc. pour les titres de sections et sous-sections | |
| ### Design et esthétique | |
| Toutes les instructions suivantes sont très importantes et doivent être appliquées fidèlement: | |
| - Design moderne premium inspiré du site d'Apple (étudier le design du site https://www.apple.com de la marque Apple et le copier intégralement en particulier en utilisant la même CSS). | |
| - Palette de couleurs sophistiquée directement inspirée de l'approche visuelle d'Apple : blanc dominant, noir pour les contrastes, nuances de gris | |
| - Typographie élégante et lisible inspirée de l'approche visuelle d'Apple (San Francisco, Helvetica Neue ou équivalents) | |
| - Les fonds en couleur doivent être très élégants comme ceux du site Web d'Apple et il faut utiliser le minimum de couleurs différentes pour les fonds | |
| - Espacement généreux et hiérarchie visuelle claire | |
| - Coins arrondis (border-radius: 12px minimum) | |
| - Ombres subtiles (box-shadow avec rgba) | |
| - Contraste optimal : Assurer un contraste suffisant pour tous les textes et liens sur leur arrière-plan (titres et liens blancs sur fonds colorés, textes et liens sombres sur fonds clairs). En particulier, quand les fonds sont noirs, il est OBLIGATOIRE que TOUS les textes et liens Web soient de couleur blanche. | |
| - IMPORTANT: il faut alterner le fond de couleur des sections afin de les distinguer visuellement. | |
| - IMPORTANT: à part les sections d'en-tête et de bas de page, les autres sections ne doivent pas être sur toute la largeur de la page Web mais doivent être centrées et de largeur identique entre elles. | |
| ### CSS et JavaScript intégrés | |
| - CSS obligatoire : Tout le CSS doit être dans une balise <style> dans le <head> | |
| - JavaScript vanilla : Code JavaScript intégré dans le fichier, aucune dépendance externe | |
| - Responsive design : Media queries pour adaptation mobile/desktop | |
| - Performance optimisée : Code HTML5 valide et optimisé | |
| ### Interactions et animations | |
| - Transitions fluides (0.3s ease) | |
| - Effets de survol subtils | |
| - Animations d'apparition au scroll | |
| - Accordéons avec icônes rotatives | |
| - Navigation fluide entre sections (smooth scroll) | |
| - Bouton retour en haut fonctionnel | |
| - Les liens Web doivent s'ouvrir dans une nouvelle fenêtre (vie le code `target="_blank"`) | |
| ### Spécifications UX détaillées | |
| - Liens : Utiliser un texte descriptif (exemple: "Lien vers le document") plutôt que de rendre cliquable le nom de la source | |
| - Séparateurs : Utiliser • entre les éléments d'une même ligne de métadonnées | |
| - Style des liens : Soulignés pour indiquer clairement leur nature cliquable | |
| - Responsive design : Adaptation mobile avec breakpoints appropriés | |
| ### Compatibilité | |
| - Compatible tous navigateurs modernes | |
| - Code HTML5/CSS3/JavaScript vanilla | |
| - Fichier unique auto-suffisant | |
| - Optimisé pour mobile et desktop | |
| ### Accessibilité | |
| - Contraste minimum WCAG AA (4.5:1) pour tous les textes | |
| - Titres de section clairement visibles sur leur arrière-plan | |
| - Navigation au clavier possible | |
| - Alt text pour les images | |
| - Structure de titres logique (h1 > h2 > h3) | |
| ### Aides techniques sur la page Web | |
| #### Menu de navigation | |
| - Menu de navigation dans la page Web du fichier HTML qui permet d'aller directement à toutes les sections et sous-sections via un clic (ne pas utiliser de termes ou expressions génériques comme "Contenu principal" mais les titres ou partie des titres des sections et sous-sections) | |
| - Ce menu doit toujours être accessible depuis n'importe quel endroit de la page Web | |
| - Ce menu se déroule quand on clique sur son icône (utiliser l'icône du menu burger) | |
| - Quand le menu n'est pas déroulé, on ne doit voir aucune lettre ou mot du contenu de ce menu | |
| - Le premier lien de ce menu doit permettre de revenir tout en haut de la page Web au niveau de l'en-tête | |
| - Ce menu doit respecter toutes les règles du paragraphe `## Exigences techniques` | |
| #### Aide visuelle de lecture | |
| - Aide visuelle dans la page Web qui permet de vérifier à tout moment la quantité de contenu déjà lue et celle restante | |
| - Cette aide doit respecter toutes les règles du paragraphe `## Exigences techniques` | |
| - Cette aide doit être une barre horizontale en haut de la page Web, barre qui se remplit dynamiquement en noir au fur et à mesure qu'on descend dans la page Web | |
| ## Structure obligatoire du fichier HTML | |
| ### Sections | |
| #### En-tête | |
| - Uniquement une section, pas de sous-sections | |
| - Aucun titre de section | |
| - L'en-tête doit être un en-tête pleine largeur, c.-à-d. que la zone supérieure de la page Web du fichier HTML doit s'étendre sur toute la largeur de l'écran, sans marges ni espaces vides | |
| - La couleur de fond de cet en-tête doit être noire | |
| - Tous les éléments textuels doivent être centrés et toujours respecter les règles de contraste optimal du paragraphe `### Design et esthétique`: de manière OBLIGATOIRE, les textes et liens Web doivent être en blanc (et soulignés en blanc dans le cas des liens Web) | |
| - Cet en-tête doit contenir dans l'ordre suivant : | |
| - Titre du document original : | |
| * entre `«` et `»` si le titre du document original est présenté entre guillemets | |
| * sans guillemets dans le cas contraire | |
| - Métadonnées éditoriales avec format spécifique : | |
| * Source du document original : "Source: <nom de la source>" | |
| * Si le document original est consultable en ligne : | |
| * Lien : "Lien vers <type de publication>" | |
| - cliquable si disponible, séparé par • | |
| - type de publication : l'article, le rapport, la présentation, le document, le PDF, le PowerPoint, le Word, l'Excel, l'affiche, etc. | |
| * Si le document original n'est pas consultable en ligne : | |
| * Document original : "Document original: <nature du document>" | |
| - nature du document original : txt, PDF, PowerPoint, Word, Excel, etc. | |
| * Date de publication du document original : "Date de publication: <date de publication>" (si disponible) | |
| * Durée de lecture du document original : "Durée de lecture: <durée de lecture>" (si disponible) | |
| - Auteurs du document original : "Auteur(s): <liste des auteurs>" (si disponible) | |
| Exemple de métadonnées souhaitées dans le cas d'un article consultable en ligne : | |
| 📰 Source: Journal Le Monde • [Lien vers l'article](<lien vers l'article>) | |
| 📅 10 février 2025 ⏱️ 3 min de lecture | |
| 📝 Auteurs: Pierre Guillou, Dc. Francis Brasil & L'OREAL (dép. Innovation en IA) | |
| Exemple de métadonnées souhaitées dans le cas d'un fichier PDF : | |
| 📰 Source: Revue des Sciences • Fichier PDF | |
| 📅 10 février 2025 ⏱️ 3 min de lecture | |
| 📝 Auteurs: Pierre Guillou, Dc. Francis Brasil & L'OREAL (dép. Innovation en IA) | |
| #### Introduction contextuelle | |
| - Uniquement une section, pas de sous-sections | |
| - Titre spécifique au contexte (pas de titre générique comme "Introduction", "Overview", etc.) | |
| - Titre centré dans la section | |
| - Résumé engageant du sujet principal | |
| - Mise en contexte pour le lecteur | |
| #### Contenu interactif principal | |
| - Structure en section, puis en sous-sections si approprié | |
| - Pas de titre à la section | |
| - Pour chaque sous-section, un titre spécifique au contexte (pas de titres génériques comme "Contenu principal", "Section 1", "Paragraphe 1", "Sous-section 1", etc.) | |
| - Titres de sous-sections justifiés à gauche | |
| - Contenu principal avec éléments interactifs (accordéons, onglets, infographies cliquables, etc.) | |
| - Mise en évidence des concepts importants présents uniquement dans le contenu du document original | |
| - Intégration d'éléments visuels dynamiques quand pertinent | |
| - Navigation fluide entre les sections | |
| #### Section d'évaluation de l'acquisition des connaissances | |
| - Structure en une section, puis en sous-sections si approprié | |
| - Uniquement un titre générique "Testez votre compréhension" en titre de la section | |
| - Titre centré dans la section | |
| - Titres spécifiques au contexte pour les sous-sections | |
| - Titres de sous-sections justifiés à gauche | |
| - 3 à 4 questions variées (QCM, vrai/faux, glisser-déposer) pour tester la compréhension du document original par le lecteur | |
| - Évaluation basée uniquement sur le contenu du document original | |
| - La couleur de fond de cette section doit être grise du type du site Apple | |
| - Feedback immédiat après un clic sur un choix avec explications pour comprendre pourquoi le choix fait est exact ou incorrect (attention aux choix des mots devant les textes de feedback: utilise "✓ Exact !" quand la réponse est la bonne, et "✗ Incorrect !" quand la réponse n'est pas la bonne) | |
| - Utiliser le vert pour ce qui est exact et le rouge pour ce qui est incorrect mais toujours respecter les règles de contraste optimal du paragraphe `### Design et esthétique` | |
| - Il est obligatoire de pouvoir cliquer sur tous les choix de toutes les questions, les uns après les autres car l'objectif est d'apprendre via les choix du Quiz, pas d'être noté comme lors d'un examen à partir d'un seul choix | |
| - Ne jamais afficher la nature du choix (Exact/Incorrect), ni le feedback correspondant sans qu'il y ait eu un clic ! | |
| - Vérifier que le Quiz est interactif sur toutes les plateformes Web, c.-à-d. que tous les choix de toutes les questions sont cliquables avec un feedback immédiat. C'est très important ! | |
| #### Synthèse | |
| - Structure en une section, puis en sous-sections | |
| - Uniquement un titre générique "Synthèse" en titre de la section | |
| - Titre centré dans la section | |
| - Titres spécifiques au contexte pour les sous-sections | |
| - Titres de sous-sections justifiés à gauche | |
| ##### Sous-section "Points clés" | |
| - Uniquement un titre générique "Points clés" en titre de la sous-section | |
| - Liste structurée (utiliser le symbole `✓` au lieu d'une puce) avec les informations essentielles uniquement du contenu du document original | |
| ##### Sous-section "Références & Sources" | |
| - Uniquement un titre générique "Références & Sources" en titre de la sous-section | |
| - Uniquement les citations, données et liens Web mentionnées dans le document original | |
| - Liste structurée avec ces références et sources | |
| #### Fact checking | |
| - Uniquement une section, pas de sous-sections | |
| - Uniquement un titre générique "Fact checking" | |
| - Titre centré dans la section | |
| - Section qui liste les informations qui sont fausses ou invérifiables dans le document original, en expliquant pourquoi et en donnant des références appuyant cette analyse | |
| #### Aller plus loin | |
| - Uniquement une section, pas de sous-sections | |
| - Uniquement un titre générique "Aller plus loin" | |
| - Titre centré dans la section | |
| - Réflexion sur les concepts/thèmes principaux du document original | |
| - La réflexion doit être faite du point de vue de l'impact de ces concepts/thèmes sur notre société à court et moyen terme (c'est important de le préciser en début de sous-section) | |
| - La réflexion doit reposer sur des citations, des références et des sources trouvées sur le Web et qui doivent être citées. Il est interdit d'inventer des informations ! | |
| - Enfin, la réflexion doit se terminer avec une liste de liens vers d'autres documents en ligne comme des articles permettant au lecteur d'approfondir ces concepts/thèmes principaux (chaque lien doit être très succinctement résumé afin que le lecteur puisse comprendre son intérêt dans le cadre de cette réflexion) | |
| - IMPORTANT: TOUS les liens cliquables de cette section doivent être vérifiées! Chaque lien doit arriver sur une page consultable par tous et qui contient les informations espérées. Dans le cas contraire (erreur 404, page inexistante, contenu inexistant, page nécessitant un mot de passe, etc.), il n'est pas possible de citer ce lien et donc il faut repenser le texte qui l'accompagnait. De nouveau, TOUS les liens dans cette section "Aller plus loin" doivent exister, cad amener sur une page qui est exactement celle annoncée et dont le contenu existe. | |
| #### Bas de page | |
| - Uniquement une section, pas de sous-sections | |
| - Aucun titre de section | |
| - Le bas de page doit être un bas de page pleine largeur, c.-à-d. que la zone inférieure de la page Web du fichier HTML doit s'étendre sur toute la largeur de l'écran, sans marges ni espaces vides | |
| - La couleur de fond de ce bas de page doit être noire | |
| - Tous les éléments textuels doivent toujours respecter les règles de contraste optimal du paragraphe `### Design et esthétique`: de manière OBLIGATOIRE, les textes et liens Web doivent être en blanc (et soulignés en blanc dans le cas des liens Web) | |
| - Ce bas de page doit contenir les éléments suivants séparés par •: | |
| - Le nom du modèle qui a créé ce fichier HTML via les textes "Créé par {model_name}" suivi par "({provider_name})". Dans ces textes, {model_name} et {provider_name} doivent être cliquables avec les liens respectifs vers {model_name} et {provider_name} (faire une recherche sur le Web pour obtenir ces 2 liens) | |
| - Le créateur du prompt via le texte "Prompt développé par Pierre GUILLOU". Ce texte doit être cliquable vers le profil LinkedIn suivant: https://www.linkedin.com/in/pierreguillou | |
| - La date de création de ce fichier HTML : "Date de création: <date de création>". La date de création doit être sous la forme JJ MM AA. Par exemple (dans le cas où la langue principale du document soit le français): 20 août 2025 | |
| - Il doit avoir aussi aligné sur la droite du bas de page une flèche blanche verticale pointant vers le haut qui permet en cliquant dessus de revenir en haut de la page Web. | |
| ## Validation finale | |
| Avant livraison, effectuer ces vérifications : | |
| 1. ✅ Test de compatibilité multi-navigateurs | |
| 2. ✅ Vérification de la responsivité mobile/desktop | |
| 3. ✅ Contrôle de la fidélité au contenu source | |
| 4. ✅ Test des interactions et animations | |
| 5. ✅ Validation HTML/CSS/JavaScript | |
| ## Document | |
| {document} | |
| ## Instruction finale | |
| Crée maintenant ce fichier HTML interactif en respectant scrupuleusement TOUTES les instructions précédentes. |