МДК. 08.01 Проектирование и разработка интерфейсов пользователя КУРС ЛЕКЦИЙ

УЧЕБНОЕ   ПОСОБИЕ		Ульяновский авиационный колледж – Межрегиональный центр компетенций
		МДК. 08.01 Проектирование и разработка интерфейсов пользователя КУРС ЛЕКЦИЙ для специальностей СПО базовой подготовки 09.02.07 Информационные системы и программирование Ульяновск 2024
	ОДОБРЕНО на заседании ЦМК Программирование и ИТ Протокол № от «   »            2024г. Председатель ЦМК:   ____________/ А.А.Мардамшина		УТВЕРЖДАЮ Зам. директора по учебно- методической  работе: _______________ О.М.Семаева «____»__________ 2024г.
	РАЗРАБОТЧИК: Кирилина М.А.., преподаватель ОГАПОУ «УАвиаК-МЦК»

СОДЕРЖАНИЕ

ВВЕДЕНИЕ	4
Раздел 1. Технология проектирования и разработки интерфейсов пользователя
Тема1.1 Основы WEB -технологий	5
Тема 1.2 Основы WEB-дизайна	29
ИСПОЛЬЗОВАННАЯ ЛИТЕРАТУРА	37

ВВЕДЕНИЕ

 Прототип — это схематичный план будущего продукта: с экономической точки зрения выгоднее протестировать 3―5 простых прототипов, чем полгода разрабатывать продукт, понять, что он работает неправильно, и начать процесс с начала.

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

Разработкой и созданием пользовательских интерфейсов, или UX-проектированием, занимается UX/UI-дизайнер. Вот какие задачи он решает:

-  анализирует привычки целевой аудитории продукта;

-  формулирует и проверяет гипотезы;

-  продумывает внешний вид сайтов и мобильных приложений;

-  проектирует пользовательский опыт, чтобы решать задачи потребителей;

-   создаёт прототипы и тестирует их;

-  вносит изменения в прототипы по результатам тестирования;
создаёт визуальный стиль продукта.

При проектировании веб- или мобильного интерфейса важно опираться на дизайн-мышление ― метод создания ориентированных на пользователя продуктов.

Три константы дизайн-мышления:

-   Эмпатия ― умение посмотреть на ситуацию с позиции пользователя.

-  Широта мышления ― способность всеохватно посмотреть на пользовательский процесс.

-  Готовность экспериментировать ― пробовать новое, видеть негативные последствия, отказываться от функции или страницы в таком виде и пробовать что-то другое.

Раздел 1. Технология проектирования и разработки

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

Тема1.1 Основы WEB-технологий

Цель лекции: ознакомление с основными понятиями Интернета (понятие WEB).

Содержание лекции: понятие WEB, появление стандартов WEB, проект стандартов, развитие стандартов, формирование W3C.

Интернет в настоящее время является самым большим и популярным межсетевым объединением в мире. Он соединяет десятки тысяч компьютерных сетей и миллионы пользователей во всем мире. При этом объединены компьютеры тысяч различных типов, оснащенные самым разным программным обеспечением. Пользователи Интернет могут не обращать внимания на все эти различия. Понятие WEB или Интернет происходит от термина «Interconnected networks» (связанные сети), т. е. с технической точки зрения – это глобальное сообщество малых и больших сетей. В более широком смысле – это информационное пространство, распределенное среди миллионов компьютеров во всем мире, которые постоянно обмениваются данными. Часто под словом Интернет также понимают само информационное содержимое Сети. Интернет – это технология, которая смогла вобрать в себя целый арсенал уникальных возможностей. Интернет одновременно является мощнейшим и наиболее независимым информационным ресурсом, надежным и оперативным средством связи, основой для развития информационных технологий и творческого самовыражения миллионов людей во всем мире. Основная задача Интернета это – круглосуточная, высоконадежная связь. Любые два компьютера (или других устройства), подключенных к Интернету, могут связаться друг с другом в любой момент времени. В дальнейшем, при использовании слова «Сеть» в качестве синонима слова Интернет, будем понимать под Сетью именно возможность связать любые два компьютера через Интернет и обеспечить их взаимодействие. Каждый компьютер, подключенный к Интернету – это часть Сети. Появление стандартов WEB. Во время войны браузеров компании Microsoft и Netscape сосредоточились на реализации новых свойств, а не на решении проблем тех свойств, которые они уже поддерживали, и добавляли собственные свойства и создавали свойства, которые прямо конкурировали с существующими свойствами другого браузера, но были реализованы несовместимым образом. Разработчики в это время были вынуждены иметь дело со все возрастающими уровнями беспорядка при попытке создания WEB-сайтов, 8 иногда вынужденные создавать два различных, но по сути дублирующих друг друга сайта для двух основных браузеров, а иногда вынужденные поддерживать только один браузер, блокируя для других использование своего сайта. Это была ужасная работа, и неизбежная отрицательная реакция разработчиков была недалеко. Формирование W3C. В 1994 г. Тим Бернерс-Ли основал World Wide WEB Consortium (W3C) в Массачусетском технологическом институте (Massachusetts Institute of Technology) при поддержке CERN, DARPA (в которую была переименована ARPA) и Европейской Комиссии. Консорциум W3C видел свою задачу в стандартизации протоколов и технологий, которые используются для создания WEB, чтобы информационное содержание было доступно как можно большему числу жителей всего мира. В течение нескольких следующих лет W3C опубликовал несколько спецификаций (называемых «рекомендациями»), включая HTML 4.0, формат изображений PNG, и Каскадные таблицы стилей (CSS), версия 1 и 2. Однако W3C не принуждает использовать свои рекомендации. Производители должны подчиняться документам W3C, только в том случае, если они хотят пометить свой продукт, как соответствующий W3C. Практически это не слишком ценно с позиции продаж, так как подавляющее большинство пользователей WEB не знают, и, вероятно, не беспокоятся, о том, что такое W3C. Поэтому «война браузеров» продолжилась с прежней силой.

