Production d'un source HTML adapté

Version imprimable

Bonjour à tous.

Il m'est demandé de produire un source HTML agréable à voir. Exemple pour le source suivant :
– chaque balise <li> devrait se situer juste en dessous de la précédente;
– la balise <ul> devrait être au même niveau que la précédente.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<!DOCTYPE HTML>
<head>
	<meta charset="utf-8" />
	<meta http-equiv="content-type" content="text/html" />
	<title>Source de bel apparence</title>
</head>
 
<body>
<?php
	$ariane_nom_1='Nom 1';
	$ariane_description_1='description 1';
	$ariane_chemin_1='chemin 1';
	$ariane_nom_2='Nom 2';
	$ariane_description_2='description 2';
	$ariane_chemin_2='chemin 2';
	$ariane_nom_3='Nom 3';
	$ariane_description_3='description 3';
	$ariane_chemin_3='chemin 3';
?>
			<div class="bandeau-ariane">
			<!-- Début Fil d’Ariane -->
				<ul id="ariane" class="nav">
					<li>Vous êtes ici&nbsp;: </li>
					<?php
					if($ariane_nom_1<>'')
					{
						echo '<li><a href="'.$ariane_chemin_1.'" title="'.$ariane_description_1.'">'.$ariane_nom_1.'</a></li>';
					}
					if($ariane_nom_2<>'')
					{
						echo '<li><a href="'.$ariane_chemin_2.'" title="'.$ariane_description_2.'">'.$ariane_nom_2.'</a></li>';
					}
					if($ariane_nom_3<>'')
					{
						echo '<li><a href="'.$ariane_chemin_3.'" title="'.$ariane_description_3.'">'.$ariane_nom_3.'</a></li>';
					}
					?>
				</ul>
			<!-- Fin Fil d’Ariane -->
			</div>
</body>
</html>

Comment corriger ce source ? Merci pour votre aide.

25/05/2012, 16h56
Bovino

Citation:

Il m'est demandé de produire un source HTML agréable à voir.

Explique à "Il" que c'est très à la mode de produire le HTML comme tu le fais et que du coup, il est très agréable à voir ! :aie:

Parce que franchement, quel est l'intérêt de ce type de demande ??? :cfou:
Que ton code source soit bien organisé, indenté etc. est important pour pouvoir le relire, mais que le HTML généré soit formatté est complètement stupide !
25/05/2012, 16h57
Benjamin Delespierre
Bonjour,

Ma recommandation principale est l'usage systématique de la syntaxe alternative, ça rends tout de suite le source plus lisible et ça permet d'éviter les problèmes d'indentation PHP vs HTML. C'est curieusement assez peu utilisé d'ailleurs...

Ne pas faire
Code:

1 2 3 4 5 6 7 8 9 <div> <?php foreach ($collection as $value) { ?> <?php if ($value) { ?> <span><?php echo value; ?></span> <?php } else { ?> <span>valeur nulle</span> <?php } ?> <?php } ?> </div>
Encore moins
Code:

1 2 3 4 5 6 7 8 9 <div> <?php foreach ($collection as $value) { if ($value) { echo '<span>' . $value . '</span>'; } else { echo '<span>valeur nulle</span>'; } } ?> </div>
Faire
Code:

1 2 3 4 5 6 7 8 9 <div> <?php foreach ($collection as $value): ?> <?php if ($value): ?> <span><?php echo $value ?></span> <?php else: ?> <span>valeur nulle</span> <?php endif ?> <?php endforeach ?> </div>
L'avantage principal de cette méthode est qu'elle permet d'utiliser des structures de contrôles PHP de la même façon qu'on utilise des balises HTML.

Utilise également les short open tags, c'est beaucoup beaucoup plus pratique que de semer des echo un peu partout:

Code:

<? if ($value): ?><span><?=$value?></span><? endif ?>

Par défaut, le short open tag est désactivé mais tu peux l'activer en mettant ça dans ton .htaccess:

Code:

php_flag short_open_tags 1

Applique déjà ces deux règles et tu verra que le source PHP et le source HTML produits seront de meilleure qualité.

Soit dit en passant la remarque de Bovino est tout à fait valide, on se fout pas mal de l'indentation HTML en règle générale vu que tous les outils de débug des navigateur modernes ré indentent automatiquement (fait F12 tu verra). Sinon, même si "Il" télécharge le flux HTML pour le lire dans un éditeur de texte, tu as des IDE comme Eclipse qui permettent de remettre d'équerre une indentation avec un simple raccourci clavier (CTRL + SHIFT + F)

Tout à fait d'accord avec les remarques précédentes,
Voici le même code plus lisible :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 <?php $ariane_nom_1='Nom 1'; $ariane_description_1='description 1'; $ariane_chemin_1='chemin 1'; $ariane_nom_2='Nom 2'; $ariane_description_2='description 2'; $ariane_chemin_2='chemin 2'; $ariane_nom_3='Nom 3'; $ariane_description_3='description 3'; $ariane_chemin_3='chemin 3'; ?> <!DOCTYPE HTML> <head> <meta charset="utf-8" /> <meta http-equiv="content-type" content="text/html" /> <title>Source de bel apparence</title> </head> <html> <body> <div class="bandeau-ariane">  <ul id="ariane" class="nav"> <li>Vous êtes ici : </li> <?php if ($ariane_nom_1 <> '') { echo <<<HTML <li><a href="$ariane_chemin_1" title="$ariane_description_1">$ariane_nom_1</a></li> HTML; } if ($ariane_nom_2 <> '') { echo <<<HTML <li><a href="$ariane_chemin_2" title="$ariane_description_2">$ariane_nom_2</a></li> HTML; } if ($ariane_nom_3 <> '') { echo <<<HTML <li><a href="$ariane_chemin_3" title="$ariane_description_3">$ariane_nom_3</a></li> HTML; } ?> </ul>  </div> </body> </html>
Après moults essais, les syntaxes HEREDOC et NOWDOC sont d'après mon expérience le graal en terme de lisibilité.
Il faut de préférence les placer en début de ligne, les écrire en majuscules et les nommer explicitement de manière à savoir en un coup d'oeil ce qui est manipulé.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <<<CSS ... CSS; <<<JS ... JS; <<<HTML ... HTML; <<<XML ... XML;
Bref ce qui importe, c'est la lisbilité du code générant une page et pas trop le rendu ainsi généré.
D'ailleurs, les lib de minification pour le CSS, JS ou le HTML s'affranchissent de l'aspect du code rendu pourvu que cela soit le plus léger possible, le moins gourmand en bande passante et le plus rapide à afficher.
Regarde le code source de la page d'accueil de Google. Tu verras, c'est pas zoli zoli :mouarf:

25/05/2012, 19h17
Bovino

Citation:

Après moults essais, les syntaxes HEREDOC et NOWDOC sont d'après mon expérience le graal en terme de lisibilité.

Entièrement d'accord ! :ccool:
25/05/2012, 19h20
Pyanepsion

Tout cela n'a pas été bien facile à comprendre puisque je suis plutôt débutant en PHP, mais maintenant c'est fait. J'ai donc réussi à mettre correctement en forme l'exemple alors que je craignais bien tout cela impossible. Il ne me reste plus qu'à modifier mes autres includes.

Merci Benjamin et Rawsrc pour vos réponses.