italia / designers.italia.it

Designers Italia mette a disposizione la conoscenza e gli strumenti per progettare e realizzare servizi pubblici centrati sulle necessità delle persone

🖖 Sorgente del sito Designers Italia

Questo repository contiene il codice sorgente del sito Designers Italia, il progetto che mette a disposizione conoscenza e strumenti per creare i servizi digitali della Pubblica Amministrazione.

Il sito ospita la documentazione del design system del Paese nella sezione /design-system/come-iniziare/.

Il sito utilizza l'ultima versione di Bootstrap Italia, Gatsby e l'ecosistema Node.js.

💙 Come contribuire

È possibile seguire e contribuire alle lavorazioni in corso nella board di progetto.

Commenti e proposte relative all'evoluzione del sito e delle risorse può essere fatta aprendo una nuova issue, o esplorando le issues esistenti. Se vuoi contribuire e proporre una modifica, è sufficiente aprire una pull request.

✏️ Content

The site's content is at src/data/content/, and whenever a file is updated the last modification time is automatically generated.

If you want to update one of those files without altering the displayed last modification time, include (last-update-skip) somewhere in the commit message.

🚀 Quick start

1. Install dependencies.

   npm i

2. Start developing

   To start your project up run.

   npm run dev

   Your site is now running at http://localhost:8000!

3. Prepare previews of the design system

   Download and generate examples via the Bootstrap Italia API.

   npm run prepare-content

4. Build static website (production)

   To build a static version of this website, start the build process.

   npm run build

   Your statically generated site is placed inside the public directory.

5. Validate your work

   To lint and "prettify" your code.

   npm run lint:fix

   npm run prettier:fix

6. Learn more

   • Documentation

   • Tutorials

   • Guides

   • API Reference

   • Plugin Library

   • Cheat Sheet

designers.italia.it's Issues

Sistemare descrizione in Hp

Da sistemare descrizione di Designers in Home page. Attualmente sono visibili i link di forum e guida.

pagina contatti

Il feed di twitter è settato su developers italia invece che su designers italia
https://twitter.com/designersita

https://designers.italia.it/contatti/#intro

Inoltre in Lavora con noi c'è un link rotto che porta a behance

Nuovo stile designers.italia.it

Ciao, ho visto oggi la nuova grafica della pagina https://designers.italia.it/
La mia attenzione si è immediatamente focalizzata sulla scelta del colore azzurro/acqua come sfondo o testo. Il contrasto di questo colore con il bianco non arriva nemmeno al livello AA di accessibilità. Infatti lo trovo di difficile lettura (persino fastidioso) io che non ho deficit visivo.
Non capisco il motivo di tale scelta ma suggerisco di modificarlo.

Pagina Siti Web PA: nuove regole di segnalazione

È necessario allineare quanto troviamo qua
https://designers.italia.it/progetti/siti-web-pa/
con la nuova logica di segnalazione di progetti proposta nel forum
qui https://forum.italia.it/t/come-raccontarci-il-tuo-progetto/680
compreso relativo link.

Next: highlights: images needs an "alt text" field on the content yaml

Reviewing the highlight component: the alt text of the cover images needs to be defined by the editor. It cannot be equal to the {title} of the highlight/section. We need a dedicated img-alt field on the content yaml, to define the alt text, or to let it empty with conscience to result in an alt="" (as decoratory image, if needed)

Ref:

designers.italia.it/src/components/highlight/highlight.js

Line 56 in 6620942

<img className="main-image" src={img} alt={title}/>

cc @astagi @OscarBresolin

Next: highlights: numbers grid is really odd

The look&feel of the whole numbers grid is really odd, each space between elements is different.

I think it is the flex justify-content-start applied to each separate number-icon-label block, mixed with the label max-width and different words length...

How can we improve it? Or we need a different approach?

cc @astagi @OscarBresolin

Next: buttons: outline secondary colors

The Bootstrap Italia outline secondary button colors needs improvement:

1. stroke color is too light
2. (almost) white background color is not necessary

@gpeirolo FYI the BI issue has been resolved in the latest deploy of Bootstrap Italia v2.0.8.

cc @astagi @OscarBresolin

htmlproofer - output (Aug 18 2017)

bundle exec htmlproofer ./_site --url-ignore "/#./" --check-html --disable-external --alt-ignore '/./' shows the following alerts we may want to address (as currently the CircleCi build tests are failing):