Проект стандартов WEB. В 1998 г. на рынке браузеров доминировали Internet Explorer 4 и Netscape Navigator 4. Была выпущена бета-версия Internet Explorer 5, в которой был реализован новый и патентованный динамический HTML. Это означало, что профессиональным разработчикам WEB требовалось знать пять различных способов записи JavaScript. В результате группа профессиональных разработчиков и дизайнеров WEB решили объединиться. Эта группа назвала себя «WEB Standards Project». (WaSP). Идея состояла в том, что называя документы W3Cстандартами, а не рекомендациями, они смогут убедить компании Microsoft и Netscape поддержать их. Начальным методом распространения призыва к действию было использование традиционного приема рекламы, называемого «roadblock», когда компания проводит рекламу через все информационные каналы одновременно, поэтому независимо от того, как зритель будет переключаться между каналами, он получит одно и то же сообщение. Группа WaSP опубликовала статью одновременно на различных сайтах, ориентированных на разработку приложений WEB, включая http://builder.com, Wired online, и некоторых популярных списков рассылки. Кроме того они стали высмеивать компании, которые присоединялись к W3C (и другим организациям стандартизации), но затем сосредотачивались 9 больше на создании новых средств, чем на реализации для начала основ, с правильностью которых они согласились. И последнее, группа WaSP показывает также помощь, а не только критикует. Семь членов сформировали группу «CSS Samurai», которая идентифицировала десять основных проблем поддержки CSS в Opera и Internet Explorer (компания Opera исправила свои ошибки, Microsoft — нет). Развитие стандартов WEB. В 2000 г. компания Microsoft выпустила Internet Explorer 5 Macintosh Edition. Это был очень важный этап, так как этот браузер, устанавливаемый в то время в Mac OS, и использовавшийся по умолчанию, имел также приемлемый уровень поддержки рекомендаций W3C. Вместе с приличным уровнем поддержки CSS и HTML в Opera, это способствовало общему положительному движению, когда разработчики и дизайнеры WEB впервые почувствовали удобство при проектировании сайтов в соответствии со стандартами WEB. Старые браузеры потеряли свою долю рынка, и еще два очень высококлассных сайта были перепроектированы с помощью стандартов WEB: журнал Wired в 2000 г., и ESPN в 2003 г. стали лидерами отрасли в поддержке стандартов WEB и новых методов. Также в 2003 г. Дейв Ши открыл сайт с названием «CSS Zen Garden». Он должен был оказать на профессионалов WEB большее влияние, чем что-либо другое, иллюстрируя как можно изменить весь дизайн, изменяя только стиль страницы, контент может остаться тем же самым. С тех пор в сообществе профессиональных разработчиков WEB стандарты стали обязательными.

Взаимодействие компьютеров через Интернет. Технология доступа к сети Интернет Цель лекции: ознакомление с основными технологиями доступа к сети Интернет. Содержание лекции: полоса пропускания, широкополосный доступ, Асимметричный DSL (ADSL), DSL, ISDN технологии, ISDN-технология, мультиплексор доступа. DSL-технологии. Обычный телефон использует лишь низкочастотный диапазон линии. Однако медный двужильный телефонной провод может передавать гораздо больше данных, если вместо «телефонной» узкой полосы пропускания (3,1 кГц) использовать более широкую полосу. Полоса пропускания или ширина полосы пропускания - это разность между наиболее высокой и наиболее низкой частотами в диапазоне частот передающего канала. Аналоговая передача сигнала по телефонной линии занимает диапазон от 300 Гц до 3,4 кГц. Цифровой сигнал требует большего диапазона частот. Чем выше скорость передачи, тем больший требуется диапазон частот. Поэтому термином «полоса пропускания» все чаще обозначается верхняя граница скорости передачи данных по компьютерной сети. Термин широкополосный доступ означает, что канал предоставляет расширенную полосу частот для передачи информации. Высокая скорость передачи информации достигается благодаря тому, что при использовании широкой полосы частот несколько сигналов могут быть переданы параллельно по одному физическому каналу на нескольких различных частотах, позволяя передавать в единицу времени большее количество информации. Передача нескольких сигналов по одному физическому каналу путем разделения его на подканалы называется мультиплексированием. Говоря о частотном мультиплексировании, имеют в виду частотное разделение на подканалы.. Одна из технологий, которая позволяет использовать телефонную сеть (изначально приспособленную для передачи голосового сигнала) для высокоскоростной передачи цифровых данных, носит название DSL. Аббревиатура DSL происходит от «Digital Subscriber Line» (цифровая абонентская линия). Данная технология позволяет использовать более высокие частоты для передачи данных без ущерба для телефонного разговора. Существует целое семейство технологий под единым названием xDSL (приставка х указывает на конкретную спецификацию семейства DSL). DSL-технология весьма перспективна. Она позволяет одновременно иметь доступ в Интернет и разговаривать по телефону. Скорость DSLподключения намного выше по сравнению с обычным модемом. Для DSL не требуется прокладка новых проводов, поскольку используется оборудование телефонной линии.

При работе в Интернете, основной поток информации идет из Сети к пользователю, в Сеть передается гораздо меньший объем данных. Действительно, например, когда вы просматриваете те WEB-страницы, вы посылаете небольшой запрос, а из сети получаете не только текст, но и изображения. То есть информационный обмен является асимметричным. Очевидно, для передачи подобного трафика нужен асимметричный канал. Наглядно представить асимметричный обмен данными можно на базе аналогии с автомагистралью, в которой в одну сторону движется малый поток машин, в обратную сторону – больший. В этом случае логично организовать узкую полосу на въезд и широкую на выезд. ADSL (Asymmetrical Digital Subscriber Line) или асимметричная DSL, позволяет передавать пользователю данные со скоростью, на порядок превышающей скорость передачи данных от пользователя. При этом сигнал от пользователя в Сеть передается на более низких частотах, чем сигнал из Сети пользователю. Благодаря использованию новейших технологий скорость передачи данных по ADSL в десятки раз выше по сравнению с имеющимися видами коммутируемого доступа: около 8 Мбит/с в направлении к абоненту (нисходящий поток) и более 1 Мбит/с от абонента к сети (восходящий поток). При этом одна и та же линия может параллельно использоваться для передачи голоса и цифровых данных. Высокая скорость позволяет комфортно 12 работать с WEB-сайтами с мультимедиа-информацией, быстро перекачивать большие файлы и полноценно использовать интерактивные приложения. Достоинством ADSL является легкость установки: используются уже имеющиеся провода телефонного кабеля, соединяющие пользователя и телефонную компанию. ADSL предоставляет постоянный доступ в Интернет, при этом пользователи ADSL не разделяют полосу пропускания с другими абонентами.

