ТЕХНОЛОГИИ ВЕБ-ДИЗАЙНА
Бачурина Т.В.
ИНТЕРНЕТ
Всемирная система объединённых
компьютерных сетей, построенная на базе
протокола TCP/IP.
2
Серф Винт и Роберт Кан – создатели протокола
передачи данных TCP/IP , который по сей день
является стандартом для передачи данных в
Интернете.
3
КЛЮЧЕВЫЕ ПРИНЦИПЫ ИНТЕРНЕТА
Интернет состоит из многих тысяч корпоративных, научных,
правительственных и домашних компьютерных сетей.
Объединение сетей разной архитектуры и топологии стало
возможно благодаря протоколу IP (англ. Internet Protocol) и
принципу маршрутизации пакетов данных.
4
На стыках сетей специальные
маршрутизаторы (программные или
аппаратные) занимаются автоматической
сортировкой и перенаправлением пакетов
данных, исходя из IP-адресов получателей
этих пакетов.
5
Протокол IP образует единое
адресное пространство в масштабах
всего мира, но в каждой отдельной
сети может существовать и
собственное адресное
подпространство, которое
выбирается исходя из класса сети.
6
В результате между отдельными сетями Интернета не
возникает конфликтов, и данные беспрепятственно и точно
передаются из сети в сеть по всей планете и ближнему
космосу.
7
3 июня 2011 года была принята резолюция ООН,
признающая доступ в Интернет базовым правом
человека. Отключение конкретных регионов от
Интернета с июня 2011 года считается нарушением
прав человека.
8
9
10
11
12
Интернет образует глобальное
информационное пространство, служит
физической основой для Всемирной паутины
World Wide Web ( WWW).
13
Разница между понятиями
Интернет и Веб (www)
14
Интернет: сеть компьютеров, объединенных
каналами связи и использующих протоколы TCP/IP
для связи.
15
Веб: сеть сайтов, использующих гиперссылки
для переходов от страницы к странице.
16
Вид
графического
дизайна,
направленного на разработку и оформление
объектов информационной среды интернета,
призванного обеспечить им высокие
потребительские свойства и эстетические
качества
ЦЕЛИ:
 формирование у пользователей положительного
восприятия образа объекта рекламного
продукта,
 простота и четкость структуры сайта интуитивно
понятного пользовательского интерфейса,

удобство навигационной системы.
ПО СРАВНЕНИЮ С ДРУГИМИ СМИ САЙТ
ИМЕЕТ СЕРЬЕЗНЫЕ ПРЕИМУЩЕСТВА:
1. Материалы, размещенные на сайте, будь
то текст, иллюстрация или видеоролик, не
ограничены размером газетной полосы или
длительностью телепередачи.
Содержание этих текстов не
подвергается практически никакой
правке (исключения составляют разве
что крупные проекты, имеющие своих
штатных редакторов).
Технически, по сравнению с другими СМИ, создание
сайта очень просто и не трудоемко. Тем более
сейчас, когда появилось огромное количество
самых разнообразных систем управления сайтами.
ОДНАКО ВСЕ ЭТИ ПРЕИМУЩЕСТВА ИМЕЮТ И
ОБОРОТНУЮ СТОРОНУ. ИТАК, НЕДОСТАТКИ:
Отсутствие
ограничений по
размеру часто приводит
к тому, что на сайты
выкладывают
необоснованно
длинные неинтересные
тексты, невероятных
размеров фотографии
и видеоролики, которые
бывает крайне трудно
скачать.
ОТСУТСТВИЕ ЦЕНЗУРЫ НАЛАГАЕТ
СЕРЬЕЗНУЮ ОТВЕТСТВЕННОСТЬ НА
ВЛАДЕЛЬЦА САЙТА ЗА СОДЕРЖАНИЕ
МАТЕРИАЛОВ.
ТЕХНИЧЕСКАЯ ДОСТУПНОСТЬ САЙТОВ
ПРИВОДИТ К ПОЯВЛЕНИЮ В СЕТИ
КОЛОССАЛЬНОГО КОЛИЧЕСТВА
НЕКАЧЕСТВЕННЫХ НЕПРОФЕССИОНАЛЬНО
ВЫПОЛНЕННЫХ ПРОЕКТОВ, ЧТО,
ЕСТЕСТВЕННО, ОТТАЛКИВАЕТ
ПОСЕТИТЕЛЕЙ.
ПОЭТОМУ ЕСЛИ ВЫ ХОТИТЕ СДЕЛАТЬ ВАШ
ПРОЕКТ ИНТЕРЕСНЫМ И ПОСЕЩАЕМЫМ, ТО,
КОНЕЧНО ЖЕ, ЛУЧШЕ ОБРАЩАТЬСЯ ЗА
ПОМОЩЬЮ ПО ЕГО СОЗДАНИЮ К
ПРОФЕССИОНАЛЬНОМУ ВЕБ-МАСТЕРУ.
КАКОВЫ
ПСИХОЛОГИЧЕСКИЕ
АСПЕКТЫ ВОСПРИЯТИЯ
ЧЕЛОВЕКОМ РАЗЛИЧНЫХ
ФАКТОРОВ ПРИ
ЭКСПЛУАТАЦИИ WEBСАЙТОВ?
User Interface (дословно «пользовательский
интерфейс»)
НАС ИНТЕРЕСУЕТ:
 процесс восприятия человеком разнородной
информации;
 ошибки в web-дизайне;
 условия для правильного подхода к дизайну
сайта.
СИМВОЛИКА WEB-ИНСТРУМЕНТОВ:
 Текст,
 Графика,
 Цвет,
 Изображения.
МАГИЯ СЛОВ…
 Выдержанность стиля (позволяет воспринимать
информацию единым блоком).
 Стилистическая направленность (насколько
сложен язык, которым излагается материал,
насколько специфичен используемый
разработчиком словарный запас).
 Эмоциональная насыщенность текста : включение
в текст личных примеров, большого количества
сравнительных прилагательных
 «телеграфный стиль»: короткие и
простые слова, фразы, предложения
(26-40 символов в строке);
 заголовки – для привлечения
внимания читателя;
 «эмоции» в шрифтах.
ЖИВОПИСЬ ДЛЯ САЙТА…
Графические элементы и
фотографии придают электронной
странице завершенность, что
является существенным фактором
для ее целостного восприятия
потребителем
 Слишком крупные фотографии указывают на
энергичность автора;
 неброские иллюстрации - на спокойствие и
консерватизм;
 Прямые линии и углы подчеркивают
солидность;

волнистые линии – либеральность;

а острые углы - настойчивость.

