Sertir un câble RJ45

Depuis peu, j’ai refait le câblage de mon petit réseau. Un peu marre de voir ses câbles dépasser ou pendre à certains endroits. Un ami électricien m’a fourni une bobine de câble réseau UTP (paire torsadée non blindée) et les outils. J’ai acheté les sucres dans un magasin informatique. Au final, rien de bien compliqué.

Couper le câble à la longueur souhaitée avec une pince coupante. Avec un cutter, dénuder le fil sur un bon centimètre pour faire apparaître les 8 câbles de couleurs différentes. Le petit truc consiste à faire tourner le plastique protecteur sur lui-même pour le retirer plus facilement. Attention à ne pas entailler les fils. Les couleurs sont très importantes pour la suite.

RJ45 dénudé
RJ45 dénudé

Mettre les fils dans le bon ordre suivant le schéma du RJ45. Dans mon cas, ils sont destinés à relier un ordinateur au routeur ou switch. Donc, j’ai besoin du schéma du câble droit. Si vous regardez bien, les câbles sont rangés par paires de couleurs. Exception de la paire orange qui vient encadrer la paire bleue. Le câble croisé sert à relier directement deux ordinateurs sans passer par un switch, mais il est surtout utilisé pour relier en guirlande des hub et switch.

Schéma du RJ45

Tirer bien fort avec le bout des doigts pour que les fils soient droits sinon ils se recroquevilleront dans le connecteur. Couper les bouts à la pince pour les aligner.

Fils de couleur
Fils de couleur dans l’ordre

Faire entrer les câbles dans le connecteur RJ45 et bien enfoncer. Vérifier à l’œil que chaque fil est dans son canal et qu’il arrive jusqu’au bout sinon la connexion ne se fera pas. Vérifier que les couleurs sont dans le même ordre d’un côté du câble comme de l’autre. À l’aide d’une pince à sertir (à utiliser dans le bon sens !), enfoncer le connecteur câblé et presser fort.

Sertir RJ45
Sertir le RJ45 à la pince

Enfin, vérifier le câble RJ45 avec un testeur. Il en existe de différentes sortes. Dans mon cas, il suffit de brancher les extrémités dans l’appareil, l’allumer et de vérifier une correspondance dans les témoins lumineux. Les 8 témoins doivent s’allumer successivement dans le même ordre des deux côtés. Votre câble est prêt à l’emploi.

Tester les câbles
Tester les câbles

Publicités

Des abréviations avec WordPress

Il y a des tâches répétitives dont on se passerait bien dans la rédaction des billets. C’est le cas des libellés dans les abréviations. J’ai pris l’habitude de donner la signification en clair dans le texte (ergonomie, référencement) et de l’ajouter dans l’attribut title de la balise abbr pour toutes les occurrences suivantes.

Je viens de trouver une extension intéressante pour WordPress: Acronyms. Installez le plugin et une liste d’abréviations, acronymes s’ajoutent par défaut. Concrètement, comment ça se passe ? Rédigez votre note – sans vous soucier de la signification des sigles – et WP se charge d’ajouter les titres aux acronymes pour autant qu’ils soient présents dans sa liste. Évidemment cette liste est personnalisable selon vos besoins.

Abréviation Signification
ADSL Asymmetrical Digital Subscriber Line (voir RNA)
AFNIC Association Française pour le Nommage Internet en Coopération
ANSI American National Standard Institute
ASCII American Standard Code for Information Interchange
CC Carbon Copy
CCI Copie Carbone Invisible
CD Compact Disk
CMJN Cyan Magenta Jaune Noir
CMYK Cyan Magenta Yellow Black
CNIL Commission Nationale de l’Informatique et des Libertés
Codec COdeur-DÉcodeur
CRT Cathodic Ray Tube
CSS Cascading Style Sheet
DRM Digital Rights Management
DTD Document Type Definition
DVD Digital Versatile Disk
FAI Fournisseur d’Accès à Internet
FAQ Frequently Asked Questions
FTP File Transfer Protocol
GMT Greenwich Mean Time
GPL General Public License
HTML HyperText Markup Language
ICANN Internet Corporation for Assigned Names and Numbers
IP Internet Protocol
IRC Internet Relay Chat
ISO International Standard Organization
LAN Local Area Network
LEN Loi sur l’Économie Numérique
MIME Multipurpose Internet Mail Extension
MSIE Microsoft Internet Explorer
MSN Microsoft Network
OS Operating System
OOo OpenOffice.org
P2P Peer to Peer
PC Personal Computer
PDF Portable Document Format
PHP Hypertext Preprocessor
POP Post Office Protocol
RGB Red Green Blue
RSS Rich Site Summary
SMS Short Message Service
SMTP Simple Mail Transfer Protocol
SVG Scalable Vector Graphics
TCP/IP Transmission Control / Internet Protocol
URI Universal Resource Identifier
URL Uniform Resource Locator
UTF Unicode Transformation Format
W3C World Wide Web Consortium
WOFF Web Open Font Format
WYSIWYG What You See Is What You Get
XML eXtensible Markup Language

