Passage aux standards

WRInaute accro
Voila pas mal de temps que je gonfle mes patrons avec les standarts WEB et qu'il faudrait absolument que je développe des sites qui soient aux normes et patati et patata... Voila, proposition accepté. Il faut donc que je réalise le site d'un client en respectant les standarts pour qu'on puisse voir les bénéfices que ça peut apporter... et en plus, ça me permet d'en apprendre beaucoup sur les standarts

Donc voici ma question :
Quand on regarde le site macromedia ( http://www.macromedia.com/fr/ )sous un vieux Netscape (j'ai le communicator 5.1), les css ne sont pas interprété, donc il affiche logiquement une page sans aucune mise en forme. Pareil avec openweb et pompage.net...
Lorsque je consulte le site que je suis en train de faire, mon netscape communicator 5.1 me lit une partie des css et pas les autres alors qu'il ne devrait rien lire. Du coup ça donne une mise en page dégueulasse.

Comment ça se fait ?
 
WRInaute discret
Salut,

En regardant les sources de la page de macromedia, il y a un seul fichier css qui est charger.
Il centralise les autres feuilles de style par l'instruction
Code:
@import url(/feuille_de_style.css);

L'instruction @import n'est pas executee par les navigateurs tel que NS 4.

Utilise cette instruction pour ne pas avoir une page a demi "designer" (je ne sais pas si le terme existe ;) )

Cordialement,

FRed
 
WRInaute accro
Open web par exemple n'utilise pas cette instruction par exemple et leur page n'est pas à "demi-designée". Peut-être qu'il faut tout simplement que j'utilise des boites en css2

#entete{
...
}
#contenu{
...
}
#pied_de_page{
...
}

plutôt que d'utiliser du css1 :
body{
...
}
p{
...
}

Je me dit que si un navigateur est capable d'afficher du css2, ma mise en page sera propre, sinon si il n'est capable d'afficher que du css1, mon contenu sera affiché sans mise en forme.

J'ai essayer, ça semble fonctionner, mais je suis pas sûr de mon coup dans l'application sur tous les navigateurs. Est-ce quelqu'un peut me confirmer que ça marche à chaque coup, notamment sur IE4 ou IE5 que je n'est plus...
 
WRInaute impliqué
Re: Passage aux standarts

blman a dit:
Lorsque je consulte le site que je suis en train de faire, mon netscape communicator 5.1 me lit une partie des css et pas les autres alors qu'il ne devrait rien lire. Du coup ça donne une mise en page dégueulasse.

C'est quand même bizarre, il n'aurait même pas du lire tes pages, N 5.1 n'a jamais existé. ;-) Il sont passé de la lamentable 4.8 à la 6 directement.

Ceci étant dit, il faut utiliser "@import" comme dit précedemment pour que les vieux navigateurs ne lisent pas ta feuille de style.

PS: si tu dois faire un rapport à ton patron ou au client, sache que standard prend un "d" et pas un "t".
 
WRInaute impliqué
Entre la mauvaise orthographe de "standard", la mention d'un navigateur qui n'a jamais existé et la mention de "boites en css2" qui n'existent pas (le # a une fonction, tout comme le point ".", ça n'indique pas la version de CSS que tu veux utiliser au navigateur : http://www.w3.org/TR/REC-CSS1#id-as-selector )...
Bref ! vu ton niveau actuel, du moins à ce qui parait, je crois que tu t'es lancé dans une galère sans nom.
J'espère pour toi que les clients auquels tu as affaire ne sont pas trop exigeants sur le design, ou au moins que contractuellement rien ne t'obligera à faire du site 100% standard et dans l'esprit des standards.

Mon conseil : commence molo, et vois après les histoires de blocs. Contente-toi d'utiliser les styles pour les polices dans un premier temps.
 
Nouveau WRInaute
Salut
tu peut faire 2 feuilles de style.
1 pour les navigateurs récent que tu appelle avec @import
et 1 pour les vieux navigateurs que tu apelle avec <link href=""
@ import doit être mis en premier pour les navigateurs qui la prend en compte,
ceux qui ne la prend pas en compte passe à la suivante.

Bon courage
 
WRInaute occasionnel
Ramon a dit:
@ import doit être mis en premier pour les navigateurs qui la prend en compte,
ceux qui ne la prend pas en compte passe à la suivante.

Bon courage
Si les navigateurs ne prennent pas en compte @import, ils l'ignoreront et passeront à la suite. Si par contre il gère cette propriété, il la prendra en compte, et continuera quand même après. Au final, tu auras la même presentation pour tous les navigateurs, gérant l'import ou non...
 
