Partage
  • Partager sur Facebook
  • Partager sur Twitter

Rendre le code maintenable et réutilisable devoir

Sujet résolu
    25 juillet 2021 à 13:06:37

    Bonjour je suit une formation développeur-intégrateur chez Esecad sauf que dans le devoir il dise "Vous devez reprendre les codes HTML et CSS afin de rendre le code CSS réutilisable et modulable.
    Attention
    Vous ne devez pas modifier la structure du code HTML. Il s’agit uniquement de reprendre les noms de classes
    et les identifiants dans les fichiers HTML et CSS."


    Sauf que je ne vois pas comment rendre ce code maintenable.


    * {
    	margin: 0;
    	padding: 0;
    	box-sizing: border-box;
    }
    body {
    	margin:0;
    	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    	background-color:#CCC;
    	font-size: 1em;
    }
    p {
    	font-size: .8em;
    }
    
    /***************** flottements ************************/
    .colonne {
    	float:left;
    }
    .clear {
    	clear:both;
    
    }
    /*******************wrapper et header*****************/
    
    #wrapper {
    	width:990px;
    	margin:0 auto;	
    	background-color:#FFF;
    }
    #header #logo {
    	width:280px;
    }
    #header #pub h1 {
    	width:690px;
    	background-color:#F90;
    	text-align:center;
    	padding:0 10px;
    	vertical-align: middle;
    	line-height: 96px;
    }
    
    
    /*********************menu****************************************/
    ul#menu_horizontal {
         margin: 1em 0px 0px 0px;
         padding: 0px;
    	text-align: center;
    }
    ul#menu_horizontal li {
    	display: inline-block;
    	list-style:none;
    }
    ul#menu_horizontal li a {
    	color:red;
    	display:block;
    	padding:10px;	
    	text-decoration:none;
    	text-align:center;
    	border-radius:10px 10px 0 0;
    	width: 120px;
    	margin:0 10px 0 0;	
    	background-color:#FF0;
    	border: thin solid orange;
    	
    }
    ul#menu_horizontal a:hover {
         background-color: #FF9900;
         color: black;
    }	
    /*******contenu et colonnes********/
    
    
    #contenu {
    	display: flex;
    	justify-content: space-between;
    }
    #contenu_centre {
    	width:50%;
    	margin:10px 0 0 0;
    	padding:10px;	
    	background-color:#FF0
    }
    
    #contenu_gauche, #contenu_droite {
    	width:22%;	
    	margin:10px;
    	min-height:500px;
    	background-color:orange;
    }
    
    /*******colonne gauche********/
    #contenu_gauche .bloc {
    	padding: 0 5px 10px 10px;
    	margin-top:10px;
    	font-size: 0.8em;
    	}
    #contenu_gauche .bloc h3 {
    	background: #fff;
    	padding: 0.2em;
    	text-align: center;
    	margin-bottom: 0.5em;
    	}
    #contenu_gauche .bloc span {
    		color: #3B4EA1;
    	}
    
    /*******colonne centre********/
    
    #contenu_centre  .align_droite {
    	float:right;
    	margin:0 0 10px 10px
    }
    #vignettes {
    	margin:1em 0 0 0;
    	padding: 0 1% 0 1%;
    	text-align: center;
    }
    
    #vignettes .vignette {
    	width:30%;
    	height:150px;
    	margin:0 1% 0 1%;
    	border:#000 3px solid;
    	display: inline-block;
    }
    
    /********************colonne droite*************************/
    #actualites {
    	height:250px;
    	border-radius:10px;
    	overflow:auto;
    	background-color:#CCC;
    	margin:5px;
    	padding:10px;
    }
    
    #actualites h2 {
    	text-align: center;
    }
    #actualites .bloc {
    	border-bottom:1px solid #ac9068;
    	padding: 0 5px 10px 10px;
    	margin-top:10px;
    	font-size: 0.8em;
    	}
    #actualites .bloc h3 {
    	font-weight: bold;
    	font-size: 12px;
    	font-weight: bold;
    	margin:0 0 3px 0;
    }
    #actualites .bloc span {
    	color:#d48940;font-weight: bold;
    }
    
    
    /***********footer**********************/
    
    #footer {	
    	text-align:right;
    	padding:10px;
    	font-size:10px;
    	background-color:red;
    	border-top:#000 thin solid;
    	
    }


    <!DOCTYPE html>
    <html lang="fr">
    <head>
    	<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    	<link media="screen" type="text/css" href="styles.css" rel="stylesheet">
    	<title>Exercice 1</title>
    </head>
    
    <body>
    
    <div id="wrapper">
    
        <header id="header">
        	<div id="logo" class="colonne"><img src="img/logo.jpg" width="278" height="96" alt="logo"></div>
            <div id="pub" class="colonne"><h1>Ceci est une pub importante en h1</h1></div>       
       		<div class="clear"></div>
    	</header>
        
        <nav>
    	    <ul id="menu_horizontal">
    			<li><a href="#">Menu 1</a></li>
    			<li><a href="#">Menu 2</a></li>
    	        <li><a href="#">Menu 3</a></li>
    	        <li><a href="#">Menu 4</a></li>
    	        <li><a href="#">Menu 5</a></li>
    		</ul>     
    		<div class="clear"></div>
    	 </nav>
         
    	<main id="contenu">
    		<section id="contenu_gauche">
    			<article class="bloc">
    				<h3>Consternuntur scandere</h3>
    			  	<p>	
    					<span class="date"> 17/02/2013</span>	- Nec vox accusatoris ulla licet subditicii in his malorum quaerebatur acervis ut saltem specie tenus crimina praescriptis legum committerentur, quod aliquotiens fecere principes saevi: sed quicquid Caesaris  sedisset.
    				</p>	    
    			</article> 
            </section> <!--fin colonne gauche -->
    		
            <section id="contenu_centre">
            	<img src="img/logo.jpg" width="278" height="96" alt="Logo"  class="align_droite">
                <p>	
    				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas   porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies,   purus lectus malesuada libero, sit amet commodo magna eros quis urna.   Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque   habitant morbi tristique senectus et netus et malesuada fames ac turpis   egestas.  pharetra nonummy pede. 
    			</p>
    			 <p>	
    				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas   porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies,   purus lectus malesuada libero, sit amet commodo magna eros quis urna.   Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque   habitant morbi tristique senectus et netus et malesuada fames ac turpis   egestas.  pharetra nonummy pede. 
    			</p>
    			 <p>	
    				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas   porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies,   purus lectus malesuada libero, sit amet commodo magna eros quis urna.   Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque   habitant morbi tristique senectus et netus et malesuada fames ac turpis   egestas.  pharetra nonummy pede. 
    			</p>
    			<p>
    				Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet   nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae,   pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut   nonummy. Fusce aliquet pede non pede. 
    			</p>
                <div class="clear"></div>
      			<div id="vignettes">
                  <div class="vignette"></div>
                  <div class="vignette"></div>
                  <div class="vignette"></div>
    			</div>
            </section><!--fin contenu centre -->
            <section id="contenu_droite">
    		    <div id="actualites">
    		    	<h2>Actualités</h2>
    				<article class="bloc">
    					<h3>Consternuntur scandere valido dumos aut qua potest liberis</h3>
    					  	<p>	
    							<span class="date"> 17/02/2013</span>	- Nec vox accusatoris ulla licet subditicii in his malorum quaerebatur acervis ut saltem specie tenus crimina praescriptis legum committerentur, quod aliquotiens fecere principes saevi: sed quicquid Caesaris  sedisset.
    						</p>	    
    				</article>
    				<article class="bloc">
    					<h3>Consternuntur scandere valido dumos aut qua potest liberis</h3>
    					<p>	
    						<span class="date"> 17/02/2013</span>	- Nec vox accusatoris ulla licet subditicii in his malorum quaerebatur acervis ut saltem specie tenus crimina praescriptis legum committerentur,quod aliquotiens fecere principes saevi: sed quicquid Caesaris  sedisset.
    					</p>
    				</article>
    				<article class="bloc">
    					<h3>Consternuntur scandere valido dumos aut qua potest liberis</h3>
    					<p>	
    						<span class="date"> 17/02/2013</span>	- Nec vox accusatoris ulla licet subditicii in his malorum quaerebatur acervis ut saltem specie tenus crimina praescriptis legum committerentur,quod aliquotiens fecere principes saevi: sed quicquid Caesaris  sedisset.
    					</p>
    				</article>
    			</div>
            </section> 
        </main> <!--fin contenu -->
        <footer id="footer">&copy; 2022 tous droits de reproductions résevés</footer>
    </div>
    </body>
    </html>


    Merci d'avance de votre aide.

    -
    Edité par Toshiro81 25 juillet 2021 à 13:07:19

    • Partager sur Facebook
    • Partager sur Twitter
      25 juillet 2021 à 17:33:22

      Salut,

      Je ne vois pas bien ce qu'ils attendent non plus. Moi ce que je ferais surtout, c'est corriger ce code qui a au moins 6 ans de retard… Mais sans modifier la structure html, je ne vois pas bien ce qu'ils veulent.

      Rendre maintenable, ça voudrait dire, par exemple adoper une nomencladure correcte (BEM, par exemple) plutôt que d'empiler les sélecteurs comme un gros babouin (en plus avec des ID…). Ce qui nécessite, donc, de toucher au html.

      Bref, ce serait bien qu'ils précisent un peu le truc, là.

      -
      Edité par EmmanuelBeziat 25 juillet 2021 à 17:33:30

      • Partager sur Facebook
      • Partager sur Twitter

      Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

        25 juillet 2021 à 19:02:40

        Ah bah au moins je ne suis pas fou donc je vais tenter du mieux que je peux, même le dernier exercice est pas assez détaillé mais par miracle j'ai réussi à faire ce qui à été demandé.
        • Partager sur Facebook
        • Partager sur Twitter
          26 juillet 2021 à 14:44:48

          Bon courage !

          Je veux bien que tu viennes nous montrer ce qu'ils attendaient quand tu auras eu une correction ou quelque chose. :) 

          • Partager sur Facebook
          • Partager sur Twitter

          Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

            17 août 2021 à 14:25:35

            Bonjour, j'ai enfin eu le corrigé !!

            Voici leur attente :

            "Le choix a été fait d’utiliser en priorité BEM, alors qu’on aurait pu utiliser plus souvent la méthode Atomic CSS, en particulier pour les blocs d’actualités, afin de modifier la couleur de la date et/ou l’alignement des parties textuelles."

            Voici le code :

            <!DOCTYPE html>
            <html lang="fr">
            <head>
            	<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
            	<link media="screen" type="text/css" href="styles.css" rel="stylesheet">
            	<title>Exercice 1</title>
            </head>
            
            <body>
            
            <div class="wrapper">
            
                <header class="header">
                	<div class="header-logo colonne">
                		<img src="img/logo.jpg" width="278" height="96" alt="logo"></div>
                    <div class="header-pub colonne">
                    	<h1>Ceci est une pub importante en h1</h1>
                    </div>       
               		<div class="clear"></div>
            	</header>
                
                <nav>
            	    <ul class="menu">
            			<li class="menu-item"><a href="#">Menu 1</a></li>
            			<li class="menu-item"><a href="#">Menu 2</a></li>
            	        <li class="menu-item"><a href="#">Menu 3</a></li>
            	        <li class="menu-item"><a href="#">Menu 4</a></li>
            	        <li class="menu-item"><a href="#">Menu 5</a></li>
            		</ul>     
            		<div class="clear"></div>
            	 </nav>
                 
            	<main class="contenu">
            		<section class="colonne-aside">
            			<article class="article">
            				<h3 class="article-title article-title--white" >Consternuntur scandere</h3>
            			  	<p class="article-text">	
            					<span class="article-text--blue"> 17/02/2013</span>	- Nec vox accusatoris ulla licet subditicii in his malorum quaerebatur acervis ut saltem specie tenus crimina praescriptis legum committerentur, quod aliquotiens fecere principes saevi: sed quicquid Caesaris  sedisset.
            				</p>	    
            			</article> 
                    </section> <!--fin colonne gauche -->
            		
                    <section class="colonne-centre">
                    	<img src="img/logo.jpg" width="278" height="96" alt="Logo"  class="align_droite">
                        <p>	
            				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas   porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies,   purus lectus malesuada libero, sit amet commodo magna eros quis urna.   Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque   habitant morbi tristique senectus et netus et malesuada fames ac turpis   egestas.  pharetra nonummy pede. 
            			</p>
            			 <p>	
            				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas   porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies,   purus lectus malesuada libero, sit amet commodo magna eros quis urna.   Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque   habitant morbi tristique senectus et netus et malesuada fames ac turpis   egestas.  pharetra nonummy pede. 
            			</p>
            			 <p>	
            				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas   porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies,   purus lectus malesuada libero, sit amet commodo magna eros quis urna.   Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque   habitant morbi tristique senectus et netus et malesuada fames ac turpis   egestas.  pharetra nonummy pede. 
            			</p>
            			<p>
            				Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet   nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae,   pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut   nonummy. Fusce aliquet pede non pede. 
            			</p>
                        <div class="clear"></div>
              			<div class="vignettes">
                          <div class="vignettes-item"></div>
                          <div class="vignettes-item"></div>
                          <div class="vignettes-item"></div>
            			</div>
                    </section><!--fin contenu centre -->
                    <section class="colonne-aside">
            		    <div class="actualites">
            		    	<h2 class="actualites-title">Actualités</h2>
            				<article class="article">
            					<h3 class="article-title article-title--small ">Consternuntur scandere valido dumos aut qua potest liberis</h3>
            					  	<p>	
            							<span class="article-text--orange"> 17/02/2013</span>	- Nec vox accusatoris ulla licet subditicii in his malorum quaerebatur acervis ut saltem specie tenus crimina praescriptis legum committerentur, quod aliquotiens fecere principes saevi: sed quicquid Caesaris  sedisset.
            						</p>	    
            				</article>
            				<article class="article">
            					<h3 class="article-title">Consternuntur scandere valido dumos aut qua potest liberis</h3>
            					  	<p>	
            							<span class="article-text--date"> 17/02/2013</span>	- Nec vox accusatoris ulla licet subditicii in his malorum quaerebatur acervis ut saltem specie tenus crimina praescriptis legum committerentur, quod aliquotiens fecere principes saevi: sed quicquid Caesaris  sedisset.
            						</p>	    
            				</article>				
            				<article class="article">
            					<h3 class="article-title">Consternuntur scandere valido dumos aut qua potest liberis</h3>
            					  	<p>	
            							<span class="article-text--date"> 17/02/2013</span>	- Nec vox accusatoris ulla licet subditicii in his malorum quaerebatur acervis ut saltem specie tenus crimina praescriptis legum committerentur, quod aliquotiens fecere principes saevi: sed quicquid Caesaris  sedisset.
            						</p>	    
            				</article>
            			</div>
                    </section> 
                </main> <!--fin contenu -->
                <footer class="footer">&copy; 2022 tous droits de reproductions résevés</footer>
            </div>
            </body>
            </html>

            Html

            * {
            	margin: 0;
            	padding: 0;
            	box-sizing: border-box;
            }
            body {
            	margin:0;
            	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
            	background-color:#CCC;
            	font-size: 1em;
            }
            p {
            	font-size: .8em;
            }
            
            /***************** flottements ************************/
            .colonne {
            	float:left;
            }
            .clear {
            	clear:both;
            
            }
            /*******************wrapper et header*****************/
            
            .wrapper {
            	width:990px;
            	margin:0 auto;	
            	background-color:#FFF;
            }
            .header-logo {
            	width:280px;
            }
            .header-pub {
            	width:690px;
            	background-color:#F90;
            	text-align:center;
            	padding:0 10px;
            	vertical-align: middle;
            	line-height: 96px;
            }
            
            
            /*********************menu****************************************/
            .menu {
                 margin: 1em 0px 0px 0px;
                 padding: 0px;
            	text-align: center;
            }
            .menu-item {
            	display: inline-block;
            	list-style:none;
            }
            .menu-item a {
            	color:red;
            	display:block;
            	padding:10px;	
            	text-decoration:none;
            	text-align:center;
            	border-radius:10px 10px 0 0;
            	width: 120px;
            	margin:0 10px 0 0;	
            	background-color:#FF0;
            	border: thin solid orange;
            	
            }
            .menu-item  a:hover {
                 background-color: #FF9900;
                 color: black;
            }	
            /*******contenu et colonnes********/
            
            
            .contenu {
            	display: flex;
            	justify-content: space-between;
            }
            .colonne-centre {
            	width:50%;
            	margin:10px 0 0 0;
            	padding:10px;	
            	background-color:#FF0
            }
            
            .colonne-aside {
            	width:22%;	
            	margin:10px;
            	min-height:500px;
            	background-color:orange;
            }
            
            
            
            
            /*******colonne centre********/
            .align_droite {
            	float:right;
            	margin:0 0 10px 10px
            }
            .vignettes {
            	margin:1em 0 0 0;
            	padding: 0 1% 0 1%;
            	text-align: center;
            }
            
            .vignettes-item {
            	width:30%;
            	height:150px;
            	margin:0 1% 0 1%;
            	border:#000 3px solid;
            	display: inline-block;
            }
            
            /*******modules actu ********/
            .article {
            	border-bottom:1px solid #ac9068;
            	padding: 0 5px 10px 10px;
            	margin-top:10px;
            	font-size: 0.8em;
            }
            .article-title {
                margin-bottom: 0.5em;
            }
            .article-title--white {
            	background: #fff;
            	padding: 0.2em;
                text-align: center;
            }
            .article-title--small {
            	text-align: left;
                font-weight: bold;
                font-size: 12px;
                margin: 0 0 3px 0;
            }
            .article-text {
            	font-size: 0.8em;
            }
            .article-text--blue{
            	color: #3B4EA1;
            	}
            .article-text--orange {
            	color: #d48940;
            
            }
            
            /********************colonne droite*************************/
            .actualites {
            	height:250px;
            	border-radius:10px;
            	overflow:auto;
            	background-color:#CCC;
            	margin:5px;
            	padding:10px;
            }
            
            .actualites-title{
            	text-align: center;
            }
            /***********footer**********************/
            
            .footer{	
            	text-align:right;
            	padding:10px;
            	font-size:10px;
            	background-color:red;
            	border-top:#000 thin solid;
            	
            }

            Css

            • Partager sur Facebook
            • Partager sur Twitter
              30 août 2021 à 1:42:14

              Ah, donc il fallait bien toucher au html quand même. Bon, c'est déjà plus logique.
              • Partager sur Facebook
              • Partager sur Twitter

              Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

                10 septembre 2021 à 10:33:59

                Oui surement pour ça que leur consigne n'avais aucun sens.
                • Partager sur Facebook
                • Partager sur Twitter

                Rendre le code maintenable et réutilisable devoir

                × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                • Editeur
                • Markdown