Jump to content

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

(Перенаправлено с «Прогрессивного улучшения »)
Порядок постепенного улучшения: HTML , CSS и JavaScript .
Эта статья доступна через чистый HTML (первый уровень). Без стилей (второй уровень) и скриптов (третий уровень) размер содержимого составляет всего 76 КБ.

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

Эта стратегия предполагает отделение семантики представления от контента, при этом представление реализуется в одном или нескольких дополнительных слоях, активируемых в зависимости от особенностей браузера или Интернету подключения клиента к . На практике это означает предоставление контента через HTML , «наименьший общий знаменатель» веб-стандартов, а также применение стилей и анимации с помощью CSS в технически возможной степени, а затем применение дальнейших улучшений с помощью JavaScript . [4] Можно считать, что устаревший Adobe Flash разделил последнее место с JavaScript, пока он широко использовался. [5] [6] Поскольку веб-браузеры могут загружать функции сайта в той степени, в которой они поддерживаются, а не не могут загрузить весь сайт из-за одной ошибки или отсутствия функции в JavaScript, постепенно улучшаемый сайт становится более стабильным и обратно совместимым . [4]

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

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

Введение

[ редактировать ]

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

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

Подход постепенного улучшения основан на раннем опыте Champeon ( ок. 1993–1994 ) со стандартным обобщенным языком разметки (SGML), предшествовавшим HTML и другим языкам веб-презентаций. [8]

Написание контента с семантической разметкой и рассмотрение представления контента отдельно, а не его встраивание в саму разметку — это концепция, называемая правилом разделения представления и контента. [15] [16] . Чампеон выразил надежду, что, поскольку веб-браузеры предоставляют стиль представления HTML-контента по умолчанию, это приведет к тому, что веб-сайты с их контентом будут написаны как семантический HTML, оставив выбор представления за веб-браузером. [8] Однако потребности веб-дизайнеров привели к тому, что стандарт HTML был расширен жестко запрограммированными функциями, которые позволяли HTML-контенту предписывать определенные стили, и лишили эту возможность потребителей и их веб-браузеров. [8] Эти функции вынудили издателей выбирать между внедрением новых революционных технологий или сохранением контента доступным для аудитории, которая использовала другие браузеры. Возникла дилемма между дизайном и совместимостью. [8] [17] [12] В 1990-е годы все большее количество веб-сайтов работало только в последних популярных браузерах. [12]

Эта тенденция изменилась после 1990-х годов, когда CSS получил широкую поддержку. [8] [17] благодаря массовым образовательным усилиям (от Эрика Костелло, Оуэна Бриггса, Дэйва Ши и других), показывающим веб-дизайнерам, как использовать CSS для макетирования. [ нужна ссылка ]

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

[ редактировать ]

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

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

Поддержка и принятие

[ редактировать ]
  • В августе 2003 года Джим Уилкинсон создал вики-страницу прогрессивного улучшения, на которой собраны некоторые приемы и советы, а также объяснена общая стратегия. [18]
  • Такие дизайнеры, как Джереми Кейт, показали, как этот подход можно гармонично использовать с другими подходами к современному веб-дизайну (такими как Ajax ), чтобы обеспечить гибкий, но мощный пользовательский опыт. [19] [20]
  • Аарон Густафсон написал серию статей для A List Apart, посвященную основам прогрессивного улучшения, от базовой философии до подходов CSS и способов обработки JavaScript. [21] [11] [22] [23]
  • CSS Zen Garden, авторы Молли Хольцшлаг и Дэйв Ши , распространили этот термин для обозначения стратегий дизайна на основе CSS. [24]
  • Такие организации, как Проект веб-стандартов (WaSP), который стоял за созданием тестов Acid2 и Acid3 , [25] приняли прогрессивное улучшение в качестве основы для своих образовательных усилий.
  • В 2006 году Нейт Коечли из Yahoo! подробно упомянул о прогрессивном совершенствовании своего собственного подхода к веб-дизайну и поддержке браузеров — Graded Browser Support (GBS). [12]
  • Стив Чипман из AOL назвал прогрессивное улучшение (с помощью сценариев DOM) основой своей стратегии веб-дизайна. [26]
  • Дэвид Арц, руководитель группы оптимизации AOL, разработал набор доступных технологий рендеринга и изобрел технику разборки «улучшений» на лету, сохраняя предпочтения пользователя.
  • Прогрессивное улучшение используется во внешних интерфейсах сайтов на базе MediaWiki , таких как Wikipedia , поскольку его можно читать, перемещать и даже редактировать с использованием базового интерфейса HTML без стилей или сценариев, хотя они и улучшаются с их помощью. Например, панель инструментов редактора викитекста загружается и работает через JavaScript.
  • Крис Хейлманн обсудил важность целевой доставки CSS, чтобы каждый браузер получал только тот контент (и улучшения), который он может обработать. [27] [28]
  • Скотт Джел из Filament Group предложил «Прогрессивное улучшение, основанное на тестировании». [29] рекомендация протестировать возможности устройства (а не делать выводы из обнаруженного пользовательского агента ) перед предоставлением улучшений.
  • Wt — это платформа серверных веб-приложений с открытым исходным кодом, которая прозрачно реализует прогрессивное улучшение во время начальной загрузки, переходя от простого HTML к полному Ajax.

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

