search

italia / design-web-toolkit

Questa libreria è deprecata, si consiglia l'utilizzo di Bootstrap Italia (https://italia.github.io/bootstrap-italia/)
Creative Commons Zero v1.0 Universal
93 stars 87 forks source link

Guida necessaria #73

Closed forlanim closed 7 years ago

forlanim commented 7 years ago

Buongiorno, sarebbe molto utile avere una guida che spieghi bene come utilizzare il kit, qualcosa tipo "iwt for dummies" (per rendere l'idea). Al momento tutta la documentazione prevede che l'utilizzatore sappia già tutto, ma così non è per la maggior parte di chi dovrà utilizzare il kit. Ad esempio:

Nel mio caso, probabilmente molti altri Enti saranno nella stessa situazione, sono da solo a dovermi occupare di queste cose (e di tutto il sistema informativo, hardware, ecc.) quindi doversi studiare tutte le tecnologie utilizzate per poi capire come sono integrate è un "lusso" che non mi posso permettere.

Avere a disposizione una guida che spiega (il più dettagliatamente possibile) come utilizzare i componenti e metterli insieme renderebbe il lavoro mio e di tutti molto più semplice e veloce; anche la "migrazione" dei siti delle PA avrebbe una buona accelerazione.

Ovviamente chi può incaricare un'azienda esterna non si pone il problema, ma in ottica di risparmio delle spese della PA non è la soluzione corretta.

Grazie.

mbolzan commented 7 years ago

Probabile che i vari responsabili stiano scrivendo una guida più dettagliata e for dummies.. Ma se posso essere utile, riporto qui quello che ho imparato.

Installazione e utilizzo del ita-web-toolkit la documentazione iniziale qui dovrebbe essere sufficiente per iniziare a sviluppare anche ai meno esperti. @forlanim hai dubbi su questa fase ?

quindi : a) installazione pre-requisiti (NodeJs, Git [opzionale client git]) b) download o clone dei sorgenti c) installazione ambiente (npm install) d) compilazione (run build) e/o lancio (run watch) e) il toolkit è disposnile e funzionante in locale all'indirizzo http://localhost:1310/ esattamente come lo si vede all'inidirizzo https://italia.github.io/ita-web-toolkit/

Sviluppare un tema c'è la documentazione qui semmai poi affrofondisco. Tale passaggio è sempre da farsi per non lavorare sull'originale "pac"

Sviluppare un modulo anche questo ha la sua docuementazione qui faccio due esempi: a) fare un nuovo modulo

b) modificare un modulo

forlanim commented 7 years ago

Grazie per l'impegno ma non hai aggiunto nulla di nuovo! Come faccio a usare il template dei comuni e vederlo con watch? Non è spiegato come usare i moduli, figurati crearne uno nuovo. Anche per quanto riguarda il tema le indicazioni sono alquanto vaghe. Servirebbe qualcosa di più specifico. Sto provando delle cose semplicemente facendo un copia incolla del codice html, ma ogni volta che si vuole cambiare un comportamento o colore bisogna ricompilare tutto.

Il 21 apr 2017 15:43, "Marco Bolzan" notifications@github.com ha scritto:

Probabile che i vari responsabili stiano scrivendo una guida più dettagliata e for dummies.. Ma se posso essere utile, riporto qui quello che ho imparato.

Installazione e utilizzo del ita-web-toolkit la documentazione iniziale qui https://italia.github.io/ita-web-toolkit/docs/sviluppare.html dovrebbe essere sufficiente per iniziare a sviluppare anche ai meno esperti. @forlanim https://github.com/forlanim hai dubbi su questa fase ?

quindi : a) installazione pre-requisiti (NodeJs, Git [opzionale client git]) b) download o clone dei sorgenti c) installazione ambiente (npm install) d) compilazione (run build) e/o lancio (run watch) e) il toolkit è disposnile e funzionante in locale all'indirizzo http://localhost:1310/ esattamente come lo si vede all'inidirizzo https://italia.github.io/ita-web-toolkit/

Sviluppare un tema c'è la documentazione qui https://italia.github.io/ita-web-toolkit/docs/tema.html semmai poi affrofondisco. Tale passaggio è sempre da farsi per non lavorare sull'originale "pac"

Sviluppare un modulo anche questo ha la sua docuementazione qui https://italia.github.io/ita-web-toolkit/docs/moduli.html faccio due esempi: a) fare un nuovo modulo

  • creare una nuova cartella es. /src/modules/pippo con dentro un file index.css e uno pippo.tmpl
  • far partire o ripartire il toolkit con (npm run watch)
  • se è tutto ok nel menu del toolkit a sinistra sotto la voce Modules c'è la voce Pippo (ovviamente vuoto per ora)
  • inserire l'html e il css nei nuovi files, tutto dipende da cosa vogliamo sviluppare..

