Netteté de la police [Résolu]

niquedouille - Dernière réponse le 12 déc. 2009 à 14:43

Bonjour,
Je travail actuellement sur un projet de site web perso. J'ai pour ce faire commencer par faire une maquette graphique sous inDesign, logiciel que je maitrise assez bien. Cela fais, j'ai attaqué la mise en page web, mais.. deception : alors que la police d'écriture assez fine (j'utilise la police helvetica, après réflexion, c'est peut etre une erreur, car pas forcement présente sur tout les ordinateur ? C'est pourtant une ancienne police) et je me rend compte que si l'affichage en pdf est parfait, il n'en est pas de même pour un affichage web : on a l'impression que la police est comme "pixellisée". Ca fait un peu le même effet que de passer d'illustrator à photoshop pour une même image..
Pourtant, je ne constate cet effet que sur ma page, et sur aucun autre site. J'aimerai donc savoir ce que j'ai fais de travers ?
merci à vous.
jb

Netteté de la police »

Suggestions

Netteté de la police
Police flou sur mon écran » Forum
Problèmes de netteté des polices Mdrk10 » Forum
Netteté des icones et polices sous win XP » Forum
Virus police nationale (Résolu) » Forum
Virus police nationale 100 euros » Forum

Plus

Réponse

monkey_monk 610Messages postés 1 juillet 2009Date d'inscription 27 mai 2012Dernière intervention 9 déc. 2009 à 21:42

La tendance actuelle est d'utiliser les balises HTML pour leur sens "sémantique", un tableau sert donc à afficher des données tabulaire. Les DIV quand à eux n'ont pas de sens sémantique et sont simplement des "container" permettant de grouper des données, et utilisé pour le positionnement via CSS.

Cette approche est donc une approche par "couche", on structure ses informations en leur donnant le plus de "sens" possible grace aux balises HTML (H1-H6, STRONG, EM, A, UL, LI, etc...) ensuite on les met en page avec le CSS. On termine accessoirement par des effets (visuels ou ergonomique) avec le Javascript.

Petite précision, il est coutume de dire qu'une vidéo, une page externe ou encore une image fait partie du "contenu" (et donc ont un sens sémantique) alors que les média (images ou autre) servant au "look" de la page sont superflu... on décidera donc de placer ces images via le CSS.

Tout ça en vue de laisser le formatage des données au choix de la plateforme (PC, Smartphone, etc...)

Pour ta question sur les IFRAME, elles ne sont plus utilisée en XHTML (mix entre l'HTML et le XML qui est le langage le plus "sémantique" ...en attendant l'HTML 5) et sont remplacée par l'utilisation de la balise OBJECT ...qui possède le sens sémantique "autre ressource extérieure" (en simplifiant ^^).

Pour finir, je ne saurais trop te conseiller de coder en XHTML 1 Strict + CSS2...

Voilà, j'espère que ça te permettra d'avancer ! ;)

Qques liens utiles :
http://xhtml.le-developpeur-web.com/
http://a-pellegrini.developpez.com/tutoriels/xhtml-css/tableaux/
http://fr.selfhtml.org/
http://www.aliasdmc.fr/
http://www.la-grange.net/w3c/xhtml1/
http://css.mammouthland.net/
http://www.alsacreations.com/tutoriels/

Il y en a bien sur une pléthore d'autre... à toi de chercher tes petits préférer ! ^^

Ajouter un commentaire

niquedouille - 9 déc. 2009 à 21:49

Mince, en moins d'1h, voilà toute mes connaissances chamboulées à jamais :)
Bon, heureusement pour moi, mon site n'en est qu'a un stade embryonnaire, il est donc temps pour moi de redemarrer correctement. Je comprend vraiment l'avantage des CSS par rapport au tableaux, et même s'il va falloir se réhabituer à une logique de conception différente, j'y gagnerai forcement..