Favicon (сокр. от англ. FAVorite ICON — «значок для
избранного») — значок веб-сайта или веб-страницы.
Отображается браузером во вкладке перед
названием страницы, а также в качестве картинки
рядом с закладкой
Основной цвет или тон, на котором
размещается изображение или текст; часть
изображения, образующая задний план
• Графический знак, эмблема или символ,
используемый территориальными
образованиями, коммерческими
предприятиями, организациями и частными
лицами для повышения узнаваемости и
распознаваемости в социуме.
• Применяются логотипы для словесного или
графического обозначения какой-либо
информации (в частности, о товаре, компании
или организации)
Графическое изображение рекламного
характера. Баннеры размещают для
привлечения клиентов, для информирования
или для создания позитивного имиджа.
ТИПЫ И РАЗМЕРЫ БАННЕРОВ

Горизонтальные прямоугольники:
728 x 90, 468 x 60, 234 x 60, 88 x
31, 120 x 60, 120 x 90.

Вертикальные прямоугольники:
300 x 600, 160 x 600, 120 x 600,
120 x 240, 240 x 400.

Квадраты: 250 x 250, 125 x 125.

«Почти квадраты»: 336 x 280, 300 x
250, 180 x 150.
Pop-up («попап») — баннер, который перекрывает изображение
сайта, открываясь в отдельном окне поверх предыдущего.
 Pop-under («попандер») — баннер, который не перекрывает
изображение сайта, открываясь в отдельном окне под
предыдущим.

Float («Reach-media») — всплывает над страницей сайта и имеет
крестик для закрытия, который в отдельных случаях может
появляться через несколько секунд.
 Top Line («топлайн») — баннер-растяжка, занимающий всю
верхнюю часть страницы в ее ширину.
 «Расхлоп» — картинка увеличивается или «расхлопывается» если
навести на него курсор мыши.

Интерактивная графика - важный раздел компьютерной
графики, в котором есть возможность динамически
управлять содержимым изображения, его формой,
размером и цветом на поверхности дисплея с
помощью интерактивных устройств управления.
Исторически первыми интерактивными
системами считаются системы
автоматизированного проектирования (САПР),
которые появились в 60-х годах.
Анимация- визуальное изменение изображения,
которое происходит за счет смены в небольшие
промежутки времени его формы или других
параметров.
Яркие тенденции веб-дизайна
WebGL (Web Graphics Library)
VR (Виртуальная реальность)
СИСТЕМЫ ЧАСТИЦ
Полноэкранное видео с интерактивными сценами и
элементами
Анимационные рассказы
Страница в рамке
SVG-анимация
ОШИБКИ В WEB-ДИЗАЙНЕ
Чего не должно быть на сайте?
«АНИМАЦИЯ»
Если ее необоснованно много, она не
только нагружает и увеличивает
размер страницы, но еще и отвлекает
и раздражает посетителя
«МНОГО ГРАФИКИ»
Не следует использовать графику на сайте без
необходимой причины.
Если все же она используется, значит, это должна быть
определенная цель, например: привлечь внимание
посетителя.
Все графические изображения обязательно должны
быть оптимизированы для интернета.
«КНОПКИ»
…Типичная ошибка начинающих web-строителей
-размещение на главной странице до 10-20
кнопок
 Счетчики,
 топы,
эмблемы каталогов,
 ссылки на дружественные сайты и т.п.

«ДЛИННЫЕ ТЕКСТЫ»
Пользователь десктопной (полной) версии
сайта не должен прокручивать экран
больше, чем на 2,5-3 раза!
«ФОН»
цветастые,
отвлекающие,
утомляющие глаза,
разнотипные фоны…
Наиболее оптимально использование белого фона и
черного текста на страницах сайта.
Если же нужно изменить цвет фона страниц сайта, то
целесообразно использовать светлые, мягкие
тона цветов.
«ОШИБКИ»
Всегда следует проверять
орфографию!
«ВЫПАДАЮЩИЕ ОКНА»
Использование popup окон
(всплывающих
окон) является
нарушением
этикета!
«ГОРИЗОНТАЛЬ»
При фиксированном дизайне
(в пикселях) появляется
горизонтальная полоса
прокрутки.
Следует проверить
свой сайт при
разрешении 800х600
при 256 цветах!
«РАЗНЫЕ ШРИФТЫ»
Не более 5-ти шрифтов на странице!
ВЫВОДЫ:
 Весь текст, размещенный на web-странице
целесообразно разбивать на логические
части, абзацы, а также использовать
заголовки.
 Разнообразие шрифта текста следует свести к
минимальному количеству.
 Выбор предпочтительного цвета человеком
определяется его характером и зависит также
от социального фактора.
 Чрезмерное количество графики и анимации
может отвлекать и раздражать внимание
пользователя.
 Текст,
 цвет,
 графика, изображения
должны соответствовать стилю изложения
основного содержимого, в противном
случае можно не достигнуть целей,
поставленных web-разработчиком.
WEB-ДИЗАЙН В СВОЕМ РОДЕ
- ЭТО ИСКУССТВО,
ТРЕБУЮЩЕЕ, В ПЕРВУЮ
ОЧЕРЕДЬ, ЧУВСТВО МЕРЫ.
ОБЗОР БРАУЗЕРОВ
ДЛЯ ЧТЕНИЯ ВЕБСТРАНИЦ.
ДОСТОИНСТВА И
НЕДОСТАТКИ.
РЕЙТИНГ.
БРАУЗЕР - СПЕЦИАЛЬНАЯ ПРОГРАММА,
ПРЕДНАЗНАЧЕННАЯ ДЛЯ ПРОСМОТРА
ВЕБ-САЙТОВ.
Происходит это с помощью
http запросов к серверу и
получения от него данных,
которые обрабатываются
по
специальным
утвержденным стандартам
и
таким
образом
формируется веб-страница.
ЛУЧШИЕ БРАУЗЕРЫ:
РЕЙТИНГ ДЛЯ WINDOWS
1 МЕСТО - GOOGLE
CHROME
Самый популярный
обозреватель на
сегодняшний день!
Более половины
ПК, телефонов и
планшетов
используют для
серфинга в
интернете именно
этот браузер!
Достоинства:
 хорошая
скорость
работы
странички открываются мгновенно;
 синхронизация закладок и настроек;
 поддержка
всех популярных ОС
Windows
 поиск из адресной строки;
 мгновенный
перевод
страницы
(например,
с
английского
на
русский);
 минимализм: нет ничего лишнего,
все "лишние" настройки спрятаны от
начинающих пользователей;
 возможность быстрой блокировки
рекламы (ссылка на статью).
Для Google Chrome есть
огромное
количество
различных
бесплатных
плагинов, расширений и
тем оформления.
 В Google Chrome доступна
функция
голосового
поиска(« Окей, Гугл»).
Из недостатков:
 может
