Topic: Vol libre Midi Pyrénées  (Read 5132 times)

Pages: [1]   Go Down

#1: 10-Jan-2007, 11:43 AM

raoulmapoule
Posts: 41

WWW
Salut a tous,

Après des semaines de travail je suis fier de vous présenter le site de la Ligue de vol Libre de Midi Pyrénées : http://www.vol-libre-midi-pyrenees.fr/  Cheesy

#2: 10-Jan-2007, 12:06 PM

Coding Team
heliotrope
Posts: 2,535

WWW
Salut,

j'aime beaucoup :-)

Simple clair ... mais lent (trop lent) à charger

Bravo !!!

:-)

#3: 10-Jan-2007, 12:47 PM

raoulmapoule
Posts: 41

WWW
Exact, je n'avais pas vu ça... ça vient du module kelender il est un poil lourd 49 ko rien que pour pour overlib.js  Shocked ... va falloir que je fasse le menage.
Ca vient peut être aussi de 1&1 ...

#4: 10-Jan-2007, 02:51 PM

Marc
Posts: 803

The best things in life are free

Site au design vraiment sympa.
J'aime bq.

Coté technique :
C'est un peu regrettable qu'il ne respecte pas les recommandations W3C et l'accessibilité.
Une simple vérification montre 24 erreurs.
La première d'entre elle est la référence à ton DTD qui n'est pas mentionné : S'agit-il du mode Strict ou un autre Huh
Je ne parle pas de la validation CSS

L'utilisation des balises <TABLE> est à éviter pour une présentation d'un site.
Ces balises sont réservées pour afficher des données sous forme de tableau et non pour la construction du template d'un site.
Préfère l'utilisation de <div> et <span> ainsi que l'emploi d'une feuille de style CSS associée.
La maintenance de ton site sera améliorée par la même occasion.

Cela ne demande pas grand chose de se convertir à de bonnes habitudes et rendre non seulement un site conforme à des recommandations mais aussi accessible à des personnes qui présentent des difficultés que l'on ne souhaitent à personne.
Pense à elles : Cela demande un petit effort supplémentaire Wink
Marc
I'm French...  Sorry for my bad English, I use ' Google Translator' or other... but that remains that tools Wink

#5: 10-Jan-2007, 03:10 PM

Coding Team
heliotrope
Posts: 2,535

WWW
Je n'ai pas regardé le source.

merci marc d'avoir corrigé mon inattention.

:-)

#6: 11-Jan-2007, 02:39 AM

raoulmapoule
Posts: 41

WWW
Quote
C'est un peu regrettable qu'il ne respecte pas les recommandations W3C et l'accessibilité.
Une simple vérification montre 24 erreurs.
Je vais essayer de faire plaisir à Mr W3C et rajouter des alt sur toutes les images, mais il y a certaine choses pour lequelles je ne vois pas trop le problème, par exemple quand il dit there is no attribute "width" dans une balise <td>  Huh

Quote
La première d'entre elle est la référence à ton DTD qui n'est pas mentionné : S'agit-il du mode Strict ou un autre Huh
C'est quoi un DTD ? je ne comprends pas non plus la question suivante...

Quote
L'utilisation des balises <TABLE> est à éviter pour une présentation d'un site.
Ces balises sont réservées pour afficher des données sous forme de tableau et non pour la construction du template d'un site.
Préfère l'utilisation de <div> et <span> ainsi que l'emploi d'une feuille de style CSS associée.
La maintenance de ton site sera améliorée par la même occasion.

J'ai passé des heures à essayer de faire un modèle avec des DIV, mais avec la meilleure volonté du monde je n'ai pas réussi à faire ce que j'ai fait en 5min avec des TABLE. Je reconnais que je ne suis pas une bête en CSS, cela dit j'ai quand même pas mal creusé le problème mais pour tout aligner correctement avec une résolution adaptable j'ai du me résourdre à enfeindre des régles que je n'ai pas signées Wink. D'une manière générale, avec mon niveau de connaissances, les TABLE sont une garantie de stabilité, avec les DIV j'ai toujours des surprises, il suffit d'un rien pour tout décaler et foutre le bordel, en plus suivant les navigateurs ça ne fonctionne pas pareil... bref... si quelqu'un arrive à faire la même chose avec des DIV je prend avec plaisir, en plus j'apprendrai quelque chose  Cheesy

