Diseñar un sitio web, tanto para soporte javascript guión y no ayuda

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

Pregunta

Bien sé que es importante para su sitio web para trabajar bien con JavaScript desactivado.

En mi opinión una manera de empezar a pensar acerca de cómo diseñar este tipo de sitios web es detectar javascript en la página web y si no está habilitado redirigir a otra versión del sitio web que hace código no javascript y trabaja con HTML puro (como Gmail)

Otro método que tengo en mente es que, por ejemplo, pensar en un X (Cerrar) en un cuadro de diálogo en una página web. ¿Qué pasa si pulsando la X sin ningún Javascript plomo interferencia para el envío de una solicitud al servidor y en el lado del servidor que ocultar ese diálogo la próxima vez que se renderiza la página, y también nos une una función javascript onclick del enlace y en caso de el Javascript activado se ocultará el diálogo de forma instantánea.

¿Qué opinas de esto? ¿Cómo diseñaría un sitio web para apoyar tanto?

¿Fue útil?

Solución

Una manera de lidiar con esto es:

  • En primer lugar, crear el sitio, sin ningún tipo de javascript
  • A continuación, cuando cada obra, añaden mejoras javascript, si procede

De esta manera, si JS está desactivada, la "primera" versión del sitio todavía funciona.

Se puede hacer exactamente lo mismo con CSS, como es natural - no hay ni siquiera uno " CSS Día Desnudo "cada día, mostrando los sitios web que parecen sin CSS ^^


Un ejemplo?

  • Tiene un formulario HTML estándar, que publica los datos a su servidor cuando se presentó, y la re-creación de la página por el servidor muestra un mensaje como "gracias por subscriving"
  • A continuación, añadir un poco de JS + Ajax cosas: en lugar de recargar toda la página, mientras que enviar el formulario, usted hace una petición Ajax, que sólo envía los datos; y, a cambio, se muestra "gracias por suscribirse" sin tener que recargar la página

En este caso, si javascript está deshabilitado, la primera forma "estándar" de hacer las cosas aún funciona.

Este es (parte de) lo que se llama progresiva mejora

Otros consejos

El método usual es lo que se llama progresiva mejora .

Básicamente se toma una página web HTML sencilla, con formas regulares.
La siguiente mejora es CSS - hacer que se vea bien
. A continuación, puede mejorar aún más con Javascript -. Puede añadir o eliminar elementos, añadir efectos y así sucesivamente

El HTML básico es siempre allí para navegadores antiguos (o aquellos con bloqueadores de secuencia de comandos, por ejemplo).

Por ejemplo, un formulario para publicar un comentario podría tener este aspecto: 

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

A continuación, puede mejorar con javascript para hacerlo AJAXy 

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

Lo ideal sería que la devolución de llamada AJAX debe usar el mismo código como post-comment.php -. Ya sea mediante una llamada al mismo archivo o vía include, entonces usted no tiene que duplicar el código

En términos, no es importante para hacer su trabajo en el sitio con JavaScript desactivado. Las personas que incapacitan JavaScript son las personas que quieren cortar los insectos en su sitio, que no se merecen para navegar correctamente. No pierda sus esfuerzos con ellos. Todo el mundo sabe que la Web es unsurfable sin JavaScript.

Lo único que hay que tener cuidado es acerca de sus formas:! No filtros no volver a confiar en JavaScript, siempre el filtro de nuevo en el lado del servidor, SIEMPRE

Uso mejora progresiva, estudio jQuery para entenderlo. Se necesita algo de tiempo hasta que obtenga su cabeza alrededor de ella. Por ejemplo su idea:

  

para detectar javascript en la página de inicio   y si no está habilitado para redirigir   otra versión del sitio web que hace   No código javascript y trabaja con   html puro

¿cómo detectar si javascript está deshabilitado? no con javascript, obivously ...

que está pensando al revés: la versión más básica tiene que ser la versión por defecto, y luego, si detecta capacidades más avanzadas, puede utilizarlos

.

Trate de evitar versiones separadas para diferentes Bowsers / capacidades durante tanto tiempo como sea posible. Es mucho trabajo para mantener todas las versiones sincronizados y actualizados-do.

Algunas buenas Recursos para empezar:

La mejor manera es diseñar una página que funciona adecuadamente sin JS. A continuación, agregue un bloque

scroll top