Модели коммуникации Интернет. Pull- и Push-модели коммуникации. Коммуникационные характеристики сервисов Интернет Цель лекции: ознакомление с моделями коммуникации Интернет. Содержание лекции: Pull- и Push-модели коммуникации. Коммуникативные характеристики сервисов Internet. Мультимедиа. Сетевая навигация. Эффект присутствия. Рассмотрим коммуникационные характеристики Интернет. В основе традиционной коммуникационной модели лежит процесс «один-ко-многим». В зависимости от средства коммуникации информация может быть представлена в статическом (текст, графика) и/или динамическом (аудио, видеоизображение, анимация) виде. Главной особенностью, лежащей в основе взаимодействия традиционных средств отсутствие интерактивного взаимодействия. В отличие от этой модели, в основе Интернет лежат два других принципа. Во-первых, при коммуникации в Интернет взаимодействие происходит через ее среду, которая вносит значительный вклад в происходящее взаимодействие. Эта модель подчеркивает, что первоначальное общение происходит не между отправителем и получателем информации, а скорее между пользователем и некой средой, коммуникационным пространством, причем оба участника диалога являются как отправителями, так и получателями информации. В данной модели сделан шаг от простого обмена информацией между «передатчиком» и «приемником» к созданию информационной среды, которая затем испытывается и модифицируется участниками диалога.

Интернет представляет собой многонаправленную коммуникационную модель «многие-ко-многим», в которой каждый абонент сети имеет возможность обращаться к другим отдельным абонентам или группам либо от своего имени, либо от имени группы. В данной модели средством коммуникации является распределенная компьютерная сеть, а информация, наряду с обычным представлением, может быть представлена в гипермедийном виде. Данная модель показывает, что интерактивное взаимодействие возможно как с другими пользователями Интернет, так и с самой средой непосредственно (взаимодействие со средой), причем последний вид взаимодействия превалирует. Благодаря наличию такого взаимодействия передатчик информации одновременно является и ее потребителем. В такой модели информация и содержание не просто передается от отправителя к ее потребителю, но вместо этого сама среда создается ее участниками и затем ими же испытывается. Коммуникационная модель для традиционных средств массовой коммуникации не содержит контура обратной связи, в то время как модель среды Интернет включает в себя ярко выраженные обратные связи. Примерами реализации обратных связей с потребителями могут быть электронная почта, данные о регистрации пользователей, файлы «cookie», подписка или регистрация на WEB-серверах. Наличие обратных связей значительно повышает эффективность использования коммуникационного средства взаимодействия и возможности адекватно реагировать на события, происходящие во внутренней и внешней среде. Pull- и Push-модели коммуникации Интернет. С этой точки зрения традиционные средства массовой информации (СМИ: телевидение, радио и т. д.) реализуют push-модель доставки информации потребителям, в которой потребители занимают пассивную роль и обладают только достаточно ограниченной возможностью выбора каналов информации. В противоположность традиционной push-модель доставки информации, в основе Интернет лежит pull-модель, в которой информация предоставляется по запросу (demand pull). Эта особенность среды Интернет связана с активной ролью потребителей, обусловленной контролем над поиском информации и образу навигации за счет использования механизмов поиска или других источников URL (uniform resource locator). В Интернет также существует возможность реализация push-модели. Интернет может следовать этой модели при помощи push-технологии, в соответствии с которой пользователям не требуется производить поиск информации в Интернет, а достаточно подписаться на каналы по интересующей тематике, а информация в дальнейшем будет автоматически доставляться на компьютеры подписчиков каналов. Технологии среды Интернет развиваются в направлении тесного взаимодействия push- и pull-моделей. Благодаря высокой функциональности Интернет всегда будет существовать возможность навигации пользователей в 16 целях поиска необходимой информации или каких-либо ресурсов. С другой стороны, пользователи всегда будут иметь возможность выбора поставщиков информации и тематики принимаемых push-каналов. Интерактивность. Важной характеристикой среды Internet является интерактивность. Интерактивность - это характеристика протекания процесса коммуникации, определяемая положением по отношению друг к другу коммуникационных сообщений. Для интерактивного взаимодействия характерным является необходимость ответной реакции на приход сообщения или информации, и, плюс к этому, ответ должен находиться в контексте предыдущих сообщений. Исходя из вышесказанного, для среды Интернет интерактивность можно определить как способность отвечать пользователю, подобно некоторому лицу, участвующему в диалоге. Тем самым, интерактивность расширяет и дополняет представление функции компьютера как участника диалога, способного оценить действия пользователя и отвечать в соответствии с этими оценками. В процессе взаимодействия с использованием компьютерной гиперсреды обращение к клиенту может быть модифицировано самой компьютерной гиперсредой на самой ранней стадии установления отношений в зависимости от того, как клиент отреагировал на предшествующие действия. Возвращаясь к основополагающей модели, лежащей в основе Internet, можно сказать, что интерактивность в среде Internet воплощается уже не на уровне персонального общения через среду, а на уровне взаимодействия непосредственно с самой средой. Интерактивный характер взаимодействия позволяет существенно повысить эффективность взаимодействия участников коммуникации. На практике, например, это может сократить время, требуемое для получения необходимой информации для заключения сделки или покупки. В то же время, интерактивный характер среды предлагает возможности приспособления связи точно к особенностям индивидуального клиента. Гипертекст. Не менее важной особенностью среды Internet является ее гипертекстовая природа. Первая в мире система, основанная на гипертексте, была предложена более пятидесяти лет назад одним из создателей первой ЭВМ (Ванневар Буш). Система называлась Метех и состояла из «устройства, в котором пользователь хранит отдельные книги, записи и коммуникации, и которое механизировано таким образом, что обращение к нему осуществляется гибко и быстро». Нельсон (Nelson) в 1967 году описывал гипертекст как сеть указателей и ассоциаций, организованных по возможности так же, как это делает человек, организуя и связывая в своем сознании отдельные фрагменты информации. Бомман (Bomman) в 1993 году дал следующее определение гипертекста: «Гипертекст предполагает концепцию непоследовательной записи информации, согласно которой пользователь связывает информационные фрагменты между собой с помощью указателей и 17 связей. В гипертекстовой системе информация представлена в виде узлов и связей». Гипертекст характеризуется нелинейной сетевой формой организации материала, разделенного на фрагменты, для каждого из которых указан переход к другим фрагментам по определенным типам связей. Особенностью гипертекстовой технологии является то, что она ориентирована на обработку информации не вместо, а вместе с человеком, и, как следствие, становится авторской. Удобство ее использования состоит в том, что пользователь сам определяет подход к освоению или созданию материала с учетом своих способностей, знаний и квалификации. Гипертекст содержит не только информацию, но и аппарат ее эффективного поиска. Таким образом, гипертекстовое представление информации обладает преимуществами перед обычным способом, позволяя производить более эффективное представление и усвоение информации. Мультимедиа. Благодаря появлению средств мультимедиа стала возможной компьютерная интеграция статического (текст, графики, рисунки) и динамического (аудио, видео, анимация) содержимого. Комбинация узлов и связей в системе гипертекста со средствами мультимедиа позволило создать новую среду, принципиально отличную от простого сочетания этих двух компонентов. Гипермедиа – это способ представления информации и доступа к ней. Ее концепция базируется на модели информационного пространства, представленного в виде графа, узлы которого содержат информацию, а семантические связи представлены дугами графа. Информация, хранящаяся в истинной системе гипермедиа, должна быть представлена всеми возможными формами, которые может воспроизвести современный компьютер. Таким образом, гипермедиа совмещает в себе радио (аудио), телевидение (динамическое изображение), прессу (текст, рисунки, фотографии) и компьютер (видеотерминал) посредством гипертекстовых связей, лежащих в основе компьютерной гиперсреды. Эффект присутствия. Важной чертой коммуникационной модели Интернет является понятие «эффект присутствия», характеризующее процесс общения клиента с окружающей средой, состоящей из: окружающей обстановки, помещения, рабочего места с компьютером и т. п., и среды, создаваемой компьютерными гиперсредствами. Соотношение степеней воздействия на клиента этих двух составляющих определяет степень «эффекта присутствия». Следует отметить, что «эффект присутствия» по своей природе в большей степени связан с интерактивным общением и с самой компьютерной гиперсредой, нежели с общением через нее. Важным свойством среды при этом является ее «прозрачность» для клиента, которая при персональном общении позволяет протекать диалогу наиболее естественно, а при общении с гиперсредой 18 позволяет последней реализовать в полной мере присущие ей свойства «виртуальной реальности». Сетевая навигация. Сетевая навигация может быть определена как процесс самоопределяемого движения в компьютерной гиперсреде. Метод нелинейного поиска и затребования информации, лежащий в ее основе, предоставляет клиенту как свободу выбора, так и возможность контроля, осуществляемого на более высоком уровне по сравнению с весьма ограниченными средствами навигации, доступными в обычных средствах массовой информации (телевидение, печать). Представленные данные показывают широкий диапазон видов коммуникаций в среде Интернет в зависимости от используемых средств. При решении конкретных задач необходим отдельный анализ каждого из сервисов Интернет на предмет необходимости его использования и оценки его эффективности.