Quote
Cela ne demande pas grand chose de se convertir à de bonnes habitudes et rendre non seulement un site conforme à des recommandations mais aussi accessible à des personnes qui présentent des difficultés que l'on ne souhaitent à personne.
Pense à elles : Cela demande un petit effort supplémentaire Wink
Attention avec la morale bien pensante et les idées toutes faites... pour ma part, ce que je déteste par dessus tout c'est la culpabilisation, mais c'est déjà un peu moins technique comme discussion Wink

#7: 11-Jan-2007, 08:24 AM

Marc
Posts: 803

The best things in life are free

Je vais commencer par le début.

Quote
C'est quoi un DTD ? je ne comprends pas non plus la question suivante...
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.01 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
La page HTML va respecter la DOCTYPE  : Je ne vais pas rentrer dans le détail mais c'est en quelques sorte comment le navigateur doit interpréter le code HTML : ce sont donc des règles à appliquer. Si tu as fait du XML, tu retrouve ce principe pour une balise que tu crées toi-même.
Dans le cas cité, le respect est strict aucune erreur n'est tolérée par opposition à Transitional qui admet des écarts notamment dans l'emploi des balises <TABLE>, <FONT>, etc. balises qualifiées d'obsolètes (et oui)

Quote
J'ai passé des heures à essayer de faire un modèle avec des DIV, mais avec la meilleure volonté du monde je n'ai pas réussi à faire ce que j'ai fait en 5min avec des TABLE. Je reconnais que je ne suis pas une bête en CSS, cela dit j'ai quand même pas mal creusé le problème mais pour tout aligner correctement avec une résolution adaptable j'ai du me résourdre à enfeindre des régles que je n'ai pas signées Wink. D'une manière générale, avec mon niveau de connaissances, les TABLE sont une garantie de stabilité, avec les DIV j'ai toujours des surprises, il suffit d'un rien pour tout décaler et foutre le bordel, en plus suivant les navigateurs ça ne fonctionne pas pareil... bref... si quelqu'un arrive à faire la même chose avec des DIV je prend avec plaisir, en plus j'apprendrai quelque chose  Cheesy
Et oui mais c'est en forgeant que l'on devient forgeron.
Tu trouveras de nombreux sites pour t'aider dans ce sens, citons le plus connu : AlsaCreation.

Je ne pense pas que les tes balises <TABLE> soient sources de stabilité, bien au contraire un width mal défini est tu as des comportements bizarres d'un navigateurs à l'autre tout comme les <DIV> d'ailleurs.

Pour vraiment obtenir ce que tu souhaites, il faut maitriser les propriétés de chaque balise dans ta feuille de style notamment le margin: 0px; et le padding: 0px; qui par défaut n'ont pas la même valeur d'un navigateur à l'autre.
Une fois ces deux propriétés définies tu retrouves un comportement identique.

Quote
Attention avec la morale bien pensante et les idées toutes faites... pour ma part, ce que je déteste par dessus tout c'est la culpabilisation, mais c'est déjà un peu moins technique comme discussion
Je ne cherche pas à faire de la morale et je te rejoins sur ta réflexion. Notre devoir en qualité de webmaster (mieux de webdesigner) est de concevoir des sites qui respectent les recommandations W3C et les règles WAI pour permettre un plus grand nombre de personnes de consulter le site sans des difficultés supplémentaires.
J'ai un voisin qui est sourd, muet et une vue à 2/10. Il regarde au travers d'une loupe qui agrandi l'écran 10x pour lire le contenu du site. A chaque fois que je conçois un site Internet je pense à lui.
Ma façon de penser est la même : Pourquoi je devrais consacrer quelques minutes de mon temps pour toi qui a tout ses facultés (du moins je le suppose) et pas pour lui qui en a certainement plus besoin ?
Si j'apporte ma contribution dans une communauté, c'est pour qu'un plus large public puissent en bénéficier y compris les personnes présentant des difficultés.
Quelques part, je leur apporte mon aide au travers toi (indirectement) Wink
 
Marc
I'm French...  Sorry for my bad English, I use ' Google Translator' or other... but that remains that tools Wink

#8: 11-Jan-2007, 08:43 AM

