Realizzare un template "indipendente" dai CMS

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.

Ciao!

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

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

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

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.

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

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

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

Rieccomi,
dopo aver provato da web il componente “Accordion”:
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

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

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

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

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.

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

idem:

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

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

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

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

(tramite carousel accessibile)

Buongiorno,
grazie Danilo Spinelli.
Saluti
Giuseppe

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 è:


nel caso dovesse servire a qualcuna/o

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