Guida all'uso del sito SBA

Redazione NEWS


Riquadro "banner"

Per ogni elemento da mettere nel riquadro si deve creare un relativo blocco di MDPro. Per eliminare un elemento, basta canellare o disattivare il blocco.
Per creare un nuovo elemento:
  1. per inserire un'immagine-banner: basta aggiungere l'immagine (larghezza 220px, altezza 60px) tramite Image Manager ed eventualmente metterla dentro un link; consigliabile compilare il titolo (title) e, se si mette un testo alternativo (alt) dell'immagine, metterlo uguale al titolo perché Internet Explore mostra l'alt invece del title. Poi cliccare su Aggiorna e il blocco è attivo.
  2. per inserire un avviso testuale: scrivere il testo (non superare una certa lunghezza perché, per mantenere un'altezza di 60px, vengono visualizzati fino a 4 righe), dopodichè selezionarlo tutto e assegnargli la classe evidenzaTxt tramite il menu a tendina Stili (quello in cui si vede inizialmente lo stile mceContentBody). Poi cliccare su Aggiorna e il blocco è attivo.

MENU con MDMenus

  1. dall'admin, entrare in MDMenus
  2. selezionare il menu da editare, ad es. "RISORSE BS": in alto si vedono i link già presenti, in basso c'è la griglia per inserirne di nuovi
  3. per inserire un nuovo link:
  1. per modificare un link: link Edita

Redazione dei TESTI e uso di TINYMAX



Image Manager

UPLOAD NUOVE IMMAGINI SUL SERVER:

L'upload tramite Image Manager presenta il limite che le immagini vengono ridimensionate ad una delle 3 larghezze proposte (400, 200, 100 pixel). Per fare l'upload di immagini con dimensioni diverse usare il File Manager.

INSERIMENTO IMMAGINI NELLE PAGINE:

  1. INSERIMENTO DENTRO UNA RIGA DI TESTO (la riga prende l'altezza dell'immagine, quindi in genere si usa per immagini piccole): una volta aperto l'Image Manager, selezionare l'immagine dall'elenco e cliccare su Conferma in basso
  2. INSERIMENTO CON TESTO CHE SCORRE INTORNO ALL'IMMAGINE (tramite la proprietà float dei css): dopo aver selezionato l'immagine dall'elenco, vai su Proprietà e sotto "Stile sola img" seleziona l'opzione desiderata (sulla destra si può vedere un'anteprima). Per l'estetica, si consigliano le due opzioni con bordo.
  3. INSERIMENTO DI UN'IMMAGINE CON DIDASCALIA: come punto precedente, però invece che in "Stile sola img", selezionare l'opzione desiderata sotto "Didascalia" (no anteprima) dopo aver selezionato la relativa casella. Le due opzioni con bordo sono consigliate anche per contenere il tutto. Il testo della didascalia si mette nel campo in alto Titolo/Didascalia.
  4. attributo ALT (utile per l'accessibilità): viene riempito col contenuto del campo "Descrizione" in alto

File Manager



Guida al CSS/Javascript

Per linkare ad un punto preciso facendo in modo che si espanda il contenuto relativo:
url pagina ? accordionSolouno_Title=X # nome-ancora
dove X è il numero di titolo (header) partendo da 0
              <div class="tabs">
             <h2 class="
tabTitle">Titolo tab1</h2>
             <div class="tabbody">Contenuto tab1</div>
             <h2
class="tabTitle">Titolo tab2</h2>
             <div class="tabbody">Contenuto tab2</div>
             .......
      </div>

Per invertire lo sfondo (tab attiva con sfondo bianco, tab inattive con sfondo grigio), aggiungere la classe tabsGrigie al div.tabs:
              <div class="tabs tabsGrigie">
             <h2
class="tabTitle">Titolo tab1</h2>
             <div class="tabbody">Contenuto tab1</div>
             <h2
class="tabTitle">Titolo tab2</h2>
             <div class="tabbody">Contenuto tab2</div>
             .......
      </div>
Per aprire direttamente una tab tramite un link:
assegnare un ID al titolo (es. <h3 id="tab1" class="tabTitle">some dummy text</h3>)
e usare l'ID come un'ancora (es. http://www.sba.unifi.it/CMpro-v-p-1.html#tab1)
  1. per le anteprime che si trovano raggruppate (tramite un elenco puntato ovvero un <ul>): assegnare all'ul l'id "gallery" ovvero <ul id="gallery"> (vedi ad es. pag. http://www.sba.unifi.it/Article124.html)
  2. per le anteprime che si trovano sparse nel testo: assegnare la classe "thumbs" ad ogni singolo contenitore (ad es. un <p>) dell'anteprima, ad es. <p class="thumbs"> (vedi ad es. pag. http://www.sba.unifi.it/CMpro-v-p-168.html).
    Per le anteprime in cui si vuole mettere una didascalia, bisogna aggiungere una delle classi capDivLeft/capDivLeftBorder/capDivRight/capDivRightBorder, quindi ad es.: <p class="thumbs capDivLeftBorder">. In ogni didascalia bisogna usare i <br> per mandare a capo il testo in modo che esso non vada oltre la larghezza dell'immagine anteprima.

IFRAME ORARI

Gli orari delle biblioteche vengono caricati tramite iframe che prelevano i dati dal server sbafirenze.it.

Tramite Ajax (script jQuery in sba.js) gli iframe vengono eliminati al volo e sostituiti con i dati prelevati dagli stessi, in modo da incorporarne il contenuto nelle pagine SBA e presentare un'icona apposita (loading.gif) durante il caricamento dei dati da sbafirenze.

In caso di javascript disabilitato vengono comunque caricati gli iframe, garantendo così i requisiti di accessibilità. A tal fine è quindi necessario definire opportunamente l'altezza (height) degli iframe, sovradimensionandola in previsione degli orari delle vacanze.


Linkare a strumenti esterni


Configurazione delle biblioteche in CMPro/MDPro


Template html del tema