Webmobili 5: differenze tra le versioni
| Riga 20: | Riga 20: | ||
Sono globali, sempre inclusi nel '''bundle''' e devono rispettare la nomenclatura che segue: | Sono globali, sempre inclusi nel '''bundle''' e devono rispettare la nomenclatura che segue: | ||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
.wm- | .wm-font-family1 { font-family:$font-theme1; } | ||
.wm-font-family2 { font-family:$font-theme2; } | |||
} | |||
.wm- | .wm-col-white { color:white; } | ||
.wm-col-theme { color:$col-theme; } | |||
} | .wm-col-commerce { color:$col-commerce; } | ||
.wm- | |||
} | |||
/* ... */ | /* ... */ | ||
Versione delle 16:36, 22 feb 2021
| Webmobili 5 | |
|---|---|
| http://www.designbest.com | |
| Ambiente di test | http://www.dbdemo47.it (altri dettagli) |
| Sistema di versionamento | |
| Tipo | SVN |
| URL del trunk | https://svn.office.webmobili.it/svn/WM4/WM45 |
| URL base dei branch | https://svn.office.webmobili.it/svn/WM4/branches/ |
Webmobili 5 è l'attuale implementazione del progetto Webmobili.
CSS - Organizzazione
Abbiamo fatto largo utilizzo di SCSS in quanto generano un output minificato. File usati (in ordine crescente di specificità)
- designbest-custom.scss (è costruito importando tutti gli altri file)
- _designbest-custom.variables.scss (dove vengono definite i valori delle variabili di grandezza, colore, dimensioni più usate nel sito)
- _designbest-custom.mixins.scss (punto unico dei mixin tipo transition, shadow, transform ecc...)
- _designbest-custom.reset.scss (cambia il comportamento base dei tag)
- _designbest-custom.general.scss (classi generiche utilizzate in tutte le pagine)
- _designbest-custom.components.scss (moduli che si ripetono in diverse pagine)
- _designbest-custom.header.scss (specifiche regole per l'header)
- _designbest-custom.footer.scss (specifiche regole per il footer)
Approccio misto, definire gli elementi che si usano di più crearne le classe e in parallelo creare le classi mattoncino per sovrascrivere gli attributi che cambiano in situazioni particolari.
CSS generici
Sono globali, sempre inclusi nel bundle e devono rispettare la nomenclatura che segue:
.wm-font-family1 { font-family:$font-theme1; }
.wm-font-family2 { font-family:$font-theme2; }
.wm-col-white { color:white; }
.wm-col-theme { color:$col-theme; }
.wm-col-commerce { color:$col-commerce; }
/* ... */
con wm- come prefisso.
CSS specifici per pagina
Gli .scss specifici per pagina stanno nella cartella Content/scss/pages.
Possono essere più "sporchi" perché sono l'ultimo gradino di inclusione (si consiglia sempre e comunque di mantenere ordine ed eleganza).
CSS di moduli riutilizzabili
Nella cartella Content/scss/components troviamo tutti quei css che fanno riferimento a moduli che vengono inclusi in alcune pagine (non tutte).
In questi casi, quando si dovrà includere il componente si includerà anche il CSS corrispondente (es. moduli carousel o telecomando).
Inclusione dei CSS in pagina
Seguendo la guida di Lighthouse, i css vengono caricati in modo asincrono se viene utilizzato il seguente markup:
<link rel="preload" href="/Content/css/designbest-custom.min.css" as="style" onload="this.onload = null; this.rel = 'stylesheet'"/>
Per avere migliori prestazioni il contenuto custom delle pagine conviene che venga inserito direttamente INLINE, nell'header della pagina.
Per farlo utilizzare l'apposita @section HeadCustom come nel seguente esempio.
@section HeadCustom {
@Html.InlineCss("~/Content/css/slick.min.css", "~/Content/css/components/carousel.min.css", "~/Content/css/pages/scheda-progetto.min.css")
}Il metodo helper Html.InlineCss() va fisicamente a leggere il contenuto di ogni CSS specificato, lo minifica e lo appende in pagina nel tag <style/>.
JavaScript - Organizzazione
Come da specifiche Lighthouse, si è scelto di rendere tutto il JavaScript in modo asincrono.
Per gli script interni si utilizza l'attributo defer="defer" in modo da mantenere l'ordine di inclusione.
JavaScript - Funzioni da onready
Per quando riguarda gli script inline, questi devono essere eseguiti come ultimi in modo da avere la certezza che tutte le librerie siano state caricate(jquery, bootstrap, wmcarousel....).
La convenzione utilizzata è la seguente:
<script>
var wmOnReady = wmOnReady || [];
wmOnReady.push(function () {
$('.wm-carousel-single').wmCarousel(true, false);
});
</script>
Viene dichiarata globalmente una variabile di tipo array di nome wmOnReady che ospita delle funzioni. Queste verranno lanciate non appena la pagina avrà finito di caricare tutti gli script in defer.
L'ultimo script in assoluto deve essere Scripts/js-designbest/WM_StartAll.js, il quale, memore di avere le librerie necessarie precaricate, si occupa di eseguire le funzioni di wmOnReady in ordine cronologico di inserimento.
IMMAGINI - Organizzazione
Le immagini sono caricate in maniera lazy all'occorrenza. Per i nuovi browser questo avviene tramite l'utilizzo del nuovo attributo loading="lazy" all'interno del tag <img />.
Al fine di avere retrocompatibilità con tutti i browser è stata implementata la libreria lazysizes.js.
Una immagine deve avere questi requisiti minimi:
<img data-src="@picturePath" alt="@altText" loading="lazy" class="lazyload" />
- Nel caso di Browser normali
Un comando all'interno di Scripts/js-designbest/WM45Common.js, che parte al document ready, copierà nell'attributo src delle immagini il valore dell'attributo data-src e di conseguenza l'attributo loading="lazy" farà nativamente il suo dovere.
- Nel caso di Browser antiquati
Verrà inclusa asincronamente la libreria lazysizes.js e il lavoro verrà effettuato dalla stessa su tutte le immagini che hanno la classe class="lazyload".
Ricordarsi che se un'immagine viene inserita asincronamente nel documento, questa non viene parsata in automatico, perciò va inserita subito con l'attributo src perché data-src verrebbe ignorato.
