Из Википедии, бесплатной энциклопедии
Перейти к навигации Перейти к поиску

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

История [ править ]

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

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

Введение [ править ]

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

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

Преимущества [ править ]

Доступность [ править ]

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

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

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

Критика и отзывы [ править ]

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

См. Также [ править ]

  • Универсальный дизайн
  • Ненавязчивый JavaScript
  • Изящная деградация
  • Адаптивный веб-дизайн
  • Семантический HTML
  • Адаптация контента , преобразование контента для адаптации к возможностям устройства

Заметки [ править ]

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

Ссылки [ править ]

  • Боуман, Дуг (2003) Они действительно разделены? Проверено 14 апреля 2006 года.
  • Эдвардс, Джеймс и Адамс, Кэмерон (2006) Script Smarter: Качественный JavaScript с нуля Получено 14 апреля 2006 г.
  • Хейльманн, Кристиан (2006) Семь ошибок доступности, часть I, получено 14 апреля 2006 г.
  • Koechley, Nate (2006) Оценка поддержки браузеров, полученная 14 апреля 2006 г.
  • Маликоат, Тодд (2003) Форма против функции в дизайне сайта, получено 14 апреля 2006 г.
  • Найман, Роберт (2006) Что такое доступность? Проверено 14 апреля 2006 года.
  • Олссон, Томми (2007) для Accessites.org Graceful Degradation & Progressive Enhancement, получено 2 апреля 2007 г.
  • Shea, Dave (2004) Zen and the Art of Web Improvement (WE04 Keynote) Получено 14 апреля 2006 г.
  • Stearns, Geoff (2006) Использование альтернативного контента в качестве контента во Flash, получено 14 апреля 2006 года.
  • ван дер Слуис, Бобби (2005) Десять передовых методов написания JavaScript в 2005 году, получено 14 апреля 2006 года.

Дальнейшее чтение [ править ]

Статьи
  • Густафсон, Аарон (2008) Understanding Progressive Enhancement Получено 7 июля 2011 г.
  • Густафсон, Аарон (2008) Progressive Enhancement with CSS Получено 7 июля 2011 г.
  • Густафсон, Аарон (2008) Progressive Enhancement with JavaScript Получено 7 июля 2011 г.
  • Густафсон, Аарон (2007) Разрушая пользовательский опыт Проверено 7 мая 2007 г.
  • hesketh.com, 12 сентября 2003 г. Прогрессивные улучшения: прокладывая путь к веб-дизайну будущего
  • Кейт, Джереми (2006) Behavioral Separation Получено 7 мая 2007 г.
  • Олссон, Томми (2007) Изящная деградация и прогрессивное улучшение
Книги
  • Бриггс, Оуэн; Шампеон, Стивен; Костелло, Эрик; Паттерсон, Мэтью (2004) Каскадные таблицы стилей: разделение содержания от представления (2-е изд.). Сан-Франциско: Апресс. ISBN 1-59059-231-X 
  • Густафсон, Аарон (2011) Адаптивный веб-дизайн: создание богатого опыта с прогрессивным улучшением . Чаттануга: Легкие читатели. ISBN 978-0-9835895-0-1 . 
  • Кейт, Джереми (2007) Bulletproof Ajax . Беркли: Новые гонщики. ISBN 0-321-47266-7 
  • Кейт, Джереми (2005) Сценарии DOM: веб-дизайн с помощью JavaScript и объектной модели документа . Беркли: друзья ЭД. ISBN 1-59059-533-5 
  • Паркер, Тодд; Толанд, Пэтти; Jehl, Скотт; Костелло Вакс, Мэгги ( The Filament Group ) (2010) Разработка с прогрессивным улучшением Peachpit / New Riders. ISBN 978-0-321-65888-3