[ редактировать ]

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

[ редактировать ]

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

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

[ редактировать ]

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

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

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

[ редактировать ]

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

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

[ редактировать ]

Некоторые скептики, такие как Гаррет Даймон, выразили обеспокоенность тем, что прогрессивное улучшение невозможно в ситуациях, когда JavaScript в значительной степени зависит от представления или поведения определенного пользовательского интерфейса. [31] Лори Грей (информационный архитектор в KnowledgeStorm) [32] ) возразил, что информационные страницы должны быть закодированы с использованием прогрессивного улучшения, чтобы их можно было индексировать пауками поисковых систем. [33] Джефф Стернс (автор SWFObject , популярного Flash-приложения) утверждал, что страницы с большим количеством Flash должны кодироваться с использованием прогрессивного улучшения. [34]

Дизайнеры Дуглас Боуман и Боб Стейн выразили сомнения относительно принципа разделения содержания и представления в абсолютном выражении, вместо этого настаивая на реалистичном признании того, что эти два понятия неразрывно связаны. [35] [15]

См. также

[ редактировать ]
  1. ^ «Прогрессивное улучшение происходит быстрее» . jakearchibald.com . 03.09.2013 . Проверено 11 ноября 2021 г.
  2. ^ Це, Тиффани (15 февраля 2017 г.). «Что такое прогрессивное улучшение и почему вас это должно волновать?» . Проверено 28 сентября 2023 г.
  3. ^ Jump up to: а б с Олссон, Томми (6 февраля 2007 г.). «Изящная деградация и прогрессивное улучшение» . Искусство доступности . Accessites.org. Архивировано из оригинала 4 марта 2012 г. Проверено 28 сентября 2023 г.
  4. ^ Jump up to: а б ван дер Слюис, Бобби (19 апреля 2005 г.). «Десять хороших практик написания JavaScript в 2005 году» . Архивировано из оригинала 4 июля 2008 г. Проверено 14 апреля 2006 г.
  5. ^ Миллс, Крис (8 июля 2011 г.). «Милая деградация против прогрессивного улучшения» . Консорциум Всемирной паутины . Проверено 13 августа 2020 г.
  6. ^ Jump up to: а б Найман, Роберт (1 марта 2006 г.). «Что такое доступность?» . Проверено 14 апреля 2006 г.
  7. ^ Стивен Чампеон; Ник Финк (11 марта 2003 г.). «Инклюзивный веб-дизайн будущего (презентация SxSWi)» . Архивировано из оригинала 8 ноября 2014 г. – через South by Southwest .
  8. ^ Jump up to: а б с д и ж г час Чампеон, Стив (21 марта 2003 г.). «Прогрессивное улучшение и будущее веб-дизайна» . Вебмонки . Проверено 28 сентября 2023 г.
  9. ^ «15 главных тенденций веб-дизайна и разработки на 2012 год» . Креативный блок . сеть . 9 января 2012 г. Архивировано из оригинала 23 августа 2017 г.
  10. ^ Пьер Фар (2014), Обновление наших технических рекомендаций для веб-мастеров , Центральный блог для веб-мастеров.
  11. ^ Jump up to: а б Густафсон, Аарон (07 октября 2008 г.). «Понимание прогрессивного улучшения» . Список врозь . Проверено 28 сентября 2023 г.
  12. ^ Jump up to: а б с д и Коечли, Нейт (13 февраля 2006 г.). «Градуированная поддержка браузера» . Yahoo! Сеть разработчиков . Архивировано из оригинала 14 апреля 2006 г.
  13. ^ «101 совет по поисковой оптимизации» . www.meta4creations.com . Проверено 14 апреля 2016 г. Прогрессивное улучшение […] означает [создание] вашего веб-сайта, начиная с браузеров с наименьшим общим знаменателем.
  14. ^ Jump up to: а б с Джеймс Эдвардс; Кэмерон Адамс (7 марта 2006 г.). «Script Smarter: качественный JavaScript с нуля» . СайтПоинт . Проверено 14 апреля 2006 г.
  15. ^ Jump up to: а б Штейн, Боб (17 ноября 2000 г.). «Тревога разлуки: миф об отделении стиля от содержания» . Список врозь . Проверено 28 сентября 2023 г.
  16. ^ «Разделение: дилемма веб-дизайнера» . Список врозь . 14 мая 2004 года . Проверено 24 мая 2017 г.
  17. ^ Jump up to: а б с Маликоат, Тодд (23 августа 2003 г.). «Форма и функция в дизайне сайта» . SEO сегодня . Архивировано из оригинала 29 августа 2003 г. Проверено 14 апреля 2006 г.
  18. ^ Уилкинсон, Джим (2003), Прогрессивное улучшение - обсуждение CSS. Архивировано 9 марта 2016 г. на Wayback Machine.
  19. ^ Блог Джереми Кейта Adactio (2005), Прогрессивное улучшение с помощью Ajax
  20. ^ Кейт, Джереми (20 июня 2006 г.). «Поведенческое разделение» . Список врозь . Проверено 28 сентября 2023 г.
  21. ^ Густавсон, Аарон (27 марта 2007 г.). «Испортить пользовательский опыт» . Список врозь . Проверено 28 сентября 2023 г.
  22. ^ Густафсон, Аарон (22 октября 2008 г.). «Прогрессивное улучшение с помощью CSS» . Список врозь . Проверено 28 сентября 2023 г.
  23. ^ Густафсон, Аарон (4 ноября 2008 г.). «Прогрессивное улучшение с помощью JavaScript» . Список врозь . Проверено 28 сентября 2023 г.
  24. ^ Лоусон, Брюс. «Интервью с Дэйвом Ши, садовником дзен CSS» . DMXzone.com . Архивировано из оригинала 8 июня 2007 г. Проверено 5 июня 2007 г.
  25. ^ «Результаты кислотного теста популярного браузера» . СкиАктив . Архивировано из оригинала 5 мая 2008 г. Проверено 5 мая 2008 г. Тест Acid 3 находится в стадии разработки и будет обновлен, когда The Web Standards Project выпустит окончательную версию теста.
  26. ^ Стивен Дж. Чипман (2005), Сценарии DOM для новой школы
  27. ^ Jump up to: а б с Хейльманн, Крис (22 февраля 2005 г.). «Двойное видение: дайте браузерам CSS, которые они смогут усвоить» . Застройщик Сарай. Архивировано из оригинала 20 июля 2006 г. Проверено 6 июля 2017 г.
  28. ^ «Семь ошибок доступности (часть 1)» . Цифровой веб-журнал . 12 апреля 2006 г. Архивировано из оригинала 12 апреля 2006 г. Проверено 14 апреля 2006 г. {{cite web}}: CS1 maint: неподходящий URL ( ссылка )
  29. ^ Джел, Скотт (23 сентября 2008 г.). «Прогрессивное улучшение на основе тестирования» . Список врозь . Проверено 27 октября 2009 г.
  30. ^ Спенсер, Стефан (25 сентября 2007 г.). «PE хорош для SEO» . Прожектор — Новости CNET . Архивировано из оригинала 10 сентября 2011 г.
  31. ^ Даймон, Гаррет (29 августа 2005 г.). «Реальность прогрессивного улучшения» . Архивировано из оригинала 17 марта 2007 г.
  32. ^ «Саммит IA 2006: Биографии спикеров» . АСИС&Т . Архивировано из оригинала 17 апреля 2006 г.
  33. ^ Грей, Лори (27 марта 2006 г.). «Веб 2.0 и SEO?» . Ассоциация информационных наук и технологий . Архивировано из оригинала 17 апреля 2006 г.
  34. ^ Стернс, Джефф (27 февраля 2006 г.). «Использование альтернативного контента в качестве контента в формате Flash» . деконцептировать . Проверено 28 сентября 2023 г.
  35. ^ Боуман, Дуглас (14 октября 2003 г.). «Они действительно разделены?» . Stopdesign.com . Архивировано из оригинала 28 марта 2006 г. Проверено 14 апреля 2006 г.

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

