[Gruppo-doc] Webapp per la documentazione, cosa farne

Jeremie Tamburini jeremie.tamburini a gmail.com
Gio 9 Feb 2017 02:50:55 GMT


Il giorno 4 febbraio 2017 18:45, Alessandro Viprati <
vipri.alessandro a gmail.com> ha scritto:

>
> Ho provato la webapp sul sito di moinmoin e ho notato una cosa bellissima:
> moinmoin si adatta automaticamente alla dimensione della finestra, quindi
> il testo dovrebbe essere assolutamente leggibile anche su telefono. Se
> ricordo bene (ora vi scrivo da telefono), nei repo di trusty moinmoin é
> alla versione 1.9.7, molto più recente della versione ora utilizzata sul
> nostro wiki.
>

Di default in moin il testo si adatta alle dimensioni della finestra. Era
così anche sul wiki prima delle modifiche del 2011. Sicuramente fu fatto
per "stabilizzare" la resa grafica di ogni pagina in modo che testo,
immagini, tabelle risultassero sempre nella solita posizione. Nel frattempo
però gli smartphone sono saliti alla ribalta...

Ho fatto una prova molto grossolana col solito Moin Desktop Edition.
Le impostazioni per la larghezza delle pagine sono sul file screen.css [1].
Ho provato in maniera grezza a commentare le voci nelle quali viene
impostata la larghezza:
width: 985px;
min-width: 985px;  ecc..
e il risultato è che il testo torna ad adattarsi alla larghezza della
pagina.
Con delle modifiche si riesce a far adattare anche le immagini.

Quello che potrebbe risultare ostico sono le tabelle, nel senso che di per
se si riadattano, però a seconda del contenuto possono diventare o
illeggibili o non possono restringersi oltre un certo limite.

Per altre modifiche, ad esempio fare in modo che gli indici delle pagine in
modalità smartphone non rimangano spiaccicati sulla destra, occorre
utilizzare le "media query" (..segue spiegazione più in la).
Poi tutto quello che sta sulla barra superiore andrebbe riorganizzato...
ovviamente restringendo la pagina finisce tutto fuori posto.


Inoltre tutti i portali di ubuntu-it non si adattano alla dimensione dello
> schermo, quindi presumo che questo "problema" sia da imputare alla "non
> scalabilità" della barra superiore arancione, che dovrebbe essere condivisa
> sui vari portali. Non ne sono sicuro, non so come funzioni il sito e tutto
> quello che ci sta dietro
>

In realtà il wiki è auto sufficiente, tutta la barra superiore è stata
ricreata con moin. Nel codice del file light.py [2] si riconoscono i menù.
Il resto è governato dai css (principalmente il common.css e lo screen.css)
e dal famoso wikiconf.py [3].
Chi ci ha messo le mani sopra sapeva il fatto suo ;)

SPIEGONE (anche per chi non conosce html e css)
-----------------------------------------------------------------------
In una pagina html ci sono 2 aree ben definite, una in cima racchiusa dai
tag <head> e </head> dove ci sono info/impostazioni particolari. Ad es. è
li che si indica il percorso ai file .css che contengono le informazioni
stilistiche su colori dei link, stile tabelle, ecc...
L'altra area è racchiusa dai tag <body> e </body> e contiene i contenuti
della pagina vera e propria (titoli, paragrafi, ecc..).

Ovviamente con moin NON abbiamo un file .html, ma tutta una struttura
complessa che alla fine genera un file .html e quindi una pagina. Se con
firefox in una pagina wiki fate clic destro → "Visualizza sorgente pagina",
in tutto il marasma di codice vedrete che in cima ci saranno i tag <head> e
</head> e più in basso <body> e </body>.

Bene, per rendere il tutto "responsive design" e quindi adattabile a
qualsiasi schermo, occorrono 2 passaggi fondamentali:
- inserire fra i tag <head> </head> una stringa tipo:
 <meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0" />
- nei file css inserire le "media query" per i tipi di schermo che vogliamo
supportare, cioè stringhe tipo:
 @media screen and (width: 400px) {  }
 all'interno delle parentesi graffe vengono incolonnate le regole dei css
per quel particolare schermo.

Su moin la prima stringa "viewport" basterebbe inserirla nel file
wikiconfig.py.
Le media query invece in uno dei file css o in un css creato apposta.
-----------------------------------------------------------------------
FINE dello spiegone :P

Detto così sono due passaggi, in realtà tutto questo poi si tramuta in
ore/giornate di test a provare e riprovare di far funzionare il codice dei
css e verificare il comportamento sui diversi dispositivi.
Rimarrebbe ovviamente da sistemare la barra superiore, però molto dipende
anche dallo stile che verrà adottato dal grppo web.


Ho fatto un gran bla bla, ma almeno ho buttato giù un po' di questioni
riguardante l'interfaccia grafica del portale che risulta poco mobile
friendly. In realtà è una cosa alla quale sto pensando da diverso tempo.
Indipendentemente dal fatto che vengano o meno apportate modifiche al
portale ubuntu-it, volevo comunque cercare di capire fin dove è possibile
spingersi, magari mettendo in conto qualche compromesso purché su di uno
smartphone si riesca a visualizzare i contenuti in modo almeno accettabile.

Rimangono le solite difficoltà del caso.. non c'è la possibilità di
lavorare su di una copia locale del wiki, mi limito a testare la versione
moin desktop opportunamente modificata. Poi supponendo di superare alcuni
ostacoli, andrebbe testata l'interfaccia sui dispositivi mobile... ho come
il sospetto che dovrò imparare a usare un server web...
Ah! Dimenticavo il particolare più importante, NON sono esattamente un web
designer ;D

Insomma, ho incominciato a cercare di capire un po' di cose per vedere se
può essere apportata qualche miglioria. Vedremo.


Ciao
Jeremie


[1]
http://bazaar.launchpad.net/~ubuntu-it-wiki/wiki-ubuntu-it/wiki-repo/files/head:/htdocs/light/css
[2]
http://bazaar.launchpad.net/~ubuntu-it-wiki/wiki-ubuntu-it/wiki-repo/view/head:/data/plugin/theme/light.py
[3]
http://bazaar.launchpad.net/~ubuntu-it-wiki/wiki-ubuntu-it/wiki-repo/view/head:/wikiconfig.py
-------------- parte successiva --------------
Un allegato HTML è stato rimosso...
URL: <http://liste.ubuntu-it.org/pipermail/gruppo-doc/attachments/20170209/d2ead6b6/attachment.htm>


Maggiori informazioni sulla lista Gruppo-doc