WEB-серверы в Интернет. Генерация содержимого на стороне клиента Цель лекции: ознакомление с различными технологиями доступа в Интернет, иметь представление о программе CGI, которая запускается WEBсервером в реальном времени. Содержание лекции: «Последняя миля». Сеть с коммутацией каналов. Модем. Генерация содержимого на стороне клиента. Большинство из этих пользователей не имеет канала для высокоскоростного доступа к Сети, аналогичного тому, который имеет провайдер. Технологии, по которой осуществляется связь между абонентом и точкой присутствия провайдера, получила называние технологии последней мили. Название это условно, а на практике расстояние, о котором идет речь, конечно, не обязательно равняется одной миле. В большинстве случаев «последняя миля» является узким местом в цепи каналов доставки информации из Сети на компьютер пользователя. Технология последней мили доступа в Интернет может быть самой различной (это может быть и 20 высокоскоростная выделенная линия, и медленное сеансовое подключение по телефонной сети общего пользования), но принцип «чем выше скорость доступа, тем выше плата за использование канала» является универсальным. Существует множество технологий, которые позволяют использовать уже имеющуюся инфраструктуру – телефонные линии, сети кабельного телевидения и др., для осуществления доступа в Интернет. Различные технологии доступа в Интернет: модемный доступ по телефонной линии, доступ по радиоканалу, доступ по сети кабельного телевидения, подключение посредством силовой сети и, наконец, с помощью спутникового канала. Несмотря на столь различные способы соединения с Интернетом, для пользователя разница заключается лишь в устойчивости соединения, скорости передачи данных и времени отклика. Все ресурсы Интернета доступны ему независимо от средств, с помощью которых он соединен с провайдером. В середине 1980-х годов появились модемы, передающие данные со скоростью 1200 бит/с. В начале 1990-х годов был взят рубеж в 9,6 Кбит/с, и скорость продолжала увеличиваться: 19,2; 28,8; 33,6 Кбит. В 1998 году появились модемы, работающие со скоростью 56 Кбит/с. Современные модемы – это достаточно сложные устройства, которые используют более сложные схемы модуляции, и, кроме того, упаковывают данные при передаче, однако основной их принцип работы остался прежним. Клиентский компьютер выдает в коммуникационный порт последовательность нулей и единиц, которые могут передавать любые команды и данные. Модем принимает данные, разделяет их на команды и на информацию, которую необходимо передать по телефонной линии, и осуществляет передачу.

