iframe, hover e z-index?

[Andreau]

Ho realizzato un riquadro in cui sono presenti tre link; andando su ogni link compare un riquadro che ricopre il primo e che contiene, oltre che del testo, anche un iframe. Con Firefox, Chrome e Opera va tutto bene, mentre con IE 7 e 8 ci sono un paio di problemi (stranamente con IE6 solo il secondo dei problemi):

1) muovendosi col mouse all'interno del riquadro, quando si va nell'area dell'iframe, vengono "sentiti" i link che stanno sotto ovvero nel riquadro primario, per cui si ha un effetto di comparsa/scomparsa del riquadro corrispondente ad ogni link; ho provato a rimediare anche tramite lo z-index, ma niente da fare;

2) l'area dell'iframe mantiene uno sfondo bianco nonostante il body del documento incorporato abbia impostato background-color: transparent.

Potete vedere il tutto all'indirizzo http://www.sba.unifi.it/bst.htm
Qualcuno sa dove sta il baco e come risolvere in particolare il primo problema che è molto fastidioso?

[Mich_]

Anzitutto una nota di procedura:
Il forum e` indicizzato, e quindi se uno cerca biblioteca universita` firenze potrebbe arrivare alla tua pagina: non e` un buon biglietto da visita per l'universita` trovare una pagina non funzionante: le prove falle in un sito di prova (eventualmente un sottosito di quello principale, ma nei casi di istituzioni pubbliche io consiglierei un sito a parte ceh poi cancelli).

Tra l'altro le universita` sono enti pubblici e devono fare siti che seguono la legge: il tuo viola pesantemente la legge 4/04. Prima di procedere dovresti studiare la legge:
legge 4/04
22 requisiti
(e potrebbe essere che i requisiti sono stati aggiornati: informati).

Comunque devi iniziare a togliere tutto il Javascript e gli <iframe>: le stesse cose si realizzano con sistemi diversi.
Il JS puoi usarlo in maniera "progressive enhancement" o tutt'alpiu` "graceful degradation", ma la pagina deve funzionare completamente anche senza JS
Riferimenti di esempio:
Graceful Degradation & Progressive Enhancement
Capire il progressive enhancement
Progressive enhancement con i CSS
Progressive enhancement con Javascript



Nota di usabilita`:
Se voglio la biblioteca di architettura, e per caso entro con il mouse da destra, mi trovo catapultato nella biblioteca di ingegneria e non ho modo di andare in altre, se non uscire e fare il giro. Non e` una bella cosa. Il progetto va rivisto.


