Catégorie: "HTML & CSS"

"Afficher la source" dans Internet Explorer

Tout d'abord on dit "afficher le source" car on parle bien du code source!
Mais la véritable irritation ne vient pas de là (car mon IE en anglais et dit donc "View Source" comme il se doit). La véritable irritation c'est qu'un beau jour cette fonction s'arrête de fonctionner, sans que l'on sache pourquoi. On clique et il ne se passe rien... pas de message d'erreur, RIEN! Et sur le support en ligne MSDN c'est quasiment la même chose RIEN! (en fait, ils vous rabâchent qu'il faut que Notepad (le bloc-notes) soit installé pour que ça marche... mais qui désinstalle Notepad?)

Et aujourd'hui, oh bonheur, je tombe sur la solution presque par hasard: j'avais trop de "fichiers internet temporaires"! J'ai fait le ménage et réduit la taille qui leur est allouée sur le disque dur et plop, voilà, tout à coup, instantanément, je peux à nouveau afficher LE code source!

Accessibilité: pourquoi? pour quoi?

Dans Plongez dans l'accessibilité - 30 jours pour rendre un site web plus accessible, Mark Pilgrim (traduction Karl Dubost) explique un certain nombre de règles simples permettant de rendre un site web (en l'occurrence un weblog) plus accessible ainsi que les bénéfices que vont pouvoir en tirer certaines personnes souffrant de handicaps physiques, mentaux ou technologiques...

Toutefois, je pense que l'accessibilité bénéficie à une population beaucoup plus large que les personnes handicapées. Tout le monde en bénéficie! En effet, en appliquant les techniques d'accessibilité votre site bénéficie automatiquement des avantages suivants:

  • Il sera mieux indexé et mieux référencé dans les moteurs de recherche
  • Il pourra être projeté dans une sale de réunion sans être illisible car écrit trop petit
  • Il pourra être consulté sur un téléviseur (webTV)
  • Il pourra être consulté sur un PDA ou un téléphone mobile
  • Il pourra être imprimé correctement
  • Il sera plus agréable à lire pour les utilisateurs assidus qui voudront probablement régler la taille des caractères en focntion de leur niveau de fatigue visuelle ou de la résolution de leur écran
  • Et j'en oublie...

PS: Evidemment, ça prend un peu de temps... d'ailleurs, moi même j'ai encore pas mal de choses à améliorer de ce point de vue...

Sans oublier l'imprimabilité ;)

Dans la suite logique de l'accessibilité, il est tout aussi important de veiller à la bonne impression de vos pages... pour tous ceux qui ne sont toujours pas prêts de s'habituer à lire sur écran et ils sont nombreux, comme le rappelle judicieusement pompage.net ce mois ci, explications à l'appui.

Deux petites astuces tout de même pour ceux qui peinent à lire sur écran:

  1. apprenez à régler la fréquence de rafraichissement de votre écran à plus de 60 Hz! Cette valeur par défaut est scandaleusement basse par rapport aux possibilités du matériel actuel. En passant, ne serait-ce qu'à 75 Hz, la diminution du scientillement aura un effet non négligeable sur votre fatigue visuelle.
  2. essayez l'écran plat! De préférence avec une connexion DVI (numérique) plutôt que VGA (analogique) afin de garantir une netteté optimale. là encore, le gain de confort va de pair avec la diminution de fatigue visuelle.

Accessibilité, Enfin!

