Forumfree : sfondi auto-ridimensionanti

PREMESSA

Buon giorno, recentemente mi son posto il problema di come impostare una immagine di sfondo nel mio sito di test che si adattasse automaticamente alla dimensione della finestra del browser.

Argomento trattato, con alterni pareri, nello skin-lab, ove sussiste discussione tra il permettere detto adattamento e chi sostiene sia meglio una singola immagine, a posizionamento fisso, di dimensione adeguata ... cosa ben difficile a mio parere, data la variegata risoluzione delle macchine che si connettono, che potete vedere tra le statistiche di forumfree.

Sulla base di dette statistiche, ho ritenuto di adottare il ridimensionamento automatico che presenta il vantaggio di eliminare il mosaico della stessa immagine ripetuta, così diffuso e che trovo sgradevole, per contro si tenga presente che l'immagine viene deformata come conseguenza dell'adattamento, fattore da tenere di conto nella valutazione, dato che mal si presta per alcuni tipi di immagine, principalmente se presentanti elementi geometrici o figure regolari.

Il da farsi è tecnicamente molto semplice, data la sua semplicità ho ritenuto di fare un piccolo tips mirato ad amministratori non tecnici che vogliano ottenere detto effetto ... giacché ci sono esprimerò nella maniera più semplice che ho trovato, i passi necessari per inserire una immagine di sfondo in modelli forumfree del primo tipo, impostarla come auto-dimensionante ed affrontare un effetto collaterale che ho visto verificarsi.

Agli interessati auguro una buona lettura, agli esperti chiedo venia : articolo non mirato a loro e, se ritengono, segnalino pure possibili miglioramenti

PASSO 1 - Definizione immagine di sfondo

In primo luogo bisogna tener presente che l'immagine di sfondo non può risiedere sui server forumfree, viene rifiutata ... una delle numerose limitazioni di questo circuito, anche se logica in considerazione del probabile intasamento da immagini di prova che ne deriverebbe.
Bisogna, pertanto, affidarsi ad un servizio di hosting esterno, dato che l'immagine non può risiedere neanche sulla Vostra macchina, e rendersi in grado di ottenere gli indirizzi per il collegamento ... cosa che a quanto vedo un po' tutti gli amministratori sanno fare

Per definire l'immagine di sfondo, dovrete aprire la pagina apposita utilizzando il comando :

Amministrazione => Grafica => Sfondo

Nella finestra che apparirà dovrete semplicemente inserire, scrivendolo o incollandolo, il link alla immagine che volete utilizzare nel campo "Indirizzo dello sfondo" e premere il tasto "Salva modifiche" in figura

Al successivo ingresso al forum vedrete il vostro sfondo


PASSO 2 - Definizione auto-ridimensionamento

Per definire l'auto-ridimensionamento bisognerà mettere mano agli stili del Vostro forum, operazione nella quale bisogna porre prudente attenzione, dato che sono i fattori che governano l'intera rappresentazione del Vostro forum.

Per accedere alla sezione, utilizzerete il comando :

Amministrazione => Grafica => Colori e stili

Vi apparirà la pagina di gestione degli stili utilizzati dal Vostro forum, la primissima riga sarà certamente qualcosa del genere :


Questa riga governa la rappresentazione del corpo (body, appunto) della vostra pagina principale, potrà variare di qualcosa ma essenzialmente sarà simile, per impostare l'auto-ridimensionamento della immagine di sfondo dovremo inserivi le seguenti istruzioni :

Per questioni di ordine, personalmente preferisco inserirle dopo le istruzioni di definizione del colore di sfondo, nel mio caso il paramento "background-color: #FFF;", ma potreste inserirle tranquillamente all'inizio dopo la parentesi graffa di apertura " { " così come stanno oppure prima della parente graffa di chiusura " } " avendo però attenzione di aggiungere un punto e virgola all'utima istruzione già presente e toglierlo all'ultima istruzione inserita.

Il significato di quanto inserito
Le tre istruzioni inserite in realtà sono tre varianti di una sola, ognuna di esse è valida ed attiva per una certa tipologia di browser (IE, Firefox, etc.), la necessità di tale istruzione multipla ha origine nella guerra di predominio tra i browser in corso da decenni, essendo varie case produttrici poco rispettose degli standard's ed intenzionate a dominare il mercato, ovviamente per guadagnarci

