1. Понятие непрерывности бизнеса. Способы и средства обеспечения непрерывности бизнеса.

2. Основные приемы и технологии веб-верстки.

◀️ Реферат к вопросам экзамена по дисциплине Интернет-технологии 1 курса магистратуры ▶️

Выполнили: Рогозина Наталия ИДМ-22-07, Саад Али ИДМ-22-02, Петров Матфей ИДМ-22-08, Гаджиев Магамедрасул ИДМ-22-06, Просвирницына Эвелина ИДМ-22-01, Петруша Анна ИДМ-22-05, Парфенова Анастасия ИДМ-22-05.

Непрерывность бизнеса (англ. Business Continuity) — это cтратегическая и тактическая способность организации к восстановлению критичных для ее деятельности процессов в течение норматива целевого времени восстановления бизнеса (RTO) [1].

Тема "Управления непрерывностью бизнеса" стала набирать обороты после террористического акта в Нью-Йорке 11 сентября 2001 года (Business Continuity Management, BCM). Доступность и непрерывность ИТ-сервисов так же попали под одно название "Непрерывность бизнеса" [1].

В стандартах ISO/IEC 17799/IS0/IEC 27001 обеспечение непрерывности бизнеса определяется как одна из важнейших задач в области информационной безопасности, что непосредственно отражено в разделе 11 стандарта IS0/IEC 17799 следующими требованиями:

11.1. Аспекты управления непрерывностью бизнеса.

11.1.1. Процесс управления непрерывностью бизнеса.

11.1.2. Непрерывность бизнеса и анализ влияния.

11.1.3. Разработка и внедрение планов непрерывности.

11.1.4. Компоненты планирования непрерывности бизнеса.

11.1.5. Тестирование, поддержка и переоценка планов непрерывности бизнеса.

11.1.5.1. Тестирование планов.

11.1.5.2. Поддержка и переоценка планов [2].

Стандарты института непрерывности бизнеса (BCI — (the Business Continuity Institute) представляют целевое рассмотрение всех связанных с обеспечением непрерывности бизнеса вопросов. BCI — это международная некоммерческая организация профессионалов в сфере обеспечения непрерывности бизнеса. Цель и роль BCI — продвижение высших профессиональных стандартов и коммерческой этики в области поддержки планирования непрерывности бизнеса и предоставления услуг в данном направлении. BCI определяет 10 стандартов/направлений в области управления непрерывностью бизнеса:

1. Организация и управление проектом.

2. Оценка и контроль рисков.

3. Анализ влияния на бизнес.

4. Разработка стратегий обеспечения непрерывности.

5. Реакция на чрезвычайные ситуации.

6. Разработка и внедрение планов непрерывности бизнеса.

7. Программы обучения и повышения осведомленности персонала.

8. Поддержка и тестирование планов непрерывности бизнеса.

9. Связи с общественностью и управление кризисом.

10. Взаимодействие с регулирующими органами. [2].

BCI также издал методологию Good Practice Guide (или GPG) и совместно с BSI специализированный стандарт PAS-56.

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

Рис. Этапы управления непрерывностью бизнеса

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

Анализ воздействия на бизнес — метод позволяющий исследовать воздействие инцидентов на ключевые виды деятельности и процессы компании.

На данном этапе предусмотрено детальное изучение процессов компании. Для этого консультант проводит интервью с руководством отделов, входящих в область проекта. В ходе беседы запрашивается информация о деятельности отдела и составляется перечень процессов / функций, которые он осуществляет. Далее для детального изучения процессов / функций, интервьюируются владельцы процессов и определяется тип воздействия на бизнес (материальный, репутационный) и степень зависимости процесса от ИТ и внешних сервисов. А затем определяется максимально допустимое время простоя (Maximum Allowable Outage) [3].

Риск — влияние неопределенности на цели.

Целью оценки рисков в рамках управления непрерывностью бизнеса является определение событий, которые могут привести к нарушению деятельности компании, а также их последствий (ущерб) [4].

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

— защиты приоритетных видов деятельности компании;
— их эффективного восстановления;
— смягчения последствий инцидентов, разработки ответных и превентивных мер [3];

В соответствии с лучшими практиками, планы управления непрерывностью должны состоять из трёх компонентов:

1. Реагирование на чрезвычайные ситуации — определяет последовательность действий, которые необходимо осуществить при обнаружении инцидента.
2. Управление инцидентами — определяет методы, необходимые для смягчения или уменьшения размера происшествия.
3. Восстановление деятельности — определяет последовательность действий, которые необходимо осуществить для того, чтобы восстановить сервис на заданном уровне.

Специалистами NIST было разработано руководство, которое достаточно подробно описывает необходимые) планы обеспечения непрерывности бизнеса. Далее приведена таблица, где описан каждый из планов (указанных в руководстве NIST), а также даны ссылки на стандарты / НПА, которые предписывают разработку таких планов [3].

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

