Разработка веб-сайта для поддержки сценариев JavaScript и не поддержки

Хорошо, я знаю, что важно, чтобы ваш сайт работал нормально с отключенным JavaScript.

По моему мнению, один из способов начать думать о том, как создавать такие сайты, - это обнаруживать javascript на домашней странице и, если он не включен, перенаправить на другую версию сайта, которая не содержит код javascript и работает с чистым html (например, gmail).

Другой метод, который я имею в виду, это, например, подумать о X (кнопка закрытия) в диалоговом окне на веб-странице. Что если нажатие X без какого-либо вмешательства javascript приведет к отправке запроса на сервер, и на стороне сервера мы скрываем это диалоговое окно при следующем отображении страницы, а также привязываем функцию javascript к щелчку ссылки и в случае включенный javascript он мгновенно скроет диалог.

Что ты думаешь об этом? Как бы вы разработали веб-сайт для поддержки обоих?

 Justin Johnson16 авг. 2009 г., 21:31
Это важно, только если проект требует этого. Для многих сложных проектов поддержка сред noscript не возможна, так как это увеличит вдвое время разработки / контроля качества и необходимый бюджет.
 EBAG17 авг. 2009 г., 11:42
согласен, забавно то, что stackoverflow не работает без JavaScript! Я не могу принять ответ или добавить комментарий без него.

Ответы на вопрос(6)

не важно, чтобы ваш сайт работал с отключенным JavaScript. Люди, которые отключают JavaScript, - это люди, которые хотят взламывать ошибки на вашем сайте, они не заслуживают правильной навигации по нему. Не тратьте свои усилия с ними. Все знают, что Интернет невозможно использовать без JavaScript.

Единственное, что вы должны быть осторожны, это о ваших формах: никогда не доверяйте фильтрам в JavaScript,Всегда фильтруйте его снова на стороне сервера, ВСЕГДА!

прогрессивное улучшение.

В основном вы берете простой HTML-сайт с регулярными формами.
Следующим улучшением является CSS - вы делаете его хорошо выглядящим.
Затем вы можете улучшить его с помощью Javascript - вы можете добавлять или удалять элементы, добавлять эффекты и так далее.

Базовый HTML всегда есть для старых браузеров (или для браузеров, например, с блокировщиками скриптов).

Например, форма для отправки комментария может выглядеть так:

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

Затем вы можете улучшить его с помощью JavaScript, чтобы сделать его AJAXy

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

В идеале обратный вызов AJAX должен использовать тот же код, что и post-comment.php - либо путем вызова того же файла, либо черезincludeтогда вам не нужно дублировать код.

 Pascal MARTIN16 авг. 2009 г., 20:02
блин, ты был быстрее меня ^^ (но я написал больше :-p) хорошая работа!
Решение Вопроса

Во-первых, создать сайт, без каких-либо JavaScriptЗатем, когда все работает, добавьте улучшения javascript, где это необходимо.

Таким образом, если JS отключен, «первая» версия сайта по-прежнему работает.

Вы можете сделать то же самое с CSS, естественно, есть даже один "CSS голый день"каждый день показываю, как выглядят сайты без CSS ^^


Один пример?

У вас есть стандартная HTML-форма, которая отправляет данные на ваш сервер при отправке, и при повторном создании страницы сервером появляется сообщение типа «спасибо за подписку»Затем вы добавляете некоторые материалы JS + Ajax: вместо перезагрузки всей страницы при отправке формы вы делаете запрос Ajax, который только отправляет данные; и, в свою очередь, он отображает «спасибо за подписку» без перезагрузки страницы

В этом случае, если javascript отключен, первый «стандартный» способ все еще работает.

Это (часть) того, что называетсяПрогрессивное улучшение

 Pascal MARTIN16 авг. 2009 г., 22:24
Так что правда ... грустно :-( (ну, давление и трудно поддерживать прогрессивное улучшение часть)
 Al.16 авг. 2009 г., 22:22
Настоящая хитрость заключается в поддержании этого прогрессивного улучшения, когда на вас оказывают давление со всех сторон, чтобы быстро обновить сайт с помощью сумасшедших новых функций. Придерживаться ваших орудий. Это путь вперед.

прогрессивное улучшение, Я бы пошел на это, сначала спроектировав сайт без JavaScript, и, как только он заработал, начал добавлять свои события JavaScript через такую библиотеку, как jQuery, чтобы поведение сайта полностью отличалось от представления. Таким образом, вы можете обеспечить более высокий уровень функциональности и полировки для тех, у кого JavaScript включен в браузерах, и тех, кто этого не делает.

JQuery чтобы понять это. Это займет некоторое время, пока вы не обдумаете это. Например, ваша идея:

обнаружить javascript на домашней странице и, если он не включен, перенаправить на другую версию сайта, которая не содержит код javascript и работает с чистым html

Как бы вы обнаружили, если JavaScript отключен? не с javascript, явно ...

вы думаете об обратном: самая базовая версия должна быть версией по умолчанию, а затем, если вы обнаружите более продвинутые возможности, вы можете использовать их.

Старайтесь избегать отдельных версий для разных боузеров / возможностей как можно дольше. Это так много работы, чтобы все версии были синхронизированы и обновлены.

Несколько хороших ресурсов для начала:

Понимание прогрессивного улучшенияПрогрессивное улучшение с помощью JavaScriptПрогрессивное улучшение на основе тестов

которая будет работать адекватно без JS. Затем добавьте блок <script> внизу раздела <body> с кодом, подобным следующему:

window.onload = function() {
    // Do DOM manipulations to add JS functionality here.  For instance...
    document.getElementById('someInputField').onchange = function() {
        // Do stuff here that you can't do in HTML, like on-the-fly validation
    }
}

ИзучитеJQuery Примеры. Они показывают много таких вещей. Это называется "ненавязчивый JavaScript". Google для этого, чтобы найти больше примеров.

РЕДАКТИРОВАТЬ: JQuery версия выше:

$(document).ready(function() {
    // Do DOM manipulations to add JS functionality here.  For instance...
    $('#someInputField').change(function() {
        // Do stuff here that you can't do in HTML, like on-the-fly validation
   });
});

Я добавил это только для того, чтобы показать меньшую детализацию jQuery по сравнению со стандартными DOM-манипуляциями. Существует небольшая разница между window.onload и document.ready, обсуждаемая в документах и руководствах по jQuery.

Ваш ответ на вопрос