L’outil n’est pas parfait. Premièrement, il n’accepte pas les chiffres (B2B) ou les caractères spéciaux (TCP/IP). Deuxièmement, il ne fait pas la distinction entre une abréviation et un acronyme. Troisièmement, une abréviation ne peut contenir plusieurs significations: le ROI (Return On Investment) d’une société n’est pas le ROI (Règlement d’Ordre Intérieur) d’un établissement scolaire. Enfin, il ne spécifie pas la langue de l’acronyme dont se servent les lecteurs d’écran pour prononcer correctement les mots.

Mise à jour (03/12/10) — Finalement, j’ai décidé de ne plus utiliser cette extension WordPress. Je préfère ajouter la signification entre parenthèses après la première occurrence uniquement. La répétition systématique du title sur une même abréviation pose problème à l’impression. Dans un article sur la taxe des nouveaux supports de stockage, le mot USB est repris à 4 reprises dans l’article. Dans ma feuille de style pour l’impression, j’ai précisé d’ajouter la signification de tous les sigles. Du coup, la lecture de l’article sur papier devient désagréable.

Écran: 4/3 vs 16/9

Habitué au bon vieux 4/3, je suis toujours étonné de voir les nouveaux écrans se tasser. Le remplacement des écrans plats va inévitablement jeter le 4/3 aux oubliettes. Hérité des débuts du cinéma, ce format a servi les 50 années du cathodique. Alors, désuet le 1,33 ?

Le champ visuel d’un être humain est très large. Il est le résultat d’une évidence morphologique: nos yeux sont placés sur un axe horizontal. De cette manière, nous avons un angle de vue très large mais limité en hauteur. J’en déduis que ce changement de format est une adaptation plus conforme à notre morphologie. Dans sa documentation[¹], le constructeur NEC confirme:

La vision de l’homme s’oriente naturellement plutôt en largeur qu’en hauteur et les experts en ergonomie recommandent le format large depuis longtemps. Dans un cadre professionnel, l’utilisation d’écrans larges facilite l’exécution des tâches à l’écran et participe ainsi à l’accroissement de la productivité. NEC

Les utilisateurs actuels sont de plus en plus multitâches. De nombreuses applications tournent en même temps et nécessitent un espace de travail en conséquence. Pour ma part, j’utilise un double écran. Une habitude depuis mes cours d’infographie. Je peux, par exemple, travailler un photomontage dans Photoshop sur mon 19″ et aller chercher des images grâce à l’autre écran. Jouer d’un côté et rechercher une information sur un forum d’autre part.

La télévision n’a plus le monopole du DVD au détriment de la convivialité. Le format 16/9 est proche des formats cinématographiques actuels. Les derniers jeux vidéos sont d’ailleurs vendus pour être affichés sur ce format tout comme de nombreuses émissions télévisées. Le 16/9e est également un avantage pour le traitement vidéo puisqu’il permet d’afficher une timeline bien plus longue. Au niveau bureautique, les écrans amovibles peuvent pivoter pour simuler une feuille A4.

Reste à voir si ces écrans extra larges répondent à tous les usages. À en juger les ventes, les utilisateurs sont plutôt satisfaits de leur achat. Peu de consommateurs se plaignent du format. Aussi, j’ai du mal à croire que seule la dynamique économique motive les constructeurs à produire des dalles moins chères en 16/9.

Pour ceux qui ne se retrouvent pas, j’ai repris un graphique avec les différents formats. Entre 5/4, 11/9, 1,33… il y a de quoi se perdre. Et si ce n’est toujours pas clair, regardez l’animation sur les formats d’Arte[²].

Aperçu des différents formats sur écran

Le 16/9 a un rapport de 1,78/1 ou 1,78 pour faire court. C’est un format TV et, contrairement à ce que beaucoup pensent, ce n’est pas un format de projection cinématographique. Les formats ciné sont généralement plus larges et l’écran TV 16/9 convient mieux. Par contre, un film enregistré avec un rapport de 1,66 laisse apparaître deux bandes noires sur les côtés gauche et droit. En 1,85 ou 2,35 les bandes sont visibles en haut et en bas de l’écran pour éviter de déformer l’image source. Plus la valeur du rapport est grande, plus les bandes sont imposantes.

[¹] Mise à jour (12/04/10): lien brisé supprimé
[²] « Le truc » sur Arte (choisir le lien à gauche sur les formats).

Débusquer les liens morts

Le web est perpétuellement en mouvement. Les pages naissent et disparaissent aussi vite. En tant qu’administrateur de site, il est important de surveiller de près la validité des liens. Ce sont des liens internes (vers vos pages, vos images) ou des liens externes (vers d’autres sites, des ressources). Un travail de veille est important pour débusquer les erreurs de type 404. En théorie, aucun lien pointant vers votre contenu ne devrait fausse route. Pensez à rediriger le trafic pour ne pas perdre des visiteurs inutilement.

Les liens sur vos pages