PS: e` inutile che ci provi con una DTD Transitional: IE si comportera` sempre in modo diverso. Se usi una DTD strict (come e` obbligatorio per legge) non dovresti piu` avere i problemi segnalati.

[Andreau]

Grazie innanzitutto per la risposta.

Riguardo alla procedura, il problema è avere a disposizione un sito di prova. Semmai avrei potuto mandare semplicemente il sorgente, terrò presente per la prossima volta, comunque la pagina in questione poi la cancellerò, è solo una pagina "finta" perchè statica, la pagina vera sta dentro il cms.

Sull'accessibilità la nostra cultura a riguardo è purtroppo parziale. Stiamo attenti a produrre codice html pulito la cui presentazione si basi su CSS e Javascript e ci accertiamo che tutto funzioni anche con javascript disabilitato. Sappiamo però che questo non è tutto e fin dall'inizio del prossimo anno abbiamo già in progetto di adeguarci alle ultime indicazioni in tema di accessibilità. Come puoi immaginare, è anche un problema di risorse (umane e di tempo).

Sul caso specifico:
- il riquadro rappresenta una funzionalità aggiuntiva perché serve a dare, senza cliccare, le informazioni "di prima necessità" (indirizzo, contatti, orario) che si ritrovano anche nella pagina della biblioteca in cui si arriva cliccando sul link.
- Il riquadro non fa uso di javascript, attualmente funziona solo con CSS. Tuttavia, inizialmente avevo provato ad usare jquery per produrre un effetto di fade in e fade out per rendere tutto più gradevole, ma non funzionava bene sempre per colpa degli iframe.
- Per risolvere il problema che rilevi relativo all'usabilità potrei far comparire in ogni riquadro gli altri due link più piccolini, ad es. in alto a mo' di pulsantini, però bisognerebbe che quando si passa o si clicca su un pulsantino comparisse il riquadro relativo e credo che questo solo con CSS non sia fattibile, ci vorrebbe javascript, no?
- Infine, cosa intendi con togliere gli iframe? ovvero come potrei realizzare la stessa cosa senza il tag iframe visto anche che crea un po' di problemi? Sicuramente, se passeremo a una dtd strict dovremo eliminarli, bisogna però valutare le alternative.

Grazie ancora

[Mich_]

Gli iframe vengono simulati tramite dei <div> con dimensioni opportune e agendo sulle proprieta` overflow e z-index (e naturalmente posizionamento assoluto). Ci sono alcune gallerie ed alcuni menu che funzionano con tale tecnica. Se fai un giro tra i "link utili" trovi sicuro qualcosa.


Dalla DTD strict non puoi prescindere, ed anche il CMS deve darti tale possibilita`: pertanto quando ne sceglierai uno tienilo presente (molti CMS generano pagine transitional, ma ce ne sono alcuni, anche open-source o comunque free, che generano pagine Strict).
Per documentazione sull'accessibilita` in Italia, puoi vedere i siti di webaccessibile.org e diodati.org (ma forse ce ne sono altri), e naturalmente il lavoro di WAI del W3C (Web Accessibility Initiative), sul quale e` basato anche il lavoro della commissione che ha formulato i 22 requisiti.


Per un sito di prova hai due possibilita`:
1. rivolgerti ad un provider free (di solito ci mettono un po' di pubblicita`, ma per fare prove va bene)
2. ritagliarti un settore del tuo sito, tipo un /prove dentro il tuo dominio: anche se uno ci arriva lo vede che sono pagine di test e comunque finite le prove puoi cancellare tutto.


La nota sul JS la ho messa perche` nella tua pagina ho dovuto scorrere una paginata di chiamate a script prima di arrivare al <body>: sono certamente troppe, sia per un sito di test che per uno definitivo.

- Per risolvere il problema che rilevi relativo all'usabilità potrei far comparire in ogni riquadro gli altri due link più piccolini, ad es. in alto a mo' di pulsantini, però bisognerebbe che quando si passa o si clicca su un pulsantino comparisse il riquadro relativo e credo che questo solo con CSS non sia fattibile, ci vorrebbe javascript, no?

Oppure sistemi il riquadro a comparsa un po' in basso (grosso modo 30-50px), in modo da lasciare libera una striscia in alto, su cui l'utente puo` passare per cambiare schermata.

[Andreau]

Sulla possibilità di simulare gli iframe tramite div ho dato un'occhiata tra i link utili della sezione css del forum, ma non ho trovato, forse non ho capito bene cosa intendi? Se mi sai indicare dove posso trovare qualcosa, mi interessa per il fatto che usiamo gli iframe in varie altre pagine.

In ogni caso, ho modificato profondamente il codice partendo dalla considerazione che la visualizzazione tramite :hover di un nuovo riquadro contenente alcune info per ogni biblioteca rappresenta un di più dal momento che queste stesse info si trovano nella pagina della biblioteca stessa raggiungibile cliccando sul link. Si tratta di un modo per dare all'utente le info di prima necessità senza che ci sia bisogno di cliccare e aspettare il caricamento di una nuova pagina.
Ciò detto, ho realizzato un progressive enhancement come segue:
- tramite Jquery (script bst-home.js) aggiungo la classe "js" all'ul che contiene i tre link delle biblioteche; nel CSS ho quindi impostato tutte le proprietà per i li:hover contenuti in ul.js; in tal modo, solo con javascript abilitato si visualizzano i tre riquadri in sovraimpressione, mentre con javascript disabilitato i tre link restano tali e all'utente resta comunque la possibilità base di cliccare per andare nella pagina della biblioteca;
- ho abolito gli iframe e i dati prima caricati tramite di essi vengono adesso caricati tramite la funzione ajax load() di jquery; questo ha risolto tutti i problemi relativi a IE; togliere di mezzo gli iframe dà anche la possibilità di usare un po' di animazione per la comparsa/scomparsa dei riquadri in sovraimpressione.

