Прогрессивное улучшение - Progressive enhancement

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

История

«Progressive Enhancement» был придуман Стивеном Чампеоном и Ник Финк на SXSW Интерактивная конференция 11 марта 2003 г. в Остине,[2] и через серию статей для Webmonkey которые были опубликованы с марта по июнь 2003 г.[3]

Конкретный Каскадные таблицы стилей (CSS) методы, относящиеся к гибкости макета страницы с учетом различных разрешений экрана, - это концепция, связанная с адаптивный веб-дизайн подход. Журнал .net выбрал Progressive Enhancement # 1 в своем списке лучших тенденций веб-дизайна за 2012 год (отзывчивый дизайн был # 2).[4] Google поощряет принятие прогрессивных улучшений, чтобы помочь «нашим системам (и более широкому кругу браузеров) видеть полезный контент и базовые функции, когда определенные функции веб-дизайна еще не поддерживаются».[5]

Вступление

Эта стратегия является развитием предыдущей стратегии веб-дизайна, известной как изящная деградация, при этом веб-страницы сначала предназначались для новейших браузеров, но затем стали хорошо работать в более старых версиях программного обеспечения браузеров.[6] Изящная деградация нацелена на то, чтобы страница «деградировала» - оставалась презентабельной и доступный даже при отсутствии определенных технологий, предусмотренных проектом.

При постепенном улучшении стратегия намеренно меняется на противоположную: веб-контент создан с разметка документа, ориентированный на наименьший общий знаменатель функциональности программного обеспечения браузера.[7][3] В разработчик добавляет всю желаемую функциональность в представление и поведение страницы, используя современный CSS, Масштабируемая векторная графика (SVG) или JavaScript. В случае с JavaScript скрипт также следует принципам ненавязчивый JavaScript.

Фон

Подход к прогрессивному усовершенствованию основан на раннем опыте Champeon (c. 1993-4) со стандартным обобщенным языком разметки (SGML) до работы с HTML или любые языки веб-презентаций, а также из более позднего опыта работы с CSS для устранения ошибок браузера. В тех ранних контекстах SGML семантическая разметка имела ключевое значение, тогда как представление почти всегда рассматривалось отдельно, а не встраивалось в саму разметку. Эта концепция по-разному упоминается в кругах разметки как правило разделение презентации и содержания, разделение содержания и стиля, или из разделение семантики и представления. По мере развития Интернета в середине девяностых годов, но до того, как CSS был представлен и получил широкую поддержку, это основное правило SGML неоднократно нарушалось расширителями HTML. В результате веб-дизайнеры были вынуждены использовать новые прорывные технологии и теги, чтобы оставаться актуальными.[нужна цитата ] Намекнув на постепенную деградацию, осознавая, что не у всех есть последняя версия браузера, многие начали просто перенимать методы проектирования и технологии, поддерживаемые только в самых последних и, возможно, единственных предыдущих основных выпусках браузеров. В течение нескольких лет большая часть Интернета просто не работала ни в чем, кроме самых последних и самых популярных браузеров.[нужна цитата ] Это оставалось верным до появления и повсеместного принятия и поддержки CSS, а также многих популистских образовательных усилий на низовом уровне (от Эрика Костелло, Оуэна Бриггса, Дэйва Ши и других), показывающих веб-дизайнерам, как использовать CSS для целей макета.

Прогрессивное улучшение основано на признании того, что основное предположение, лежащее в основе «постепенной деградации» - что браузеры всегда становились быстрее и мощнее - оказалось ложным с появлением портативных и КПК устройства с браузерами с низкой функциональностью и серьезными ограничениями пропускной способности. Кроме того, быстрое развитие HTML и связанных с ним технологий в первые дни Интернета замедлилось, и очень старые браузеры стали устаревшими, что позволило дизайнерам использовать мощные технологии, такие как CSS, для управления всеми задачами представления и JavaScript для улучшения сложных клиентских задач. побочное поведение.

Впервые предложенная как несколько менее громоздкая общая фраза для описания тонкого искусства «разделения структуры и содержимого документа от семантики, представления и поведения», и основанная на распространенном тогда использовании CSS-хаков для работы с ошибками отрисовки в определенных браузерах, Стратегия прогрессивного улучшения обрела самостоятельную жизнь, поскольку новые дизайнеры приняли эту идею, расширили и пересмотрели подход.[как? ]

Основные принципы

Стратегия прогрессивного улучшения состоит из следующих основных принципов.[3]:

  • Базовый контент должен быть доступен для всех веб-браузеров.
  • Базовые функции должны быть доступны для всех веб-браузеров.
  • Редкая семантическая разметка содержит весь контент.
  • Улучшенный макет обеспечивается внешним CSS-кодом.
  • Улучшенное поведение обеспечивается ненавязчивый, внешне связанный JavaScript.
  • Соблюдаются настройки веб-браузера конечного пользователя.