Marc
Posts: 803

The best things in life are free

Pour t'aider, voici un bout de ton code :
Code:
<div id="header">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>

    <td width="50%"><a href="/"><img src="/assets/templates/lmpvl/img/bandeau-gauche.jpg" /></a></td>
    <td><div align="center"><img src="/assets/templates/lmpvl/img/bandeau-centre.jpg" /></div></td>
    <td width="50%">&nbsp;</td>
  </tr>
</table>
</div>
Nous allons supprimer les balises TABLE comme ceci :
Code:
<div id="header">
    <div id="bd_gauche" class=bd_img"><a href="/"><img src="/assets/templates/lmpvl/img/bandeau-gauche.jpg" alt="Logo Vol Libre"/></a></div>
    <div id="bd_centre" class=bd_img"><img src="/assets/templates/lmpvl/img/bandeau-centre.jpg" alt="Icones Vol Libre"/></div>
</div>
Avec dans ta feuille de style :
Code:
#header{
    margin:0px;
    padding:0px;
}
.bd_img {
    float: left;
    margin:0px 5px;
    padding:0px;
}
#bd_gauche {
    width: 194px;
}
#bd_centre {
    width: 570px;
}
Bon c'est un exemple. Je suis persuadé que cela peut être amélioré Wink
Marc
I'm French...  Sorry for my bad English, I use ' Google Translator' or other... but that remains that tools Wink

#9: 11-Jan-2007, 08:50 AM

Coding Team
heliotrope
Posts: 2,535

WWW
On pourrait zapper qq divs dans le header.
Placer une balise H1 avec un background pour le logo afin de mettre des mots clés signicatifs de la thematique pour un meilleur référencement.
Et l'image en background du div header

:-)

Code:
<div id="header">
    <h1 id="logo"><a href="/">Vol libre: parapente, skysurf, ...</a></h1>
</div>

#10: 11-Jan-2007, 08:56 AM

Marc
Posts: 803

The best things in life are free

L'idée est bonne et améliore mon premier jet Wink
Marc
I'm French...  Sorry for my bad English, I use ' Google Translator' or other... but that remains that tools Wink

#11: 11-Jan-2007, 11:00 AM

raoulmapoule
Posts: 41

WWW
J'ai essayé le premier jet de Marc (je n'ai pas compris le second d'heliotrope  Embarrassed )
Ca donne ça : http://www.vol-libre-midi-pyrenees.fr/acc.html (moi je suis sous ie et c'est tout décalé)
« Last Edit: 11-Jan-2007, 11:02 AM by raoulmapoule »

#12: 11-Jan-2007, 11:04 AM

Coding Team
heliotrope
Posts: 2,535

WWW
Quote
helioptere

lol  Grin

J'ai pas trop de temps aujourd'hui pour rentrer dans le détail mais j'essaierai de poster le css ce we.

:-)

#13: 11-Jan-2007, 12:54 PM

raoulmapoule
Posts: 41

WWW
Quote
helioptere

lol  Grin

J'ai pas trop de temps aujourd'hui pour rentrer dans le détail mais j'essaierai de poster le css ce we.

:-)


Oui c'est ça quand on sais pas lire...  j'avais corrigé en moins de 2 min, je pensais que personne n'avait rien vu, mais c'est raté   Roll Eyes  Grin

#14: 11-Jan-2007, 01:43 PM

Marc
Posts: 803

The best things in life are free

Excuse moi, une erreur s'est glissé dans le code :
Code:
<div id="header">
    <div id="bd_gauche" class="bd_img"><a href="/"><img src="/assets/templates/lmpvl/img/bandeau-gauche.jpg" alt="Logo Vol Libre"/></a></div>
    <div id="bd_centre" class="bd_img"><img src="/assets/templates/lmpvl/img/bandeau-centre.jpg" alt="Icones Vol Libre"/></div>
</div>

Il faut que tu puisse analyser ton code et retrouver les éventuelles erreurs. Pour cela, j'utilise le plugin "Html Validator (TIDY)" de Firefox.
C'est lui qui m'a indiqué qu'il manquait des " dans class="bd_img" Wink
Marc
I'm French...  Sorry for my bad English, I use ' Google Translator' or other... but that remains that tools Wink

