eshiol.it

Aiutaci a testare l'ultimo codice di ItaliaPA.

Poiché queste build sono istantanee dell'ultimo codice, è più probabile che tu possa riscontrare un problema rispetto alle versioni stabili. Se hai riscontrato un problema, controlla su github se è già stato segnalato; se non è stata presentata una segnalazione, segnalarla in modo che i membri della nostra comunità possano esaminare il problema e apportare le correzioni necessarie.

Il Web Toolkit mette a disposizione degli sviluppatori di siti web dei componenti open source per la costruzione di interfacce grafiche usabili, accessibili, e conformi alle linee guida di design per i siti web della Pubblica Amministrazione.

Esso fornisce inoltre pattern e template che facilitano una rapida prototipazione dei siti, in modo da poter coinvolgere gli utenti fin dalle prime fasi di progettazione, mettendo a disposizione codice HTML/CSS, oltre a componenti interattivi e template di pagina pronti all’uso.

Web Toolkit è la libreria "storica" tra i kit per lo sviluppo web. Esso è basato su una versione ormai obsoleta delle Linee Guida di design, per cui non ne è consigliata l’adozione per nuovi progetti.

Benvenuto nella sezione dedicata a Template ItaliaPA4, implementazione delle Linee Guida di Design per i siti web della Pubblica Amministrazione basato su Bootstrap Italia.

L'inserimento dei componenti previsti da it web toolkit, quali accordion, alert, callout, sottoforma di codice HTML è una operazione abbastanza laboriosa e complessa per i redattori dei testi. Questo potrebbe scoraggiare o impegnare oltre misura chi deve creare e aggiornare i contenuti del sito web. Per semplificare l'inserimento dei contenuti ci viene in aiuto IPA Toolbar for TinyMCE, la toolbar Joomla! specifica per TinyMCE.

L'installazione avviene tramite procedura standard Joomla!, sincerarsi che il plugin System - ItaliaPA Toolbar sia abilitato.

La configurazione invece va fatta direttamente da plugin TinyMCE.

Download

Troubleshooting

• Dopo aver configurato il plugin TinyMCE invece di vedere la barra degli strumenti con i nuovi pulsanti ItaliaPA nell'editor TinyMCE ricevo il messaggio di errore: 
  Failed to load plugin: ipa from url https://www.eshiol.it/media/editors/tinymce/plugins/ipa/plugin.min.js
  
  Verificare che il plugin System - ItaliaPA Toolbar sia abilitato
  

Il pulsante Tooltip fa riferimento al componente tooltip del web toolkit.

Il codice di riferimento del tooltip è il seguente:

<a href="#tooltip" class="Tooltip-toggle u-textClean u-padding-right-xs u-padding-left-xs
 u-background-teal-50 u-color-black" data-menu-trigger="tooltip">ex</a>
<span id="tooltip" data-menu class="Dropdown-menu u-borderShadow-m u-background-teal-70 u-color-white u-layout-prose u-padding-r-all u-borderRadius-l">
<span class="Icon-drop-down Dropdown-arrow u-color-teal-70"></span>
<span class="u-layout-prose u-text-r-xs">
Quod voluptatibus sapiente dolorem omnis possimus odit quod consequatur. Delectus ex et corporis. Sed minima ea. Et maiores pariatur illum voluptatem est nam fugit non blanditiis. Esse eaque veritatis et eaque autem et dolorem fugit nobis.
Incidunt error vel culpa sed assumenda unde. Incidunt et minima tempore omnis sequi iure et sed enim. Laboriosam et in et veniam placeat aliquid quos quasi ut.
Qui molestiae ea quibusdam. Sunt ut nobis aut quam asperiores incidunt voluptatem omnis saepe. Et nam commodi minima. Iste esse dolores distinctio.
</span>
</span>

Utilizzando la nuova barra degli strumenti l'inserimento risulta particolarmente semplificato

Disponibile presto il pulsante Dialog basato sul componente dialog del web toolkit.

Apri

Il codice di riferimento del tooltip è il seguente:

<button class="Button Button--default js-fr-dialogmodal-open" aria-controls="modal">
  Apri
</button>

<div class="Dialog js-fr-dialogmodal" id="modal">
    <div class="
      Dialog-content
      Dialog-content--centered
      u-background-white
      u-layout-prose
      u-margin-all-xl
      u-padding-all-xl
      js-fr-dialogmodal-modal
    " aria-labelledby="modal-title">
        <div role="document" class="Prose">
            <h2 class="u-cf u-text-h2 u-borderHideFocus" id="modal-title" tabindex="0">Sit et cum iure illum ducimus dignissimos fuga iste.</h2>
            <p>
                Quod voluptatibus sapiente dolorem omnis possimus odit quod consequatur. Delectus ex et corporis. Sed minima ea. Et maiores pariatur illum voluptatem est nam fugit non blanditiis. Esse eaque veritatis et eaque autem et dolorem fugit nobis. Incidunt error
                vel culpa sed assumenda unde. Incidunt et minima tempore omnis sequi iure et sed enim. Laboriosam et in et veniam placeat aliquid quos quasi ut. Qui molestiae ea quibusdam. Sunt ut nobis aut quam asperiores incidunt voluptatem omnis saepe.
                Et nam commodi minima. Iste esse dolores distinctio.
            </p>
            <button class="Button Button--danger js-fr-dialogmodal-close u-floatRight">Chiudi</button>
        </div>
    </div>
</div>

Di seguito è mostrata la finestra di inserimento attivabile con il pulsante Dialog

L'inserimento dei componenti previsti da it web toolkit, tra i quali accordion, alert, callout, sottoforma di codice HTML, è una operazione abbastanza laboriosa e complessa. Questo potrebbe scoraggiare o impegnare oltre misura chi deve creare e aggiornare i contenuti del sito web. Per semplificare l'inserimento dei contenuti ci viene in aiuto plugin System - ItaliaPA Toolbar for TinyMCE, la toolbar Joomla! specifica per TinyMCE.

Template ItaliaPA supporta la barra Socials; un menu appositamente formattato e posizionato in posizione Socials.

La scelta della singola icona può avvenire utilizzando le icone del toolkit mediante apposita classe

oppure mediante immagine (dimensione consigliata 19px x 16px)

Con headroom   attivo, la barra Socials scompare allo scroll della pagina. Non è possibile modificare questo comportamento.

In posizione top header left è possibile inserire una serie di link.

L'inserimento avviene direttamente da pagina di configurazione del template

Su dispositivi mobile saranno utilizzate le abbreviazione invece del titolo esteso

Il template è dotato della funzionalità hide your header on scroll

che permette di nascondere alcune parti dell'header se si effettua lo scroll della pagina.

Di default vengono nascosti il top header che il menu socials.

è possibile nascondere anche il mainmenu

aggiungendo la classe Headroom-hideme al modulo corrispondente.

Firma circolari è una personalizzazione del componente Buttons.

Il componente Buttons permette la gestione di barre degli strumenti collegate agli articoli.