FreeDatas2HTML/public/userFile.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">        
        <meta name="description" content="Exemple d’utilisation du script FreeDatas2HTML pour afficher les informations d’un fichier CSV dans une page web avec pagination et moteur de recherche.">
        <meta name="robots" content="noindex">
        <link rel="stylesheet" href="CSS/paper.min.css">
        <link rel="stylesheet" href="CSS/fd2html.css">
        <script src="JS/exampleWithUserFile.app.js" defer></script>
        <title>Afficher les données d’un fichier CSV dans une page web</title>
    </head>
    <body class="paper container">

        <header id="header" class="text-center">
          <h1><a href="/">FreeDatas2HTML</a></h1>
          <nav id="menu-principal">
              <ul class="inline row flex-center">
                <li><a href="./#intro" class="badge warning sm-12 col">Introduction</a></li>
                <li><a href="./examples.html#content" class="badge success sm-12 col">Exemples</a></li>
                <li><a href="./documentation.html#content" class="badge success sm-12 col">Documentation</a></li>
                <li><a href="https://forge.chapril.org/Fab_Blab/FreeDatas2HTML" target="_blank" title="accéder au dépôt GIT"  rel="noopener"  class="badge success sm-12 col">Git</a></li>
              </ul>
          </nav>
        </header>
        
        <h2>Affichez les données de votre fichier CSV</h2>
        
        <p>Cette page vous permet de tester directement FreeDatas2HTML en affichant les données d’un fichier CSV de votre choix. Une fois votre fichier sélectionné, vous pourrez choisir les champs/colonnes à afficher. Suivant la taille de votre écran ou encore le nombre champs, le résultat peut être + ou − lisible… Sachez que FreeDatas2HTML permet d’afficher les données autrement que sous forme de tableau. Si vous visionnez cette page avec votre mobile, <a href="./examples.html#content">préférez les autres exemples</a> dont l'affichage s'adapte aux petits écrans.</p>
        
        <form id="userSettings">
            <fieldset class="form-group">
                <label for="myFile">Sélectionnez votre fichier CSV :</label><input type="file" id="myFile" name="myFile" accept=".csv">
            </fieldset>
            <div id="displayOptions"></div>
        </form>
        <div class="row">
            <div id="paginationOptions" class="sm-12 md-6 lg-3 col"></div>
            <div id="search" class="sm-12 md-6 lg-9 col"></div>
        </div>
        <div id="datas"></div>
        <p id="pages"></p>
        
        <article id="content">
            <h3>Fichier CSV ?</h3>
            <p>Le format CSV reste couramment utilisé par des nombreux logiciels pour exporter/importer les données. Vous pouvez aussi en créer un en saisissant des données dans un tableur et choisissant le format CSV lors de l’enregistrement. <a href="https://help.libreoffice.org/latest/fr/text/scalc/guide/csv_files.html" title="Tutoriel site officiel LibreOffice" target="_blank" rel="noopener">Lire ici comment enregistrer en CSV avec LibreOffice</a>. À noter que votre fichier doit être <b>encodé en UTF8</b>, sous peine de rencontrer certains problèmes d’affichage, notamment si vos données contiennent des caractères accentués. Le problème peut se rencontrer en exportant des données à partir de logiciels assez anciens.</p>
            <p>Pas de fichier CSV sous la main ? Alors vous pouvez <a href="/datas/grandes-villes-fr.csv">cliquer ici</a> pour télécharger la liste des villes françaises de + de 30 000 habitants, que j’ai moi-même <a href="https://fr.wikipedia.org/wiki/Liste_des_communes_de_France_les_plus_peupl%C3%A9es#Communes_de_plus_de_30_000_habitants" target="_blank" rel="noopener" title="Page Wikipédia">recopiée de Wikipédia</a>. Une fois le fichier enregistré sur votre ordinateur, sélectionnez-le via <a href="#userSettings">le formulaire ci-dessus</a>.</p>
            <h3>À lire avant de partager cette page :-)</h3>
            <p>FreeDatas2HTML <b>s’exécute uniquement côté client, c’est-à-dire dans votre navigateur</b>. Les données de votre fichier ne sont donc pas envoyées sur un serveur. En conséquence, si vous partager cette page avec d’autres personnes, elles devront elles-mêmes sélectionner le même fichier pour visualiser la même chose que vous. <b>Il est évidemment possible d’indiquer un fichier CSV à afficher par défaut dans une page !</b> C’est même ce qui est fait <a href="/withCSV.html">dans cet autre exemple</a>.</p>
        </article>

        <aside>
            <p><a href="https://forge.chapril.org/Fab_Blab/FreeDatas2HTML/src/branch/master/src/demo/exampleWithUserFile.ts" target="_blank" title="accéder au code"  rel="noopener" class="paper-btn btn-secondary">Code source utilisé par cette page.</a></p>
        </aside>
        
        <footer><p>Design : <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a> | <a href="/mentions-legales.html">Contact et mentions légales</a>.</p></footer>
    </body>