Merci à tous pour ces infos, merci pour les liens (encore du boulot, ça tombe bien j'ai du temps libre en ce moment :)).

Un lien interessant, avec quelques brins d'humour : http://www.pompage.net/pompe/tablevscss/

Réponse

monkey_monk 610Messages postés 1 juillet 2009Date d'inscription 27 mai 2012Dernière intervention 9 déc. 2009 à 00:54

Difficile de te répondre sans un aperçu de la chose... mais effectivement le rendu Vectorisé n'est pas celui du Web !
On parle bien ici de pixel.

Donc attention à tes tailles de polices...

Ajouter un commentaire

Réponse

arthezius 2624Messages postés 15 mai 2008Date d'inscription 16 mai 2012Dernière intervention 9 déc. 2009 à 05:30

Pour définir la police on met ce code CSS:

font-family: arial, helvetica, sans-serif;

Mais en effet, sans voir ce que tu vois, on ne peux guère t'aider d'avantage.

Ajouter un commentaire - Site web

Réponse

nowayyoursay 9 déc. 2009 à 10:02

Salut,

il m'etait arivé la meme chose avec mon browser firefox pour une newsletter.
Je te conseil de completement fermer firefox (ou IE, mais bon IE ca craint (avis perso :)), tous les onglets que tu avoir actif (quit without saving tabs), vider ton cache et t'assurer que tu n'es pas en zoom (genre 101%)...

Si tu ne veux pas perdre tes onglets actifs, essaye ce je te dis au dessus et garde l'option de virer tous tes onglets en dernier :)

Pour moi ca a fcontionné et le problème a disparru.

Previens moi si ca fonctionne :)

a+

Ajouter un commentaire

Afficher les 8 commentaires

arthezius- 9 déc. 2009 à 18:23

Une police de type sans-serif serai plus proche de ce que je vois sur ton PDF qu'une police avec serif.
Met le code CSS que je t'ai indiqué précédemment et tu t'en rapprochera.

Une police de ce style est toujours plus agréable à lire à l'écran.

niquedouille - 9 déc. 2009 à 18:50

Salut

En fait, je pense que tu ne dois pas avoir la police helvetica sur ton ordi, car c'est une police sans empattement. En fait, c'est celle utilisée sur mon pdf.. et sur mon site.
Je ne trouve malheureusement pas mon bonheur dans les polices par défauts de windows (donc communes à tout les ordis).

ton code :
font-family: arial, helvetica, sans-serif;

Signifie que le navigateur affiche la police ARIAL si elle est présente sur l'ordinateur de la personne qui visite la page, ou bien HELVETICA en second choix.. ou n'importe quelle police sans empattement (serif) en dernier choix (si je ne me trompe pas). Je ne vois donc pas le rapport avec mon probleme..

Flachy Joe- 9 déc. 2009 à 19:51

les polices par défauts de windows (donc communes à tout les ordis).

Euh, le raccourci est un peu rapide : tu oublies ceux qui fonctionnent sous OSX, Linux ou autre.
Pour preuve un exemple de statistique de passage :

Windows XP 			58.22 %
Windows Vista			22.41 %
Mac OS 				8.32 %
Linux 				4.61 %
Windows Server 2003 		3.14 %
Windows 2000 			1.41 %
Unknown 			0.91 %
Windows NT 			0.53 %
Windows 98 			0.41 %
FreeBSD 			0.03 %

La solution serait simplement de faire des images si tu veux absolument une police donnée, sinon tu te satisfait d'un graphisme changeant...

niquedouille - 9 déc. 2009 à 19:56

Oui, c'est vrai que tu as raison, mais il existe bien des polices communes à tout ces systeme, non ? Et j'aimerai éviter les images.. autant optimiser l'affichage.

Cephei- 9 déc. 2009 à 19:59

Et non ...
Désolé de te décevoir !

notobe› niquedouille - 9 déc. 2009 à 19:56

Et bien un petit peu quand même, car tu ne déclares qu'une seule police, et exotique qui plus est.
Donc, essaye avec le code proposé, même en mettant helvetica en 1er (mais pas des HelveticaNeue etc.)

niquedouille - 9 déc. 2009 à 18:23

pour nowayyoursay> j'ai essayé la manip mais ça n'a rien changé. Je ne vois pas pourquoi cela changerait en fait, puisque le probleme est le même avec opera, ie ou firefox.. donc pas propre à firefox.

Réponse

monkey_monk 610Messages postés 1 juillet 2009Date d'inscription 27 mai 2012Dernière intervention 9 déc. 2009 à 19:30

Je viens de remarquer qu'il te manquait la balise d'ouverture de ton html ainsi qu'un doctype...
Ajoute au début de ton code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