Premier cas de figure. Passionné de musique, vous écrivez un article sur les instruments de percussion. En fin d’article, vous conseillez la lecture vers la page d’un ami: rytmes.com/percussion/. Ce lien est-il fonctionnel ? Si oui, vous n’avez aucune garantie à court, moyen et long terme. Quelles sont les causes d’erreur ?

  • vous avez fait une erreur de frappe, ce n’est pas rytmes mais rythmes
  • l’auteur a changé de nom de domaine
  • l’auteur a décidé d’ajouter une catégorie: rythmes.com/instruments/percussion/
  • l’auteur a déplacé, renommé, supprimé le fichier ou le dossier
  • l’auteur n’autorise plus l’accès public/gratuit à la page

Il n’est pas réaliste de vérifier régulièrement chaque lien manuellement. Un gestionnaire de sites comme Dreamweaver est capable de vérifier tous ces liens. La correction est rapide et efficace pour les liens internes. Pour ce qui est des liens externes, il faudra repasser avec un logiciel plus performant.

Link Examiner est le compagnon idéal pour cette tâche ingrate de vérification des liens. Il est propre dans ses résultats et le tableau est riche: code HTTP, nofollow, mots-clés, description, titre, temps d’accès, niveau de profondeur… Il lui manque juste un scan programmé de manière périodique.

Rapport Link Examiner
Link Examiner marque les liens brisés en rouge

Prudence dans l’interprétation des erreurs. Un code 404 signifie que la requête n’a pas abouti. La page a sans doute été supprimée mais il peut s’agir aussi d’une coupure temporaire. Ne supprimez pas trop vite les erreurs. Aussi, un code de validité ne signifie pas forcément que le lien pointe vers la ressource en question. Dans mon exemple, l’auteur n’a pas pris la peine de renouveler le nom de domaine. Une société de téléphonie reprend l’hébergement et profite du trafic pour suggérer de la publicité. Votre lien est fonctionnel mais il pointe vers un contenu erroné. Dans ce cas précis, il est difficile de trouver la parade.

Les vidéos intégrées (Youtube, Dailymotion) sont également difficiles à maintenir à jour. Ce contenu multimédia est une bonne idée pour enrichir son blog mais quid de sa pérennité ? Il n’est pas rare de voir un contenu supprimé, bien souvent pour des questions de droits d’auteur, sans aucun avertissement. Je n’ai pas (encore) trouvé une solution efficace.

Les liens sur le web vers vos pages

Deuxième cas de figure. Le web parle de votre page. Le blogueur Dupont écrit un article dithyrambique sur votre talent. L’adresse de votre blog se trouve citée et mise en valeur. Sur les forums d’entraide, les internautes vantent votre savoir-faire. De votre côté, vous ne manquez pas une occasion pour faire un peu de promotion. Espérons que M. Dupont n’ait pas fait de fautes dans le lien.

Dans ce cas de figure, vous ne pouvez agir sur le lien directement. Il vous faudrait contacter l’auteur et lui exposer la situation en espérant qu’il réagisse favorable à votre demande. En cas de changement de nom de domaine, le mieux est de mettre une redirection vers la racine du nouveau site. Gardez un œil attentif aux statistiques de fréquentation et toutes les requêtes échouées. Il est alors facile de rediriger (type 301) vers la bonne ressource le cas échéant.

Blogueurs sous WordPress

Il devient de plus en plus facile de maintenir un blog hébergé sous WordPress. La première extension est polyvalente. Redirection permet de gérer facilement ses redirections sans devoir passer par le fichier .htaccess. Pratique si vous avez l’habitude de renommer vos pages. Le module gère également les erreurs 404. Par contre, si vous cherchez juste à repérer les liens défectueux, Broken Link Checker est l’outil idéal. Il vous tiendra informé au jour le jour, soit via l’interface d’administration soit par e-mail.

Rapport Broken Link Checker
Rapport Broken Link Checker

Conclusion

La gestion des hyperliens doit être un travail quotidien sous peine de se retrouver à gérer un volume d’erreurs énorme. Pensez à nommer correctement vos adresses dès le départ[¹], de manière concise et contenant les bons mots clés. En cas de renommage, utilisez un système de redirection automatique pour vous épargner cette tâche rébarbative. Enfin, faites de la veille sur tous vos liens ainsi que les redirections.

[¹] À lire: « Personnaliser ses permaliens »

Au diable le mailto !

Mettre en relation le lecteur et l’auteur d’un site est une opportunité unique dont seul le web peut se vanter. Écrire à un collègue, un directeur d’entreprise, un artiste, un politique, un conférencier de talent… tout est possible. L’outil a de séduire plus d’un internaute: gratuit, instantané et non intrusif. Il permet un style d’écriture très léger sur la forme sans excès de politesse à se tortiller le derrière. Pour toutes ces raisons, et bien d’autres, l’ajout d’un moyen de contact est bénéfique pour l’un comme pour l’autre.

