Coloro che lavorano nel settore del web design definiscono lo sviluppo di siti Web front-end in uno sgabello a tre gambe. Queste tre gambe - i tre livelli di sviluppo web - comprendono struttura, stile e comportamenti.
Perché dovresti separare gli strati?
Quando si crea una pagina Web, la sua struttura deve essere relegata al codice HTML, gli stili visivi al CSS e i comportamenti agli script. Alcuni dei vantaggi della separazione dei livelli sono:
- Risorse condivise: Quando scrivi un file CSS o JavaScript esterno, qualsiasi pagina del sito può utilizzare quel file. Se è necessario apportare una modifica a tale file, magari per aggiornare alcuni stili tipografici sul sito Web, ogni pagina che utilizza tale foglio di stile otterrà la modifica. Non è necessario modificare ogni pagina del sito Web singolarmente, il che potrebbe essere un'impresa estenuante per un sito Web di grandi dimensioni.
- Download più veloci: Una volta che lo script o il foglio di stile sono stati scaricati dal cliente per la prima volta, viene memorizzato nella cache dal browser web. Poiché queste risorse condivise sono ora contenute nella cache del browser, altre pagine richieste nel browser vengono caricate più rapidamente, migliorando la velocità e le prestazioni complessive della pagina.
- Squadre di più persone: Se hai più di una persona che lavora su un sito web in una volta, puoi utilizzare sistemi che consentono il check-in e il check-out dei file per garantire che tutti lavorino con le ultime versioni. Questo è molto più difficile da fare se stili e comportamenti si intrecciano con i documenti di struttura.
- SEO: Un sito che presenta una netta separazione tra stile e struttura è destinato a funzionare meglio per i motori di ricerca perché è in grado di eseguire la scansione dei contenuti in modo più efficace e di comprendere la pagina senza impantanarsi nello stile di visualizzazione e nelle informazioni sul comportamento.
- Accessibilità: I fogli di stile esterni e i file di script sono più accessibili alle persone e ai browser. Software come gli screen reader possono elaborare il contenuto dal layer della struttura più facilmente senza occuparsi di stili che non possono comunque utilizzare.
- Retrocompatibilità: Un sito progettato con livelli di sviluppo separati ha maggiori probabilità di essere retrocompatibile perché i browser e i dispositivi che non possono utilizzare determinati stili CSS o che hanno JavaScript disabilitato possono ancora visualizzare l'HTML. È quindi possibile migliorare progressivamente il sito Web con funzionalità per i browser che li supportano.
HTML: il livello della struttura
La struttura o il livello di contenuto di una pagina Web è il codice HTML sottostante di quella pagina. Proprio come la cornice di una casa crea una solida base su cui è costruito il resto della casa, una solida base di HTML crea una piattaforma sulla quale è possibile creare un sito web.
Il livello di struttura è il luogo in cui si memorizzano tutti i contenuti che i clienti desiderano leggere o guardare. La struttura HTML può essere costituita da testo e immagini e include i collegamenti ipertestuali che i visitatori useranno per navigare nel sito web. Questo è codificato in HTML5 conforme agli standard e può includere testo, immagini e multimedia (video, audio, ecc.).
Ogni aspetto del contenuto di un sito dovrebbe essere rappresentato nel livello della struttura. Ciò consente ai clienti che hanno disattivato JavaScript o che non possono visualizzare l'accesso CSS all'intero sito Web, se non a tutte le sue funzionalità.
CSS: il livello degli stili
Questo livello determina come un documento HTML strutturato sarà visualizzato dai visitatori di un sito ed è definito da CSS (Cascading Style Sheets). Questi file contengono istruzioni stilistiche su come il documento deve essere visualizzato in un browser web. Il livello di stile di solito include le query multimediali che modificano la visualizzazione di un sito in base alle dimensioni dello schermo e al dispositivo.
Tutti gli stili visivi per un sito Web devono risiedere in un foglio di stile esterno. Puoi utilizzare più fogli di stile, ma ricorda che ogni file CSS richiede una richiesta HTTP per recuperarlo, influenzando le prestazioni del sito.
JavaScript: il livello di comportamento
Il livello di comportamento rende interattivo un sito Web, consentendo alla pagina di rispondere alle azioni dell'utente o di modificarla in base a una serie di condizioni. JavaScript è la lingua più comunemente usata per il livello di comportamento, ma anche CGI e PHP sono molto usati.
Quando gli sviluppatori fanno riferimento al livello comportamentale, la maggior parte di essi indica il livello attivato direttamente nel browser web. Si utilizza questo livello per interagire direttamente con il DOM (Document Object Model). Scrivere un codice HTML valido nel livello di contenuto è importante per le interazioni DOM nel livello di comportamento. Quando si costruisce nel livello comportamentale, è necessario utilizzare file di script esterni, proprio come con i CSS, per ottimizzare velocità e prestazioni.