Статитические и динамические WEB-сайты. Технология CGI. Статический WEB-сайт — сайт, состоящий из статичных html (htm, dhtml, xhtml) страниц составляющих единое целое. Содержит в себе (в виде HTML-размеченных) текст, изображения, мультимедиа содержимое (аудио, видео) и HTML-теги. Теги бывают как служебные, предназначенные для обозревателя, так и предназначенные для размещения, формирования внешнего вида и отображения информации. Все изменения на сайт вносятся в исходный код документов (страниц) сайта, для чего необходимо иметь доступ к файлам на WEB-сервере. Обычно статический WEB-сайт представляет собой набор файлов HTML, размещенных на WEB-сервере. Достоинства и недостатки представлены в таблице 5.1. Динамический WEB-сайт — сайт, состоящий из динамичных страниц — шаблонов, контента, скриптов и прочего, в виде отдельных файлов. Страница сайта, показываемая в итоге браузеру пользователя, формируется на 23 стороне сервера динамически, по запросу, из страницы-шаблона и отдельно хранимого содержимого (информации, скриптов и др.). Таблица 5.1- Достоинства и недостатки Достоинства Недостатки Для создания страницы не нужно знать языки WEBпрограммирования Невозможность динамической генерации содержимого Хорошая кэшируемость страницы Невозможность полноценной поддержки посетителей (выбор внешнего вида, поддержка браузеров, cookie) Быстрая скорость загрузки страниц Для наполнения сайта информацией необходимо получать доступ к файлам-страницам посредством FTP, или сторонним WEBскриптам, позволяющим редактировать страницы Минимальные требования к веб-серверу и минимальная нагрузка на него При большом количестве страниц (файлов), если возникает необходимость внести однотипные изменения (дизайн, оформление, добавление новых разделов) необходимо использовать стороннее ПО (утилиты) Простота переноса на другой сервер или локальный компьютер Сайт-визитка — содержит самые общие данные о владельце сайта (организация или индивидуальный предприниматель). Вид деятельности, история, прайс-лист, контактные данные, реквизиты, схема проезда. Специалисты размещают своё резюме. То есть подробная визитная карточка Возможность прямого просмотра файла в браузере, без использования промежуточного ПО (WEB-сервера, CGI) Каталог продукции — в каталоге присутствует подробное описание товаров/услуг, сертификаты, технические и потребительские данные, отзывы экспертов и т. д. На таких сайтах размещается информация о товарах/услугах, которую невозможно поместить в прайс-лист 24 Редактирование собственно содержимого (как и страницы-шаблона) может производиться как средствами самого сайта, так и с применением стороннего ПО. Возможность править все страницы предоставляется только определенной категории пользователей (например администраторам, или же зарегистрированным пользователям). Как правило для отображения любого количества однотипных страниц используется одна страница-шаблон, в которую подгружается соответствующее содержимое, это позволяет единомоментно корректировать внешний вид сайта (множество всех его страниц), редактируя всего лишь один шаблон. В некоторых случаях к правке определенного веб-контента допускаются анонимные пользователи, что бывает реже (например, на форумах — добавление сообщений). Процесс получения содержимого сайта обычно выглядит следующим образом: 1) Генерация содержимого на стороне сервера. 2) Передача сгенерированной странички клиенту. 3) Генерация содержимого на стороне клиента. Генерация содержимого на стороне сервера. Сервер получает запрос от Клиента (например, page.ru/index.php) и запускает обработку файла-скрипта (в данном случае - index.php) интерпретатором. Языки программирования на Серверной стороне используются разные, наиболее часто встречаются, например: Java, PHP, Perl, ASP.NET, Ruby и другие. Именно на этой стадии происходит выборка необходимой информации из баз данных и наполнение ею страницы, после чего готовая страница передаётся Клиенту. Генерация содержимого на стороне клиента. После того, как страница получена Клиентом с Сервера, программабраузер обрабатывает её и отображает Пользователю, при этом исполняя скрипты Клиентской стороны, если они были указаны в странице и получены. На Клиентской стороне используется JavaScript, который может использоваться как для минимальных, невидимых глазу операций (например, проверки на правильность задания паролей при регистрации на сайтах), так и глобальных последовательностей и приложений. Комбинированная генерация. Чаще всего в жизни встречается именно комбинация этих двух методов генерации — весь «новый интернет» основан на нём, это, и «умная строка с подсказкой вариантов» у поисковых систем, и «редакторы» в форумах, и всплывающие меню, и многое другое. После набора в адресной строке браузера необходимого URL, браузер получает информацию об используемом протоколе (HTTP) и имени сервера. Браузер обращается к DNS-серверу, для того чтобы перевести имя сервера в IP-адрес. На основе полученного IP-адреса браузер устанавливает связь с 25 искомым WEB-сервером и, используя протокол HTTP, запрашивает искомый ресурс. Сервер посылает браузеру HTML-страницу, которая хранится на сервере. Браузер считывает HTML-тэги, воссоздает страницу на экране вашего компьютера, и вы видите результат вашего запроса. Обычно даже простая WEB-страница содержит не только текст, но и графику, т. е. состоит из нескольких файлов разного типа. Для того чтобы браузер мог распознавать эти файлы, сервер информирует о том, какой файл будет отправляться (текст в формате HTML, или графика в формате JPG и т. д.), и после этого передается содержание файла. Несмотря на тот факт, что обычно WEB-страница состоит из многих файлов, за время одного запроса WEB-сервер посылает только один файл. То есть, получив HTML-текст и найдя в нем, например, ссылку на графический элемент, браузер посылает новый запрос на сервер (причем необязательно на тот же самый сервер, с которого пришел HTML-текст). Для того чтобы скачать каждый новый файл, браузер должен послать новый HTTP-запрос. При этом, поскольку современные серверы и браузеры работают в многопоточном режиме, одновременно может выполняться несколько запросов. Если запрашиваемого ресурса по данному адресу нет, то WEB-сервер выдаст сообщение 404/File not found (404/Файл не найден). Технология CGI. Страницы, которые были созданы по вашему запросу динамически - «сформированы на лету». Например, любая книга отзывов предоставляет вам определенную форму, в которую вы добавляете свой текст и затем, когда вы в следующий раз открываете эту страницу, она содержит новое сообщение. Одной из технологий, позволяющих добавлять динамическое содержание в WEB-страницы, является CGI(Common Gateway Interface). Она позволяет ассоциировать с тем или иным URL не статический документ, а программу, в результате работы которой могут быть сформированы данные в реальном времени. Например, если вы хотите предоставлять мгновенные погодные данные в некотором районе, вы должны каждый раз генерировать новую страницу. Это может быть реализовано на основе CGI-технологии. В момент обращения на сервер на нем запускается CGI-программа, которая обращается к цифровому измерительному устройству и выдает сведения о температуре, давлении и так далее. Каждый раз, обращаясь на этот адрес за справкой, вы будете получать текущие значения. Другой пример: когда вы заполняете некоторый запрос в поисковой системе, то в ответ получаете результат работы CGI-программы в виде набора искомых адресов. CGI-программу можно представить как часть WEB-сервера, которая запускается WEB-сервером в реальном времени. Сервер передает запросы пользователя CGI-программе, которая их обрабатывает и возвращает результат своей работы на экран пользователя. С точки зрения клиента нет никакой разницы, что находится по адресу конкретного URL - статический документ или CGI-программа. Браузер воспринимает информацию одинаково вне зависимости от того, сформирована ли она «на лету» или это статическая 26 страница. Результат работы CGI-программы имеет тот же формат, что и статический документ. Под термином CGI понимают не только программу, но и протокол. В этом смысле CGI - это стандартный способ для WEB-сервера передать пользовательский запрос прикладной программе и получить данные для передачи их пользователю. Протокол CGI пересылки данных между сервером и приложением является частью протокола HTTP. Большая часть CGI-программ является CGI-скриптами. Скриптом называют набор инструкций, которые интерпретируются или выполняются другой программой. Некоторые языки, такие как Perl, JavaScript, задумывались именно как скриптовые языки или, как их еще называют, языки описания сценариев. В принципе CGI-программы могут быть написаны как на скриптовых языках, так и на компилируемых: С, C++, Delphi. Альтернативой технологии CGI является технология компании Microsoft, называемая Active Server Page (ASP), которая построена по тому же принципу: скрипт, включенный в WEB-страницу, выполняется на сервере до того, как страница отсылается пользователю. Существует также ряд других технологий, работающих по тому же принципу. В отличие от схемы, где динамическое содержание формируется на стороне сервера, можно также генерировать динамическое содержание страниц уже на стороне клиента. В последнем случае активные документы хранятся на WEB-серверах и скачиваются на локальный компьютер так же как и статические страницы, а после того, как программа активного документа оказывается на локальном компьютере, она выполняет на нем определенные вычисления, и результаты этих вычислений отображаются на экране. Соответственно, скорость отображения данных на экране не зависит от скорости связи с удаленным сервером, поскольку вывод активного документа происходит только после его загрузки на локальный компьютер. Следует при этом отметить, что загрузка программы, служащей для формирования документа, может занимать весьма ощутимое время. Для создания активных документов могут использоваться различные технологии: это могут быть приложения, написанные на JavaScript, Java-апплеты и элементы управления ActiveX.