WRInaute accro
Bon yanhl, ok, je me suit planté, la version c'est communicator 4.51, standard s'écrit avec un "d"... Mais si je suis tes conseils, je ferais jamais rien... donc ton post, je l'oubli, il me sert à rien. Des sites avec les typos et les couleurs gérés en css, j'en ais déjà fais pas mal et justement, je voudrais en profiter pour approndir mes connaissances.
J'ai déjà aider pas mal de personnes sur ce forum sur des sujets que je connaissaient bien donc j'attendais au moins de ce post que ceux qui connaissent bien les standarDs puissent me renvoyer la pareil... et pas jouer sur les mots...

Un énorme merci à ceux qui m'ont donner quelques pistes, je vais continuer mon apprentissage.

PS : Putain, c'est gonflant quand même, j'essaye de convaincre mes patrons, qui, eux, ne voient que RENTABILITE, pour la "bonne cause" (passage aux standards, plein de bonnes intentions) et on me dit (en gros) que je peux aller me coucher... En plus, tu me juge sans même savoir ce que je sais faire et dans quelles conditions je les fais, tu ne connais pas mon niveau. Vraiment, là, ça me fait chier... je tenais à le dire.

Bon j'arrête là, je vais me REconcentrer sur mes css parce que, finalement, c'est la seule chose qui m'importe aujourd'hui !
 
WRInaute passionné
blman a dit:
PS : Putain, c'est gonflant quand même, j'essaye de convaincre mes patrons, qui, eux, ne voient que RENTABILITE, pour la "bonne cause" (passage aux standards, plein de bonnes intentions) et on me dit (en gros) que je peux aller me coucher...

Salut,

Ca, c'est bon signe : ils connaissent leur métier de patron. Tant qu'ils gagneront de l'argent, ils pourront continuer à t'embaucher ;) Le jour où ils se soucieront de la misère du monde, commence à mettre ton CV à jour 8)

C'est donc à toi de poursuivre la discussion sur le terrain de la rentabilité. Ne peux-tu trouver des arguments du genre "quand je maîtriserai les standards, je gagnerai environ 10 % de temps dans le développement des sites parce que telle et telle étape (par exemple, les tests dans les différents navigateurs) sera raccourcie de moitié." ? Ou bien "le respect des standards est de plus en plus exigé dans les cahiers des charges de telles entreprises, il importe que nous les maîtrisions pour ne pas louper des affaires. " ?
 
WRInaute impliqué
blman > te fâche pas, je voulais juste t'éviter de te mettre dans la m..., par exemple si tes patrons sont un peu trop enthousiastes et te demandent de faire un site top design en ayant précisé contractuellement que le site allait être dans l'esprit des standards.

Pour en revenir à ton problème : designé ou demi-designé, finalement tu t'en fous un peu non ? Quel est le problème de ne pas avoir quelque chose de parfait sous N4 ?
Les standards ne disent pas que le design doit être parfaitement identique d'un navigateur à l'autre, mais que ça restera lisible.
Bref, cessons de jouer sur les mots. ;-)

NN4.x étant une véritable daube comme on en voit peu de nos jours, tu dois faire TRES TRES attention quand tu juges l'application de css avec lui. Si ta feuille est à moitié interprétée, c'est peut-être que quelque chose ne lui plait pas vers le milieu de ta CSS. Ca peut être à peu près tout et n'importe quoi, donc vérifie ta syntaxe avec le validator css du W3C : http://jigsaw.w3.org/css-validator/
Pour mon malheur, j'ai très bien connu NN4, et je t'aiderais si je le peux parce que franchement... c'est l'enfer ! Au passage, t'aurais peut-être du commencer à dire à ton boss qu'il fallait abandonner NN4 ;-)

Une idée à base d'import : les auteurs de phpBB font une partie dans la page et externalisent les sections incompatibles NN4 (i.e. : qu'il essaye malheureusement d'interpréter, comme les bordures des éléments de formulaires) dans une feuille externe avec @import. Sinon y'a la solution de Ramon rectifiée par maxttb ce qui veut dire que tu peux faire un mix des deux : link + import pour faire plus léger, sinon tu vas définir des choses deux fois.
 
