Jul 05, 2009, 08:55 PM *
Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length
Search via SMF or Google: modx forums all of modxcms.com web
  MODxCMS.com   Forums   Help Login Register  
Pages: [1] 2   Go Down
  Print  
Author Topic: Vol libre Midi Pyrénées  (Read 4030 times)
0 Members and 1 Guest are viewing this topic.
raoulmapoule
Jr. Member
*
Posts: 41


WWW
« on: Jan 10, 2007, 11:43 AM »

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
Logged

heliotrope
Coding Team
*
Posts: 2,517


WWW
« Reply #1 on: Jan 10, 2007, 12:06 PM »

Salut,

j'aime beaucoup :-)

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

Bravo !!!

:-)
Logged

raoulmapoule
Jr. Member
*
Posts: 41


WWW
« Reply #2 on: Jan 10, 2007, 12:47 PM »

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 ...
Logged

Marc
Committed to MODx
*****
Posts: 779

The best things in life are free


« Reply #3 on: Jan 10, 2007, 02:51 PM »

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
Logged

Marc
I'm French...  Sorry for my bad English, I use ' Google Translator' or other... but that remains that tools Wink
heliotrope
Coding Team
*
Posts: 2,517


WWW
« Reply #4 on: Jan 10, 2007, 03:10 PM »

Je n'ai pas regardé le source.

merci marc d'avoir corrigé mon inattention.

:-)
Logged

raoulmapoule
Jr. Member
*
Posts: 41


WWW
« Reply #5 on: Jan 11, 2007, 02:39 AM »

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
Logged

Marc
Committed to MODx
*****
Posts: 779

The best things in life are free


« Reply #6 on: Jan 11, 2007, 08:24 AM »

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
 
Logged

Marc
I'm French...  Sorry for my bad English, I use ' Google Translator' or other... but that remains that tools Wink
Marc
Committed to MODx
*****
Posts: 779

The best things in life are free


« Reply #7 on: Jan 11, 2007, 08:43 AM »

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
Logged

Marc
I'm French...  Sorry for my bad English, I use ' Google Translator' or other... but that remains that tools Wink
heliotrope
Coding Team
*
Posts: 2,517


WWW
« Reply #8 on: Jan 11, 2007, 08:50 AM »

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>
Logged

Marc
Committed to MODx
*****
Posts: 779

The best things in life are free


« Reply #9 on: Jan 11, 2007, 08:56 AM »

L'idée est bonne et améliore mon premier jet Wink
Logged

Marc
I'm French...  Sorry for my bad English, I use ' Google Translator' or other... but that remains that tools Wink
raoulmapoule
Jr. Member
*
Posts: 41


WWW
« Reply #10 on: Jan 11, 2007, 11:00 AM »

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: Jan 11, 2007, 11:02 AM by raoulmapoule » Logged

heliotrope
Coding Team
*
Posts: 2,517


WWW
« Reply #11 on: Jan 11, 2007, 11:04 AM »

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.

:-)

Logged

raoulmapoule
Jr. Member
*
Posts: 41


WWW
« Reply #12 on: Jan 11, 2007, 12:54 PM »

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
Logged

Marc
Committed to MODx
*****
Posts: 779

The best things in life are free


« Reply #13 on: Jan 11, 2007, 01:43 PM »

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
Logged

Marc
I'm French...  Sorry for my bad English, I use ' Google Translator' or other... but that remains that tools Wink
Marc
Committed to MODx
*****
Posts: 779

The best things in life are free


« Reply #14 on: Jan 11, 2007, 02:29 PM »

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: Jan 11, 2007, 02:40 PM by Marc » Logged

Marc
I'm French...  Sorry for my bad English, I use ' Google Translator' or other... but that remains that tools Wink
Pages: [1] 2   Go Up
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP

Copyright © 2005-2008 MODxCMS, All rights reserved. Contact Us
Styles by ziworks.com

Powered by SMF | SMF © 2006-2008, Simple Machines LLC

Valid XHTML 1.0! Valid CSS!