Pour bien "re-débuter"

Bonjour,

Je ne suis pas un habitué des forums. Je veux dire que d’habitude je lis, mais ne « post » pas. Je suis totalement ignare pour tous ce qui concerne le web, pourtant j’ai édité un petit site pour une association qui n’a pas les moyens de payer un webmestre. Finalement, je me prends au jeu, et j’aimerais refaire totalement le site pour qu’il s’affiche correctement pour tous les visiteurs (il s’affiche bien avec iE mais je dois modifier la feuille de style pour Firefox, pour les autres ?...). J’utilise Composer 4.75, notepad et les quelques informations que je crois comprendre dans ce forum. J’ai lu, que vous acceptiez de « critiquer » des sites. J’ai 50 ans et j’ai acheté mon premier PC il y a moins d’un an. Si vous pouviez me répondre en termes pas trop « pros ».
Merci d’avance.

Micky

Voici l’adresse du site : http://www.upop-montreuil.com

Ignare, ignare, c'est vite dit! Le site a un aspect très plaisant à 1ère vue en tout cas!

Pour ce qui est d'une refonte du site respectant les standards, une méthodologie succinte est disponible
ici

Le point 1. par exemple, c'est avec Firefox 1.0 en français pouvoir surfer en désactivant les CSS (menu Affichage/Style de la page/aucun style).
Fondamentalement, ça revient à séparer le fond ("ceci est un titre, cela des chapitres, sections, sous-sections", paragraphes, liens, "fait partie de l'en-tête, du menu, du corps ou du bas de page") de la forme (exemple: je veux les sections en gras, les sous-sections soulignées, les liens en rouge foncé et le texte en 3 colonnes)

De nombreux liens sont disponibles dans les Ressources, des articles sur Alsa (Tutoriels CSS ci-dessus), mais cela fait beaucoup de lecture d'un seul coup avant de l'appliquer à son propre site.
Un bon début est je pense l'article d'Openweb XHTML en une heure

Bonjour Micky !

Puisque tu songes à "refaire totalement le site", je ne crois pas que faire la critique de ce dernier soit très utile.

Cependant, ton nouveau design devrait (à mon avis) avoir au minimum la structure suivante :

<!-- en-tête -->
<h1></h1>

<!-- navigation -->
<ul>
 <li><a href=""></a></li>
 <li><a href=""></a></li>
 <li><a href=""></a></li>
 <li><a href=""></a></li>
</ul>

<!-- contenu -->
<div>
</div>

<!-- contenu -->
<div>
</div>

<!-- pied de page -->
<p></p>

Il est conseillé de séparer le contenu (HTML) et la présentation (CSS).
Il est également conseillé d'utiliser des tailles relatives (em)* au lieu de tailles fixes (px) pour les caractères.

Suggestions de lecture (un par un, selon ton niveau) :
Le DOCTYPE qu'il vous faut
Respecter la sémantique XHTML
Initiation au positionnement CSS : 1.flux et position relative
Initiation au positionnement CSS : 2.position float
Initiation au positionnement CSS : 3. position absolue et fixe

N'hésites pas à revenir poser d'autres questions !

<edit>
* En fait, "em" n'est pas la seule unité relative en CSS...
</edit>
Modifié le 18 Dec 2004 - 22:42

Bonjour et merci à Stephan et Felipe,

Effectivement, j'ai du boulot avant que les pages soient un peu "standardisées" , surtout que pour moi, beaucoup de choses sont encore très obscures .
Pour commencer par un bout, pourriez-vous me dire quelle police dois-je utiliser (si il en existe une qui soit présente sur tous les systèmes). J'aime bien la Trébuchet par exemple, mais peut-être faut-il choisir une police plus "classique". Le nouveau site était conçu avec des frames, mais Raphaël m'a convaincu d'abandonner cette architecture. Je dois donc tout reprendre depuis le début.

Encore merci pour vos réponses.

Micky

Bonjour et bravo,

Je trouve ça très bien pour un premier site : clair, aéré, éléments bien positionnés, bien espacés... Ce sont des notions plus difficiles à acquérir que les standards du web.

On l'a déjà dit, ne pas utiliser les frames, ça rend difficile l'indexation des pages en Favoris, leur enregistrement, leur impression.

