FreeDatas2HTML/public/index.html

94 lines
7.6 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><!-- Outil statistique pour le site de démonstration. À ne pas garder lors d'une réutilisation :-) -->
<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="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 une ressource distante. 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 y soient listées 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 se font côté client</strong>, sans nouvel appel nécessaire à léventuelle source de données distante.</p>
<h3>Afficher les données dans votre page web</h3>
<p>FreeDatas2HTML vous permet dafficher les données dans votre page web, par défaut <strong>sous forme de tableau</strong>. Mais il est possible de paramèter 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>Vous pouvez choisir de ne <strong>pas afficher tous les champs trouvés</strong> par le parseur, tout en les gardant disponibles pour les filtres. En option, un <strong>compteur denregistrements</strong> peut être affiché.</p>
<h3>Classer les données</h3>
<p>Certains champs peuvent être proposés pour permettre de classer les données affichées.</p>
<p>Par défaut, <strong>le 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 des fonctions spécifiques 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 ê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 est libre et que la recherche se fait 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).</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.</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 quil respecte 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>
<p>Nhésitez pas à me contacter pour me signaler un bug ou me demander de laide pour une intégration. Pas forcément gratuitement, dans le deuxième cas :-)</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 environnement Node/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.</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">Mentions légales</a>.</p></footer>
</body>
</html>