et met une police de type Verdana ou sans-serif... et on verra déjà ce que ça donne ! ^^

Ajouter un commentaire

Afficher les 12 commentaires

notobe- 9 déc. 2009 à 19:58

La ligne ? C'est juste le doctype...
http://www.pompage.net/pompe/doctype/ (3 fois rien ;) )

[edit : et depuis toutes ces années, on a aussi laissé tomber la mise en page par tableaux... ;) ]

Cephei› niquedouille - 9 déc. 2009 à 20:03

Cette ligne sert a définir de quelle manière le naviguateur doit interpréter le (x)html ainsi que les styles défini dans ta page ...

Il y a le HTML, le XHTML TRANSITIONAL et le XHTML STRICT ...
Si tu passes de l'un a l'autre tu verras la présentation de ta page changer complètement !

C'est HYPER important de le définir et de savoir de quoi on parle ... sinon d'une version de naviguateur à l'autre ce ne sera pas la même page !

niquedouille - 9 déc. 2009 à 20:17

Merci pour ces précisions concernant le doctype :) décidement, j'ai du retard à rattraper.
Concernant mon problème de police, je pense qu'on peut dire que c'est résolu : il faut que je m'adapte avec les polices les plus courantes.

Ci-joint, un lien très interessant sur le sujet : http://www.webtraining.info/system/

notobe> si l'on ne fais plus de mise en page avec des tableaux, comment s'y prend t-on ? J'aimerai bien rattraper mon retard avant qu'il ne se creuse d'avantage... :)

Impli- 9 déc. 2009 à 20:21

Avec CSS (Cascading Sheet Style)

Pour plus d'infos -> http://fr.html.net/tutorials/css/

niquedouille - 9 déc. 2009 à 20:44

fantastique, voilà qui résout définitivement mon probleme :

- utilisation d'une police courante avec comme alternative une famille (exemple : sans serif)
- taille de la police définie en px et non en point (sous css)
- modification de la graisse, interlignage, interlettrage sous CSS à ma guise

merci !

Reste une dernière interrogation apparue dans cette "conversation" : si l'on utilise plus aujourd'hui les tableaux pour la mise en page, comment procède t-on (j'exclue le flash) ?

Cephei- 9 déc. 2009 à 21:01

Même si les div sont fortement recommendés, les tableaux ne sont pas interdit ! Si ? ^^

notobe› niquedouille - 9 déc. 2009 à 21:35

Impli a déjà répondu à la question, mais tu as toutes les réponses complémentaires sur le web :

Pourquoi il vaut mieux abandonner les tableaux :
http://openweb.eu.org/articles/problemes_tableaux

Construire un site :
http://www.siteduzero.com./tutoriel-3-13666-apprenez-a-creer-votre-site-web.html

Gabarits de pages :
http://www.alsacreations.com/static/gabarits/

Compatibilité polices multi-navigateurs :
http://openweb.eu.org/articles/compatibilite_taille_polices

Débuter en CSS
http://css.mammouthland.net/

etc. etc. :)

niquedouille › niquedouille - 9 déc. 2009 à 20:21

Concernant mon probleme de police, existe t-il un moyen, en CSS, de "modifier" une police, par exemple l'interlettrage, l'interlignage, la hauteur des caractères, etc .. comme dans indesign ?

Cephei- 9 déc. 2009 à 20:22

Non plus ...
Désolé !

Impli- 9 déc. 2009 à 20:24

Et si.

http://www.pompage.net/pompe/ameliorer_typographie

Cephei- 9 déc. 2009 à 20:59

Pardon, j'avais mal lu la question ...
J'étais resté sur l'histoire de la pixélisation des polices différente en fonction des naviguateurs !

Réponse

Impli 98Messages postés 24 novembre 2009Date d'inscription 9 déc. 2009 à 20:51

Tu fais ta mise en page en utilisant des <div></div>, ensuite tu définis l'ensemble de leur proprieté (hauteur, largeur, bordure éventuelle, image de fond, ..) via CSS.