После того как была определена цель тестирования, разрабатывается сценарий, определяется метод тестирования и согласовывается с руководством. Чаще всего применяются следующие методы: — Настольная проверка (Tabletop); — Имитация (Imitation); — Полное тестирование (Full business continuity testing).

После проведения тестирования составляются отчеты, в которых указываются сценарии и результаты тестирования, а также предложения по улучшению планов непрерывности деятельности [3].

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

1. Изменение ИТ-инфраструктуры;
2. Изменение организационной структуры компании;
3. Изменения в законодательстве;
4. Обнаружение недостатков в планах при их тестировании.

Чтобы сохранить актуальность планов, необходимо выполнять следующие действия:

— проводить внутренние аудиты, включающие проверку восстановления после аварий, документации по обеспечению непрерывности и соответствующих процедур; ­- проводить регулярные практические тренинги по выполнению плана; — интегрировать вопросы непрерывности бизнеса в процесс управления изменениями компании [3].

1. Высокая гибкость

Благодаря облачной инфраструктуре предприятия любого размера могут быстро разворачивать дополнительные ресурсы, учитывая новые требования. При резком возрастании спроса, бизнес-активности и, соответственно, — нагрузки, увеличение мощности облачной ИТ-системы занимает минуты. Во время менее интенсивной работы можно также быстро снизить потребление вычислительных ресурсов. Особенно повезло тем компаниям, которые до пандемии успели не просто мигрировать в облако, но перейти на модель Cloud Native: им вообще не пришлось тратить время и ресурсы на то, чтобы отслеживать резкие колебания нагрузок — вычислительные мощности масштабировались автоматически [5].

2. Хранение данных

Объем данных компаний растет в геометрической прогрессии, в том числе из-за цифровизации: оборудование на многих заводах сейчас оснащено датчиками, которые постоянно передают данные. Интернет- и телеком-компании также получают и хранят невероятное количество данных. Эту информацию необходимо где-то хранить для будущего анализа, при этом обеспечив резервные копии. Учитывая сокращения бюджетов, облака становятся оптимальным решением для бэкапа, и нередко это — первые пробы компаний перед дальнейшим использованием облачных технологий. В этом плане крупные предприятия быстро находят общий язык со SberCloud, потому что у них идентичные требования к безопасности и защите персональных данных в рамках федерального законодательства [5].

В производственных сферах непрерывность бизнеса поддерживают технологии IoT и Digital Twin. Например, исправность оборудования в нефтяной отрасли контролируют тысячи датчиков, которые в режиме реального времени передают данные для анализа. Их нужно оперативно обрабатывать и хранить. Для этого необходимы огромные мощности, а разворачивать ЦОДы самостоятельно очень дорого. К тому же средний срок жизни ЦОДов — около пяти лет, а облачные провайдеры избавляют от необходимости регулярно реинвестировать в инфраструктуру [5].

