# Realizzare un template "indipendente" dai CMS

**URL:** <https://forum.italia.it/t/realizzare-un-template-indipendente-dai-cms/2135>\
**Category:** Design\
**Created:** [19 Gennaio 2018, 8:55am UTC](https://forum.italia.it/t/realizzare-un-template-indipendente-dai-cms/2135 "2018-01-19T08:55:53Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Floyd611](https://forum.italia.it/user_avatar/forum.italia.it/floyd611/32/3636_2.png) [@Floyd611](https://forum.italia.it/u/Floyd611)\
**Post date:** [19 Gennaio 2018, 8:55am UTC](https://forum.italia.it/t/realizzare-un-template-indipendente-dai-cms/2135/1 "2018-01-19T08:55:53Z")

</div>

Buongiorno a tutti,  
mi sono appena iscritto al forum e gli amministratori non me ne vogliano se sbaglio sezione nella quale scrivo.

Sono un webmaster e devo realizzare un sito per una PA, comune per la precisione.

Lo sviluppatore con il quale collaboro non vorrebbe avvalersi di nessun CMS comunemente adottato (Joomla, WP, Drupal) ecc.

Lui sviluppa in .asp, non .NET

La mia domanda è: da dove dovrei cominciare per preparare, ad esempio, il template della home e delle pagine interne?

Ovviamente per pagine interne intendo, spero di non sbagliare, uno o due layout nelle quali cambieranno i contenuti.

Sto cercando di leggere qualcosa della documentazione ma, ammetto, che è abbastanza dispersiva ed altrettanto complicata.

Grazie a chi avrà la pazienza di rispondere, ne sono certo, non solo a questo mio primo intervento.

---

<div class="post-metadata">

**Author:** ![Riccardo\_Iaconelli](https://forum.italia.it/user_avatar/forum.italia.it/riccardo_iaconelli/32/485_2.png) [@Riccardo\_Iaconelli](https://forum.italia.it/u/Riccardo_Iaconelli)\
**Post date:** [19 Gennaio 2018, 9:52am UTC](https://forum.italia.it/t/realizzare-un-template-indipendente-dai-cms/2135/2 "2018-01-19T09:52:57Z")

</div>

Ciao!

Puoi trovare il toolkit che implementa le linee guida di design qui:

> **[italia/design-web-toolkit](https://github.com/italia/design-web-toolkit)**
>
> design-web-toolkit - Implementazione di riferimento delle linee guida di service design PA

Inoltre, stiamo lavorando a un’evoluzione di questo framework basandolo su Bootstrap 4 (questo repository è ancora in forte evoluzione):

> **[italia/bootstrap-italia](https://github.com/italia/bootstrap-italia)**
>
> bootstrap-italia - Bootstrap Italia è un tema Bootstrap 4 conforme alle linee guida di design per i servizi web della PA

ti rimando sempre a designers.italia.it per ulteriori informazioni e guide tecniche. Spero di averti inviato dei riferimenti utili!

---

<div class="post-metadata">

**Author:** ![Floyd611](https://forum.italia.it/user_avatar/forum.italia.it/floyd611/32/3636_2.png) [@Floyd611](https://forum.italia.it/u/Floyd611)\
**Post date:** [19 Gennaio 2018, 10:19am UTC](https://forum.italia.it/t/realizzare-un-template-indipendente-dai-cms/2135/3 "2018-01-19T10:19:17Z")

</div>

Ciao Riccardo\_Iaconelli,  
grazie per la tempestiva risposta.  
Ho visto ieri il design-web-toolkit ed ho anche scaricato il design-web-toolkit-1.0.0-alpha.zip.

Domanda: come posso “trasformare”, ad esempio, un accordion, un modulo ecc. in una pagina html?

In altri termini: quei file “.tmpl” che trovo in “src/templates/layout–grid.tmpl” come faccio a visualizzarli nel browser?

Ti ringrazio per la pazienza ed il tempo che avrai per rispondermi.

---

<div class="post-metadata">

**Author:** ![francescozaia](https://forum.italia.it/user_avatar/forum.italia.it/francescozaia/32/3833_2.png) [@francescozaia](https://forum.italia.it/u/francescozaia)\
**Post date:** [19 Gennaio 2018, 10:27am UTC](https://forum.italia.it/t/realizzare-un-template-indipendente-dai-cms/2135/4 "2018-01-19T10:27:22Z")

</div>

Ciao Giuseppe, la documentazione completa del web-toolkit è presente a questa pagina:

[https://italia.github.io/design-web-toolkit/](https://italia.github.io/design-web-toolkit/)

Qui dovresti trovare tutte le informazioni di cui hai bisogno navigando con il menù sulla sinistra alla sezione “come iniziare”. Riguardo il codice per la realizzazione dei singoli componenti, a titolo di esempio, puoi trovare il codice HTML per l’accordion qui:

[https://italia.github.io/design-web-toolkit/components/detail/accordion.html](https://italia.github.io/design-web-toolkit/components/detail/accordion.html)

---

<div class="post-metadata">

**Author:** ![Floyd611](https://forum.italia.it/user_avatar/forum.italia.it/floyd611/32/3636_2.png) [@Floyd611](https://forum.italia.it/u/Floyd611)\
**Post date:** [19 Gennaio 2018, 11:13am UTC](https://forum.italia.it/t/realizzare-un-template-indipendente-dai-cms/2135/5 "2018-01-19T11:13:51Z")

</div>

Ciao Francesco Zaia,  
grazie anche a te per la risposta.  
Mi spulcerò tutte le informazioni messe a disposizione.  
A presto.  
Giuseppe

---

<div class="post-metadata">

**Author:** ![Floyd611](https://forum.italia.it/user_avatar/forum.italia.it/floyd611/32/3636_2.png) [@Floyd611](https://forum.italia.it/u/Floyd611)\
**Post date:** [19 Gennaio 2018, 11:48am UTC](https://forum.italia.it/t/realizzare-un-template-indipendente-dai-cms/2135/6 "2018-01-19T11:48:55Z")

</div>

Rieccomi,  
dopo aver provato da web il componente “Accordion”:  
[https://italia.github.io/design-web-toolkit/components/detail/accordion.html](https://italia.github.io/design-web-toolkit/components/detail/accordion.html)

Ho notato che navigando da tastiera, con il tasto Tab, non va in sequenza. Dal primo div salta all’ultimo. Saltando il 2°, 3° e 4°.  
E’ normale?  
Grazie  
Giuseppe

---

<div class="post-metadata">

**Author:** ![Floyd611](https://forum.italia.it/user_avatar/forum.italia.it/floyd611/32/3636_2.png) [@Floyd611](https://forum.italia.it/u/Floyd611)\
**Post date:** [22 Gennaio 2018, 8:45am UTC](https://forum.italia.it/t/realizzare-un-template-indipendente-dai-cms/2135/7 "2018-01-22T08:45:05Z")

</div>

Buongiorno alla community,  
proseguo in questa sezione i miei post, onde evitare “dispersione” con gli argomenti.

Premesso che la navigazione da tastiera per il componente “Accordion”, persiste, ieri mi sono accorto di un altro piccolo problema, credo risolvibile.

Ho replicato la pagina, “entrypoint–responsive.html”. Bene, nel mio browser - google chrome - appare la barra di scroll orizzontale in fondo.  
Il file CSS, build.css, non è stato assolutamente toccato, nel senso che non ho scritto nessun override. Nulla.  
Così come accade alla stessa pagina:  
[https://italia.github.io/design-web-toolkit/components/preview/entrypoint--responsive.html](https://italia.github.io/design-web-toolkit/components/preview/entrypoint--responsive.html)

Guardando il codice html, tutti gli “entrypoint” sono racchiusi in un `div class="Grid Grid--withGutter"`.

La classe ``.Grid–withGutter` ha la seguente dichiarazione:

`.Grid--withGutter{margin:0 -.8rem;}`

Il problema, secondo me, è il margine negativo `-.8rem;`. Commentando il quale, non appare più la barra di scroll orizzontale.

Lo stesso problema si verifica con la pagina  
[https://italia.github.io/design-web-toolkit/components/preview/page--menu.html](https://italia.github.io/design-web-toolkit/components/preview/page--menu.html)

A me appare la barra di scroll orizzontale, invece guardandola dal link indicato, no.

Accade solo a me oppure qualcun altro ha notato lo stesso problema?

Grazie

Giuseppe

---

<div class="post-metadata">

**Author:** ![Floyd611](https://forum.italia.it/user_avatar/forum.italia.it/floyd611/32/3636_2.png) [@Floyd611](https://forum.italia.it/u/Floyd611)\
**Post date:** [27 Gennaio 2018, 11:22am UTC](https://forum.italia.it/t/realizzare-un-template-indipendente-dai-cms/2135/8 "2018-01-27T11:22:47Z")

</div>

Buongiorno a tutti,  
tornpo sull’argomento del componente “Accordion” in quanto lo dovrei inserire in una pagina.  
Noto ancora il problema che, da tastiera, riceve il “focus” solo il primo e poi nulla più.  
Nessun altro webmaster ha inserito questo componente?  
Se si, come funziona?  
Grazie.

---

<div class="post-metadata">

**Author:** ![gunzip](https://forum.italia.it/user_avatar/forum.italia.it/gunzip/32/2064_2.png) [@gunzip](https://forum.italia.it/u/gunzip)\
**Post date:** [27 Gennaio 2018, 12:16pm UTC](https://forum.italia.it/t/realizzare-un-template-indipendente-dai-cms/2135/9 "2018-01-27T12:16:50Z")

</div>

ciao @Floyd611, quello che osservi è il comportamento atteso per un accordion accessibile.

anche questo esempio che utilizza un diverso componente JS implementa lo stesso comportamento:  
[https://hanshillen.github.io/jqtest/#goto\_accordion](https://hanshillen.github.io/jqtest/#goto_accordion)

idem:

> **[jQuery Accessible Accordion System, using ARIA - By Nicolas Hoffmann](https://a11y.nicolas-hoffmann.net/accordion/)**
>
> This jQuery plugin will provide you an accessible accordion system using ARIA.

---

<div class="post-metadata">

**Author:** ![Floyd611](https://forum.italia.it/user_avatar/forum.italia.it/floyd611/32/3636_2.png) [@Floyd611](https://forum.italia.it/u/Floyd611)\
**Post date:** [27 Gennaio 2018, 1:27pm UTC](https://forum.italia.it/t/realizzare-un-template-indipendente-dai-cms/2135/10 "2018-01-27T13:27:55Z")

</div>

Grazie Danilo Spinelli.  
Leggo la documentazione che hai postato.  
Saluti  
Giuseppe

---

<div class="post-metadata">

**Author:** ![Floyd611](https://forum.italia.it/user_avatar/forum.italia.it/floyd611/32/3636_2.png) [@Floyd611](https://forum.italia.it/u/Floyd611)\
**Post date:** [28 Gennaio 2018, 8:57am UTC](https://forum.italia.it/t/realizzare-un-template-indipendente-dai-cms/2135/11 "2018-01-28T08:57:22Z")

</div>

Buongiorno,  
mi trovo a dover implementare una “galleria immagini” nel sito che sto realizzando.  
Per intenderci, lo slider che fa scorrere le foto.  
Nel forum non ho trovato indicazioni in merito.  
Quale script, o plugin, è consigliato o consigliabile da integrare nel sito?  
Grazie  
Buona domenica  
Giuseppe

---

<div class="post-metadata">

**Author:** ![gunzip](https://forum.italia.it/user_avatar/forum.italia.it/gunzip/32/2064_2.png) [@gunzip](https://forum.italia.it/u/gunzip)\
**Post date:** [28 Gennaio 2018, 1:18pm UTC](https://forum.italia.it/t/realizzare-un-template-indipendente-dai-cms/2135/12 "2018-01-28T13:18:15Z")

</div>

per le gallerie di immagini trovi del codice di esempio qui:

[https://italia.github.io/design-web-toolkit/components/detail/layout--gallery.html](https://italia.github.io/design-web-toolkit/components/detail/layout--gallery.html)

(senza carousel)

o qui

[https://italia.github.io/design-web-toolkit/components/detail/carousel.html](https://italia.github.io/design-web-toolkit/components/detail/carousel.html)

(tramite carousel accessibile)

---

<div class="post-metadata">

**Author:** ![Floyd611](https://forum.italia.it/user_avatar/forum.italia.it/floyd611/32/3636_2.png) [@Floyd611](https://forum.italia.it/u/Floyd611)\
**Post date:** [29 Gennaio 2018, 7:57am UTC](https://forum.italia.it/t/realizzare-un-template-indipendente-dai-cms/2135/13 "2018-01-29T07:57:32Z")

</div>

Buongiorno,  
grazie Danilo Spinelli.  
Saluti  
Giuseppe

---

<div class="post-metadata">

**Author:** ![Floyd611](https://forum.italia.it/user_avatar/forum.italia.it/floyd611/32/3636_2.png) [@Floyd611](https://forum.italia.it/u/Floyd611)\
**Post date:** [2 Febbraio 2018, 3:07pm UTC](https://forum.italia.it/t/realizzare-un-template-indipendente-dai-cms/2135/14 "2018-02-02T15:07:06Z")

</div>

Buon pomeriggio,  
premesso che ringrazio ancora @gunzip per avermi inviato il link della gallery, aggiungo che non era proprio quella che avrei voluto inserire nel sito che sto preparando.  
Dopo aver cercato in rete, ho adattato “ **Flickity** ” il cui link è:

> **[Flickity · Touch, responsive, flickable carousels](https://flickity.metafizzy.co/)**
>
> Touch, responsive, flickable carousels

  
nel caso dovesse servire a qualcuna/o

Facile da implementare, dettagliata la spiegazione, con tante opzioni.  
Spero possa essere utile.  
Saluti