Технологии поиска в Интернет. Принципы поиска нужной информации В Интернете размещены миллионы сайтов, причем наряду с актуальной информацией соседствует много устаревших ресурсов. Интернет - это наиболее демократичный источник информации, где нет единоличного управления. Каждый может разместить в Сети собственный ресурс. В результате мало кто озабочен тем, чтобы избежать дублирования информации или следовать стандартам. Не зря бытует мнение, что в Сети есть все, но найти там что-либо непросто. Видимо, для того чтобы находить, нужно уметь искать. В настоящем разделе сделан обзор инструментов поиска в сети Интернет, объясняется механизм работы поисковых систем и даются практические рекомендации по оптимизации поиска. Для поиска в Интернете предназначены различные инструменты: поисковые машины (поисковики), индексированные каталоги (рубрикаторы), рейтинги, метапоисковые системы и тематические списки ссылок, онлайновые энциклопедии и справочники. При этом для поиска информации разного типа наиболее эффективными оказываются различные категории инструментов поиска. Рассмотрим каждую категорию в отдельности. Индексированные каталоги Каталог представляет собой данные, сгруппированные по темам в виде иерархических структур. Тематические разделы первого уровня определяют наиболее популярные, максимально широкие темы, такие как «спорт», «отдых», «наука», «магазины» и т. д. В каждом таком разделе есть подразделы. Таким образом, вы можете уточнять интересующую вас область, путешествуя по дереву каталога, постепенно сужая область поиска. Например, при поиске учебных заведений цепочка может иметь вид: Образование -> Учебные заведения -> Высшие учебные заведения -> Институты. Дойдя до нужного подкаталога, вы находите в нем набор ссылок. Обычно в каталоге все ссылки являются профильными, поскольку составлением каталогов занимаются не программы, а люди. Очевидно, что если вы ищете общую информацию по некоторой широкой теме, то целесообразно обратиться к каталогу. Если же вам необходимо найти конкретный документ, то каталог окажется малоэффективным поисковым средством. Помимо каталогов общего профиля, в Сети достаточно много специализированных. В случае, если внутри отдельной темы каталога 28 находится огромное количество ресурсов, возможно дополнительное ранжирование по популярности. Например, в каталоге Яндекса ранжирование идет по индексу цитирования. (Индекс цитирования - это число ссылок на ваш сайт с других сайтов в Сети). Помимо каталогов, в Сети существуют рейтинги. От каталога рейтинг отличается тем, что в нем описание ресурсов делают непосредственно их владельцы, а в каталоге - авторы, т. е. его редакторы. Тематические коллекции ссылок Тематические коллекции ссылок - это списки, составляемые группой профессионалов или даже коллекционерами-одиночками. Очень часто узкоспециализированная тема может быть раскрыта одним специалистом лучше, чем группой сотрудников крупного каталога. Подбор доменного имени Каталог - удобная система поиска, однако если вам нужно попасть на сервер компании Intel или IBM, то вы вряд ли станете обращаться к каталогу. Угадать название соответствующих сайтов нетрудно: www.intel.com, www.ibm.com. Аналогично, если вам необходим сайт, посвященный погоде в мире, его логично искать на сервере www.weather.com. В большинстве случаев найти сайт с ключевым словом в названии предпочтительнее, чем документ, в тексте которого это слово многократно используется. При поиске малоизвестной компании интуитивный подбор адреса может успешно конкурировать с другими приемами поиска, поскольку при подобной системе поиска вы можете установить соединение даже с сервером, который не зарегистрирован ни в одной поисковой системе. Однако очевидно, что подобное угадывание не совсем эффективный способ и, если вам не удается подобрать искомое имя, придется обратиться к поисковой машине. выделяется значительное дисковое пространство. Крупные провайдеры могут выделять под кэширование документов десятки и даже сотни гигабайт памяти. Таким образом, быстрое отображение искомого документа возможно за счет того, что постоянно запрашиваемые документы могут храниться не только на сервере разработчика документа, но также «ближе к пользователю» на прокси-сервере провайдера или непосредственно на компьютере пользователя.

