Degradazione graduale

“Degrado progressivo” è un principio importante del web design. Ciò significa che quando si incorporano funzionalità progettate per sfruttare le funzionalità più recenti e di maggior successo dei browser più recenti, si deve fare in modo che i browser più vecchi, e browser consentendo agli utenti di disabilitare caratteristiche speciali, può passare a un metodo. questo ancora consente l’accesso ai contenuti di base del sito, ma potrebbe non essere elegante nell’aspetto.

Quasi tutte le nuove funzionalità aggiunte al web sono stati creati per consentire a un degrado progressivo, iniziando con l’aggiunta del tag <IMG> per aggiungere immagini a un sito web, mentre l’ex di testo, che contiene un attributo ALT per fornire un’alternativa testuale per i browser non grafici.

NOTA: Sarebbe stato ancora più grazioso se il tag IMG fosse stato definito come un elemento contenitore, con il contenuto alternativo tra <IMG> e </ IMG>. Ciò avrebbe causato l’utilizzo automatico del contenuto alternativo nei browser più vecchi che non includevano IMG, pur consentendo a questo contenuto di includere tag di markup, cosa che non è possibile nell’attributo ALT. Ma ora è acqua sotto il ponte.

Le versioni più recenti come <APPLET> e <OBJECT> consentono di fornire un degrado graduale utilizzando contenuti alternativi tra i tag di apertura e chiusura dell’elemento. Nulla tra <APPLET> e </ APPLET> (diversi dai parametri di applet stessa) saranno ignorati da un browser che supporti Java con Java abilitato, ma saranno utilizzati al posto del applet un browser che non capisce. Java o disabilitato. Ciò consente allo sviluppatore del sito di fornire immagini statiche, testo o collegamenti alternativi per sostituire le informazioni presentate come applet agli utenti che la supportano.

Ecco un esempio di applet codificata per il progressivo degrado:

<APPLET CODE = “WaveEffect” align = center border = 0 codebase = “http://www.example.net/applets/” width = 200 height = 200 “>
<PARAM NAME = image VALUE = “enternow.gif”>
<PARAM NAME = HREF VALUE = “home.html”>
<A HREF=”home.html”> <IMG SRC = “enternow.gif” width = 200 height = 200 alt = “Entrez maintenant sur mon site.”> </A>
</ APPLET>

Un utente che supporti Java vedere il risultato di un applet “WaveEffect”, che probabilmente mostrerà un grafico con effetti delle onde animati e di fornire un modo per accedere all’URL fornito nel relativo parametro “href”. Ma un utente non-Java non avrebbe modo di vedere ciò che avrebbe dovuto essere lì o avanzare sul sito se fosse l’unica tecnica di navigazione ad eccezione del contenuto alternativo. Questo contenuto consiste in un normale tag IMG statico che presenta lo stesso grafico in modo non animato, con un collegamento ipertestuale alla stessa pagina a cui l’applet lascerebbe andare l’utente. E, nel caso di browser di testo, il testo ALT con l’immagine offre un altro livello di progressivo degrado.

In alcuni casi, quando esistono diversi modi per ottenere lo stesso effetto e l’insieme di browser che supportano l’uno o l’altro è leggermente diverso, è possibile ottenere la massima compatibilità disponendo di più livelli di strutture nidificate che possono essere degradato con eleganza. come un APPLET in un EMBED in un OGGETTO.

Esistono anche alcuni tag speciali che consentono di includere il contenuto utilizzato solo quando le funzionalità specifiche non sono disponibili o sono disabilitate. Ad esempio, gli oggetti NOSCRIPT appaiono solo quando JavaScript non è supportato o disabilitato. Questo può essere utile per fornire una navigazione alternativa nei siti in cui i controlli principali sono implementati in JavaScript. Allo stesso modo, gli elementi NOEMBED vengono utilizzati solo quando EMBED non è supportato.

Ci vuole solo un po ‘più di lavoro per farlo correttamente, e aggiunge molto all’accessibilità, flessibilità e indicizzazione dei motori di ricerca delle tue pagine.

