3246 sujets

Critiques de vos sites: code et design

Besoin de conseils pour mon code

Pages :
Bonjour à tous ceux qui me liront.

Je fait partie d'un groupe qui s'occupe du "SAV" d'un logiciel d'encodage vidéo. Une nouvelle version est sortie et comme il y a eu beaucoup de changements je voudrait remettre les tutos à jours qui ont tous la même présentation.

Le problème n'est pas la, mais, au niveau du code, je voudrais aussi mettre à jours de ce côté la et passer en html 5.
Si possible optimiser le code pour avoir moins d'appels du css dans mon fichier html car quand je vois certaines sources de site je me dit que j'ai vraiment un souci.
Je voudrais savoir aussi comment vous feriez l'indentation de mon fichier html car je trouve que c'est le bordel.

Voici le lien vers la page test (testé seulement sous firefox) de mise à jour http://lauden.fr/Ducke/test/D%C3%A9but.html
j'ai mis un peu n'importe quoi pour le moment pour les tests en tout cas ça fait appel à 90% de mon fichier css.

Merci d'avance à ceux qui passeront du temps, car il va y en avoir Smiley decu
Modifié par ducke (28 Jan 2013 - 21:03)
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="keywords" content="mes mot clé">
<meta name="description" content="description de la page">
<meta name="author" content="Ducke pour le site www.m4ng.fr">
<title>Titre de la page</title>
<link rel="stylesheet" href="Style_Tutos/Design.css">
<link rel="stylesheet" href="Lightbox/lightbox.css">
<script src="Lightbox/jquery-1.7.2.min.js"></script>
<script src="Lightbox/lightbox.js"></script>

</head>
<body>


</body>
</html>

<header role="banner">
<div id="logo">
<div id="tut">
<div class="img3"><img id="rotate" src="Style_Tutos/3.1.png" /></div>
</div>
</div>
</header>

ducke bonsoir,

Pourquoi votre code est-il en dehors des balises <body> et</body>?
Comme d'habitude j'ai écrit mon doctype à l'avance et j'ai pas fait attention ou j'ai écrit le texte. Je veux aller trop vite comme d'habitude et ça me joue des tours.
Je corrige ce soir en rentrant chez moi.
Modifié par ducke (29 Jan 2013 - 07:16)
Alors, pour commencer, la meta keywords n'est qu'une vieille légende, elle n'a jamais (ou très peu) servi pour le référencement. Tu peux donc l'enlever. Comme dit juste au dessus, ton code est en dehors de ton body. Mais aussi en dehors de la balise html Smiley cligne


Je ne vois pas non plus de balise titre (h1, h2, h3...) alors que ton site en aurait bien besoin.

Divite aiguë..

Fais un appel extérieur de jQuery en utilisant Google code.

Balise footer fermée par un div Oo
Knozelfhoegtj a écrit :
Alors, pour commencer, la meta keywords n'est qu'une vieille légende, elle n'a jamais (ou très peu) servi pour le référencement. Tu peux donc l'enlever.
corrigé

Comme dit juste au dessus, ton code est en dehors de ton body. Mais aussi en dehors de la balise html Smiley cligne
corrigé aussi

Je ne vois pas non plus de balise titre (h1, h2, h3...) alors que ton site en aurait bien besoin.
heu ouais je ne l'utilise jamais ça Smiley confused
h1 pour le gros titre "incrustation des sst via Vobsub"
h2 pour "sommaire", "I - extraction des sst" et pour "II - ajustement et réglages..."
ou tu vois ça autrement?

puis-je mettre par exemple h3 pour les texte en gras qui sont entre les crochets [] et h4 pour les chiffres en rouges, ou ce n'est pas correct?


Divite aiguë..

Fais un appel extérieur de jQuery en utilisant Google code.
je viens de le faire également et j'ai mis les appels juste avant </body> comme dit ici

Balise footer fermée par un div Oo
corrigé aussi

merci d'avoir jeté un œil Smiley cligne
ducke a écrit :
heu ouais je ne l'utilise jamais ça Smiley confused
h1 pour le gros titre "incrustation des sst via Vobsub"
h2 pour "sommaire", "I - extraction des sst" et pour "II - ajustement et réglages..."
ou tu vois ça autrement?


