3E e 3I SIA: Sviluppo e progettazione di una pagina web responsive per la società "EcoTech Solutions"
Titolo: Sviluppo e progettazione di una pagina web responsive per la società "EcoTech Solutions"
Materia: Informatica / Tecnologie Web
Corso di studi: Sistemi Informativi Aziendali (SIA) - Classe Terza
Obiettivo: Realizzare la struttura completa di una pagina web aziendale applicando le specifiche dell'HTML5, integrando i metatag di configurazione e SEO nella `<head>`, organizzando i contenuti tramite tag semantici nel `<body>`, ed applicando uno stile graficamente curato e completamente responsive tramite CSS.
---
Requisiti della Consegna
Crea un unico file denominato `index.html` che contenga la seguente struttura:
1. Configurazione e Metadati (`<head>`):
Dichiarazione del `DOCTYPE` HTML5 e lingua italiana (`lang="it"`).
Codifica dei caratteri `UTF-8`.
Impostazione del `viewport` per la resa corretta su dispositivi mobili.
Titolo della pagina (`<title>`): "EcoTech Solutions - Digitalizzazione e Sostenibilità".
Meta tag `description`, `keywords` (con termini coerenti all'indirizzo SIA) e `author`.
2. Stile Grafico Integrato (`<style>`):
Palette di colori aziendali definita per sfondi, titoli e testo principale.
Layout fluido con larghezza percentuale (`width`) e limiti massimi (`max-width`).
Barra di navigazione realizzata con Flexbox.
Tabella stilizzata con bordi, spaziatura (`padding`) e righe ad alternanza di colore (zebra striping).
Elementi multimediali adattivi (`width: 100%`, `height: auto`).
Regole di Media Query (`@media`) per schermi inferiori o uguali a 768px (per adattare menu, margini e font su smartphone).
3. Struttura Semantica del Contenuto (`<body>`):
`<header>`: Intestazione con titolo aziendale (`<h1>`), sottotitolo e menu di navigazione (`<nav>`).
`<main>`: Contenitore principale articolato in:
Sezione Servizi (`<section>`): Presentazione aziendale correlata da un'immagine caricata tramite URL assoluto.
Sezione Listino (`<section>`): Tabella contenente i dati sui pacchetti gestionali (Modulo, Target, Costo) racchiusa in un contenitore ad alto scorrimento orizzontale (`.table-responsive`).
Articolo Demo (`<article>`): Breve approfondimento con un video promozionale incorporato tramite tag `<video>` con URL assoluto per sorgente e poster.
Barra Laterale (`<aside>`): Box informativo con orari di assistenza e contatti rapidi.
`<footer>`: Piè di pagina con dati societari, Partita IVA e informazioni sul copyright.
Soluzione e Codice di Riferimento
```html
<!DOCTYPE html>
<html lang="it">
<head>
<!-- Codifica dei caratteri e gestione Viewport per Responsività -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Metatag SEO e Informativi -->
<meta name="description" content="EcoTech Solutions: Soluzioni di digitalizzazione, gestione dati ed efficienza energetica per le imprese moderne.">
<meta name="keywords" content="software aziendale, gestione dati, digitalizzazione, sistemi informativi, SIA, sostenibilita">
<meta name="author" content="Studente SIA">
<!-- Titolo Scheda Browser -->
<title>EcoTech Solutions - Digitalizzazione e Sostenibilità</title>
<!-- Stile Grafico CSS Integrato -->
<style>
/ Box Model e Reset Generale /
{
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f7f6;
color: #333333;
line-height: 1.6;
margin: 0;
padding: 0;
}
/ Intestazione del sito /
header {
background-color: #1b4332;
color: #ffffff;
padding: 20px 15px;
text-align: center;
}
header h1 {
margin: 0 0 10px 0;
color: #d8f3dc;
font-size: 1.8rem;
}
/ Menu di Navigazione con Flexbox /
nav ul {
list-style: none;
padding: 0;
margin: 15px 0 0 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 15px;
}
nav ul li a {
color: #ffffff;
text-decoration: none;
font-weight: bold;
padding: 6px 12px;
border-radius: 4px;
transition: background-color 0.3s;
}
nav ul li a:hover {
background-color: #2d6a4f;
}
/ Contenitore Principale Fluido /
main {
width: 90%;
max-width: 1000px;
margin: 20px auto;
background-color: #ffffff;
padding: 25px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
/ Titoli delle Sezioni /
h2 {
color: #2d6a4f;
border-bottom: 2px solid #52b788;
padding-bottom: 5px;
margin-top: 25px;
}
/ Immagine Responsive /
.img-aziendale {
width: 100%;
height: auto;
max-width: 800px;
border-radius: 6px;
display: block;
margin: 15px auto;
}
/ Tabella Responsive con Contenitore Scrollabile /
.table-responsive {
width: 100%;
overflow-x: auto;
margin: 20px 0;
}
table {
width: 100%;
border-collapse: collapse;
min-width: 480px;
}
table, th, td {
border: 1px solid #b7e4c7;
}
th {
background-color: #40916c;
color: #ffffff;
padding: 12px;
text-align: left;
}
td {
padding: 10px;
color: #212529;
}
tr:nth-child(even) {
background-color: #f8f9fa;
}
/ Contenitore e Media Video Responsive /
.video-container {
width: 100%;
margin-top: 15px;
}
video {
width: 100%;
height: auto;
max-width: 640px;
border-radius: 6px;
display: block;
}
/ Box Laterale (Aside) /
aside {
background-color: #e9ecef;
padding: 15px;
border-left: 5px solid #40916c;
margin-top: 30px;
border-radius: 0 6px 6px 0;
}
/ Piè di Pagina /
footer {
background-color: #1b4332;
color: #ffffff;
text-align: center;
padding: 15px;
margin-top: 30px;
font-size: 0.9em;
}
/ ======================================================
MEDIA QUERY: Adattamento per dispositivi mobile (<= 768px)
====================================================== /
@media screen and (max-width: 768px) {
header h1 {
font-size: 1.4rem;
}
/ Disposizione verticale delle voci di menu su mobile /
nav ul {
flex-direction: column;
gap: 8px;
}
main {
width: 95%;
padding: 15px;
}
th, td {
padding: 8px;
font-size: 0.9rem;
}
}
</style>
</head>
<body>
<!-- Header Aziendale -->
<header>
<h1>EcoTech Solutions</h1>
<p>Sistemi Informativi e Innovazione Digitale per l'Impresa</p>
<nav>
<ul>
<li><a href="#servizi">Servizi</a></li>
<li><a href="#listino">Listino</a></li>
<li><a href="#demo">Demo Video</a></li>
<li><a href="#contatti">Contatti</a></li>
</ul>
</nav>
</header>
<!-- Contenuto Principale -->
<main>
<!-- Sezione Servizi con Immagine da URL Assoluto -->
<section id="servizi">
<h2>I Nostri Servizi</h2>
<p>Progettiamo e implementiamo architetture software trasparenti ed efficienti per ottimizzare i processi aziendali e ridurre l'impatto ambientale.</p>
<img src="https://images.unsplash.com/photo-1497366216548-37526070297c?w=800" alt="Uffici tecnologici di EcoTech Solutions" class="img-aziendale">
</section>
<!-- Sezione Tabella Dati con Wrapper Responsive -->
<section id="listino">
<h2>Pacchetti e Piani di Abbonamento</h2>
<p>Di seguito le nostre soluzioni di gestione dati pensate per le PMI:</p>
<div class="table-responsive">
<table>
<thead>
<tr>
<th>Modulo Servizio</th>
<th>Target Aziendale</th>
<th>Costo Annuale (€)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Audit Digitale & Sostenibilità</td>
<td>Piccole Imprese</td>
<td>1.200,00 €</td>
</tr>
<tr>
<td>Migrazione ERP in Cloud</td>
<td>Medie Imprese</td>
<td>3.500,00 €</td>
</tr>
<tr>
<td>Monitoraggio IoT e Impatto Energetico</td>
<td>Grandi Aziende / Industrie</td>
<td>5.800,00 €</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- Articolo con Video integrato da URL Assoluto -->
<article id="demo">
<h2>Presentazione del Prodotto</h2>
<p>Guarda il nostro video introduttivo per scoprire come le nostre piattaforme ottimizzano la gestione dei dati aziendali in tempo reale.</p>
<div class="video-container">
<video controls poster="https://interactive-examples.mdn.mozilla.net/media/cc0-images/poster.png">
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
Il tuo browser non supporta il tag video HTML5.
</video>
</div>
</article>
<!-- Contenuto Accessorio / Avvisi -->
<aside id="contatti">
<h3>Avviso per i Clienti</h3>
<p>Il nostro Helpdesk informatico è disponibile dal lunedì al venerdì dalle 08:30 alle 18:00 per assistenza sui software gestionali.</p>
</aside>
</main>
<!-- Piè di pagina -->
<footer>
<p>© 2026 EcoTech Solutions S.r.l. - Via dell'Informatica 10, Bologna</p>
<p>P.IVA: 12345678901 | Tutti i diritti riservati.</p>
</footer>
</body>
</html>
Note Didattiche per la Valutazione
Connessione con le discipline SIA: L'esercizio unisce i concetti di comunicazione aziendale e rappresentazione dei dati (tipici dell'indirizzo SIA) con la strutturazione di pagine web moderne.
Separazione delle competenze: Si fa notare come l'HTML definisca unicamente il contenuto e la struttura logica, mentre il blocco CSS controlla l'aspetto visivo e l'adattabilità ai dispositivi.
Accessibilità e SEO: Viene evidenziato l'uso corretto dell'attributo `alt` per l'accessibilità delle immagini e la presenza dei metatag indispensabili per l'indicizzazione dei motori di ricerca.
Il Responsive Web Design (RWD) è la tecnica di progettazione web che consente a un sito di adattare automaticamente il proprio layout, la dimensione dei testi, le tabelle e gli elementi multimediali alle dimensioni dello schermo del dispositivo utilizzato (smartphone, tablet, laptop o desktop).
L'obiettivo principale è garantire la migliore esperienza di navigazione possibile senza costringere l'utente a ridimensionare manualmente la pagina o a scorrere orizzontalmente.
1. Perché si usa: i vantaggi principali
Adattamento alla frammentazione dei dispositivi: Oggi la navigazione web avviene in maggioranza da dispositivi mobili (smartphone e tablet) con centinaia di risoluzioni differenti. Un approccio responsive garantisce la fruibilità su qualsiasi schermo.
Indicizzazione SEO (Google Mobile-First): I motori di ricerca come Google analizzano e posizionano i siti web basandosi prioritariamente sulla loro versione mobile. Un sito non responsive viene penalizzato nei risultati di ricerca.
Codice unico e riduzione dei costi: In passato si creavano due siti separati (es. `sito.it` per desktop e `m.sito.it` per mobile). Con il RWD si sviluppa un solo file HTML e un solo foglio di stile CSS, riducendo i tempi di sviluppo e semplificando la manutenzione.
Miglioramento dell'Esperienza Utente (UX): Riduce il tasso di abbandono del sito (bounce rate) offrendo menu leggibili, pulsanti facilmente cliccabili al tocco e tempi di caricamento ottimizzati.
2. I quattro pilastri tecnici del Responsive Web Design
Per rendere una pagina responsive si utilizzano quattro strumenti fondamentali nel codice HTML e CSS:
A. Il Meta Tag Viewport
Inserito nella `<head>` della pagina HTML, comunica al browser mobile di impostare la larghezza della pagina pari a quella dello schermo fisico del dispositivo, disattivando lo zoom automatico di simulazione desktop.
html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
B. Layout Fluidi (Unità di misura relative)
Anziché definire le dimensioni in pixel fissi (`px`), si utilizzano unità di misura percentuali (`%`) o relative alla larghezza della finestra (`vw`, `rem`, `em`).
css
/ Layout rigido (NON responsive) /
.contenitore { width: 1200px; }
/ Layout fluido (Responsive) /
.contenitore { width: 90%; max-width: 1200px; }
C. Media Queries (`@media`)
Le Media Queries sono regole CSS condizionali che applicano determinati stili grafici solo quando lo schermo soddisfa specifiche condizioni (es. larghezza massima di 768 pixel).
css
/ Stile base per Desktop /
nav ul { display: flex; flex-direction: row; }
/ Regola per Smartphone (schermi <= 768px) /
@media screen and (max-width: 768px) {
nav ul {
flex-direction: column; / Incolonna il menu in verticale /
}
}
D. Immagini e Media Flessibili
Per evitare che immagini o video escano dai bordi dello schermo tagliando i contenuti, si imposta una misura massima proporzionale.
```css
img, video {
max-width: 100%;
height: auto;
}
Commenti
Posta un commento