Dans la pratique, le responsable d’un site a plusieurs solutions. La première consiste à mettre un formulaire de contact. Pour la partie dynamique, des scripts tout faits existent sur le net. Sur un blog WordPress, des formulaires personnalisables sont disponibles. L’intérêt de la méthode&bsp;? l’internaute reste sur votre site sans devoir faire appel à un logiciel externe. La procédure est rapide et sans véritables contraintes. À ce niveau, l’ergonomie du formulaire est primordiale: lisibilité, accusé d’envoi, mis en lumière des éventuelles erreurs, copie si nécessaire, etc.

Formulaire de contact

La deuxième méthode repose sur le fameux mailto bien connu des wembasters. Un lien mailto déclenche le lancement du logiciel de messagerie (OutLook, Thunderbird) installé et configuré par l’utilisateur. Le contact avec le site web est rompu. L’appel au client de messagerie est souvent une mauvaise expérience en raison de la difficulté à paramétrer correctement les données du compte personnel. Le quidam se trouve désarmé face aux demandes de SMTP et autres POP. Aussi, il est fort à parier qu’il utilise un webmail gratuit du type Hotmail, Gmail.

L’autre raison pour laquelle je m’oppose à utiliser le mailto est l’avidité des aspirateurs d’e-mail. Ces derniers sont capables de pomper sauvagement une masse impressionnante de courriels en quelques minutes. Pour contrer le problème, il existe de nombreuses solutions (cryptage dans le code, image, écriture sans lien). Ces techniques fonctionnent relativement bien contre le spam mais génèrent des contraintes au visiteur. Il ne comprend pas pourquoi le lien n’est pas cliquable ou séparé d’espace. Face à une problématique technique, le visiteur ne devrait pas subir les conséquences. Il incombe au wembaster de régler ses problèmes et d’offrir la meilleure expérience utilisateur.

À lire également: « Captcha n’est pas la bonne solution »

Personnaliser l’icône des favoris

Apparue avec la version 5 d’Internet Explorer, le favicon est la contraction de « favori » et « icon ». Cette image de taille réduite se retrouve dans la barre d’adresse du navigateur. Elle apparait sur chaque onglet ouvert et s’intègre agréablement aux favoris (marque-pages). Dans une longue liste de liens enregistrés, le favicon se distingue des autres et rend la recherche plus aisée. Cette icône est facile à mettre en place sur son site web: créer l’image dans un format standard, ajouter une ligne de code pour faire la liaison et le tour est joué.

Dessiner son icône

Commencez par dessiner l’image qui correspond le mieux à votre site: logo, mascotte, initiales du nom… Ensuite, il faut réduire la taille à 16 pixels de côté. Le résultat est souvent décevant. Pour cette raison, il vaut mieux travailler au pixel près en taille réelle. Icon Workshop est spécialisé dans ce genre de manipulation. Il existe aussi des applications en ligne comme Favicon Generator pour les plus talentueux.

De nombreux designers mettent leurs créations à disposition du public moyennant quelques euros ou gratuitement. Icon Finder est un moteur spécialisé dans icônes. Un très bon moyen pour trouver l’image adaptée à votre projet. Après une recherche, vous définissez la taille, le format et vous téléchargez le tout. Et pour ceux qui ne trouvent vraiment pas, j’ai regroupé une petite collection (zip 16,3 Mo).

Quelques règles à respecter

La taille de l’image doit être de 16×16 pixels ou 32×32 pixels. Dans ce dernier cas, la taille sera réduite de moitié automatiquement par le navigateur. Le nombre de couleurs ne doit pas dépasser 16 couleurs.

Pour ce qui concerne le format du fichier, le gif et le png sont acceptés par les navigateurs respectueux des standards du web. Comme Internet Explorer a toujours voulu se distinguer, il n’autorise que le format .ico Ce format n’est autre qu’une image bitmap (.bmp) générée par Windows. Il suffit alors de renommer l’extension (favicon.bmp par favicon.ico) pour être reconnu. Cette manipulation ne fonctionne pas pour les autres extensions.

Capture favicon sur KeylinePetit conseil en passant, prudence avec les icônes animées. Certaines sont discrètes et ne posent pas de problème, d’autres sont désagréables et irritantes, comme sur le site de Keyline. N’essayez pas de vous faire remarquer à tout prix.

Créer la liaison

Vous avez maintenant votre icône de 16 pixels. Il va falloir faire la liaison entre la page HTML et le fichier image. Deux possibilités: soit vous ne jurez que par Internet Explorer, soit vous préférez une méthode plus propre et universelle.

Internet Explorer — La méthode la plus simple c’est d’ajouter l’image dans le dossier racine du serveur. L’image doit impérativement porter le nom de favicon.ico sinon ça ne marche pas. L’autre méthode consiste à insérer une ligne de code dans balise <head>. Dans ce cas, il faudra le faire pour toutes les pages.

{code type=html}

Titre

{/code}

Mozilla et consort — Le code à insérer est pratiquement identique mais à l’avantage d’être conforme aux normes. Malheureusement, Internet Explorer ne comprend que ce qu’il veut bien et n’en tiendra pas compte. Remarquez le type informe le navigateur du type de document (une image) et son format (pgn). Une icône au format gif porte l’indication type="image/gif" et type="image/x-icon" pour un fichier .ico. N’oubliez pas d’envoyer votre image sur le serveur et au bon endroit.