</html>
-												Première version de la page permettant d'afficher un fichier sélectionné par l'utilisateur.

											
										
										
											2021-11-02 18:04:20 +01:00
+								<!DOCTYPE html>
 								<html>
-												Ajout Matomo site de démo.

											
										
										
											2021-11-08 11:00:49 +01:00
+								    <head>
 								        <meta charset="utf-8">
 								        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-												Finalisation de la première version du site de démonstration.

											
										
										
											2021-11-09 16:45:40 +01:00
+								        <meta name="description" content="Exemple d’utilisation du script FreeDatas2HTML pour afficher les informations d’un fichier CSV dans une page web avec pagination et moteur de recherche.">
-												Ajout Matomo site de démo.

											
										
										
											2021-11-08 11:00:49 +01:00
+								        <meta name="robots" content="noindex">
 								        <link rel="stylesheet" href="CSS/paper.min.css">
 								        <link rel="stylesheet" href="CSS/fd2html.css">
 								        <script src="JS/exampleWithUserFile.app.js" defer></script>
-												Finalisation de la première version du site de démonstration.

											
										
										
											2021-11-09 16:45:40 +01:00
+								        <title>Afficher les données d’un fichier CSV dans une page web</title>
-												Ajout Matomo site de démo.

											
										
										
											2021-11-08 11:00:49 +01:00
+								    </head>
 								    <body class="paper container">
-												Revue aspect général du site de démonstration (menu, footer, CSS...).

											
										
										
											2021-11-08 12:01:59 +01:00
 								        <header id="header" class="text-center">
 								          <h1><a href="/">FreeDatas2HTML</a></h1>
 								          <nav id="menu-principal">
 								              <ul class="inline row flex-center">
 								                <li><a href="./#intro" class="badge warning sm-12 col">Introduction</a></li>
 								                <li><a href="./examples.html#content" class="badge success sm-12 col">Exemples</a></li>