WRInaute accro
Ah bà voila quelque chose de constructif, merci !
Ce n'est pas mes patrons qui m'imposent NN4, c'est moi qui me met la pression parce que plus j'en connaitrais sur ce sujet, mieux ce sera. Mes patrons (et mes clients d'ailleurs) n'y connaissent rien, ils sont dans le domaine de la PAO, c'est pour ça qu'il faut toujours que je justifie mes choix (par exemple là, je vais dépasser le prix annoncé sur le devis en terme de temps passé, c'est du manque à gagner pour mes patrons, mais il le récupérerons plus tard...). Je m'impose par contre moi-même un niveau de qualité que je jugerais acceptable.

Pour apprendre, j'ai d'abord analysé les site Open Web, pompage et macromedia, et vu que je n'est pas envie de faire un plagiat de leur code (ça ne me servirait à rien), il faut que je trouve des réponses à mes questions. Merci en tout cas pour ces tuyaux, je vous tiendrais au courant de mon état d'avancement...
 
WRInaute impliqué
alors abandonne NN4, et je te dis ça très sérieusement : ça ne sert à rien de connaitre ce navigateur ultra buggué qui de plus a un suport des CSS vraiment pourrav'.
Tu vas perdre ton temps, sérieusement !
Utilise Firefox et profite de ses extensions pour tester les CSS, mais aussi les désactiver, utiliser le curseur permettant de connaitre tous les styles appliqués sur un élément, etc.
(http://www.chrispederick.com/work/firefox/webdeveloper/)

Ne crois pas que c'est une promo à l'aveuglette, c'est vraiment comme ça que je recommande de bosser : avec un maximum d'outils à ta disposition pour tester rapidement et avoir quelque chose de fiable sous les yeux.
Et puis tu perdras déjà suffisament de temps avec IE et son support limité des CSS, il t'enervera déjà assez en t'obligeant à coder "crade", si en plus tu veux supporter NN4 tu vas perdre beaucoup de temps..
 
WRInaute discret
tu peux aussi te rendre sur le site alsacréation qui est principalement tourné vers les standards du web ( XHTML, CSS, ...)
-ttp://forum.alsacreations.com/topic.php?fid=1&tid=55
 
WRInaute accro
Excellent ton lien, c'est un super outil !
Merci beaucoup yanhl, on oublie les post du dessus... (regarde tes MP)
 
WRInaute accro
Bé je m'en sors pas si mal finalement, en tout cas pour IE6, pas encore pour firefox. Ca s'apprend assez facilement, tout compte fait ( -http://www.lebarts.com/demo-cc-loiron/ ) (je précise que le graphisme n'est pas de moi, on m'a juste dit : "tiens, monte moi ça" sans ce soucier si c'était faisable ou non )

Yanhl, ton outil sur firefox m'est très utile. Allez, je me casse en week-end, c'est fini pour cette semaine !
 
WRInaute impliqué
effectivement, c'est un bon début !
juste une remarque : pour tes liens "imprimer, envoyer (...)", à ta place je ferais un div avec un id genre "blocOutils" avec une taille fixe, et un background en image : une seule image au lieu de 2 c'est plus rapide à charger, les fonds unis ne demandent quasiment rien en gif (moins que le code html, probablement, et de toute façon ça ne fait qu'une requête, une seule palette donc ça gagne encore).
Pour la maintenance c'est encore plus simple, et ça te permet de séparer encore mieux l'aspect graphique et le code puisque tu n'auras pas de référence aux images "décoratives" dans la page.

J'ai pas tout regardé en détail mais autrement ça me paraissait être vraiment d'un bon niveau.

P.S. : je n'appelle jamais mes feuilles de styles "styles.css" : ça n'a pas de sens puisque .css indique déjà que c'est des styles. mieux vaut l'appeller "cc-loiron.css" pour le tronc commun, et nommer les déclinaisons sans référence aux couleurs : c'est un non-sens puisque justement, l'intérêt est de pouvoir changer l'apparence de manière "transparente".
Donc ça donnerait des noms de feuilles comme "communaute.css", "economie.css" etc.
C'est un petit "plus" dans l'esprit des standards ;-)
 
WRInaute accro
Voila, premier jet fini !
Je l'ai testé sous IE 6, Firefox, Mozilla 1.2.1 sous PC et IE 5, safari sous MAC. Quasiment tout est bon, pas de grosses différence d'affichage.

Toujours la même adresse :
-http://www.lebarts.com/demo-cc-loiron/

Si vous possédez d'autres navigateurs (notamment sur Mac et IE4 sur PC), pourriez vous me dire comment ça s'affiche ? Sinon, je suis toujours preneur de conseils utiles...

Je vais maintenant orientée mes recherches sur la typo (antialiasing, police, ...) et sur l'accessiblité (du moins, plus en profondeur)
 
WRInaute impliqué
@blman > en xhtml, tu ne peux pas avoir de balises non fermées. (<br> => <br />, par exemple)
http://validator.w3.org/check?verbose=1 ... cc-loiron/

sinon c'est propre, mais c'est dommage que tu aies fait trois divs pour la zone outils. essaye de n'en faire qu'un, regarde ce que ça fait au niveau du poids : tu vas y gagner, normalement.
Là, tu as trois divs séparés (palette_top, palette, palette_bottom), donc d'un point de vue logique, rien ne les rapproche (à par leur nom mais le nom n'est pas un élément structurant).
Si tu veux persister dans la technique à trois div (à priori pas unique, donc on va utiliser des classes et non des id), tu devrais en faire un quatrième :

<div class="palette">
<div class="top"></div>
<div class="contenu"></div>
<div class="bottom"></div>
</div>

et dans la css :
DIV.palette {}
DIV.palette DIV.top {}
DIV.palette DIV.contenu {}
DIV.palette DIV.bottom {}

Bref, mettre plus à profit le premier c de CSS pour structurer ton doc ;-)
 