3. Резервное копирование и быстрое восстановление

Стоимость отказа ИТ-систем в постковидной экономике стала заметно выше, так что бизнес начал чаще думать о резервном копировании и восстановлении данных. Это опции, которые логичнее и безопаснее реализовать в облаке, даже если вы используете классический On-Prem. Хотя и рекомендуется поддерживать определенный уровень аппаратной избыточности, аварийное восстановление как услуга (DRaaS) использует аппаратно-независимые возможности виртуализации облака. Это обеспечивает беспроблемное, безопасное резервное копирование системы и данных в сочетании с почти мгновенным переключением при сбое и более эффективным восстановлением [5].

4. Адаптация к новым условиям

Весной этого года на удаленку ушли, по оценкам, до 80% работающих россиян. Притом количество коммуникаций выросло в несколько раз : в кризис компаниям приходится чаще принимать сложные оперативные решения. На помощь пришли облачные сервисы коллективной работы — Zoom, Slack или Microsoft Teams.

Гигантский объем удаленных коммуникаций невозможно было бы обеспечить без адаптирующейся сетевой инфраструктуры. Компания Zoom, чтобы справиться с 30-кратным ростом количества видеозвонков, оперативно перенесла все свои данные и вычисления в облако, а сервис Microsoft Teams изначально размещался в облаке Azure [5].

5. Безопасность

Современная облачная инфраструктура означает возможность гранулярного доступа для сотрудников: ИТ-менеджмент может контролировать, кто, когда и какими ресурсами воспользовался. Безопасно делиться частью инфраструктуры можно не только с сотрудниками, но и с внешними подрядчиками и партнерами, чтобы не тормозить развитие проектов.

Облачные провайдеры берут на себя значительную часть усилий по обеспечению безопасности информационных систем клиентов. Согласно отчету Cloudflare, в марте 2020 года, с началом пандемии, количество онлайн-угроз выросло в шесть раз по сравнению с обычным уровнем. Облачные провайдеры максимально снижают такие риски, так как регулярно и много инвестируют в самые современные решения в области кибербезопасности [5].

Организация должна разработать политику в области непрерывности бизнеса, которая отвечает целям МНБ организации. Первоначально она может быть выпущена в виде заявления о намерениях, утвержденного на самом высоком уровне организации, которое может быть доработано, расширено и улучшено по мере развития в организации МНБ. Политика в области непрерывности бизнеса должна обеспечивать организации документированные принципы и цели, к которым должна стремиться организация и на соответствие которым необходимо проводить измерение способности к непрерывности бизнеса. Политика в области МНБ должна быть утверждена на самом высоком уровне организации, например, генеральным директором или председателем совета директоров.

При разработке политики в области МНБ организация должна определить:

• области применения МНБ в организации;
• необходимые ресурсы для МНБ;
• принципы, руководящие указания и минимальное количество стандартов организации в области МНБ;
• ссылки на соответствующие стандарты, инструкции или другие нормативные акты организации, которые должны быть включены в документы или могут быть использованы как точки отсчета.

Организация должна поддерживать в рабочем состоянии политику, стратегии, планы и решения в области МНБ и проводить их анализ через запланированные интервалы времени в соответствии с потребностями организации. В политике организации должны быть точно установлены все применяемые ограничения или исключения в области МНБ, например исключения по географическому признаку или по виду продукции [6].

Разработка сайта – это долгая и плодотворная работа, которая, как правило, разделена на несколько этапов. Начальный этап заключается в прототипировании, когда прорисовывается основная структура сайта. На основе этого разрабатывается макет будущих страниц, который в последующем верстается.

Верстка сайта – это преобразование готового макета в продукт, состоящий из языка разметки HTML и CSS. Верстка – это про Frontend, в основу которого входит язык разметки HTML, базис любого сайта.