{code type=html}

Titre

{/code}

Captcha n’est pas la bonne solution

Captcha est une méthode de vérification dans les formulaires en ligne dont l’objectif est de prémunir l’auteur contre le spam. Avant d’envoyer ses données au serveur, l’internaute doit recopier une combinaison de caractères affichés sous forme d’image. En théorie, seul l’œil humain est capable d’interpréter ce qu’il voit dans l’image.

Inefficace

Des tests utilisant des logiciels de reconnaissance optique des caractères ont permis de les déchiffrer dans plus de 85 % des cas. À titre d’exemple, PWNTtcha est capable de reconnaître la plupart sans trop de difficulté. Autre exemple, ce blog (équipé d’un captcha traditionnel) a accumulé plus de 60 Mo de spam sur une période de deux ans !

Antiergonomique

C’est bien évidemment antiergonomique. Tout le monde ne comprend pas les enjeux du problème: qu’est-ce que le spam ? que faut-il faire ? les capitales doivent-elles être respectées ? Ce champ supplémentaire ajoute une contrainte au visiteur alors que le webmaster devrait plutôt se soucier de lui faciliter la tâche.

Plus les caractères sont mélangés à l’image de fond, plus le code est difficile à interpréter. Ce principe est valable pour les robots mais aussi pour les humains ! Certains sont carrément illisibles, d’autres caractères peuvent être confondus (comme le O d’Oscar et le 0 zéro).

Exemples de différents captcha

Dans le pire des cas, tous les champs du formulaire sont purgés à l’envoi d’une erreur dans le déchiffrement du code. La page affiche une erreur tellement discrète qu’elle passe inaperçue et laisse croire au visiteur que le message a bien été envoyé. Les plus attentifs tenteront de revenir en arrière… peine perdue.

Très peu accessible

Que font les mal voyants s’ils ne peuvent même pas agrandir les caractères ? Que font les synthétiseurs vocaux face à une image ? Inutile de mettre le code dans l’attribut alt ça deviendrait simple pour les spammeurs.

Certains tentent d’adapter au mieux cette solution mais cela reste inefficace. Par exemple, Hotmail permet la lecture audio du code ainsi que la possibilité de générer un nouveau code si celui-ci est trop difficile à lire. Seul souci, le système ne fonctionne ni dans Firefox (1.5) ni dans Internet Explorer (6.0)  !

Dotclear.net opte pour une alternance entre le captcha et la formulation de questions simples: « Quelle est la capitale de la France ? ». Si la réponse est évidente pour les Européens, qu’en est-il des Africains francophones ou d’autres régions du monde ?

Conclusion

La lutte contre le spam est un problème réel que nous devons combattre. À mon sens, captcha n’est pas la bonne solution. Il existe d’autres alternatives plus efficaces et transparentes pour le visiteur.

Questions sur le clavier

On passe beaucoup de temps à utiliser le clavier sans connaître réellement toutes ces possibilités. Occasionnellement, on s’arrête pour trouver un caractère: « il doit bien exister sur le clavier mais où est-il ? ». Quelques questions en rapport à ce périphérique indissociable de l’ordinateur.

Pourquoi le clavier français est-il différent du belge ?

Sans doute parce qu’en Belgique il y a plusieurs langues. Pas vraiment. Les claviers belges sont identiques quelque soit la langue. De plus, le positionnement des touches ne porte que sur des caractères spéciaux ou sur la ponctuation. Comment font les Suisses dans un pays multilingue ? Le clavier québécois ressemble-t-il au clavier français ?

Clavier belge
Clavier belge

Clavier belge
Clavier français

Pourquoi les touches f et j sont-elles différentes ?

Une bonne secrétaire connaît son clavier sur le bout des doigts mais surtout sans le regarder. Les touches F et J sont celles où se positionnent les deux index quand les mains sont correctement disposées pour une frappe à l’aveugle. Le minuscule point ou la petite barre horizontale en relief permet d’avoir un repère tactile pour faciliter le positionnement des mains.

Reste à savoir si c’est la position la plus ergonomique. Il existe deux écoles: l’ancienne qui positionne les doigts sur F et J et celle qu’on apprend dans les écoles actuellement qui fait remonter les deux mains pour avoir des repères sur R et U. Personnellement, j’ai appris la seconde méthode et je la trouve plus pratique surtout pour les touches supérieures.

Ce repère serait également utilisé par les personnes mal ou non voyantes pour positionner correctement leurs doigts sur le clavier comme c’est le cas pour la touche 5 des téléphones.

De combien de touches est composé un clavier récent ?

Les ordinateurs compatibles IBM lancés en 1986 comptent 102 touches. La société Microsoft a ajouté sa touche personnelle en ajoutant trois touches de raccourcis pour les utilisateurs de Windows. De cette manière, Windows + E ouvre l’explorateur de documents, Windows + D affiche le bureau, etc.