WRInaute discret
Les standards oui, mais pas plus royaliste que HRH W3C

vous allez peut-être me prendre pour un gros bourin, ce que je suis en fait, mais la compatibilité multi-plateforme ça me laisse froid. Je teste les navigateurs qui représentent 99% des sites dont je m'occuppe, le 1% restant lisible.

C'est un peu se mettre une "boîte noire" que de se mettre la pression sur les standards, dans le cadre de projets facturés.

Je m'assure surtout que les spiders voients bien les bonnes choses, et les css sont taillés pour supporter sans encombre IE, Firefox, Mozilla, Opera.

Je teste aussi mes pages pour la lecture par les aveugles. J'avoue que là je suis pas au top encore mais ça se tient.

Nanti de ces principes, je me prends dans mon panier de code les css qui me plaisent, que je connais bien, et là je fais mon petit site.

Voilà pour un esprit général de gestion de projet (un cahier des charges, une date, un budget)
 
WRInaute impliqué
On est d'accord, le 100% standard n'est pas une fin en soi. Reste que si tu devais faire de la maintenance sur plusieurs années, tu en verrais rapidement l'intérêt.

Si je devais choisir un prestataire, je regarderais ton code et je ne te choisirais pas (sur la base du site en profil) : des width et height avec des fractions de pixels (altère l'affichage, alourdit le code), des href en javascript, du code inutile qui alourdit le poids des pages et rend la maintenance plus pénible... c'est même pas être un intégriste des standards que de dire qu'un petit nettoyage du code s'impose ;-)

P.S. : attention à ton 800*600 partiel, ça ne fait pas bonne impression non plus.
P.P.S. : ce n'est pas un message pour te "casser", juste des conseils amicaux et des arguments pour te montrer pourquoi il faut pas se contenter de "ça passe".
 
WRInaute discret
Oui, mon site est un bon témoin négatif, c'est sûr, mais il est positionné sur des trucs néanmoins et je le concède, cela ne devrait pas être.
Quant à la conception, c'est après avoir fait ce site que j'ai vu la lumière et que, terrassé, je me suis enfui dans le jardin zen où coulent les cascades stylées.

Je ne rencontre pas de problèmes en après-vente sur mes sites, et je dis la même chose que ce que j'ai dit dans ce thread et ça ne choque pas.

Les sites que je ne maintiens pas sont apparemment suffisamment documentés pour les webmasters et ils ne sont pas comateux sur le web.

Merci pour les conseils en tout cas, ils sont toujours bienvenus.

Ôm
 
WRInaute impliqué
Salut !

Comme toi je refais des sites pour les mettre aux standards. Pour convaincre tes patrons c'est pas dur : économie de trafic, pages plus rapide pour les visiteurs (plus une page est longue à charger et plus ça fait fuir le visiteur) et que la mode c'est à l'économie/pages plus ou moins dépouillées ça ira ;)
Les CSS offrent la chance d'être ultra flexibles et de faciliter les changements futurs.

Par contre fais attention : les clients eux ne comprendront pas qu'ils aient des pages en Noir/blanc sans mise en forme donc vaut mieux une page à demi-interprétée qu'une page pas interprétée du tout !
 
WRInaute accro
Bé pour le moment, mes patrons sont aux anges. J'ai pas mis beaucoup de temps à saisir le fonctionnement de la mise en page en css et maintenant, je leur fait des lettrines, des interlettrages, ... En gros, j'arrive à respecter 90% de la charte graphique définie en PAO (mis à part les polices, snif...).
En plus, le site passe nickel sous MAC, chose que j'avais du mal à obtenir avant.

Kasar, ta méthode, c'est ce que j'utilisais "avant", méthode un peu bourrine mais qui convient si bien à notre boulot : des budgets hypers serrés, des sites qui doivent être faits pour hier et qui doivent forcément être bien positionnés, être au maximum compatibles et suffisament ergonomiques. Quelle plaie...
Et puis voila l'article qui m'a décidé à arrêter de faire de la mise en page avec des tableaux http://www.openweb.eu.org/articles/problemes_tableaux/ . Ca fais longtemps que je pensais m'y mettre, et puis voila, c'est fait, c'est pas bien compliqué...

Mais au final, je suis bien content de cette nouvelle méthode, qui, c'est vrai, gagne un temps fou lorsqu'il faut rentrer le contenu.
 
Discussions similaires
C
Réponses
4
Affichages
1K
christele2
C
Haut