Dimensionnement des pages Web

seventies seventies
14 597 contributions
Membre depuis le 01/11/2003
Envoyé le 17/08/2005 à 23:33


Bonsoir,

La mise à jour de mon site Web est quasi terminée (sur mon DD [°)] ), et chaque page est constituée de tableaux, ce qui permet de remplacer avantageusement les frames qui posaient tant de problèmes.

Toutes les cellules des tableaux sont dimensionnés en pourcent, pour mieux s\'adapter aux divers affichages.

Toutefois, la répartition des cellules est assez complexe (par exemple, sur la gauche, une colonne avec une seule cellule, des tableaux imbriqués ...)

Je travaille en 1280x1024 pour la mise au point des pages (Microsoft Frontpage). Mais voilà, quand je change l\'affichage, mes pages ne sont pas réduites comme je le souhaitais, d\'où des pages illisibles en 800x600.

Lorsque je change d\'affichage, je coupe IE6 et Frontpage pour une réinitialisation correcte.

D\'où viendrait ce bug étonnant ?
Il faut bien que je supporte deux ou trois chenilles si je veux connaître les papillons (A. de Saint-Exupery)
johannis johannis
19 917 contributions
Membre depuis le 10/10/2001
Envoyé le 18/08/2005 à 01:25


Toutes les cellules des tableaux sont dimensionnés en pourcent, pour mieux s\'adapter aux divers affichages


