Corsi on-line

Creare un intero sito Web con un solo tag HTML

Single-Tag Website” è un interessante esperimento finalizzato al rendering, o se preferite alla visualizzazione, di una pagina Web completa attraverso l’utilizzo di un singolo tag; si tratta in pratica di un tentativo attraverso il quale dimostrare quanto attualmente siano evolute le tecniche di sviluppo basate sulle regole di stile CSS; sostanzialmente tutto il markup della risorsa si riassume in un tag link attraverso il quale viene richiamato il foglio di stile, index.css, che si occupa della resa grafica di tutti i contenuti visualizzati.

Single-Tag_Website

La pagina Web ottenuta in questo modo presenta tutti gli elementi strutturali richiesti in una comune outline, per cui si avranno un header destinato alle intestazioni di pagina, alcune divbox affiancate orizzontalmente e verticalmente per ospitare dei testi, delle immagini alle quali sono stati applicati diversi effetti (ombreggiatura esterna, arrotondamento..), un utilizzo dei colori basato sulle diverse tonalità di grigio e sulla colorazione dei bordi per separare le diverse componenti nonché un footer per le informazioni a piè di pagina.

Come anticipato, a livello di markup tutto ciò viene generato attraverso un semplice collegamento allo stylesheet, al di là di questo anche le immagini sono state inserite tramite uno schema di encoding JPEG in Base64 per la rappresentazione dei dati binari in formato ASCII, in pratica la stessa metodologia impiegata nel trasferimento di contenuti multimediali tramite canali che gestiscono informazioni sotto forma di stringhe (allegati email, campi BLOB dei database..).

Da notare la presenza all’interno del CSS di una dichiarazione della codifica dei caratteri Unicode, nel caso specifico UTF-8; a tal proposito è bene ricordare che la dichiarazione @charset potrebbe essere confusa come una regola di CSS, essa però non viene considerata tale durante il parsing che il browser effettua per individuare il corretto encoding dei caratteri, quindi soltanto un’esatta sequenza di byte (ad iniziare dal primo che compone il foglio di stile) potrà essere interpretata in modo corretto.

Da sottolineare anche la metodologia scelta per l’inclusione dei testi presentati all’interno della pagina, un procedura effettuata anche in questo caso direttamente tramite CSS attraverso la pseudo-classe :root.

Via Single-Tag Website

Post correlati
I più letti del mese
Tematiche