Comment afficher des caractères spéciaux ?

Vous devez faire appel à la table des caractères de Windows: Démarrer > Programmes > Accessoires > Outils Système > Table des caractères. Dès que vous utilisez couramment un caractère, je vous conseille de retenir son code numérique (encadré en rouge sur l’image). Ainsi, pour afficher le guillemet français ouvrant il faut taper simultanément Alt + 0171 (sans oublier le zéro).

À quoi servent les touches Scroll Lock et Insert ?

Scroll Lock bloque le défilement. Le meilleur exemple pratique: ouvrez une feuille de calcul Excel et déplacez-vous avec les flèches directionnelles: le déplacement se fait de cellule en cellule. Maintenant, activez la touche Scroll Lock et utilisez les flèches: la sélection ne bouge plus alors que l’affichage à l’écran se déplace verticalement et horizontalement.

Insert active/désactive la fonction « refrappe ». Permet d’insérer entre du texte existant ou d’écraser le texte et réécrire par-dessus.

Comment accéder aux capitales accentuées ?

Oui et non. Grâce à la touche Alt Gr le clavier accède aux accents aigus et graves (à droite de la touche M sur un clavier AZERTY belge) exactement de la même manière que l’accent circonflexe ou le tréma. Il est donc possible de composer É, È, Â… en deux manipulations. Par contre, le Ç ou les ligatures comme les Œ, Æ sont obtenus par d’autres procédés.

Pourquoi la barre verticale s’appelle pipe en anglais ?

Selon Joel: « le terme pipe (|) n’est pas utilisé pour désigner le caractère, mais sa fonction dans la syntaxe des shells à savoir créer des tubes dans lesquels deux programmes vont pouvoir s’échanger des données. Par habitude, les informaticiens ont tendance à lire [paIp] le caracère ‘|’, surtout s’ils lisent une commande shell ». C’est donc un caractère propre à des fonctions logiques et ne sert pas au texte. Cependant, il est utilisé sur certaines pages web pour séparer des liens hypertextes ou un menu horizontal.

Comment afficher un pied de mouche ?

Caractère spécial, le pied de mouche (pilcrow en anglais) est le caractère utilisé pour symboliser le paragraphe (¶). On le trouve également dans certains traitements de texte. Code HTML: &para; ou .

Ce signe était utilisé autrefois par les scribes pour indiquer le début d’un paragraphe. Il a été remplacé par les alinéas. Et pour ceux qui ont connu les machines à écrire mécaniques, sa forme évoque une représentation graphique du levier qui permettait de faire un retour chariot.

Questions pour un champion

Quelle est la différence entre l’accent circonflexe ^ situé sous le chiffre 6 et celui à droite du P sur un clavier Azerty belge ? Autre question, pourquoi les chiffres du pavé numérique sont disposés de bas en haut et non dans le sens de la lecture ?

Sur le même sujet: « De la machine à écrire au clavier »

Nouvelles technologies

J’ai retrouvé une conférence audio de Michel Serres. Délibérément optimiste, le philosophe décortique l’expression « nouvelles technologies » et nous plonge dans l’histoire. Il nous raconte la transmission du savoir et l’importance de la mémoire à un âge où les supports écrits n’existaient pas. C’est passionnant d’enseignements.


 

Tableau ASCII

La norme ASCII [aski] est une norme de codage de caractères la plus connue. Elle sert de base à de nombreux autres normes. L’ASCII de base est suffisant pour écrire en anglais mais largement insuffisant en français. Ces 128 premiers caractères sont accessibles dans n’importe quel environnement informatique.

Insérer un caractère