Le sujet est dans l'air, on en parle sur StandBlog, chez Russell Beattie, plusieurs autres blogs et même le Journal du Net. C'est plutôt une bonne chose que l'on commence à s'en préoccuper un peu dans notre pays, même si nous n'avons pas de lois pour nous y obliger comme aux US... L'intérêt de rendre un site web plus accessible va d'ailleurs bien au delà du fait qu'il devienne plus accessible aux handicapés! En effet, combien de sites, designés par une agence quelconque, vous affichent des pavés de texte écrits en 6 points (ou encore 8 pixels de hauteur), vous forçant à vous rapprocher de votre écran pour pouvoir lire ce qui est écrit? Mais voyez vous... il parait que c'est plus design... Moi ça me rappelle plutôt les conditions générales de ventes imprimées de manière illisible au verso des bons de commande! Messieurs les créatifs, vous n'avez rien compris! Les lecteurs ne peuvent pas passer leurs journées à lire des tous petits caractères... (et pour les conditions de vente, figurez vous que c'est fait exprès! ;)


Il est important également de constater le fait que vous pouvez effectivement lire des petits caractères... mais que celà devient de plus en plus pénible au fur et à mesure que la journée avance et que la fatigue s'accumule... C'est également plus gênant lorsque le texte à lire est long: on ne peut pas lire un white paper en tout petit même si on peut le faire sans problème pour une brêve.


S'ajoutent à celà, les critères purement techniques de résolution d'écran utilisée par le lecteur. Un écran d'ordinateur affiche probablement entre 60 et 120 points par pouce selon la résolution et la taille de l'écran. Par exemple, des caractères de 12 points seront bien plus gros sur un écran 19 pouces configuré en 800*600 que sur un écran de portable de 15 pouces configuré en 1600*1200!


En fait, la bonne taille de caractères dépend donc intimement de la situation de chacun et il semble dès lors extrêmement prétentieux de vouloir déterminer à l'avance la taille dans laquelle l'utilisateur voudra lire un texte.


Les browsers web permettent depuis assez longtemps de changer la taille des caractères... ce qui fût bien agréable pendant une certaine époque... avant que n'apparaissent les feuilles de styles! Celles-ci ont en effet tendance à figer la taille des caractères quelle que soit la taille réglée dans le menu du navigateur. C'est surtout le cas de Internet Explorer (même en version 6) alors que Netscape 7 par exemple, s'affranchit finalement assez bien du problème.


Pourtant, il existe une solution relativement universelle: n'indiquer dans les CSS que des tailles de caractères sous forme de pourcentages! Ils pourront dès lors être redimensionnés à loisir par l'utilisateur.


A ce propos, connaissez vous les raccourcis clavier bien pratiques? Sous Netscape, faites Ctrl + pour augmenter la taille et Ctrl - pour la diminuer. Sous Internet Explorer, maintenez la touche Ctrl pendant que vous tournez la molette de la souris!

Essayez sur cette page, vous verrez!

Les Feuilles de Style

Les Feuilles de Style

[NDA: Article écrit en Janvier 1997, publié dans le magazine Planète INTERNET]

Les feuilles de style sont la réponse "propre" à tous ceux qui ont imaginé faire de la mise en page avec le langage HTML. Elles permettent non seulement de redéfinir l'aspect des différents éléments du langage HTML mais également de créer une multitude de styles supplémentaires afin d'assouvir les exigences les plus extrêmes des "maquettistes du Web".

Contexte

A son origine, le langage HTML avait été créé pour permettre de donner une structure sémantique aux documents du WWW. Cependant, les derniers 18 mois ont vu l'arrivée massive d'extensions destinées au formatage physique de ces mêmes documents, au point de dénaturer complètement le langage. L'une des principales raisons d'être des feuilles de style (style sheets en anglais), est de stopper la prolifération de ces nouveaux marqueurs HTML tels que <FONT> ou d'attributs tels que BGCOLOR ou PADDING...

Mais les feuilles de style permettent d'aller encore plus loin. Elles vous permettent de définir une "maquette" pour l'ensemble de votre site web et de l'appliquer automatiquement à toutes vos pages. Il suffit pour cela de définir votre feuille de style dans un fichier portant l'extension .css (Cascading Style Sheet) et d'y faire référence depuis toutes vos pages HTML. Ces styles peuvent ensuite être combinés pour modifier légèrement le look d'une page donnée par rapport à la norme. La norme prévoit également de donner le choix à l'utilisateur, des feuilles de styles qu'il désire appliquer à un document.

Néanmoins, à ce jour, seul Microsoft a implémenté un sous ensemble des feuilles de style dans son Internet Explorer version 3.0. Mais Netscape travaille activement à les intégrer dans Navigator 4 dont une première bêta vient de sortir. Spyglass a également annoncé qu'il supporterait les feuilles de style dans son prochain browser.

Principe de fonctionnement

Les feuilles de styles vous permettent de redéfinir complètement la manière dont s'affichent les différents éléments structurels d'une page HTML. Ainsi, vous pouvez redéfinir de quelle manière s'affiche un paragraphe standard, un titre de niveau 2 ou encore une liste numérotée. Mais les feuilles de style vous permettent également de définir de nouveaux styles, comme dans notre exemple où nous définissons la classe "chapo" pour les paragraphes d'introduction de notre document.

Pour définir la feuille de style, nous disposons de plusieurs méthodes: soit nous définissons les styles à la volée lorsque nous utilisons un marqueur, soit nous faisons référence à une feuille de style externe, soit nous incluons le style dans la section HEAD de notre page. Cette dernière méthode est celle que nous utilisons dans nos exemples.

Un exemple

Parmi les illustrations de cet article, vous pouvez apercevoir trois captures d'une même page HTML sur laquelle on a appliqué des feuilles de style différentes. La copie d'écran la plus austère est du HTML brut, sans aucun style appliqué.

Vous trouverez ci dessous le code source de l'une de ces pages:

<HTML>
     <HEAD>
     <TITLE>Page avec feuille de style</TITLE>
     <STYLE TYPE="text/css">
     <!--
     BODY { background: white }
     H1, H2, H3 { font-family: Playbill, fancy }
     H1 { color: brown; font-size: 72; text-align: center; text-decoration: underline }
     H2 { color: maroon; font-size: 48 }
     P { font-family: serif; margin-left: 12% }
     P.chapo { font-size: large }
     -->
     </STYLE>
     </HEAD>
     <BODY>
     <H1>Les feuilles de style</H1>
     <H2>De la PAO sur le Web!</H2>
	 
     <P class="chapo">Les feuilles de style sont la réponse "propre" à tous ceux qui
     ont imaginé faire de la mise en page avec le langage HTML. Elles permettent non
     seulement de redéfinir l'aspect des différents éléments du langage HTML 
     mais également de créer une multitude de styles supplémentaires afin
     d'assouvir les exigences les plus extrêmes des "maquettistes du Web".</P>
	 
     <H2>Contexte</H2>
	 
     <P>A son origine, le langage HTML avait été créé pour permettre de donner une 
     structure sémantique aux documents du WWW. Cependant, les derniers 18 mois 
     ont vu l'arrivée massive d'extensions destinés au formatage physique de ces 
     mêmes documents, au point de dénaturer complètement le langage. L'une des
     principales raisons d'être des feuilles de style (style sheets en anglais),      
     est de stopper la prolifération de ces nouveaux marqueurs HTML tels que
     &lt;FONT&gt; ou d'attributs tels que BGCOLOR ou PADDING...</P>
	 
     </BODY>
</HTML>

Vous pouvez découvrir la définition de la feuille de style entre les marqueurs <STYLE> et </STYLE>. Cette définition est incluse dans un commentaire HTML (<!-- ... -->) afin qu'un browser n'ayant pas connaissance des feuilles de style n'affiche pas de texte indésirable.

Vous pouvez constater qu'on redéfinit le style d'affichage des éléments <BODY><H1><H2><H3> et <P>. On définit également une nouvelle classe pour l'élément <P> que l'on nomme "chapo". Les styles redéfinis sont pris en compte automatiquement pour toute la page. Par contre, pour utiliser la classe chapo, nous sommes obligé de préciserCLASS="chapo" dans le marqueur <P> commençant le paragraphe concerné. La classe "chapo" s'applique alors jusqu'au marqueur </P> qui suit.

Si vous voulez appliquer une classe à une zone plus étendue, il vous suffit de délimiter cette zone au moyen des marqueurs suivants:

<DIV class="chapo">
   vos paragraphes....
</DIV>

Comme nous l'avons évoqué plus haut vous pouvez également définir un style "à la volée" comme ceci:

<DIV STYLE="font-size: large">
     vos paragraphes....
</DIV>

Parmi les attributs que nous avons redéfini on trouve la couleur des caractères (color: <code couleur>), la couleur de fond (background: <code couleur>), la taille des caractères (font-size: <taille>), l'alignement du texte (text-align: [left | right | center]) ou encore la police de caractères à utiliser (font-family: <liste de noms>).

On retombe ici dans l'éternel problème de nommage des polices de caractères. Vous pouvez donc préciser une liste de noms séparés par des virgules en espérant tomber sur un nom de police installée sur le poste du client. Néanmoins, il est recommandé de terminer la liste par un nom générique qui sera reconnu par tous les clients. Ces noms génériques sont:serif (avec empattement), sans-serif (sans empattement), cursivefantasy, et monospace (type courrier).

Un autre exemple

Vous trouverez ci dessous la définition de l'autre feuille de style utilisée dans nos exemples:

 <STYLE TYPE="text/css">
 <!--
     BODY { background: #FFFFE0 }
     H1, H2, H3 { font-family: monospace, font-style: italic }
     H1 { color: red; text-align: center }
     H2 { color: #FFFFE0; background: red; text-align: right }
     P { font-family: sans-serif; margin-left: 12%; margin-right: 12%; text-align: right }
     P.chapo { color: gray; font-weight: bold }
 -->
 </STYLE>

Comme vous pouvez le constater, il suffit de faire quelques modifications au niveau du style pour changer complètement l'aspect du document affiché.

Images de fond

Autre avantage des style sheets: le désormais [NDA: tristement] traditionnel attribut BACKGROUND du marqueur<BODY> est remplacé par une syntaxe bien plus riche en possibilités. En effet: non seulement, vous pouvez appliquer l'attribut background à virtuellement n'importe quel élément HTML, mais de plus, si vous choisissez d'afficher une image de fond, vous pouvez contrôler précisément de quelle manière celle-ci doit être répétée.

Pour indiquer une couleur de fond, la syntaxe est triviale:

 {background: red}
 {background: #6633FF}

Par contre, pour une image, c'est un tout petit peu plus complexe:

 {background: url(http://www.domaine/image.gif)}

Faut-il utiliser les feuilles de style ou non?

Après ces quelques exemples d'application des feuilles de style, il est encore possible d'hésiter à les utiliser par rapport aux diverses extensions HTML qui sont déjà bien implantées. On peut même être tenté de mélanger les deux afin de profiter du maximum de possibilités offertes.

Néanmoins, d'ici quelques mois, vous reviendrez probablement naturellement à un code HTML plus pur et vous en exclurez tout ce qui ne concerne pas la structure même du document alors que les feuilles de styles vous offriront des possibilités inégalées en termes de mise en page et de contrôle de l'affichage.

[NDA: A ce jour, en 2002, la question ne se pose absolument plus: OUI il FAUT utiliser les feuilles de style, et RIEN QUE CA!]

Post complet »