Поддержка и усыновление

  • В августе 2003 года Джим Уилкинсон создал вики-страницу с прогрессивными улучшениями, чтобы собрать некоторые приемы и подсказки и объяснить общую стратегию.[8]
  • Такие дизайнеры как Джереми Кейт показали, как этот подход может быть гармонично использован с другими подходами к современному веб-дизайн (такие как Аякс ), чтобы обеспечить гибкий, но мощный пользовательский интерфейс.[9]
  • Аарон Густафсон написал серию статей, охватывающих основы прогрессивного улучшения, от основной философии до подходов CSS к тому, как обрабатывать JavaScript, для A List Apart.[6][10][11]
  • Другие, в том числе Дэйв Ши, помогли распространить использование этого термина для обозначения стратегий проектирования на основе CSS.
  • Такие организации, как Проект веб-стандартов (WaSP), которая стояла за созданием Кислота2 и Кислота3 тесты, взяли прогрессивное улучшение как основу своей образовательной деятельности.
  • В 2006 году Нейт Кочли в Yahoo! подробно упомянул о прогрессивном улучшении своего собственного подхода к веб-дизайну и поддержке браузеров, Graded Browser Support (GBS).[12]
  • Стив Чипман из AOL назвал прогрессивное улучшение (с помощью сценариев DOM) основой своей стратегии веб-дизайна.[13]
  • Дэвид Арц, руководитель группы оптимизации AOL, разработал набор доступных технологий рендеринга и изобрел технику для разборки «улучшения» на лету, сохраняя предпочтения пользователя.
  • Крис Хейлманн рассказал о важности целевой доставки CSS, чтобы каждый браузер получал только тот контент (и улучшения), с которым он может справиться.[14]
  • Скотт Джель из Filament Group предложил «Прогрессивное улучшение на основе тестов»,[15] рекомендовать проверить возможности устройства (а не делать выводы из обнаруженных пользовательский агент ) перед предоставлением улучшений.
  • Вес - это серверная платформа веб-приложений с открытым исходным кодом, которая прозрачно реализует прогрессивное улучшение во время начальной загрузки, переходя от простого HTML к полному Ajax.

Преимущества

Доступность

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

Поисковая оптимизация (SEO)

Улучшение результатов по поисковая оптимизация (SEO) - еще один побочный эффект стратегии веб-дизайна, основанной на прогрессивном улучшении. Поскольку основной контент всегда доступен паукам поисковых систем, страницы, созданные с использованием методов прогрессивного улучшения, позволяют избежать проблем, которые могут затруднить индексацию поисковой системы.[16]

Критика и отзывы

Некоторые скептики, такие как Гаррет Даймон, выразили озабоченность по поводу того, что прогрессивное улучшение не работает в ситуациях, которые сильно зависят от JavaScript для достижения определенных презентаций или поведения пользовательского интерфейса.[17] которому ненавязчивый JavaScript это один ответ. Другие возражали, говоря, что информационные страницы должны кодироваться с использованием прогрессивного улучшения, чтобы их могли индексировать пауки.[18] и что даже страницы с большим количеством Flash должны кодироваться с использованием прогрессивного улучшения.[19] В смежной области многие выразили сомнения относительно принципа разделения содержания и представления в абсолютном выражении, настаивая вместо этого на реалистическом признании того, что эти два понятия неразрывно связаны.[20][21]

Смотрите также

Примечания

  1. ^ Миллс, Крис (8 июля 2011 г.). «Изящная деградация против прогрессивного улучшения». Консорциум World Wide Web. Получено 2020-08-13.
  2. ^ Шампеон, Стивен и Финк, Ник (2003) Инклюзивный веб-дизайн для будущего, Презентация SxSWi
  3. ^ а б c Шампеон, Стивен (2003), Прогрессивные улучшения и будущее веб-дизайна, Webmonkey
  4. ^ «15 главных тенденций веб-дизайна и разработки на 2012 год». 9 января 2012 г.
  5. ^ Пьер Фар (2014), Обновление наших технических рекомендаций для веб-мастеров, Центральный блог веб-мастеров
  6. ^ а б Аарон Густафсон (2008), Понимание прогрессивного улучшения, Список отдельно
  7. ^ "101 совет по поисковой оптимизации". www.meta4creations.com. Получено 2016-04-14. Прогрессивное улучшение […] означает [создание] вашего веб-сайта, начиная с браузеров с наименьшим общим знаменателем.
  8. ^ Уилкинсон, Джим (2003), Прогрессивное улучшение - Обсудить CSS В архиве 2016-03-09 в Wayback Machine
  9. ^ Блог Джереми Кейта Adactio (2005 г.), Прогрессивное улучшение с помощью Ajax
  10. ^ Аарон Густафсон (2008), Прогрессивное улучшение с помощью CSS, Список отдельно
  11. ^ Аарон Густафсон (2008), Прогрессивное улучшение с помощью JavaScript, Список отдельно
  12. ^ Нейт Кечли, Градуированная поддержка браузера В архиве 2006-04-14 на Wayback Machine
  13. ^ Стивен Г. Чипман (2005), Новые сценарии Skool DOM
  14. ^ Крис Хейлманн, Двойное зрение - дайте браузерам CSS, который они могут переварить (2005) В архиве 2017-07-06 в Wayback Machine
  15. ^ Jehl, Скотт. «Прогрессивное улучшение на основе тестов». Список отдельно. Получено 27 октября 2009.
  16. ^ Стефан Спенсер, PE хорош для SEO | Searchlight - Новости CNET
  17. ^ Димон, Гаррет, Реальность прогрессивного улучшения В архиве 2007-03-17 на Wayback Machine
  18. ^ IA Summit 2006 »Архив блога» Web 2.0 и SEO? В архиве 2006-04-17 на Wayback Machine
  19. ^ deconcept »Использование альтернативного контента в качестве контента во Flash
  20. ^ "Stopdesign | Они действительно разделены? (2003)". Архивировано из оригинал на 2009-01-02. Получено 2006-04-14.
  21. ^ A List Apart: Статьи: Тревога разлуки: миф об отделении стиля от содержания (2000)

Рекомендации

дальнейшее чтение

Статьи
Книги