тормозить
на
недостаточно мощных ПК,
а так же после установки
плагинов

По данным открытой статистики LiveInternet
можно увидеть, что почти 56% пользователей
отдают предпочтение именно Хрому. И число его
фанатов растет с каждым месяцем:
2 МЕСТО - OPERA
Один из самых старых
браузеров, который в
последнее время начал
возрождаться. Расцвет
его популярности был во
времена ограниченного
и медленного интернета .
Достоинства:
 Opera turbo - очень крутая фишка,
которая
позволяет
сжимать
загружаемые
странички,
тем
самым
увеличивая
скорость
открытия сайтов.;
 Потрясающая скорость даже на
слабых компьютерах. Веб-серфер
хорошо оптимизирован для работы
на медленных компьютерах с не
самыми
быстрыми
жесткими
дисками;
 более
1000 расширений для
изменения браузера;
 Опера позволяет экономить до 50%
заряда батареи планшета или
ноутбука.
Недостатки:
 Периодически
возникают проблемы с
корректным
отображением страниц
(не всегда
поддерживают спецсимволы HTML)
 Сложность в переносе
личной информации
(история, закладки и т.д.)
3 МЕСТО - MOZILLA
FIREFOX
Достаточно странный, но
все
равно
популярный
выбор
многих
пользователей - браузер
Mozilla Firefox (известный
как "Лиса").
Достоинства:
 Скорость.
Довольно
спорный
показатель для Лисы. Этот браузер
является весьма шустрым до того
момента, пока вы не поставите
несколько плагинов.
 Боковая панель. Многие поклонники
отмечают, что боковая панель
(быстрый доступ Ctrl+B) - невероятно
удобная
вещь.
Практически
мгновенный доступ к закладкам с
возможностью их редактирования.
 Тонкая
настройка.
Возможность
сделать
браузер
абсолютно
уникальным, "заточить" его под свои
нужды. Доступ к ним - about:config в
адресной строке.
Недостатки:
 При
обновлении
все
установленные расширения
слетают;
 Браузер стал более тяжелым
и частенько подвисает;
 Высокая
ресурсоемкость.
Много
потребляет
оперативной памяти;
 Нельзя выключать картинки
как в Опере, например.
Сокращение доли использования Mozilla
Firefox.
Достоинства:

4 МЕСТО - ЯНДЕКС.
БРАУЗЕР



Достаточно молодой и
современный браузер от
российской
поисковой
системы Яндекс.
наличие турбо режима: позволяет
ускорить открытие некоторых
интернет-страничек и ускорить
воспроизведение
видео
на
сайтах, где оно притормаживает;
синхронизация
закладок
и
настроек (если вы переустановите
вашу ОС Windows - все ваши
закладки останутся на месте);
удобная адресная строка: в ней
можно сразу же видеть подсказки
набираемого запроса для поиска;
У Яндекса есть собственная
технология - Protect, которая
предупреждает пользователя о
посещении
потенциально
опасного ресурса.
Недостатки:
 Навязчивость;
 Многие пользователи жалуются на
скорость открытия новых вкладок,
которая даже затмевает печальную
славу Mozilla Firefox. Особенно
актуально для слабых компьютеров.
 Нет гибких настроек. В отличие от
того же Google Chrome или Оперы,
Яндекс.Браузер не имеет широких
возможностей
адаптации
под
собственные
индивидуальные
нужды.
Достоинства:
5 МЕСТО - MICROSOFT  Полная интеграция с Windows 10. Он
EDGE
работает как полноценное приложение
и использует все возможности самой
современной операционной системы.
 Безопасность. Edge перенял у своего
Самый молодой из
"старшего брата" IE самые сильные
современных
браузеров,
был
стороны, в том числе и безопасный
запущен компанией
серфинг по сети.
Microsoft в марте
 Одним из самых главных преимуществ
2015
года.
Этот
браузера является возможность делать
браузер пришел на
смену
Internet
пометки на странице и делиться ими со
Explorer.
своими
друзьями.
Сохраненные
комментарии будут открываться каждый
раз при загрузке страницы.
Удобный интерфейс. Он обладает
минималистичным
дизайном,
который идеально вписывается в
общий вид Windows 10;
 Встроенный читательский режим
и список чтения;
 Быстрая, внушающая уважение
скорость работы.

Недостатки:
 Расширения.
Разработчики
считают, что уже имеющийся в
Edge набор функций может
удовлетворить
запросы
пользователя,
поэтому
расширения для него пока не
предусмотрены.
 Только Windows 10. Этот браузер
доступен
только
владельцам
последней версии операционной
системы Windows - "десятки".
 Скудное контекстное меню. Оно