[ редактировать ]
Arc.Ask3.Ru: конец переведенного документа.
Arc.Ask3.Ru
Номер скриншота №: 146bf601aa7d868a9ea9093885266dae__1717957020
URL1:https://arc.ask3.ru/arc/aa/14/ae/146bf601aa7d868a9ea9093885266dae.html
Заголовок, (Title) документа по адресу, URL1:
Progressive enhancement - Wikipedia
Данный printscreen веб страницы (снимок веб страницы, скриншот веб страницы), визуально-программная копия документа расположенного по адресу URL1 и сохраненная в файл, имеет: квалифицированную, усовершенствованную (подтверждены: метки времени, валидность сертификата), открепленную ЭЦП (приложена к данному файлу), что может быть использовано для подтверждения содержания и факта существования документа в этот момент времени. Права на данный скриншот принадлежат администрации Ask3.ru, использование в качестве доказательства только с письменного разрешения правообладателя скриншота. Администрация Ask3.ru не несет ответственности за информацию размещенную на данном скриншоте. Права на прочие зарегистрированные элементы любого права, изображенные на снимках принадлежат их владельцам. Качество перевода предоставляется как есть. Любые претензии, иски не могут быть предъявлены. Если вы не согласны с любым пунктом перечисленным выше, вы не можете использовать данный сайт и информация размещенную на нем (сайте/странице), немедленно покиньте данный сайт. В случае нарушения любого пункта перечисленного выше, штраф 55! (Пятьдесят пять факториал, Денежную единицу (имеющую самостоятельную стоимость) можете выбрать самостоятельно, выплаичвается товарами в течение 7 дней с момента нарушения.)