• ./_site/assets/toolkit/index.html
  • internal script {{ '/build/IWT.min.js' | path }} does not exist (line 64)
  • internal script {{ '/build/vendor/jquery.min.js' | path }} does not exist (line 40)
  • internal script {{ '/build/vendor/modernizr.js' | path }} does not exist (line 36)
  • internally linking to {{ '/build/build.css' | path }}, which does not exist (line 38)
• ./site/news/index.html
  • 677:7: ERROR: Unexpected end tag : div (line 677)
• ./_site/progetti/siti-web-pa/index.html
  • 840:47: ERROR: ID siti-tematici already defined (line 840)
  • 899:53: ERROR: ID siti-tematici already defined (line 899)
  • image has no src or srcset attribute (line 700)
  • image has no src or srcset attribute (line 714)
  • image has no src or srcset attribute (line 726)
  • image has no src or srcset attribute (line 727)
  • image has no src or srcset attribute (line 737)
  • image has no src or srcset attribute (line 738)
  • image has no src or srcset attribute (line 750)
  • image has no src or srcset attribute (line 751)
  • image has no src or srcset attribute (line 769)
  • image has no src or srcset attribute (line 770)
  • image has no src or srcset attribute (line 782)
  • image has no src or srcset attribute (line 783)
  • image has no src or srcset attribute (line 795)
  • image has no src or srcset attribute (line 796)
  • image has no src or srcset attribute (line 808)
  • image has no src or srcset attribute (line 809)
  • image has no src or srcset attribute (line 821)
  • image has no src or srcset attribute (line 822)
  • image has no src or srcset attribute (line 834)
  • image has no src or srcset attribute (line 835)
  • image has no src or srcset attribute (line 851)
  • image has no src or srcset attribute (line 852)
  • image has no src or srcset attribute (line 863)
  • image has no src or srcset attribute (line 874)
  • image has no src or srcset attribute (line 885)
  • image has no src or srcset attribute (line 896)
  • image has no src or srcset attribute (line 910)
  • image has no src or srcset attribute (line 911)
  • image has no src or srcset attribute (line 701)
  • image has no src or srcset attribute (line 713)
    htmlproofer 3.7.2 | Error: HTML-Proofer found 37 failures!

Design System vs Kit Design

• Chiarire l'uso dei termini design System e Design Kit
• Aggiungere eventualment evoce di glossario

link errato a behance.net/italia

in alto a dx e nel footer il link porta a https://behance.com/italia
e non a https://www.behance.net/italia

slug typos

https://designers.italia.it/notizie/**Alt**ante-trasformazione-digitale-PA/

must be

https://designers.italia.it/notizie/atlante-trasformazione-digitale-pa/

@bfabio @Fupete --> #282

Next: mobile burger button doesn't work

The mobile burger button doesn't work. Tapping the icon does nothing, instead of open the left main mobile menu.

Could be a JavaScript issue? Maybe linked to how we import in app the custom JS from the header component of Bootstrap Italia?

cc @astagi @OscarBresolin

Correggere i link al web-toolkit

Il repo è stato rinominato quindi i link a
https://italia.github.io/ita-web-toolkit/
ora devono puntare a
https://italia.github.io/design-web-toolkit/

Headers content map

• Fare in modo che i titoli siano linkati alle rispettive sezioni.
• Aggiungere anchor link alle rispettive roadmap sotto ai titoli.
• Aggiungere le ancore all'interno delle rispettive sezioni.
  

Link medium

Il button "Leggi il post" sotto "Approfondisci su Medium" punta alla home page di medium.

Link rotto

Nella pagina
https://designers.italia.it/progetti/siti-web-comuni/
nel paragrafo "Il metodo di lavoro"
il link sulla frase "Il kit di Designers Italia per i test di usabilità"
porta ad una risposta 404 del sito github.

Buon lavoro

Remove the Home menu item

Would be nice to remove — in the next release — also the 1st item "Home", it is pretty unuseful. What do you think @bfabio ?

Originally posted by @Fupete in #272 (comment)

roadmap user interfce

https://designers.italia.it/user-interface/

Manca una roadmap della UI di Pago PA (e pubblicazione di documentazione e materiali) che sarebbe bene avere, visto che è presente come progetto di designers italia
@matteodesanti

Scusate: responsabile pubblicazione, me lo sono perso...