выглядит так:
Microsoft Edge стремительно ворвался на рынок
браузеров и его доля растет с каждым днем.
12 критериев качества ресурсов:
•Прозрачность
•Эффективность
•Поддержка
•Доступность
•Ориентация на пользователя
•Реактивность
•Многоязычность
•Совместимость
•Управляемость
•Сохранность
•Производительность
•Посещаемость
92
СОВРЕМЕННЫЙ ДИЗАЙН САЙТОВ
94
Первый в мире веб-сайт появился в Интернете
6 августа 1991 года
На этом сайте описывалось что
такое Всемирная паутина, как
установить веб-сервер, как
заполучить браузер и т. п. Этот
сайт также являлся первым в
мире интернет-каталогом, потому
что позже Тим Бернерс-Ли
разместил и поддерживал там
список ссылок на другие сайты.
95
СЭР
ТИМ БЕРНЕРС-ЛИ
96
ЕСЛИ СРАВНИВАТЬ С ПРЕДЫДУЩИМИ ГОДАМИ, ДИЗАЙН
СОВРЕМЕННЫХ САЙТОВ КАРДИНАЛЬНО ОТЛИЧАЕТСЯ ОТ
ДИЗАЙНА САЙТОВ ДЕСЯТИЛЕТНЕЙ ДАВНОСТИ.
И ДЕЛО НЕ В ТОМ, ЧТО МОДА ИЗМЕНИЛАСЬ, ИЗМЕНИЛАСЬ
САМА СРЕДА, ГДЕ САЙТЫ ФУНКЦИОНИРУЮТ.
В эпоху, когда скорость передачи данных
увеличилась до, казалось бы, бесконечных
параметров, когда мониторы имеют громадное
разрешение и способны вмещать большие
изображения;
Когда при пропускной способности каналов в
десятки мегабайт в секунду, заботиться о
скорости загрузки страницы просто смешно.
Появились новые мобильные платформы,
появились планшеты и ноутбуки, мониторы
которых сильно отличаются по размерам.
И все эти устройства передачи информации
востребованы, особенно популярны стали
мобильные платформы.
А для того, чтобы не терять аудиторию, сайт
должен быть одинаково хорошо представлен
на всех этих устройствах.
Позднее, Веб-дизайн из навороченного
красочного и интересного тематического
изображения превратился в урезанную текстовую
композицию с простыми фоновыми цветовыми
плашками и максимально стилизованными
проволочными иконками.
Это сейчас модно, это обусловлено возможно
потребностями мобильных платформ, которые стали
диктовать
свои
условия
в
силу
своей
востребованности.
Но в целом это скучно и однообразно.
Сейчас в обязанности
дизайнера сайтов входит
задача расположить на
странице унифицированные
шаблонные блоки с текстами
и графикой вместо того,
чтобы проектировать
интересный и
запоминающийся образ.
Сейчас важно, чтобы сайт
имел как можно меньше
графических элементов для
удобного просмотра на
мизерном экранчике
телефона.
И это уже не дизайн, это конструирование в
чистом виде, где отсутствует творческая и тем
более художественная сторона. Дизайн
превратился в банальную верстку причем уже
готовых и используемых всеми элементов.
Сейчас все однообразно и сухо, но зато все грузится
на телефонах и прочих не предназначенных для
просмотра сайтов устройствах. Люди портят зрение,
пытаясь разглядеть что-то на маленьком экране,
вместо того, чтобы комфортно читать информацию с
нормального (подходящего по размеру для чтения)
монитора.
Проигрывает от этой унификации только оформление
(дизайн) сайтов. Все стилизованно, все обезличено до
прямоугольников и локальных цветов, все упрощено и скучно
- вот современный стиль оформления интернет проектов.
Я еще не говорю о появившихся недавно гигантских базах
готовых бесплатных изображений и иконок, которые стали
использовать все и каждый второй сайт не отличить по
оформлению от сотни других.
Хороший дизайн
сайтов
Но не все так плохо, на фоне этого безобразия, разросшегося до планетарных
размеров, работают профессионалы, которые стараются привнести в веб-дизайн
эстетику и красоту, а точнее сохранить то, что там было несколькими годами
раньше.
Таких студий немного, но их сложно не заметить. Их портфолио сильно отличается
от тех поделок, которыми представляется большинство современных
сайтостроителей, выдавая шаблонную верстку за веб-дизайн.
Но даже профессионалам порой бывает сложно идти против стереотипов, это
бизнес, а бизнес и творчество несовместимы. И если все же удается сделать
хороший сайт, отличный от большинства безвкусных поделок - веб дизайнеру есть
чем гордиться.
- 2018 гг.
ВМЕСТО КЛИКОВ – ПРОКРУТКА
Многие уже забыли, как не
просто было прокручивать
страницы
в
недавнем
прошлом.
В 2016 г., когда почти у
каждого есть смартфон, все
поняли,
что
прокручивать
гораздо
проще,
нежели
кликать.
В
мобильном
телефоне
прокрутку
можно
делать
большим пальцем, но точно
попасть в цель тяжелее по
сравнению с десктопом.
Сделать адаптированный мобильный сайт
удобным для пользователей, значит всё
активнее использовать идею превосходства
прокрутки перед навигацией при помощи
кликов.
Разработка
интерактивного
сайта
предполагает
меньше
ссылок,
больше
больших кликабельных областей и кнопок,
увеличивается высота страниц, которые
нужно прокручивать.
Большинство сайтов будут использовать
вместо деления материалов на несколько
страниц длинные страницы с якорями в
заголовках и превратятся в одностраничники,
или возможно в бесконечные страницы такие
как TIME.
2. Фиксированные меню постепенно
отмирают
Адаптированный дизайн предполагает, что
на всех устройствах, сильно отличающихся по
размеру – будет удобно пользоваться навигацией,
поэтому фиксированные меню уходят в прошлое.
Веб дизайнеры теперь могут не стараться впихнуть
всё в верхнюю часть страницы. Такой подход
используется в дизайне типа Medium. Он отображает
полноэкранный заголовок страницы,
контент на
которой открывается после прокрутки.
Используя в дизайне высокие страницы, можно
наполнять их крупными красивыми изображениями.
Все больше сайтов в 2015 будут использовать
вертикальное пространство, и крупные изображения.
3. Динамика жизни ускоряется, значит
сайты должны упрощаться
Сделать адаптированный качественный мобильный сайт – не
простая задача. Поэтому интернет ресурс должен стать
быстрее не только с технической стороны, но и намного
проще для понимания.
Простой дизайн помогает легче воспринимать информацию,
его проще окинуть взглядом.
Мобильные приложения диктуют моду – они опережают вебсайты и предлагают красивые интерфейсы в стиле
минимализма.
Плоский флэт дизайн – это только начало. Тенденция
развивается в направлении интерактивности, простоты и
минимализма. Потому, что минимализм реально лучше
4. Дизайн веб страниц: пиксели умирают
На мониторе десктопа пиксел. Известно даже, сколько что в дюйме – 72
dpi пикселей.
Но в отзывчивом веб дизайне всё сводится к процентам и сеткам. Для
современных дисплеев с высоким разрешением и современных версий
браузеров
пришло
время
для
векторных
картинок.
Такие технологии уже применяются профессиональными дизайнерами, и
скоро большинство из них будут делать адаптированный дизайн для
высококачественных экранов.
5. Создание привлекающей внимание анимации
возрождается
В современном веб дизайне анимация возвращается на
сайты в новом виде. Без анимации плоский дизайн смотрится
довольно уныло.
GIF-анимация эффективно работает, она вернулась, ведь ее
только просто создавать, но и делиться ею.
Мобильные приложения изменили ожидания пользователей,
теперь они применяют движения, чтобы передать смысл,
поэтому разработчики сайтов стремятся сделать примерно то
же.
Для этого применяют технологии CSS-анимации, что
упрощает улучшение дизайна без использования
дополнительных плагинов и устраняет проблемы со
скоростью загрузки и совместимостью.
6. Новый дизайн предполагает, что верстка
будет использовать компоненты (новые
фреймворки)
Веб-технологии постоянно
усложняются, они делаются
менее семантическими. То есть
требуется написание гораздо
меньшего объема кода. И это
стало возможно при помощи
веб-компонентов, которые будут
более активно
распространяться в 2015 г.
Современный веб дизайн создает анимацию и
применяет компоненты взаимодействия от
приложений Android. Если это направление
приживётся, тогда на основе компонентов
будет
появляться
гораздо
больше
Фреймворк - это некий каркас, состоящий из
множества библиотек, облегчающий разработку
программного
продукта.
Другими
словами,
фреймворк - это набор библиотек.
Существует множество самых
разнообразных фреймворков не
только для PHP, но и для
различных ПО.
Одним из самых популярных
фреймворков для PHP, является
Zend Framework. В него входят
возможности,
заметно
упрощающие доступ к базе
данных,
кэширование,
аутентификацию пользователей и
много-много другого.
Разработка интерактивного сайта будет
развиваться в сторону использования CSSформ
Эта тенденция усиливается, потому
что разработка интерактивного сайта
в 2015 году, ориентируется на
мобильные приложения.
Эта крутая технология (CSS shapes)
позволяет встраивать контент в
различные формы, например, в круг.
Это действительно круто, но до тех
пор пока браузеры гарантированно не
будут эту технологию поддерживать,
рискованно тратить время на это и
делать две реализации дизайна для
новых и старых браузеров.
Резюме: что ожидать от веб дизайна в
ближайшие годы
Мобильные
приложения
уже
вытеснили десктопы, но большинство
компаний пока еще хотят сайт, который
будет
хорошо
выглядеть
на
компьютере,
а
работа
его
на
мобильном устройстве — это во
вторую очередь. С 2015 г. эта стратегия
начала активно отмирать. Планшеты и
мобильники уже стали основными
устройствами выхода в интернет.
Сегодня мы наблюдаем, как наилучшие
практики из дизайна мобильных
приложений приходят в веб. С
течением времени разница между
дизайном приложений и веб сайтами
Плоский флэт дизайн уже присутствует повсюду. Это
не только прямые углы и плоские кнопки – самое
главное, что сайты стали более быстрые и простые.
Лаконичность и простота – это не следование моде,
это приоритет будущего.
Становится более актуальным добавлять в посты
качественную анимацию, которая улучшает
восприятие информации.
Скрытые меню и клики постепенно уходят, прокрутка
начинает занимать лидирующее положение.
Веб-компоненты и CSS облегчают создание
интерактивных сайтов, которые все больше похожи
на мобильные приложения.
САЙТ-ВИЗИТКА
Сайт визитка — самый
простой вид сайта. Обычно
сайт-визитка содержит от 1
до 5 страниц. Сайты этого
вида как правило включают
в себя только общую
информацию о владельце
сайта и его контактные
данные. Идеально подходит
для компаний, которые хотят
разместить информацию о
себе и своих услугах в
Интернете
КОРПОРАТИВНЫЕ САЙТЫ
Этот тип сайта лучше всего подходит для серьёзных средних и
крупных фирм. Корпоративные сайты содержат полную
информацию о компании и её деятельности
ИНТЕРНЕТ-ВИТРИНЫ
Основная задача — продавать. На таких сайтах размещается
информация о товарах и контакты, обычно телефоны, по которым
следует звонить желающим приобрести предлагаемый товар.
ПРОМО-САЙТЫ
Предназначены для раскрутки и продвижения какого-либо товара
или бренда.
ТЕМАТИЧЕСКИЕ ПОРТАЛЫ
Содержат информацию по какой-либо конкретной тематике.
ИНТЕРНЕТ-ПОРТАЛЫ
Тип сайтов, содержащих большое количество разнообразной
информации. Как правило, порталы схожи по структуре с
тематическими сайтами, но имеют более развитый функционал и
большее количество сервисов и разделов.
БЛОГИ
Тип сайтов, на которых владелец или редактор блога пишет посты
со своими новостями, идеями или другой постоянно поступающей
информацией.
КАТАЛОГИ САЙТОВ
Вид сайтов, основным содержимым которых являются
структурированные ссылки на другие сайты, а также их краткие
описания.
ПОИСКОВЫЕ СИСТЕМЫ
Предназначенных для поиска страниц в интернете по
определённым запросам.
ПОЧТОВЫЕ СЕРВИСЫ
Предоставляют интерфейс для работы с электронной почтой.
ИНТЕРНЕТ-ФОРУМЫ
На сайтах этого вида пользователи могут создавать темы, а также
комментировать их.
САЙТЫ-ХОСТИНГИ
На сайтах этого типа реализована функция хранения каких-либо
файлов.
ДОСКИ ОБЪЯВЛЕНИЙ
На таких сайтах пользователи могут размещать или искать
информацию в виде каких-либо объявлений, например — о
покупке-продаже.
СОЦИАЛЬНЫЕ СЕТИ
Созданы для общения пользователей между собой.
Способы активного отображения
информации во Всемирной паутине
Информация в вебе может отображаться как пассивно (то
есть пользователь может только считывать её), так и
активно — тогда пользователь может добавлять информацию
и редактировать её. К способам активного отображения
информации относятся:
гостевые книги,
форумы,
чаты,
блоги,
wiki-проекты,
социальные сети,
системы управления
контентом.
136
Браузеры
Текстовые документы, содержащие код на языке HTML (такие документы
традиционно имеют расширение .html или .htm), обрабатываются специальными
приложениями, которые отображают документ в его форматированном виде. Такие
приложения, называемые «браузерами» или «интернет-обозревателями», обычно
предоставляют пользователю удобный интерфейс для запроса веб-страниц, их
просмотра (и вывода на иные внешние устройства) и, при необходимости, отправки
введённых пользователем данных на сервер.
Популярные
Internet Explorer, Mozilla Firefox, Safari, Google
Chrome, Opera, Яндекс.Браузер, Edge, Амиго
Менее
распространённые
ChromePlus, Mozilla, Netscape Navigator, Flock,
Maxthon, Konqueror, SeaMonkey, Green Browser,
Avant Browser, AOL Explorer, Galeon, Epiphany,
Kazehakase, Charon, Arachne, Links2, Slimbrowser,
FastIE, MyBrowser, Dillo, K-Meleon, Arora.
Текстовые
Alynx, ELinks, Links, Lynx, Netrik, w3m, WebbIE,
DosLynx
Для портативных Internet Explorer Mobile, Mozilla Fennec, Opera Mobile,
устройств
Opera Mini, Wapalta, Safari для iPhone.
137
Веб-сервер
Веб-сервер — это сервер, принимающий HTTP-запросы от клиентов,
обычно веб-браузеров, и выдающий им HTTP-ответы, обычно вместе с
HTML-страницей, изображением, файлом, медиа-потоком или другими
данными.
Веб-сервером называют как программное обеспечение, выполняющее
функции веб-сервера, так и непосредственно компьютер, на котором
это программное обеспечение работает.
Клиент, которым обычно является веб-браузер, передаёт веб-серверу запросы на
получение ресурсов, обозначенных URL-адресами. Ресурсы — это HTML-страницы,
изображения, файлы, медиа-потоки или другие данные, которые необходимы клиенту. В
ответ веб-сервер передаёт клиенту запрошенные данные. Этот обмен происходит по
протоколу HTTP.
Наиболее распространённые веб-сервера:
Apache — свободный веб-сервер, наиболее часто используемый в
Unix-подобных операционных системах;
IIS от компании Microsoft, распространяемый с ОС семейства Windows
NT.
138
Технологии построения веб-приложений
•Клиентские средства разработки веб-приложений
HTML
CSS
JAVASCRIPT
•Серверные технологии разработки веб-приложений
PERL
PHP
PYTHON
ASP
139
139
Актуальные технологии при разработке веб-приложений
XHTML
Микроформаты
Фреймворки
AJAX
JSON
RSS
Ruby/Ruby on Rails
ASP.NET
140
Перспективные технологии разработки
Flex
Silverlight
CSS3
141
Характеристика технологий
Клиентские приложения
HTML
XHTML
JAVASCRIPT
JS-фреймворк
CSS
CSS3
CSS-фреймворк
Микроформаты
RSS
AJAX
JSON
Скорость разработки
2
3
1
3
2
3
3
3
2
2
2
Необходимый уровень знаний
2
2
1
2
1
2
2
3
2
1
1
Поддержка браузерами
2
3
2
3
2
1
2
1
2
2
3
Критерий
Серверные приложения
PHP
PYTHON
PERL
ASP.NET
RUBY
Скорость разработки
2
2
1
3
3
Поддержка ООП
2
2
1
3
3
Платформа
3
3
3
1
3
Нагрузка на сервер
3
2
3
1
1
Критерий
Шкала критериев
1. Слабый
2. Средний
3. Высокий
Чем выше бал тем лучше
142
Технология AJAX (Асинхронный JavaScript +
XML), была известно давно. Однако, благодаря
появлению термина AJAX, который ввел Джис
Джеймс Гаррет (Jesse James Garrett) в феврале
2005г., она стала необычайно модной.
Суть технологии AJAX заключается в изменении
содержимого загруженной веб-страницы без ее
полной перезагрузки, благодаря чему достигается
высокая динамичность сайтов. Технология
основывается на разделении данных и
подзагрузки тех или иных компонентов по мере
необходимости.
143
AJAX
Если в стандартном веб-приложении обработкой
всей информации занимается сервер, тогда как
браузер отвечает только за взаимодействие с
пользователем, передачу запросов и вывод
поступившего HTML, то в Ajax-приложении между
пользователем и сервером появляется еще один
посредник - движок Ajax. Он определяет, какие
запросы можно обработать "на месте", а за
какими необходимо обращаться на сервер.
144
Поведение сервера тоже изменилось. Если
раньше на каждый запрос сервер выдавал
новую страницу, то теперь он отсылает лишь
те данные, которые нужны клиенту, а HTML из
них прямо в браузере формирует движок
Ajax.
145
 Асинхронность проявляется в том, что далеко