#15: 11-Jan-2007, 02:29 PM

Marc
Posts: 803

The best things in life are free

Pour la méthode que suggère Helio, tu trouveras toutes les explications dans le livre CSS 2 Pratique du design Web de Raphaël Goetter (tu peux le retrouver aussi sur le site Alsacreation) en page 205. Mais je te conseille de te le procurer et de le lire. Il est facile à parcourir et il convient parfaitement au débutant. Chacun de nous ici la parcouru et a suivi les tuto proposés. Wink

Code:
<div id="header">
<a href="/"><img src="/assets/templates/lmpvl/img/bandeau.jpg" alt="Logo Vol Libre"/></a>
<h1>Vol libre: parapente, skysurf, ...</h1>
</div>
ou l'image bandeau.jpg est la fusion de tes deux images actuelles.

Dans ton CSS :
Code:
#hearder {
margin: 0;
padding: 0;
height: 157px;
background: url(img/bg_trait_y.gif) left top repeat-y;
}

#hearder img {
float: left;
height: 157px;
width: 764px
margin: 0;
padding: 0;
}

#hearder a{ /*pour IE */
margin: 0;
padding: 0;
}

#hearder h1{
text-indent: -5000px;
margin: 0;
line-height : 0;
}

Je ne l'ai pas testé mais l'idée est la suivante :
l'instruction bachground permet d'afficher une image de fond dans ton header.
L'image à gauche est gérée par #hearder img
La balise <h1> ne s'affiche pas du moins lorsque la feuille de style est activée.
Par contre, si elle n'est pas activée (c'est le cas pour certaine personne handicapée), le contenu de la balise s'affiche dans le header et permet une meilleur compréhension du contenu.
De plus le contenu de cette page est incluse dans la base de donnée des moteurs de recherche. Ce qui améliore le référencement.

Bon courage Wink
« Last Edit: 11-Jan-2007, 02:40 PM by Marc »
Marc
I'm French...  Sorry for my bad English, I use ' Google Translator' or other... but that remains that tools Wink

#16: 13-Jan-2007, 02:09 AM

raoulmapoule
Posts: 41

WWW
Bonjour Marc,

J'ai bien regardé ta proposition, mais il me semble que dans ce cas la résolution n'est plus adaptable puisque la largeur est fixe non ?
Le modèle que j'ai fait s'adapte aussi bien en 800x600 qu'en 1280x1024 ou tout autre résolutions... ça fait partie du cahier des charges (que je me suis fixé)  Wink

#17: 13-Jan-2007, 09:21 AM

Marc
Posts: 803

The best things in life are free

Dans mes propositions, j'ai opté pour définir les <div> en dimensions fixes (du moins dans le header) ce qui ne gène pas pour les résolutions que tu mentionnes.

Néanmoins, tu peux opter aussi pour des dimensions en relatif (comme dans l'utilisation des balises <table>). Wink
Encore une fois, pour toutes ces questions, tu trouveras un plus grand nombre d'experts sur le site Alsacreation que j'ai cité plusieurs fois sur ce fil de discutions ou d'autres dédiés sur l'utilisation des feuilles de style.
Loin de moi, l'idée de ne pas venir à ton aide (d'ailleurs tu peux me retrouver sur Alsacreation, rarement, mais j'y suis aussi avec le même avatar Wink ), mais ce forum est d'avantage dédié à l'utilisation et l'amélioration de MODx.
Ce sujet est passé d'un avis sur ton site (que je trouve superbe, avec un sujet intéressant) avec quelques conseils sur les principes (respect des recommandations W3C et WAI, emploi de CSS,...) que nous témoignons et appliquons sur ce forum vers la refonte de ton template.

Nous restons à ton écoute pour tous les difficultés que tu rencontres dans l'utilisation des outils contenus dans MODx (snippet, chunks, TV, modules, pluggin, développements en PHP, JS, AJAX, etc.) Wink
Marc
I'm French...  Sorry for my bad English, I use ' Google Translator' or other... but that remains that tools Wink

#18: 14-Jan-2007, 04:11 AM

raoulmapoule
Posts: 41

WWW
Pas de problèmes, c'est vrai qu'on est un peu hors sujet...  Tongue
Pages: [1]   Go Up
0 Members and 1 Guest are viewing this topic.