Skip to content

Commit

Permalink
Trad et dossier en
Browse files Browse the repository at this point in the history 
*création dossier en pour la trad anglaise
*en/index.htm : traduction ok (à relire par tiers)
*lang_en.js : trad revue
* index.htm : ajout lien vers version anglaise
  • Loading branch information
llu_ne committed Apr 14, 2015
1 parent 9b0ecce commit 4cfdabc
Show file tree
Hide file tree
Showing 4 changed files with 69 additions and 58 deletions.
96 changes: 51 additions & 45 deletions index-en.htm → en/index.htm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@
<head>
<title>AccesSlide Slideshow - Access 42</title>
<meta charset="utf-8"> <!-- Layout stylesheet -->
<link rel="stylesheet" href="css/font/small.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="../css/font/small.css" type="text/css" media="screen">
<link rel="stylesheet" href="../css/style.css" type="text/css" media="screen">
<!-- Theme stylesheet -->
<link rel="stylesheet" id="currentCSS" href="css/themes/default.min.css" type="text/css" media="all">
<link rel="stylesheet" href="css/print.css" type="text/css" media="print">
<link rel="stylesheet" id="currentCSS" href="../css/themes/default.min.css" type="text/css" media="all">
<link rel="stylesheet" href="../css/print.css" type="text/css" media="print">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="AccesSlide.js"></script>
<script src="lang/lang_en.js"></script>
<script src="highlight/highlight.pack.js"></script>
<script src="../AccesSlide.js"></script>
<script src="../lang/lang_en.js"></script>
<script src="../highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<style>
.lang-btn{position:absolute;text-decoration:none;font-size:70%;right:20px;border:1px solid #333;border-top:0;padding:0 5px 3px 5px;border-radius:0 0 3px 3px;z-index:900}
Expand All @@ -22,14 +22,14 @@

<body>

<a href="#" class="btn-github noprint"><img src="img_slide/forkme.png" alt="Fork me on Github"></a>
<a lang="fr" class="lang-btn" href="../fr/">Français</a>
<a href="#" class="btn-github noprint"><img src="../img_slide/forkme.png" alt="Fork me on Github"></a>
<a lang="fr" class="lang-btn" href="../index.htm">Français</a>
<div id="screen" class="modeplan" data-effect="Eno">

<div id="volet"></div>

<header id="banner" role="banner" class="main-header clearfix">
<a href="http://www.access42.net"><img id="logo" class="main-logo" src="img_slide/logo_transparent.png" alt="Access42" /></a>
<a href="http://www.access42.net"><img id="logo" class="main-logo" src="../img_slide/logo_transparent.png" alt="Access42" /></a>
<h1 class="main-title">AccesSlide Slideshow - Access 42</h1>
</header>

Expand Down Expand Up @@ -60,14 +60,14 @@ <h1 class="main-title">AccesSlide Slideshow - Access 42</h1>
<main role="main" id="main">

<section class="slide couv">
<h2>AccesSlide <br /><span class="small">Finally an accessible slideshow</span></h2>
<h2>AccesSlide<br /><span class="small">Finally an accessible slideshow</span></h2>
<p>by <a href="http://www.access42.net">Access42</a></p>
</section>

<section class="slide">
<h2>Structure</h2>
<p>Put the slides in the <code>main</code> element with <code>section</code> elements associated with a <code>slide</code> class.</p>
<p>The first and the last slide have an extra class : respectively a <code>couv</code> and <code>end</code> class.</p>
<p>The first and the last slide have an extra class: respectively a <code>couv</code> and <code>end</code> class.</p>
<p><code>section</code> elements can be imbricated in <code>section</code> elements.</p>
</section>

Expand All @@ -85,11 +85,11 @@ <h2>Short example of structure</h2>

<section class="slide">
<h2>Hide elements</h2>
<p>Every <code>HTML</code> elements of a slide can be hidden using the <code>Cmasque</code> class, they will appear with the action <q>next slide</q>.
<p>Every <code>html</code> elements of a slide can be hidden using the <code>Cmasque</code> class, they will appear with the action <q>next slide</q>.
</p>
<p>Example : there is three hidden elements in this slide.</p>
<p>Example: there is three hidden elements in this slide.</p>
<ul>
<li class="Cmasque">hidden text,</li>
<li class="Cmasque">A hidden text,</li>
<li class="Cmasque">a second hidden text, <span class="Cmasque"> a hidden inline element.</span></li>
</ul>
</section>
Expand All @@ -98,12 +98,12 @@ <h2>Hide elements</h2>
<h2>Navigation</h2>
<p>The navigation bar has (in order of appearance):</p>
<ol>
<li>a <kbd>previous</kbd> button</li>
<li>a <kbd>selection list</kbd> to reach a slide by its index</li>
<li>a <kbd>next</kbd> button</li>
<li>a <kbd>table of contents</kbd> to reach a slide through its title</li>
<li>the index (number of the current slide and total of slides)</li>
<li>a <kbd>configuration</kbd> button</li>
<li>a <kbd>previous</kbd> button;</li>
<li>a <kbd>selection list</kbd>: select the number of the slide you want to reach;</li>
<li>a <kbd>next</kbd> button;</li>
<li>a <kbd>table of contents</kbd>: reach a slide through its title;</li>
<li>the index (number of the current slide and total of slides);</li>
<li>a <kbd>configuration</kbd> button.</li>
</ol>
</section>

Expand All @@ -116,18 +116,24 @@ <h2>Keyboard navigation</h2>
<li><kbd>End</kbd> Last slide</li>
<li><kbd>ALT + 0 (zero)</kbd> Table of contents</li>
</ul>
<p class="small">To go to the next slide with Jaws : ignore the next keystroke (using <kbd>INSERT</kbd> + <kbd>3</kbd>) then press <kbd>SPACE</kbd> to make the slideshow scroll.</p>
<p class="small">To go to the next slide with Jaws: ignore the next keystroke (using <kbd>INSERT</kbd> + <kbd>3</kbd>) then press <kbd>SPACE</kbd> to make the slideshow scroll.</p>
<p class="small">With NVDA, ignoring the next key is not necessary, the SPACE keystroke works.</p>
</section>

<section class="slide">
<h2>Remote navigation</h2>
<p>You can navigate in the slideshow with a remote.</p>
<p>Use the equivalent of <kbd>LEFT ARROW</kbd> and <kbd>RIGHT ARROW</kbd>.</p>
</section>

<section class="slide">
<h2>Effects</h2>
<p>The available effects can be set in the configuration panel.</p>
<h3>To create your own effect:</h3>
<ol>
<li>Create a <code>class</code>, for example <code>.my-effect</code></li>
<li>In the <code>AccesSlide.js</code> file, create an entry in the <code>config</code> object (see the instructions in the file at the <code>Effects</code> section)</li>
<li>In the language file: create an entry for the tag's effect. Warning: the entry in the language file must have the same name than the <code>config</code> object</li>
<li>Create a <code>class</code>, for example <code>.my-effect</code>.</li>
<li>In the <code>AccesSlide.js</code> file, create an entry in the <code>config</code> object (see the instructions in the file at the <code>Effects</code> section).</li>
<li>In the language file: create an entry for the tag's effect. Warning: the entry in the language file must have the same name than the <code>config</code> object.</li>
</ol>
<p>The new effect will be automatically added to the list of effects in the configuration panel.</p>
</section>
Expand All @@ -136,8 +142,8 @@ <h3>To create your own effect:</h3>
<h2>CSS</h2>
<p>2 CSS files are necessary:</p>
<ul>
<li><code>css/style.css</code> : general properties of the slideshow</li>
<li><code>css/themes/default.css</code> : theme</li>
<li><code>css/style.css</code> general properties of the slideshow</li>
<li><code>css/themes/default.css</code> theme</li>
</ul>
</section>

Expand Down Expand Up @@ -167,7 +173,7 @@ <h2>Post-processor</h2>
<h2>Automation with Grunt</h2>
<p>A minimal grunt configuration is also available for CSS compilation. 4 modules are configured in <code>Gruntfile.js</code>: </p>
<ul>
<li><a href="https://www.npmjs.com/package/grunt-myth">grunt-myth</a> : to compile CSS</li>
<li><a href="https://www.npmjs.com/package/grunt-myth">grunt-myth</a>: to compile CSS</li>
<li><a href="https://www.npmjs.com/package/grunt-contrib-cssmin">grunt-contrib-cssmin</a>: to minify CSS</li>
<li><a href="https://www.npmjs.com/package/grunt-combine-media-queries">grunt-combine-media-queries</a>: to combine media queries</li>
<li><a href="https://www.npmjs.com/package/grunt-contrib-watch">grunt-contrib-watch</a></li>
Expand All @@ -178,7 +184,7 @@ <h2>Automation with Grunt</h2>
<h2>Customizing the interface</h2>
<div class="col-left">
<p>Icons (toolbar, configuration panel) are generated thanks to <a href="http://fortawesome.github.io/Font-Awesome/">fontawesome</a>.</p>
<p>If the font is not loading, images in the <code>img</code> folder are taking over. This fallback is provided by the <a href="https://github.com/filamentgroup/a-font-garde">a font garde</a> script from the Filament Group.</p>
<p>If the font is not loading, images in the <code>img</code> folder take over. This fallback is provided by the <a href="https://github.com/filamentgroup/a-font-garde">a font garde</a> script from the Filament Group.</p>
</div>
<div class="col-left">
<p>AccesSlide CSS files don't include the entire fontawesome library. To edit an icon, check the <a href="http://fortawesome.github.io/Font-Awesome/icons/">fontawesome documentation</a> and edit the AccesSlide CSS file with the required code.</p>
Expand Down Expand Up @@ -254,17 +260,17 @@ <h2>Responsive design</h2>

<section class="slide">
<h2>Accessibility parameters</h2>
<p>You will find these parameters in the configuration panel. The parameters are persistent (use of <code>cookies</code> or of <code>localStorage</code> when possible). Use the <kbd>default</kbd> button to go back to the default configuration.</p>
<p>You will find these parameters in the configuration panel. The parameters are persistent (use of <code>cookies</code> or of <code>localStorage</code> when possible). Use the <kbd>Default</kbd> button to go back to the default configuration.</p>
<ul>
<li><code>Slide number</code> Read the number of the slides.</li>
<li><code>Hidden texts</code> Beep when a hidden text appears.</li>
<li><code>Slide</code> Beep when a slide is displayed.</li>
<li><code>Slide number</code> Read the slide number when displayed.</li>
<li><code>Hidden content</code> Beep when a hidden content appears.</li>
<li><code>Slide</code> Beep when displaying a slide.</li>
<li><code>First slide</code> Beep at the first slide.</li>
<li><code>Last slide</code> Beep at the last slide.</li>
<li><code>Title</code> Read the title of the current slide.</li>
<li><code>Window title</code> Update the title of the window during the display of the current slide.</li>
<li><code>Next button</code> Place the focus on the "Next" button during the slideshow loading </li>
<li><code>Click</code> Disable the click allowing to go to the next slide.</li>
<li><code>Heading</code> Read the heading of the current slide.</li>
<li><code>Window heading</code> Update the window heading when a slide is displayed.</li>
<li><code>Next button</code> Place the focus on the “Next” button when the slideshow is loading.</li>
<li><code>Click</code> Remove the click action (and the space bar) to display the next slide.</li>
</ul>
</section>

Expand All @@ -273,8 +279,8 @@ <h2>Sounds library</h2>
<div class="discT">
<ul id="discUL" class="list-disc">
<li><button class="disc disc1" type="button" onClick="document.getElementById('audiotest1').play();">First slide</button></li>
<li><button class="disc disc1" type="button" onClick="document.getElementById('audiotest2').play();">Hidden texts</button></li>
<li><button class="disc disc1" type="button" onClick="document.getElementById('audiotest3').play();">Show slides</button></li>
<li><button class="disc disc1" type="button" onClick="document.getElementById('audiotest2').play();">Hidden content</button></li>
<li><button class="disc disc1" type="button" onClick="document.getElementById('audiotest3').play();">Slide display</button></li>
<li><button class="disc disc1" type="button" onClick="document.getElementById('audiotest4').play();">Last slide</button></li>
</ul>
<div style="display:none">
Expand All @@ -301,8 +307,8 @@ <h2>Sounds library</h2>
<section class="slide">
<h2>Other parameters</h2>
<ul>
<li><code>Table of contents</code>: Chose the behavior of the table of contents (modal or modeless). Slides are resized if the table of contents is modeless.</li>
<li><code>Outline view</code>: Linearize the slideshow</li>
<li><code>Table of contents</code> Chose the behavior of the table of contents (modal or modeless). Slides are resized if the table of contents is modeless.</li>
<li><code>Outline view</code> Linearize the slideshow.</li>
</ul>
<p>Configure these parameters in the configuration panel.</p>
</section>
Expand All @@ -319,12 +325,12 @@ <h2>Print</h2>

<section class="slide">
<h2>JavaScript</h2>
<p>You can use your own <code>scripts</code> in the <code>HTML</code> page or in the <code>slide.js</code> file.</p>
<p>You can use your own <code>scripts</code> in the <code>html</code> page or in the <code>slide.js</code> file.</p>
</section>

<section class="slide">
<h2>Outline view</h2>
<p>The outline view enables you to display the slideshow linearly, allowing you to prepare and check the content of your presentation more quickly.</p>
<p>The outline view displays the slideshow linearly, allowing you to prepare and check the content of your presentation more quickly.</p>
<p>Use the <code>configuration panel</code> to activate the outline view.</p>
<p>The <code>CSS</code> styling of the slides is kept, but the effects aren't. The pagination and markers are there to help visualizing the content of each slide.</p>
<div class="Cmasque">
Expand All @@ -343,9 +349,9 @@ <h2>Localization</h2>
<h2>Create a language file</h2>
<ol>
<li>Open the language file with a text editor</li>
<li>Edit the buttons labels <code>label</code>, image alternatives <code>alt</code>, options values <code>value</code> of the effects list, buttons or windows titles <code>title</code> and help messages <code>help</code>.
<li>Edit the buttons labels <code>label</code>, image alternatives <code>alt</code>, options values <code>value</code> of the effects list, buttons or windows titles <code>title</code> and help messages <code>help</code>
</li>
<li>Save your language file using the filename <code>lang_[language code].js</code>.
<li>Save your language file using the filename <code>lang_[language code].js</code>
</ol>
</section>

Expand Down
7 changes: 6 additions & 1 deletion index.htm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,17 @@
<script src="lang/lang_fr.js"></script>
<script src="highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script>hljs.initHighlightingOnLoad();</script>
<style>
.lang-btn{position:absolute;text-decoration:none;font-size:70%;right:20px;border:1px solid #333;border-top:0;padding:0 5px 3px 5px;border-radius:0 0 3px 3px;z-index:900}
.lang-btn:hover,.lang-btn:focus{background:#ddd;}
</style>
</head>

<body>

<a href="#" class="btn-github noprint" lang="en"><img src="img_slide/forkme.png" alt="Fork me on Github"></a>

<a lang="en" class="lang-btn" href="en/index.htm">English</a>
<div id="screen" class="modeplan" data-effect="Eno">

<div id="volet"></div>
Expand Down
22 changes: 11 additions & 11 deletions lang/lang_en.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,32 @@ var lang={
//vocalize slide number on total (1 on 4 for example)
VocalizeNdiapo: {
label: 'Slide number',
help: 'Vocalise slide numbers when displayed'
help: 'Read the slide number when displayed'
} ,
//Play a sound (beep) when displaying hidden text
SoundTxt: {
label: 'Hidden content',
help: 'Broadcast a beep when displaying hidden content'
help: 'Beep when a hidden content appears'
},
//Play a sound (beep) when displaying a slide
SoundSlide: {
label: 'Slide',
help: 'Broadcast a beep when displaying a slide'
help: 'Beep when displaying a slide'
},
//Play a sound (beep) when displaying first slide
SoundSlide1: {
label: 'First Slide',
help: 'Broadcast a beep when displaying first slide'
label: 'First slide',
help: 'Beep when displaying the first slide'
},
//Play a sound (beep) when displaying last slide
SoundSlideEnd: {
label: 'Last Slide',
help: 'Broadcast a beep when displaying last slide'
label: 'Last slide',
help: 'Beep when displaying the last slide'
},
//Vocalize the heading of the current slide
VocalizeTitle: {
label: 'Heading',
help: 'Vocalize the heading of the current slide'
help: 'Read the heading of the current slide'
},
//Update the window heading
UpWindowTitle: {
Expand All @@ -38,13 +38,13 @@ var lang={
//Skip to the "next" button on slideshow onload
GotoBnext: {
label: 'Next button',
help: 'Gives the focus to the next button when the slideshow is onload'
help: 'Place the focus to the “Next” button when the slideshow is loading'
},
//Deactivate click button function to go to next slide
//Warning : deactivate spacebar function too
Noclick: {
label: 'Click',
help: 'Removes the click action (and the space bar) to display the next slide.'
help: 'Remove the click action (and the space bar) to display the next slide.'
},
/** Slideshow parameters **/
// Display summary as modal window
Expand All @@ -59,7 +59,7 @@ var lang={
},
// Switch ModePlan=1 for Linear Layout
ModePlan: {
label: 'Linear layout',
label: 'Outline view',
help: 'Use the linear layout to display the slides in linear succession'
},
/** Effects **/
Expand Down
2 changes: 1 addition & 1 deletion lang/lang_template.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ var lang={
},
// Setting navbar button and select
// Ndxon = expression "on" in "1 on 4" for vocalization numbers slide
// Warning : génerally title and alt are identical
// Warning : generally title and alt are identical
Bprev: {
title: 'Title of previous button',
alt: 'Alt of previous button'
Expand Down

0 comments on commit 4cfdabc

Please sign in to comment.