не каждый клик пользователя доходит до
сервера, причем обратное тоже справедливо
-далеко не каждая реакция сервера
обусловлена запросом пользователя.
Большую часть запросов формирует движок
Ajax, причем его можно написать так, что он
будет загружать информацию, предугадывая
действия пользователя.
146
 Понятно, что с такой схемой работы
качественная нагрузка на сервер меняется если раньше запросов было мало, но каждый
из них требовал значительных ресурсов
(серверу нужно вытащить информацию из БД,
сформировать из нее веб-страницу и отдать
браузеру), то теперь задача сервера
упрощается (формировать веб-страницы не
нужно, да и объем передаваемых данных
меньше), но запросов обрабатывать
приходится больше.
147
ОДНАКО САМАЯ ВАЖНАЯ ПРОБЛЕМА AJAX
ЗАКЛЮЧАЕТСЯ В ТОМ ЧТО, СОХРАНЯЯ
ЛОКАЛЬНУЮ КОПИЮ ЗАГРУЖЕННОГО
ДОКУМЕНТА, ПОСЕТИТЕЛЬ СТРАНИЦЫ, НА
САМОМ ДЕЛЕ, НИЧЕГО НЕ СОХРАНЯЕТ!
148
 AJAX не предназначен для загрузки контента!
Загруженный материал является временным
и существует только до закрытия браузера,
так как он не записывается в текст страницы,
а только хранится оперативной в памяти.
Посвященный в эти вещи посетитель выделит
текст и скопирует в файл, но не посвященный,
никогда не поймет, почему, посещая
страницу на сайте, он видит одно, а открывая
ее локальную копию – другое.
149
AJAX
Преимущества
 Экономия трафика
 вместо загрузки всей страницы достаточно загрузить