Прокси-сервер крупного ISP, имеющего дело с тысячами клиентов, удовлетворяет около 50% обращений непосредственно со своего диска. Обычно сервер ISP связан с серверами других интернет-провайдеров региона. Поэтому если интересующий клиента документ не находится в кэше проксисервера провайдера, он может быть найден на других прокси-серверах. Таким образом, количество пользователей кэш-пространства увеличивается во много раз. Кэширующие прокси-серверы могут быть установлены не только ISPпровайдерами, но и крупными компаниями, которые хотят снизить нагрузку на сеть и оптимально обрабатывать запросы. Срок годности документов. Для того чтобы избежать ситуации получения устаревшего кэшированного файла, существуют правила, позволяющие определить, в каких случаях можно представить на запрос кэшированный документ, а когда нет. Часть этих правил прописана в протоколе HTTP, другие задаются в настройках браузера и администратором прокси-сервера. Есть ряд критериев, по которым происходит принятие решения о кэшировании на прокси-сервере. Например, если объект помечен как конфиденциальный, то он не будет кэшироваться. Аналогично существуют критерии, по которым происходит решение о возможности отправки кэшированного документа на запрос клиента.

Что такое технологии веб-разработки

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

Здесь поговорим про интерфейсные и серверные технологии.

Давайте сначала определим каждый из этих терминов.

Front-end (интерфейсные) технологии

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

Back-end (серверные) технологии

Внутренние технологии предназначены для «серверной части» вашего сайта или приложения. Они хранят и упорядочивают данные и следят за тем, чтобы на интерфейсе всё работало. Например, когда пользователь предоставляет учетные данные для входа в приложение социальной сети, используются внутренние технологии для проверки правильности этих учетных данных. После проверки учетных данных сервер отправит обратно имя профиля, изображение и другую связанную информацию.

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

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

HTML5- самая последняя версия HTML, определяет большое количество интерфейсов прикладного программирования (службы интеграции API), которые можно использовать с JavaScript для создания более интерактивного и динамичного сайта:

• Canvas: Canvas – это элемент HTML5, используемый для рисования изображений и фигур и управления ими. Его также можно использовать для более сложных случаев, таких как игровая графика и анимация.
• Web Storage: используется для хранения информации прямо в браузере. Например хранение информации для входа в систему и сохранение пользовательских настроек для сайта.
• Service workers: включают сценарий, который продолжает работать в фоновом режиме при открытии веб-страницы и в основном используется на сайтах с автономными возможностями. Он делает страницы доступными в автономном режиме и позволяет использовать веб-уведомления. Может отправлять эти уведомления, даже если ваш браузер не открыт.
• WebSockets: обеспечивает постоянное двустороннее соединение между пользователем и сервером. Наиболее распространенные варианты использования – это чаты и уведомления в веб-приложениях.

 CSS

Каскадные таблицы стилей, сокращенно CSS, определяют стиль и эстетику веб-страницы. В то время как HTML используется для структурирования веб-страницы, CSS определяет внешний вид этой структуры. Это включает макеты страниц, цвета, шрифты и расположение элементов. Если HTML – это скелет веб-страницы, то CSS – это кожа.

 Языки программирования в технологии веб-разработки

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

Есть много разных языков программирования, как и много человеческих языков. Разработчики обычно специализируются сразу на нескольких.

JavaScript

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

Далее все ниже перечисленные языки являются внутренними языками, которые обеспечивают работу веб-сайта или приложения:

PHP

PHP – самый распространенный язык в веб-разработке. WordPress, система управления контентом (CMS), на которой работает 34% Интернета, построена на PHP. Найти хорошего разработчика может быть сложно независимо от языка, но выбор PHP, предоставит вам больший круг разработчиков, из которых вы сможете выбирать и с которыми сможете работать. PHP имеет обширную онлайн-документацию и руководства по устранению неполадок и поддержке.

Python

Python – еще один популярный язык программирования. Он относительно прост и использует уникальный синтаксис, ориентированный на удобочитаемость. Python хорош для приложений и проектов с искусственным интеллектом (AI), статистики, работы с данными и машинного обучения. Его также можно использовать для создания веб-приложений.

Java

Java – язык, популярный в корпоративных компаниях. Он может работать на нескольких платформах, имеет обширную документацию и поддерживается Oracle (крупной и уважаемой компанией-разработчиком программного обеспечения) на случай, если у вас возникнут проблемы. Его также можно использовать для написания приложений для Android.

Rust

Rust – это новый язык, ориентированный на безопасность и особенно безопасный параллелизм. Параллелизм в разработке программного обеспечения означает набор методов, которые позволяют компьютерной программе выполнять несколько различных задач одновременно. Безопасный параллелизм дает вам эффективность, необходимую для выполнения нескольких задач, сохраняя при этом безопасность вашего кода. Rust очень эффективен и завоевал популярность на рынке несмотря на новизну.

Тема 1.2 Основы WEB-дизайна   

Правило 1. Хорошая скорость загрузки страницы

Казалось бы, причем здесь веб-дизайн? Многие специалисты так увлекаются графическими экспериментами, что не обращают внимания на скорость загрузки. А она, если напичкать сайт виджетами, анимацией и видео, неизбежно будет падать. Если сайт будет грузиться медленно - не у каждого посетителя хватит терпения ждать, половина просто покинет ваш ресурс, не успев ничего толком посмотреть. С другой стороны, без графических эффектов тоже никуда. Скучную серую простыню текста никто читать не будет - если у вас, конечно, не “Википедия”.

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

Правило 2. Юзабилити, или удобство использования сайта

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

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

Если всего этого нет - сайт неудобен, посетитель с большой вероятностью покинет его и будет искать другой, в котором позаботились о юзабилити. Никто не будет сидеть и разбираться, где же на сайте находится раздел “Распродажи” - проще закрыть вкладку и вернуться в поисковик. Конкуренты скажут вам за это спасибо, а вот бюджет на продвижение помашет ручкой и скажут “прощай”: считай, деньги улетели в трубу. Да и конверсия падает: посетитель ушел и не успел совершить никаких целевых действий.