C'est très important des mettre. Je te conseille, si j'ai bien compris la structure de ton site, de mettre ton logo «Tutos mang 3» entre h1 (donc avoir une alt d'image approprié), ensuite les titres de tes tutos entre h2 (exemple : «Inscrustation des sous-titres via Vobsub») et pour finir entre h3 les derniers titres (sommaire, extraction des sous titres, ajustement et réglage, etc..).

Sinon je ne te conseille pas de mettre autre chose que des titres dans ces balises, donc je te répondrais non pour ta question du texte en gras dans des h3 et les chiffres dans les h4.

En espérant que tu comprennes mon explication ^^

Flink
si si c'est plutôt clair, par contre l'image "tuto m4ng" est dans mon css et non dans le fichier html, ça va quand même aller pour mettre h1?

Et du coup pour le texte en gras et les chiffres il n'y a pas d'autres solutions plus rapide (moins long à écrire) que les span? car ça revient très très souvent à écrire quand même pour mon cas.

Je pense que les balises propres au html (footer, header, section, ...) dans le code ne sont pas bien placées.

Edit : dois-je mettre les balises <p></p> au texte ou ça change pas grand chose?
Modifié par ducke (30 Jan 2013 - 18:44)
ducke a écrit :
Et du coup pour le texte en gras et les chiffres il n'y a pas d'autres solutions plus rapide (moins long à écrire) que les span?

(voix de conteur) Il existe en html5 une balise qui permet de mettre visuellement du texte en avant: c'est B!

Par défaut, B met le texte en gras (c'était sa fonction avec html4 et inférieurs). Néanmoins, pour bien faire, on peut simplement déclarer dans la css:

b { font-weight: bold; }


a écrit :
dois-je mettre les balises <p></p> au texte ou ça change pas grand chose?

P sert à encadrer un paragraphe. Si c'est juste pour écrire "Site propulsé par Jacky" dans le footer, c'est inutile Smiley cligne
ducke a écrit :
si si c'est plutôt clair, par contre l'image "tuto m4ng" est dans mon css et non dans le fichier html, ça va quand même aller pour mettre h1?


Oui, au lieu de ton Div avec l'ID «tut», tu vas mettre un H1 (avec ou sans ID), lui appliquant le même code css que ton ancien DIV. Je te conseille de mettre le texte entre ta balise H1 («Tutos M4ng») et d'y appliquer un text-indent:-9000px; pour cacher le texte hors de l'écran, parce qu'un H1 vide c'est moyen ^^.

Sinon sans vérification je ne crois pas qu'on peux mettre un div dans un H1 (celui comportant ton «3»), donc met le dans un span que tu luis applique le même css sauf en spécifiant un display:block; vu qu'un span est par défaut en display:inline;.

Sinon, je dois avouer que le 3 porte a confusion, c'est parce que c'est le 3em tutoriel? On dirait qu'il fait partit intégrante de ton logo, c'est un peu confus pour moi.
Muchos a écrit :

(voix de conteur) Il existe en html5 une balise qui permet de mettre visuellement du texte en avant: c'est B!

Par défaut, B met le texte en gras (c'était sa fonction avec html4 et inférieurs). Néanmoins, pour bien faire, on peut simplement déclarer dans la css:

b { font-weight: bold; }



Ce que tu préconises, la balise <b>, et bien moi je le lui déconseille. On est censé aider les gens à comprendre et apprendre les standards du web. Or, la base en HTML/CSS est la séparation sémantique/mise en forme. Tout ce qui est destiné à produire un effet graphique ou autre, doit être généré en CSS (mis-à-part si ça n'est pas possible), le reste doit rester sémantique. Avoir un sens. Ce que tu préconises, c'est de placer une balise dans le but de produire un effet graphique voulu sur un élément. Et c'est pas trop trop ça à vrai dire. Smiley cligne
Modifié par Knozelfhoegtj (31 Jan 2013 - 15:50)
Knozelfhoegtj a écrit :
la base en HTML/CSS est la séparation sémantique/mise en forme.

N'est-ce pas ce que j'ai proposé ? Mettre un contenu visuellement en avant avec B, puis styliser B avec css.
Oui, et une balise que tu peux changer par le css. Si tu est certain que tout le contenu de ton texte qui va être en bold (donc balise b) vont être pareil, pourquoi pas changer dans le css sa couleur, au lieu d'utilisé des spans?
Goetter a écrit :
Les balises <i> et <b> sont bel et bien des éléments dont le seul but est de créer une mise en forme purement visuelle

En html5, I (selon le WhatWG) servirait surtout à un mot/expression dans une autre langue, à rappeler un terme qu'on explicite, etc.

a écrit :
Même si le résultat est plus lourd qu'en utilisant les balises <i> et <b>, il est préférable d'utiliser cette technique [des SPAN], à condition que l'objectif soit uniquement d'obtenir un effet visuel italique ou gras.

C'est vrai. Néanmoins, B (toujours selon le WhatWG) peut faire l'affaire dans bien des cas: «des mots-clés dans le résumé d'un document, les noms d'un produit dans une revue, des mots utilisables dans un logiciel interactif, ou un en-tête d'article» (trad. perso).
@Muchos

Pour les mots clés on utilisera une balise strong. Qui elle, a une valeur sémantique.

@Flink

J'ai parlé de sémantique. La sémantique désigne le sens. Crois-moi qu'à mettre un b dans ton HTML, ce que moi j’interpréterai, en tant que dev front-end, c'est que t'as un peu beaucoup bidouillé et que surtout tu ne t'y connais pas. Je me dirais peut-être même, que tu ne respectes pas les standards. C'est une base. Séparation contenu/mise en forme. Si tu as besoin d'une balise qui te sert seulement à styliser un élément et qui n'a aucune valeur sémantique, prends une balise neutre, comme un span par exemple. Smiley smile
Je rejoins l'avis de @Knozelfhoegtj sur le choix entre b et strong.

Il ne faut pas trop se formaliser sur ce sujet et garder en tête la forme (<b>) et le fond (<strong>).

D'ailleurs, sauf rares exceptions je n'utilise plus b (je ne dis pas que ce soit une bonne pratique Smiley smile ) car j'en ai peu l'utilité. Du moins sur les projets sur lesquels j'ai travaillé je m'en suis naturellement affranchi.

D'autant que pour parler de référencement, les deux balises ont le même poids aux dires de Matt Cutts.
Knozelfhoegtj a écrit :
Crois-moi qu'à mettre un b dans ton HTML, ce que moi j’interpréterai, en tant que dev front-end, c'est que t'as un peu beaucoup bidouillé et que surtout tu ne t'y connais pas.

Et moi, j'interprèterais que tu fantasmes. Utiliser B en html5 ne casse en rien la séparation contenu/mise en forme; pas plus qu'un SPAN class="red".
Sur ce, j'arrête de faire mon lourd, car ce n'est pas le sujet du thread.
Pages :
Sujet clos
Aller à