Слайд 2
![Web-приложение – это приложение разработанное по архитектуре «клиент-сервер», использующее в](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-1.jpg)
Web-приложение – это приложение разработанное по архитектуре «клиент-сервер», использующее в качестве
клиента Веб-браузер и работающее с использованием протокола HTTP на стороне Веб-сервера.
Слайд 3
![Примеры web-приложений Поисковые системы (google.ru), Видео-коллекции (youtube.com), Новостные системы (lenta.ru),](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-2.jpg)
Примеры web-приложений
Поисковые системы (google.ru),
Видео-коллекции (youtube.com),
Новостные системы (lenta.ru),
Бизнес-магазины (ozon.ru);
Социальные сети (facebook.com) и другие.
Слайд 4
![Обзор инструментальных средств разработки Web-приложения визуальные; не визуальные.](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-3.jpg)
Обзор инструментальных средств разработки Web-приложения
визуальные;
не визуальные.
Слайд 5
![Текстовые редакторы. Предполагают прямую работу с кодом, требуют знание языков. Notepad++; SublimeText; WebStorm; Brackets и другие.](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-4.jpg)
Текстовые редакторы.
Предполагают прямую работу с кодом, требуют знание языков.
Notepad++;
SublimeText;
WebStorm;
Brackets и
другие.
Слайд 6
![Специальные программы-конструкторы Автоматизируют процесс разработки, позволяют визуально реализовать качественный проект](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-5.jpg)
Специальные программы-конструкторы
Автоматизируют процесс разработки, позволяют визуально реализовать качественный проект без
знания HTML и других языков.
Mobirise;
WebSite X5 Professional;
MS Front Page;
DreamWeaver;
Macromedia HomeSite.
Слайд 7
![Недостаток: неэффективный код, включающий множество лишних тегов. Существуют off-line редакторы и on-line (конструкторы сайтов).](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-6.jpg)
Недостаток: неэффективный код, включающий множество лишних тегов.
Существуют off-line редакторы и on-line
(конструкторы сайтов).
Слайд 8
![Конструктор сайтов – это система из набора инструментов, которая позволяет](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-7.jpg)
Конструктор сайтов – это система из набора инструментов, которая позволяет создавать
сайты онлайн и администрировать их без каких-либо специализированных знаний.
Wix;
A5;
uKit.
Слайд 9
![Этапы разработки Web-сайта 1. Определение целей сайта и требований к](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-8.jpg)
Этапы разработки Web-сайта
1. Определение целей сайта и требований к нему.
2. Разработка дизайн-макета.
3. Верстка дизайн-макета.
4. Программирование,
установка и настройка CMS.
5. Наполнение контентом и тестирование.
6. Публикация сайта в интернете.
7. Продвижение и оптимизация сайта.
8. Администрирование (поддержка) сайта.
Слайд 10
![1. Определение целей сайта и требований к нему определение цели](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-9.jpg)
1. Определение целей сайта и требований к нему
определение цели сайта;
определение целевой
аудитории;
выяснение ожидаемой для посетителя информации;
определение типа сайта и его функционала;
определение технического и программного обеспечения;
юзабилили-анализ;
разработка и утверждение ТЗ.
Слайд 11
![Юзабилити сайта – это удобство пользователя при работе с сайтом.](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-10.jpg)
Юзабилити сайта – это удобство пользователя при работе с сайтом.
Критерии
юзабилити:
1. Дизайн сайта.
2. Качество контента на сайте.
3. Скорость загрузки сайта.
4. Интерфейс и навигация.
5. Кроссбраузерность сайта.
6. Реклама и всплывающие окна.
Слайд 12
![Техническое задание на разработку сайта Техническое задание (ТЗ) – это](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-11.jpg)
Техническое задание на разработку сайта
Техническое задание (ТЗ) – это документ, в
котором детально описываются основные составляющие и требования к будущему сайту.
Слайд 13
![Содержание ТЗ: описание предполагаемой аудитории; тип сайта; описание дизайна; структура](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-12.jpg)
Содержание ТЗ:
описание предполагаемой аудитории;
тип сайта;
описание дизайна;
структура сайта (карта сайта) с описанием
переходов в виде схемы, состоящей из основных разделов, подразделов и количества страниц;
Слайд 14
![Содержание ТЗ: описание предполагаемой аудитории; тип сайта; описание дизайна; структура](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-13.jpg)
Содержание ТЗ:
описание предполагаемой аудитории;
тип сайта;
описание дизайна;
структура сайта (карта сайта) с описанием
переходов в виде схемы, состоящей из основных разделов, подразделов и количества страниц;
структура страниц – какие блоки (модули) должны быть на страницах, в каком виде, где располагаются, включая контент страниц;
Слайд 15
![Содержание ТЗ: функционал каждой страницы (поиск, сортировка, фильтр и т.д.);](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-14.jpg)
Содержание ТЗ:
функционал каждой страницы (поиск, сортировка, фильтр и т.д.);
порядок предоставления, обработки
или создания графической и текстовой информации;
технические требования к сайту;
используемые технологии (вид CMS, библиотеки скриптов, мобильная версия и т.п.) и другие.
Слайд 16
![2. Разработка дизайн-макета сайта Дизайн-макет сайта – графическое представление дизайна](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-15.jpg)
2. Разработка дизайн-макета сайта
Дизайн-макет сайта – графическое представление дизайна сайта.
Готовый макет
предоставляется в формате .psd или .tiff.
Веб-дизайн – отрасль веб-разработки и разновидность дизайна, в задачи которой входит проектирование пользовательских веб-интерфейсов для сайтов или веб-приложений.
Слайд 17
![Цветовые схемы 1. Монохроматическая цветовая схема. Соответствует одному базовому цвету](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-16.jpg)
Цветовые схемы
1. Монохроматическая цветовая схема. Соответствует одному базовому цвету и всем
его оттенкам, тональностям и теням.
Слайд 18
![Использование монохроматической цветовой схемы](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-17.jpg)
Использование монохроматической цветовой схемы
Слайд 19
![Цветовые схемы 2. Дополнительная цветовая схема. Образуется сочетаниями противоположных в цветовом круге цветов](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-18.jpg)
Цветовые схемы
2. Дополнительная цветовая схема. Образуется сочетаниями противоположных в цветовом круге цветов
Слайд 20
![Цветовые схемы 3. Триадические цветовые схемы. Создается при выборе одного](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-19.jpg)
Цветовые схемы
3. Триадические цветовые схемы. Создается при выборе одного цвета и добавлении
к нему двух других цветов, расположенных на одинаковых расстояниях друг от друга на цветовом круге.
Слайд 21
![Цветовые схемы 4. Тетраэдрические цветовые схемы. Использует сочетание четырех цветов.](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-20.jpg)
Цветовые схемы
4. Тетраэдрические цветовые схемы. Использует сочетание четырех цветов.
Слайд 22
![Сайты для поиска цветовых схем http://paletton.com https://color.adobe.com http://colorscheme.ru](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-21.jpg)
Сайты для поиска цветовых схем
http://paletton.com
https://color.adobe.com
http://colorscheme.ru
Слайд 23
![Использование преобладающего цвета на сайте логотип; вкладки меню; важная информация; заголовки и названия; кнопки.](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-22.jpg)
Использование преобладающего цвета на сайте
логотип;
вкладки меню;
важная информация;
заголовки и названия;
кнопки.
Слайд 24
![Стили дизайна для сайтов](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-23.jpg)
Слайд 25
![По структуре минималистичные; 2-3-х колоночные; сложные; адаптивный дизайн.](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-24.jpg)
По структуре
минималистичные;
2-3-х колоночные;
сложные;
адаптивный дизайн.
Слайд 26
![По цветовой гамме цветной; разноцветные; светлые; темные.](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-25.jpg)
По цветовой гамме
цветной;
разноцветные;
светлые;
темные.
Слайд 27
![Цветной стиль](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-26.jpg)
Слайд 28
![Разноцветный стиль](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-27.jpg)
Слайд 29
![Светлый стиль](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-28.jpg)
Слайд 30
![Темный стиль](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-29.jpg)
Слайд 31
![По количеству графики чистый стиль; стандартный; художественный.](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-30.jpg)
По количеству графики
чистый стиль;
стандартный;
художественный.
Слайд 32
![Чистый стиль](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-31.jpg)
Слайд 33
![Стандартный стиль](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-32.jpg)
Слайд 34
![Художественный стиль](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-33.jpg)
Слайд 35
![По тематике или художественному оформлению стиль «ретро»; стиль «гранж»; «футуристический»](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-34.jpg)
По тематике или художественному оформлению
стиль «ретро»;
стиль «гранж»;
«футуристический» стиль;
«мультяшный»
стиль;
«журнальный» стиль;
«классический» стиль;
карточный стиль «Metro»;
рисованный стиль;
минималистический стиль;
текстовый;
полиграфический;
интерфейсный;
динамический и другие.
Слайд 36
![Стиль «ретро» (винтажный стиль)](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-35.jpg)
Стиль «ретро» (винтажный стиль)
Слайд 37
![Стиль «гранж»](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-36.jpg)
Слайд 38
![«Футуристический» стиль](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-37.jpg)
Слайд 39
![«Рисованный» стиль](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-38.jpg)
Слайд 40
![Минималистический стиль](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-39.jpg)
Слайд 41
![Стиль «Метро»](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-40.jpg)
Слайд 42
![Домашнее задание Классификация сайтов По тематике. По художественному оформлению (журнальный](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-41.jpg)
Домашнее задание
Классификация сайтов
По тематике.
По художественному оформлению (журнальный стиль, готика,
«мультяшный» стиль, футуризм, ретро, классика, гранж и т. д.).
Значение цветов
Слайд 43
![Домашнее задание Классификация типов сайтов 1. личный сайт; 2. бизнес-сайт;](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-42.jpg)
Домашнее задание
Классификация типов сайтов
1. личный сайт;
2. бизнес-сайт;
3. промо-сайт;
4. сайты электронной коммерции;
5. информационные порталы;
6. интернет-общение;
7. сайты специального назначения.
Слайд 44
![3. Верстка Вёрстка – процесс формирования страниц (макета) путём компоновки](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-43.jpg)
3. Верстка
Вёрстка – процесс формирования страниц (макета) путём компоновки текстовых, графических
и прочих элементов.
Вёрстка – создание кода страницы с использованием языка HTML и их оформление с помощью каскадных таблиц стилей – CSS.
Слайд 45
![Требования к верстке: Кроссбраузерность – одинаковое отображение в разных браузерах](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-44.jpg)
Требования к верстке:
Кроссбраузерность – одинаковое отображение в разных браузерах
Гибкость вёрстки
– возможность легко добавлять/удалять информацию на страницы.
Быстрота обработки кода браузером
Валидность – соответствие стандартам
Семантическая корректность – логичное и правильное использование элементов HTML
Слайд 46
![Виды верстки Табличная. Используется обычная таблица с невидимой границей. Блочная.](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-45.jpg)
Виды верстки
Табличная. Используется обычная таблица с невидимой границей.
Блочная. Используются слои
(блоки) для создания базового шаблона страницы, добавляется нужное количество блоков.
Слайд 47
![Виды верстки III. Семантическая верстка Семантической называют верстку, использующую для](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-46.jpg)
Виды верстки
III. Семантическая верстка
Семантической называют верстку, использующую для структурирования html-документов
теги, которые разделяют код на логические блоки, определяющие их роль и содержание в структуре web-страницы.
Слайд 48
![Достоинства табличной верстки: 1. Простота и быстрота верстки. 2. Корректное](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-47.jpg)
Достоинства табличной верстки:
1. Простота и быстрота верстки.
2. Корректное отображение в различных браузерах,
одинаковый вид во всех браузерах.
Недостатки табличной верстки:
Долгая загрузка.
Громоздкий код.
Плохая индексация поисковыми системами.
Нет разделения содержимого и оформления.
Несоответствие стандартам.
Слайд 49
![Преимущества блочной верстки: компактный код, небольшой вес страниц; отличная индексация](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-48.jpg)
Преимущества блочной верстки:
компактный код, небольшой вес страниц;
отличная индексация поисковыми системами;
слои можно
накладывать друг на друга;
быстрая загрузка страниц.
Недостатки блочной верстки:
верстка сложная;
трудно обеспечить одинаковый вид во всех браузерах;
при уменьшении разрешения экрана/браузера блоки съезжают друг на друга
Слайд 50
![Виды html-верстки: 1. фиксированная, 2. резиновая, 3. гибридная.](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-49.jpg)
Виды html-верстки:
1. фиксированная,
2. резиновая,
3. гибридная.
Слайд 51
![1. Фиксированная верстка - четко определены размеры элементов веб-страницы в](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-50.jpg)
1. Фиксированная верстка - четко определены размеры элементов веб-страницы в пикселях.
Преимущество
фиксированной верстки: дизайн шаблона подгоняется до пикселя.
Недостаток фиксированной верстки: при просмотре страниц на мониторах с различным разрешением их внешний вид различается.
Слайд 52
![2. Резиновая html-верстка - размеры элементов веб-страницы относительны (указываются в](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-51.jpg)
2. Резиновая html-верстка - размеры элементов веб-страницы относительны (указываются в %).
Преимущество резиновой
верстки: позволяет адаптировать шаблон под любой тип и разрешение монитора, выводя элементы страницы в процентном отношении к монитору.
Недостаток резиновой верстки: нестабильность дизайна сайта, так же меняется в зависимости от разрешения монитора, и относительная сложность самой верстки.
Слайд 53
![3. Гибридная html-верстка -включает в себя как фиксированные, так и относительные размеры элементов](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-52.jpg)
3. Гибридная html-верстка -включает в себя как фиксированные, так и относительные
размеры элементов
Слайд 54
![4. Программирование, установка и настройка CMS JavaScript; PHP; Python; Java; Ruby и другие](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-53.jpg)
4. Программирование, установка и настройка CMS
JavaScript;
PHP;
Python;
Java;
Ruby и другие
Слайд 55
![CMS – это система управления сайтом (Content management system, движок).](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-54.jpg)
CMS – это система управления сайтом (Content management system, движок).
CMS
– это специальная платформа, программное обеспечение, позволяющее создавать и поддерживать веб-сайты различных уровней сложности.
Слайд 56
![Виды CMS: бесплатные WordPress, Joomla, Drupal и другие платные 1С-Битрикс UMI.CMS и другие http://www.cmsmagazine.ru/catalogue/](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-55.jpg)
Виды CMS:
бесплатные
WordPress,
Joomla,
Drupal и другие
платные
1С-Битрикс
UMI.CMS и другие
http://www.cmsmagazine.ru/catalogue/
Слайд 57
![Тематический индекс цитирования (тИЦ) – технология поисковой машины «Яндекс», заключающаяся](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-56.jpg)
Тематический индекс цитирования (тИЦ) – технология поисковой машины «Яндекс», заключающаяся в
определении авторитетности Интернет-ресурсов с учётом качественной характеристики – ссылок на них с других сайтов.
Слайд 58
![5. Наполнение контентом и тестирование Требования к контенту сайта достоверность; актуальность; уникальность; информативность; полнота.](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-57.jpg)
5. Наполнение контентом и тестирование Требования к контенту сайта
достоверность;
актуальность;
уникальность;
информативность;
полнота.
Слайд 59
![Виды контента По форме подачи: текст; изображения; аудио; видео. По уникальности: уникальный; неуникальный.](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-58.jpg)
Виды контента
По форме подачи:
текст;
изображения;
аудио;
видео.
По уникальности:
уникальный;
неуникальный.
Слайд 60
![Виды контента По форме подачи: текст; изображения; аудио; видео. По уникальности: уникальный; неуникальный.](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-59.jpg)
Виды контента
По форме подачи:
текст;
изображения;
аудио;
видео.
По уникальности:
уникальный;
неуникальный.
Слайд 61
![Способы наполнения сайта контентом 1. Копирование информации с других сайтов](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-60.jpg)
Способы наполнения сайта контентом
1. Копирование информации с других сайтов (копипаст) – использование
информации с других сайтов.
2. Применение рерайтинга.
Рерайтинг – переписывание статьи своими словами, чтобы при этом не потерялся смысл текста.
Слайд 62
![Способы наполнения сайта контентом Виды рерайтинга автоматический рерайтинг - использование](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-61.jpg)
Способы наполнения сайта контентом
Виды рерайтинга
автоматический рерайтинг - использование рерайт-генераторов (синонимайзеры,
http://www.raskruty.ru);
ручной рерайтинг – ручное переписывание статьи.
Слайд 63
![Способы наполнения сайта контентом 3. Использование копирайтинга Копирайтинг – это написание уникальных статей на заказ.](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-62.jpg)
Способы наполнения сайта контентом
3. Использование копирайтинга
Копирайтинг – это написание уникальных статей на
заказ.
Слайд 64
![Тестирование сайта проверка скорости загрузки сайта; https://tools.pingdom.com http://www.webpagetest.org https://www.host-tracker.com проверка](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-63.jpg)
Тестирование сайта
проверка скорости загрузки сайта;
https://tools.pingdom.com
http://www.webpagetest.org
https://www.host-tracker.com
проверка ссылок, поиск неработающих
ссылок;
https://validator.w3.org/checklink
http://brokenlinkcheck.com
http://anybrowser.com
http://creatingonline.com
Слайд 65
![Тестирование сайта проверка валидности сайта; HTML-код – https://validator.w3.org; CSS-код –](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-64.jpg)
Тестирование сайта
проверка валидности сайта;
HTML-код – https://validator.w3.org;
CSS-код – http://jigsaw.w3.org/css-validator;
проверка адаптивности к
экранам;
http://quirktools.com
https://search.google.com/test/mobile-friendly
просмотр сайта с помощью различных браузеров и их версий;
http://browsershots.org
https://crossbrowsertesting.com (платно)
http://mogotest.com (платно)
Слайд 66
![Тестирование сайта SEO-тестирование Веб-страниц – определение ключевых слов, настройка семантики,](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-65.jpg)
Тестирование сайта
SEO-тестирование Веб-страниц – определение ключевых слов, настройка семантики, проверка уникальности,
определяется «видимость» сайта для поисковых машин;
http://www.site-auditor.ru
https://sites.pr-cy.ru
https://advego.ru (проверка уникальности текста страниц)
Слайд 67
![Тестирование сайта проверка орфографии и пунктуации текстов; проверка правильности отображения](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-66.jpg)
Тестирование сайта
проверка орфографии и пунктуации текстов;
проверка правильности отображения шрифтов различными браузерами
и их версиями;
проверка графических материалов: рисунков, фотографий, поиск отсутствующих изображений.
Слайд 68
![6. Публикация сайта в сети Интернет 1. Выбор и регистрация доменного имени 2. Выбор хостинга](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-67.jpg)
6. Публикация сайта в сети Интернет
1. Выбор и регистрация доменного имени
2. Выбор хостинга
Слайд 69
![1. Выбор и регистрация доменного имени Правила регистрации домена: 1.](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-68.jpg)
1. Выбор и регистрация доменного имени
Правила регистрации домена:
1. Домен должен быть свободным и
еще никем незарегистрированным.
2. Регистрируемое доменное имя должно соответствовать сайту и его теме.
3. Выбирать простое, короткое и легко запоминающееся доменное имя.
4. Быть единственным владельцем домена после регистрации.
Слайд 70
![Наиболее крупные регистраторы https://www.reg.ru https://mastername.ru https://www.rusonyx.ru https://www.nic.ru](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-69.jpg)
Наиболее крупные регистраторы
https://www.reg.ru
https://mastername.ru
https://www.rusonyx.ru
https://www.nic.ru
Слайд 71
![Выбор хостинга Хостинг – это услуга по предоставлению дискового пространства](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-70.jpg)
Выбор хостинга
Хостинг – это услуга по предоставлению дискового пространства для физического
размещения необходимой информации, файлов веб-сайта на сервере, постоянно находящегося в сети интернет, на котором запущено программное обеспечение, необходимое для обработки запрашиваемой информации к веб-серверу.
Слайд 72
![Виды хостинга: I. По стоимости Платный – производится оплата за](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-71.jpg)
Виды хостинга:
I. По стоимости
Платный – производится оплата за использование дискового пространства
и других предоставляемых сервисов сайта.
Бесплатный – существует за счет рекламы, размещаемой на страницах сайта в качестве «оплаты» своих услуг.
Слайд 73
![II. В зависимости от страны расположения технической площадки: российский (техническая](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-72.jpg)
II. В зависимости от страны расположения технической площадки:
российский (техническая площадка расположена
в России);
украинский (в Украине);
американский (в США) и т.д.
Слайд 74
![III. В зависимости от программного обеспечения UNIX-хостинг; WINDOWS-хостинг.](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-73.jpg)
III. В зависимости от программного обеспечения
UNIX-хостинг;
WINDOWS-хостинг.
Слайд 75
![IV. В зависимости от типа сервера: виртуальный сервер; виртуальный выделенный сервер; выделенный сервер; co-location.](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-74.jpg)
IV. В зависимости от типа сервера:
виртуальный сервер;
виртуальный выделенный сервер;
выделенный сервер;
co-location.
Слайд 76
![Виртуальный сервер размещение на одном физическом сервере файлов сайтов (программ)](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-75.jpg)
Виртуальный сервер
размещение на одном физическом сервере файлов сайтов (программ) сразу нескольких
владельцев,
ресурсы распределены между всеми пользователями на одном сервере,
процессорное время и память сервера эти ресурсы используют совместно.
Слайд 77
![Виртуальный выделенный сервер Web-приложения размещаются на одном физическом сервере, каждый](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-76.jpg)
Виртуальный выделенный сервер
Web-приложения размещаются на одном физическом сервере,
каждый виртуальный выделенный
сервер не зависим от других,
имеет свой определенный лимит, отведенный ему программой.
Слайд 78
![Выделенный сервер аренду физического сервера владельцем крупного Интернет-ресурса у хостинг-провайдера,](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-77.jpg)
Выделенный сервер
аренду физического сервера владельцем крупного Интернет-ресурса у хостинг-провайдера,
используется для
реализации нестандартных задач (сервисов), а также размещения «тяжёлых» сайтов.
Слайд 79
![Co-location размещение собственного сервера клиента на технической площадке хостинг-провайдера. Отличие](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-78.jpg)
Co-location
размещение собственного сервера клиента на технической площадке хостинг-провайдера.
Отличие co-location
от выделенного сервера технический персонал следит только за электропитанием сервера и за каналами связи, в которые он включен.
Слайд 80
![При выборе хостинга учитывают факторы: 1. Технические характеристики Безотказность (uptime).](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-79.jpg)
При выборе хостинга учитывают факторы:
1. Технические характеристики
Безотказность (uptime).
Наличие поддержки:
FTP & SSH
доступ;
SSD, а не обычные диски;
PHP версии >= 5.6;
MySQL версии >= 5.4.
Периодичность резервного копирования файлов и баз данных.
Объём памяти.
Бесплатный SSL сертификат.
Слайд 81
![При выборе хостинга учитывают факторы: 2. Загруженность канала. 3. Стоимость услуг. Тестовый период. Качество техподдержки.](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-80.jpg)
При выборе хостинга учитывают факторы:
2. Загруженность канала.
3. Стоимость услуг.
Тестовый период.
Качество техподдержки.
Слайд 82
![Платный хостинг https://mchost.ru https://beget.com/ru https://fozzy.com https://masterhost.ru https://sprinthost.ru https://www.nic.ru Бесплатный хостинг https://www.hostinger.ru https://www.ucoz.ru https://hostiman.ru](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-81.jpg)
Платный хостинг
https://mchost.ru
https://beget.com/ru
https://fozzy.com
https://masterhost.ru
https://sprinthost.ru
https://www.nic.ru
Бесплатный хостинг
https://www.hostinger.ru
https://www.ucoz.ru
https://hostiman.ru
Слайд 83
![7. Раскрутка сайта Методы бесплатной раскрутки сайтов: Регистрация сайта в](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-82.jpg)
7. Раскрутка сайта
Методы бесплатной раскрутки сайтов:
Регистрация сайта в поисковых системах.
Работа над
контентом своего сайта.
Создание собственной почтовой рассылки.
Регистрация в каталогах и рейтингах.
Включение сайта в систему обмена текстовыми ссылками.
Включение сайта в баннерную сеть.
Использование досок объявлений.
Использование чужих рассылок.
Использование СМИ.
Обмен ссылками с сайтами схожей тематики.
Участие в форумах, телеконференциях.
Участие в системах быстрой раскрутки сайтов.
Слайд 84
![SEO (Search Engines Optimization) – это комплекс мероприятий, направленных на](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/164060/slide-83.jpg)
SEO (Search Engines Optimization) – это комплекс мероприятий, направленных на повышение
позиций Интернет-сайта в результатах поисковой системы по некоторому списку популярных запросов.