Unofficial WebSite X5
Categoria generale => Discussioni generali => Topic aperto da: H_O_D - 04 Marzo, 2013, 18:14:20
-
Come spesso si vede in molti siti, vi è la possibilità di adattare il sito stesso per ipovedenti o di diminuire o aumenatre le dimensioni del testo dell'intero sito
vi chiedo se sapete come si fà, e potete dare a un povero utente qualche indicazione
grazie
-
Per ingrandire o ridurre il testo ho fatto questa prova: http://stesil.altervista.org/evo9/zoomtesto/index.html (http://stesil.altervista.org/evo9/zoomtesto/index.html)
Vedi se può essere un'idea da cui partire.
-
L'idea è esattamente quella, questo permette l'ingrandimento del testo :P...
Adesso serve solo una cosa che metta in automatico uno sfondo a contrasto e con la scritta esempio?
Scritta in rosso e sfondo in nero o scritta in Giallo e sfondo in blu.
ti chiederei il codice per le due opzioni se fosse possibile grazie ^_^
-
Ti mostro un'esempio
http://www.ipovedente.it/
Se clicchi sulle A hai l'effetto da te selezionato, però se dovessi andare a cliccare sulle C noterai il contrasto alto, cioè bianco e nero e versione testuale, quello è un sito di riferimento, credo che una volta che ho l'impostazione delle A (ingrandire e diminuire) quella delle C non sia poi così difficile no?
Praticamente al click devo selezionare un'altro tipo di colori, ed eventualmente di immagini una rottura di balle ma và fatta
-
Ma no, non sarà semplicissimo da realizzare ma, secondo me, ne vale la pena. Mi sembra giusto rendere i contenuti di un sito facilmente accessibili a tutti.
Questo è il codice che ho inserito in head: [attachurl=1]
questo il codice per i "bottoni" aumenta/diminuisci testo, che ho inserito in modifica del modello, intestazione:
Only registered users can see contents. Please click here to Register or Login.
E' possibile che il codice js non sia completo. L'ho provato solo con testi semplici, senza titoli nelle celle, senza tabelle ... incomincia a provarlo in un sito "vero" così vediamo se c'è qualcosa da sistemare.
Per il contrasto ci devo pensare.
-
Ti dico quello che ho scritto in answere :P
secondo me, provo a intuire andrebbe sistemato il CSS in modo da poter cambiare i colori con un comando da bottone...
-
Grazie per il suggerimento.
Tu hai provato?
E' possibile che il codice js non sia completo. L'ho provato solo con testi semplici, senza titoli nelle celle, senza tabelle ... incomincia a provarlo in un sito "vero" così vediamo se c'è qualcosa da sistemare.
-
ho fatto una provo ^_^ e sembra andare le tabelle si allargano e si adattano....
quello che preme di più è l'ipovedente, poichè nel caso non funzioni si può sempre suggerire lo zoom del browser ^_^
-
aggiungo questo
Se io avessi i tasti nell'header del sito, esempio A+ A- C N
A+ = scrittura aumentata ok
A- = scrittura diminiuita ok
C = contrasto sviluppare
N = Normale sviluppare...ma non so quanto sia difficile ecco
-
Prova ad aggiungere la funzione contrasto() nel codice inserito in head:
[attach=1]
Poi aggiungi il relativo pulsante che la attiva
Only registered users can see contents. Please click here to Register or Login.
Anche in questo caso le variabili di impostazione degli sfondi sono diverse, e io l'ho provata in una situazione sola ... potrebbe essere da sistemare.
Per il ritorno alla visualizzazione "normale" la via più semplice mi sembra quella di ricaricare la pagina corrente:
Only registered users can see contents. Please click here to Register or Login.
-
Le proverò nel pomeriggio che dire incrociamo le dita ;)
-
Ciaoooo, forse non centra niente, ma prendere uno spunto da qui: http://www.gdrtestdesign.altervista.org/JS%20LAYOUT%20COLOR/ (http://www.gdrtestdesign.altervista.org/JS%20LAYOUT%20COLOR/) :)
-
non mi riesce di farla funzonare :(
-
http://www.ipovedente.it/
Per ottenere ciò bisognerebbe "fondere" la prova di stesil con, per esempio, uno "Style Sheet Switcher" che fa uso dei cookies:
http://lemonsong.altervista.org/test_styleswitch/ (http://lemonsong.altervista.org/test_styleswitch/) (questo è solo un esempio)
Bisogna mantenere l'impostazione scelta al cambio pagina.
-
si ok, questo cambia lo sfondo ^_^, ma il problema sono le scritte, gli ipovedenti non veodno le scritte se non con un contrasto alto
-
Infatti al posto di uno di quei colori, ne inserisci una tutta bianca e con il testo nero si vede benissimo... ;)
-
si ok, questo cambia lo sfondo ^_^
Infatti, quello è un "interruttore", ci puoi accendere un abat-jour oppure un'intera città... dipende da te :)
-
Dopo un giorno di meditazione credo di aver trovato il punto sul come agire :D, spero siate tutti felice per me ^_^, adesso però viene il bello
vi pongo la solzione che ho pensato.
Partiamo dal presupposto che i menù siano delle comunissime immagini caricate nel persoco /images/
partendo dal presupposto che avrò questo "bottone"
<a href="#" onclick="contrasto()" title="clicca per accedere alla versione alto contrasto">C</a>
Aggiungendo che un bottone del menù è questo
<a href="miapagina.html" class="imCssLink"><img src="images/jpg" style="width: 172px; height: 60px;" alt="Pagin1" title=""/></a></span>
Io posso con il comando della funzione di cui sopra dire che non deve visualizzare l'immagine ma deve visualizzre solo la scritta Pagina 1 che è stata evidenziata?
Se si come?
-
Sì, si può fare. Tra l'altro il testo c'è già. Solo che è nascosto.
Rendi visibile il testo dei menu:
Only registered users can see contents. Please click here to Register or Login.
Imposti il colore ai link del menu e un colore diverso a quello della pagina corrente:
Only registered users can see contents. Please click here to Register or Login.
Elimini le immagini che vengono visualizzate:
Only registered users can see contents. Please click here to Register or Login.
Ma .... lavorando sull'esempio che ti ha postato lemonsong, puoi creare un lavoro più pulito e funzionale. Certo, devi scrivere tutto il nuovo foglio di stile, ma sicuramente otterrai un risultato migliore.
-
domande:
Dove e come lo inserisco quel codice?
Considerazioni
L'obbiettivo finale dovrebbe essere questo:
http://www.comune.taurisano.le.it/?stile=ipovedenti
e se dovessi usare questo, dovrei praticamente creare X fogli di stile ipovedenti per quanti sono le mie pagine?
-
domande:
Dove e come lo inserisco quel codice?
Nella funzione contrasto(). Ma non va bene. Se quello che vuoi ottenere deve essere identico alla pagina che hai linkato, la prova che ho fatto io sicuramente non va bene. Troppe impostazioni di stile dovrebbero essere variate via js. Occorre usare uno style sheet switcher.
e se dovessi usare questo, dovrei praticamente creare X fogli di stile ipovedenti per quanti sono le mie pagine?
A priori non lo so. Bisogna provare per saperlo con certezza. Impostare gli stili del template togliendo le immagini di sfondo, se ci sono, impostare i colori giusti e rendere visibili i contenuti per l'accessibilità presenti in ogni pagina (class imHidden) ... tutto questo non dovrebbe dare grossi problemi ... è la linearizzazione della pagina in modo che i contenuti appaiano uno sotto l'altro che bisogna vedere se è fattibile attraverso un unico foglio di stile.
-
Ragazzi nel frattempo visto che è uscita la beta della V.10 mi sono permesso di dare un suggerimento alla casa madre
http://answers.websitex5.com/post/53483
magari seguitelo anche voi così da rendere più efficace la richiesta.
devo aggiungere che sto ancora sbattendo contro sta caspita di modalità con grosse grosse grosse difficoltà
-
Sì, non è semplice. Questa è la mia ultima prova (... e ringrazio lemonsong per la collaborazione): http://stesil.altervista.org/accessibile/ (http://stesil.altervista.org/accessibile/index.html)
Sarà sicuramente necessario fare aggiustamenti sulla base della struttura e degli elementi inseriti nel sito, ma se può sembrare una soluzione accettabile posso scrivere le indicazioni generali su come procedere.
-
Accettabile...dici Accettabile hai fatto un'ottimo lavoro...sono oggettivamente goloso delle indicazioni :D
-
Queste sono indicazioni generali ... necessarie di aggiustamenti in base alla struttura reale del sito.
Sono stati utilizzati due file js, Fluid Text Resizer per le dimensioni variabili del font e Style Sheet Switcher per il foglio di stile, da scaricare dal sito degli autori http://www.dynamicdrive.com
Per ottenere la versione alto contrasto sono stati "eliminati" con js gli stili inline e i file css generati da evo9 che interferivano con la linearizzazione dei contenuti. Il nuovo CSS per l'alto contrasto a dire il vero è molto scarno, ma è valido per tutte le pagine del sito: contiene solo alcune regole per i link, il body, le tabelle .... è da personalizzare e sicuramente non è completo ... ma questo è un lavoro che può essere fatto solo avendo ben presente il sito a cui si riferisce. Comunque, con tutti i suoi limiti, lo allego qui: [attachurl=1]
Per integrare il tutto nel programma:
In head (Impostazioni Generali, scheda Esperto) inserire questo codice: [attachurl=2]
Il codice è commentato, così si può capire a cosa servono le diverse parti.
In modifica del modello, intestazione, inserire il codice html per i pulsanti che abilitano le diverse visualizzazioni: alcuni hanno delle immagini, altri sono link testuali ... il codice va personalizzato in base a quello che si vuole ottenere.
Only registered users can see contents. Please click here to Register or Login.
In un oggetto html del progetto allegare tutti i file necessari attraverso la scheda esperto:
- i due file js scaricati da Dynamic Drive
- le (eventuali) immagini da utilizzare per i pulsanti
- il file altocontrasto.css
Spero di non aver dimenticato nulla.
Ci sarebbero tre errori di validazione nel codice che andrebbero sistemati ... appena trovo un po' di tempo li guardo ... se qualcuno ha qualche idea ...
-
Stesil mi sono appena accordo di essere stato un cafone, o meglio di non aver dato invia post :lol:
GRAZIE MILLEEEE
-
ho inserito il tutto come stesil ha descritto, per ingrandire con la lettera A+ e A- funziona benissimo eccezionale, mentre l'alto contrasto, modifica sostanzialmente il sito, cioè sposta tutte le scritte sul lato sinistro del monitor e le immagini sul lato destro, chiedo con cortesia se qualcuno può aiutarmi, premetto che sono inesperto, il sito lo gestisco per una scuola. Grazie
-
Ciao,
quale versione di ws stai utilizzando?
E' possibile inoltre che debbano essere personalizzate alcune regole di stile del file altocontrasto.css. Un link al sito sarebbe utile.
-
la versione è la 10, ho seguito le tue istruzioni, con l'ingrandimento dei caratteri è andata bene mentre per l'alto contrasto no. Poi una volta cliccato alto contrasto non si riesce più a tornare indietro. mi puoi aiutare, premetto che non sono esperto. grazie
-
Il mio esempio è stato fatto con la versione 9.
Dammi un po' di tempo e proviamo anche con la 10, sperando di riuscirci.
-
grazie
-
Ho rimontato tutto sulla versione 10 seguendo passo passo le istruzioni che avevo scritto e che non ricordavo più :)
http://stesil.altervista.org/evo10/accessibile/index.html (http://stesil.altervista.org/evo10/accessibile/index.html)
Funziona tutto come nella 9. La versione "alto contrasto" non rispetta volutamente il layout originale del sito: i contenuti vengono linearizzati e si perdono tutte le formattazioni originali che vengono sostituite da quelle poche presenti nel file altocontrasto.css.
Come avevo già scritto qui:
Per ottenere la versione alto contrasto sono stati "eliminati" con js gli stili inline e i file css generati da evo9 che interferivano con la linearizzazione dei contenuti. Il nuovo CSS per l'alto contrasto a dire il vero è molto scarno, ma è valido per tutte le pagine del sito: contiene solo alcune regole per i link, il body, le tabelle .... è da personalizzare e sicuramente non è completo ... ma questo è un lavoro che può essere fatto solo avendo ben presente il sito a cui si riferisce.
-
A quasto punto andrebbe strutturato un minimo il file di altocontrasto, sarebbe utile almeno settare le tabelle, che se non ricordo male nel file dell'alto contrasto non esistono.
ti dò materiale su cui stuzzicare la tua fantasia stesil :Dahahahah
-
Non capisco nè il tono nè il motivo del tuo intervento.
Comunque ti sbagli, il css per le tabelle c'era nell'esempio vecchio e c'è in quello nuovo.
-
scusa Stesil se ti assillo, ho visto l'esempio funziona correttamente, mentre a me scompaiono tutti i pulsati, e non riesco più a tornare indietro. Nell'esempio ho notato che a te i pulsanti sia per ingrandire che per ridurre i caratteri, e le tre scritte default text, alto contrasto e default style rimangono, sempre al loro posto, mentre a me non accade così, e non si torna più indietro.
puoi aiutarmi.
-
Ti aiuto volentieri, ma ho bisogno di un link per capire perché non funziona come dovrebbe.
-
grazie sei molto gentile, che link ti debbo fornire, il sito è www.icomprensivo2roseto,gov.it (http://www.icomprensivo2roseto,gov.it)
-
scusa stesil, ora funziona sbagliavo nel posizionare i pulsanti fuori dal frame centrale, li posizionavo hai bordi. Ti chiedo un'ulteriore cortesia, ho provato a modificare la seguente stringa, vorrei inserirci due pulsati uno per l'alto contrasto e uno per il ritorno alla home, ma non funziona dove sbaglio? poi la scritta Default text a cosa serve grazie.
<a href="javascript:cancellacookie(); "checked="checkd"><img scr="home1.jpg" alt = "torna alla home page"/></a>
-
Stesil ti chiedo scusa, ero al lavoro e un collega mia aveva appena fatto diventare così >:( >:( >:(
Ma come posso fare per evitare che mi faccia fuori lo stile della pagina? Devo evitare la disattivazione del file inline?
per farmi perdonare
1) a - riporta allo stile predefinito
2) a= - riporta alla grandezza del testo predefinita
3) acon - va alla modalità alto contrasto
-
ho provato a modificare la seguente stringa, vorrei inserirci due pulsati uno per l'alto contrasto e uno per il ritorno alla home, ma non funziona dove sbaglio? poi la scritta Default text a cosa serve grazie.
<a href="javascript:cancellacookie(); "checked="checkd"><img scr="home1.jpg" alt = "torna alla home page"/></a>
Il link "Default text" serve per ripristinare le dimensioni originali dei font. Il link "Default style" serve per ripristinare il layout originario.
Trovo improprio chiamarlo "Torna alla home".
Se vuoi inserire un'immagine al posto della scritta "Default style" devi usare questo codice:
Only registered users can see contents. Please click here to Register or Login.
Nel tuo codice c'è un refuso
<img scr="home1.jpg" alt = "torna alla home page"/>
e comunque, oltre al fatto che non c'entra con l'effettiva azione del click, l'immagine utilizzata è troppo grande (225x225)... lì non riuscirai mai a vederla! Puoi ridimensionarla anche utilizzando gli attributi width e height nel tag img.
Ti segnalo anche un errore js dovuto alla mancanza di un file drag.js nella root del sito (non so a cosa ti serva).
-
grazie provo immediatamente, scusa che cos'è il file drag.js?
-
Ehm... lo hai messo tu! :)
Lo trovi in un oggetto html della home, quello con il link al sito magellanopa
<h1> Staff-scuola comunica </h1>
L'Agenzia di Stato "Bussola della trasparenza Web", in base ai nuovi adempimenti D.Lgs.33\2013, dichiara il sito www.icomprensivo2roseto.gov.it CONFORME AGLI INDICATORI DELLA TRASPARENZA con un punteggio di 67\67<br> classificando il sito "I.C.ROSETO 2" al primo posto.
<br>
<script language="javascript" src="drag.js"></script>
[...]
<script language="javascript">
new dragElement('i1');
new dragElement('i2');
new dragElement('i3');
new dragElement('i4');
</script>
-
no questo link, mi è stato dato direttamente da "bussola della trasparenza", serve solo alle verifiche che si rispetti il D.Lgs.33\13
file inutile?
-
ho inserito adesso un simbolo 32x32, ho provato ad inserirlo adesso compare un rettangolo con il testo ma non il simbolo, l'immagine lo caricata da esportazione -carica un file sul server. Ma l'immagine non appare. grazie.
<a href="javascript:cancellacookie();" checked=checked><img src="home3.gif" alt="testo alternativo"/></a>
-
si funziona bene, so che sto mettendo a dura prova la tua cortesia e pazienza, ma l'inesperienza in me è sovrana, può andar bene così per inserire anche un pulsante alto contrasto? grazie
[/size]< href ="javascript:chooseStyle('alto-contrasto', 60); altocontrasto()" >< img src="alto1.jpg" alt="testo alternativo"/></a> [/size]
-
no questo link, mi è stato dato direttamente da "bussola della trasparenza", serve solo alle verifiche che si rispetti il D.Lgs.33\13
file inutile?
No guarda che ti ricordi male... quel javascript non può essere legato al link della bussola della trasparenza. Probabilmente è una prova che avevi fatto prima... togli le righe in rosso e l'errore scompare.
può andar bene così per inserire anche un pulsante alto contrasto?
Il codice va bene. Ti ripeto che l'immagine della home che hai inserito è fuorviante perché quel link non porta alla home. Ovviamente al posto di "testo alternativo" va inserito l'apposito testo che descrive l'immagine, utile per i non vedenti.
Edit: mi sono accorta ora che manca una a nel tuo codice!!
Only registered users can see contents. Please click here to Register or Login.
-
scusa, ma default text, anche cliccando non accade nulla, poi alto contrasto funziona, e dove ho inserito il simbolo home torna alla home del sito. se hai un attimo di tempo, puoi osservare come ha fatto la scuola www.liceosaffo.gov.it (http://www.liceosaffo.gov.it). il link di prima per alto contrasto per il pulsantino non funziona, non fa niente utilizzo la scritta, hai ragione è più comprensibile. grazie per la cortesia
-
@luigi621
Mentre aspetti la risposta di stesil, mi intrometto :)
Dici di essere inesperto e continui a non ascoltare chi, sicuramente, è più esperto di te.
Il lavoro che ha fatto stesil su WS è complesso e si può considerare un ottimo inizio, un'ottima dritta... chiamala come ti pare.
Sul "tavolo" ci sono tutti gli ingredienti per fare quello che è stato fatto nell'ultimo link che hai postato, anche se il sito non è fatto con WS.
Per fare una buona torta, bisogna "sporcarsi" un po' le mani :)
Un consiglio: prima o poi WS ti starà "stretto" nel gestire il sito della scuola, quindi mi orienterei su un CMS
-
che cos'è un CSM? con il ws fino ad oggi è stato semplice gestire un sito, adesso iniziano le difficoltà sto cercando di apprendere in fretta, commettendo di sicuro errori su orrori. chiedo solo un po di pazienza.
-
che cos'è un CSM?
CMS: http://it.wikipedia.org/wiki/Content_Management_System (http://it.wikipedia.org/wiki/Content_Management_System)
-
Grazie.
Ci sto provando a modificare alto contrasto, spero di riuscirci.
Grazie per l'aiuto, se ho dubbi comunque busso..