Resta il problema relativo all'usabilità che non è da sottovalutare, ci sto pensando. Intanto che ne pensi di quel che ho fatto?
Grazie

[Mich_]

Rispetto a prima, sembra un altro programmatore ...

Personalmente non e` che mi piaccia molto (ma e` una questione estetica e assolutamente personale).
Pero` non e` piu` inusabile, hai affrontato con competenza anche il problema accessibilita`.

Ancora la DTD devi metterla a posto: non puoi usare una DTD transitional: devi usare o HTML 4.0 oppure XHTML 1.0: quest'ultima tra l'altro fa funzionare "quasi" bene anche IE6 (e ce ne sono ancora parecchi in giro).


Per quanto riguarda le sostituzioni di <iframe> ecco un esempio che fa uso di solo CSS: A 'Two Step' CSS Photograph Gallery
Non so se era una cosa del genere che volevi: il riquadro centrale e` quello che viene riempito dai contenuti selezionati dalle immagini piccoline attorno. Naturalmente la scelta di posizionamento e` opinabile (e facilmente cambiabile).
E anche il codice e` molto semplificato dal fatto che l'immagine media e quella grande sono sempre la stessa di quelle piccole, per cui l'autore non deve inserire il codice della "pagina" da far vedere al passaggio sul link.
Nel tuo caso non e` la stessa cosa, ma invece la lista e` data da solo tre elementi.

[Andreau]

Ho modificato il tutto (sempre all'indirizzo http://www.sba.unifi.it/bst.htm ) in modo che ora si comporti un po' come un sistema a tab: quando si va su un link al di sotto compare il riquadro specifico e gli altri due link si muovono un po' verso l'alto per non risultare nascosti dal riquadro. Questo risolverebbe il problema di usabilità dovuto al fatto che prima il riquadro nascondeva gli altri link cosicché l'utente doveva uscire da esso per poterli nuovamente vedere, quindi sarebbe praticamente perfetto.

C'è qualche problema però nell'animazione, evidentemente sto commettendo qualche errore o nel CSS (style_bst.slide.css) o nel JS (bst-home.slide.js). Qualcuno può aiutarmi? O pensate che sia il caso di chiedere aiuto nella sezione javascript?

Riguardo alla DTD immagino che tu intenda adottarne una strict, ma il nostro problema è che facciamo uso in diverse pagine di iframe per integrare contenuti da altri siti esterni.

Grazie comunque Mich_ per le risposte che mi hai dato fin qui.

[Mich_]

Adesso con JS disabilitato non funziona. Ci dev'essere un problema nel CSS, ma e` molto lungo (esagerato, per quello che deve fare), e non ho tempo di studiarlo tutto.

Con JS abilitato il tutto funziona quasi, nel senso che le sottopagine si aprono, ma poi qualcosa si mette a ballare.
Probabilmente aprendosi una sottopagina il mouse perde il link sotto di se, e la pagina si chiude; ma chiudendosi ritorna sopra il link e la pagina si riapre.

Se usi la tecnica del progressive enhancement, dovresti prima far funzionare il tutto senza JS, e poi inserire il JS in modo che non faccia danni. Se invece opti per il graceful degradation, l'ordine va invertito (ma io consiglio il primo: e` piu` robusto rispetto a brwoser vecchi e a browser di prossima generazione).

Per i problemi JS devi senz'altro rivolgerti al sito JS.


Per quanto riguarda la DTD, sei una istituzione pubblica, e la legge 4/04 parla chiaro. Il sito dev'essere a norma. quindi DEVI usare una DTD strict (mi pare sia il primo dei 22 requisiti).
Al posto di iframe puoi usare AJAX (tenendo sempre conto che il sito deve funzionare anche con JS disabilitato).
Creare un sito non a norma ti porta a problemi fiscali non da poco: se un utente non riesce ad usare il sito puo` denunciare il rettore (o il direttore amministrativo), il quale puo` chiaramente rivalersi sui tecnici e a quel punto le spese tendono all'infinito.