Вёрстка правильно располагает все элементы на странице и делает так, чтобы с ними было удобно работать. Поэтому вёрстка сайта – это ответственная задача, требующая внимательности, терпения и постоянного тестирования [7].

Наиболее старой, однако, по сей день широко используемой технологией «написания» сайтов является html-верстка — универсальная и гибкая. Преимуществом использования технологии HTML является простота освоения данного языка и широкие возможности выбора редакторов для написания кода.

Это язык разметки, с помощью которого браузеры показывают нам порядок, размер, формы и шрифт текста. С его тегами знакомы все, кто занимался созданием сайтов, например:

<body> </body> — все содержимое страницы;
<h1> </h1> — это обозначение заголовка;
<h2> </h2> — подзаголовок;
<img> — изображение;
<strong> </strong> — жирный шрифт;
<a> </a> — ссылка на другой ресурс, но между ними надо поставить атрибут href, который содержит адрес этой ссылки и так далее.

Вёрстку веб-страниц невозможно представить без HTML. Если говорить простыми словами, то HTML — это единый стандарт отображения всех элементов веб-страницы [8].

CSS (Cascading Style Sheets — каскадные таблицы стилей) - С целью расширения возможностей сайтостроения и дизайна для использования совместно с HTML была разработана технология.

CSS используется для определения стилей (правил) оформления документов — включая дизайн, вёрстку и вариации макета для различных устройств и размеров экрана. У такого способа форматирования несколько достоинств:
• теги не дублируются;
• документ проще обслуживать;
• внешний вид всего сайта можно изменить централизованно, а не корректировать форматирование каждой странички.

Без CSS все веб-страницы в сети выглядели бы скучно, но благодаря этой технологии удается полностью преображать и настраивать внешний вид документов. При этом отдельным самостоятельным языком CSS не является, так как без html не имеет смысла [8].

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

Использование технологии JS при верстке сайта позволяет создавать различные формы обратной связи, регистрационные анкеты, подсказки и предупреждения, вносить изменения в стили элементов страниц, удалять или добавлять теги, манипулировать элементами html-кода, записывать данные о посетителях и многое другое. [8].

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

Bootstrap совмещает в себе html, css и javascript, а потому с его помощью можно создать любую сетку сайта и элементы интерфейса [8].

Ember.js — фреймворк, заточенный специально под создание нетрадиционных сложных одностраничников и настольных приложений. В общем понимании это JS-каркас, работающий по MVC-шаблону распределения кода.

Ember.js вобрал в себя множество современных JavaScript концепций и технологий. Вот их неполный список:

• Поддержка live-reload для сокращения отклика во время разработки.
• Навигация в любую часть приложения благодаря системе роутинга.
• Полная поддержка JSON API, но при этом присутствует возможность использовать любой API, который вам необходим.
• Ember.js легко интегрируется и может работать с библиотеками Handlebars и jQuery и т.д.[8].

AngularJS прост и функционален — поддерживает Ajax, анимации, управление DOM‑ом, маршрутизацию и т.д., что обеспечило ему огромную популярность. Он является JavaScript-фреймворк с открытым исходным кодом. Предназначен для разработки одностраничных приложений. Его цель — расширение браузерных приложений на основе MVC-шаблона, а также упрощение тестирования и разработки.

Фреймворк работает с HTML, содержащим дополнительные пользовательские атрибуты, которые описываются директивами, и связывает ввод или вывод области страницы с моделью, представляющей собой обычные переменные JavaScript. Значения этих переменных задаются вручную или извлекаются из статических или динамических JSON-данных [8].

React — незаменимый инструмент фронтенд разработки, JS-библиотека для создания одностраничных масштабируемых приложений. React характеризуется простотой в освоении, лаконичностью синтаксиса, возможностью создания и использования VirtualDOM, с помощью которого разгружаются высоконагруженные приложения. С помощью React разработчики создают отдельные компоненты, способные к переносу из одного проекта в другой [8].

