УП.02

На 20.05.2021

Если сайт разноцветный ― это не означает, что он красивый.

Если на нём много информации ― это не означает, что он полезный.

Если вы используете необычный шрифт ― это не значит, что ваш сайт будут читать.

Хорошие дизайнеры знают эти факты. Делать сайт самому, не владея навыками веб-дизайна, ― гиблое дело. Но разбираться в основах правильного оформления, уметь отличать плохое от хорошего всё же стоит.

Вы же хотите, чтобы тексты на вашем сайте читали?

Предлагаем вам запомнить 10 базовых рекомендаций по типографике и смело практиковать их.

10 советов, чтобы сайт созрел

1. Правильный размер шрифта повышает читабельность текста. Пользователи не хотят настраивать шрифт на вашем сайте самостоятельно. Позаботьтесь о них заранее. Слишком маленький шрифт их отпугнет, слишком большой напряжёт. Выбрав стандартные размеры (12,13,14 кегль), вы не ошибётесь.

2. Пространство сайта не должно быть заполнено на 100 %. Это только утомит читателя, он никогда не просмотрит такую страницу целиком. Оставляйте пустые пространства, играйте с отступами. Текст должен быть окружён пустотой. Это сотворит чудо: контент начнут читать. Происходит это потому, что пользователь сразу поймёт, где начало текста, а где конец. Читательский глаз не устанет, ваш сайт будет только радовать.

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

4. Хороший контент должен содержать изображения, так как картинки привлекают внимание посетителя. Но размещать стоит нужные картинки. Хаотично расположенные, бесполезные иллюстрации никому не интересны. Пользователь потому так и называется, что любит пользу.

5. Хороший заголовок – половина успеха статьи. Размер хорошего заголовка – дополнительная треть успеха. Самые популярные размеры заголовков находятся в диапазоне от 18 до 29 пикселей. Если название совсем короткое (одно-два слова), можно использовать более крупный кегль.

6. Точка в конце заголовка никогда не ставится; вопросительный и восклицательный знаки — могут.

7. Акцентируйте внимание на словах с помощью разных размеров шрифтов, стилей текста (капслок, курсивное и полужирное начертание). Хороший вариант – сочетать шрифты с засечками и без. Раньше все старались пользоваться шрифтами без засечек в заголовках, основной текст писать с засечками. Сегодня тенденция изменилась в сторону микса.

8. Размеры строк имеют значение. Ширина строки во весь экран понравится только фанатикам вашего сайта и его тематики, другой человек прекратит чтение. Слишком узкая колонка тоже не подойдет, так как глаза устанут прыгать от строчки к строчке. Самая приятная для человека строка содержит от 55 до 75 символов. Помимо размера, для восприятия важно расстояние между абзацами и строками.

9. Цветовые комбинации шрифтов и фона для восприятия играют важную роль. Выворотный текст (белый на черном фоне), как уже было доказано много раз, читается хуже. Но и от угольно-черных букв на слепяще белом фоне дизайнеры стараются сегодня уходить – чтобы глазам не было больно при просмотре. Черный шрифт заменяется ими на чуть более мягкий тон, белый фон стремится к молочному или иным оттенкам.
В конце концов, какой бы палитрой вы не пользовались, правил несколько: если шрифт похож по цвету на фон, то читается он плохо. Играясь с другими цветами и оттенками, кроме черных и белых, помните: текст должен быть контрастен по отношению к фону.

10. Типографика существует для текста, а не текст — для типографики. Оформление должно подчеркивать смысловую нагрузку текста, помогать пользователю понять, что важнее, на чем необходимо остановить взгляд.

Эти основные правила легко запомнить и применить. 

©https://www.optimism.ru/blog/10-pravil-oformleniya-teksta-na-sajte/

Ход работы

В текстовом редакторе Notepad++ открыть страницу index.html, созданную в ПР№12. Скопировать содержимое страницы и вставить на новый лист. Удалить содержимое раздела "id=content". Сохранить новый документ под именем pz16.html. Изменить название веб-страницы на "Особенности проектирования сайтов".

Между блоками header и footer вставьте текст:

Избыток информации. Сейчас в Интернете скопился огромный объём информации и пользователя подчас даже приходится уберегать от него, упорядочивая информацию, делая работу с ней более понятной и удобной.
Люди не читают веб-страницы, а просматривают. Вместо подробного чтения текста посетители бегло его просматривают, задерживаясь на словах и выражениях, которые привлекают их внимание, важны для них. Поэтому важно грамотно оформить текст и заголовки, чтобы максимально быстро донести основную мысль статьи до посетителя сайта, заинтересовать его.
Пользователи избегают медленно загружающих сайтов. В большинстве случаев посетители не дожидаются полной загрузки медленных сайтов и уходят, так как есть возможность найти другой, "быстрый", сайт с той же направленностью. Сайт может загружаться медленно по разным причинам: страницы перегружены графикой или Flash-содержимым, он расположен на web-сервере c узкой пропускной способностью, возникли проблемы на линии связи. Web-дизайнер может решить только первую проблему — делать дизайн сайта более легким, свести графическое оформление к минимуму.
Люди плохо ориентируются в большом количестве информации. В отличие от операционной системы, которая является стандартизованной и содержащей единые элементы интерфейса, web-сайты имеют разное представление данных. Это создает определённые трудности для его посетителя, он должен за несколько секунд разобраться в системе навигации по сайту. В этом ему поможет продуманное планирование сайта, которое также ложится на web-дизайнера.
Трудности чтения с экрана монитора. Конечно, мы каждый день читаем электронную почту, новости и другую информацию, несмотря на то, что на мониторе буквы видны хуже, чем на бумаге, — с этим все давно смирились. Но эту особенность следует учитывать при составлении текстов для web-страниц, выбирать четкий «читабельный» шрифт на контрастном фоне.

Посмотрите в браузере, что получилось. Обратите внимание на недостатки:

Текст нечитаемый вообще!!! Надо срочно исправлять!

1.Начнём с выделения раздела:

Оберните текст тегом <div id="content">

2. Далее введём заголовок 1 уровня <h1>Особенности проектирования сайтов</h> и добавим раздел с идентификатором id="center":

Стало немного лучше - теперь понятно о чём текст и стало виднее, где начало и где конец.

3. Следующий этап - разбить текст на абзацы и подзаголовки:

Найдите в тексте и оберните тегом <h3> следующие заголовки (не забудьте убрать точки):

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

Абзацы поместите в тег <p>...</p>.

Сохраните index.html (ctrl+S), обновите страницу в браузере(F5).

Стиль заголовка h3 почти не отличается от h1, поэтому стоит поменять его размер в css-файле main.css со значения 35px, на значение 25px. Также нужно настроить отступ от текста абзаца до следующего заголовка. Для этого селектору #content h3 зададим свойство margin-top со значением 20px, отступ снизу (margin-bottom) поменяем на 25px.

получится так:

4. Немного лучше, но глаза устанут бегать по строкам.Легче текст читается "сверху вниз". Давайте сделаем текстовый блок немного Уже. 

Для этого изменим название блока c id="center" на id="center_text" в index.html, а в файле main.css добавим новый стиль для этого блока с шириной 750px:

Вот так текст уже "можно" прочитать:

4. Аналогичным способом создайте страницу pz17.html и разместите текст:

Облачные технологии.
Термин "облачные технологии" появился в 2008 г. Суть облачных технологий заключается в предоставлении пользователям удалённого доступа к услугам, вычислительным ресурсам и приложениям (включая операционные системы и инфраструктуру) через Интернет.
При этом программное обеспечение (приложение, пакет офисных программ, операционную систему и т.д.) устанавливать на компьютер не обязательно. При облачных вычислениях данные постоянно хранятся на виртуальных серверах, расположенных в облаке, а также временно кэшируются на клиентской стороне не компьютерах, ноутбуках, мобильных устройствах и т.д.
Типы облаков. Частное облако - инфраструктура, предназначенная для использования одной организацией, включая несколько потребителей (например, подразделений одной организации).
Публичное облако (англ. public cloud) - это инфраструктура, предназначенная для свободного использования широкой публикой. Публичное облако может находиться в собственности, управлении и эксплуатации коммерческих, научных и правительственных организаций (или какой-либо их комбинации).
Гибридное облако (англ. hybrid cloud) - это комбинация из двух и более различных облачных инфраструктур (частных, публичных), остающихся уникальными объектами, но связанных между собой стандартизованными или частными технологиями передачи данных и приложений (например, кратковременное использование ресурсов публичных облаков для балансировки нагрузки между облаками).
Общественное облако (англ. community cloud) - это вид инфраструктуры, предназначенный для использования конкретным сообществом потребителей из организаций, имеющих общие задачи.
На практике границы между всеми этими типами вычислений размыты.
Три уровня облачных сервисов:
- инфраструктура как сервис (IaaS). Инфраструктура в аренду. Пользователю предоставляется "чистый" экземпляр виртуального сервиса с уникальным IP-адресом или набором адресов и часть системы хранения данных;
- платформа как сервис (PaaS). PaaS можно представить как готовую к работе виртуальную платформу, состоящую из одного или нескольких виртуальных серверов с установленными операционными системами и специализированными приложениями;
- программное обеспечение как сервис (SaaS). Концепция SaaS предоставляет возможность пользоваться программным обеспечением как услугой и делать это удаленно через Интернет. Данный подход позволяет не покупать программный продукт, а временно воспользоваться им при возникновении необходимости.
Примеры облачных технологий:
- Google-calendar - онлайн-календарь;
- Google-maps - онлайн-набор карт;
- Google-Docs - онлайн-офис;
- YouTube - видеохостинг;
- Яндекс-диск - сервис для хранения файлов.

Самостоятельно внесите корректировки в main.css.