Создание и продвижение сайта

1.

УРОВЕНЬ: С НУЛЯ
КОЛИЧЕСТВО ЗАНЯТИЙ: 5
РЕЗУЛЬТАТ: ПРОСТАЯ СТРАНИЦА
СОЗДАНИЕ И
ПРОДВИЖЕНИЕ
САЙТА

2.

КТО ГОВОРИТ?
ДАРЬЯ
ВОВКОДАВ
ДЕЙСТВУЮЩИЙ ВЕБ-РАЗРАБОТЧИК,
РУКОВОДИТЕЛЬ ВЕБ-СТУДИИ

3.

О ЧЕМ БУДЕМ ГОВОРИТЬ?
СЕТЬ ИНТЕРНЕТ
САЙТЫ ОТ ОПРЕДЕЛЕНИЯ ДО СОЗДАНИЯ
ВЕБ-ТЕХНОЛОГИИ
ИНСТРУМЕНТЫ ВЕБ-РАЗРАБОТКИ

4.

• ОДНОСТРАНИЧНЫЙ (LANDING PAGE)
• ВИЗИТКА
• КОРПОРАТИВНЫЕ САЙТЫ
• ПОРТАЛЫ
• ИНТЕРНЕТ-МАГАЗИНЫ
• СОЦИАЛЬНЫЕ СЕТИ
ТИПЫ
САЙТОВ

5.

‣ Динамические сайты
‣ Статические сайты

6.

Текстовый
файл с
ссылками
Правила
внешнего
вида
Описание
событий
HTML + CSS +
JS

7.

Серверные
технологии
Страница
«строиться
на лету»
PHP +
Данные
хранятся в
базе данных

8.

• СТРУКТУРА САЙТА
• ДИЗАЙН САЙТА
• ВЕРСТКА, НАПОЛНЕНИЕ, РЕДАКТИРОВАНИЕ
• РАЗМЕЩЕНИЕ САЙТА
• ПРОДВИЖЕНИЕ
ЭТАПЫ СОЗДАНИЯ
САЙТОВ

9.

https://gomockingbird.com
https://www.gliffy.com/go
https://cacoo.com/diagrams/
СТРУКТУРА
САЙТА

10.

11.

ДИЗАЙН

12.

HTML + CSS + JS
FRONTEND И BACKEND
ВЕРСТКА И
НАПОЛНЕНИЕ

13.

СЕРВЕРНЫЕ ЯЗЫКИ
ПРОГРАММИРОВАНИЯ
BACKEND
ПРОГРАММИРОВАН
ИЕ

14.

Рукописный - каждый файл своими руками
CMS - готовый набор файлов
конструкторы
CMS, КОНСТРУКТОРЫ?
СПОСОБЫ СОЗДАНИЯ
САЙТОВ

15.

РАЗМЕЩЕНИЕ

16.

СЕРВЕР
ДОМЕН
ХОСТИНГ
РАЗМЕЩЕНИЕ
САЙТА

17.

АДРЕСА САЙТА:
▸ ip-адрес:
▸ 123.67.90.6
▸ Домен:
▸ dvschool.ru
▸ DNS сервер

18.

БРАУЗЕРЫ

19.

Интернет
Сервер
Браузер
КЛИЕНТ
HTML
CSS
JS
Сайт

20.

ЗАКАЗЧИК
Менеджер проекта
Дизайнер
Верстальщик
SEO
КТО ЗА ЭТО
Программист
Контент
Сис. Админ
Аналитик

21.

ВЕРСТАЛЬЩИК
ПРОГРАММИСТ
ДИЗАЙНЕР
1. БРАУЗЕР
2. ИНСПЕКТОР КОДА
3. ТЕКСТОВЫЙ РЕДАКТОР / СРЕДА РАЗРАБОТКИ
4. ЛОКАЛЬНЫЙ СЕРВЕР
5. ГРАФИЧЕСКИЙ РЕДАКТОР
ИНСТРУМЕНТЫ

22.

ВЕРСТАЛЬЩИК
ПРОГРАММИСТ
ДИЗАЙНЕР
1. БРАУЗЕР CHROME, FIREFOX MOZILLA, EDGE
2. ИНСПЕКТОР КОДА ВСТРОЕН В БРАУЗЕР
3. ТЕКСТОВЫЙ РЕДАКТОР / СРЕДА РАЗРАБОТКИ SUBLIME, NOTEPAD++
4. ЛОКАЛЬНЫЙ СЕРВЕР
5. ГРАФИЧЕСКИЙ РЕДАКТОР GIMP, PHOTOSHOP
ИНСТРУМЕНТЫ

23.

Онлайн редакторы:
http://jsbin.com/
http://www.koding.com/
http://www.landofcode.com/online-code-editor.php
http://htmledit.squarefree.com/
https://www.dirtymarkup.com/
ТЕКСТОВЫЙ РЕДАКТОР:
NOTEPAD++ HTTPS://NOTEPAD-PLUS-PLUS.ORG/DOWNLOAD/V7.5.6.HTML
SUBLIME HTTPS://WWW.SUBLIMETEXT.COM/3
ИНСТРУМЕНТЫ

24.

ДОМАШНЕЕ ЗАДАНИЕ
УСТАНОВКА ТЕКCТОВОГО
РЕДАКТОРА
СПАСИБО ЗА
ВНИМАНИЕ!