davidbgk
/
larlet-fr-david-cache
ウォッチ 1
スター 0
フォーク 0
コード リリース 0 アクティビティ
A place to cache linked articles (think custom and personal wayback machine)
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。
397 コミット
1 ブランチ
ツリー: 8117a1624c
ブランチ タグ
${ item.name }
ブランチ ${ searchTerm } を作成
'8117a1624c' から
${ noResults }
larlet-fr-david-cache/cache/c893cbc0aedae4e797a69270c50.../index.html

index.html 52KB
Raw Blame 履歴

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826 
  1. <!doctype html><!-- This is a valid HTML5 document. -->

  2. <!-- Screen readers, SEO, extensions and so on. -->

  3. <html lang=fr>

  4. <!-- Has to be within the first 1024 bytes, hence before the <title>

  5.   See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->

  6. <meta charset=utf-8>

  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->

  8. <!-- The viewport meta is quite crowded and we are responsible for that.

  9.   See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->

  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

  11. <!-- Required to make a valid HTML5 document. -->

  12. <title>Noms de personnes à travers le monde (archive) — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="https://www.w3.org/International/questions/qa-personal-names">

  32. 

  33. <style>

  34. /* http://meyerweb.com/eric/tools/css/reset/ */

  35. html, body, div, span,

  36. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  37. a, abbr, address, big, cite, code,

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

  40. dl, dt, dd, ol, ul, li,

  41. fieldset, form, label, legend,

  42. table, caption, tbody, tfoot, thead, tr, th, td,

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

  45. menu, nav, output, ruby, section, summary,

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

  54. /* HTML5 display-role reset for older browsers */

  55. article, aside, details, figcaption, figure,

  56. footer, header, hgroup, menu, nav, section { display: block; }

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

  69. /* http://practicaltypography.com/equity.html */

  70. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  71. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  72. @font-face {

  73.   font-family: 'EquityTextB';

  74.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  75.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

  82.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  83.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

  90.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  91.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

  99.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  100.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

  107. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  108. body {

  109.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  110.   font-family: "EquityTextB", Palatino, serif;

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

  114.   -moz-osx-font-smoothing: grayscale;

  115.   -webkit-font-smoothing: subpixel-antialiased;

  116.   text-rendering: optimizeLegibility;

  117.   font-variant-ligatures: common-ligatures contextual;

  118.   font-feature-settings: "kern", "liga", "clig", "calt";

  119. }

  120. pre, code, kbd, samp, var, tt {

  121.   font-family: 'TriplicateT4c', monospace;

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

  139.     border-bottom: 1vh solid #2d7474;

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

  149.   border-top: 1vh solid #2d7474;

  150.   border-bottom: .2vh dotted #2d7474;

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

  171.       padding: 1rem 1.2rem .6rem 1.2rem;

  172.       border-radius: 0 0 6% 6%;

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

  180.   border-top: .2vh solid #2d7474;

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

  205.   text-decoration-skip-ink: auto;

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

  216.     border-top: .2vh dotted #2d7474;

  217.     margin: -6rem auto 1rem auto;

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

  235.   border-left: .5vw solid #2d7474;

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

  250.   border-top: .2vh solid #2d7474;

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

  261.     border: .5vw solid #323a45;

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

  273.   border-bottom: .2vh solid #07486c;

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

  280. /* https://fvsch.com/code/css-locks/ */

  281. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  282.   font-size: 1rem;

  283.   line-height: calc( 1.5em + 0.2 * 1rem );

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

  287.   line-height: calc( 1.2em + 0.2 * 1rem );

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

  291.   line-height: calc( 1.3em + 0.2 * 1rem );

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

  295.   line-height: calc( 1.4em + 0.2 * 1rem );

  296. }

  297. @media (min-width: 20em) {

  298.   /* The (100vw - 20rem) / (50 - 20) part

  299.      resolves to 0-1rem, depending on the

  300.      viewport width (between 20em and 50em). */

  301.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  302.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  303.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  304.     margin-left: 0;

  305.   }

  306.   h1 {

  307.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  308.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  309.   }

  310.   h2 {

  311.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  312.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  313.   }

  314.   h3 {

  315.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  316.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  317.   }

  318. }

  319. @media (min-width: 50em) {

  320.   /* The right part of the addition *must* be a

  321.      rem value. In this example we *could* change

  322.      the whole declaration to font-size:2.5rem,

  323.      but if our baseline value was not expressed

  324.      in rem we would have to use calc. */

  325.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  326.     font-size: calc( 1rem + .6 * 1rem );

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

  333.     font-size: calc( 1.9rem + 1.5 * 1rem );

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

  337.     font-size: calc( 1.5rem + 1.5 * 1rem );

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

  341.     font-size: calc( 1.35rem + 1.5 * 1rem );

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

  360.   body { font-size: 100%; }

  361.   a:after { content: " (" attr(href) ")"; }

  362.   a, a:link, a:visited, a:after {

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

  369.   abbr[title] { border-bottom: 0; }

  370.   abbr[title]:after { content: " (" attr(title) ")"; }

  371.   img { page-break-inside: avoid; }

  372.   @page { margin: 2cm .5cm; }

  373.   h1, h2, h3 { page-break-after: avoid; }

  374.   p3 { orphans: 3; widows: 3; }

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

  385. @media (min-width: 20em) {

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

  390. @media (min-width: 50em) {

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

  398. @media (min-width: 20em) {

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

  403. @media (min-width: 50em) {

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

  443.     -webkit-shape-outside: circle();

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

  448.     border-left: 1px solid #f1c40f;

  449.     border-top: 1px solid #f1c40f;

  450.     border-right: 5px solid #f1c40f;

  451.     border-bottom: 5px solid #f1c40f;

  452.   }

  453. </style>

  454. 

  455. <h1>

  456.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  457.   Noms de personnes à travers le monde (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="https://www.w3.org/International/questions/qa-personal-names">Source originale du contenu</a></h3>

  463.     <section>

  464. <div id="audience">

  465. <p><span id="intendedAudience" class="leadin">Intended audience:</span>

  466. Producteurs de contenus HTML (utilisant des éditeurs ou des scripts), développeurs de scripts (PHP, JSP, etc.) développeurs de schémas (DTDs, schémas XML, RelaxNG, etc.), chefs de projet web, et toute personne impliquée dans le design de formulaires, de bases de données et d'ontologies qui stockent des noms de personnes.</p>

  467. <div id="updateInfo"></div><script>document.getElementById('updateInfo').innerHTML = g.updated</script>

  468. </div>

  469. <h2 id="question"><a href="#question">Question</a></h2>

  470. <p class="question">Comment les noms de personnes diffèrent-ils à travers le monde, et quelles sont les implications de ces différences dans le design de formulaires, bases de données, ontologies, etc. pour le Web&nbsp;?</p>

  471. 

  472. <p>Les personnes chargées de créer des formulaires, des bases de données ou des ontologies ignorent souvent la façon dont les noms changent d'un pays à l'autre. Elles conçoivent leurs formulaires et leurs bases de données sans se rendre compte de l'effort demandé pour un utilisateur étranger. Cet article vous présentera d'abord les différents styles utilisés pour un nom de personne, puis détaillera quelques incidences possibles pour les gérer au mieux sur le Web.</p>

  473. <p>Cet article ne vous donnera pas toutes les réponses – la meilleure réponse dépendra des besoins de votre application, et la plupart du temps il sera difficile de trouver la solution «&nbsp;parfaite&nbsp;». Nous tentons ici principalement de vous sensibiliser à certains problèmes cruciaux, en guise d'introduction. Les exemples et les conseils fournis sont majoritairement liés aux formulaires et aux bases de données. La plupart de ces concepts vaut cependant d'être considérée dans la conception d'une ontologie, même si nous ne fournirons pas ici d'exemples précis.</p>

  474. </section>

  475. 

  476. <section>

  477. <h2 id="scenarios"><a href="#scenarios">Scénarios</a></h2>

  478. <p>Considérons deux scénarios clés&nbsp;:</p>

  479. <ol>

  480.   <li>

  481.     <p>Vous concevez un formulaire en une seule langue (mettons que ce soit l'anglais) que des gens du monde entier vont remplir.</p>

  482.   </li>

  483.   <li>

  484.     <p>Vous concevez un formulaire dans une langue donnée mais il devra ensuite être adapté aux différences culturelles de chaque pays quand le site sera traduit.</p>

  485.   </li>

  486. </ol>

  487. <p>En réalité vous ne pourrez sans doute pas localiser votre site pour chaque culture&nbsp;; donc même si vous optez pour l'approche numéro 2, certaines personnes seront toujours face à un formulaire qui n'aura pas été explicitement développé pour elles.</p>

  488. </section>

  489. 

  490. <section>

  491. <h2 id="examples"><a href="#examples">Quelques exemples de différences</a></h2>

  492. <p>Pour commencer, voyons à travers quelques exemples comment les noms varient à travers le monde.</p>

  493. <section>

  494. <h3 id="patronymic"><a href="#patronymic">Prénom et patronyme</a></h3>

  495. <p>Dans le nom islandais <b class="highlight">Björk Guðmundsdóttir</b>, Björk est le prénom. La deuxième partie du nom indique celui du père (ou parfois de la mère), suivi de -son pour un garçon ou de -dóttir pour une fille, et se rapproche d'une description que d'un nom de famille au sens occidental du terme. Le père de Björk, Guðmundur, est le fils de Gunnar, son nom est donc Guðmundur Gunnarsson.</p>

  496. <p>Les Islandais préfèrent qu'on les appelle par leur prénom (Björk), ou par leur nom complet (Björk Guðmundsdóttir).  Björk ne s'attendrait pas à ce qu'on l'appelle Mlle. Guðmundsdóttir.  Les annuaires en Islande sont triés par le prénom.</p>

  497. <p>On retrouve ce schéma (prénom puis patronyme) dans d'autres cultures, notamment dans certaines zones d'Inde du Sud, en Malaisie et en Indonésie.</p>

  498. <p>Dans le nom malais <b class="highlight">Isa bin Osman</b> le mot «&nbsp;bin&nbsp;» signifie «&nbsp;fils de&nbsp;» («&nbsp;binti&nbsp;» pour une femme). En parlant de cette personne vous pourrez dire M. Isa, ou si vous le connaissez personnellement, Encik Isa (Encik est un mot malais assez proche de M.).</p>

  499. </section>

  500. 

  501. <section>

  502. <h3 id="partorder"><a href="#partorder">Variation de l'ordre des éléments</a></h3>

  503. <p>Dans le nom chinois <b class="highlight">毛泽东</b> (Mao Zedong) le nom de famille est Mao, et c'est le <em>premier</em> nom qui est lu (de gauche à droite). Le prénom est Dong.  Le caractère du milieu, Ze, est un nom générationnel, commun à tous ses frères et sœurs (毛泽民 (Mao Zemin),  毛泽覃 (Mao Zetan), et 毛泽紅 (Mao Zehong)).</p>

  504. <p>Pour les gens qui ne sont pas proches de lui, on peut parler de Mao en tant que 毛泽东先生 (Mao Zedong Xiānshēng) ou 毛先生 (Mao Xiānshēng) (Xiānshēng est l'équivalent de M.). Bien que tout le monde n'ait plus forcément de nom générationnel à notre époque, en particulier en Chine continentale, ceux qui en ont un s'attendent à le voir utiliser conjointement à leur prénom. Ainsi, si vous êtes proche de quelqu'un qui s'appelle 毛泽东, vous le mentionnerez en tant que 泽东 (Zedong), et non 东 (Dong). </p>

  505. <p>Notez en passant que les noms ne sont pas séparés par des espaces.</p>

  506. <p>D'autres cultures, notamment au Japon, en Corée et en Hongrie, placent aussi le nom de famille avant le(s) prénom(s).</p>

  507. <p>Les Chinois qui connaissent des Occidentaux adopteront souvent un prénom additionnel plus facile à utiliser pour ces derniers. Par exemple, Yao Ming (nom de famille Yao, prénom Ming) pourra écrire son nom, pour des étrangers, sous la forme Fred Yao Ming ou Fred Ming Yao.</p>

  508. </section>

  509. 

  510. <section>

  511. <h3 id="multiplefamily"><a href="#multiplefamily">Noms de famille multiples</a></h3>

  512. <p>Les hispanophones ont couramment deux noms de famille. Par exemple, <b class="highlight">María-Jose Carreño Quiñones</b> peut être la fille d'Antonio Carreño Rodríguez et de María Quiñones Marqués.</p>

  513. <p>Vous la nommerez Señorita Carreño, et non Señorita Quiñones.</p>

  514. <p>Les Brésiliens ont une coutume similaire, qui peut parfois comporter trois ou quatre noms de famille, en remontant dans les noms des ancêtres, comme par exemple <b class="highlight">José Eduardo Santos Tavares Melo Silva</b>.</p>

  515. <p>Typiquement, deux familles espagnoles suivront l'ordre père-mère, alors que des noms portugais au Brésil seront mère puis père. Mais cet ordre peut changer.</p>

  516. <p>De plus, certains noms ajoutent des particules, comme ‘de’ ou ‘e’ entre les noms de famille, par exemple Carreño de Quiñones ou Tavares e Silva.</p>

  517. </section>

  518. 

  519. <section>

  520. <h3 id="variants"><a href="#variants">Déclinaison de formes</a></h3>

  521. <p>Nous avons vu plus haut que le patronyme en Islande se termine en -sson or -sdóttir, selon que l'enfant est un garçon ou une fille. Les Russes utilisent le patronyme comme nom du milieu mais ils utilisent aussi le nom de famille, dans l'ordre prénom-patronyme-nomDeFamille. Les terminaisons du patronyme et du nom de famille indiqueront s'il s'agit d'un garçon ou d'une fille. Par exemple, la femme de <b class="highlight">Борис Николаевич Ельцин</b> (Boris Nikolayevich Yeltsine) est <b class="highlight">Наина Иосифовна Ельцина</b> (Naina Iosifovna Yeltsina) – notez qu'en russe les noms du mari se terminent avec une consonne, alors que les noms de la femme (y compris le patronyme qu'elle tient de son père) se terminent en ‘<span class="qchar">a</span>’.</p>

  522. </section>

  523. 

  524. <section>

  525. <h3 id="middleinitial"><a href="#middleinitial">Initiales au milieu</a></h3>

  526. <p>Les américains écrivent souvent leur nom avec une initiale au milieu, par exemple <b class="highlight">John Q. Public</b>. Les formulaires conçus aux États-Unis considèrent fréquemment cette pratique comme normale, alors qu'au Royaume-Uni, où les gens ont souvent un ou plusieurs seconds prénoms, elle est vue comme une approche très américaine. Dans d’autres pays, les personnes avec plus de deux noms et qui ne les écrivent pas habituellement en initiales, peuvent ne pas savoir comment remplir ce type de formulaires. De plus il faut bien comprendre que de nombreuses personnes qui utilisent des initiales les mettent au début de leur nom.</p>

  527. </section>

  528. 

  529. <section>

  530. <h3 id="inheritance"><a href="#inheritance">Héritage de noms</a></h3>

  531. <p>Il serait faux de croire que tous les membres d'une même famille ont le même nom de famille. En Occident, il est de plus en plus fréquent pour une femme mariée de garder son propre nom, mais dans certaines autres cultures, comme en Chine, c'est une pratique normale. Dans certains pays la femme peut prendre ou non le nom de son époux. Si la fille malaise Zaiton épouse Isa dont nous avons parlé auparavant, elle peut rester Mme Zaiton, ou elle peut choisir de devenir Zaiton Isa, et dans ce cas nous l'appellerons Mme Isa.</p>

  532. <div class="sidenoteGroup">

  533.   <p>Certains noms hispaniques présentent un aspect un peu différent. En 1996, Manuel A. Pérez Quiñones <a hreflang="en" class="print" href="http://web.archive.org/web/19990429161253/http://exodo.upr.clu.edu/~mperez/apellidos.html">expliquait les noms de sa famille</a>. Comme nous le disions, ses noms de familles, nommés <i class="foreign" lang="es">apellidos</i>, sont Pérez Quiñones parce que les <span lang="es">apellidos</span> de son père sont Pérez Rodriguez et les <span lang="es">apellidos</span> de sa mère sont Quiñones Alamo. Il courtise ensuite une jeune femme dont les <span lang="es">apellidos</span> sont Padilla Falto. Après leur mariage, ses <span lang="es">apellidos</span> à elle sont devenus Padilla de Pérez. Leurs enfants se sont appelés Pérez Padilla, et ainsi de suite. Ce qu'il faut retenir ici, c'est que seuls les enfants d'une même fratrie ont les mêmes <span lang="es">apellidos</span>.</p>

  534.   <aside class="sideinfonote"><p class="info">J'ai légèrement changé le nom de Manuel. En fait il orthographie habituellement son nom avec un tiret (Pérez-Quiñones) pour éviter, aux États-Unis, qu'on se demande comment fonctionne son nom. D'autres font sans doute de même.</p></aside>

  535. </div>

  536. <p>On ne peut pas considérer que le nom du mari est toujours adopté par la femme. Parfois le mari prend le nom de sa femme lors du mariage. Dans ce cas, il pourrait être indiqué, pour un formulaire, de demander le 'Nom précédent' plutôt que le 'Nom de jeune fille' ou 'née'.</p>

  537. </section>

  538. 

  539. <section>

  540. <h3 id="mixing"><a href="#mixing">Des mélanges</a></h3>

  541. <p>De nombreuses cultures mélangent toutes ces différentes façons de se nommer, et rajoutent quelques nouveautés.</p>

  542. <p>Par exemple, <b class="highlight">Velikkakathu Sankaran Achuthanandan</b> est un nom keralais d'Inde du Sud, habituellement écrit <b class="highlight">V. S. Achuthanandan</b> et qui suit le schéma nomDeFamille-nomDuPère-Prénom.</p>

  543. <p>Dans de nombreux endroits à travers le monde, certaines parties du nom proviennent d'un titre, d'un lieu, d'une information généalogique, de références religieuses, et ainsi de suite. Voici quelques exemples&nbsp;:</p>

  544. <ul>

  545.   <li>

  546.     <p>Le nom indien <b class="highlight">Kogaddu Birappa Timappa Nair</b> suit le schéma nomDeVillage-nomDuPère-prénom-nomDeFamille.</p>

  547.   </li>

  548.   <li>Le nom rajasthani <b class="highlight">Aditya Pratap Singh Chauhan</b> est composé de prénom-nomDuPère-nomDeFamille-nomDeLaCaste.</li>

  549.   <li>

  550.     <p>Dans une autre partie de l'Inde, le nom <b class="highlight">Madurai Mani Iyer</b> représente nomDeLaVille-prénom-nomDeLaCaste.</p>

  551.   </li>

  552.   <li>

  553.     <p>Le nom arabe <b class="highlight">Abu Karim Mohammed al-Jamil ibn Nidal ibn Abdulaziz al-Filistini</b> se traduit en &laquo;&nbsp;Père de Karim, Mohammed (prénom), Le beau, Fils de Nidal, Fils d'Abdulaziz, le Palestinien&nbsp;&raquo;. Karim est le premier fils de Mohammed. (Pour de plus amples détails sur cette riche tradition de nommage, voir <a class="print" href="http://fr.wikipedia.org/wiki/Nom_arabe" title="Nom arabe">Wikipedia</a>.)</p>

  554.   </li>

  555. </ul>

  556. <p>En Thaïlande, les gens ont un surnom, qui n'est pas habituellement lié à leur véritable nom, et ils l'utilisent pour s'adresser les uns aux autres dans des situations informelles. (Habituellement ils se présenteront à des Occidentaux avec ce nom, car il est généralement long d'une ou deux syllabes et donc plus facile à prononcer.) L'ancien Premier Ministre <b class="highlight">Thaksin Shinawatra</b> est surnommé <b class="highlight">Maew</b> (แม้ว). Ils possèdent souvent un surnom différent pour la famille et les amis.</p>

  557. <p>Au Viêt Nam, des noms tels que <b class="highlight">Nguyễn Tấn Dũng</b> suivent le schéma nomDeFamille-nomDuMilieu-Prénom. Bien que ceci ressemble à l'exemple chinois déjà évoqué ci-dessus, même dans une situation formelle, ce Premier Ministre du Viêt Nam est appelé par son <em>prénom</em>, M. Dũng, et pas M. Nguyễn.</p>

  558. </section>

  559. 

  560. <section>

  561. <h3 id="japanese"><a href="#japanese">Ambiguité des formes écrites</a></h3>

  562. <p>Les idéogrammes dans les noms japonais possèdent souvent plusieurs prononciations différentes. Dans certains cas il devient difficile de savoir comment réellement prononcer un nom, et cela pose aussi des problèmes pour les tris et les recherches automatiques, ceux-ci étant normalement faits sur la base de la prononciation du nom. Par exemple, le nom de famille de <b class="highlight">東海林賢蔵</b> (autrement dit, les trois premiers idéogrammes sur la gauche) peut être transcrit aussi bien Tōkairin que Shōji.</p>

  563. <p>De plus, différents caractères kanji peuvent se prononcer de la même manière, et la romanisation (c'est-à-dire la transcription en alphabet latin) tend à faire perdre des informations distinctives liées aux noms. Par exemple 庄司, 庄子, 東海林, et 小路  peuvent tous être romanisés en Shōji.</p>

  564. <p>Certains noms japonais utilisent des idéogrammes archaïques, ou des caractères qui ne sont plus usités en japonais moderne. La prononciation de ces caractères peut ne pas être reconnue.</p>

  565. <p>&Agrave; cause de ces problèmes, les Japonais fournissent communément une version phonétique de leur nom (en utilisant un alphabet japonais kana non-idéographique), de pair avec la version écrite normale.</p>

  566. </section>

  567. 

  568. <section>

  569. <h3 id="morenames"><a href="#morenames">Plus d'informations</a></h3>

  570. <p>Les informations ci-dessus ne montrent que des cas simples pour décrire un ensemble de divergences importantes dans la façon qu'ont les gens de construire les noms. La réalité, même au sein d'une culture unique, est bien plus compliquée. Wikipedia comporte un grand nombre d'articles fascinants sur l'apparence des noms selon la culture autour du monde. Nous vous recommandons les lectures complémentaires suivantes.</p>

  571. <p><a class="print" href="http://en.wikipedia.org/wiki/Akan_names" title="Noms akans (en anglais)" hreflang="en">Akan</a> • <a class="print" href="http://fr.wikipedia.org/wiki/Nom_arabe" title="Noms arabes">Arabe</a> • <a class="print" href="http://en.wikipedia.org/wiki/Balinese_name" title="Noms balinais (en anglais)" hreflang="en">Balinais</a> • <a class="print" href="http://en.wikipedia.org/wiki/Bulgarian_name" title="Noms bulgares (en anglais)" hreflang="en">Bulgare</a> • <a class="print" href="http://en.wikipedia.org/wiki/Czech_name" title="Noms tchèques (en anglais)" hreflang="en">Tchèque</a> • <a class="print" href="http://fr.wikipedia.org/wiki/Noms_chinois" title="Noms chinois">Chinois</a> • <a class="print" href="http://en.wikipedia.org/wiki/Dutch_name" title="Noms hollandais (en anglais)" hreflang="en">Hollandais</a> • <a class="print" href="http://en.wikipedia.org/wiki/Fijian_name" title="Noms fidjiens (en anglais)" hreflang="en">Fidjien</a> • <a class="print" href="http://fr.wikipedia.org/wiki/Nom_d%27usage_en_France" title="Noms français">Français</a> • <a class="print" href="http://en.wikipedia.org/wiki/German_name" title="Noms allemands (en anglais)" hreflang="en">Allemand</a> • <a class="print" href="http://en.wikipedia.org/wiki/Hawaiian_name" title="Noms hawaïens (en anglais)" hreflang="en">Hawaïen</a> • <a class="print" href="http://fr.wikipedia.org/wiki/Nomination_dans_le_juda%C3%AFsme" title="Noms hébreux">Hébreu</a> • <a class="print" href="http://en.wikipedia.org/wiki/Hungarian_names" title="Noms hongrois (en anglais)" hreflang="en">Hongrois</a> • <a class="print" href="http://fr.wikipedia.org/wiki/Nom_islandais" title="Noms islandais">Islandais</a> • <a class="print" href="http://en.wikipedia.org/wiki/Indian_name" title="Noms indiens (en anglais)" hreflang="en">Indien</a> • <a class="print" href="http://fr.wikipedia.org/wiki/Nom_indon%C3%A9sien" title="Noms indonésiens">Indonésien</a> • <a class="print" href="http://en.wikipedia.org/wiki/Irish_name" title="Noms irlandais (en anglais)" hreflang="en">Irlandais</a> • <a class="print" href="http://en.wikipedia.org/wiki/Italian_name" title="Noms italiens (en anglais)" hreflang="en">Italien</a> • <a class="print" href="http://en.wikipedia.org/wiki/Japanese_name" title="Noms japonais (en anglais)" hreflang="en">Japonais</a> • <a class="print" href="http://en.wikipedia.org/wiki/Javanese_name" title="Noms javanais (en anglais)" hreflang="en">Javanais</a> • <a class="print" href="http://en.wikipedia.org/wiki/Korean_name" title="Noms coréens (en anglais)" hreflang="en">Coréen</a> • <a class="print" href="http://en.wikipedia.org/wiki/Lithuanian_name" title="Noms lithuaniens (en anglais)" hreflang="en">Lithuanien</a> • <a class="print" href="http://en.wikipedia.org/wiki/Malaysian_names" title="Noms malais (en anglais)" hreflang="en">Malais</a> • <a class="print" href="http://en.wikipedia.org/wiki/Mongolian_name" title="Noms mongoliens (en anglais)" hreflang="en">Mongolien</a> • <a class="print" href="http://en.wikipedia.org/wiki/Persian_name" title="Noms perses (en anglais)" hreflang="en">Perse</a> • <a class="print" href="http://en.wikipedia.org/wiki/Philippine_name" title="Noms philippins (en anglais)" hreflang="en">Philippin</a> • <a class="print" href="http://en.wikipedia.org/wiki/Polish_name" title="Noms polonais (en anglais)" hreflang="en">Polonais</a> • <a class="print" href="http://en.wikipedia.org/wiki/Portuguese_name" title="Noms portugais (en anglais)" hreflang="en">Portugais</a> • <a class="print" href="http://fr.wikipedia.org/wiki/Nom_de_personne_en_russe" title="Noms slaves orientaux">Russe</a> • <a class="print" href="http://fr.wikipedia.org/wiki/Syst%C3%A8me_traditionnel_des_noms_espagnols#Noms_de_famille" title="Noms espagnols">Espagnol</a> • <a class="print" href="http://en.wikipedia.org/wiki/Naming_customs_of_Taiwanese_aborigines" title="Noms taïwanais (en anglais)" hreflang="en">Taïwanais</a> • <a class="print" href="http://en.wikipedia.org/wiki/Thai_name" title="Noms thaïs (en anglais)" hreflang="en">Thaï</a> • <a class="print" href="http://en.wikipedia.org/wiki/Vietnamese_name" title="Noms vietnamiens (en anglais)" hreflang="en">Vietnamien</a></p>

  572. </section>

  573. 

  574. </section>

  575. 

  576. <section>

  577. <h2 id="fielddesign"><a href="#fielddesign">Incidence sur la conception de champs de formulaires</a></h2>

  578. <aside class="insidenote"><img src="qa-personal-names-data/firstmlast.png" alt=" "  style="border-radius: 5px;"/></aside>

  579. <p>Comme nous le disions ci-dessus, une approche possible est de localiser un formulaire pour une culture particulière. En théorie cela devrait vous permettre d'assortir vos formulaires aux besoins de votre audience. Malheureusement, cette approche peut encore avoir certains désavantages&nbsp;:</p>

  580. <ul>

  581. <li>Si vous devez centraliser les informations de plusieurs pays dans une seule base de données, utiliser des formulaires localisés déplacera simplement la difficulté de synthétiser l'information multi-culturelle vers le stockage de données.</li>

  582. <li>Même au sein d'un seul pays, les gens auront sûrement plusieurs manières de former leur nom. Par exemple il peut s'agir d'étrangers résidant dans le pays, il peut y avoir des cultures différentes dans le pays même (par exemple à Singapour les noms sont d'origine chinoise, malaise et d'Inde du Sud), ou il peut y avoir plus d'une façon d'utiliser les noms. En conclusion, vos formulaires devront permettre un certain degré de flexibilité.</li>

  583. </ul>

  584. <p>Nous proposons ci-dessous quelques règles générales qui pourront vous aider. C'est malheureusement un sujet complexe et toutes les suggestions que nous donnons restent génériques&nbsp;; elles ne traitent pas de tous les problèmes.</p>

  585. <section>

  586. <h3 id="singlefield"><a href="#singlefield">Couper ou ne pas couper&nbsp;?</a></h3>

  587. <p>En concevant un formulaire ou une base de données qui acceptera le nom de gens qui viennent de plusieurs origines, vous devriez

  588.   <mark id="req_onefield" class="requirement">vous demander si vous avez vraiment besoin de champs séparés pour le prénom et le nom de famille</mark>

  589.   .</p>

  590. <p>Tout dépend de ce que vous devez faire de ces données, mais à l'évidence il est plus simple, quand c'est possible, de n'utiliser que le nom complet tel que l'utilisateur vous l'aura fourni.</p>

  591. <figure class="example">

  592.   <div class="sample_form">

  593.     <p class="form_title">Votre profil</p>

  594.     <p>

  595.       <label for="fullname">Nom complet</label>

  596.       <br />

  597.       <input id="fullname" value="" type="text" style="width:250px;" />

  598.     </p>

  599.   </div>

  600. </figure>

  601. <p>Gardez bien à l'esprit que les noms dans certaines cultures peuvent être bien plus longs que dans la vôtre.

  602.   <mark id="req_longfield" class="requirement">Faites des champs de saisie suffisamment longs pour entrer des noms longs, et assurez-vous que si le nom est affiché ultérieurement dans une page web il disposera d'assez d'espace</mark>

  603.   . De plus

  604.   <mark class="requirement">évitez de limiter la taille des champs de noms dans votre base de données</mark>

  605.   .

  606.   En particulier ne vous attendez pas à ce qu'un nom japonais de quatre caractères en UTF-8 tienne sur 4 octets&nbsp;; il y a de fortes chances qu'il vous en faille 12.</p>

  607. </section>

  608. 

  609. <section>

  610. <h3 id="splitting"><a href="#splitting">Stratégies pour couper les noms</a></h3>

  611. <p>Si vous considérez que vous devez tout de même demander les différentes parties d'un nom séparément,

  612.   <mark class="requirement">évitez d'utiliser des intitulés comme &laquo;&nbsp;<span lang="en">first name</span>&nbsp;&raquo; et &laquo;&nbsp;<span lang="en">last name</span>&nbsp;&raquo; dans des formulaires non localisés</mark>

  613.   (<abbr title="Note de traduction">NDT</abbr>&nbsp;: grossièrement, &laquo;&nbsp;prénom&nbsp;&raquo; et &laquo;&nbsp;nom de famille&nbsp;&raquo;), parce qu'ils peuvent induire en erreur des gens qui écrivent habituellement leur nom de famille suivi de leur prénom.</p>

  614. <figure class="example">

  615.   <div class="sample_form">

  616.     <p class="form_title">Votre profil</p>

  617.     <p>

  618.       <label for="familyname">Nom de famille</label>

  619.       <br />

  620.       <input id="familyname" value="" type="text" style="width:250px;" />

  621.     </p>

  622.     <p>

  623.       <label for="othernames">Prénom / autres noms</label>

  624.       <br />

  625.       <input id="othernames" value="" type="text" style="width:250px;" />

  626.     </p>

  627.   </div>

  628. </figure>

  629. <p>Pour certaines cultures, ces intitulés posent encore des problèmes (par exemple pour les Islandais qui n'ont pas réellement de nom de famille), mais sauf à localiser très précisément le formulaire, c'est sans doute la meilleure solution générique.</p>

  630. <p>Dans certains cas, vous voudrez identifier des parties du nom pour pouvoir faire un tri alphabétique, les contacter, etc.

  631.   <mark id="req_extrafield" class="requirement">Demandez-vous si ajouter un ou plusieurs champs, en plus du champ de nom complet, a du sens, quand vous priez l'utilisateur de saisir la(les) partie(s) de son nom que vous voulez utiliser dans un but particulier</mark>

  632.   .</p>

  633. <aside class="insidenote"> <img src="qa-personal-names-data/circles.png" alt=' ' /> </aside>

  634. <p>Quelquefois vous pouvez choisir d'utiliser des champs séparés pour pouvoir identifier la partie du nom qui vous permet de vous adresser à la personne directement, ou quand vous la mentionnez. Par exemple quand Google+ mentionne &laquo;&nbsp;Les contacts de Richard&nbsp;&raquo;. Ou peut-être que vous voulez envoyer des mails qui commencent par leur nom. Notez que non seulement vous risquez d'avoir des problèmes liés à la syntaxe du nom, mais vous devez aussi prendre en compte les attentes différentes eu égard à la formalité d'un endroit du monde à l'autre (tout le monde n'est pas heureux de s'entendre adresser par son prénom par un parfait étranger). Il peut être mieux de

  635.   <mark id="req_addressfield" class="requirement">demander à part, quand on saisit son profil par exemple, comment une personne souhaite qu'on s'adresse à elle.</mark>

  636. </p>

  637. <figure class="example">

  638.   <div class="sample_form">

  639.     <p class="form_title">Votre profil</p>

  640.     <p>

  641.       <label for="fullname3">Nom complet</label>

  642.       <br />

  643.       <input id="fullname3" value="" type="text" style="width:250px;" />

  644.     </p>

  645.     <p>

  646.       <label for="salutation">Comment devons-nous vous appeler&nbsp;? <span style="color:#888;">(par exemple, quand nous vous envoyons un mail&nbsp;?)</span></label>

  647.       <br />

  648.       <input id="salutation" value="" type="text" style="width:250px;" />

  649.     </p>

  650.   </div>

  651. </figure>

  652. <p>Ce champ supplémentaire pourra aussi être utile pour trouver le bon nom dans une grande liste, ou pour saisir les surnoms Thaïs.</p>

  653. <p>Au fait&nbsp;: pour trier les noms japonais vous aurez besoin d'un champ de plus pour leur permettre de saisir la prononciation de leur nom, puisque les idéogrammes ne permettent pas toujours de savoir comment les prononcer. C'est cette information phonétique qui est utilisée pour trier les noms japonais.</p>

  654. <p>De plus,

  655.   <mark id="req_labeling" class="requirement">si vous avez des champs séparés pour les différentes parties du nom d'une personne, assurez-vous de bien indiquer ce que vous voulez et où</mark>

  656.   . Par exemple, ne vous attendez pas à ce que l'ordre dans lequel ils vous donnent leur nom soit toujours prénom suivi de nom.</p>

  657. <p>Par ailleurs,

  658.   <mark id="req_algorithms" class="requirement">méfiez-vous des algorithmes qui extraient automatiquement des parties du nom</mark>

  659.   . Par exemple, l'approche utilisée pour la v-card et la h-card, <a class="print" href="http://microformats.org/wiki/hcard#Implied_.22N.22_Optimization" hreflang="en">l'optimisation implicite &laquo;&nbsp;N&nbsp;&raquo;</a> pourra être mise en péril par, disons, des noms chinois. Vous devriez

  660.   <mark id="clearlabels" class="requirement">indiquer aussi précisément que possible la façon dont les gens doivent spécifier leur nom</mark>

  661.   afin de récupérer les données dont vous avez besoin.</p>

  662. <p>

  663.   <mark id="req_singleletter" class="requirement">Ne considérez pas qu'une lettre toute seule est une initiale</mark>

  664.   . Certaines personnes ont effectivement des noms longs d'une seule lettre. Ces personnes auront des soucis si la validation du formulaire ne se fait pas et exige qu'elles fournissent un nom <em>complet</em>. Si vous voulez pousser les gens à ne pas utiliser d'initiales, peut-être devrez-vous l'indiquer sous forme de message d'avertissement, plutôt que de bloquer la soumission du formulaire.</p>

  665. <p>De même,

  666.   <mark id="req_nofamily" class="requirement">n'exigez pas un nom de famille</mark>

  667.   . Pour des cultures comme dans certaines parties d'Inde du Sud, de Malaisie ou d'Indonésie, un grand nombre de gens ont un nom constitué d'un prénom seul, sans patronyme. Si vous exigez un nom de famille, vous induirez des problèmes significatifs dans ces cultures, parce que les utilisateurs saisiront des données fausses comme &laquo;&nbsp;.&nbsp;&raquo; ou &laquo;&nbsp;M.&nbsp;&raquo; comme nom de famille, simplement pour se sortir du formulaire.</p>

  668. </section>

  669. 

  670. <section>

  671. <h3 id="otherthings"><a href="#otherthings">Quelques autres choses</a></h3>

  672. <p>

  673.   <mark id="req_hyphens" class="requirement">N'oubliez pas d'autoriser les caractères de ponctuation (tirets, apostrophes, etc.) dans leur nom</mark>

  674.   .

  675.   <mark id="req_case" class="requirement">N'exigez pas que les noms soient saisis entièrement en majuscules</mark>

  676.   , ce qui peut se révéler difficile avec un mobile.

  677.   <mark id="req_spaces" class="requirement">Permettez à l'utilisateur de saisir des espaces dans son nom</mark>

  678.   , par exemple pour permettre les préfixes et les suffixes tels que ‘de’ en français, ‘von’ en allemand, ‘Jnr/Jr’ en américain, et aussi parce que certaines personnes considèrent qu'une séquence de caractères séparés par des espaces forme un nom unique, comme Rose Marie.</p>

  679. <p>

  680.   <mark id="req_samefamily" class="requirement">Ne considérez pas que tous les membres d'une même famille auront le même nom de famille</mark>

  681.   .</p>

  682. <p>Nous l'avons vu, les femmes ne sont pas seules à pouvoir changer de nom de famille&nbsp;:

  683.   <mark class="requirement">Il peut être mieux de demander le &laquo;&nbsp;Nom précédent&nbsp;&raquo; plutôt que le &laquo;&nbsp;Nom de jeune fille&nbsp;&raquo; ou &laquo;&nbsp;née&nbsp;&raquo;</mark>

  684.   .</p>

  685. <p>Si vous concevez des formulaires qui seront localisés selon la culture, n'oubliez pas que les parties atomiques d'un nom devront être centralisées dans une base de données, qui devra donc être capable de représenter toute la complexité que vous aurez fait redescendre au niveau de la forme même des champs de saisie.</p>

  686. </section>

  687. 

  688. </section>

  689. 

  690. <section>

  691. <h2 id="encoding"><a href="#encoding">Incidence sur le support de caractères</a></h2>

  692. <p>La première chose dont les anglophones doivent se rappeler à propos du nom des autres est que la plupart d'entre eux n'utilise pas un alphabet latin, et que <em>même</em> dans ceux qui l'utilisent, une majorité utilise des accents et des caractères qui n'apparaissent pas en anglais. &Ccedil;a paraît évident, une fois qu'on l'a dit, mais il y a des conséquences importantes pour les concepteurs qui sont souvent ignorées.</p>

  693. <div class="sidenoteGroup">

  694. <p>Si vous concevez un formulaire anglais, vous devez choisir si vous acceptez que les gens saisissent leur nom dans leur propre écriture (comme 小林康宏) ou sous forme de transcription latine (comme Yasuhiro Kobayashi), ou les deux.</p>

  695. <p>Rappelez-vous que même des noms en anglais peuvent comporter des caractères non-ASCII (comme Zoë).</p>

  696. <p>D'un autre côté, il y a des situations, comme la saisie d'un identifiant sur un système seulement ASCII, où vous ne pouvez pas permettre de caractères non-ASCII.</p>

  697. <p>Ce que les gens saisiront dans le formulaire dépendra souvent de la langue dans laquelle le formulaire et la page sont réalisés. Si la page est dans leur langue, ne soyez pas surpris qu'ils vous renvoient des caractères non-latins ou latins accentués.</p>

  698. <aside class="sideinfonote"><p class="info">En termes de lettres, ASCII seulement signifie qu'on n'utilise que les lettres de base de l'alphabet anglais, ABCDEFGHIJKLMNOPQRSTUVWXYZ (majuscules et minuscules).</p></aside>

  699. </div>

  700. <div class="sidenoteGroup">

  701. <p>

  702.   <mark id="req_asciionly" class="requirement">Si vous ne souhaitez que des caractères latins ou ASCII, vous devez l'indiquer à l'utilisateur.</mark>

  703. </p>

  704. <aside class="sideinfonote"><p class="warning">N'oubliez pas d'indiquer aux gens qui traduiront cette page de l'expliquer aux utilisateurs.</p></aside>

  705. </div>

  706. <figure class="example">

  707. <div class="sample_form">

  708.   <p class="form_title">Votre profil</p>

  709.   <p>

  710.     <label for="asciionly">Nom complet &#xA0; <span style="color:#888;">(N'utilisez que des lettres de A à Z sans accent.)</span></label>

  711.     <br />

  712.     <input id="asciionly" value="" type="text" style="width:250px;" />

  713.   </p>

  714. </div>

  715. </figure>

  716. <p>Décider de ce qui est le plus approprié dépendra en partie de la raison pour laquelle vous collectez le nom des gens, et comment vous comptez l'utiliser.</p>

  717. <ul>

  718. <li>Collectez-vous le nom de la personne simplement pour pouvoir l'identifier dans votre système&nbsp;? Si oui, alors la saisie en ASCII peut être suffisante.</li>

  719. <li>Ou prévoyez-vous de l'appeler par son nom sur une page d'accueil ou dans une correspondance&nbsp;? Si vous correspondez avec eux en utilisant leur nom dans des pages écrites dans leur langue, il semblerait sensé de stocker le nom dans la langue originale.</li>

  720. <li>Est-il important que les gens de votre organisation qui reçoivent les demandes puissent reconnaître et utiliser le nom de la personne&nbsp;? Si oui, il vaudrait mieux demander une transcription latine.</li>

  721. <li>Leur nom sera-t-il affiché, pourra-t-il être recherché (par exemple, Flickr permet de montrer le nom des gens en plus de leur nom d'utilisateur sur la page de leur profil)&nbsp;? Ou est-ce que vous voudrez leur envoyer une correspondance dans leur propre langue, mais les suivre dans votre application dans un langage comme l'anglais&nbsp;? Si oui,

  722.   <mark id="req_asciiandnative" class="requirement">vous voudrez peut-être stocker le nom dans ses formes latine et originale, auquel cas vous devrez probablement demander à l'utilisateur de saisir son nom sous les formes latine et originale, dans deux champs séparés</mark>

  723.   .</li>

  724. </ul>

  725. <figure class="example">

  726. <div class="sample_form">

  727.   <p class="form_title">Votre profil</p>

  728.   <p>

  729.     <label for="ownalphabet">Nom (dans votre alphabet)</label>

  730.     <br />

  731.     <input id="ownalphabet" value="" type="text" style="width:250px;" />

  732.   </p>

  733.   <p>

  734.     <label for="latinonly">Transcription latine (si différente)</label>

  735.     <br />

  736.     <input id="latinonly" value="" type="text" style="width:250px;" />

  737.   </p>

  738. </div>

  739. </figure>

  740. <p>Notez que les Japonais pourront avoir besoin de fournir une transcription en script syllabique japonais plutôt que / en plus de la forme idéographique. Ce qui pourrait ajouter un troisième champ à l'exemple ci-dessus.</p>

  741. <p>

  742. <mark id="req_useunicode" class="requirement">Si vous acceptez bien les noms non-ASCII, il est conseillé d'adopter un encodage de caractères Unicode (par exemple UTF-8) dans vos pages, votre base de données et tous les logiciels qui sont entre les deux.</mark>

  743. Vous vous simplifierez grandement la vie.</p>

  744. </section>

  745. 

  746. <section>

  747. <h2 id="bytheway"><a href="#bytheway">By the way</a></h2>

  748. 

  749. <section>

  750. <h3 id="sorting"><a href="#sorting">Une note sur le tri</a></h3>

  751. <p>Les listes de noms ne sont pas toujours triées sur la base du nom de famille dans le monde entier. Par exemple, les Thaïs et les Islandais s'attendent à un tri sur la base du prénom.</p>

  752. <p>Prenons un autre exemple&nbsp;: il est possible que l'ordre de tri soit différent dans différentes zones du monde hispanophone. Par exemple, María-Jose Carreño Quiñones s'attendra à tel endroit à trouver son nom dans une liste en cherchant Carreño Quiñones. Cependant, une autre María-Jose Carreño Quiñones d'un autre endroit pourra s'attendre à trouver son nom trié à Quiñones.</p>

  753. <p>Le traitement des petits mots comme ‘von’, ‘de’ et ‘van’ apporte encore un peu de complication dans le tri. Parfois les préfixes sont porteurs de sens, et parfois non.</p>

  754. </section>

  755. <section>

  756. <h3 id="formality"><a href="#formality">Formalité et titres honorifiques</a></h3>

  757. <p>Différents niveaux de formalité s'appliquent dans différentes cultures. Vous devez le prendre en compte quand vous vous adressez à quelqu'un. Tandis que les prénoms deviennent une façon très courante de s'adresser aux gens en Occident et dans les cercles technologiques, ce n'est en aucun cas une pratique universellement acceptée. Contacter une personne pour la première fois au Royaume-Uni en utilisant son prénom peut quelquefois impliquer que vous l'avez déjà rencontrée.</p>

  758. <p>D'un autre côté, vous adresser à quelqu'un en utilisant son titre et son prénom (par exemple &laquo;&nbsp;M. Richard&nbsp;&raquo;) ou simplement par leur nom de famille (&laquo;&nbsp;Ishida&nbsp;!&nbsp;&raquo;) sont acceptables dans certaines parties du monde, mais pas dans d'autres (telles que le Royaume-Uni).</p>

  759. <p>En Allemagne, les titres sont importants, et vous pouvez avoir à faire référence à quelqu'un pas seulement en tant que Herr Schmidt, mais Herr Professor Doktor Schmidt.</p>

  760. <p>Dans une culture comme celle du Japon, il est normal d'ajouter au nom d'une personne que vous contactez un titre honorifique ou lié au travail. Par exemple, on s'attend à ce que vous parliez de Tanaka-san ou Tanaka-sama (selon la relation qui vous lie). Un responsable de département nommé Tanaka s'attend à ce qu'on le nomme Tanaka-bucho (Responsable de département Tanaka). Bien qu'on puisse attacher -san à un prénom, il serait très surprenant de le faire dans le milieu du travail.</p>

  761. </section>

  762. </section>

  763.   </article>

  764. </section>

  765. 

  766. 

  767. <nav id="jumpto">

  768.   <p>

  769.     <a href="/david/blog/">Accueil du blog</a> |

  770.     <a href="https://www.w3.org/International/questions/qa-personal-names">Source originale</a> |

  771.     <a href="/david/stream/2019/">Accueil du flux</a>

  772.   </p>

  773. </nav>

  774. 

  775. <footer>

  776.   <div>

  777.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  778.     <p>

  779.       Bonjour/Hi!

  780.       Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>

  781.       Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).

  782.     </p>

  783.     <p>

  784.       Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.

  785.     </p>

  786.     

  787.     <p>

  788.       Voici quelques articles choisis :

  789.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  790.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  791.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  792.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  793.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  794.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  795.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  796.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  797.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  798.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  799.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  800.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  801.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  802.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  803.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  804.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  805.     </p>

  806.     <p>

  807.       On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.

  808.     </p>

  809.     <p>

  810.       Je ne traque pas ta navigation mais mon

  811.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  812.       conserve des logs d’accès.

  813.     </p>

  814.   </div>

  815. </footer>

  816. <script type="text/javascript">

  817.   ;(_ => {

  818.     const jumper = document.getElementById('jumper')

  819.     jumper.addEventListener('click', e => {

  820.       e.preventDefault()

  821.       const anchor = e.target.getAttribute('href')

  822.       const targetEl = document.getElementById(anchor.substring(1))

  823.       targetEl.scrollIntoView({behavior: 'smooth'})

  824.     })

  825.   })()

  826. </script>