--- tags : coltrane, developpement , html, css robots : noindex , nofollow --- # Développements Coltrane HTML/CSS [TOC] ## Tableau mes enquêtes Coltrane :new: :::warning **A EXPERTISER** L'affichage du tableau mes enquêtes comporte une anomalie. Un ascenseur horizontal s'affiche même lorsque la largeur du tableau n'est pas supérieure à la largeur disponible dans le navigateur. ::: Voici l'objet du délit : ![Barre horizontale disgracieuse](https://storage.googleapis.com/public-59000/gmpc/barre-horizontale-tableau-mes-enquetes.gif) Peux tu regarder cela ? Tu pourras utiliser l'inspecteur Firefox qui se lance avec le raccourci Ctrl + Maj + C - https://developer.mozilla.org/fr/docs/Outils/Inspecteur : la documentation est assez détaillée N'hésites pas si tu as des questions ! **Réponse : Je n'ai pas encore regardé la documentation mais ce que je constate d'ores et déjà: l'ascenseur du bas disparaît lorsque je "joue" sur la dimension de la largeur du conteneur.** ~~Pour width= 1000px, l'ascenseur disparaît en mode plein écran (portable perso)~~. ~~Deuxième proposition, je pense que : `width = min-content;` pourrait être une solution possible. En effet, j'ai beau rabattre ma fenêtre au maximum, sans que cela ne cache mes blocs, la barre de défilement horizontale n'apparaît toujours pas~~. ~~Troisième proposition : faire appel à google : ![](https://i.imgur.com/Dklvuvl.png)~~ https://www.it-swarm.dev/fr/html/comment-supprimer-la-barre-de-defilement-horizontale-dans-un-div/970568298/ ~~Et effectivement, il n'y a plus du tout de barre horizontale.Bref, c'est radical.~~ ~~J'ai mis dans le html et le body, le code css en question :~~ ![](https://i.imgur.com/Hpb52Bw.png) --- ![](https://i.imgur.com/Gc4Xgsl.png) **Le problème concernant l'affichage inopportun de la barre de défilement horizontale a disparu. Mathieu m'a aidée en ayant recours au responsive design.** **On ajoute :** ``` htlm{ overflow-x: hidden; } ``` **ainsi qu'à la suite du code dans la partie .conteneur du <body> :** ``` @media screen and (max-width: 950px) { html { overflow-x: scroll; } } ``` **Cela permet ainsi de supprimer la barre lorque la fenêtre du navigateur est supérieure à 950px.** --- ## Audit des pages HTML Portail et Pilotage ? :::success **Objectif** : Améliorer la qualité du code des pages du portail Coltrane et pilotage. ::: **En commençant par le portail : ce qui est attendu** : Pour chaque page après la page d'authentification : - Validation du code HTML avec le valideur W3C (https://validator.w3.org/#validate_by_input) - Lister les erreurs les plus fréquentes repérées par le validateur essayer de les corriger dans le validateur pour essayer de ne plus en avoir. - sauvegarder la version orginale des sources ainsi que la version contenant l'ensemble des corrections après passage successif dansle valideur HTML Pour chaque page, faire, dans un document ODT, un récapitulatif des erreurs et des propositions de corrections. Pages à auditer pour le portail: - https://entreprises.stat-publique.fr/portail/mesEnquetes/MesEnquetesAction.action - https://entreprises.stat-publique.fr/portail/mesEnquetes/MonCompteAction - https://entreprises.stat-publique.fr/portail/public/aide - https://entreprises.stat-publique.fr/portail/mesEnquetes/AssistancePortailAction --- ## Développement page de maintenance Coltrane [TERMINE] ### Maquette effectuée sous Paint 3 D ![](https://i.imgur.com/0nGWXSJ.png) ### SyncFiddle https://syncfiddle.net/fiddle/-M6eJa6BGOhOIqVwQGva ### Validation du code HTML A chaque étape je m'assure avoir un code valide. https://validator.w3.org/#validate_by_input ### Etapes de construction de la page #### Objectif 1 : faire une page moche juste avec le texte [Fait] Repartir du squelette de base (sans rien coller entre les balise head pour le moment) Ajouter à l'intérieur de la balise <body> ...</body> le texte attendu en utilisant les balises : - h1, h2 ... pour les titres et intertitres - p pour les paragraphes de texte - tu peux ajouter le texte des liens mais pas encore les liens A la fin de cette étape tu auras une page certes moche mais avec tout le texte. #### Objectif 2 : faire une page moche mais avec des images [Fait] Ajouter les images - la marianne - le logo statistique publique - le logo INsee medure pour comprendre - Dares Voici les adresses des images pour le moment on va prendre celles du portail on verra ensuite s'il faut faire différement - https://entreprises.stat-publique.fr/portail/img/logo_marianne.jpg - https://entreprises.stat-publique.fr/portail/img/logo_statpub.gif - https://entreprises.stat-publique.fr/portail/img/logo_insee.png - https://entreprises.stat-publique.fr/portail/img/LOGO%20DARES%20(word%20excel).png #### Objectif 3 : Ajouter les liens [Fait] Pour chaque lien le rendre actif en le faisant pointer vers la bonne adresse. Ajouter également des liens sur les images destinées à figurer dans le bas de la page (stat publiques, insee et dares). #### Objectif 4 : Travailler sur la structure de la page [Fait] Utiliser 3 balises div pour délimiter le bandeau haut , le milieu de la page et le bandeau bas. - ajouter une div pour le bandeau haut (identifié avec l'attribut id ="bandeauHaut") elle doit englober tous les éléments images et textes qui composent le bandeau haut de la page. - ajouter une div pour la partie centrale identifiée avec l'attribut id de ton choix - ajouter une div pour le bandeau bas avec l'attribut id de ton choix - au sein du bandeau bas on pourra également faire deux div pour délimiter la première ligne de logo et la "ligne du bas" contenant le Copyright Insee , les liens et le numéro de version - Un petit rappel : https://la-cascade.io/la-difference-entre-block-et-inline/ #### Objectif 5 : Ajoutons du style [Fait] Pour cela on va travailler, dans la balise head, plus précisement là dedans ``` <style> /*Ici pour le style*/ </style> ``` C'est le moment de réviser les sélecteurs : https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1605060-mettez-en-place-le-css#/id/r-1604993 - Choisir une police de caractères pour tous les éléments de la page. En fournissant une police principale, une police alternative et une police générique. - Quelques idées par là -> https://www.w3schools.com/cssref/css_websafe_fonts.asp - Utiliser le bon sélecteur pour définir la policepour tous les éléments de la page - [Facultatif] Ajouter une bordure autour du bandeau haut, de la partie centrale et du bandeau bas avec une couleur différente pour chqaue bandeau (moche mais utile pour gérer la mise en page) - Espacer un peu le bandeau haut, la partie centrale et le bandeau bas (avec la propriété margin) - Faire respirer l'intérieur de bandeau haut, la partie centrale et le bandeau bas avec (la propriété padding). #### Objectif 6 : Finalisation de la mise en page [fait] - ajouter une balise `<div>` d'identifiant conteneur englobant les bandeaux et la partie centrale et lui donner une largeur de 950 pixels. - centrer horizontalement le conteneur. Astuce : on peut facilement centrer une balise <div> qui a une largeur fixe en lui appliquant la propriété suivante `margin : 0 auto;` (ici c'est le auto qui sert à centrer) - Au sein de chaque bandeau disposer harmonieusement les éléments à l'aide de la mise en page flexbox appliquée respectivement au bandeau haut, à la partie centrale et au bandeau bas, pour se rapprocher du résultat présenté dans la maquette. - un peu de doc sur flexbox - https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - [Facultatif] si des bandeaux colorés avaient été posés à l'étape précedente pour visualiser simplement les différents éléments de la page, il est temps de les retirer, et pouquoi pas proposer quelquechose de plus discret. #### Objectif 7 : Les balises meta [ Fait ] Pour le référencement ou pas et la redirection automatique...et l'encodage s'il n'est pas précisé. #### Objectif 8 [Facultatif] : Version mobile avec Media Queries [ en cours ] - on pourra s inspirer de qui est fait dans les questionnaires Coltrane pour adapter la page en cas de consultation sur un mobile. ***L'idée est de proposer une adaptation super simple de la mise en page quand la largeur de l'écran est inférieur à un certain seuil.*** - Intro aux Media queries https://www.alsacreations.com/article/lire/930-css3-media-queries.html - page de démo https://www.alsacreations.com/xmedia/tuto/exemples/mediaqueries/index.html #### Questions en cours de développement : Céline : le numéro de version en pied de page est-il nécessaire? Michael : je ne pense pas ... Linda:ok du coup je le retire Michael : Par contre les liens s'il y a une maintenance ou une panne il n'y en a pas qui seront cassés ? Céline : bonne question, c'est vrai qu'on n'a même plus accès au healthcheck quand il y a la page de maintenance donc tout doit être bloqué... Oops! #### Question complémentaires ? Linda: JE N'ai pas de questions mais je vais t'envoyer tout de suite par mail ce que j'ai fait concernant l'objectif 8. ##### Hebergement des images ? A voir éventuellement avec le CEI, doit on intégrer les images dans le HTML ou peut on héberger les images sur static.insee.fr ?