Comunque il Vostro codice dovrebbe essere diventato qualcosa di simile a quanto in figura :

Nuovamente, vi sarà sufficiente premere il pulsante "Salva modifiche" ed al Vostro successivo accesso al forum lo sfondo si calibrerà alla dimensione della finestra del browser, seguendone i ridimensionamenti.

Tenete presente che vi sarà sufficiente cancellare il codice inserito, ed eventualmente ripristinare la situazione dei punti e virgola antecedente, per annullare il ridimensionamento dell'immagine, il forum "dovrebbe" ritornare alla situazione antecedente.


PASSO 3 - Un possibile effetto collaterale

Stranamente, perché non dovrebbe accadere, in almeno un caso si è verificato che i font utilizzati per un sito di test (non era il mio) apparissero leggermente rimpiccioliti e, cosa ancor più strana, l'effetto permaneva anche dopo la rimozione delle istruzioni prima esposte.

La faccenda potrebbe spiegarsi con effetti di programmi di interpretazione ed archiviazione delle impostazioni date, ma non è possibile alcuna verifica in merito, ciò che è certo è che in qualche caso può verificarsi.
Faccenda facilmente affrontabile, basta porci un pochino di attenzione, di seguito spiegherò come ingrandire o ridurre la dimensione dei caratteri nei vostri stili.
Tenete presente, se interessati, che il tipo di modifiche che seguono hanno effetti macroscopici anche se sono minime, se fate tal tipo di modifiche annotatevi cosa state cambiando ed il valore precedente, per ripristinarlo, e controllatene l'effetto dopo ogni modifica.

In genere, negli stili di forumfree che definisce la dimensione dei caratteri è del tipo "font-size: dimpt;".
La "dim" rappresentata in rosso è un valore numerico di tipo intero o decimale, basta modificare tale numero, facendo attenzione a non alterare niente altro che il numero, e poi verificare la riuscita delle impostazioni.
Di norma l'estensione è in punti (pt) ma può anche essere espressa con altri tipi di unita (px, em ... etc.) od anche nessuna, in ogni caso state attenti a non variare tali tipologie e che l'estensione indicante le unità di misura sia accanto al numero senza spazi intermedi.

Tali definizioni di dimensione sono sparse nel codice di stile, all'interno di blocchi racchiusi tra parentesi graffe con indicato a fianco gli elementi a cui si applicano, le prime righe riferiscono agli elementi fondamentali del forum come importanza, che sono :
"body" che è il corpo della pagina, ha pochi effetti visibili interessando essenzialmente le scritte di individuazione del forum e la riga a fondo pagina con le scritte "Crea il tuo Forum" "Crea il tuo blog" etc. in fondo pagina.
"table" e "div" che invece coinvolgono il grosso dei contenuti, tutte le vostre sezioni ed i vostri post sono contenuti per lo più in tabelle (table) ed anche se non li vedete, i "div" sono onnipresenti nella vostra pagina, interventi su tali elementi hanno effetti macroscopici, ed in linea generale sono sufficienti.

UN PICCOLO ESEMPIO PRATICO

Il sottostante codice, è quello originario delle prime righe degli stili del mio forum di test


Come potete leggere, le mie impostazioni erano di 8.5 punti per il body, e di 7.5pt per div e tabelle, dato che ci vedo poco ho deciso di ingrandirli intervenendo sui fattori "font-size", il primo, nel corpo del body, che come detto controlla il corpo del testo sparso nella pagina, dall'impostazione "font-size: 8.5pt;", l'ho ingrandito a 9 punti così : "font-size: 9pt;" gli effetti sono stati minimi

più significativa è la parte per tabelle e div, questa riga :


portata da 7.5 ed 8.5 punti, da "font-size: 7.5pt;" a "font-size: 8.5pt;" ingrandendo così le scritte principali, praticamente il grosso del forum. La leggibilità complessiva mi è molto migliorata con solo questi due interventi, mi sono stati sufficienti ed il resto l'ho lasciato invariato.

Come potete vedere, non è una cosa difficile questo tipo minimo di interventi, purché si abbia un minimo di accortezza e prudenza, ad esempio farsi una copia del codice presente prima dell'intervento in modo da poterlo riportare indietro in caso di grosse corbellerie o ripensamenti, si possono affrontare anche a piccoli tocchi

Ciao, alla prossima

Edited by nuzzopippo - 10/5/2014, 18:06