Portail web pour réseau de bibliothèques scolaires avec catalogues consultables, règlements téléchargeables et ressources pédagogiques intégrées, responsive et
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portale Biblioteche Scolastiche</title>
<!-- Inclusion de FontAwesome pour les icônes -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-papb1Q+7X0Vq1k6Q7+5M9e1Q6z4f9kX6PZ6V7X5Q6PZ6V7X5Q6PZ6V7X5Q6PZ6" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
/* Style de base et reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f9f9f9;
color: #333;
line-height: 1.6;
min-height: 100vh;
display: flex;
flex-direction: column;
}
header {
background-color: #004080;
color: white;
padding: 1rem 2rem;
text-align: center;
}
nav {
background-color: #0066cc;
display: flex;
justify-content: center;
gap: 2rem;
padding: 0.75rem 0;
}
nav a {
color: white;
text-decoration: none;
font-weight: 600;
font-size: 1.1rem;
display: flex;
align-items: center;
gap: 0.5rem;
transition: color 0.3s ease;
}
nav a:hover, nav a:focus {
color: #ffcc00;
outline: none;
}
main {
flex: 1;
padding: 2rem;
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
footer {
background-color: #004080;
color: white;
text-align: center;
padding: 1rem;
font-size: 0.9rem;
}
/* Sections du portail */
section {
margin-bottom: 3rem;
}
h2 {
margin-bottom: 1rem;
border-bottom: 2px solid #0066cc;
padding-bottom: 0.5rem;
color: #004080;
}
/* Catalogue de livres - tableau responsive */
.catalogo-container {
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
}
th, td {
padding: 0.75rem 1rem;
border: 1px solid #ddd;
text-align: left;
}
th {
background-color: #e6f0ff;
}
/* Recherche et filtres */
.filtro-container {
margin-top: 1rem;
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
}
.filtro-container label {
font-weight: 600;
}
.filtro-container input[type="text"],
.filtro-container select {
padding: 0.5rem;
font-size: 1rem;
border: 1px solid #ccc;
border-radius: 4px;
min-width: 200px;
}
/* Règlements et ressources */
.risorse-lista {
list-style: none;
padding-left: 0;
}
.risorse-lista li {
margin-bottom: 0.75rem;
}
.risorse-lista a {
color: #0066cc;
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: color 0.3s ease;
}
.risorse-lista a:hover, .risorse-lista a:focus {
color: #004080;
outline: none;
}
/* Responsive */
@media (max-width: 768px) {
nav {
flex-direction: column;
gap: 1rem;
}
.filtro-container {
flex-direction: column;
align-items: flex-start;
}
.filtro-container input[type="text"],
.filtro-container select {
min-width: 100%;
}
}
</style>
</head>
<body>
<header role="banner">
<h1>Portail Réseau Bibliothèques Scolaires</h1>
<p>Catalogues, Règlements et Ressources Pédagogiques pour étudiants et enseignants</p>
</header>
<nav role="navigation" aria-label="Menu principal">
<a href="#catalogo" id="link-catalogo"><i class="fas fa-book"></i> Catalogue</a>
<a href="#regolamenti" id="link-regolamenti"><i class="fas fa-gavel"></i> Règlements</a>
<a href="#risorse" id="link-risorse"><i class="fas fa-chalkboard-teacher"></i> Ressources Pédagogiques</a>
</nav>
<main role="main">
<!-- Section Catalogue de livres -->
<section id="catalogo" aria-labelledby="titolo-catalogo">
<h2 id="titolo-catalogo">Catalogue de Livres</h2>
<div class="filtro-container" aria-label="Filtres de recherche du catalogue">
<label for="ricerca-titolo">Rechercher par titre :</label>
<input type="text" id="ricerca-titolo" placeholder="Entrez un titre ou un mot-clé" aria-describedby="descrizione-ricerca">
<label for="filtro-categoria">Filtrer par catégorie :</label>
<select id="filtro-categoria" aria-describedby="descrizione-filtro">
<option value="">Toutes</option>
<option value="Narrativa">Fiction</option>
<option value="Scienze">Sciences</option>
<option value="Storia">Histoire</option>
<option value="Matematica">Mathématiques</option>
<option value="Arte">Art</option>
</select>
</div>
<div class="catalogo-container">
<table aria-describedby="descrizione-tabella">
<thead>
<tr>
<th>Titre</th>
<th>Auteur</th>
<th>Catégorie</th>
<th>Disponibilité</th>
</tr>
</thead>
<tbody id="tabella-catalogo">
<!-- Lignes générées dynamiquement par JS -->
</tbody>
</table>
</div>
</section>
<!-- Section Règlements -->
<section id="regolamenti" aria-labelledby="titolo-regolamenti">
<h2 id="titolo-regolamenti">Règlements</h2>
<ul class="risorse-lista">
<li><a href="documenti/regolamento_generale.pdf" target="_blank" rel="noopener" aria-label="Ouvrir le règlement général en PDF"><i class="fas fa-file-pdf"></i> Règlement Général de la Bibliothèque</a></li>
<li><a href="documenti/regolamento_prestito.pdf" target="_blank" rel="noopener" aria-label="Ouvrir le règlement de prêt en PDF"><i class="fas fa-file-pdf"></i> Règlement de Prêt des Livres</a></li>
<li><a href="documenti/regolamento_comportamento.pdf" target="_blank" rel="noopener" aria-label="Ouvrir le règlement de comportement en PDF"><i class="fas fa-file-pdf"></i> Règlement de Comportement des Utilisateurs</a></li>
</ul>
</section>
<!-- Section Ressources Pédagogiques -->
<section id="risorse" aria-labelledby="titolo-risorse">
<h2 id="titolo-risorse">Ressources Pédagogiques</h2>
<ul class="risorse-lista" id="lista-risorse">
<!-- Ressources chargées dynamiquement -->
</ul>
</section>
</main>
<footer role="contentinfo">
<p>© 2024 Réseau Bibliothèques Scolaires - Tous droits réservés</p>
</footer>
<script>
// Données simulées pour le catalogue de livres (normalement chargées depuis backend ou fichier JSON)
const catalogoLibri = [
{ titolo: "Il piccolo principe", autore: "Antoine de Saint-Exupéry", categoria: "Narrativa", disponibilita: "Disponibile" },
{ titolo: "La teoria della relatività", autore: "Albert Einstein", categoria: "Scienze", disponibilita: "In prestito" },
{ titolo: "Storia d'Italia", autore: "Indro Montanelli", categoria: "Storia", disponibilita: "Disponibile" },
{ titolo: "Matematica per tutti", autore: "Giovanni Rossi", categoria: "Matematica", disponibilita: "Disponibile" },
{ titolo: "Arte moderna", autore: "Luca Bianchi", categoria: "Arte", disponibilita: "In prestito" },
{ titolo: "Le avventure di Pinocchio", autore: "Carlo Collodi", categoria: "Narrativa", disponibilita: "Disponibile" }
];
// Données simulées pour les ressources pédagogiques
const risorseDidattiche = [
{ nome: "Guida alla scrittura creativa", link: "risorse/guida_scrittura.pdf" },
{ nome: "Esercizi di matematica", link: "risorse/esercizi_matematica.pdf" },
{ nome: "Storia dell'arte - presentazione", link: "risorse/storia_arte.pptx" },
{ nome: "Video lezioni di scienze", link: "https://www.youtube.com/playlist?list=PLscienze" }
];
// Fonction pour créer les lignes du tableau du catalogue selon les filtres
function aggiornaCatalogo() {
const tbody = document.getElementById('tabella-catalogo');
const ricerca = document.getElementById('ricerca-titolo').value.toLowerCase();
const categoria = document.getElementById('filtro-categoria').value;
// Nettoyage du contenu précédent
tbody.innerHTML = '';
// Filtrage des données
const filtrati = catalogoLibri.filter(libro => {
const matchTitolo = libro.titolo.toLowerCase().includes(ricerca);
const matchCategoria = categoria === '' || libro.categoria === categoria;
return matchTitolo && matchCategoria;
});
// Création des lignes
if (filtrati.length === 0) {
const tr = document.createElement('tr');
const td = document.createElement('td');
td.colSpan = 4;
td.textContent = 'Aucun livre trouvé avec les critères sélectionnés.';
td.style.textAlign = 'center';
tr.appendChild(td);
tbody.appendChild(tr);
return;
}
filtrati.forEach(libro => {
const tr = document.createElement('tr');
// Titre
const tdTitolo = document.createElement('td');
tdTitolo.textContent = libro.titolo;
tr.appendChild(tdTitolo);
// Auteur
const tdAutore = document.createElement('td');
tdAutore.textContent = libro.autore;
tr.appendChild(tdAutore);
// Catégorie
const tdCategoria = document.createElement('td');
tdCategoria.textContent = libro.categoria;
tr.appendChild(tdCategoria);
// Disponibilité
const tdDisp = document.createElement('td');
tdDisp.textContent = libro.disponibilita;
tdDisp.style.color = libro.disponibilita === 'Disponibile' ? 'green' : 'red';
tr.appendChild(tdDisp);
tbody.appendChild(tr);
});
}
// Fonction pour charger les ressources pédagogiques dans la liste
function caricaRisorse() {
const lista = document.getElementById('lista-risorse');
risorseDidattiche.forEach(risorsa => {
const li = document.createElement('li');
const a = document.createElement('a');
a.href = risorsa.link;
a.target = '_blank';
a.rel = 'noopener';
a.textContent = risorsa.nome;
// Icône fichier ou lien externe
if (risorsa.link.match(/\.pdf$/i)) {
a.innerHTML = '<i class="fas fa-file-pdf"></i> ' + a.textContent;
} else if (risorsa.link.match(/^https?:\/\//i)) {
a.innerHTML = '<i class="fas fa-external-link-alt"></i> ' + a.textContent;
} else {
a.innerHTML = '<i class="fas fa-file"></i> ' + a.textContent;
}
li.appendChild(a);
lista.appendChild(li);
});
}
// Écouteurs d'événements pour les filtres
document.getElementById('ricerca-titolo').addEventListener('input', aggiornaCatalogo);
document.getElementById('filtro-categoria').addEventListener('change', aggiornaCatalogo);
// Initialisation de la page
document.addEventListener('DOMContentLoaded', () => {
aggiornaCatalogo();
caricaRisorse();
});
</script>
</body>
</html>HTML5 : structure sémantique du portail avec header, nav, main, footer
CSS3 : mise en page responsive avec Flexbox et Grid, style cohérent et accessible
JavaScript : gestion dynamique du catalogue, filtres de recherche et chargement de contenu
Bibliothèque externe : FontAwesome pour les icônes visuelles de navigation et catégories
Fichier JSON local : simulation de base de données pour catalogue de livres et ressources pédagogiques
Configuration : structure des dossiers pour les assets (css/, js/, data/)
Accessibilité : rôles et attributs ARIA pour améliorer l'utilisabilité
Arduino : non applicable (projet web autonome)
Dépendances logicielles : aucune dépendance externe requise à part FontAwesome CDN
Configuration logicielle : inclure FontAwesome via CDN dans le <head> pour les icônes