Webmobili 5: differenze tra le versioni
| Riga 76: | Riga 76: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
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. | 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 <code>Scripts/js-designbest/WM_StartAll.js</code>, il quale, | L'ultimo script in assoluto deve essere <code>Scripts/js-designbest/WM_StartAll.js</code>, il quale, memore di avere le librerie necessarie precaricate, si occupa di eseguire le funzioni di '''wmOnReady''' in ordine cronologico di inserimento. | ||
== Sottoprogetti == | == Sottoprogetti == | ||
Versione delle 16:06, 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-text-size-big1 {
font-size: $font-size-big1;
}
.wm-text-size-medium1 {
font-size: $font-size-medium1;
}
.wm-text-size-medium2 {
font-size: $font-size-medium2;
}
/* ... */
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.
