Un sito web non è nulla senza servizi, ma se l'occhio vuole la sua parte, anche la veste grafica non deve essere trascurata. La produzione di HTML SEO friendly parte dalla conoscenza della giusta semantica: l'utilizzo degli opportuni tag all'interno delle varie sezioni della pagina. In secondo luogo, ora che abbiamo ottenuto un buon voto dai motori di indicizzazione, dobbiamo attrarre l'attenzione dell'utente, dando degli stili ai componenti che rendano la pagina oggettivamente bella e facile da navigare o leggere.
Tutto questo, per noi sviluppatori, si traduce in un file .html e uno .css nel quale andremo a scrivere tag e stili, unendoli tramite l'utilizzo di id, classi o puntando direttamente l'elemento. Chi ha già avuto esperienza in materia sa benissimo a cosa si andrà incontro: ore e ore di sviluppo in cui i caratteri < e > diventeranno i nostri peggiori nemici, insieme alle parole class, style e id.
Fortuna vuole che HTML, essendo un linguaggio a marcatori, ha degli standard ed è quindi possibile creare degli alias, se così possiamo chiamarli, per scrivere gli stessi oggetti, utilizzando una sintassi più stringata. Questo set di regole viene definito un pre-processore HTML.
I pre-processori HTML non sono da confondere con librerie come Handlebars, Mustache, JsRender che producono codice HTML a runtime, il risultato della compilazione tramite pre-processori sarà una file HTML, che potremo modificare a integrare nell'applicazione.
Come si può capire dal nome, il compito di Slim è alleggerire la scrittura HTML, proponendo una sintassi molto snella, ma mantenendo una leggibilità elevata, consentendo anche ai meno esperti di scrivere o leggere un template. È un linguaggio a indentazione, nel quale è necessario rispettare le spaziature per poter ottenere il giusto puzzle di elementi HTML.
Basandosi su Ruby, sarà necessario installare sulla macchina il runtime ([link](https://www.ruby-lang.org/it/downloads/)) e successivamente il compilatore tramite il seguente comando.
gem install slim
A questo punto non servirà altro che creare un file con estensione .slim nel quale inserire un template, come nello snippet seguente.
doctype html html head title Mia applicazione meta name="author" content=Morgan body h1 Anagrafica #content label.font-blue.bold Nome p Morgan label.font-green Cognome p Pizzini <div> <p>Ciao Mondo!</p> </div> div id="footer" p | Grazie, Contattaci al numero 123456 Copyright 2021
Dall'analisi del codice possiamo capire che:
- Stiamo creando un tag head con all'interno title e meta author
- Un body con un tag h1 Anagrafica
- Il div, essendo l'elemento più usato, può essere sottinteso: utilizzando #content stiamo creando un div con id content
- Le classi si possono specificare tramite il ., la prima label avrà 2 classi: font-blue e bold
- Slim permette l'utilizzo anche di normale HTML, in tal caso il codice non verrà compilato, e ci permetterà di migrare al nuovo template senza dover riscrivere tutto da zero
- Se la sintassi risulta troppo stringata possiamo utilizzare una modalità di scrittura più espressiva come div id="footer"
- Le pipe (|) funzionano come un legante, permettendoci di scrivere codice su più righe, ma inserendolo sempre nello stesso tag
Abbiamo anche la possibilità di creare pagine che si adattino ai nostri input: nel caso in cui volessimo creare una landing page o una newsletter in cui l'unica variante è il messaggio, potremmo creare un template come:
div p= message
In seguito, per convertilo in HTML ci servirà utilizzare slimrb, installata insieme a slim, che compilerà il file .slim in uno .html
slimrb newsletter.slim -l '{"message": "Grazie!"}' > newsletter.html
Questo è solo l'inizio dato che all'interno di ogni pagina possiamo inserire espressioni, helpers, funzioni, aggiungere template comuni, ecc... Per una documentazione più dettagliata riguardo questi aspetti è disponibile la pagina del progetto su [GitHub](https://github.com/slim-template/slim).
Della stessa famiglia di pre-processori troviamo anche Pug, che utilizza una sintassi molto similare, ed è template engine spesso utilizzato in simbiosi con applicazioni scritte in Express.js.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare l'attributo HTML inert per disabilitare gli eventi
Gestire gli errori di caricamento delle immagini
Utilizzare .NET Framework con le Azure Function in modalità isolata
Usare gateway dedicati con Azure Cosmos DB per migliorare le prestazioni
Specificare il numero di parentesi graffe nella string interpolation in combinazione con i string literal in C#
Health monitoring con Azure Container App
Utilizzo di Set e Array in JavaScript
Creare un router per Single Page Application con l'evento navigate
Creare automaticamente una issue di GitHub
Personalizzare le richieste con i rule set di Azure Front Door
Utilizzare la parola chiave nameof per referenziare i nomi dei parametri di un metodo in C#
Leggere i dati di configurazione di ASP.NET Core da Azure Key Vault