Node.js представляет собой программную платформу на основе движка V8, транслирующую вызовы на языке JS в машинный код. Node.js удобна для создания серверных JS-приложений, хотя возможно применение для программирования микроконтроллеров и написания десктопных приложений [8].

Эффективно и удобно работать с любым из элементов DOM, событиями, использовать технологию Ajax, создавать всевозможные сложные визуальные эффекты и всегда иметь под рукой огромное количество JS-плагинов для создания пользовательских интерфейсов позволяет JavaScript-библиотека jQuery. С помощью данного фреймворка веб-разработчикам удается придать сайту динамичность [8].

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

Достоинства	Недостатки
Такой подход позволяет достаточно легко создать много колонок и столбцов. Макеты со сложной структурой достаточно просто верстаются с помощью таблицы. Также тег table и все связанные с ним элементы поддерживаются абсолютно одинаково во всех браузерах. [9].	Очень громоздкий код – главный минус табличной верстки. Нужно отметить, что в одну таблицу можно вставить другую, то есть вложенную. Это приводит к большой вложенности и куче тегов. И никуда от этого не деться, потому что все эти теги нужны для работоспособности нашей таблицы. Разобраться в таком коде не очень просто [9].

Когда-то существовал еще один метод верстки, но сегодня о нем практически забыли. Суть верстки с помощью фреймов заключается в том, что окно браузера делится на определенное количество независимых блоков (фреймов), которые формируются тегом frameset. Там указывается путь к html-страничке, которая будет загружена в фрейм [9].

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