b) modificare un modulo

  • le varianti di css si fanno attraverso il file index.css del proprio Tema (rientra nello sviluppo del tema)
  • per una variante anche html serve fare un nuovo file (es. hero--myexample.tmpl, nota: attenzione al doppio trattino!) nella stessa cartella dell'originale
  • far partire o ripartire il toolkit con (npm run watch)
  • se è tutto ok nel menu del toolkit a sinistra sotto la voce Modules e sotto la voce Hero oltre a Default (è il file hero.tmpl) e News (è hero--news.tmpl) c'è la voce Myexample con la nostra versione
  • inserire l'html appunto nel nuovo file appena creato
  • inserire il css (qui per me la differenza è ancora filosofica :)) o nel file /hero/index.css o nel prorio css di Tema /src/themes//index.css

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/italia/ita-web-toolkit/issues/73#issuecomment-296194201, or mute the thread https://github.com/notifications/unsubscribe-auth/ANdSfhZNoiOs1TJguCtyxoZO-WWxm2FZks5ryLKVgaJpZM4M9kBM .

mbolzan commented 7 years ago

mmmh.. ok cerchero' di essere piu' specifico. pero' ci sono un po' di cose che non sono chiare in quello che scrivi tu, sorry. comandi a) tramite il comando npm run build, si generano fondamentalmente i file css e js e si genera la styleguide; questo ti serve quando devi prendere i file css/js minificati per portarli nel tuo sito b) tramite il comando npm run watch, si "avvia" il toolkit per visionarlo tramite browser alla url localhost:1310; questo ti serve per sviluppare la styleguide e ogni modifica che fai la vedi applicata dopo pochi secondi, senza dover riavviare

styleguide vs website temo ci sia un pochino di confusione anche sull'approccio, cosa intendi per "usare il template" o "usare i moduli"? per costruire il tuo sito non usi un template specifico o un insieme di moduli, ma utilizzi tutta la guida di stile che sviluppi con il toolkit. Proverei a distinguere le due cose/fasi: un conto e' sviluppare la guida di stile e un altro e' la costruzione del sito; la seconda cosa la si fa fuori dal toolkit, per esempio costruendo un sito statico in html oppure uno dinamico in php, java o qualsiasi linguaggio. L'output del toolkit e' il css, il js e i pezzi html, non il sito pronto e finito.

Poi possiamo entrare nel dettaglio tecnico delle specifiche cose che si fanno col toolkit, pero' ritengo sia importante capire prima il contesto in cui si lavora e delimitare bene le fasi di 1) progettazione, 2) sviluppo della guida di stile per il visual design, 3) implementazione del sito prototipo, 4) inserimento contenuti

forlanim commented 7 years ago

Ecco hai colto il punto, adesso è già più chiaro. Comunque nel toolkit c'è il template chiamato comuni che vorrei utilizzare, giusto per creare un sito di test. Questo template è costituito usando i vari moduli.

Il 21 apr 2017 23:59, "Marco Bolzan" notifications@github.com ha scritto:

mmmh.. ok cerchero' di essere piu' specifico. pero' ci sono un po' di cose che non sono chiare in quello che scrivi tu, sorry. comandi a) tramite il comando npm run build, si generano fondamentalmente i file css e js e si genera la styleguide; questo ti serve quando devi prendere i file css/js minificati per portarli nel tuo sito b) tramite il comando npm run watch, si "avvia" il toolkit per visionarlo tramite browser alla url localhost:1310; questo ti serve per sviluppare la styleguide e ogni modifica che fai la vedi applicata dopo pochi secondi, senza dover riavviare

styleguide vs website temo ci sia un pochino di confusione anche sull'approccio, cosa intendi per "usare il template" o "usare i moduli"? per costruire il tuo sito non usi un template specifico o un insieme di moduli, ma utilizzi tutta la guida di stile che sviluppi con il toolkit. Proverei a distinguere le due cose/fasi: un conto e' sviluppare la guida di stile e un altro e' la costruzione del sito; la seconda cosa la si fa fuori dal toolkit, per esempio costruendo un sito statico in html oppure uno dinamico in php, java o qualsiasi linguaggio. L'output del toolkit e' il css, il js e i pezzi html, non il sito pronto e finito.

Poi possiamo entrare nel dettaglio tecnico delle specifiche cose che si fanno col toolkit, pero' ritengo sia importante capire prima il contesto in cui si lavora e delimitare bene le fasi di 1) progettazione, 2) sviluppo della guida di stile per il visual design, 3) implementazione del sito prototipo, 4) inserimento contenuti

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/italia/ita-web-toolkit/issues/73#issuecomment-296315156, or mute the thread https://github.com/notifications/unsubscribe-auth/ANdSfqPcG5xgNZ3ybQvTQ4_d4xVAv-87ks5rySasgaJpZM4M9kBM .