Popup JavaScript con grazia degradante
Un effetto comune utilizzato su molte pagine è un documento collegato che appare come una piccola finestra pop-up creata da JavaScript. Se si utilizza questo effetto, dovrebbe essere moderato, se non del tutto, perché può essere fastidioso per molti utenti. Tuttavia, ci sono casi in cui ciò è utile, ad esempio per far apparire dei documenti di riferimento che aiutano qualcuno a compilare un modulo web, senza dover lasciare la pagina con il modulo (e magari non essere in grado di restituire se scade perdendo i dati che hanno inserito parzialmente).

Gli sviluppatori spesso lo fanno con un URL javascript:. Questo lascia molto a desiderare in termini di degrado progressivo, perché i browser non-JavaScript non sanno cosa fare con un tale collegamento e non fare nulla o non genera un errore. Inoltre, javascript: gli URL non sono realmente conformi agli standard. Non conosco alcuna specifica formale per questa build e spesso contiene caratteri che sono illegali da includere (non sfuggiti) negli URL a seconda delle specifiche (come gli spazi).

Fortunatamente, c’è un modo migliore. Invece <A HREF=”javascript:YourPopupFunction(‘somefile.html’)”>, utilizzare <A HREF=”somefile.html” onClick=”YourPopupFunction(‘somefile.html’); tornare false”>. (Suppongo si è impostata la funzione di YourPopupFunction JavaScript da qualche parte nel documento.) L’attributo onclick contiene il codice che viene eseguito (sui browser supportati) quando il link viene cliccato, e il ritorno finale risultati falsi nella interrompere il browser dopo questa operazione (invece di seguire il normale collegamento ipertestuale). Quindi, ha esattamente lo stesso effetto del link javascript: (Si noti che il codice in onClick non inizia con “javascript:”. Perché non è nella forma di un URL) Ma per i browser non JavaScript, onclick viene ignorato e il monitoraggio di collegamento normale. Pertanto, tutti gli utenti possono vedere il documento a cui si sta collegando.

NOTA: Dopo aver scritto quanto sopra, ho scoperto che alcuni browser più anziani con implementazioni JavaScript prime non supportano il ritorno corretto falso e, infine, creare sia il collegamento di scelta rapida, e la “ordinaria” . È possibile evitare questo utilizzando <a href = target “somefile.html” = “nomeacaso” onclick = “window.open newwin = ( ”, ‘nomeacaso’, ‘width = 150, height = 150, ridimensionabile = 1’) ; “>, che apre una finestra vuota denominata” qualcosa “e quindi consente al link regolare di puntarlo. I browser diversi da JavaScript aprono semplicemente una nuova finestra regolare denominata “qualcosa” o ignorano la destinazione e aprono la nuova pagina nella finestra originale. Tuttavia, più di recente, ho scoperto che il browser Mozilla, quando è impostato per ignorare le nuove finestre si aprono i tentativi in ​​questo caso si aprirà la finestra pop-up, quindi aprire la destinazione del link nella finestra origine, lasciando la finestra inutilmente aperta. . Quindi, tutto sommato, l’esempio di codice precedente è probabilmente il migliore.

Queste tecniche possono essere utilizzate anche in altri casi in cui si desidera che un collegamento esegua codice JavaScript, ad esempio un collegamento che imita il pulsante “Indietro” del browser con history.back (). Ma pensa attentamente se hai davvero bisogno di usare una funzione del genere. I collegamenti potrebbero rendere più difficile per gli utenti, ad esempio, tornare nella cronologia anziché spostarsi su un’altra pagina come normalmente avviene con i collegamenti.

SUGGERIMENTO: utilizzare sempre un attributo HREF significativo nei tuoi link, e non un attributo “fittizio”, anche se lo scopo principale del collegamento è quello di innescare uno script.

Ovviamente, non utilizzare la tecnica purtroppo diffusa di garantire che i collegamenti ipertestuali sono associati con il valore fittizio HREF “#”; Non so chi ha inventato questo, ma sembra che sia stato implementato in questo modo, in alcuni strumenti di creazione che generano legami con sofisticate JavaScript e imitato in tutti i tipi di siti, anche codificati a mano. Questa è una cattiva idea – come ho mostrato sopra, si dovrebbe dare il riferimento un collegamento ipertestuale qualcosa di significativo che funziona anche se JavaScript è disabilitato – e, inoltre, dal momento che “#” non è non definita come un riferimento URL, viene interpretato da diverse versioni del browser in modo incoerente e può causare un salto nella parte superiore o inferiore della pagina corrente, o aggiungere un riferimento inutili pagina in più alla storia della sessione browser. Almeno se si deve utilizzare un file HREF fittizio, assicuratevi di terminare la stringa di comando JavaScript con “return false” per scoraggiare il browser a seguire il link fittizi.