Je crois que la méthode est très risquée... Du reste, l\'utilisation de tableaux est désormais vivement déconseillée (en tout cas pour faire de la mise en page), justement pour cause de manque de compatibilité entre les divers affichages et les divers navigateurs.
Tu noteras du reste que dorénavant, la plupart des sites sont optimisés soit en 800x600 (d\'où des pages avec des bandeaux latéraux sur grand écran) soit en 1024x768.

Ne te prends pas le chou pour pas grand-chose :
Une écrasante majorité d\'internautes utilisent désormais un affichage de 1024x768, voire plus !
Mieux vaut en toute hypothèse mettre au point tes pages au format définitif. Donc, ne pas travailler à un format plus grand : c\'est bon pour la retouche d\'images, mais très mauvais pour la conception de sites web : ne serait-ce que pour la gestion des polices de caractères, des sauts de ligne, des espacements d\'images (bordures). Même en utilisant des feuilles de style, on n\'est jamais à l\'abri d\'un loupé...

D\'autant que les logiciels comme Frontpage ou Dreamweaver permettent trop de libertés... sans pouvoir vraiment maîtriser ce qu\'on fait.
Regarde le code source d\'une page créée avec ce genre de logiciel et compte le nombre de tags inutiles ou répétitifs. Sans compter ceux qui sont hors normalisation.
Un bon test : envoie tes pages sur un site de validation (si tu les ouvres avec Opera, c\'est automatique : il suffit de faire clic droit dessus et \"validate\" ou encore plus simple \"ctrl-alt-v\" pour que la page soit analysée en quelques secondes sur le site officiel :
validator.w3.org/
tu seras édifié (et sans doute horrifié [:o])

seventies seventies
14 597 contributions
Membre depuis le 01/11/2003
Envoyé le 18/08/2005 à 02:08


Ok, merci pour cette première approche.

Le problème est également esthétique : les différentes pages utilisent un menu à gauche identique d\'une page à l\'autre, un logo en haut au centre, et un titre en haut à droite.

Or, à partir d\'une même page prototype, je génère les différentes pages, et le logo, le titre, ou même le menu de gauche changent à tout moment de dimensions. Je sais, c\'est un détail, mais seuls les pourcentages évitent en partie cet inconvénient. En exprimant les dimensions en pixel, c\'est la catastrophe d\'une page à l\'autre.

Je vais essayer de rétablir un prototype plus cohérent, éventuellement en écrivant directement en HTML, et dans lequel il n y aura \"plus qu\'à\" insérer les pages existantes.

Je pense également à redémarrer l\'ordinateur pour les essais dans d\'autres dimensions d\'écran, car je suis certain qu\'à l\'ouverture de session, des logiciels (que je ne citerai pas [:D] ) mémorisent certaines propriétés qui ne sont plus vérifiées par la suite.
Il faut bien que je supporte deux ou trois chenilles si je veux connaître les papillons (A. de Saint-Exupery)
johannis johannis
19 917 contributions
Membre depuis le 10/10/2001
Envoyé le 18/08/2005 à 04:45


En exprimant les dimensions en pixel, c\'est la catastrophe d\'une page à l\'autre.


normalement non, justement !

mémorisent certaines propriétés qui ne sont plus vérifiées par la suite.


Fais attention lorsque tu testes tes pages avec différents navigateurs : dans les paramètres (ou options), il y a la possibilité d\'afficher les pages selon le mode \"utilisateur\". Danger !
Parce que dans ce cas, c\'est le navigateur qui prend la main et selon sa configuration, l\'affichage peut varier du tout au tout.
Il faut privilégier le mode \"auteur\" : dans ce cas, les pages sont affichées avec le format, les liens, les couleurs et les polices tels que les a voulus leur concepteur (donc, toi, en l\'occurrence).

Une solution bien sûr est de placer en header certains tags qui vont bien, pour forcer tel ou tel mode d\'affichage, par exemple, pour empêcher le moche surlignement des liens : c\'est ce que j\'ai adopté sur mes sites. En effet, jouant à fond la carte de l\'hypertexte, j\'ai indexé un grand nombre de mots (surtout sur mes dictionnaires et lexiques). Résultat des courses, avec un mode normal d\'affichage, les pages n\'étaient quasiment composées que de texte surligné (et avec des couleurs changeantes). J\'y ai mis bon ordre !

Cela dit, pourquoi t\'entêter à ne pas utiliser de frames ? Après tout, tous les navigateurs les acceptent désormais (plus personne n\'utilise Netscape 1.0 ou Mosaic 0.9, même moi !) Cela te simplifierait considérablement la tâche (pas de modèle à dupliquer et modifier page à page éventuellement) et tu serais assuré d\'avoir la même présentation d\'un bout à l\'autre.
Seul problème (que j\'avoue n\'avoir pas entièrement résolu):
les liens directs depuis l\'extérieur.
En effet, dans ce cas, la page s\'ouvre sans cadre et le visiteur se retrouve coincé sauf si l\'on rajoute un bouton \"afficher les cadres\" ou un renvoi vers le \"menu\".
Mais dans ce cas, on court le risque qu\'un visiteur \"normal\", entré par la porte principale du site se retrouve, d\'un clic malencontreux avec des frames en cascade...
La solution est de ne mettre qu\'un bouton de renvoi sur la page d\'accueil principal (avant les cadres) et en ouvrant obligatoirement une nouvelle fenêtre (target _blank au lieu de target _cible). Ainsi, quel que
soit l\'arrivée dans la page, on repart \"de zéro\" sur une page vierge.

Regarde à titre d\'exemple, comment je jongle sur le menu de siteordo : Selon les cas, la page s\'ouvre dans le cadre de droite, ou sous la forme d\'une nouvelle page (cas du renvoi sur un nouveau site).
Ainsi, pour les chats :

<A HREF=\"chahute.htm\" target=\"cible\" title=\"qui M.A.C.H.A.U.T.\">autres chats-pitres</A><br/>
<a href=\"http://www.chatpitres.online.fr/\" target=\"_blank\" title=\"le site des chats\">tous les chats-pitres...</A><br/>



dans le premier cas \"autres chat-pitres\" > cadre à droite dans siteordo (page siteordo.online.fr/chahute.htm),
dans le second \"tous les chat-pitres\" >
ouverture d\'une nouvelle page sur le site :
www.chatpitres.online.fr/.
La première page, si elle a été ouverte par un accès direct (comme avec le lien actif que j\'ai mis dans ce post), permet toutefois de se retrouver sur le site complet (avec cadre) grâce à un lien indiqué en haut.

Il faut un peu jongler au début pour tester tous les cas de figure mais une fois le principe bien assimilé, ça roule ! (+)

seventies seventies
14 597 contributions
Membre depuis le 01/11/2003
Envoyé le 18/08/2005 à 11:54


Merci encore. Oui, les problèmes avec les frames sont dus aux indexations des moteurs de recherche. Le visiteur tombait sur une page avec des liens peu clairs.

J\'avais rajouté un script qui renvoyait sur la page d\'entrée, et du coup, le visiteur devait \"chercher\" la page qu\'il recherchait.

J\'ai essayé de passer des arguments à la page de \"frames\" pour ouvrir directement le bon assemblage, mais là, j\'y ai perdu mon latin - malgré un échange fort clair avec un Memocliqueur à l\'époque.

Il faut dire que je ne connais pas le PHP et que mon FAI ne l\'autorise pas [°)] je suis donc assez limité dans l\'imagination ...
Il faut bien que je supporte deux ou trois chenilles si je veux connaître les papillons (A. de Saint-Exupery)
Stiopka Stiopka
352 contributions
Membre depuis le 12/04/2003
Envoyé le 18/08/2005 à 12:16


Boonjour,
J\'ai soumis quelques unes de mes pages à Validator, et c\'est effrayant de constater le nombre d\'erreurs relevées. Et pourtant, quand on consulte ces pages, tout baigne. Alors, faut-il vraiment rechercher la pureté absolue?

Amitiés, et encore merci à tous pour les précieux conseils.

seventies seventies
14 597 contributions
Membre depuis le 01/11/2003
Envoyé le 18/08/2005 à 14:00


C\'est la même situation que lorsqu\'on compile un programme à partir de Visual C ou autre programme similaire. Le résultat fait 10 fois la taille du même programme écrit manuellement, le reste n\'est pas erroné, mais superflu.

Quand on regarde le code généré par Frontpage, il y a des tas de redites inutiles. Mais si on essaye de les supprimer, là c\'est la catastrophe certaine. De plus, Frontpage va remttre toutes les lignes supprimées à la prochaine ouverture [°)]
Il faut bien que je supporte deux ou trois chenilles si je veux connaître les papillons (A. de Saint-Exupery)
johannis johannis
19 917 contributions
Membre depuis le 10/10/2001
Envoyé le 18/08/2005 à 18:56


Mais si on essaye de les supprimer, là c\'est la catastrophe certaine. De plus, Frontpage va remttre toutes les lignes ]supprimées à la prochaine ouverture




Ce n\'est pas la cata si on supprime justement tout ce qui est inutile. (Un truc tout bête : les multiples espaces, commentaires (<!-- --> ou retours ligne (<br/> ou paragraphes <p> insérés uniquement pour aérer la mise en page.
Enfin, on peut toujours se consoler en se disant que de ce côté, il y a considérablement pire que Frontpage ou Dreamwaver (déjà pas mal, pourtant...) : Word (à fuir !) et Netscape Composer (à jeter !)

Exemple de répétition inutile :
<font color=xxx><font size=y><font face=zzz>
qu\'on peut aisément remplacer par :
<font color=xxx size=y face=zzz>
et encore plus simple, bien sûr, par une feuille de style...
sans parler des tags périmés depuis lurette, toujours en vigueur pourtant :
par exemple : <center></center>
au lieu de : <div align=center></div>
et je ne parle pas des listes (<ul><li></li></ul> qui bien souvent en revanche, oublient les tags de fermeture...
On passera sur l\'absence de guillemets pour les paramètres autres qu\'un chiffre positif :
En toute légalité, size=\"-1\" au lieu de size=-1 mais size=2 est admis. Ce n\'est que broutille.




Et pourtant, quand on consulte ces pages, tout baigne. Alors, faut-il vraiment rechercher la pureté absolue?



Non, bien sûr, c\'est quasiment impossible (les prescriptions et recommandation évoluent à mesure que le langage HTML se développe et engendre des rejetons), mais plus on s\'en approche, moins on aura de problèmes de compatibilité entre PC, Mac et Unix, entre IE, Opera et Mozilla (sans parler de Safari pour Mac)...

En plus, code allégé = plus de lisibilité, moins d\'erreurs d\'affichage, pages plus légères à stocker et surtout affichage bien plus rapide des pages !!!

Evidemment, depuis que l\'adsl s\'est généralisé, plus personne ne pense à optimiser son code et bien des sites (même créés \"professionnellement\") ne sont pas vraiment des exemples à suivre.

De plus, Frontpage va remttre toutes les lignes supprimées à la prochaine ouverture


D\'où l\'intérêt de se passer de ce genre de log.
Privilégier plutôt Ace HTML, HTMLedit...

Ensuite, pour éditer et compléter ses pages, un simple éditeur en mode texte (ultrapad, metapad) suffit amplement. Quelques copier-coller de lignes de code péchées sur la toile (l\'affichage du mode source est une mine de renseignements !), quelques tests en vrai grandeur (l\'adsl le permet : on envoie ses pages par ftp et on les essaie. Cela permet de répérer illico les erreurs restées invisibles en local sur le disque dur
(exemple classique : les noms de fichier panachant majuscules et minuscules : Fichier.txt n\'est pas équivalent à fichier.txt ou fichier.TXT... ça passe en local, mais plus sur un \"vrai\" site.
Autre exemple classique : les liens absolus au lieu de relatifs (là aussi, un grand classique de Word, Netscape composer, Frontpage ou Dreamweaver..., allez savoir pourquoi vu que c\'est parfaitement inutile (et même lourd et nuisible) :
ainsi un lien en <a href=\"file://localhost/c:/docs/site_ perso/images/photo.jpg\">afficher photo</a>
ou <a href=\"c:\\docs\\site_ perso\\images\\photo.jpg\">afficher photo</a>
ou encore (il y a des variantes...):
<a href=\"c||docs/site_ perso/images/photo.jpg\">afficher photo</a>
au lieu de <a href=\"images/photo.jpg>afficher photo</a>
C\'est kif-kif en local, ça ne marche évidemment plus une fois son site monté chez son hébergeur...

En revanche, abondance de biens nuit et remplacer TOUS les liens locaux par un adressage du type :
<<a href=\"http://mon_hebergeur.fr/monbôsite/images/photo.jpg>afficher photo</a>
est parfaitement superfétatoire !!!
(En outre, ça obligera à TOUT récrire si jamais on transfère son site chez un autre hébergeur)

Or, c\'est souvent ce que les logs genre Frontpage se plaisent à générer...
Les exemples sout légion.

seventies seventies
14 597 contributions
Membre depuis le 01/11/2003
Envoyé le 18/08/2005 à 20:47


C\'est kif-kif en local, ça ne marche évidemment plus une fois son site monté chez son hébergeur...

Si, malheureusement, ça marche depuis chez toi, puisque les fichiers sont sur ton disque, au bon endroit, mais pas depuis chez ton voisin [°)]

En général, je ralise une recherche complète de tous les \"http://\" sur tous les fichiers HTML de mon ordinateur, puis la même chose avec \"file://\"

Ca élimine pas mal d\'erreurs.
Il faut bien que je supporte deux ou trois chenilles si je veux connaître les papillons (A. de Saint-Exupery)
Stiopka Stiopka
352 contributions
Membre depuis le 12/04/2003
Envoyé le 18/08/2005 à 22:57


Je vous suis très reconnaissant de tous ces conseils. J\'utilisais jusqu\'à présent Adobe Pagemill pour créer mes pages, et je suis en train de passer à NVU. Que valent-ils?

* none83
Anonyme
Envoyé le 18/08/2005 à 23:08

Pour NVU, c\'est le bas de gamme. Ne pas se méprendre, c\'est un excellent logiciel pour commencer et comprendre comment créer un site en html. Mais selon ton niveau il peut se révéler limite. Essaie Draemweaver2 ou Webexpert5 si tu maîtrise un peu (tous les deux sont gratuits, présentation sur memoclic).

johannis johannis
19 917 contributions
Membre depuis le 10/10/2001
Envoyé le 19/08/2005 à 01:02


\"C\'est kif-kif en local, ça ne marche évidemment plus une fois son site monté chez son hébergeur...\"
Si, malheureusement, ça marche depuis chez toi, puisque les fichiers sont sur ton disque, au bon endroit, mais pas depuis chez ton voisin



relis-moi un peu mieux : c\'est EXACTEMENT ce que je dis et que je répète à l\'envi sur de nombreux topics puisque cette erreur stupide est manifestement souvent répétée... :
\"les divers exemples que je donne (majuscules/minuscules ou adresse relative/adresse absolue) marchent tous / sont équivalents (=kif-kif) en local
MAIS
ça ne marche plus du tout une fois le site monté chez son hébergeur\"
Des fois, je me demande pourquoi je me fatigue à répondre en détail. Ca doit être trop long à lire, peut-être, il y en a qui zappent...
[:oZ] [:(]

Pour les logiciels : Adobe PageMill est un des moins pires.
Même \"bas de gamme\", un éditeur html vaudra mieux que n\'importe quelle usine à gaz, de ce côté, je ne suis pas vraiment d\'accord avec none.null.

* none83
Anonyme
Envoyé le 19/08/2005 à 01:10

Personnellement je suis passé à dreamweaver2 (j\'aime pas payer et comme je ne fais rien comme tout le monde je suis passé de linux à windows [:D] ) que je trouve plus mieux (on n\'est pas obligé de se servir de toutes les fonction [:o)] ) et comme le code m\'importe peu du moment que ça tourne (désolé johannis, depuis que je suis passé sur pc je n\'arrive plus à me motiver pour re-apprendre un langage, juste le mini)! Je ne dénigre pas Nvu que m\'a permis de comprendre la construction d\'un site.

seventies seventies
14 597 contributions
Membre depuis le 01/11/2003
Envoyé le 19/08/2005 à 01:23


ça ne marche plus du tout une fois le site monté chez son hébergeur

On s\'est mal compris [:D] Une fois monté chez l\'hébergeur, ça fonctionne toujours depuis chez toi, mais pas depuis un autre PC. Et le débutant, celui qui travaille avec Netscape (moi, en l\'occurence, au début), ne se rend pas compte de l\'erreur avant longtemps.

Pour le reste, en suivant tes conseils, je viens de recommencer une mise en page avec tableaux, qui semble fonctionner même en 800x600.

L\'astuce : scinder ls cellules et non pas les fusionner, et travailler depuis la gauche vers la droite pour les dimensionner.

J\'ai donc actuellement :
- une colonne unique à gauche pour le menu
- le reste est divisé en deux lignes, la première pour le logo et le titre, la seconde ligne pour la page proprement dite

Le logo et le titre, sur une même ligne, sont placés dans 2 cellules, et seul le titre est comprimé lors de l\'usage en basse résolution.

Mais comme c\'est du texte, il se dispose avec des sauts de fin de ligne et reste donc lisible.

M LOGO TITRE
E **********
N **********
U **********
**********

les * représentant la page en elle même
Il faut bien que je supporte deux ou trois chenilles si je veux connaître les papillons (A. de Saint-Exupery)
johannis johannis
19 917 contributions
Membre depuis le 10/10/2001
Envoyé le 19/08/2005 à 01:27


comme le code m\'importe peu du moment que ça tourne (désolé johannis


c\'est sans doute mon côté perfectionniste... [;)]
mais j\'ai gardé de ma formation un goût pour le \"small is beautiful\". Dans le cas de windows, ce n\'est certes pas vraiment le cas.
Et j\'ai toujours fui comme la peste les logiciels usines à gaz.
(Quand je pense que j\'ai bossé pendant quinze ans sur des ordis sous CP/M et DOS sans JAMAIS savoir ce qu\'était un plantage... et en ne connaissant que le strict nécessaire du langage d\'OS (du reste, on en a vite fait le tour).

Pour le chteumeuleu, je reste convaincu qu\'il suffit de connaître les bases de la syntaxe pour se débrouiller et cracher du code efficace, c\'est-à-dire rapide et s\'affichant vite, même sur une machine d\'entrée de gamme avec un modem 56k voire moins...
Mais j\'en suis resté à une notion, sans doute aujourd\'hui désuète, d\'Internet : le contenu prime sur l\'emballage.

seventies seventies
14 597 contributions
Membre depuis le 01/11/2003
Envoyé le 19/08/2005 à 01:34


sans doute aujourd\'hui désuète

Ca dépend si le visiteur recherche le contenu ou l\'emballage [:D] Quand je vois des pages qui se déplacent dans tous les sens, où on ne trouve pas le clic pour entrer, mais où on voit des martiens qui traversent l\'écran, il reste toujours le bouton \"précédent\" [:D]
Il faut bien que je supporte deux ou trois chenilles si je veux connaître les papillons (A. de Saint-Exupery)
* none83
Anonyme
Envoyé le 19/08/2005 à 01:39

Moi je sais pourquoi Johannis ne veut pas Dreamweaver2! Il faut IE pour l\'installer et s\'enregistrer [:o)] .

johannis johannis
19 917 contributions
Membre depuis le 10/10/2001
Envoyé le 19/08/2005 à 03:07


Il faut IE pour l\'installer et s\'enregistrer


Ce doit être ça... En effet, blague à part, si j\'avais eu jamais l\'intention d\'utiliser ce log, ça aurait suffi à m\'en dissuader.

On s\'est mal compris. Une fois monté chez l\'hébergeur, ça fonctionne toujours depuis chez toi, mais pas depuis un autre PC. Et le débutant, celui qui travaille avec Netscape (moi, en l\'occurence, au début), ne se rend pas compte de l\'erreur avant longtemps.



(?) (?) Ca fonctionne depuis chez toi uniquement si tu continues à travailler avec le cache (en croyant rapatrier les pages de ton hébergeur). Sinon, désolé, non, des liens en \"c://\" ou en \"localfile\"... ne pourront pas marcher chez un hébergeur puisqu\'ils pointent sur un disque dur inexistant !!!

C\'est justement le problème avec Netscape Composer (je sais, je l\'ai utilisé pendant... quinze jours avant de le fuir définitivement), c\'est qu\'il cumule deux défauts :
la lourdeur du code,
l\'intégration à Netscape Navigator.
Et c\'est là où le bât blesse.
Même quand on est connecté, lorsqu\'on travaille avec le couple Navigator/Composer, ce dernier persiste à aller chercher les pages qu\'on édite sur le réseau local et non pas sur le site web distant...
Il faut, dans les options, forcer le paramétrage d\'écriture des liens relatifs (pour les liens internes).


seventies seventies
14 597 contributions
Membre depuis le 01/11/2003
Envoyé le 19/08/2005 à 12:47


Ok, compris.

Comme souvent, le meilleur logiciel est celui qu\'on connaît le mieux. C\'est pour ça que je persiste avec Frontpage, malgré ses défauts.

J\'essayerai un jour Dreamweaver, qui semble utilisé par de nombreux professionnels pour des petits projets.

Et pour s\'amuser un peu [:D] il faut repasser sur Word, inimitable pour détruire toute tentative de mise en page [:o)]
Il faut bien que je supporte deux ou trois chenilles si je veux connaître les papillons (A. de Saint-Exupery)
johannis johannis
19 917 contributions
Membre depuis le 10/10/2001
Envoyé le 19/08/2005 à 16:26


il faut repasser sur Word, inimitable pour détruire toute tentative de mise en page


tu vas rire : après quelques jours d\'expériences de ce type (pour voir), j\'ai définitivement viré word de mon ordi.
Je crois pourtant être un professionnel de l\'écriture (c\'est mon gagne-pain depuis 30 ans) : je n\'ai jamais utilisé que des t.d.t sous CP/M puis sous DOS et, depuis plus de dix ans, write 3.1 (oui, la version 16 bits, pas l\'infâme wordpad infoutu de justifier un texte), avec lequel j\'ai sorti sans problème des manuscrits parfois de plus de 2000 feuillets, plus Metapad pour le mode texte et Atlantis (un bijou de moins d\'un méga) pour lire les fichiers doc word, works, write, wordperfect et écrire en rtf.



Discussion trop ancienne

Cette discussion a été automatiquement fermée car elle n'a plus reçue de nouveau message depuis trop longtemps.

Nous vous suggérons de créer un nouveau message

« Retour sur la liste des messages de ce forum