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

Доступность через чистый HTML (первый уровень) без стилей (второй уровень) и скриптов (третий уровень). Размер страницы всего 76 КБ с чистым HTML.

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

История

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

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

Вступление

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

При постепенном улучшении стратегия намеренно меняется на противоположную: веб-контент создается с помощью документа разметки , ориентированного на наименьший общий знаменатель функциональности программного обеспечения браузера. Разработчик добавляет все нужные функции для представления и поведения страницы, используя современные CSS, Scalable Vector Graphics (SVG) или JavaScript .

Фон

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

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

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

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

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

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

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

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

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

Доступность, совместимость и охват

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

Скорость, эффективность и пользовательский контроль

Клиент (вычисления) имеет возможность выбрать , какие части страницы для загрузки за пределами основного HTML (например , моделирование, изображения и т.д.), и может выбрать только загрузить части , необходимые для желаемого использования , чтобы ускорить загрузку и уменьшить полосу пропускания и потребление энергии . Например, клиент может выбрать загрузку только базового HTML без загрузки таблиц стилей, сценариев и мультимедиа (например, изображений) из-за низкой скорости Интернета, вызванной географическим положением, плохим сотовым сигналом или сниженной скоростью из-за исчерпанной высокоскоростной передачи данных. тарифный план. Это также снижает потребление полосы пропускания на стороне сервера.

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

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

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

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

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

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

Примечания

использованная литература

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

Статьи
Книги