FreeDatas2HTML/public/index.html

94 lines
8.0 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Présentation de FreeDatas2HTML, module TypeScript permettant de parser, afficher, filtrer... des données, côté client.">
<meta name="robots" content="index,follow">
<link rel="stylesheet" href="CSS/paper.min.css">
<link rel="stylesheet" href="CSS/fd2html.css">
<script src="JS/matomo.js" defer></script>
<title>FreeDatas2HTML : parser et afficher des données en TypeScript/JavaScript</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>Présentation de FreeDatas2HTML</h2>
<article id="intro">
<h3>Parser des données JSON, CSV ou HTML</h3>
<p>FreeDatas2HTML vous permet de <strong>parser des données</strong> listées dans une page internet ou encore accessibles via une ressource externe (fichier, API…). Les formats de données possibles sont le <a href="/withJSON.html" title="Page d'exemple">JSON</a>, le <a href="/withCSV.html" title="Page d'exemple">CSV</a> ou encore le <a href="/withHTML.html" title="Page d'exemple">HTML</a>, pour peu que les données soient listées dans la page de manière rigoureuse.</p>
<p><a href="/userFile.html" title="Page de test" class="paper-btn btn-success">Testez ici avec votre propre fichier CSV.</a></p>
<p>Le parseur retourne de manière distincte une liste des champs trouvés, une liste des «enregistrements», ainsi que les éventuelles anomalies rencontrées durant le traitement. Vous pouvez <strong>utiliser votre propre parseur</strong>, par exemple pour gérer dautres formats de données (XML…).</p>
<p>Une fois les données parsées, <strong>tous les traitements suivant se font côté client</strong>, sans nouvel appel nécessaire à léventuelle source de données externe.</p>
<h3>Afficher les données dans la page web</h3>
<p>Vous pouvez ensuite afficher les données dans votre page web, par défaut <strong>sous forme de tableau</strong>. Il est possible de paramétrer dautres formats, par exemple <strong>une liste HTML</strong> ou encore dutiliser son propre moteur de rendu, tout en bénéficiant du reste du code de FreeDatas2HTML.</p>
<p>Tous <strong>les champs trouvés par le parseur</strong> ne doivent pas forcément être affichés dans la page. La liste de ceux à afficher sera alors fournie en option. Quils soient affichés ou pas, tous les champs restent disponibles pour les filtres.</p>
<p>Enfin, en option, un <strong>compteur denregistrements</strong> peut être affiché.</p>
<h3>Classer les données</h3>
<p>Certains champs peuvent être proposés aux utilisateurs finaux pour leur permettre de classer les données affichées.</p>
<p>Par défaut, <strong>ce classement se fait de manière alphabétique et «naturelle»</strong>, cest-à-dire quen ordre ascendant «20» sera devant «100», malgré le fait que «1» se trouve devant «2»…</p>
<p>Mais il est possible de <strong>fournir ses propres fonctions de classement</strong> pour certains champs, pour peu quelles soient compatibles avec <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/sort" target="_blank" title="Voir sur MDN (Mozilla)" rel="noopener">la fonction sort() de JavaScript</a>.</p>
<h3>Filtrer les données</h3>
<p>Il peut également être proposé à lutilisateur de filtrer les données, via des listes &lt;SELECT&gt; reprenant les valeurs distinctes dun champ, classées de la même manière que vu précédemment.</p>
<p>Si plusieurs filtres sont ainsi proposés, leurs actions sadditionnent, cest-à-dire que <strong>seuls les enregistrements validant tous les filtres sélectionnés seront fournis en résultat</strong>.</p>
<h3>Moteur de recherche</h3>
<p>Un moteur de recherche peut aussi être proposé à lutilisateur.<br />Il agit comme les filtres précédents, si ce nest que <strong>la saisie y est libre et que la recherche des caractères saisis peut se faire sur plusieurs champs</strong>.</p>
<p>Il est possible de définir les champs sur lesquels effectuer la recherche ou les garder tous (par défaut).<br>Elle peut (ou non) être sensible à la casse, aux accents et caractères spéciaux, suivant votre configuration.</p>
<p>La recherche <strong>peut être lancée dès la saisie dun certain nombre de caractères</strong>, ou attendre un clic sur le bouton denvoi.</p>
<h3>Pagination</h3>
<p>Une valeur de pagination peut être définie et/ou plusieurs <strong>options de pagination</strong> proposées aux utilisateurs finaux.<br>Les pages proposées à la navigation sadaptent évidemment au nombre de résultats.</p>
<h3>Adaptable à vos besoins</h3>
<p><strong>Toutes les fonctionnalités de FreeDatas2HTML sont proposées en option.</strong></p>
<p>Vous pouvez très bien nutiliser FreeDatas2HTML que pour parser les données et en faire ensuite ce que bon vous semble…</p>
<p>Vous pouvez écrire vos propres scripts pour <strong>remplacer nimporte quelle classe du projet</strong>, pour peu quils respectent son interface. Cela peut être assez simple, en vous inspirant de lexistant.</p>
<p>FreeDatas2HTML est partagé <a href="https://forge.chapril.org/Fab_Blab/FreeDatas2HTML/src/branch/master/LICENSE" target="_blank" title="Lire la licence" rel="noopener">sous licence AGPL</a>, ce qui vous donne le droit de modifier et partager son code, mais en gardant les mêmes droits (copyleft).</p>
<h3>Code et dépendances</h3>
<p>FreeDatas2HTML est écrit en <a href="https://www.typescriptlang.org/" target="_blank" title="Site du projet (en)" rel="noopener">TypeScript</a>, les tests étant réalisés via <a href="https://karma-runner.github.io/latest/index.html" title="Site du projet (en)" target="_blank" rel="noopener">Karma</a> et <a href="https://jasmine.github.io/" target="_blank" title="Site du projet (en)" rel="noopener">Jasmine</a>, dans un environnement NPM/Webpack. Deux modules externes sont utilisés: <a href="https://www.papaparse.com" rel="noopener" target="_blank" title="Site du projet (en)">Papa Parse</a> pour parser les données CSV et <a href="https://www.npmjs.com/package/natural-orderby" rel="noopener" target="_blank" title="Page du projet sur NPM (en)">natural-orderby</a> pour optimiser le classement par défaut des données. Ces deux modules sont partagés sous <a href="https://mit-license.org/" target="_blank">licence MIT</a>.</p>
<p><a href="https://forge.chapril.org/Fab_Blab/FreeDatas2HTML" target="_blank" title="accéder au dépôt GIT" rel="noopener" class="paper-btn btn-secondary">Accéder au dépôt GIT du projet.</a></p>
</article>
<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>