только изменившуюся часть, как правило довольно
небольшую.
 Уменьшение нагрузки на сервер
 К примеру, на странице работы с почтой, когда вы
отмечаете прочитанные письма, серверу достаточно
внести изменения в базу данных и отправить
клиентскому скрипту сообщение об успешном
выполнении операции без необходимости повторно
создавать страницу и передавать её клиенту.
 Ускорение реакции интерфейса
 Поскольку нужно загрузить только изменившуюся часть,
пользователь видит результат своих действий быстрее.
150
Недостатки
 Отсутствие интеграции со стандартными инструментами
браузера
 Динамически создаваемые страницы не регистрируются
браузером в истории посещения страниц, поэтому не
работает кнопка «Назад», предоставляющая пользователям
возможность вернуться к просмотренным ранее страницам,
но существуют скрипты, которые могут решить эту проблему.
 Другой недостаток изменения содержимого страницы при
постоянном URL заключается в невозможности сохранения
закладки на желаемый материал. Частично решить эти
проблемы можно с помощью динамического изменения
идентификатора фрагмента (части URL после #), что
позволяют многие браузеры.
 Поисковые машины не могут выполнять JavaScript, поэтому
разработчики должны позаботиться об альтернативных
способах доступа к содержимому сайта.
 Усложнение проекта
151
ПРИМЕРЫ AJAX
«Живой поиск», live search.

Google - одна из первых систем, которая предложила "живой поиск", live search.
Пользователь печатает поисковую фразу, а система автодополняет ее, получая
список самых вероятных дополнений с сервера.
152
ПРИМЕРЫ AJAX
ClickHeat покажет, куда кликают ваши пользователи.
153
Примеры AJAX
Рейтинг в виде звёздочек на Ajax.
 Создание функции рейтинга даст возможность пользователю высказаться, а
вашему сайту добавит интерактивности.
154
ПРИМЕРЫ AJAX
Ajax форма для подписки.
Повышение юзабилити веб-форм при помощи автосообщений
(Повышение удобства заполнения веб-форм)
155
ПРИМЕРЫ AJAX
JCrop.
 Фоторедактирование фотографий онлайн – это не сильно увлекательный
процесс, независимо от того используете ли вы специальные сервисы типа
Picnic или же запускаете Photoshop. Не лучше ли было бы, если бы вебсайт,
куда вы заливаете свои фото, позволял бы вам обрезать их при этом?
156
157
ЭТАПЫ АНАЛИЗА И ПРОЕКТИРОВАНИЯ
ВЭБ-УЗЛА
РАБОТУ ПО СОЗДАНИЮ МОЖНО РАЗДЕЛИТЬ НА
ТАКИЕ ЭТАПЫ:
— Подготовительный;
— Разработка макета;
— Верстка;
— Программирование;
— Наполнение контентом;
— Раскрутка сайта;
— Администрирование (поддержка) сайта.
1. ПОДГОТОВИТЕЛЬНЫЙ ЭТАП
 На этом этапе необходимо сформировать основную
идею
 Нужно определить цель (обучение, развлечение,
интернет-магазин, бизнес сайт или просто заработок
на сайте)
 Затем определяем целевую аудиторию (пол, возраст,
образование)
 определение контента
 Затем нужно определиться с технической стороной
 Навигация.
2. РАЗРАБОТКА МАКЕТА
 Ориентируясь
по пунктам ТЗ разрабатывается
будущий шаблон, или шаблоны, из которых можно
выбрать нужный вариант.
 После чего он предоставляется в формате PSD (со
всеми слоями) и в виде картинки, тут можно
использовать любой формат ( JPEG, PNG ), чтобы в
дальнейшем передать работу в руки верстальщика.
 Разработка дизайна сайта обычно занимает от
нескольких дней, до нескольких недель, очень
сложные работы могут проводиться даже месяц.
3. ВЕРСТКА


Это процесс написания HTML и CSS кодов для веб-страниц. Каждый
код отвечает за то, чтобы все элементы на странице размещались
там, где нужно.
Виды верстки при создании сайта:
1.
Блочная. Преимущества блочной верстки заключается в том, что
она правильно отображает все элементы сайта на разных
устройствах (например, на мобильных телефонах). Компактный код,
все элементы весят меньше, а значит страница будет загружаться
быстро. Из недостатков можно отметить, что при использовании
разных браузеров верстка может поплыть.
2.
Табличная. В табличной верстке можно создавать колонки, таблицы
в браузерах выглядят почти одинаково. Недостатки: индексация
такого сайта очень медленная, долго загружаются страницы и код
такой верстки слишком большой.
4. ПРОГРАММИРОВАНИЕ

На этом этапе идет разработка механизмов системы
администрирования сайта, которая в будущем позволит
сотрудникам компании менять/обновлять информацию на
сайте. То есть создается рабочая версия сайта , готовая к
наполнению текстов и графических материалов.

Язык программирования представляет собой знаковую
систему,которая предназначена для описания алгоритмов.
Самые популярные языки программирования: Java, C++,
Delphi, Basic, PHP, Perl и др.

После всех этих действий сайт
публикуется в сети.
5. НАПОЛНЕНИЕ САЙТА КОНТЕНТОМ
 Эффективность работы сайта связана с понятием
контента, то есть текстовой и графической
информации.
 Обычно на сайтах используют SEO-копирайтинг, эта
техника создания текстов для сайта, которая
учитывается не только особенностью восприятия
пользователем, но и необходима для продвижения в
поисковой системе.
6. РАСКРУТКА САЙТА

Полностью готовый и наполненный информацией сайт не будет
гарантировать приток пользователей. Для того, чтобы на ваш
сайт заходили посетители, о нем в первую очередь надо
заявить. Большинство пользователей заходят на сайты через
поисковые системы, следовательно популярность ресурса
будет зависеть от его позиции в рейтинге результата поиска.

Чтобы повысить посещаемость сайта, его в первую очередь
надо зарегистрировать в поисковых системах , так же можно
сделать обмен ссылками, или баннерами. Чтобы не возится с
этим самому, обычно заказывают раскрутку у тех же
фрилансеров, которые профи своего дела, они уже прогонят
сайт по базам каталогов и сделают все необходимое.
7. ПОДДЕРЖКА САЙТА

Тут следует учесть каким образом будут добавляться или
редактироваться материалы и разделы сайта. Возможно
потребуется сделать архив статей, куда будут попадать не
актуальные новости. Для таких целей выделяется сотрудник,
который
будет
следить
за
частотой
обновления,
предоставлять свежую информацию, убирать старую.

Ресурс можно обновлять как самостоятельно, так и при
помощи поддержки специалистов, разумеется на платной
основе.
СОПРОВОЖДЕНИЕ САЙТА – ЭТО НЕОБХОДИМЫЕ
МЕРОПРИЯТИЯ ПО ПОДДЕРЖАНИЮ ВАШЕГО САЙТА В
РАБОТОСПОСОБНОМ И АКТУАЛЬНОМ СОСТОЯНИИ В ТЕЧЕНИЕ
ВСЕГО СРОКА ЕГО СЛУЖБЫ ДНЕМ И НОЧЬЮ.
1.Техническое сопровождение сайта:
• Консультация по работоспособности сайта;
• Добавление и изменение функциональных
возможностей;
• Оперативное выявление сбоев в работе сайтов;
• Управление почтовыми серверами;
• Резервное копирование сайта;
• Оперативное восстановление сайта в случае
технических сбоев;
• Поддержка актуальности хостинга и доменного имени
ресурса;
• Общий мониторинг работоспособности системы.
2. Информационное сопровождение – гарантия
успешного существования сайта в сети интернет.
Своевременное размещение актуальной информации:
обновление новостей, прайс-листов, каталогов продукции,
публикация пресс-релизов – всё это делает ваш сайт более
интересным и полезным для посетителей.
 Добавление и изменение текстовой информации;
 Перевод текста на иностранные языки;
 Добавление и корректировка графических элементов;
 Размещение новостей( новостей компании и новостей
отрасли в целом);
 Добавление новых разделов сайта .
168
SEO ПРОДВИЖЕНИЕ САЙТА
169
Понятие подразумевает улучшение показателей сайта для поисковых систем.
Когда интернет только появился, существовало относительно небольшое количество
сайтов, а точнее пара миллионов. Если сравнивать масштабы с сегодняшними
двадцатью миллиардами, можно только догадываться о сложностях индексации
заданных объемов информации.
170
С каждым годом SEO продвижение
становилось более актуальной темой. Если
сайт не оптимизирован под конкретные
запросы пользователей, целевая аудитория
может даже не догадываться о его
существовании. Задача вебмастеров не
только предоставлять полезную информацию,
но и делать это правильно.
171
Ресурсы нормально существуют и без SEO,
вот только смысла и дохода от них для
владельца маловато. Необходимо детальнее
поговорить о том, что такое SEO оптимизация.
Эта наука помогает специалистам
организовать порядок работы по
продвижению ресурса на высокие позиции
по избранным запросам. Из впечатляющих
объемов актуальных фраз оптимизаторы
подбирают подходящие для продвижения того
или иного ресурса.
172
ВНЕСТИ НЕОБХОДИМЫЕ ИЗМЕНЕНИЯ МОЖНО
ДВУМЯ МЕТОДАМИ:
 Внутренняя оптимизация сайта. Заниматься
такой работой могут только профессионалы
SEO, знакомые с программированием на
достаточном уровне. Речь идет об улучшении
технического оснащения, устранении ошибок
программного кода, рациональном
использовании рекламы, внутренних ссылок
и графических объектов.
173
 Внешняя оптимизация сайта. Имеет
отношение к текстовому наполнению и
реакции на него посетителей. Недостаточно
наполнить страницы ключевиками. Тексты
должны быть актуальными, интересными и
достоверными. Например, комментарии и
отзывы в социальных сетях и других
популярных сообществах.
174
В ЧЕМ ЖЕ ЗАКЛЮЧАЕТСЯ SEO
ПРОДВИЖЕНИЕ?
175
176
ЭКСПЕРТЫ ВЫДЕЛЯЮТ НЕСКОЛЬКО
СЕРЬЕЗНЫХ И ЗАТРАТНЫХ ПО ВРЕМЕНИ
НАПРАВЛЕНИЙ:
 Анализ
ключевиков. Невозможно четко
определиться с тем, какие фразы помогут
сайту выбиться в ТОП, а какие не справятся с
поставленной
задачей.
Оптимизатор
присваивает запросам те или иные
приоритеты, основываясь на исследовании
рынка и интересах заказчика. Стоит
предусматривать
несколько
стратегий
развития, чтобы всегда иметь альтернативу.
177
 Изучение
конкуренции. Существует немало
специализированных систем и порталов,
которые
среди
миллионов
ресурсов,
посвященных одной тематике, выбирают
прямых
конкурентов.
Выделив
конкурирующие порталы, можно избежать их
ошибок, устранить собственные промахи и
воспользоваться их стратегиями успеха.
Конкурентами являются лишь те, кто работает
на одинаковые ключевые фразы.
178
 Устранение технических неполадок. Каким бы
интересным и полезным не был бы сайт,
даже красочное оформление не спасет, если
страницы
будут
загружаться
слишком
медленно. Только специалисты SEO могут
выявить и устранить не индексируемые или
сложно
индексируемые
материалы,
переместить неправильно расположенные
объекты и уладить прочие проблемы по
технической части.
179
 Следует подытожить, что такое SEO
продвижение сайта. Это комплексное
использование методов внешней и
внутренней оптимизации. В идеале такой
работой должны заниматься эксперты, но
приложив усилия с не меньшим успехом
можно выполнить SEO продвижение
самостоятельно.
180
ДЛЯ ЧЕГО НУЖНА ПОИСКОВАЯ ОПТИМИЗАЦИЯ
САЙТА?
181
ВОПРЕКИ РАСПРОСТРАНЕННОМУ МНЕНИЮ,
ИНТЕРНЕТ УЖЕ ДАВНО ПЕРЕСТАЛ БЫТЬ
ПРОСТО ИСТОЧНИКОМ ИНТЕРЕСНОЙ И
ПОЛЕЗНОЙ ИНФОРМАЦИИ.
Сегодня по праву является одним из наиболее
эффективных маркетинговых инструментов для
продаж и других сфер бизнеса. Ярким примером
считается рост количества интернет-магазинов в
геометрической прогрессии вместе с прибылью их
владельцев. У всех серьезных компаний и
организаций есть официальные сайты. Регулярно
совершенствуются технологии: приложения для
заказов в режиме онлайн, связи со службой
поддержки и прочие преимущества.
182
ПОИСКОВАЯ ОПТИМИЗАЦИЯ САЙТА ВАЖНА
ДЛЯ ВЛАДЕЛЬЦЕВ ИНФОРМАЦИОННЫХ
ПОРТАЛОВ, ТАК КАК С ЕЁ ПОМОЩЬЮ В РАЗЫ
УВЕЛИЧИТСЯ ЧИСЛО ГОСТЕЙ.
Не менее весомым фактором будет то, что среди
них окажется минимум людей, попавших на
страницах портала случайно. Что же касается
интернет-магазинов, для них СЕО оптимизация
является источником доходов и залогом его
стабильного повышения. Чем выше позиции в
выдаче поисковых систем, тем лучше для бизнеса.
Именно поэтому затраты на поисковую
оптимизацию полностью оправданы.
183
ВАЖНОСТЬ ПРИМЕНЕНИЯ СЕО
184

Предпочтения современных пользователей. Каждый второй
покупатель взвешено подходит к выбору интернет-магазина,
когда речь идет о серьезных покупках. Людей интересует
информация, представленная на официальном ресурсе,
отзывы других потребителей и данные с авторитетных
порталов. Если станет выбор между безызвестным брендом
и фирмой, завоевавшей репутацию, пользователь
непременно остановится на втором варианте. Речь идет о
престиже фирмы. Чем больше достоверной информации о
ней можно найти, тем выше вероятность того, что клиенты
обязательно воспользуются предложенными услугами.
185
 Выгодное расположение. Здесь всё просто. Если
сайт входит в ТОП-10, у него наверняка будет
больше гостей и клиентов, чем у ресурсов, ради
которых приходится переходить на вторую, третью и
другие страницы выдачи. Статистика гласит, что
больше 95% процентов человек, останавливаются
на первой.
186
ВЛИЯНИЕ НА ПОЗИЦИИ САЙТА
187
 Грамотная
оптимизация
оказывает
положительное воздействие на показатели
производительности. Делает продвигаемый
ресурс
более
популярным
среди
пользователей, повышает число упоминаний
в социальных сетях, наращивает объемы
клиентской базы и приносит дополнительную
прибыль. Однако стоит понимать, что
конкуренты не дремлют, поэтому поисковой
оптимизации внимание следует уделять
регулярно. Найдутся смельчаки, мечтающие
свергнуть лидеров с пьедестала.
188
 Оптимизация сайта помогает создать продукт,
удовлетворяющий
предпочтениям
посетителей, вывести его в ТОП и надолго
сохранить
положительные
результаты.
Игнорировать актуальные методы было бы
неразумно, когда весь мир активно
использует
такие
наработки
для
совершенствования бизнеса. Результаты
оптимизации видны не сразу, так как рабочий
процесс занимает не меньше нескольких
месяцев, но по итогу выводят сайты на новый
уровень.
189