Biblioteca digitale Knowledgebase
Cerca:     Ricerca avanzata
Sfoglia per categorie:
Glossario

Guida uso sito SBA NUOVO

Visite: 821
Posted: 17 nov, 2014
by: Urbini A.
Updated: 22 set, 2015
by: Urbini A.

Immagini: info generali

  • Risoluzione: 72 ppi (pixel per inch = pixel per pollice, e non dpi che e' dot per inch che e' per la stampa)
  • Formato: in genere jpg o gif; evitare png per immagini grandi perche' genera file grossi
  • Qualita': quando si salva in jpg, salvare con qualita' piu' bassa possibile (al max 60-70%) in modo da ottenere file piu' piccoli possibile

Immagini a tutta larghezza in cima alle pagine

Da mettere in particolare nelle pagine di primo livello e in quelle delle sedi.

Dimensioni: 690 x 220 pixel

Per metterle: cmpro > modalita' avanzata > campo "Logo": scriverci il nome del file, eventualmente col percorso della directory in cui si trova (es. "risorse.jpg", "scienzetecnologiche/sede_agraria.jpg")


Tabs

Per contenuto a Tab in CMPro (tramite script JQuery Accessible Tabs = jquery.tabs.js; per esempi di utilizzo vedi questa pagina): all'interno di un <div class="tabs"> strutturare dei titoli <h2>, <h3>... con classe tabTitle (il cui testo costituira' il titolo di ogni tab) seguiti ognuno da un <div class="tabbody"> contenente il contenuto dei pannelli del sistema, ovvero:

    <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 grigio, tab inattive con sfondo bianco), 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">Titolo tabX</h3>)
  • usare l'ID come un'ancora (es. http://www.sba.unifi.it/CMpro-v-p-1.html#tab1)

Accordion (apri/chiudi)

Per inserire un sistema di accordion = uno o piu' elementi cliccabili seguiti ognuno da contenuto inizialmente nascosto:

  • assegnare la classe accordion_title agli elementi cliccabili:
    possono essere titoli (es. <h2 class="accordion_title">Titolo...</h2>)
    o paragrafi con semplice testo Leggi tutto (<p class="accordion_title">Leggi tutto</p>)
  • dopo ogni elemento cliccabile, il contenuto da aprire/chiudere deve stare in un contenitore con classe accordion_content, quindi o un unico paragrafo o, se sono di piu', vanno messi dentro un div:
    es.1 <p class="accordion_content">Testo...</p>
    es.2 <div class="accordion_content"><p>Testo...</p><p>Ancora testo...</p>...</div>

Titoli a capo

Quando ci sono elementi flottanti (es. immagini a sinistra o a destra), per mandare a capo un titolo assegnare ad esso la classe aCapo tramite il menu Stili in tinymax.


Gallerie di immagini con effetto Lightbox

Per far aprire le immagini in sovraimpressione. Funziona tramite il javascript Fancybox (per maggiori info: http://fancyapps.com/fancybox/).

E' responsivo per cui le immagini che eccedono le dimensioni della finestra del browser vengono adattate. Tuttavia, e' bene non mettere immagini troppo grandi per non appesantire il caricamento.

1) Per immagini raggruppate:

Si puo' fare quasi tutto con Tinymax:

  • mettere le anteprime delle immagini in un elenco puntato (ul li) tenendo presente che le dimensioni delle anteprime vengono impostate dal CSS a 120px di larghezza per 100px di altezza
  • assegnare la classe "gallery" all'ul (da fare nell'HTML)
  • per ogni anteprima impostare il link alla corrispondente immagine grande;
  • assegnare ad ogni link un uguale attributo "rel". Per far cio' con Tinymax: per ogni anteprima cliccare su Inserisci/modifica collegamento > scheda Avanzate > nel campo "Relazione da pagina a target" scegliere uno dei valori, ad es. Lightbox (puo' essere qualunque, l'importante e' che sia lo stesso per tutte le immagini della stessa galleria)
  • per fare galllerie separate in una stessa pagina, basta dare valori diversi all'attributo rel.

Esempio:

<ul class="gallery">
   <li><a rel="lightbox" title="titolo img 1" href="img1.jpg"><img width="120" height="100" alt="alt img 1" src="img1_s.jpg"></a></li>
   <li><a rel="lightbox" title="titolo img 2" href="img2.jpg"><img width="120" height="100" alt="alt img 2" src="img2_s.jpg"></a></li>
.....
</ul>

2) Per una o piu' immagini sparse nella pagina:

  • una volta inserita l'anteprima nella pagina (con dimensioni e posizione desiderate), associare la classe "gallery" al link all'immagine grande;
  • nel caso di piu' di una immagine, per ottenere lo scorrimento a mo' di galleria, assegnare ad ogni link lo stesso attributo "rel" (vedi sopra).

Esempio:

<p><a class="gallery" rel="lightbox" title="titolo img 1" href="img1.jpg"><img class="imgLeftBorder" width="aaa" height="bbb" alt="alt img 1" src="img1_s.jpg"></a></p>
<p>Testo pagina.........</p>
<p>Altro testo.........</p>
<p><a class="gallery" rel="lightbox" title="titolo img 2" href="img2.jpg"><img class="imgLeftBorder" width="xxx" height="yyy" alt="alt img 2" src="img2_s.jpg"></a></p>


Avvisi in sovraimpressione

Per creare un avviso che si visualizza in sovraimpressione:

  • admin > Blocchi e menu' > Nuovo blocco
  • Titolo: come si vuole
  • Tipo di blocco: Blocks/Contenuto HTML
  • Posizione: Centro

L'avviso si vede entrando nel sito, qualsiasi sia la pagina; nelle successive pagine non compare piu' fino alla chiusura della sessione del browser.

Altro in questa categoria
document Personalizzazioni di MDPro
document Guida alla creazione dei link a Metalib - Unifi
document Istruzioni per la gestione degli orari delle biblioteche
document Guida all'uso del sito SBA
document Implementazioni varie
document Profili social @ SBA
document Installazione di MaxDev-unifi
document Per la gestione del sito multilingue
document URL vari



RSS