Skip to content

Fix (#49): Les icônes de la barre de navigation ne sont pas affichées en anglais #50

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
cousquer wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fix (#49): Les icônes de la barre de navigation ne sont pas affichées en anglais #50

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion index.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<body>

<a href="https://github.com/access42/AccesSlide" 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>
<a lang="en" class="lang-btn" href="index_en.htm">English</a>
<div id="screen" class="modeplan" data-effect="Eno">

<div id="volet"></div>
Expand Down
385 changes: 385 additions & 0 deletions index_en.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,385 @@
<!DOCTYPE html>
<html lang="en">

<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">
<!-- 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">
<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>hljs.initHighlightingOnLoad();</script>
<style>
.lang-btn{position:absolute;text-decoration:none;font-size:70%;right:20px;border-top:0;padding:0 5px 3px 5px;border-radius:0 0 3px 3px;z-index:900;box-shadow:0 0 2px #999;background:#fafafa}
.lang-btn:hover,.lang-btn:focus{background:#f2f2f2;}
</style>
</head>

<body>

<a href="https://github.com/access42/AccesSlide" 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>
<h1 class="main-title">AccesSlide Slideshow - Access 42</h1>
</header>

<div id="nav" class="tool-bar footer-nav clearfix">
<div id="wrappernav">
<ul class="related">
<li><a href="http://www.access42.net">www.access42.net</a></li>
<li><a href="https://twitter.com/access42net">
<span class="icon-fallback-text">
<span class="icon icon-twitter" aria-hidden="true"></span>
<img class="text" src="../img/twitter.png" alt="" />
</span>
@access42net</a></li>
<li><a href="https://github.com/access42/" lang="en">
<span class="icon-fallback-text">
<span class="icon icon-github" aria-hidden="true"></span>
<img class="text" src="../img/github.png" alt="" />
</span>
Github</a></li>
</ul>
</div>
</div>

<nav role="navigation" id="sommaire" class="tool-block tool-block-summary" tabindex="-1"></nav>

<div id="wrapper">

<main role="main" id="main">

<section class="slide couv">
<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><code>section</code> elements can be imbricated in <code>section</code> elements.</p>
</section>

<section class="slide">
<h2>Short example of structure</h2>
<pre><code class="html">&lt;section class="slide"&gt;
&lt;h2&gt;Title of the slide&lt;/h2&gt;
[content]
&lt;/section&gt;

&lt;section class="slide" aria-label="title of the slide"&gt;
[content]
&lt;/section&gt;</code></pre>
</section>

<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>
<p>Example: there is three hidden elements in this slide.</p>
<ul>
<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>

<section class="slide">
<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>: 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>

<section class="slide">
<h2>Keyboard navigation</h2>
<ul>
<li><kbd>SPACE</kbd> or <kbd>RIGHT ARROW</kbd> or <kbd>Click</kbd> Next slide</li>
<li><kbd>SHIFT + SPACE</kbd> or <kbd>LEFT ARROW</kbd> Previous slide</li>
<li><kbd>Start</kbd> First slide</li>
<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">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>
</ol>
<p>The new effect will be automatically added to the list of effects in the configuration panel.</p>
</section>

<section class="slide">
<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>
</ul>
</section>

<section class="slide">
<h2>Themes</h2>
<p>Several themes are delivered with AccesSlide in the folder <code>css/themes</code>.</p>
<ul>
<li><button onClick="javascript:changeColors('default');return false;">Default theme</button></li>
<li><button onClick="javascript:changeColors('xmas');return false;">Christmas theme</button></li>
<li><button onClick="javascript:changeColors('black');return false;">Dark theme</button></li>
</ul>
<pre>
<code class="html">&lt;!-- Theme stylesheet --&gt;
&lt;link rel="stylesheet" href="css/themes/default.css" type="text/css" media="all" /&gt;</code>
</pre>
</section>

<section class="slide">
<h2>Post-processor</h2>
<p>The CSS is generated by the post-processor <a href="http://www.myth.io/"><strong>Myth</strong></a>.</p>
<p>Source files are in the <code>css/sources</code> folder and in the <code>css/sources/themes</code> folder for themes.</p>
<p>Compiled files are in the <code>css/themes</code> folder for themes and in the <code>css/</code> folder for the general layout.</p>
<p>Every file is also available in a non-minified version. This lets you change or create your own CSS without using a post-processor.</p>
</section>

<section class="slide">
<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-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>
</ul>
</section>

<section class="slide">
<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 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>
<pre><code>
.icon-setting-sound:before{
content: "\f028";
}</code>
</pre>
</div>
</section>

<section class="slide">
<h2>Tables</h2>
<table>
<caption>Table caption</caption>
<tr>
<th scope="col">a header</th>
<th scope="col">a header</th>
<th scope="col">a header</th>
<th scope="col">a header</th>
</tr>
<tr>
<td>a cell</td>
<td>a cell</td>
<td>a cell</td>
<td>a cell</td>
</tr>
<tr>
<td>a cell</td>
<td>a cell</td>
<td>a cell</td>
<td>a cell</td>
</tr>
<tr>
<td>a cell</td>
<td>a cell</td>
<td>a cell</td>
<td>a cell</td>
</tr>
</table>
</section>

<section class="slide">
<h2>Pictures</h2>
<div class="col col-left">
<p class="center">You can put cute cats</p>
<img src="./img_slide/mignon-chat.jpg" alt="" />
</div>
<div class="col col-right">
<div class="Cmasque">
<p class="center">but also scary cats!</p>
<img src="./img_slide/chat-qui-fait-peur.jpg" alt="" />
</div>
</div>
</section>

<section class="slide">
<h2>Headings</h2>
<p>The heading hierarchy begins with <code>&lt;h1&gt;</code>, used for the heading of the slideshow.</p>
<p>You can use all the other headings.</p>
<h2>H2 heading</h2>
<h3>H3 heading</h3>
<h4>H4 heading</h4>
<h5>H5 heading</h5>
<h6>H6 heading</h6>
</section>

<section class="slide">
<h2>Responsive design</h2>
<img class="center" src="./img_slide/responsive.png" alt="" />
<p class="center">The slideshow will adapt to the size of the font and the size of the window.</p>
</section>

<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>
<ul>
<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>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>

<section class="slide">
<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 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">
<audio id="audiotest1">
<source type="audio/mp3" src="./sound/bip_diapo1_on.mp3">
<source type="audio/ogg" src="./sound/bip_diapo1_on.ogg">
</audio>
<audio id="audiotest2">
<source type="audio/mp3" src="./sound/bip_texte_masque.mp3">
<source type="audio/ogg" src="./sound/bip_texte_masque.ogg">
</audio>
<audio id="audiotest3">
<source type="audio/mp3" src="./sound/bip_diapo_on.mp3">
<source type="audio/ogg" src="./sound/bip_diapo_on.ogg">
</audio>
<audio id="audiotest4">
<source type="audio/mp3" src="./sound/bip_diapo_end.mp3">
<source type="audio/ogg" src="./sound/bip_diapo_end.ogg">
</audio>
</div>
</div>
</section>

<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>
</ul>
<p>Configure these parameters in the configuration panel.</p>
</section>

<section class="slide">
<h2>Print</h2>
<p>A <code>print.css</code> style sheet provides a layout for printing from the browser (<kbd>Ctrl</kbd> + <kbd>p</kbd>)</p>
<p>Only some of the styling from the chosen theme is kept on print (property <code>all</code> from the theme's CSS).</p>
<p>To hide an element or an entire section on print, add a <code>noprint</code> class.</p>
<pre><code class="html">&lt;section class="slide noprint"&gt;
[content]
&lt;/section&gt;</code></pre>
</section>

<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>
</section>

<section class="slide">
<h2>Outline view</h2>
<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">
<h3>Useful tip!</h3>
<p>Use two browsers, each in a different mode, to write and play your slideshow.</p>
</div>
</section>

<section class="slide">
<h2>Localization</h2>
<p>All elements of the interface can be localized using a language file (<code>lang</code> folder).</p>
<p>To use a language file, edit the file path in the <code>head</code> of the page. Here is an example for the French file: <code>&lt;script type="text/javascript" src="lang/lang_fr.js"&gt;&lt;/script&gt;</code>.</p>
</section>

<section class="slide">
<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>
<li>Save your language file using the filename <code>lang_[language code].js</code>
</ol>
</section>

<section class="slide end noprint">
<h2 class="end-title">Thanks for your attention !</h2>
<ul class="credit">
<li><a href="http://www.gnu.org/copyleft/gpl.html">GPL License</a></li>
<li><a href="https://github.com/access42/accesSlide">Github deposit</a></li>
</ul>
<p><a href="http://access42.net/-labs-.html?lang=en">Discover our other projects</a></p>
</section>

</main>

</div>

<div id="setting" class="tool-block tool-block-settings " role="dialog" tabindex="-1" style="display:none"></div>

</div>

<div id="Caudio"></div>
<div id="Dcourante" aria-live="polite" aria-atomic="true" aria-hidden="true"></div>

<script src="slide.js"></script>

<script src="./afontgarde.js"></script>
<script>
AFontGarde( 'FontAwesome', '\f0d9\f0da');
</script>
</body>
</html>