Le persone che lavorano nel web design l'industria paragona lo sviluppo di siti Web front-end a uno sgabello a tre gambe. Queste tre gambe, i tre livelli dello sviluppo web, comprendono la struttura, lo stile e i comportamenti di un sito.
Perché dovresti separare gli strati?
Quando crei una pagina web, la sua struttura dovrebbe essere relegata al tuo HTML, stili visivi al CSSe comportamenti agli script. Alcuni dei vantaggi della separazione degli strati sono:
- Risorse condivise:Quando scrivi un file CSS o JavaScript esterno, qualsiasi pagina del sito può utilizzare quel file. Se hai bisogno di apportare una modifica a quel file, forse per aggiorna alcuni stili tipografici sul sito Web, ogni pagina che utilizza quel foglio di stile riceverà la modifica. Non è necessario modificare singolarmente ogni pagina del sito Web, il che potrebbe essere un'impresa estenuante per un sito Web di grandi dimensioni.
- Download più veloci:Dopo che lo script o il foglio di stile è stato scaricato dal cliente per la prima volta, viene memorizzato nella cache del browser web. Poiché queste risorse condivise sono ora contenute nel cache del browser, le altre pagine richieste nel browser vengono caricate più rapidamente, il che migliora la velocità e le prestazioni complessive della pagina.
- Team composti da più persone:Se hai più di una persona che lavora su un sito web contemporaneamente, usa i sistemi di controllo della versione che consentono il check-in e il check-out dei file per garantire che tutti lavorino ultime versioni. Questo processo è molto più difficile da eseguire se stili e comportamenti sono intrecciati con documenti di struttura.
- SEO:Un sito che dimostri una chiara separazione tra stile e struttura ha probabilmente un rendimento migliore per i motori di ricerca perché può eseguire la scansione di quel contenuto in modo più efficace e comprendere la pagina senza impantanarsi nello stile visivo e nel comportamento informazione.
- Accessibilità:I fogli di stile esterni ei file di script sono più accessibili alle persone e ai browser. Software come lettori dello schermo possono elaborare il contenuto dal livello 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 comunque visualizzare il HTML. Puoi quindi migliorare progressivamente il tuo 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 sottostante HTML codice di quella pagina. Proprio come la struttura di una casa crea una solida base su cui è costruito il resto della casa, una solida base di HTML crea una piattaforma su cui è possibile creare un sito web.
Il livello della struttura è dove memorizzi tutti i contenuti che i tuoi clienti vogliono leggere o guardare. La struttura HTML può essere costituita da testo e immagini e include il collegamenti ipertestuali che i visitatori utilizzeranno per navigare nel sito. Queste informazioni sono codificate in conformità agli standard HTML5 e può includere testo, immagini e contenuti multimediali (video, audio, ecc.).
Ogni aspetto del contenuto di un sito dovrebbe essere rappresentato nel livello della struttura. Questa separazione 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 apparirà un documento HTML strutturato ai visitatori di un sito ed è definito da CSS (Fogli di stile). Questi file contengono istruzioni stilistiche su come visualizzare il documento in un browser web. Il livello di stile di solito include query multimediali media che modificano la visualizzazione di un sito in base a dimensioni dello schermo e dispositivo.
Tutti gli stili visivi per un sito Web dovrebbero risiedere in un foglio di stile esterno. Puoi utilizzare più fogli di stile, ma ogni file CSS richiede una richiesta HTTP per recuperarlo, che influenzano le prestazioni del sito site.
JavaScript: il livello del comportamento
Il livello di comportamento rende interattivo un sito Web, consentendo alla pagina di rispondere alle azioni dell'utente o di cambiare in base a una serie di condizioni. JavaScript è il linguaggio più comunemente usato per il livello di comportamento, ma CGI e PHP sono anche molto usati.
Quando gli sviluppatori fanno riferimento al livello di comportamento, la maggior parte di essi indica il livello che viene attivato direttamente nel browser web. Usa questo livello per interagire direttamente con il Document Object Model. Scrivere HTML valido nel livello del contenuto è importante per le interazioni DOM nel livello del comportamento. Quando crei il livello di comportamento, dovresti utilizzare file di script esterni, proprio come con i CSS, per ottimizzare velocità e prestazioni.