Le CSS facilite grandement la vie pour la mise en page (en plus d'être on ne peut plus simple à maîtriser).

http://pbnaigeon.developpez.com/tutoriel/CSS-HTML/mise-en-page-CSS/

Ajouter un commentaire

Afficher les 4 commentaires

Cephei- 9 déc. 2009 à 21:04

Le CSS ne permet que de faire la "Peinture" (Styles)...

Impli› niquedouille - 9 déc. 2009 à 21:05

Pour l'instant non, il faut faire un mélange de HTML et de JavaScript pour obtenur ce genre de résultats sans user des iframes.

notobe› niquedouille - 9 déc. 2009 à 21:30

js... moui, mais surtout php qui est interprété côté serveur, et non client, ce qui permet normalement d'avoir le même comportement dynamique quelque soit la config du client.

Réponse

Impli 98Messages postés 24 novembre 2009Date d'inscription 9 déc. 2009 à 21:34

pour qu'un clic sur un lien modifie une partie de la page sans avoir à tout recharger.
Voilà pourquoi je parlais de JS.

Après c'est sûr que pour du dynamisme, rien ne vaut PHP.

Ajouter un commentaire

Réponse

notobe 1454Messages postés 11 novembre 2009Date d'inscription 8 juillet 2011Dernière intervention 9 déc. 2009 à 21:52

Ah, que de saines lectures ! (pompage fait aussi partie de mes sites web de chevet ;) )

Ajouter un commentaire

Réponse

arthezius 2624Messages postés 15 mai 2008Date d'inscription 16 mai 2012Dernière intervention 9 déc. 2009 à 23:44

En fait CSS ça reprends en un sens le principe des feuilles de style d'Indesign.
Si tu rajoutes à ça une structure de base gérer par PHP tu aura le principe des gabarits d'Indesign à savoir un structure qui ne bougera pas et seulement le contenu qui évoluera suivant ce que tu souhaites faire apparaitre.

Ajouter un commentaire - Site web

niquedouille - 11 déc. 2009 à 22:54

Bon, ba voilà, c'est mieux non ?

http://www.jbbourgeois.com/

merci à tous pour vos conseils ! Le reste devrait aller plus vite maintenant :)

Réponse

notobe 1454Messages postés 11 novembre 2009Date d'inscription 8 juillet 2011Dernière intervention 11 déc. 2009 à 23:01

Ah oui ! beaucoup mieux ! :)))

Bon reste quelques petites choses : un brin de sémantique ne ferait point de mal pour éviter la div-soupe (faut pas oublier les h1, h2, p, ul, etc) ; et quelques erreurs de validation : http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.jbbourgeois.com%2F

Ajouter un commentaire

niquedouille - 11 déc. 2009 à 23:10

lol,
ok, je m'y attèle et je corrige tout ça ! :)

Réponse

monkey_monk 610Messages postés 1 juillet 2009Date d'inscription 27 mai 2012Dernière intervention 11 déc. 2009 à 23:35

Effectivement, il n'y a pas du tout de balises sémantique dans ton code... comme le dit notobe, n'oublie les autres balises ! Les div ne servent qu'en dernier recourt lorsqu'il n'y a pas d'alternative normale.
Ta navigation n'a pas besoin d'etre dans un div, un menu est une liste de lien donc utilise ul, li et a !
Le reste doit suivre la même logique ! ;)

Bon travail !

Ajouter un commentaire

niquedouille - 12 déc. 2009 à 11:40

Bon, je pense avoir à peu près pigé le truc pour les h1 h2 li etc. mais mais mais... tout marchait bcp mieux avec des divs partout :'(

http://www.jbbourgeois.com/

Je n'arrive plus à aligner h1 (JEAN-BAPTISTE) ; h2 (PERSONAL WEBSITE) ; et ul (aboutme | my work | galleries | contacts) alors que j'utilise les mêmes paramètres que pour mes précedents div.. :(

http://www.jbbourgeois.com/index.php
http://www.jbbourgeois.com/styles.css

niquedouille - 12 déc. 2009 à 11:53

allez savoir pourquoi, après avoir galeré 2h sur cette conneries, c'est 1 minutes après avoir posté que je découvre le pourquoi du comment : les marges par défaut de hx et ul...
dsl

Réponse

notobe 1454Messages postés 11 novembre 2009Date d'inscription 8 juillet 2011Dernière intervention 12 déc. 2009 à 11:59

A #container rajoute margin:auto

Et pour la liste à puces, il y a des moyens plus astucieux pour mettre des images à la place des puces par défaut grâce au css. Voir ici : http://openweb.eu.org/articles/puces_images par exemple

Ajouter un commentaire

niquedouille - 12 déc. 2009 à 12:14

pour margin:auto, je suppose que c'est pour centrer la page ?
Cette solution ne marche qu'horizontalement, j'ai opté pour la solution des marges négatives pour centrer ma page horizontalement et verticalement.
Je l'ai désactivé le temps de travailler sur le reste, car pour une raison que j'ignore, cela provoque un bug d'affichage dans dreamweaver, je ne vois plus la partie haute de ma page dans la partie creation (pourtant l'apercu fonctionne).