Les caractères sont trop petits. Question police(s). Il n'y a pas de miracles: en sans serif, le Verdana ou l'Arial; en serif, le Georgia. La Verdana est la plus lisible et elle est massivement utilisée sur le sites web. Elle pose quelques petits problèmes (cf. http://forum.alsacreations.com/topic.php?fid=1&tid=919&p=2) pour les utilisateurs de Linux, qui ne la possèdent pas (ce sont les seuls, je crois), mais il s'agit d'une population très minoritaire. Disons que les avantages l'emportent très largement sur les inconvénients.

Le principe des CSS est de transférer hors du code HTML toutes les propriétés de mise en forme, non seulement celles relatives aux caractères mais ausi celles relatives à la largeur et à la hauteur des autres éléments (tableaux, cellules, div...).

Ça dépend de l'éditeur que vous utilisez, mais avec Dreamweaver, il est préférable de remplacer le charset=iso-8859-1 par le charset=utf-8. Ça vous évite d'avoir vos caractères avec signes diacritiques (accents, çédille, tréma...) remplacés par des entités HTML, ce qui rend le code plus simple à lire).

Vous n'êtes pas obligé de réaliser d'emblée un site absolument conforme. En particulier, si vous avez des contraintes de temps et que vous rencontrez des problèmes. Vous pouvez commencer utilisant une mise en page avec des tableaux (avec la structure la plus simple et la plus légère possible), et des CSS pour tout ce qui n'est pas positionnement.

Un petit "hack" pour afficher les polices uniformément sur les différents navigateurs (basé sur le "box model hack" de Tantek Çelik).

body, body div, body p, body th, body td, body li, body dd { 
   font-size: x-small; 
   voice-family: "\"}\""; 
   voice-family: inherit; 
   font-size: small; 
}

html>body, html>body div, html>body p, html>body th, html>body td, html>body li, html>body dd { 
   font-size: small; 
}

Pour mes polices, j'utilise la déclaration suivante :

body { 
   font-family: Verdana, Helvetica, sans-serif; 
   line-height: 1.4em; 
}

Un exemple de "header" avec des tailles relatives :

h2 { 
   font-size: 150%; 
}

h3 { 
   font-size: 130%; 
}

h4 { 
   font-size: 110%; 
}

[Mise à jour]
Cette méthode correspond à keyword small, ALA style,
une méthode de gestion du texte présentée par Owen Briggs dans son article text sizing - up the garden path.

Pour en savoir plus sur le "Box Model Hack" de Tantek Çelik :
Version originale : Box Model Hack
Traduction : Bidouillage de Boîtes
Modifié le 07 Jan 2005 - 18:18

Bonjour et merci à Thierry et Stephan,

Merci pour vos encouragements .
Mon premier souci étant de présenter des pages claires à tous les visiteurs, y compris ceux qui ne disposent pas de système récent. Je vais donc suivre vos conseils : du code HTML, agrémenté d’une feuille de style externe. Je supprimerais les tableaux plus tard (quand j’aurai assimilé les tutoriaux d’AlsaCréations notamment..) .
J’ai essayé Dreamweaver MX (version tryout), puis GoLive CS qui était livré avec la suite d’Adobe (mais avec tous ces tutoriaux, j’ai la tête comme une coucourde ). Ce sont sans aucun doute d’excellents éditeurs, mais ce sont de vraies « usines à gaz ». Encore un apprentissage. Il me paraît intéressant de comprendre un peu les langages (HTML, CSS, etc..) du web, surtout pour éditer qu’une douzaine de pages. Je suis donc retourné à Composer qui permet d’éditer des tableaux simplement .
Le choix de la police… Georgia est très belle, mais elle-t-elle présente sur tous les systèmes ? Et Times New Roman ? Je ne connais pas les polices courantes sous Mac et Linux ?
J’avais bien compris pour les frames. Raphaël m’avait déjà éclairé sur les inconvénients.
Enfin je vous remercie, Felipe, Stephan et Thierry pour vos conseils avisés.
Ce forum est vraiment très sympa.


Micky

PS : Merci Stephan ! J'ai copier/collé, j'étudie tranquillement...

Les polices : Quelle famille choisir ?
http://edu.ca.edu/article67.html
Modifié le 19 Dec 2004 - 01:21

Merci Stephan,

Je résume : Mac = Helvetica, Windows = Arial et Unix/Linux = Courrier...
Finalement, il semble qu'Helvetica soit la police la plus fréquente (à plus de 80% tous systèmes cumulés).

Encore merci.

Micky

Helvetica est présente sur la plupart des Linux, pas besoin de passer en Courrier.

De toutes façons on peut spécifier plusieurs polices alternatives. Le tout est de ne pas y mettre l'horrible Verdana qui rend illisible les sites sans la bonne police (parce que c'est alors écrit trop petit)