-												Ajout page documentation (en cours d'écriture)

											
										
										
											2022-03-03 19:06:39 +01:00
+								                <li><a href="./documentation.html#content" class="badge success sm-12 col">Documentation</a></li>
-												Finalisation de la première version du site de démonstration.

											
										
										
											2021-11-09 16:45:40 +01:00
+								                <li><a href="https://forge.chapril.org/Fab_Blab/FreeDatas2HTML" target="_blank" title="accéder au dépôt GIT"  rel="noopener"  class="badge success sm-12 col">Git</a></li>
-												Revue aspect général du site de démonstration (menu, footer, CSS...).

											
										
										
											2021-11-08 12:01:59 +01:00
+								              </ul>
 								          </nav>
 								        </header>
-												Finalisation de la première version du site de démonstration.

											
										
										
											2021-11-09 16:45:40 +01:00
+								        <h2>Affichez les données de votre fichier CSV</h2>
-												Ajout Matomo site de démo.

											
										
										
											2021-11-08 11:00:49 +01:00
-												Revue texte page site démo permettant de sélectionner son fichier + compilation en JS du script de la page.

											
										
										
											2021-11-12 12:13:22 +01:00
+								        <p>Cette page vous permet de tester directement FreeDatas2HTML en affichant les données d’un fichier CSV de votre choix. Une fois votre fichier sélectionné, vous pourrez choisir les champs/colonnes à afficher. Suivant la taille de votre écran ou encore le nombre champs, le résultat peut être + ou − lisible… Sachez que FreeDatas2HTML permet d’afficher les données autrement que sous forme de tableau. Si vous visionnez cette page avec votre mobile, <a href="./examples.html#content">préférez les autres exemples</a> dont l'affichage s'adapte aux petits écrans.</p>
-												Ajout Matomo site de démo.

											
										
										
											2021-11-08 11:00:49 +01:00
 								        <form id="userSettings">
 								            <fieldset class="form-group">
 								                <label for="myFile">Sélectionnez votre fichier CSV :</label><input type="file" id="myFile" name="myFile" accept=".csv">
-												Revue texte page site démo permettant de sélectionner son fichier + compilation en JS du script de la page.

											
										
										
											2021-11-12 12:13:22 +01:00
+								            </fieldset>
-												Ajout Matomo site de démo.

											
										
										
											2021-11-08 11:00:49 +01:00
+								            <div id="displayOptions"></div>
 								        </form>
 								        <div class="row">
 								            <div id="paginationOptions" class="sm-12 md-6 lg-3 col"></div>
 								            <div id="search" class="sm-12 md-6 lg-9 col"></div>
 								        </div>
-												Finalisation de la première version du site de démonstration.

											
										
										
											2021-11-09 16:45:40 +01:00
+								        <div id="datas"></div>
-												Ajout Matomo site de démo.

											
										
										
											2021-11-08 11:00:49 +01:00
+								        <p id="pages"></p>
-												Finalisation de la première version du site de démonstration.

											
										
										
											2021-11-09 16:45:40 +01:00
+								        <article id="content">
 								            <h3>Fichier CSV ?</h3>
 								            <p>Le format CSV reste couramment utilisé par des nombreux logiciels pour exporter/importer les données. Vous pouvez aussi en créer un en saisissant des données dans un tableur et choisissant le format CSV lors de l’enregistrement. <a href="https://help.libreoffice.org/latest/fr/text/scalc/guide/csv_files.html" title="Tutoriel site officiel LibreOffice" target="_blank" rel="noopener">Lire ici comment enregistrer en CSV avec LibreOffice</a>. À noter que votre fichier doit être <b>encodé en UTF8</b>, sous peine de rencontrer certains problèmes d’affichage, notamment si vos données contiennent des caractères accentués. Le problème peut se rencontrer en exportant des données à partir de logiciels assez anciens.</p>
 								            <p>Pas de fichier CSV sous la main ? Alors vous pouvez <a href="/datas/grandes-villes-fr.csv">cliquer ici</a> pour télécharger la liste des villes françaises de + de 30 000 habitants, que j’ai moi-même <a href="https://fr.wikipedia.org/wiki/Liste_des_communes_de_France_les_plus_peupl%C3%A9es#Communes_de_plus_de_30_000_habitants" target="_blank" rel="noopener" title="Page Wikipédia">recopiée de Wikipédia</a>. Une fois le fichier enregistré sur votre ordinateur, sélectionnez-le via <a href="#userSettings">le formulaire ci-dessus</a>.</p>
 								            <h3>À lire avant de partager cette page :-)</h3>
 								            <p>FreeDatas2HTML <b>s’exécute uniquement côté client, c’est-à-dire dans votre navigateur</b>. Les données de votre fichier ne sont donc pas envoyées sur un serveur. En conséquence, si vous partager cette page avec d’autres personnes, elles devront elles-mêmes sélectionner le même fichier pour visualiser la même chose que vous. <b>Il est évidemment possible d’indiquer un fichier CSV à afficher par défaut dans une page !</b> C’est même ce qui est fait <a href="/withCSV.html">dans cet autre exemple</a>.</p>
 								        </article>
-												Ajout Matomo site de démo.

											
										
										
											2021-11-08 11:00:49 +01:00
+								        <aside>
-												Correction url vers dépôt GIT

											
										
										
											2022-03-09 13:00:00 +01:00
+								            <p><a href="https://forge.chapril.org/Fab_Blab/FreeDatas2HTML/src/branch/master/src/demo/exampleWithUserFile.ts" target="_blank" title="accéder au code"  rel="noopener" class="paper-btn btn-secondary">Code source utilisé par cette page.</a></p>
-												Ajout Matomo site de démo.

											
										
										
											2021-11-08 11:00:49 +01:00
+								        </aside>
-												Finalisation de la première version du site de démonstration.

											
										
										
											2021-11-09 16:45:40 +01:00
+								        <footer><p>Design : <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a> | <a href="/mentions-legales.html">Contact et mentions légales</a>.</p></footer>
-												Ajout Matomo site de démo.

											
										
										
											2021-11-08 11:00:49 +01:00
+								    </body>
-												Première version de la page permettant d'afficher un fichier sélectionné par l'utilisateur.

											
										
										
											2021-11-02 18:04:20 +01:00
+								</html>