merci pour les puces images.. c'est super évolué ce langage :)

là, mon probleme concerne la hauteur des bordures oranges du menu en haut à gauche. Auparavant, ma boite div qui contenait le texte du menu, ainsi que la bordure avait une hauteur de 10px. Maintenant avec ma balise ul, impossible de faire pareil : la bordure fait toute la hauteur du texte.

Réponse

notobe 1454Messages postés 11 novembre 2009Date d'inscription 8 juillet 2011Dernière intervention 12 déc. 2009 à 13:27

oui, margin:auto c'est pour le centrage horizontal.
Pour un centrage vertical, j'ai plus de réserves... C'est difficile de faire quelque chose qui fonctionne dans toutes les résolutions d'écrans.

Sinon, je ne comprends pas bien ton pb de bordures... je vais aller voir ton site pour comprendre...

[edit]
Juste un truc rapidos : les images que tu as utilisé pour tes puces sont trop grandes : il faut que tu les retravailles.
Autre astuce : déclare tes polices de caractère uniquement dans le body : par héritage, cela se répercutera dans tous les autres éléments.

[edit2] Je vois bien les bordures oranges, et ce que je vois ne me choque pas... c'est même bien. Qu'est-ce qui ne te plait pas ?

Ajouter un commentaire

niquedouille - 12 déc. 2009 à 13:58

Pour le centrage verticale, effectivement il ne semble pas éxister de solution miracle. C'est dommage, il éxiste quand meme de nombreux site composés de cette manière !

Pour la taille des flêches, j'avais déjà corrigé le probleme, essaye de rafraichir la page dans ton navigateur, peut etre qu'il n'a pas rechargé le fichier que j'ai modifié.

Pour les polices : merci.. :)

Pour le probleme des bordures, voici 2 images :

Sous internet explorer 6.0
http://img683.imageshack.us/img683/1048/sitesousie.jpg

Sous mozilla 3.5.5, opera 9.64 et chrome 3
http://img193.imageshack.us/img193/1166/siteautresnav.jpg

Réponse

notobe 1454Messages postés 11 novembre 2009Date d'inscription 8 juillet 2011Dernière intervention 12 déc. 2009 à 14:16

Les puces, c'est bon (fait un ctrl F5)

Alors tes bordures... moui...
Perso je la trouve très bien ta page : sobre, claire... comme je les aime.

Enfin ce que font les navigateurs (hors IE6) est un comportement normal.
Toutes tes marges intérieures sont déjà à zéro... Il y a peut-être une solution, mais euh... Est-ce bien important ?
Enfin, je ne suis pas graphiste, mon avis est donc forcément tronqué.

Ajouter un commentaire

niquedouille - 12 déc. 2009 à 14:43

viii très important ;)
Enfin, c'est un peu du détail, mais c'est un ensemble de détail.. donc chacun ont leur importance :)
Bon bien sur je ne vais pas passer 6 ans jour et nuit pour ça, mais si tu as une solution... je suis preneur !

Merci pour ton avis sur la page !

Répondre au sujet

Posez votre question

Dossier à la une

Passage au tout numérique : quel coût pour les particuliers ?

Passage au tout numérique : quel coût pour les particuliers ?

Combien cela coûte-t-il au total ? Quelles aides apportent l'état et les acteurs du marché pour alléger cette charge non choisie ? Tous les détails sur Commentçamarche.net.

Netteté de la police [Résolu]

Netteté de la police »

Passage au tout numérique : quel coût pour les particuliers ?