<div dir="ltr">Il giorno 4 febbraio 2017 18:45, Alessandro Viprati <span dir="ltr">&lt;<a href="mailto:vipri.alessandro@gmail.com" target="_blank">vipri.alessandro@gmail.com</a>&gt;</span> ha scritto:<br><div><div><div class="gmail_extra"><div class="gmail_quote"><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="auto"><span class="gmail-"></span><br><div class="gmail_extra" dir="auto">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. </div></div></blockquote><div><br>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 &quot;stabilizzare&quot; 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...<br><br></div><div>Ho fatto una prova molto grossolana col solito Moin Desktop Edition.<br></div><div>Le impostazioni per la larghezza delle pagine sono sul file screen.css [1].<br></div><div>Ho provato in maniera grezza a commentare le voci nelle quali viene impostata la larghezza:<br>width: 985px;<br>min-width: 985px;  ecc..<br></div><div>e il risultato è che il testo torna ad adattarsi alla larghezza della pagina.<br></div><div>Con delle modifiche si riesce a far adattare anche le immagini.<br><br>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.<br><br>Per altre modifiche, ad esempio fare in modo che gli indici delle pagine in modalità smartphone non rimangano spiaccicati sulla destra, occorre utilizzare le &quot;media query&quot; (..segue spiegazione più in la).<br></div><div>Poi tutto quello che sta sulla barra superiore andrebbe riorganizzato... ovviamente restringendo la pagina finisce tutto fuori posto.<br></div><div><br><br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="auto"><div class="gmail_extra" dir="auto">Inoltre tutti i portali di ubuntu-it non si adattano alla dimensione dello schermo, quindi presumo che questo &quot;problema&quot; sia da imputare alla &quot;non scalabilità&quot; 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</div></div></blockquote><div><br></div><div>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ù.<br></div><div>Il resto è governato dai css (principalmente il common.css e lo screen.css) e dal famoso wikiconf.py [3].<br></div><div>Chi ci ha messo le mani sopra sapeva il fatto suo ;)<br><br></div><div>SPIEGONE (anche per chi non conosce html e css)<br>-----------------------------------------------------------------------<br></div><div>In una pagina html ci sono 2 aree ben definite, una in cima racchiusa dai tag &lt;head&gt; e &lt;/head&gt; 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...<br>L&#39;altra area è racchiusa dai tag &lt;body&gt; e &lt;/body&gt; e contiene i contenuti della pagina vera e propria (titoli, paragrafi, ecc..).<br></div><div><br></div><div>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 → &quot;Visualizza sorgente pagina&quot;, in tutto il marasma di codice vedrete che in cima ci saranno i tag &lt;head&gt; e &lt;/head&gt; e più in basso &lt;body&gt; e &lt;/body&gt;.<br><br></div><div>Bene, per rendere il tutto &quot;responsive design&quot; e quindi adattabile a qualsiasi schermo, occorrono 2 passaggi fondamentali:<br></div><div>- inserire fra i tag &lt;head&gt; &lt;/head&gt; una stringa tipo:<br></div><div> &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, maximum-scale=1.0&quot; /&gt;<br></div><div>- nei file css inserire le &quot;media query&quot; per i tipi di schermo che vogliamo supportare, cioè stringhe tipo:<br> @media screen and (width: 400px) {  }<br></div><div> all&#39;interno delle parentesi graffe vengono incolonnate le regole dei css per quel particolare schermo.<br><br></div><div>Su moin la prima stringa &quot;viewport&quot; basterebbe inserirla nel file wikiconfig.py.<br></div><div>Le media query invece in uno dei file css o in un css creato apposta.<br>-----------------------------------------------------------------------</div><div>FINE dello spiegone :P<br></div><div><br></div><div>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.<br></div><div>Rimarrebbe ovviamente da sistemare la barra superiore, però molto dipende anche dallo stile che verrà adottato dal grppo web.<br></div><div><br><br></div><div>Ho fatto un gran bla bla, ma almeno ho buttato giù un po&#39; di questioni riguardante l&#39;interfaccia grafica del portale che risulta poco mobile friendly. In realtà è una cosa alla quale sto pensando da diverso tempo.<br></div><div>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.<br><br></div><div>Rimangono le solite difficoltà del caso.. non c&#39;è 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&#39;interfaccia sui dispositivi mobile... ho come il sospetto che dovrò imparare a usare un server web...<br></div><div>Ah! Dimenticavo il particolare più importante, NON sono esattamente un web designer ;D<br></div><div><br></div><div>Insomma, ho incominciato a cercare di capire un po&#39; di cose per vedere se può essere apportata qualche miglioria. Vedremo.<br><br><br></div><div>Ciao<br></div><div>Jeremie<br></div><div><br><br></div></div>[1] <a href="http://bazaar.launchpad.net/~ubuntu-it-wiki/wiki-ubuntu-it/wiki-repo/files/head:/htdocs/light/css">http://bazaar.launchpad.net/~ubuntu-it-wiki/wiki-ubuntu-it/wiki-repo/files/head:/htdocs/light/css</a><br>[2] <a href="http://bazaar.launchpad.net/~ubuntu-it-wiki/wiki-ubuntu-it/wiki-repo/view/head:/data/plugin/theme/light.py">http://bazaar.launchpad.net/~ubuntu-it-wiki/wiki-ubuntu-it/wiki-repo/view/head:/data/plugin/theme/light.py</a><br>[3] <a href="http://bazaar.launchpad.net/~ubuntu-it-wiki/wiki-ubuntu-it/wiki-repo/view/head:/wikiconfig.py">http://bazaar.launchpad.net/~ubuntu-it-wiki/wiki-ubuntu-it/wiki-repo/view/head:/wikiconfig.py</a><br></div></div></div></div>