Rollover Menu degradanti con grazia
Un altro effetto popolare è che un menu grafico rende la navigazione sul “rollover”, quando l’utente sposta il suo mouse sugli elementi, come “light” o il pulsante “inferiore” attualmente evidenziato o visualizzate più informazioni. sulla voce selezionata per aiutare l’utente a decidere se seguire il link.

Ci sono modi “graziosi” e “no grazia” per farlo. Metodi “no gentile” può portare al fallimento completo di navigazione per gli utenti che non supportano (o che hanno disabili) oggetti come Java, JavaScript e Shockwave (a seconda di come viene attuato il rollover) . D’altra parte, un’implementazione “elegante” lascia sito completamente navigabile, anche per i browser “minimo comune denominatore”, mentre l’aggiunta di ulteriori miglioramenti per coloro che li sostengono.

Qui di seguito troverete un codice di esempio per un effetto rollover degradante con grazia. Tuttavia, più che imparare codice specifico, è necessario conoscere l’atteggiamento generale dietro a questa tecnica e di altre tecniche degradanti nello sviluppo Web. Questo è quello di utilizzare una struttura solida e logica con semplici costrutti HTML e ampiamente supportato, quindi aggiungere le opzioni “fischiano”, come optional cura add-on che può essere ignorato dai browser non preso di . L’atteggiamento opposto, che crea siti non accessibili è quello di saltare il punto “del suono, logico, semplice” e realizzare gli effetti desiderati direttamente in un linguaggio avanzato (Java, Shockwave, ecc), che porta a un codice che non contiene neppure un collegamento HTML “normale” che i browser possono seguire senza eseguire “applet”, lo “script” o “in plug-“. Quindi, se gli autori decidono poi devono sostenere i browser “semplice”, finiscono per attaccare una serie di link di testo “alternativo” in navigazione “sofisticato”, che non sarebbe necessario se concepito il sito. un primo modo elegante.