Pour les insérer sur une page HTML, il suffit de copier/coller l’entité numérique (par exemple &#171 affiche ±) ou l’entitée nommée (&plusmn;) directement dans le code source. Une autre façon est de taper le numéro précédé du zéro (Alt + 0177) et Windows convertira automatiquement le caractère. Attention, si vous n’ajoutez pas le zéro, vous tombez sur une autre table de caractères.

Caractère Numéro Nom Dénomination Traduction
  &#00;   Unused Caractère de contrôle non imprimable
! !   Exclamation mark Point d’exclamation
" " &quot; Double quotation mark Guillemet double
# #   Number sign Signe dièse
$ $   Dollar sign Signe dollar
% %   Percent sign Signe pour cent
& & &amp; Ampersand Esperluette
' '   Apostrophe Apostrophe
( (   Left parenthesis Parenthèse gauche
)> )   Right parenthesis Parenthèse droite
* *   Asterisk Astérisque
+ +   Plus sign Signe plus
, ,   Comma Virgule
-   Hyphen-minus Trait d’union moins
. .   Period Point
/ /   Slash Slash
0 – 9 09   Digits 0-9 Chiffres 0-9
: :   Colon Deux points
; ;   Semicolon Point-virgule
< < &lt; Less-than sign Inférieur à
= =   Equals sign Signe égal
> > &gt; Greater-than sign Supérieur à
? ?   Question mark Point d’interro.
@ @   At sign Arobace
A – Z AZ   Uppercase letters A-Z Lettres majuscules A-Z
[ [   Left square bracket Crochet gauche
\   Backslash Slash inversé
] ]   Right square bracket Crochet droit
^ ^ &circ; Caret Accent circonflexe
_ _   Underscore Barre horizontale
` `   Grave accent Accent grave
a – z az   Lowercase letters a-z Lettres minuscules a-z
{ {   Left curly brace Accolade gauche
| |   Vertical bar Barre verticale
} }   Right curly brace Accolade droite
~ ~ &tilde; Tilde Tilde
     Unused Caractère de contrôle non imprimable

Remarquez la présence de l’accent grave dans la table ASCII. L’accent aigu, rarement utilisé en anglais, a été zappé. L’apostrophe (appelée apostrophe droite ou apostrophe dactylographique) joue le rôle d’élision mais aussi celui du guillemet et de l’accent aigu. Ce dernier n’apparait que dans la table suivante.

Afin de compléter les caractères accentués de nombreuses langues européennes, la table s’agrandit pour former la norme ISO-8859-1 (ou Latin-1). Cette même table est corrigée en ISO-8859-15 (ou Latin-9) grâce à l’ajout d’autres caractères oubliés dont la ligature œ et le signe .

Tableau des caractères ASCII étendu (8 bits)
Caractère Numéro Nom Dénomination Traduction
&euro; not defined in HTML 4
    not defined in HTML 4
&sbquo; not defined in HTML 4
ƒ ƒ &fnof; not defined in HTML 4
&bdquo; not defined in HTML 4
&hellip; not defined in HTML 4
&dagger; not defined in HTML 4
&Dagger; not defined in HTML 4
ˆ ˆ &circ; not defined in HTML 4
&permil; not defined in HTML 4
Š Š &Scaron; not defined in HTML 4
&lsaquo; not defined in HTML 4
ΠΠ&OElig; not defined in HTML 4
    not defined in HTML 4
Ž Ž   not defined in HTML 4
    not defined in HTML 4
    not defined in HTML 4
&lsquo; not defined in HTML 4
&rsquo; not defined in HTML 4
&ldquo; not defined in HTML 4
&rdquo; not defined in HTML 4
&bull; not defined in HTML 4
&ndash; not defined in HTML 4
&mdash; not defined in HTML 4
˜ ˜ &tilde; not defined in HTML 4
&trade; not defined in HTML 4
š š &scaron; not defined in HTML 4
&rsaquo; not defined in HTML 4
œ œ &oelig; not defined in HTML 4
    not defined in HTML 4
ž ž   not defined in HTML 4
Ÿ Ÿ &Yuml; not defined in HTML 4
    &nbsp; Non breaking space Espace insécable
¡ ¡ &iexcl; Inverted exclamation Exclamation inversée
¢ ¢ &cent; Cent sign Symbole centime
£ £ &pound; Pound sterling Symbole livre
¤ ¤ &curren; General currency sign Symbole monétaire
¥ ¥ &yen; Yen sign Symbole yen
¦ ¦ &brvbar; Broken vertical bar Barre verticale interrompue
§ § &sect; Section sign Signe section
¨ ¨ &uml; Umlaut Tréma
© © &copy; Copyright Copyright
ª ª &ordf; Feminine ordinal Ordinal féminin
« « &laquo; Left angle quote Guillement français ouvrant
¬ ¬ &not; Not sign Signe non
­ ­ &shy; Soft hyphen Tiret conditionnel
® ® &reg; Registered trademark Marque déposée
¯ ¯ &macr; Macron accent Macron
° ° &deg; Degree sign Signe degré
± ± &plusmn; Plus or minus Plus ou moins
² ² &sup2; Superscript two Deux exposant
³ ³ &sup3; Superscript three Trois exposant
´ ´ &acute; acute accent Accent aigu
µ µ &micro; Micro sign Signe micro
&para; Paragraph sign Signe paragraphe
Pied de mouche
· · &middot; Middle dot Point milieu
¸ ¸ &cedil; Cedilla Cédille
¹ ¹ &sup1; Superscript one Un exposant
º º &ordm; Masculine ordinal Ordinal masculin
» » &raquo; Right angle quote Guillement français fermant
¼ ¼ &frac14; Fraction one-fourth Fraction un quart
½ ½ &frac12; Fraction one-half Fraction un demi
¾ ¾ &frac34; Fraction three-fourths Fraction trois-quarts
¿ ¿ &iquest; Inverted question mark Point d’interrogation inversé
À À &Agrave; Uppercase A, grave accent A accent grave majuscule
Á Á &Aacute; Uppercase A, acute accent A accent aigu majuscule » »
  &Acirc; Uppercase A, circumflex accent A accent circonflexe majuscule
à à &Atilde; Uppercase A, tilde A tilde majuscule
Ä Ä &Auml; Uppercase A, umlaut A tréma majuscule
Å Å &Aring; Uppercase A, ring A anneau majuscule
Æ Æ &AElig; Uppercase AE AE ligaturé majuscule
Ç Ç &Ccedil; Uppercase C, cedilla C cédille majuscule
È È &Egrave; Uppercase E, grave accent E accent grave majuscule
É É &Eacute; Uppercase E, acute accent E accent aigu majuscule
Ê Ê &Ecirc; Uppercase E, circumflex accent E accent circonflexe majuscule
Ë Ë &Euml; Uppercase E, umlaut E tréma majuscule
Ì Ì &Igrave; Uppercase I, grave accent I accent grave majuscule
Í Í &Iacute; Uppercase I, acute accent I accent aigu majuscule
Î Î &Icirc; Uppercase I, circumflex accent I accent circonflexe majuscule
Ï Ï &Iuml; Uppercase I, umlaut I trema majuscule
Ð Ð &ETH; Uppercase Eth, Icelandic Eth islandais
Ñ Ñ &Ntilde; Uppercase N, tilde N tilde majuscule
Ò Ò &Ograve; Uppercase O, grave accent O accent grave majuscule
Ó Ó &Oactue; Uppercase O, acute accent O accent aigu majuscule
Ô Ô &Ocirc; Uppercase O, circumflex accent O accent circonflexe majuscule
Õ Õ &Otilde; Uppercase O, tilde O tilde majuscule
Ö Ö &Ouml; Uppercase O, umlaut O tréma majuscule
× × &times; Multiplication sign Signe infini
Ø Ø &Oslash; Uppercase O, slash O barré majuscule
Ù Ù &Ugrave; Uppercase U, grave accent U accent grave majuscule
Ú Ú &Uacute; Uppercase U, acute accent U accent aigu majuscule
Û Û &Ucirc; Uppercase U, circumflex accent U accent circonflexe majuscule
Ü Ü &Uuml; Uppercase U, umlaut U trema majuscule
Ý Ý &Yacute; Uppercase Y, acute accent Y accent aigu majuscule
Þ Þ &THORN; Uppercase THORN, Icelandic Thorn islandais majuscule
ß ß &szlig; Lowercase sharps, German s dur allemand
à à &agrave; Lowercase a, grave accent a accent grave minuscule
á á &aacute; Lowercase a, acute accent a accent aigu minuscule
â â &acirc; Lowercase a, circumflex accent a accent circonflexe minuscule
ã ã &atilde; Lowercase a, tilde a tilde minuscule
ä ä &auml; Lowercase a, umlaut a tréma minuscule
å å &aring; Lowercase a, ring a rond minuscule
æ æ &aelig; Lowercase ae ae ligaturé minuscule
ç ç &ccedil; Lowercase c, cedilla c cédille minuscule
è è &egrave; Lowercase e, grave accent e accent grave minuscule
é é &eacute; Lowercase e, acute accent e accent aigu minuscule
ê ê &ecirc; Lowercase e, circumflex accent e accent circonflexe minuscule
ë ë &euml; Llowercase e, umlaut e trema minuscule
î î &icirc; Lowercase i, circumflex accent i accent circonflexe minuscule
ï ï &iuml; Lowercase i, umlaut i tréma minuscule
ð ð &eth; Lowercase eth, Icelandic eth islandais minuscule
ñ ñ &ntilde; Lowercase n, tilde n tilde minuscule
ò ò &ograve; Lowercase o, grave accent o accent grave minuscule
ó ó &oacute; Lowercase o, acute accent o accent aigu minuscule
ô ô &ocirc; Lowercase o, circumflex accent o accent circonflexe minuscule
õ õ &otilde; Lowercase o, tilde o tilde minuscule
ö ö &ouml; Lowercase o, umlaut o tréma minuscule
÷ ÷ &divide; Division sign Signe division
ø ø &oslash; Lowercase o, slash o barré minuscule
ù ù &ugrave; Lowercase u, grave accent u accent grave minuscule
ú ú &uacute; Lowercase u, acute accent u accent aigu minuscule
û û &ucirc; Lowercase u, circumflex accent u accent circonflexe minuscule
ü ü &uuml; Lowercase u, umlaut u tréma minuscule
ý ý &yacute; Lowercase y, acute accent y accent aigu minuscule
þ þ &thorn; Lowercase thorn, Icelandic Thorn islandais minuscule
ÿ ÿ &yuml; Lowercase y, umlaut y tréma minuscule

Les codes numériques de à Ÿ sont propres à Windows et ne sont pas valides en HTML 4 et XHTML. Les entités numériques peuvent poser problème sur des plateformes différentes à Windows. Plus d'info: caractères illégaux (Openweb). Il semble que les entités décimales sont mieux supportées que les entités nommées. Par exemple, Netscape Navigator 4 comprend   mais pas &nbsp;. C'est pourtant la même entité de caractère.

Des caractères classés par thèmes

Ce tableau donne une vue d'ensemble des caractères disponible mais il est loin d'être pratique à cause de sa classification par ordre croissant des valeurs numériques. Pour intégrer un signe particulier, je dois passer mon temps à chercher à travers tous le tableau. Certains ont pris la peine de classer selon les besoins.