Fab_Blab
/
FreeDatas2HTML
1
1
Fork 0
Code Issues Pull Requests Projects Releases Activity

Revue aspect général du site de démonstration (menu, footer, CSS...).

This commit is contained in:
Fabrice PENHOËT 2021-11-08 12:01:59 +01:00
parent b334240da9
commit 37c88e7d8f
7 changed files with 83 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
public/CSS/fd2html.css
View File

@ -6,4 +6,9 @@
p,li { font-size: 17px }
ul, li { padding-left: 0.5em; margin-left:0 }
}
article#datas { overflow-x:auto; }
article#datas { overflow-x:auto; }
h1 a { background :none; color:black }
h1 a:visited { color:black }
h2 { font-size:2rem; }
h3 { font-size:1.5rem; }
header li a:visited { color:white; }

20
public/examples.html
View File

@ -23,18 +23,16 @@
</ul>
</nav>
</header>
<body>
<article id="content">
<h2>Exemples d’utilisation de Freedatas2html</h2>
<ul>
<li><a href="/userFile.html">Parsage et affichage votre propre fichier CSV</a> en sélectionnant les champs à afficher dans la page.</li>
<li><a href="/withCSV.html">Parsage et affichage d’un fichier CSV</a> prédéfini, avec filtres multi-critères, pagination et compteur de résultats.</li>
<li><a href="/withJSON.html">Parsage et affichage de données JSON</a> prédéfinies, avec filtre, pagination et compteur de résultats.</li>
<li><a href="/withHTML.html">Parsage et réaffichage de données situées dans le code HTML</a> de la page, avec filtre, pagination et compteur de résultats.</li>
</ul>
</article>
<article id="content">
<h2>Exemples d’utilisation de Freedatas2html</h2>
<ul>
<li><a href="/userFile.html">Parsage et affichage votre propre fichier CSV</a> en sélectionnant les champs à afficher dans la page.</li>
<li><a href="/withCSV.html">Parsage et affichage d’un fichier CSV</a> prédéfini, avec filtres multi-critères, pagination et compteur de résultats.</li>
<li><a href="/withJSON.html">Parsage et affichage de données JSON</a> prédéfinies, avec filtre, pagination et compteur de résultats.</li>
<li><a href="/withHTML.html">Parsage et réaffichage de données situées dans le code HTML</a> de la page, avec filtre, pagination et compteur de résultats.</li>
</ul>
</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>

19
public/index.html
View File

@ -12,10 +12,21 @@
</head>
<body class="paper container">
<h1>FreeDatas2HTML</h1>
<h2>Parser, afficher, paginer, filtrer, classer des données… à l’aide de TypeScript/JavaScript</h2>
<article id="datas">
<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>
@ -78,6 +89,6 @@
<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 basé sur <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a></p></footer>
<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>

15
public/userFile.html
View File

@ -12,7 +12,18 @@
<title>Afficher les données d'un fichier CSV dans une page web à l'aide de FreeDatas2HTML</title>
</head>
<body class="paper container">
<h1>FreeDatas2HTML</h1>
<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>Afficher votre fichier CSV dans la page web</h2>
<p>Cette page vous permet de tester directement freeDatas2HTML en affichant les données d'un fichier CSV de votre choix. 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 quan cela est plus pratique.</p>
@ -36,6 +47,6 @@
<p>Pour rappel, freeDatas2HTML s'exécute uniquement côté client, c'est-à-dire dans votre navigateur. Les donnée 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 fichier pour visualiser les données. Il est évidemment possible d'indiquer un fichier à afficher par défaut. C'est ce qui est fait dans les autres exemples présentés sur ce site.</p>
</aside>
<footer><p>Design basé sur <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a></p></footer>
<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>

15
public/withCSV.html
View File

@ -12,7 +12,18 @@
<title>Parser et afficher des données CSV via FreeDatas2HTML</title>
</head>
<body class="paper container">
<h1>FreeDatas2HTML</h1>
<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>Parser et afficher des données CSV</h2>
<div class="row">
@ -38,6 +49,6 @@
<p>Enfin il est possible d’<b>afficher les données autrement que sous forme de tableau HTML</b>. Si vous affichez cette page sur un écran large de moins de 800 px, les données seront simplement listées. Si vous avez un grand écran, vous pouvez visualiser cet affichage en faisant « Alt+Maj+M », puis « F5 ». Appuyez de nouveau sur « F5 », une fois de retour sur grand écran pour revoir le tableau.</p>
</aside>
<footer><p>Design basé sur <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a></p></footer>
<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>

15
public/withHTML.html
View File

@ -13,7 +13,18 @@
</head>
<body class="paper container">
<h1>FreeDatas2HTML</h1>
<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>Parser un tableau HTML pour adapter son affichage</h2>
<div class="row">
@ -133,6 +144,6 @@
<p>Il est tout à fait possible de lister vos données autrement que dans un tableau, du moment qu'il reste possible de cibler séparément le nom des champs et la liste des enregistrements via des sélecteurs CSS. D'où le tableau ci-dessous, venant du <a href="https://www.w3.org/Style/css3-selectors-updates/WD-css3-selectors-20010126.fr.html#selectors" target="_blank" rel="noopener">W3C</a> et dont le contenu pourra donc vous être utile :-)</p>
</aside>
<footer><p>Design basé sur <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a></p></footer>
<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>

16
public/withJSON.html
View File

@ -11,8 +11,20 @@
<script src="JS/matomo.js" defer></script><!-- Outil statistique pour le site de démonstration. À ne pas garder lors d'une réutilisation :-) -->
<title>Parser et afficher des données JSON via FreeDatas2HTML</title>
</head>
<body class="paper container">
<h1>FreeDatas2HTML</h1>
<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>Parser et afficher des données JSON</h2>
<div class="row">
@ -30,6 +42,6 @@
<p>Pour le reste, le fonctionnement est similaire qu'<a href="./withCSV.html">avec du CSV</a>.<br>Les données JSON ont été recopiées de l'<a href="https://jsonplaceholder.typicode.com/" target="_blank"rel="noopener">API de test {JSON} Placeholder</a>.</p>
</aside>
<footer><p>Design basé sur <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a></p></footer>
<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>