Что такое прогрессивное улучшение?

Question

Джефф упомянул концепцию «Progressive Enhancement», когда говорил об использовании JQuery для написания стекового потока.

После быстрого Google я нашел пару обсуждений на высоком уровне.

Может кто-нибудь порекомендовать хорошее место для начинающего программиста.

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

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

В идеале я хотел бы посмотреть, как вы сначала начнете создавать статический HTML, а затем добавляете к нему YUI (или какую-либо фреймворк Ajax), чтобы получить преимущества более богатого клиента?

Answer 1

Как вы сказали

Мне это кажется немного излишним, поскольку просмотр сайта без Javascript, вероятно, сломает большую часть его.

Это не прогрессивное улучшение. Прогрессивное улучшение - это когда сайт прекрасно работает без JavaScript или CSS, и затем добавляет (расслоение) эти дополнительные технологии / код для повышения удобства использования и функциональности сайта.

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

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

Answer 2

См. Также Ненавязчивый Javascript , который является основой прогрессивного улучшения.

Answer 3

Я написал учебник по созданию опроса, который использовал прогрессивное улучшение на NETTUTS . Идея состоит в том, чтобы создать функциональный сайт с использованием XHTML / CSS и PHP, а затем перехватывать формы и т. Д. С помощью Javascript. (Я использовал JQuery).

Answer 4

Progressive Enhancement - это метод разработки, который подчеркивает первенство семантического HTML, затем тестирует браузер на возможность и условно "разбивает на слои" улучшения JavaScript и / или CSS для браузеров, которые могут использовать эти улучшения .

Один из ключей - понимание того, что браузер может делать , в отличие от браузера - сниффинг . Modernizr - очень популярный набор тестов с возможностями браузера.

Прогрессивное улучшение по своей природе (раздел 508) доступно; оно предусматривает соблюдение буквы закона и духа правила.

Группа «Филамент» написала превосходную книгу « Проектирование с прогрессивным улучшением » по этому вопросу. (Я не связан с Filament Group, хотя они такие умные, как хотелось бы.)

Answer 5

По сути, если ваш сайт все еще работает с отключенным JavaScript, то все, что вы добавляете с помощью JavaScript, можно считать прогрессивным улучшением.

Некоторые люди могут подумать, что это не нужно, но многие люди просматривают надстройки, такие как NoScript (или JavaScript просто отключен в настройках браузера). Кроме того, многие мобильные веб-браузеры могут поддерживать или не поддерживать JavaScript. Поэтому всегда полезно полностью протестировать свой сайт с использованием JavaScript и без него.

Answer 6

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

Это также изящная деградация при разработке для работы со старыми браузерами (древние в терминологии Интернета), такими как IE 5.5, Netscape и т. Д. *

По моему мнению, это намного больше работы, чтобы изящно ухудшить приложение. Постепенно его улучшение имеет тенденцию быть намного более эффективным; однако иногда возникает необходимость взять существующее приложение и сделать его доступным в этих недостающих средах.

Answer 7

Прогрессивное улучшение:

1. Простой HTML / CSS сайт потрясающий ( полностью рабочий и удобный ).
2. Добавление JavaScript определяет новый уровень удивительности.

Answer 8

Это такая важная концепция, и меня огорчает, что так мало веб-разработчиков понимают ее.

По сути, начните с создания сайта / фреймворка в Plain Old HTML - структурных элементов, ссылок и форм. Затем добавьте какой-нибудь стиль, а затем блестящий материал (Ajax или что у вас).

Это не очень сложно. Как говорит palehorse , постепенная деградация - это больше работы.

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