oviecch commented 7 years ago

sono riuscito ad installare il toolkit in locale...volevo chiedere come gestire i contenuti del tamplate dei comuni utilizzando un cms (wordpress, drupal)

mbolzan commented 7 years ago

@forlanim supponendo che il sito di test che vuoi fare è un sito statico, dovresti costruire una serie di tue pagine html e utilizzare i file css/js che ha generato il toolkit.

in generale le pagine html le devi fare tu nel tuo "sito in costruzione", che è un ambiente completamente distinto dal toolkit, su cui appunto lavori in una fase di sviluppo distinta.

le pagine html della stylguide generate dal toolkit, ti possono essere solo in parte d'aiuto: esempio la pagina []\styleguide\components\preview\comuni--default.html contiene l'html di un intera pagina che visualizza, appunto, quello che vedi alla url. Ma dentro devi cambiare tutti i vari riferimenti ai file css e js, devi inserire i link e devi cambiare i contenuti, i testi, le immagini ecc.

per esempio, supponendo che tu da quella comuni--default ne fai una copia e la rinomini index.html nel tuo sito in costruzione, avrai i rifeirmenti <link media="all" rel="stylesheet" href="../../build/build.css"> ma tu non hai e non devi avere la cartella build nel tuo sito, ma avrai una cosa come <link media="all" rel="stylesheet" href="/css/build.css">
sempre supponendo che il tuo sito statico abbia una struttura di cartelle e files come questa : /css /js /img index.html servizi.html amministrazione.html ... ecc ecc

forlanim commented 7 years ago

@mbolzan ok, facciamo finta che sia statico, alla fine le parti dinamiche sono solo i contenuti e non la presentazione.

Prendo proprio il tuo esempio, che è quello su cui sto studiando quando ho un po' di tempo. Ho copiato tutto il codice html del template comuni, "aggiustato" i riferimenti ai css e caricato tutto sul mio server; per limitare le modifiche necessarie si caricano anche le cartelle src e vendor (per le varie icone previste e la retro compatibilità: burger, frecce, espandi/contrai, ecc.)

Questo template è composto da più componenti/moduli/css/js del kit e non ci sono indicazioni su come utilizzarli insieme per crearsi un template personalizzato, sono come minimo 128kb solo per un css; ho semplicemente cambiato l'ordine di 2 sezioni nella pagina ed è comparsa una riga bianca che prima non cera!

Se prendo il template del form, viene usato un button con la scritta "Invia" ma in realtà l'evento submit del form non viene attivato, allora si prova a mettere un javascript al bottone in modo che alla pressione lo richiami, però a questo punto non vengono validati i campi dove c'è il tag required e bisognerebbe crearsi una funzione ad hoc; quindi a che pro mettere required? non si poteva creare uno stile per l'input di tipo submit simile a quello dei button?

Se devo aggiungere o modificare un'icona tra quelle che già sono presenti nel kit come faccio?

Insomma queste ed altre cose che se deve studiarsele una società che realizza siti web non è un problema essendo il suo lavoro, se invece il kit è indirizzato direttamente agli Enti Pubblici, a quanto mi risulta sono ben pochi quelli che possono permettersi di avere personale dedicato solo a studiarsi questo per adeguare il sito.

Spero sia chiaro cosa intendo dire

oviecch commented 7 years ago

capisco perfettamente quanto descrivi...ad ogni modo l'obiettivo finale sarebbe quello di gestire i contenuti del template comuni direttamente da drupal... o wordpress...la qual cosa richiede non poco tempo io cmq sono a disposizione per qualsiasi prova o test che puoi indicarmi...

stefanorg commented 7 years ago

ciao @mbolzan , dopo aver fatto il checkout ed eseguito npm run watch collegandomi su localhost:1310 ho questo errore:

‼︎ 404: No matching route found for /src/utils/**/index.css

Infatti la styleguide e senza stile. Io ho seguito i passi indicati qui: https://italia.github.io/ita-web-toolkit/docs/sviluppare

Cosa sbaglio ?

forlanim commented 7 years ago

@oviecch per quanto riguarda drupal/wordpress/CMs io non saprei proprio, il nostro sito l'ho fatto io partendo da zero per rispettare le regole di accessibilità (inizalmente nessun template/cms le rispettava per intero) e successivamente perchè con la sezione Amministrazione trasparente e anche albo pretorio sarebbero stati solo moduli da richiedere e pagare; quindi per quello non saprei proprio come indirizzarti.