Ecco il codice rollover “grazioso”: (Nota: in questo esempio, le versioni “normali” dei pulsanti di navigazione dovrebbero essere posizionate in item1_reg.gif, item2_reg.gif, ecc., Mentre le versioni “rollover” sono item1_over. gif, ecc. Tutte le immagini devono essere collocate in una sottodirectory denominata gfx / situata sotto la directory in cui si trova la pagina, e tutte le immagini hanno una dimensione di 250 x 50 pixel. Naturalmente è possibile modificare queste informazioni se necessario per il tuo sito.

<html>
<head>
<title>Sample Rollover Page</title>
<script language="JavaScript" type="text/javascript">
<!-- hide this script from non-javascript-enabled browsers
if (document.images) {
item1_reg = new Image(250, 50); item1_reg.src = 'gfx/item1_reg.gif';
item1_over = new Image(250, 50); item1_over.src = 'gfx/item1_over.gif';
item2_reg = new Image(250, 50); item2_reg.src = 'gfx/item2_reg.gif';
item2_over = new Image(250, 50); item2_over.src = 'gfx/item2_over.gif';
item3_reg = new Image(250, 50); item3_reg.src = 'gfx/item3_reg.gif';
item3_over = new Image(250, 50); item3_over.src = 'gfx/item3_over.gif';
item4_reg = new Image(250, 50); item4_reg.src = 'gfx/item4_reg.gif';
item4_over = new Image(250, 50); item4_over.src = 'gfx/item4_over.gif';
}
function rollover(id,name){
if (document.images) {document.images[id].src=eval(name+".src"); }
}
// stop hiding -->
</script>
<META http-equiv="Content-Script-Type" content="text/javascript">
</head>

<body>

<P ALIGN=CENTER>
<a href=”item1/” onmouseout=”rollover(‘item1′,’item1_reg’);return false;” onmouseover=”rollover(‘item1′,’item1_over’);return false;”><img name=”item1″ src=”gfx/item1_reg.gif” width=”250″ height=”50″ border=”0″ alt=”[Item 1]”></a>
<a href=”item2/” onmouseout=”rollover(‘item2′,’item2_reg’);return false;” onmouseover=”rollover(‘item2′,’item2_over’);return false;”><img name=”item2″ src=”gfx/item2_reg.gif” width=”250″ height=”50″ border=”0″ alt=”[Item 2]”></a>
<a href=”item3/” onmouseout=”rollover(‘item3′,’item3_reg’);return false;” onmouseover=”rollover(‘item3′,’item3_over’);return false;”><img name=”item3″ src=”gfx/item3_reg.gif” width=”250″ height=”50″ border=”0″ alt=”[Item 3]”></a>
<a href=”item4/” onmouseout=”rollover(‘item4′,’item4_reg’);return false;” onmouseover=”rollover(‘item4′,’item4_over’);return false;”><img name=”item4″ src=”gfx/item4_reg.gif” width=”250″ height=”50″ border=”0″ alt=”[Item 4]”></a>
</P>

</body>
</html>

Notare “if (document.images)”, che garantisce che solo i browser che utilizzano versioni JavaScript in grado di gestire le immagini (le prime implementazioni non potrebbero) lo proveranno, evitando così errori. E notare che le immagini di navigazione hanno attributi alt contenenti il ​​testo voce di menu (sostituire “Element 1”, “voce 2”, ecc dai nomi più significativi sulla base di sezioni del sito), in modo da che anche nei browser di testo l’utente può ancora navigare. E sì, lo so, puoi creare effetti al passaggio del mouse ancora più elegantemente usando fogli di stile a cascata, ma questa pagina è piuttosto vecchia. finché non ho riscritto in modo massivo tutto questo sito, conterrà elementi piuttosto obsoleti.

Se si lascia un editor o un programma di utilità di generare “rollover”, assicurarsi che utilizza una tecnica come questa, così come gli attributi del caso ALT nelle immagini (a mano, se necessario, se il programma non ti dà un modo per farlo).

Moduli lato client e lato server
Se si dispone di una forma che è cose utili che utilizzano funzioni JavaScript, è sempre possibile lasciare il degrado con garbo per gli utenti senza JavaScript, se si assicurarsi che sia soggetto ad una forma sul lato server di eseguire le stesse funzioni . ma non così efficiente come può essere fatto dal lato del cliente. Ad esempio, una pagina web in cui l’utente può inserire la quantità di risparmi l’anno e il tasso di interesse o cedere i dividendi attesi, e la quantità di risparmi sui costi delle pensioni possono essere realizzati in JavaScript, questo che consente un rapido calcolo. senza chiedere nulla da un server, ma non funziona affatto per gli utenti con JavaScript disabilitato. Questo può essere facilmente risolto avendo l’azione di invio (in assenza di JavaScript) diretta a uno script del server che esegue gli stessi calcoli. La funzione JavaScript “onsubmit” può terminare con “return false” per impedire l’attivazione dello script del server quando non è in uso.

Se il modulo deve essere inviato a un server, ma si desidera comunque utilizzare le funzioni JavaScript, ad esempio per convalidare o correggere la voce prima che venga inviata, è necessario duplicare gli stessi passaggi di convalida e correzione nel script del server in modo che non vengano riempiti. non saltato se JavaScript non è abilitato o disponibile. Ciò è importante per motivi di sicurezza, tuttavia, poiché un hacker malintenzionato potrebbe creare una versione del modulo che ignora la convalida JavaScript per tentare di immettere dati errati nel programma. Deve essere pronto a filtrare questi elementi. Alcune persone nei newsgroup fanno la domanda sbagliata e dicono “Come forzare il mio modulo a non mostrare o non inviare, per gli utenti il ​​cui JavaScript è disabilitato, perché la mia convalida JavaScript è essenziale per il loro bene operazione? ” Puoi provare a farlo assicurando che il pulsante di invio, o l’intero modulo, sia generato da JavaScript invece del normale HTML, in modo che non venga visualizzato affatto senza uno script sul lato client. Questo può essere facilmente sconfitto da hacker malintenzionati che possono visualizzare la fonte e ricostruire un modulo con un pulsante di invio non JavaScript, ma porre un problema di accessibilità a utenti più normali. È meglio progettare gli script del server in modo che funzionino bene con o senza JavaScript.

False idee
Se ti occupi di discussioni HTML sui newsgroup, probabilmente vedrai qualcuno dire che il “progressivo degrado” significa davvero rendere i siti chiari, noiosi e “il minimo comune denominatore”. È lontano dalla verità. Coloro che dicono di non capire veramente il degrado aggraziato o semplicemente cercano di cacciare i cosiddetti “puristi” piuttosto che discutere razionalmente della creazione del web. In effetti, il progressivo degrado non richiede l’uso di qualcosa di straordinario o bello, o di “scrivere per browser obsoleti”. Devi solo capire la struttura di tutti gli elementi che usi e conoscere e utilizzare correttamente le funzionalità integrate che consentono l’inserimento di contenuti alternativi accessibili agli utenti che non possono o non vogliono usare le fantasie. roba.

Degrado aggraziato vs. miglioramento graduale
I siti di sviluppo Web hanno recentemente discusso la distinzione tra “degrado progressivo” e “miglioramento incrementale”, che sono in realtà concetti abbastanza simili, ma esaminati da diversi punti di vista. Wikipedia ha pubblicato un articolo sul miglioramento progressivo e saggi sull’argomento sono stati pubblicati. La differenza fondamentale è che in “miglioramento progressivo” si inizia con un insieme di contenuti annotati semplice, logico e compatibile, quindi si sovrappongono funzionalità migliorate per i browser moderni, mentre inizia il “degrado progressivo”. da una completa funzionalità. , sito avanzato, un sacco di campane e fischietti, e assicurarsi che abbia anche contenuti a cui è possibile accedere se le funzionalità sofisticate non funzionano per un particolare utente. Secondo questo standard, lo stato mentale che ho sostenuto corrisponde più all’educazione fisica che a GD, anche se ho usato la terminologia GD perché l’altro termine non è stato inventato in quel momento. tempo. In ogni caso, se sono abilmente, pensosamente e ponderate, entrambe le tecniche dovrebbero portare a siti molto simili.

Sala della vergogna
Migliora il tuo sito consultando altri siti che mostrano, ad esempio, cosa non fare!

NOTA: l’inclusione di un sito nei miei collegamenti “Hall of Shame” non deve essere interpretata come un attacco personale al creatore del sito, che potrebbe essere una persona davvero eccezionale, o addirittura come un attacco al sito Web collegato il suo intero , che può essere una fonte di informazione e / o intrattenimento davvero grandiosa. Piuttosto, enfatizza le caratteristiche specifiche (intenzionali o accidentali) dei siti collegati che pongono problemi che potrebbero essere evitati attraverso un design migliore. Se trovi che uno dei tuoi siti è collegato qui, non essere offeso; migliorare il tuo sito in modo che devo rimuovere il link!

La Leicestershire & Rutland Chess Association ha implementato il suo sito in modo tale che la pagina principale sia sepolta più in profondità rispetto all’indice predefinito, che reindirizza alla posizione effettiva della homepage. Precedentemente, hanno usato un meta reindirizzamento e un link HTML di fallback, ma dopo una riprogettazione (perché i rimpasti quasi sempre degradano l’accessibilità rispetto a quello che è successo prima?), Usano un indice predefinito costituito da solo un reindirizzamento JavaScript, in modo che gli utenti non Javascript possano ricevere solo una pagina vuota.
Hira aveva una versione “Flash” e “Non Flash”, ma la versione “Non Flash” aveva ancora Flash! Ha appena saltato una “intro” di pagina in più che contiene ancora più Flash. Ora, non rende questo idiota, ma ha ancora un’introduzione Flash in cui l’opzione per ignorarlo è incorporato nella stessa Flash, il che significa che i browser che non supportano Flash avranno semplicemente una pagina vuota senza alcun modo di andare avanti. il sito. L’intro suona continuamente un tema musicale fastidioso, senza alcun modo di fermarlo.