Concepção de um site tanto para suporte de script javascript e não apoio
-
18-09-2019 - |
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?
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