La progettazione di un sito web sia per il supporto javascript sceneggiatura e non il supporto

StackOverflow https://stackoverflow.com/questions/1284899

Domanda

Ok lo so che è importante per il tuo sito per lavorare bene con javascript disabilitato.

A mio parere un modo per iniziare a pensare a come progettare tali siti web è quello di individuare javascript alla homepage e se non è abilitato reindirizzare ad un'altra versione del sito che fa codice non javascript e funziona con puro html (come Gmail)

Un altro metodo che ho in mente è che, per esempio, pensare a una X (pulsante di chiusura) in una finestra di dialogo su una pagina web. Che cosa succede se si preme il X senza alcun javascript piombo interferenza all'invio di una richiesta al server e lato server ci nascondiamo che il dialogo prossima volta ci sono il rendering della pagina, e anche noi associare una funzione javascript per onclick del collegamento e, in caso di il javascript abilitato sarà nascondere la finestra immediatamente.

Cosa ne pensi di questo? Come si progetta un sito web per supportare sia?

È stato utile?

Soluzione

Un modo per affrontare questo è quello di:

  • In primo luogo, creare il sito, senza alcun javascript
  • Poi, quando ogni opere, aggiungere javascript miglioramenti dove adatto

In questo modo, se JS è disattivato, la versione "prima" del sito funziona ancora.

Si può fare esattamente la stessa cosa con i CSS, naturalmente - c'è anche un " CSS Nudo Giorno "ogni giorno, che mostra quali siti web sembrano senza CSS ^^


Un esempio?

  • Si dispone di un modulo HTML standard, che i posti dati al server quando presentate, e la ri-creazione della pagina da parte del server visualizza un messaggio come "grazie per subscriving"
  • È quindi possibile aggiungere un po 'di JS + Ajax cose: invece di ricaricare l'intera pagina, mentre l'invio del modulo, si fa una richiesta Ajax, che solo inviare i dati; e, in cambio, viene visualizzato "grazie per la sottoscrizione" senza ricaricare la pagina

In questo caso, se javascript è disabilitato, il primo modo "standard" di fare le cose funziona ancora.

Questa è (parte di) quello che viene chiamato Progressive enhancement

Altri suggerimenti

Il metodo usuale è quello che è chiamato progressivo miglioramento .

In sostanza si prende un semplice sito web HTML, con forme regolari.
Il miglioramento successivo è CSS - si fanno sembrare buona qualità. Poi si può migliorare ulteriormente con Javascript -. È possibile aggiungere o rimuovere gli elementi, aggiungere effetti e così via

L'HTML di base è sempre lì per i vecchi browser (o quelli con bloccanti di script, per esempio).

Per esempio, un modulo per inviare un commento potrebbe essere simile a questo: 

<form action="post-comment.php" method="post" id="myForm">
<input type="text" name="comment">
</form>

Poi si può migliorare con javascript per renderlo AJAXy 

$('#myForm').submit(...);

Idealmente la richiamata AJAX dovrebbe utilizzare lo stesso codice come post-comment.php -. O chiamando lo stesso file o via include, allora non c'è bisogno di duplicare il codice

In termini, non è importante per rendere il lavoro del sito con JavaScript disabilitato. Le persone che disattivare JavaScript sono persone che vogliono incidere bug nel vostro sito, non meritano di navigare in modo corretto. Non sprecate i vostri sforzi con loro. Tutti conoscono il Web è unsurfable senza JavaScript.

L'unica cosa che dovete fare attenzione è sulle vostre forme: fare filtri non sempre fiducia in JavaScript, Filtro sempre di nuovo sul lato server, SEMPRE

Usa progressive enhancement, studio jquery per capirlo. Ci vuole del tempo fino ad ottenere la testa intorno ad esso. Ad esempio la tua idea:

  

per rilevare javascript alla homepage   e se non è abilitato a reindirizzare   un'altra versione del sito che fa   Non codice javascript e funziona con   puro html

come si dovrebbe rilevare se JavaScript è disabilitato? Non con javascript, obivously ...

stai pensando alla rovescia: la più semplice versione deve essere la versione di default, e poi, se si rileva funzionalità più avanzate, si possono usare

.

Cercate di evitare di versioni separate per i diversi Bowsers / capacità a lungo possibile. E 'molto lavoro per mantenere tutte le versioni sincronizzati e-do-data.

Alcune buone le risorse per ottenere iniziare:

Il modo migliore è quello di progettare una pagina che funziona in modo adeguato, senza JS. Quindi aggiungere un

scroll top