Блочная технология имеет ряд преимуществ и в целом признана самой удобной. Каждый блок – это независимый элемент, в который можно вкладывать неограниченное количество элементов. Блок можно позиционировать, менять ему размеры, стилизовать. Все это делается с помощью CSS [9.

Достоинства

Недостатки

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

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

Метод блочной верстки будет существовать еще долго из-за его исключительного удобства и простоты.

Суть этого метода в том, что структурным элементам прописывается display: flex. Это тоже своего рода блоки, только более гибкие и функциональные.

К достоинствам флексбоксов можно отнести новые css-свойства, которые позволяют выстраивать разнообразные сетки и колонки без особых усилий. Также поддерживается вертикальная центровка, которую не поддерживает обычный блок [9].

Грид представляет собой пересекающийся набор горизонтальных и вертикальных линий, образующих колонки и строки. Элементы могут быть помещены в грид в пределах линий этих колонок и строк. Грид имеет следующие особенности:

Сетка (grid) представляет собой набор пересекающихся горизонтальных и вертикальных линий, делящих пространство grid-контейнера на области сетки, в которые могут быть помещены элементы сетки.

Линии сетки (grid lines) — это невидимые горизонтальные и вертикальные разделительные линии, они существуют по обе стороны от строки и столбца. На них можно ссылаться по числовому индексу (используя свойства grid-column-start, grid-column-end, grid-row-start и grid-row-end) или имени, заданному в CSS-коде. Числовые индексы сетки зависят от стиля языка, поэтому первым столбцом может быть как самый левый, так и самый правый столбец [10].

Выделяют две группы линий сетки: одна группа определяет столбцы, которые проходят вдоль оси блока (ось столбцов), и перпендикулярная группа, определяющая строки, простирающиеся вдоль линейной оси (ось строк), в соответствии с CSS3 режимом записи.

Дорожка сетки (grid track) — пространство между двумя соседними линиями сетки, используется для определения либо столбца, либо строки сетки. Дорожка идет от одного края контейнера к другому, размер зависит от расположения линий сетки, которые ее определяют. Дорожки сетки аналогичны столбцам и строкам таблицы. По умолчанию смежные дорожки плотно прилегают друг к другу, задать расстояние между ними можно с помощью свойств row-gap, column-gap и gap [10].

Ячейка сетки (grid cell) — пространство, ограниченное четырьмя линиями сетки, аналогично ячейке таблицы. Ячейка сетки — это область, в которой можно разместить контент. Это наименьшая единица сетки, на которую можно ссылаться при позиционировании элементов сетки. К ячейкам сетки нельзя обращаться напрямую с помощью CSS-свойств [10].

Область сетки (grid area) — прямоугольная область, ограниченная четырьмя линиями сетки и состоящая из одной или нескольких соседних ячеек. Область может быть такой же маленькой, как одна ячейка, или такой же большой, как все ячейки сетки. Область сетки может быть задана явно с помощью свойства grid-template-areas, по умолчанию на нее ссылаются ограничивающие линии сетки [10].

Элементы сетки (grid items) — отдельные элементы, которые назначаются области сетки (или ячейке сетки). Каждый контейнер-сетка включает ноль и более элементов сетки; каждый дочерний элемент контейнера-сетки автоматически становится элементом сетки [10].

Есть разные инструменты для верстки. Они различаются функциями. Выбор инструментов зависит от задач и целей верстальщика.

Графические

Помогают верстальщику с визуалом сайта: они сразу позволяют видеть результат. Для этой цели хорошо подойдет Adobe Photoshop, Gimp, Krita и другие приложения, которые позволяют взять элемент из макета и изучить его, чтобы наметить будущий пул задач [11].

Для работы с кодом

Редакторы кода — это основные программы для работы с кодом, которые понадобятся верстальщику. Есть много разных редакторов: Notepad++, Adobe Dreamweaver, CSS3 Generator, UltraEdit, SublimeText, CoffeeCup HTML Editor, Winless, Firebug, WinMerge, JetBrains WebStorm, Visual Studio Code.

Один из бесплатных лидеров — Visual Studio Code: в нём самое большое количество интеграций, плагинов, расширений. Из платных — JetBrain WebStorm. Он позволяет еще глубже интегрироваться с инструментами разработки и имеет дополнительные функции: автодополнение кода, автоформатирование и так далее [11].

Гибридные

С гибридными инструментами можно верстать вручную в блочном конструкторе. Adobe Dreamweaver — один из мощнейших редакторов, ведь он позволяет не только создавать код или дизайн по отдельности, но и совмещать два в одном [11].

Что такое валидность верстки

Валидная верстка — это корректное отображение сайта на всех возможных устройствах. Валидная верстка соответствует стандарту W3C.

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

Структура страницы составлена в HTML, в то время как стили вынесены в style.css. В HTML остаются только наименования стилей, присвоенных элементам, но параметры стилям присваиваются в отдельном css.

У хорошего сайта при просмотре кода отображается только вёрстка. Функциональный код, например, <?php> и часть javascript вынесена также в отдельные классы, недоступные пользователю.

Чистота кода необходима для быстрой проверки ошибок и доработки. Выносите стили и функционал во внешние классы, соблюдайте отступы, не плодите сущности.

Правильная вёрстка сохраняет размеры макета. Часто неопытные веб-дизайнеры сильно выходят за заданные ограничения шаблона, и внешний вид страницы отличается от дизайна. Более того, лишние пиксели могут привести к проблемам с адаптивностью, «поехавшей» вёрстке.

Используйте методологию Яндекса БЭМ. Она позволяет оптимизировать код.

Обязательно соблюдайте кроссбраузерность. Современная вёрстка должна корректно отображаться в популярных браузерах при всех разрешениях: Chrome, Firefox, Opera, Safari. Это требование всегда есть в технических заданиях.

Используйте заголовки H1, H2, …, H6.

Заполняйте атрибуты элементов: <title>, , .

Сведите к минимуму изображения — всё, что возможно, должно прописываться текстом или кодом, и в последнюю очередь представлено в виде растровых картинок [11].

Один из возможных наборов основных критериев качественной вёрстки [12]:

Необходимо смотреть на размеры и расположение блоков, внешнее сходство с макетом.

1. Необходимо проверить работу анимации, если такая имеется.
2. Допускаются небольшие отличия в отображениях шрифтов.
3. Вёрстка должна идентично отображаться в последних стабильных версиях браузеров Chrome, Firefox, Safari, если иное не указано в техзадании проекта. Необходимо, потому что пользователи сайта могут использовать разные браузеры в разных системах, поэтому нужно добиваться единого отображения.

1. У каждой страницы есть минимальная ширина по фрейму.
2. При ширине окна больше минимальной страница центрируется.
3. Горизонтальная прокрутка появляется только при ширине, меньше минимальной.
4. Допускаются расхождения по горизонтали, не превышающие ширину полосы вертикальной прокрутки.

Длина текста:

1. Текст должен оставаться в рамках родительского блока при переполнении.
2. Текст не должен обрезаться или вываливаться из родительского блока при переполнении.
3. Текст не должен смещать другие блоки.
4. Родительский блок должен сохранять минимальные размеры при недополнении.
5. Слова, длиннее минимальной ширины, должны переноситься.

Размеры элементов Контент больше ширины родителя не должен выходить за его пределы, ломать сетку или смещать другие блоки.

Количество элементов

1. При увеличении количества элементов они должны оставаться в рамках родительского блока.
2. Элементы могут переноситься на следующую строку при уменьшении размера родителя.
3. При минимальном количестве элементов или их отсутствии родительский блок должен сохранять минимальные размеры.
4. Последние блоки в сетках должны выравниваться по направлению текста.

При наполнении контентом, как в макете, элементы каждой страницы соответствуют макету. Допускаются:

1. различия в 5 пикселей по высоте при расстояниях более 30 пикселей и 2 пикселя по ширине;
2. различия в отображении шрифтов, связанные со сглаживанием на различных платформах.

При взаимодействии с элементами (наведение, нажатие) ни сам элемент, ни окружающие его блоки не меняют своего положения, если такое поведение не предусмотрено макетом.

На странице, при их наличии, должны быть обозначены структурные ориентиры:

1. для вводной части, повторяющейся на других страницах;
2. для основного содержимого, не повторяющегося на других страницах;
3. для важных навигационных элементов по сайту;
4. для дополнительного содержимого;
5. для закрывающей, дополнительной информации о странице.

Ориентиры могут быть обёрнуты или вложены в другие теги, использоваться для стилизации или просто служить смысловыми обёртками.

Ссылки "a href" должны использоваться для перехода между страницами, а кнопки "button" должны использоваться только для действий на странице.

1. У ссылок должен быть атрибут href. Ссылки, которые ведут на самих себя, могут быть без атрибута.
2. Для ссылок, адрес которых неизвестен, можно использовать атрибут href с решёткой href="#".
3. Адреса почты и телефоны должны быть размечены ссылками с соответствующими схемами внутри href.
4. У кнопок должен быть явно указан тип действия в атрибуте type.

ИСТОЧНИКИ

1. 📃 Непрерывность бизнеса на малых предприятиях
2. 📑Cтандартах ISO/IEC 17799/IS0/IEC 27001 и Стандарты института непрерывности бизнеса BSI
3. 📃Семь шагов к непрерывности бизнеса
4. 📃Управление рисками в проекте: как найти и оценить, как составить план защиты от них
5. 📃Как облака поддерживают непрерывность бизнеса
6. 📃Менеджмент непрерывности бизнеса
7. 📃Верстка сайта: инструкция для начинающих
8. 📃Современные технологии верстки и front-end
   а. HTML - билет 4
   б. CSS
   в. JavaScript
   г. Ember.js
   д. AngularJS
   е. Ajax
   ж. React
   з. Node.js
   и. jQuery
9. 📃Методы верстки сайтов
10. 📃Подробное руководство по CSS Grid - описание свойств, примеры
11. 📃Верстка сайта
12. 📃Критерии качества верстки