Правило 3. Читаемые шрифты

Давно миновала эпоха, когда чем заковыристее были шрифты - тем круче считалось. Случалось, что буквы были такими затейливыми, что слова просто не читались. А на стандартные шрифты накладывались эффекты и цвета. Сейчас тренды сменились: чем шрифты проще, тем лучше. Посмотрите, как оформляют сайты крупные компании и интернет-магазины: они используют крупные читаемые шрифты, которые разберет даже младенец. Еще одно правило: на странице должно быть не более 2-3 разных шрифтов. Если больше - это граничит с аляпистостью и безвкусицей. Допустимо использовать в логотипе один шрифт, оффере - второй, в тексте - третий, и достаточно.

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

Правило 4. Умеренная цветовая палитра

Тут тоже действует правило: не более 3 цветов на странице. Допускаются оттенки и полутона, но не более. Черный, красный, желтый и зеленый - это уже перебор. За буйством красок посетитель просто не заметит полезную информацию. Фирменный стиль: помимо шрифтов, подберут еще и корпоративные цвета, которые в дальнейшем будете использовать для любых промо-материалов, в том числе и оформлении сайта, паблика в соцсетях, ютуб-канала и других.

Правило 5. Современный фон

Еще один привет из девяностых: сложносочиненный фон, или подложка, для сайта. До сих пор используется в среде начинающих веб-дизайнеров, на бюджетных сайтах доменов второго и третьего уровня, очень активно - в “Живом журнале”. Наивно думать, что если продаете украшения - фоном должны идти золотые россыпи, если продукты - груды еды. Все это слишком очевидно и банально. Нет, картинки в тему всегда актуальны, но для фона лучше выбрать что-то необычное, неизбитое. Чистые тона и градиенты, трехмерные изображения, виртуальная реальность - вот что модно сейчас.

Правило 6. Единый стиль

Шрифты - строгие, цвета - веселенькие, а картинки надерганы из разных стоков по принципу “пусть будет, да побольше” Одна форма заказа горизонтальная, другая - вертикальная, и в каждой разные шрифты. Стоп, так не пойдет: продающий дизайн предполагает единство стиля.

Правило 7. Золотое сечение

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

Если не заморачиваться с формулой, пропорции золотого сечения отдельных элементов составляют 3/2, или 5/3, и так далее. По этому принципу делаются основные элементы сайта. Например, когда при разработке лендинга нужно разместить на странице несколько блоков, золотое сечение приходит на помощь. Идеальная пропорция ширины каждого блока выглядит примерно так:

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

Правило 8. Правило третей

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

Следовательно, рядом с этими точками нужно размещать самую важную информацию - чтобы наверняка увидели. Это может быть кнопка с call to action - призывом к действию, или форма заказа. Считается, что самая “активная” точка - левый верхний угол. Присмотритесь: именно там на сайтах по традиции располагается логотип.

Правило 9. Знание эффекта “баннерной слепоты”

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

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

Хороший веб-дизайнер знает несколько правил, как бороться с баннерной слепотой, и обязательно порекомендует их заказчику. Впрочем, прочитав эту статью, вы и сами будете в курсе. Итак, правила:

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

· использовать фото человека, который смотрит в направлении рекламного баннера.

Правило 10. Кнопка “вверх”

Казалось бы, такая мелочь, а как важно! Представьте, что у вас интернет-магазин с огромным каталогом товаров или крупный новостной портал - чтобы пролистать сайт вниз, нужно достаточно долго скроллить (крутить колесиком мыши) вниз. А как потом вернуться назад? Многие веб-дизайнеры забывают об этом, заставляя посетителей отматывать страницы вверх.

Правило 11. Новая ссылка - та же вкладка

Любая внутренняя ссылка с вашего сайта (баннер на главной, ведущий на страницу распродаж, статья в блоге, которая отсылает посетителя в карточку товара, видео на “Ютубе”, иконка соцсетей, в которых представлен ваш ресурс - что угодно) должна открываться в том же окне. Много копий сломалось на эту тему: пользователям удобнее, когда ссылка открывается в новом окне, особенно когда ссылок много. Но в этом случае они могут не нажать кнопку “назад” и не вернуться на самую первую страницу, а то и забыть, о чем там вообще говорилось. А это значит, что они могут покинуть ваш сайт, не досмотрев важную информацию. Поэтому  внутренние ссылки открывать во внутренних же окнах, а внешние - в новых. Например, если ссылки ведут на дружественный сайт - пожалуйста, пусть открывается в новом. Если направляют на свой же паблик в соцсети - тоже без проблем.

Правило 12. Больше визуализации!

Если на сайте и так много информации, облегчите жизнь пользователям: там, где можно применять иконки или анимацию - применяйте. Например, уже повсеместно используются кнопки соцсетей, корзина для складывания товара, значок лупы - для поиска, и так далее.

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

Правило 13. Адаптивная верстка

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

ИСПОЛЬЗОВАННАЯ ЛИТЕРАТУРА

1. Компьютерная графика и web-дизайн : учеб. пособие / Т.И. Немцова, Т.В. Казанкова, А.В. Шнякин ; под ред. Л.Г. Гагариной. — М. : ИД «ФОРУМ» : ИНФРА-М, 2020. — 400 с. + Доп. Материалы

2.        Компьютерные сети : учеб. пособие / А.В. Кузин, Д.А. Кузин. — 4-е изд., перераб. и доп. — М. : ФОРУМ : ИНФРА-М, 2019. — 190 с

3.        Интернет-технологии : учеб. пособие / С.Р. Гуриков. — М. : ФОРУМ : ИНФРА-М, 2019. — 184 с. — (Высшее образование: Бакалавриат).

1.        Ф.Кобурн, П.Маккормик Эффективная работа с Corel Draw СПб: «Питер Пресс» 2019.- 728с.

2.        Р.Борланд MS Word Шаг за шагом Углублённый курс М.:«Эком» 2020.- 356с.

3.        Скотт Келби Adobe InDesign CS. Советы знатоков. Верстка книг, газет, журналовМ.:«Вильямс» , 2021.- 256с.

4.        А.Н.Божко Photoshop CS самоучитель М.:«Кудиц Образ» 2020.- 591с.