Netteté de la police

Résolu/Fermé
niquedouille - 8 déc. 2009 à 23:36
 niquedouille - 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

14 réponses

monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 130
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/
https://a-pellegrini.developpez.com/tutoriels/xhtml-css/tableaux/
http://fr.selfhtml.org/
http://www.aliasdmc.fr/index.php
https://www.la-grange.net/w3c/xhtml1/
http://css.mammouthland.net/
https://www.alsacreations.com/tutoriels/

Il y en a bien sur une pléthore d'autre... à toi de chercher tes petits préférer ! ^^
1
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/traduction/tablevscss
0
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 130
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...
0
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
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.
0
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+
0
Salut

merci de votre attention, et vous avez raison, sans exemple, dur de m'aider..

Voici la maquette pdf :
http://www.jbbourgeois.com/Maquettes/Maquette_galleries.pdf

et voici le site (en cours.. là je bute sur la police.. j'aimerai résoudre ce probleme avant de poursuivre :))
http://www.jbbourgeois.com

merci
0
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475 > niquedouille
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.
0
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.
0
niquedouille > arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016
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..
0
Flachy Joe Messages postés 2103 Date d'inscription jeudi 16 septembre 2004 Statut Membre Dernière intervention 21 novembre 2023 260 > niquedouille
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...
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 130
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 ! ^^
0
Oups, c vrai qu'il manquait la balise html de départ :)
Sinon, à quoi correspond cette ligne :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Je n'ai pas fais de site web depuis quelques années, et là j'essaye de m'y remettre.. je n'avais jamais vu ça avant, mais c'est vrai que dreamweaver cs4 me l'ajoute systématiquement par défaut.

par contre, ça m'a foiré mon centrement verticale cette histoire là..

Bon, j'ai corrigé ça, et mis une police verdana sur le titre principale (jean baptiste bourgeois) ainsi que arial (pour le coup, ça semble être un bon choix, assez proche de helvetica_ultralight) sur "about me"
0
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213 > niquedouille
9 déc. 2009 à 19:58
La ligne ? C'est juste le doctype...
http://www.pompage.net/traduction/le-doctype-qu-il-vous-faut (3 fois rien ;) )

[edit : et depuis toutes ces années, on a aussi laissé tomber la mise en page par tableaux... ;) ]
0
Cephei Messages postés 118 Date d'inscription mercredi 9 décembre 2009 Statut Membre Dernière intervention 10 décembre 2018 19 > 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 !
0
niquedouille > Cephei Messages postés 118 Date d'inscription mercredi 9 décembre 2009 Statut Membre Dernière intervention 10 décembre 2018
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... :)
0
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 ?
0
Impli Messages postés 235 Date d'inscription mardi 24 novembre 2009 Statut Membre Dernière intervention 18 août 2013 34
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).


https://pbnaigeon.developpez.com/tutoriel/CSS-HTML/mise-en-page-CSS/
0
interessante comme approche, je vais m'y atteler.. :)
Le CSS permet-il aussi de créer une page dynamique ? J'utilise pour l'instant des iframes pour qu'un clic sur un lien modifie une partie de la page sans avoir à tout recharger.
0
Cephei Messages postés 118 Date d'inscription mercredi 9 décembre 2009 Statut Membre Dernière intervention 10 décembre 2018 19 > niquedouille
9 déc. 2009 à 21:04
Le CSS ne permet que de faire la "Peinture" (Styles)...
0
Impli Messages postés 235 Date d'inscription mardi 24 novembre 2009 Statut Membre Dernière intervention 18 août 2013 34 > 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.
0
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213 > 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.
0
Impli Messages postés 235 Date d'inscription mardi 24 novembre 2009 Statut Membre Dernière intervention 18 août 2013 34
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.
0
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
9 déc. 2009 à 21:52
Ah, que de saines lectures ! (pompage fait aussi partie de mes sites web de chevet ;) )
0
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
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.
0
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 :)
0
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
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
0
niquedouille
11 déc. 2009 à 23:10
lol,
ok, je m'y attèle et je corrige tout ça ! :)
0
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 130
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 !
0
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
0
niquedouille > 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
0
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
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 : https://openweb.eu.org/articles/puces_images par exemple
0
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.
0
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
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 ?
0
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
0
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
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é.
0
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 !
0