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

Guida all'uso del sito SBA

Visite: 1397
Posted: 16 nov, 2009
by: Urbini A.
Updated: 06 set, 2013
by: Urbini A.

Redazione NEWS

  • formato Data, nel caso di news che inizino con un'indicazione di data: "n° giorno Mese:"; ad es. "10 Novembre:"

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:
  • andare in Admin > Blocchi e cliccare su "nuovo blocco"
  • nel titolo eventualmente inserire anche l'abbreviazione della biblioteca (es. BB) per comodità
  • come tipo di blocco, dal menu a tendina "Blocco" selezionare Blocks/HTML
  • posizione: Area9 per SBA, BB-Area-2 per BB, BST-Area-2 per BST...
  • dopo aver cliccato su Aggiorna, si accede all'editor per inserire il contenuto che può essere di 2 tipi:
  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:
  • Nome = testo del link
  • Testo alternativo = attributo title del link (con funzione esplicativa)
  • Incona = eventuale icona da anteporre al testo del link (ad es. novita.gif)
  • Apri questo link in = se il link si deve aprire nella stessa finestra o in una nuova (di solito, il secondo caso per i link esterni)
  • Inserisci dopo, Inserisci in, Inserisci prima (riferito al menu a cascata a destra) = primo e terzo per l'ordinamento, il secondo per creare link annidati
  • in seguito, si seleziona a cosa deve puntare il link: ad es. un articolo o una pagina di CMPro; per i link esterni l'url va messo nel campo Indirizzo URL
  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

  • TOOLTIP (tramite jquery.tinyTips.js): assegnare al testo (un link o altro, come ad es. uno span) la classe tTip e compilare l'attributo title il cui testo verrà visualizzato nel tip. Ad es.:
    <a href="#" class="tTip" title="Persone o enti che hanno un rapporto di studio o di lavoro con l'Università">utenti interni</a>
  • TABELLE: allo scopo di stilizzare le tabelle usate per la presentazione di dati, si deve assegnare alla tabella la classe CSS "tabelleDati". Tramite JQuery alle righe dispari viene assegnata la classe "dispari" a cui corrisponde uno sfondo grigio chiaro; ciò viene fatto dal browser quando carica la pagina, risparmiandoci quindi il lavoro di mettere noi lo stile "dispari" alle relative righe. Come risultato, le righe vengono alternate con sfondo grigio chiaro e bianco. Fanno eccezione le celle di intestazione (th) a cui ho assegnato un proprio sfondo più scuro e testo bianco. Inoltre, quando ci si va sopra col mouse le singole righe vengono evidenziate grazie alla proprietà tr:hover(in tutti i browser eccetto IE6).
  • classi per ESPANDI/CHIUDI: per applicare lo script Ddaccordion, assegnare le seguenti classi:
      per un solo elemento aperto per volta per più di un elemento aperti per volta
    testo tipo "Apri/Chiudi" accordionSolouno_Title accordionMolti_Title
    contenuto da aprire/chiudere
    (per contenere più paragrafi assegnarla a un div contenitore)
    accordionSolouno_Content accordionMolti_Content
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
  • per embedding di filmati in Flash tramite script CeeBox: dopo aver caricato il filmato sul server (dir. upload), inserire un semplice link ad esso assegnandogli la classe videoFlash_Ceebox
  • 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 costituirà i titoli delle tab) seguiti ognuno da un <div class="tabbody"> contenente il contenuto dei pannelli del sistema, ovvero (tab attiva con sfondo grigio, tab inattive con sfondo bianco):
              <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)
  • per gallerie di immagini (tramite script JQuery Lightbox): è sufficiente assegnare un id o una classe alle anteprime delle immagini come nei seguenti due casi:
  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

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 Implementazioni varie
document Profili social @ SBA
document Installazione di MaxDev-unifi
document Guida uso sito SBA NUOVO
document Per la gestione del sito multilingue
document URL vari



RSS