Ciao, ho un dubbio sulla normativa e gli obblighi.
Dov'è finito l'obbligo a pubblicare il nome responsabile della pubblicazione dei contenuti di un sito?
La direttiva Brunetta (http://www.funzionepubblica.gov.it/articolo/dipartimento/26-11-2009/direttiva-n-8-2009) diceva

"Le pubbliche amministrazioni individuano uno o più responsabili del procedimento di pubblicazione di contenuti sui siti internet di propria competenza.
Tali nominativi, completi di indirizzo e-mail, devono essere raggiungibili dalla barra di coda del
relativo sito presente in tutte le pagine all'indirizzo nomesito.gov.it/responsabile."

Ma qui ad esempio http://www.funzionepubblica.gov.it/responsabile
non c'è e qui nemmeno http://www.agid.gov.it/responsabile

è stata abrogata/ superata o si è persa per strada?

Qui non ne vedo più traccia http://design-italia.readthedocs.io/it/stable/doc/service-design/normativa.html

Wrong dates in blog posts

In the blog page, every post reports the same date (last build).

Pagina progetto - informazioni di apertura

La pagina progetto ha

• titolo
• sorttotitolo
• payyoff
• description

https://designers.italia.it/progetti/siti-scuole/

A ciascun livello corrispondono stili diversi, è complicato quando la crei capire cosa mettere da una parte e cosa mettere dall'altra

Suggerisco di lasciare due elementi,
titolo (title)
sommario (description) - fino a 120 caratteri, max su 3 righe

sezione progetti

La frase introduttiva va cambiata da
Servizi human-centered a disposizione di tutti.
a
Servizi digitali a misura di cittadino
https://designers.italia.it/progetti/

Stesso titolo va modificato in home page

Aggiornamento pagina progetto dei Siti web delle PA

La pagina https://designers.italia.it/progetti/siti-web-pa/ non è aggiornata da tempo, ci sono progetti più interessanti da mostrare usciti di recente, tra cui:

• https://www.comune.fi.it/ (Gennaio 2018)
• http://www.politicheeuropee.gov.it/ (Gennaio 2018)
• http://www.regione.emilia-romagna.it/ (Febbraio 2018)

Remove Google Analytics

We should remove Google Analytics and completely rely on Web Analytics Italia as soon as we consider it stable enough.

Redirect da designer.italia.it

L'indirizzo https://designer.italia.it (senza "s") è configurato come alias di https://designers.italia.it (con la "s") invece che come redirect. All'apertura del sito appare un errore del certificato SSL perché l'hostname non corrisponde.
Andrebbe configurato come redirect, come già avviene per https://developer.italia.it/

checklist e template checklist

Problemi organizzazione contenuti delle pagine "checklist"
https://designers.italia.it/checklist/user-research/

In questa pagina il titolo è
"Servizi digitali a misura di cittadino, le domande giuste da farsi"

mentre il titolo attualmente sembra essere "user research"

To do:
"User research": ridurre carattere
"Checklist": ridurre carattere
Ingrandire titolo della checklist grande
https://designers.italia.it/checklist/user-research/Servizi digitali a misura di cittadino, le domande giuste da farsi

Id sito errato in script PIWIK per sito team digitale

Ciao @gvarisco,

ho visto che avete inserito in https://teamdigitale.governo.it/ lo script di PIWIK ma l'id del sito è errato. l'id corretto è il numero 9 e non il numero 1 (che è associato invece a governo.it) come specificato nella mail dell'06/09.

Grazie

La pagina contatti contiene dati non aggiornati

Nella pagina contatti, l'iframe di iPress per i "Comunicati stampa" e la sezione "Eventi" non sono aggiornate da molto tempo. Che facciamo @francescomda?

Pagina progetto, menù contestuale

Inoltre ho notato che il menù di destra, contestuale, non si popola con i titoli dei capitoli. Ci deve essere qualcosa che non va.

Credo che il problema sia che il menù estrae gli H1 o gli H2 non so, mentre noi usiamo H3 come titolo standard di pagina

Infatti l'unico titolo che si vede è nella pagina di Spid, ma è un titolo di paragrafo decisamente troppo grande, che anzi andrebbe corretto e fatto diventare un h3
https://designers.italia.it/progetti/spid/#codice-sorgente

Mobile and desktop 400% issues with x overflow and styling

The horizonal scrollbar appear everywhere with mobile viewport widths. Also with 1024/400% desktop viewport, as requested by WCAGs, there are many flaw with overflow, overlapping of elements and too wide paddings/margins.

Eg. images:

I have a propose to fix all of these with the branch #fix/width-mobile, I'll make a PR in a bit and reference that cc @bfabio.

Liquid 4.0 - Warnings

After updating to jekyll-3.5.2 and Liquid 4.0, there's a warning (syntax error) in _layouts/credits.html that needs to be addressed:

Liquid Warning: Liquid syntax error (line 3): Expected end_of_string but found string in "{{site.projects | where: 'lang', active_lang | sort 'order' | reverse }}" in /_layouts/credits.html

Ref. #41

drop down progetti

Su Safari la funzione drop down ha problematiche

Broken links nel sito (riferimenti a documentazione su RTD)

Un rapido giro con W3C Link Checker ha evidenziato tre link 'rotti':

• https://design-italia.readthedocs.io/it/stable/doc/user-interface/componenti.html
  Status: 404 Not Found

• https://design-italia.readthedocs.io/it/stable/doc/user-interface/layout.html
  Status: 404 Not Found

• https://design-italia.readthedocs.io/it/stable/doc/user-interface/stile.html
  Status: 404 Not Found

Qui il report completo.

Use a package manager for frontend dependencies

We should take a look at the build dependencies and update them if possible.

Docker environment

It could be nice to have a simple Dockerfile to speed up the local setup

Next: cards: share button cannot be empty, and z-index issue

There are two issues on this card share button:

1. the share button cannot be empty for accessibility, we need to add one of the correct a11y approaches (eg. visual hidden text, aria, ...)
2. the z-index issue, when a card is near another one on the right, needs to be addressed.

cc @astagi @OscarBresolin

[BUG] Colore del testo sbagliato. Pagina ESPLORA.

Queste due righe di esplora.html cambiate da questa PR hanno inserito un errore di front end nella pagina Esplora.

Comportamento atteso:
avere testo bianco (classe u-text-white) sui fondi blu.

Comportamento reale:
testo grigio scuro.

Chi scrive non conosce il motivo di questa modifica che potrebbe essere stata indotta per altre cose necessarie nel sito web, da verificare prima della risoluzione.

cc @westcoast @francescozaia

Sostituzione email info@agid da privacy policy

Ciao, poichè la mail [email protected] sta per essere disabilitata, andrebbe sostitutita con [email protected] in questa pagina https://designers.italia.it/privacy-policy/

Thanks!

Roadmap Interface Design

Pubblicare roadmap in https://designers.italia.it/user-interface/

Proposta link pagina LG per Kit test usabilità

Ciao,
nella pagina https://designers.italia.it/kit/usability-test/ credo sarebbe più adeguato nella sezione "Linee Guida" inserire il link alle linee guida relative al protocollo per fare i test di usabilità (su cui è basato il kit) https://design-italia.readthedocs.io/it/stable/doc/user-research/usabilita.html#protocollo-eglu-lg-per-la-realizzazione-di-test-di-usabilita
Che ne dite?

pagine di sezione

Le foto per le pagine di sezionesono invertite non rispettano la sequenza indicata nelle note qui https://unsplash.com/collections/896979/foto-per-pagine-di-sezione

Sistema pagina contatti

Se non è una cosa troppo complicata, nella pagina Contatti dovremmo:

• aggiungere il form per iscriversi alla newsletter (attualmente c'è un link che manda in HP)
• togliere in cima la parola "progetto"

Link non funzionante

Dopo la rimozione della pagina il link a /contatti non funziona più, va gestito un redirect.

75 caratteri per riga, siamo sicuri sicuri?

Ciao mitici,
avete scolpito nella pietra un SI DEVE con "Ogni riga di testo non deve mai superare la lunghezza massima di 75 caratteri" e qui, su desktop, ci stiamo stretti.

Da quanto ho potuto verificare su web (di solito su siti che hanno righe con molto più di 75 caratteri), tutto deriva dalla carta stampata e dalla sua applicazione al web in una pubblicazione di molti e molti anni fa. Più o meno si rimanda sempre qui http://webtypography.net/2.1.2.
Visto che non c'è una ragione scientifica, anzi, gli studi indicano che righe più lunghe non sono meno comprensibili ( 2005. The study,The Effects of Line Length on Reading Online News).

In generale sono più o meno tutti concordi (gli anglosassoni) a dire che 12 parole è più o meno la media di parole accettabili in un righa affinchè questa sia leggibile senza troppi spostamenti oculari. La cosa andrebbe anche contestualizzata da noi o in germania, dove le parole si allungano un bel po'.

Concordo con l'incoraggiare a fare righe più brevi, ma 75 du desktop, ormai con monitor molto larghi crea molti e molti a capo nei nostri testi, e quelle 12 parole italiane, stanno tra gli 80 e i 90 caratteri (qui su github, il campo in cui scrivo ne permette 110 circa)

Io la vedo così:

Ipotesi 1
Si fa uno studio su un bel campione di persone, di siti, di device, sulla leggibilità dei testi su web e si stabiliscono delle misure accettabili. Possiamo anche fare un sondaggio qui e subito, sui siti di approfondimento che vi suggerisco.

Ipotesi 2
Da "Si deve" si passa al "Si Dovrebbe", ma perdiamo in efficacia e invece vale la pena accorciare le righe dei siti della PA

Ipotesi 3
Si lascia la forza del SI DEVE e si allargano le maglie, e si porta il numero almeno a 90, perchè è quello il numero che più ricorre come limite superiore massimo.

Per approfondire
Ho riportato tra parentesi il numero di caratteri per riga del sito collegato, perchè ciascuno, dopo aver letto gli articoli in questione sui siti citati, possa decidere autonomamente qual'è per lui quello che si legge più agevolmente (vanno letti tutit e non guardati un po', parliamo di usabilità, non si aspetto).

• http://webstyleguide.com/wsg3/7-page-design/6-page-width-line-length.html (infiniti caratteri)

• http://design-italia.readthedocs.io/it/stable/doc/user-interface/stile.html (105 caratteri circa)

• http://webtypography.net/2.1.2 (122 caratteri circa)

• https://www.smashingmagazine.com/2014/09/balancing-line-length-font-size-responsive-web-design/#line-length-measure-and-reading (69 caratteri circa)

• https://baymard.com/blog/line-length-readability (69 caratteri circa)

• https://designnotes.blog.gov.uk/2015/09/16/tips-for-creating-good-typography/ (75 caratteri)

• http://maxdesign.com.au/articles/em/ (85 caratteri circa)

• https://alistapart.com/article/more-meaningful-typography (87 circa)

... e per tornare al sondaggio che vi ho proposto, io personalmente leggo bene a 75 come proposto, comprendo meglio, per via di meno a capo, su qualcosa in più e quindi voto per gli 85 circa caratteri, in quei siti mi trovo decisamente meglio (24pollici, 1920x1080 default mac, a circa 75 cm di distanza dagli occhi)

Enable circleci cache versioning

I wish

a way to enable cache versioning, like is done eg. here teamdigitale/teamdigitale.governo.it@dedcdf5

instead

I have not

Importare contenuti blog su Medium in HP

Dobbiamo importare gli ultimi articoli del blog di Desginers Italia aperto su Medium:
https://medium.com/designers-italia
usando le api di Medium per fare apparire l'ultimo articolo (o gli ultimi articoli) in homepage nella sezione dedicata al blog

Next: hero: share dropdown position is wrong

The share dropdown position is wrong, there is too much margin bottom the image placeholder.

I think there is a mb-lg-auto class on the image container that we don't need.

Maybe we can change the bottom margin on the image container from mb-3 mb-lg-auto to mb-4 mb-lg-3.
And to be more effective on mobile resolutions, maybe, we can also replace the share container margin classes from mb-3 mb-lg3 to the same mb-4 mb-lg-3 as above.

cc @astagi @OscarBresolin

Aggiungi animazioni SVG e altri eyecandy al sito

Sperimenta con l'animazione SVG delle icone, e aggiungi elementi grafici di abbellimento.

Esempio: la girandola in https://designers.italia.it/

Inserimento riferimenti per favorire le contribuzioni

In tutte le pagine di presentazione dei kit sarebbe opportuno inserire un paragrafo in cui inserire il link al repo GitHub specifico, se presente, e alle sue issues corredato da una breve descrizione su come contribuire.

In alternativa, per quei kit che non hanno un repo specifico (ad esempio il kit sulla "user journey"), si può inserire un link generico alle issues di designers italia (https://github.com/italia/designers.italia.it/issues) dove poter proporre modifiche.

home news styling (minor)

Homepage news styling has to be fixed.

It is

Will be resolved by #247