Server : Apache
System : Linux ks5.tuic.fr 6.1.0-18-amd64 #1 SMP PREEMPT_DYNAMIC Debian 6.1.76-1 (2024-02-01) x86_64
User : pragmatice ( 1003)
PHP Version : 8.2.24
Disable Function : NONE
Directory : /home/pragmatice/public_html/pragmabd/
|
Server : Apache System : Linux ks5.tuic.fr 6.1.0-18-amd64 #1 SMP PREEMPT_DYNAMIC Debian 6.1.76-1 (2024-02-01) x86_64 User : pragmatice ( 1003) PHP Version : 8.2.24 Disable Function : NONE Directory : /home/pragmatice/public_html/pragmabd/ |
<!DOCTYPE html>
<html lang="fr">
<head>
<title>PragmaBD</title>
<meta name="description" content="???" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<link rel="icon" type="image/ico" href="images/favicon.ico" />
<!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /><![endif]-->
<link rel="stylesheet" href="../commun/css/bootstrap.css">
<link rel="stylesheet" href="../commun/css/bootstrap-table.css">
<link rel="stylesheet" href="../commun/bootstrap-icons/fonts/bootstrap-icons.css">
<link rel="stylesheet" href="css/pragmabd.css">
<script src="../commun/js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="../commun/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<script src="../commun/js/clipboard.min.js" type="text/javascript"></script>
<script src="../commun/js/jquery.qrcode.min.js" type="text/javascript"></script>
<script src="js/pragmabd.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function(){
element = document.getElementById('message_avertissement_javascript');
element.parentNode.removeChild(element);
}
var browser = navigator.appName;
var ver = navigator.appVersion;
var thestart = parseFloat(ver.indexOf("MSIE"))+1;
var brow_ver = parseFloat(ver.substring(thestart+4,thestart+7));
</script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark mb-3 no_imprim" id="navbar-pragmabd">
<!-- Brand -->
<a class="navbar-brand bt-accueil quitter-lect-auto" href="#"><img src='images/logo-pragmabd_64.png' />PragmaBD</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link choix-navbar bt-planches-locales quitter-lect-auto" data-choix="bt-planches-locales" href="#"> <i class="bi bi-laptop"></i> BD locales</a>
</li>
<li class="nav-item">
<a class="nav-link choix-navbar bt-planches-publiees quitter-lect-auto" data-choix="bt-planches-publiees" href="#"><i class="bi bi-globe2"></i> BD publiées</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link quitter-lect-auto" href="#"><img class="bt_scale_2 bt-doc" src='images/bt-info-32.png' /></a>
</li>
<li class="nav-item">
<a class="nav-link quitter-lect-auto" href="#">Connexion</a>
</li>
</ul>
</div>
</nav>
<div class="container ecran-tous ecran-accueil">
<div class="row">
<div class="col">
<img src='images/bd-test.jpg' class='bd-accueil img-fluid' />
</div>
</div>
<div class="row">
<div class="col-md-6 pave-accueil">
<div>
<h3>Créer vos planches de BD</h3>
<ul>
<li>Produisez et enregistrez vos planches sur votre poste de travail, gratuitement, sans créer de compte.</li>
<li>Exploitez le multimédia : inutile de fabriquer des images ou des sons, ils sont intégrés à l'application.</li>
<li>Exportez vos planches au format JPG ou PDF.</li>
<li>Consultez les ressources de la <span class='faux_lien bt-doc'>documentation</span>.</li>
</ul>
<button class='btn btn-block btn-primary btn-lg mt-3 bt-planches-locales'>Éditer mes planches de BD</button>
</div>
</div>
<div class="col-md-6 pave-accueil">
<div>
<h3>Publiez vos BD</h3>
<ul>
<li>Diffusez vos planches en ligne pour les partager.</li>
<li>Organisez vos planches en BD.</li>
</ul>
<button class='btn btn-block btn-primary btn-lg mt-3'>Gérer mes BD publiées</button>
</div>
</div>
<div class="col-md-6 pave-accueil">
<div>
<h3>Lisez les planches publiées</h3>
<ul>
<li>Découvrez toutes les planches produites par d'autres classes.</li>
<li>Écoutez les textes lus en synthèse vocale.</li>
</ul>
<button class='btn btn-block btn-primary btn-lg mt-3'>Voir les planches publiées</button>
</div>
</div>
<div class="col-md-6 pave-accueil">
<div>
<h3>Planche sur ta BD !</h3>
<ul>
<li>Participez gratuitement à ce concours organisé par PragmaTICE et l'AFT.</li>
<li>Créez des planches et publiez celle que vous avez sélectionnée pour votre classe.</li>
<li>Explorez toutes les planches produites et votez.</li>
</ul>
<button class='btn btn-block btn-primary btn-lg mt-3'>Accéder au concours</button>
</div>
</div>
</div>
</div>
<div class="ecran-tous ecran-gestion-planche">
<div class="container">
<div class="row info-bdlocales">
<div class="col">
Les planches de BD locales sont <b>enregistrées sur le poste de travail</b> <em>(ordinateur, tablette, téléphone mobile)</em>, dans l'espace Webstorage du navigateur utilisé. Elles peuvent être lues <em>(cliquer sur leur titre)</em>, produites, modifiées (cliquer sur <em><img src="images/bt-editer-32.png" />)</em>, importées, supprimées, dupliquées et exportées <em>(cliquer sur <img src="images/bt-bao-32.png" />)</em> <b>sans créer de compte</b>.
<div style='text-align: right;'>
<button class='btn btn-success bt-creer-planche mt-2 mb-2'><i class="bi bi-pencil-fill"></i> Créer une nouvelle planche</button>
<button title="Importer, exporter ou supprimer des planches locales" class='btn btn-info bt-gerer-planches-locales mt-2 mb-2'><i class="bi bi-tools"></i> Boîte à outils</button>
</div>
</div>
</div>
<!--https://bootstrap-table.com/docs/getting-started/usage/-->
<!--<table class="table table-sm table-bordered table-hover tablo-planches-local" data-toggle="table" data-search="true" data-show-columns="true" data-pagination="true">-->
<!--<table class="table table-sm table-bordered table-hover tablo-planches-local" data-toggle="table">-->
<table class="table table-sm table-bordered table-hover tablo-planches-local">
<thead>
<tr>
<th data-sortable="true" data-field="titre">Titre</th>
<th data-sortable="true" data-field="auteur">Auteur</th>
<th data-sortable="true" data-field="categorie">Catégorie</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<div class="ecran-tous ecran-edition-planche">
<div class="container pave-prop-planche no_imprim">
<div class="row mt-3">
<div class="col-md-4">
<div class="form-group">
<label for="saisie-titre-planche-edition">Titre de la planche</label>
<input type="text" class="form-control" id="saisie-titre-planche-edition" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="saisie-auteur-planche-edition">Auteur de la planche</label>
<input type="text" class="form-control" id="saisie-auteur-planche-edition" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="saisie-categorie-planche-edition">Catégorie de la planche</label>
<input type="text" class="form-control" id="saisie-categorie-planche-edition" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button class="btn btn-success btn-block bt-enregistrer-planche"><i class="bi bi-save-fill"></i> Enregistrer la planche</button>
</div>
<div class="col-md-4">
<button class="btn btn-primary btn-block bt-commentcamarche"><i class="bi bi-question-circle-fill"></i> Comment ça marche ?</button>
</div>
<div class="col-md-4">
<button class="btn btn-warning btn-block bt-effacer-planche"><i class="bi bi-trash-fill"></i> Effacer la planche</button>
</div>
</div>
</div>
<div class="contenu-bd">
<div class="entete-bd">
<div class="entete-g">
<img src="images/logo-pragmabd_64.png" /> PragmaBD
</div>
<div class="entete-d">
<h5 id='titre-planche-edition'>Titre de la BD</h5>
<h5 id='auteur-planche-edition'>Auteur</h5>
</div>
<div style="clear:both;"></div>
</div>
<div id="planche-edition"></div>
<div style="clear:both;"></div>
</div>
</div>
<div class="ecran-tous ecran-lecture-planche">
<div class="container param-lecture no_imprim">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col"><button class="btn btn-danger btn-block bt-choix-mode-lecture bt-lecture-classique quitter-lect-auto" data-mode="classique"><i class="bi bi-book-half"></i> Lecture classique</button></div>
<div class="col"><button class="btn btn-outline-danger btn-block bt-choix-mode-lecture bt-lecture-automatique quitter-lect-auto" data-mode="automatique"><i class="bi bi-play-btn-fill"></i> Lecture automatique</button></div>
</div>
<div class="row mt-2">
<div class="col">
<ul class="info-lecture info-lecture-classique">
<li>Cliquer sur un personnage ou sur un cartouche pour que son texte soit lu en synthèse vocale.</li>
<li>Cliquer sur <img src="images/bt-speaker-32.png" /> s'il existe pour écouter le son associé à la case.</li>
</ul>
<ul class="info-lecture info-lecture-automatique">
<li>Cliquer sur <img src="images/bt-lire-bd-play.png" /> pour démarrer la lecture et sur <img src="images/bt-lire-bd-stop.png" /> pour l'interrompre.</li>
<li>
<div class="form-inline" style="list-style-type: disc;">
<label class="form-label" for="delai-lect-auto">Attente avant d'afficher la case suivante :</label>
<input type="number" id="delai-lect-auto" min="0" max="10" class="form-control" style="width:70px; margin:0 5px;" value="0" /> sec
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<h5>A propos de la synthèse vocale</h5>
<div style="font-size:12px;">
<p style="margin-bottom:0;">La synthèse vocale implémentée dans PragmaBD utilise l'<a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Speech_API" target="_blank">API Web Speech</a>. Les voix disponibles dépendent du poste utilisé, de son environnement <em>(Windows, MacOs, Linux, Android)</em> et du navigateur :</p>
<ul style="margin:0;">
<li>Avec Firefox, seules les voix installées sur le poste sont reconnues <em>(Hortense pour le français et Zira pour l'anglais)</em>.</li>
<li>Avec Opéra et Edge, les voix françaises de Julie et Paul s'ajoutent à celle de Firefox.</li>
<li>Avec Chrome <em>(recommandé)</em>, les voix de Google complètent les précédentes.</li>
</ul>
<p style="margin-bottom:0;">Attention ! La prononciation via la synthèse vocale n'est pas toujours fidèle.</p>
</div>
</div>
</div>
</div>
<div class="contenu-bd">
<div class="entete-bd">
<div class="entete-g">
<img class='bt_scale_2 bt-partage-planche' src="images/bt-activites-planche.png" style='float:right; margin-right:10px; display:none;' title="Jouer avec cette planche" alt="Jouer avec cette planche" />
<img class='bt_scale_2 bt-partage-planche' src="images/bt-partage-planche.png" style='float:right; margin-right:10px; display:none;' title="Partager cette planche" alt="Partager cette planche" />
<img src="images/logo-pragmabd_64.png" /> PragmaBD
</div>
<div class="entete-d">
<h5 id='titre-planche-lecture'>Titre de la BD</h5>
<h5 id='auteur-planche-lecture'>Auteur</h5>
</div>
<div style="clear:both;"></div>
</div>
<div id="planche-lecture"></div>
<div style="clear:both;"></div>
</div>
</div>
<div class="ecran-tous ecran-doc">
<div class="container">
<div class="row">
<div class="col">
<h2>Documentation à créer !</h2>
<ul>
<li>Consulter et imprimer les médias disponibles</li>
<li>Ressources sur la BD à l'école</li>
<li>...</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Fenêtre modale erreurs lors de l'enregistrement -->
<div class="modal fade" id='modale_erreurs_enregistrement_planche' tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header"><h5 class="modal-title"><img src='images/logo_warning_32.png' /> La planche n'a pu pas être enregistrée...</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div>
<div class="modal-body"><ul></ul></div>
</div>
</div>
</div>
<!-- Fenêtre modale bao planches locales -->
<div class="modal fade" id='modale_bao_planches_locales' tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header"><h5 class="modal-title"><img src='images/bt-bao-32.png' /> Gérer la planche locale "<span class="titre-planche-modale"></span>"</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div>
<div class="modal-body">
<div class='pave-operation'>
<button class='btn btn-success btn-block bt-exporter-planche-locale'>Exporter</button>
<div>Le fichier exporté sera enregistré dans le dossier des téléchargements <em></em>(choisir d'enregistrer et non pas d'ouvrir...)</em>.</div>
<div style='clear:both;'></div>
</div>
<div class='pave-operation'>
<button class='btn btn-secondary btn-block bt-dupliquer-planche-locale'>Dupliquer</button>
<div>La nouvelle planche portera le même nom, suivi de (copie).</div>
<div style='clear:both;'></div>
</div>
<div class='pave-operation'>
<button class='btn btn-warning btn-block bt-supprimer-planche-locale'>Supprimer</button>
<div>La planche sera définitivement supprimée des planches enregistrées sur ce poste.</div>
<div style='clear:both;'></div>
</div>
</div>
</div>
</div>
</div>
<!-- Fenêtre modale pour gérer (importer, exporter, supprimer) des planches locales -->
<div class="modal fade" id='modale_gerer_planches_locales' tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header"><h5 class="modal-title"><img src='images/bt-bao-32.png' /> Gérer ses planches locales</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div>
<div class="modal-body">
<div class='pave-operation'>
<button class='btn btn-secondary btn-block bt-importer-planche-locale'>Importer une planche locale</button>
<div>La planche importée <em>(au format Json)</em> complètera les planches déjà enregistrées sur ce poste.</div>
<div style='clear:both;'></div>
</div>
<div class='pave-operation'>
<button class='btn btn-secondary btn-block bt-importer-lot-planches-locales'>Importer plusieurs planches locales</button>
<div>Attention ! Les planches importées remplaceront celles qui sont déjà enregistrées sur ce poste.</div>
<div style='clear:both;'></div>
</div>
<div class='pave-operation'>
<button class='btn btn-success btn-block bt-exporter-toutes-planches-locales'>Exporter toutes les planches locales</button>
<div>Le fichier exporté sera enregistré dans le dossier des téléchargements <em></em>(choisir d'enregistrer et non pas d'ouvrir...)</em>.</div>
<div style='clear:both;'></div>
</div>
<div class='pave-operation'>
<button class='btn btn-warning btn-block bt-supprimer-toutes-planches-locales'>Supprimer toutes les planches locales</button>
<div>Les planches seront définitivement supprimées des planches enregistrées sur ce poste.</div>
<div style='clear:both;'></div>
</div>
</div>
</div>
</div>
</div>
<!-- Fenêtre modale Comment ça marche -->
<div class="modal fade" id='modale_commentcamarche' tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header"><h5 class="modal-title"><img src='images/icone-help-32.png' /> Comment créer une planche de BD ?</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div>
<div class="modal-body">
<p class="alert alert-info">PragmaBD permet de créer des planches de BD avec les matériaux fournis dans l'application. En dehors de textes, il n'est pas possible d'ajouter ses propres médias.</p>
<h4>Création / Modification d'une case</h4>
<p>Pour éditer une case, cliquer dessus, puis sur <img src="images/ce-bt-editer-case.png" />.</p>
<div style=text-align:center;"><img class="img-fluid" src="images/ce-barre-outils.png" /></div>
<p>Dans le panneau d'édition ouvert à la place de la case adjacente, sélectionner les éléments souhaités.</p>
<p><b>Chaque case peut comprendre 5 éléments</b> :</p>
<ul>
<li>Personnage de gauche / de droite : on peut définir sa taille, son plan (large ou portrait), son orientation et sa position <em>(marge par rapport au bord de la case)</em>,</li>
<li>Bulle : c'est dans la bulle sélectionnée que l'on peut saisir le texte <em>(le cartouche affiche le texte du personnage de gauche)</em>,</li>
<li>Fond : l'opacité du fond est paramétrable,</li>
<li>Son : quand on consulte la planche, le son associé à la case est écouté en cliquant sur l'icône "son" en mode classique ou à l'affichage de la case en mode automatique.</li>
</ul>
<p><b>Pour sélectionner un élément,</b> cliquer sur son bouton, sur une catégorie d'onglet, puis sur la vignette de l'élément souhaité. Il apparaît alors sur la case en cours d'édition.</p>
<div style=text-align:center;"><img class="img-fluid" src="images/ce-elements.png" /></div>
<h4>Enregistrement de la planche</h4>
<p class="mt-2">Cliquer sur <button class="btn btn-success"><i class="bi bi-save-fill"></i> Enregistrer la planche</button> pour enregistrer sa planche sur le poste, dans l'espace Webstorage du navigateur.</p>
<p>Elle apparaîtra alors dans la liste des planches locales, et pourra être lue <em>(en mode classique ou automatique)</em> en cliquant sur son titre, ou éditée de nouveau <img src="images/bt-editer-32.png">, ou encore supprimée, dupliquée, exportée... <img src="images/bt-bao-32.png"></p>
</div>
</div>
</div>
</div>
<div class="container mt-3 ecran-tous ecran-accueil">
<div class="row">
<div class="col" style="padding:0.5 1em; background-color:#FFF; border:2px solid grey; border-radius: 5px;">
<p>Cette version en cours est très loin d'être terminée. Ellle permet de créer des planches de BD, de les enregistrer sur le poste, de les supprimer, de les exporter, d'en importer, mais il n'est pas possible de publier ses planches.</p>
<p>Les planches créées peuvent être lues en mode classique ou en mode automatique. Il est recommandé d'utiliser Chrome pour la synthèse vocale.</p>
<p>La page d'accueil est provisoire. Les éléments actuellement disponibles <em>(personnages, bulles, fonds, sons)</em> ne servent qu'aux tests. La version définitive proposera des éléments plus pertinents dans chaque catégorie.</p>
</div>
</div>
</div>
<!--<input type='file' accept='text/plain' id='gruge_parcourir_importer-planche-locale' style='display:none;' />-->
<input type='file' accept="application/json, .json" id='gruge_parcourir_importer-planche-locale' style='display:none;' />
<input type='file' accept="application/json, .json" id='gruge_parcourir_importer-toutes-planches-locales' style='display:none;' />
<select id='liste_langues' style='display:none;'></select>
<div class="avertissement_navigateur" id="message_avertissement_javascript" style="text-align:center;">
<img src='images/gif_chargement.gif' /><br />
<p><b>Patience pendant le temps de chargement...</b></p><p>Javascript doit être activé sur votre navigateur pour que cette application fonctionne !</p>
</div>
<div id="si_ie" class="avertissement_navigateur">
<img style="float:right" src="images/logo_avertissement-ie.jpg" />
<p><b>Vous utilisez un navigateur Web obsolète ou Javascript est désactivé !</b></p>
<p>Pour que cette application fonctionne, il est nécessaire de télécharger et installer un navigateur "moderne", tel que <a target="_blank" href="https://www.mozilla.org/fr/firefox/new/">Mozilla Firefox</a> par exemple.</p>
<p>Si cet ordinateur n'est pas connecté à Internet, <a target="_blank" href="http://portableapps.com/apps/internet/firefox_portable/localization">téléchargez une version portable de Firefox</a> et copiez-la sur cet ordinateur pour l'installer...</p>
<div style="clear:both"></div>
</div>
<script type="text/javascript">
document.getElementById('si_ie').style.display = 'none';
if ((browser=="Microsoft Internet Explorer") && (brow_ver < 9)) {
document.getElementById('si_ie').style.display = 'block';
}
</script>
<script src="../commun/js/bootstrap-table.min.js" type="text/javascript"></script>
<script src="../commun/js/bootstrap-table-fr-FR.min.js" type="text/javascript"></script>
<script src="js/speech_synthesis.js" type="text/javascript"></script>
</body>
</html>