Concepção de um site tanto para suporte de script javascript e não apoio

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

Pergunta

Ok eu sei que é importante para o seu site para funcionar bem com o javascript desabilitado.

Na minha opinião uma maneira de começar a pensar sobre como projetar esses sites é detectar javascript na página inicial e se ele não está habilitado redirecionamento para outra versão do site que não faz código javascript e trabalha com html puro (como o Gmail)

Outro método que eu tenho em mente é que, por exemplo, pensar em um X (botão Fechar) em uma caixa de diálogo em uma página web. E se pressionando o X sem chumbo interferência javascript para enviar um pedido para o servidor e no lado do servidor que esconder isso de diálogo próxima vez que estão prestando a página, e também uma função javascript que se ligam a onclick do link e, em caso de o JavaScript habilitado ele vai esconder o diálogo instantaneamente.

O que você acha disso? Como você criar um site para suportar tanto?

Foi útil?

Solução

Uma maneira de lidar com isso é:

  • Em primeiro lugar, criar o site, sem qualquer javascript
  • Então, quando cada obra, adicionar melhorias javascript onde apropriado

Desta forma, se JS está desativado, a "primeira" versão do site ainda funciona.

Você pode fazer exatamente o mesmo com CSS, naturalmente - há até mesmo um " CSS Dia Nu "a cada dia, mostrando o que sites parecer sem CSS ^^


Um exemplo?

  • Você tem um formulário HTML padrão, que envia os dados para o servidor quando submetidos, e a recriação da página pelo servidor exibe uma mensagem como "obrigado por subscriving"
  • Em seguida, adicione algumas coisas JS + Ajax: em vez de recarregar a página inteira ao submeter o formulário, você faz uma solicitação do Ajax, que só enviar os dados; e, em troca, ele exibe "Agradecemos sua inscrição" sem recarregar a página

Neste caso, se o javascript está desativado, a primeira maneira "padrão" de fazer as coisas ainda funciona.

Este é (parte do) o que é chamado progressiva melhoria

Outras dicas

O método usual é o que é chamado progressiva melhoria .

Basicamente você ter um site HTML simples, com formas regulares.
O próximo aprimoramento é CSS - você faz isso parecer bom
. Depois, você pode melhorá-lo ainda mais com Javascript -. Você pode adicionar ou elementos remover, adicionar efeitos e assim por diante

O HTML básico é sempre lá para navegadores antigos (ou aqueles com bloqueadores de script, por exemplo).

Por exemplo, um formulário para postar um comentário pode ter esta aparência: 

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

Depois, você pode melhorá-lo com javascript para torná-lo AJAXy 

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

Idealmente, o callback AJAX deve usar o mesmo código de pós-comment.php -., Quer chamando o mesmo arquivo ou via include, então você não tem que código duplicado

Em termos, não é importante para fazer seu trabalho site com JavaScript desabilitado. As pessoas que desativar o JavaScript são pessoas que querem cortar erros em seu site, eles não merecem para navegar corretamente. Não desperdice seus esforços com eles. Todo mundo sabe que a Web é unsurfable sem JavaScript.

A única coisa que você tem que ter cuidado é sobre suas formas: Nunca filtros de confiança em JavaScript, filtro Sempre-lo novamente no lado do servidor, SEMPRE

Use Progressive Enhancement, estudo jquery para compreendê-lo. Leva algum tempo até chegar a sua cabeça em torno dela. Por exemplo a sua ideia:

para detectar javascript na página inicial e se ele não está habilitado redirecionamento para outra versão do site que faz Não código javascript e trabalha com puro html

como você detectar se o javascript está desativado? não com javascript, obivously ...

você está pensando da maneira errada rodada:. A versão mais básica tem que ser a versão padrão, e em seguida, se você detectar capacidades mais avançadas, você pode usá-los

Tente evitar versões separadas para diferentes Bowsers / capacidades por tanto tempo quanto puder. É muito trabalho para manter todas as versões em sincronia e up-do-data.

Alguns bons ressources para você começar:

A melhor maneira é criar uma página que funciona adequadamente sem JS. Em seguida, adicione um bloco

scroll top