index.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365
  1. <!DOCTYPE html>
  2. <!--[if IE 8]><html class="no-js lt-ie9" lang="en" > <![endif]-->
  3. <!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
  4. <head>
  5. <meta charset="utf-8">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. <link rel="shortcut icon" href="../img/favicon.ico">
  9. <title>Nouvelle approche - Les Tutoriels du Yojik</title>
  10. <link rel="stylesheet" href="../css/theme.css" />
  11. <link rel="stylesheet" href="../css/theme_extra.css" />
  12. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css" />
  13. <script>
  14. // Current page data
  15. var mkdocs_page_name = "Nouvelle approche";
  16. var mkdocs_page_input_path = "Nouvelle-approche.md";
  17. var mkdocs_page_url = null;
  18. </script>
  19. <script src="../js/jquery-2.1.1.min.js" defer></script>
  20. <script src="../js/modernizr-2.8.3.min.js" defer></script>
  21. <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
  22. <script>hljs.initHighlightingOnLoad();</script>
  23. </head>
  24. <body class="wy-body-for-nav" role="document">
  25. <div class="wy-grid-for-nav">
  26. <nav data-toggle="wy-nav-shift" class="wy-nav-side stickynav">
  27. <div class="wy-side-scroll">
  28. <div class="wy-side-nav-search">
  29. <a href=".." class="icon icon-home"> Les Tutoriels du Yojik</a>
  30. <div role="search">
  31. <form id ="rtd-search-form" class="wy-form" action="../search.html" method="get">
  32. <input type="text" name="q" placeholder="Search docs" title="Type search term here" />
  33. </form>
  34. </div>
  35. </div>
  36. <div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
  37. <p class="caption"><span class="caption-text">Tutoriel Anki</span></p>
  38. <ul class="current">
  39. <li class="toctree-l1"><a class="reference internal" href="..">Introduction</a>
  40. </li>
  41. <li class="toctree-l1"><a class="reference internal" href="../Installation/">Installation</a>
  42. </li>
  43. <li class="toctree-l1"><a class="reference internal" href="../Les-fiches/">Les fiches</a>
  44. </li>
  45. <li class="toctree-l1"><a class="reference internal" href="../Premi%C3%A8re-utilisation/">Premières utilisations et impressions</a>
  46. </li>
  47. <li class="toctree-l1"><a class="reference internal" href="../Personnalisation/">Personnalisation</a>
  48. </li>
  49. <li class="toctree-l1"><a class="reference internal" href="../Cartes/">Les cartes</a>
  50. </li>
  51. <li class="toctree-l1"><a class="reference internal" href="../Compl%C3%A9tion/">Complétion</a>
  52. </li>
  53. <li class="toctree-l1 current"><a class="reference internal current" href="./">Nouvelle approche</a>
  54. <ul class="current">
  55. <li class="toctree-l2"><a class="reference internal" href="#le-fichier-de-la-lecon-1-et-2">Le fichier de la leçon 1 et 2</a>
  56. </li>
  57. <li class="toctree-l2"><a class="reference internal" href="#mise-en-oeuvre-de-notre-nouvelle-structure">Mise en oeuvre de notre nouvelle structure</a>
  58. </li>
  59. </ul>
  60. </li>
  61. <li class="toctree-l1"><a class="reference internal" href="../Champs-%C3%A9ditables-1/">Champs éditables «partie 1»</a>
  62. </li>
  63. <li class="toctree-l1"><a class="reference internal" href="../Champs-%C3%A9ditables-2/">Champs éditables «partie 2»</a>
  64. </li>
  65. </ul>
  66. </div>
  67. </div>
  68. </nav>
  69. <section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">
  70. <nav class="wy-nav-top" role="navigation" aria-label="top navigation">
  71. <i data-toggle="wy-nav-top" class="fa fa-bars"></i>
  72. <a href="..">Les Tutoriels du Yojik</a>
  73. </nav>
  74. <div class="wy-nav-content">
  75. <div class="rst-content">
  76. <div role="navigation" aria-label="breadcrumbs navigation">
  77. <ul class="wy-breadcrumbs">
  78. <li><a href="..">Docs</a> &raquo;</li>
  79. <li>Tutoriel Anki &raquo;</li>
  80. <li>Nouvelle approche</li>
  81. <li class="wy-breadcrumbs-aside">
  82. </li>
  83. </ul>
  84. <hr/>
  85. </div>
  86. <div role="main">
  87. <div class="section">
  88. <h1 id="nouvelle-approche">Nouvelle approche</h1>
  89. <p>Nous allons organiser nos paquets d'une façon différente, en ajoutant des champs qui permettront de trier en fonction de ceux-ci.</p>
  90. <p>Par exemple, si nous créons un paquet avec tous les cours de japonais, nous pouvons ajouter un champ qui indique la leçon. Ce qui nous permettra après tri, de n'étudier qu'une leçon particulière ou plusieurs d'ailleurs suivant la façon dont nous allons trier nos fiches.</p>
  91. <p>Nous pouvons aussi ajouter des subdivisions plus fines : par exemple dans les exemples précédents, nous pourrions ajouter un champ qui indique la ligne du tableau.</p>
  92. <p>Ce qui nous donnerait la structure suivante : </p>
  93. <pre><code>あ➛a➛[sound:a.ogg]➛leçon 1➛ligne 1
  94. </code></pre>
  95. <p>Les intitulés «leçon» et «ligne» ne sont pas absolument nécessaires. Il suffit de documenter son fichier, et il ne restera que ceci, bien plus facile à trier :</p>
  96. <pre><code>あ➛a➛[sound:a.ogg]➛1➛1
  97. </code></pre>
  98. <p>Le nom du champ reflétera le contenu de ceux-ci.</p>
  99. <h2 id="le-fichier-de-la-lecon-1-et-2">Le fichier de la leçon 1 et 2</h2>
  100. <p>Ce fichier contiendra le contenu des 2 leçons, et nous pourrons les distinguer par le champ «leçon» ajouté à la structure.</p>
  101. <p>En voilà un extrait : </p>
  102. <pre><code>あ a [sound:a.ogg] 1
  103. い i [sound:i.ogg] 1
  104. う u [sound:u.ogg] 1
  105. え e [sound:e.ogg] 1
  106. お o [sound:o.ogg] 1
  107. ...
  108. ア A [sound:a.wav] 2
  109. イ I [sound:i.wav] 2
  110. ウ U [sound:u.wav] 2
  111. エ E [sound:e.wav] 2
  112. オ O [sound:o.wav] 2
  113. カ KA [sound:ka.wav] 2
  114. </code></pre>
  115. <p>Maintenant ajoutons un champ pour différentier les lignes des tableaux. Cela nous donnera ceci : </p>
  116. <pre><code>あ a [sound:a.ogg] 1 1
  117. い i [sound:i.ogg] 1 1
  118. う u [sound:u.ogg] 1 1
  119. え e [sound:e.ogg] 1 1
  120. お o [sound:o.ogg] 1 1
  121. ...
  122. ア A [sound:a.wav] 2 1
  123. イ I [sound:i.wav] 2 1
  124. ウ U [sound:u.wav] 2 1
  125. エ E [sound:e.wav] 2 1
  126. オ O [sound:o.wav] 2 1
  127. カ KA [sound:ka.wav] 2 2
  128. Nous pouvons ajouter en plus une référence au cours et à l'auteur (ce que je fais toujours) :
  129. あ a [sound:a.ogg] 1 1 cours de japonais Julien Fontanier
  130. い i [sound:i.ogg] 1 1 cours de japonais Julien Fontanier
  131. う u [sound:u.ogg] 1 1 cours de japonais Julien Fontanier
  132. え e [sound:e.ogg] 1 1 cours de japonais Julien Fontanier
  133. お o [sound:o.ogg] 1 1 cours de japonais Julien Fontanier
  134. ...
  135. ア A [sound:a.wav] 2 1 cours de japonais Julien Fontanier
  136. イ I [sound:i.wav] 2 1 cours de japonais Julien Fontanier
  137. ウ U [sound:u.wav] 2 1 cours de japonais Julien Fontanier
  138. エ E [sound:e.wav] 2 1 cours de japonais Julien Fontanier
  139. オ O [sound:o.wav] 2 1 cours de japonais Julien Fontanier
  140. カ KA [sound:ka.wav] 2 2 cours de japonais Julien Fontanier
  141. </code></pre>
  142. <p>Il est possible d'ajuster le nombre de champs à notre convenance. Ce sera à nous de gérer l'affichage des informations sur le recto et le verso des cartes.</p>
  143. <h2 id="mise-en-oeuvre-de-notre-nouvelle-structure">Mise en oeuvre de notre nouvelle structure</h2>
  144. <p>Le fichier avec les modifications est disponible ici : <a href="../Ressources/le%C3%A7ons-1-2.csv">Leçons 1 et 2</a></p>
  145. <p>La structure est la suivante : </p>
  146. <ul>
  147. <li>kana</li>
  148. <li>phonétique</li>
  149. <li>audio</li>
  150. <li>leçon</li>
  151. <li>ligne</li>
  152. <li>cours</li>
  153. <li>auteur</li>
  154. </ul>
  155. <p>Nous allons importer ce fichier après avoir créé un nouveau type de note qui contiendra nos champs. Voilà les étapes (je suis reparti d'un Anki vierge) : </p>
  156. <ol>
  157. <li>
  158. <p>création de notre note avec les nouveaux champs</p>
  159. <p><img alt="étape 40" src="../Images/image-49.png" /></p>
  160. <p><img alt="étape 41" src="../Images/image-50.png" /></p>
  161. <p><img alt="étape 42" src="../Images/image-51.png" /></p>
  162. <p><img alt="étape 43" src="../Images/image-52.png" /></p>
  163. <p><img alt="étape 44" src="../Images/image-53.png" /></p>
  164. <p><img alt="étape 45" src="../Images/image-54.png" /></p>
  165. <p><img alt="étape 46" src="../Images/image-55.png" /></p>
  166. <p><img alt="étape 47" src="../Images/image-56.png" /></p>
  167. <p><img alt="étape 48" src="../Images/image-57.png" /></p>
  168. <p><img alt="étape 49" src="../Images/image-58.png" /></p>
  169. <p><img alt="étape 50" src="../Images/image-59.png" /></p>
  170. <p><img alt="étape 51" src="../Images/image-60.png" /></p>
  171. <p><img alt="étape 52" src="../Images/image-61.png" /></p>
  172. <p><img alt="étape 53" src="../Images/image-62.png" /></p>
  173. <p><img alt="étape 54" src="../Images/image-63.png" /></p>
  174. </li>
  175. <li>
  176. <p>importation du fichier</p>
  177. <p><img alt="étape 55" src="../Images/image-64.png" /></p>
  178. </li>
  179. <li>
  180. <p>test</p>
  181. <p><img alt="étape 56" src="../Images/image-65.png" /></p>
  182. </li>
  183. <li>
  184. <p>méthode de tri pour l'étude</p>
  185. <p><img alt="étape 57" src="../Images/image-66.png" /></p>
  186. <p>Ici nous sélectionnons le leçon:1 et la ligne:1</p>
  187. <p><img alt="étape 58" src="../Images/image-67.png" /></p>
  188. <p><img alt="étape 59" src="../Images/image-68.png" /></p>
  189. <p>Nous voyons que les 5 fiches correspondant à la première ligne du tableau des hiragana a été sélectionée.</p>
  190. </li>
  191. <li>
  192. <p>importation des médias (nos sons)</p>
  193. <p>Sous Linux, les médias sont importés dans le répertoire : </p>
  194. <pre><code>~/.local/share/anki2/Utilisateur 1/collection.media/
  195. </code></pre>
  196. <p>Sous Windows ou Mac, je ne sais pas ...</p>
  197. </li>
  198. <li>
  199. <p>personnalisation des cartes recto et verso</p>
  200. <p>Voilà le contenu des 3 panneaux correspondants au recto, à la zone réservée au style .css, et au verso.</p>
  201. <ul>
  202. <li>
  203. <p>recto</p>
  204. <pre><code>&lt;div class=tags&gt;Leçon {{leçon}} -- Ligne {{ligne}} -- Paquet {{Deck}} -- Auteur {{auteur}}&lt;/div&gt;
  205. &lt;div class="cadrequestion"&gt;
  206. &lt;span class="kana"&gt;{{kana}}&lt;/span&gt;
  207. &lt;/div&gt;
  208. </code></pre>
  209. </li>
  210. <li>
  211. <p>style</p>
  212. <pre><code>.card {
  213. font-family: arial;
  214. font-size: 20px;
  215. text-align: center;
  216. color: black;
  217. background-color: white;
  218. }
  219. .kana {
  220. font-size: 40px;
  221. color: blue;
  222. }
  223. .phonétique {
  224. font-size: 35px;
  225. }
  226. .tags {color:gray;text-align:right;font-size:10pt;}
  227. .cadrequestion {
  228. background-color: lightgrey;
  229. border-radius: 15px;
  230. border: 1px solid red;
  231. padding: 15px;
  232. margin-top: 10px;
  233. }
  234. .cadrereponse {
  235. background-color: lightgrey;
  236. border-radius: 10px;
  237. border: 1px solid red;
  238. border-shadow: 5px 10px;
  239. padding: 15px;
  240. margin-top: 10px;
  241. }
  242. </code></pre>
  243. </li>
  244. <li>
  245. <p>verso</p>
  246. <pre><code>{{FrontSide}}
  247. &lt;hr id=answer&gt;
  248. &lt;div class="cadrereponse"&gt;
  249. &lt;span class="phonétique"&gt;{{phonétique}}&lt;/span&gt;
  250. {{audio}}
  251. &lt;/div&gt;
  252. </code></pre>
  253. <p><img alt="étape 60" src="../Images/image-71.png" /></p>
  254. <p>Nous pouvons voir un exemple de notre configuration en cliquant sur le mode aperçu en haut et à droite de la fenêtre, après avoir chosi le mode parcourir.</p>
  255. <p>Le mode parcourir permet de jsutement parcourir nos collections, d'éditer individuellement chaque carte. Cette fenêtre est disponible sur l'écran de départ. Pensez à choisir la bonne collection, comme sur la copie d'écran (japonais). En effet, tous les types de cartes sont présentées sur cette page.</p>
  256. <p><img alt="étape 61" src="../Images/image-72.png" /></p>
  257. <p><img alt="étape 62" src="../Images/image-73.png" /></p>
  258. </li>
  259. </ul>
  260. </li>
  261. <li>
  262. <p>test</p>
  263. <p><img alt="étape 63" src="../Images/image-78.png" /></p>
  264. <p>L'apparence est quand même plus agréable!</p>
  265. <p><img alt="étape 64" src="../Images/image-79.png" /></p>
  266. </li>
  267. <li>
  268. <p>exportation de notre paquet</p>
  269. <p>Allez dans «Fichier-&gt;exporter». Choisissez le type de paquet que vous voulez, l'ensemble de vos paquets ou des paquets en particulier.</p>
  270. <p><img alt="étape 65" src="../Images/image-80.png" /> </p>
  271. <p><img alt="étape 66" src="../Images/image-81.png" /></p>
  272. </li>
  273. </ol>
  274. <p>Voilà une fin provisoire de notre tutoriel.</p>
  275. <p>Vous avez appris à créer une collection, importer des données, des médias, à filtrer votre collection pour en découper l'étude, et à en améliorer considérablement l'esthétique.</p>
  276. <p>Je rajouterai des chapitres en fonction de mes propres découvertes.</p>
  277. <p>Sur le site de Anki, un manuel complet en français est disponible.</p>
  278. </div>
  279. </div>
  280. <footer>
  281. <div class="rst-footer-buttons" role="navigation" aria-label="footer navigation">
  282. <a href="../Champs-%C3%A9ditables-1/" class="btn btn-neutral float-right" title="Champs éditables «partie 1»">Next <span class="icon icon-circle-arrow-right"></span></a>
  283. <a href="../Compl%C3%A9tion/" class="btn btn-neutral" title="Complétion"><span class="icon icon-circle-arrow-left"></span> Previous</a>
  284. </div>
  285. <hr/>
  286. <div role="contentinfo">
  287. <!-- Copyright etc -->
  288. </div>
  289. Built with <a href="https://www.mkdocs.org/">MkDocs</a> using a <a href="https://github.com/snide/sphinx_rtd_theme">theme</a> provided by <a href="https://readthedocs.org">Read the Docs</a>.
  290. </footer>
  291. </div>
  292. </div>
  293. </section>
  294. </div>
  295. <div class="rst-versions" role="note" aria-label="versions">
  296. <span class="rst-current-version" data-toggle="rst-current-version">
  297. <span><a href="../Compl%C3%A9tion/" style="color: #fcfcfc;">&laquo; Previous</a></span>
  298. <span style="margin-left: 15px"><a href="../Champs-%C3%A9ditables-1/" style="color: #fcfcfc">Next &raquo;</a></span>
  299. </span>
  300. </div>
  301. <script>var base_url = '..';</script>
  302. <script src="../js/theme.js" defer></script>
  303. <script src="../search/main.js" defer></script>
  304. <script defer>
  305. window.onload = function () {
  306. SphinxRtdTheme.Navigation.enable(true);
  307. };
  308. </script>
  309. </body>
  310. </html>