Этапы создания сайта от регистрации домена до размещения в сети. Полный путь формирования интернет проекта

Этапы создания сайта

Силами одной статьи попробуем охватить все этапы создания сайта и его размещения в сети Интернет.
В описании использованы ссылки на проверенные временем и собственным 15-летним опытом ресурсы интернета. За время своего существования они отлично зарекомендовали себя как добросовестные и обладающие большими резервами сервера.
Вам будет предложено использование бесплатного программного обеспечения, наиболее популярного среди рядовых веб-программистов.
Сразу нужно оговориться, речь пойдёт о создании сайтов на основе статических страниц, без применения CMS (Систем Управления контентом). Будут использоваться HTML5, JS, PHP коды, каскадные таблицы стилей CSS3, известный фреймворк Bootstrap 4.

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

СПЕЦИАЛЬНЫЕ ЗНАНИЯ ВЕБ-ПРОГРАММИРОВАНИЯ НЕ ОБЯЗАТЕЛЬНЫ!

Этапы создания сайта:

0. Выбор тематики сайта, подготовка материала (контента) для размещения: логотип, меню, тексты, картинки, видео...
1. Регистрация и выбор домена у регистратора доменных имен.
2. Регистрация на хостинге - дом для файлов сайта.
3. Прописка DNS-адресов сайта у регистратора доменных имен.
4. Выбор и редактирование шаблона будущего интернет проекта. Не требует специальных знаний HTML, CSS, JS, PHP кодов.
5. Особенности внутренней оптимизации кода страниц с учётом требований поисковых систем.
6. Загрузка файлов сайта на сервер хостинга. Работа с FTP клиентом.
7. Дополнительные модули расширяющие функциональность сайта.
8. Адаптивность просмотра сайта на мобильных устройствах.
9. Внешняя SEO оптимизация проекта для увеличения посещаемости.

Выбор тематики сайта, подготовка материала (контента)

Если вы собрались создавать сайт, то тема, которой он будет посвящен, скорее всего определена заранее.

Чаще, создаваемые в сети сайты имеют коммерческую направленность и создаются для рекламы (продажи) товаров или услуг. К таким проектам относятся сайты одностраничники, именуемые Landing Page (Лендинги). Они рассчитаны на увеличение объёма аудитории покупателей конкретного товара, услуги.

Сайты визитки тоже можно отнести к одностраничникам, но в отличии от страниц захвата аудитории (Landing Page) они преследуют иную цель. В большей степени несут информацию о фирме, предприятии, коллективе или отдельной персоне.

Понятие одностраничный сайт не следует понимать буквально. Он может содержать несколько статических страниц, например: описание сервиса (нескольких товаров), блок новостей, страницу контактов или отзывов и т.п.

Подготовку контента (содержимого), который будет размещён на сайте, лучше произвести заранее. Это связано с тем, что при выборе шаблона вам будет легче визуально представить примерный размер и расположение блоков в соответствии с подготовленной информацией. Не следует чрезмерно превышать объём текста на который рассчитан отдельный блок, это может нарушить структуру страницы, задуманную веб-дизайнером. Сказанное относится и к изображениям, которые вам предстоит вписывать в шаблон.

Тема выбрана, контент подготовлен - переходим к важному этапу выбора доменного имени.

Регистрация и выбор домена у Регистратора доменных имен

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

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

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

Надёжнее иметь дело с официальным аккредитованным Регистратором Доменных Имён. Рекомендую WebNames.ru - работаю с ним более 10 лет, зарегистрировал десятки сайтов, ни разу не было повода говорить о нём плохо. WebNames имеет программы лояльности (скидки) для постоянных клиентов. Предоставляет полный ассортимент доменных зон верхнего уровня всех стран, республик и тематик.

Кроме основных зон (типа .ru, .com, .org, .info) WebNames регистрирует доменные имена по темам: бизнес - 26 зон (.casino, .money, .ooo, .moscow, .business и т.д.), услуги - 37 зон (.marketing, .guru, .москва и т.д.), торговля, финансы и экономика, строительство и недвижимость, наука, образование и карьера, досуг, искусство, спорт, география и туризм, IT и технологии, красота и здоровье, мода и стиль, транспорт и перевозки, общество и религия, праздники и события, национальные домены мира и т.д. Для каждой темы существует своя доменная зона.

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

Сервис WebNames предлагает подбор доменного имени на основе двух ключевых слов или выбор среди оставшихся 3-4 символьных в зоне .ru и .su


Регистрация на хостинге - дом для файлов сайта

Существует множество провайдеров предлагающих услуги хостинга. Удачный выбор обеспечит большой объём памяти под ваши сайты, неограниченный трафик, максимальную скорость доступа к файлам, хорошую защиту аккаунта и почтового сервера при незначительной цене.
За годы своих скитаний по хостингам приходилось парковаться на многих известных серверах: nic.ru, hc.ru, reg.ru, timeweb.ru, jino.ru - все не припомнишь.
У каждого из них свои недостатки: частые взломы

Не давно сделал для себя приятное открытие в лице хостинга HostiMan.ru. Не смотря на невзрачное название и предложение бесплатных услуг, этот сервер за умеренную стоимость обеспечивает вполне приличную функциональность. Предоставляет не ограниченные: трафик, оперативную память и количество сайтов (доменов); имеет многоуровневую защиту, приличную скорость, бесплатные SSL-сертификаты и подобные плюсы. Самое главное, HostiMan допускает своих пользователей к большому количеству настроек на своё усмотрение.


Необходимые действия по созданию сайта после регистрации и оплаты услуг на хостинге HostiMan.ru.
Внимание! Сохраните письмо полученное с хостинга при регистрации, в нём указаны все адреса и логины, пароли доступа по FTP, SSH...

Пример настроек для оплаченных услуг.
1. Из личного кабинета переходим в "Панель управления хостингом".

панель управления хостингом

2. Выбираем пункт меню "WWW-домены", далее "Создать".

панель управления хостингом

3. Заполнение полей с информацией о будущем сайте.
- Заполняем поле "Имя" - имя домена. При заполнении поля "Имя" и клика на пустом месте, автоматически пропишутся поля "Псевдонимы" и "Корневая директория".
- Поле "Кодировка" оставляем UTF-8.
- Поле "Защищенное соединение" (SSL): ставим галочку, если планируете использовать протокол https://. Если это вам не о чём не говорит, то лучше не ставить галочку. Это можно сделать позднее.
- Поля "PHP" с галочкой и "Версия PHP" оставьте без изменений.

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

панель управления хостингом

Вернитесь в раздел "WWW-домены", там появился ваш сайт и автоматически созданный индексный файл заставка index.html. Убедитесь в этом: зайдите в раздел "Менеджер файлов", дважды кликните пункт "www" - затем имя вашего домена, выделите файл index.html и нажмите пункт "Изменить". Перед вами откроется код заставки, его можно редактировать или удалить файл целиком, заменив своим, допустим: "Сайт находится на ремонте".

панель управления хостингом

Но в интернете этот файл отображаться не будет пока вы не пропишите DNS-адреса хостинга у Регистратора доменных имён! Возвращаемся на сайт Регистратора.

Прописка DNS-адресов сайта у регистратора доменных имен

Теперь у нас есть хостинг, а у него свои уникальные DNS-адреса. Для того, чтобы привязать доменное имя к сайту (файлам на хостинге), необходимо вернуться к Регистратору доменных имён и "сообщить" ему адрес хостинга, который мы выбрали. Этот адрес определяют DNS-адреса.

Если вы выбрали предложенные выше варианты регистрации, то инструкция по прописке DNS-адресов хостинга HostiMan у регистратора WebNames ниже:

прописка DNS-адресов

- Заходим в свой аккаунт на WebNames;
- Кликаем на свой логин, полученный при регистрации и выбираем пункт "Мои домены и услуги";
- Список доменов у вас пока не велик - выбираем пункт "Управление доменом" и после перехода на новую страницу кликаем "DNS-серверы";

прописка DNS-адресов

- В самом верхнем поле "Выберите DNS-серверы из списка:" выбираем из списка "Задать самостоятельно";
- Перед вами открылись 6 пустых полей, заполняем 4 из них, начиная с верхнего "NS1:".
Порядок заполнения такой:
NS1: - ns1.hostiman.ru
NS2: - ns2.hostiman.ru
NS3: - ns3.hostiman.com
NS4: - ns4.hostiman.com
Нажимаем кнопку "Изменить".

Важно!
На прописку DNS-адресов нужно время. Ваш сайт, в нашем случае индексный файл заставка, появится не сразу. Период времени может быть разный от 2 часов до 2 суток, на это влияет множество факторов, допустим, обновление DNS вашего местного интернет провайдера или хостинга.
Кстати, не забывайте удалять кэш вашего браузера: сочетание клавиш Shift+Ctrl+Delete, в разделе "Очистить историю посещений" у пункта "Кэшированные изображения и файлы" поставьте галочку. Браузер может хранить старое отображение вашего сайта, до реальной прописки DNS-адресов.

Но если вы соблюдали порядок, который описан выше, то можете рассчитывать на 2-4 часа.
Хочу повторить порядок регистрации, размещения домена и прописки DNS.
1. Приобретение домена у Регистратора.
2. Создание сайта на хостинге с указанием нового доменного имени.
3. Только после этого возврат к Регистратору и прописка DNS-адресов хостинга.
Этот порядок ускорит появление сайта в сети.
Появление сайта в сети означает, что при наборе доменного имени в адресном окне браузера, он отобразит содержимое индексного файла вашего сайта, в нашем случае это index.html.

До появления нового сайта в сети у вас есть время заняться созданием заставки (сайт на ремонте) или загрузкой заранее подготовленных файлов сайта. Подробно об этом в разделе ниже: "Загрузка файлов сайта на сервер хостинга". Там вы можете скачать пример файла заставки.

Выбор и редактирование шаблона будущего интернет проекта

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

Зачем выращивать дерево для изготовления деревянной полки, достаточно взять обрезок доски или ДСП. В веб-строительстве такие же ассоциации. При построении сайтов код не пишется вручную, применяются стандартные PHP и JS скрипты, фреймворки Bootstrap - aдаптивные компоненты на основе блоков (div). Для изменения структуры и дизайна сайта достаточно поменять блоки местами, подредактировать файлы стилей CSS, отвечающие за цвет, размеры, отступы... После заполнения шаблона новым контентом: текст, картинки, видео, анимационные эффекты и т.д. - он приобретёт уникальный вид.

Выбор шаблона

При выборе шаблона обращайте внимание не на его красочность, а на структуру размещения блоков. Ваша задача - эффективно и пропорционально разместить заранее подготовленный контент. Смотрите на дизайн шаблона как на систему ячеек, в которые вам необходимо поместить информацию.
Для поиска шаблонов в сети достаточно использовать поисковые фразы типа: адаптивный шаблон html css скачать (responsive html css template download)...

Инструменты для работы с шаблоном

Вам пригодится любой текстовый редактор. Если не изощряться в выборе, то можно использовать общедоступный NotePad++. Для настройки проверки правописания и работы с кодом для этого редактора существуют дополнительные плагины, которые свободно распространяются в сети. Описание их установки и настройки найдёте там же.
Если вы начинающий веб-строитель, то не стоит прибегать к профессиональным редакторам - в них много лишнего, они больше рассчитаны на работу программистов.

Редактирование шаблона

Каждый шаблон имеет свои особенности, поэтому хочу остановиться на общих рекомендациях при их редактировании.
Приведённые ниже рецепты применимы к любым шаблонам и сайтам.

Открываем главную страницу шаблона (как правило index.html) при помощи текстового редактора. Правой кнопкой мыши кликаем по файлу, далее в выпадающем меню выбираем "Открыть с помощью" - указываем используемый текстовый редактор.
Видим массу не понятных символов, но среди них встречается текстовая информация, которую вам предстоит заменить на свою.

1. В первую очередь находим в начале кода теги title и description:
<title>Название сайта - не более 140 знаков</title>
<meta name="description" content="Описание сайта - не более 300 знаков"> 

заменяем "Название сайта" и "Описание сайта" на свой текст. Это главные метатеги, которые очень важны для поисковых систем. Их содержание должно коротко отображать тематическую направленность всего сайта.

2. Обратите внимание на информацию заключённую в теге <H1>Главный заголовок</H1>. Содержание заголовков тоже играет важную роль в ранжировании сайта поисковиками. Такой заголовок должен быть один на страницу. Остальные заголовки <H2>Текст</H2>, <H3>Текст</H3> и т.д. могут повторяться и следовать после H1. Если дизайнер шаблона не предусмотрел это, то исправьте - веб-дизайнеры (верстальщики), как правило, не знакомы с SEO оптимизацией.

3. При замене картинок в шаблонах сайтов необходимо максимально придерживаться размера исходных изображений. Это связано с корректным отображением картинки и всей структуры страницы при разных расширениях экрана монитора - адаптивность просмотра на мобильных устройствах.

Допустим при расширении экрана >= 992px и >= 1200px картинки (по задумке веб-дизайнера) отображаются в 250px по 4 штуки в ряд. По мере сужения экрана монитора менее 576px блоки div, в которых содержатся картинки, складываются друг под друга. Чтобы заполнить пространство блока полностью, ширина картинки должна стать примерно 500px, иначе пострадает качество изображения. Так размер 500px вместо 250px оправдывает себя.

Не стоит экспериментировать с исходными размерами изображений. Следите за соответствием размеров ваших изображений, тем которые предусмотрел дизайнер шаблона.
Вы можете менять только названия картинки, допустим image-3.jpg на my-picture-3.jpg, но при этом внести изменения в код страницы:
<img src="images/image-3.jpg" alt="описание"> меняем на <img src="images/my-picture-3.jpg" alt="описание">
.
images - папка, в которой лежат изображения.
Заполняйте атрибуты alt="текст" (см. выше) текстом, который соответствует теме картинки. Так они смогут участвовать в поиске Яндекса и Google, что привлечёт дополнительных посетителей на ваш сайт.

4. Такая же ситуация складывается с текстовой информацией. Старайтесь соблюдать количество символов вашего текста с исходным в конкретном блоке <div>...текст...</div>. Речь идёт о видимом на страницах шаблона тексте, который распределён по отдельным блокам. Не соблюдение данного правила может нарушить пропорциональные размеры блоков по вертикали, если несколько из них расположены в один горизонтальный ряд.
Если по горизонтали размещается один блок с текстом без картинки, то количество символов не ограничено. Смотрите пример на рисунке:

пропорции блоков div

Особенности внутренней оптимизации кода

Стоит поговорить об этом до того, как перейдём к загрузке файлов на сервер, чтобы в процессе наполнения шаблона содержимым вы параллельно проводили мероприятия по оптимизации проекта.

Производить внутреннюю оптимизацию страниц в первую очередь необходимо для поисковых систем. Если ваш проект понравится им, то он будет в ТОПе выдачи результатов поиска по конкретному поисковому запросу.
1. Корректно заполняйте метатеги title и description (см. выше).
2. Текст и картинки должны быть уникальными, не копируйте их из Интернета. Всё что находится в сети, давно процитировано и сохранено в базах поисковых систем, а они не любят плагиат.
3. Не размещайте ссылки со своего сайта на сторонние ресурсы без атрибута rel="nofollow". Чтобы закрыть гиперссылку от поисковых систем она должна выглядеть следующим образом:
<a href="http://sitey.ru/" title="Всплывающая подсказка" rel="nofollow">текст ссылки</a>

4. Поисковики оценивают ваш сайт с точки зрения "Поведенческих факторов пользователей". Они анализируют действия посетителей сайта: время проведённое на странице, просмотр медиа файлов, количество переходов по страницам. Стремитесь к созданию качественного контента, который способен заинтересовать посетителя.
Для понятия психологии пользователя интернетом, представьте свои действия, когда вы гуляете по страницам сайтов. Задайтесь вопросом, что вас может заинтересовать (остановить на несколько минут) при просмотре результатов поиска.
5. Систематизируйте свой проект по разделам и темам. Облегчите посетителю поиск информации на сайте. Вы знаете по себе, что часто бывает легче перейти на другой сайт, чем найти что либо на просматриваемом.
6. Обеспечьте адаптивный просмотр сайта на любых мобильных устройствах. Применение фреймворка Bootstrap и сеток Grid помогут вам в этом.
7. Создайте файлы robots.txt и sitemap.xml в корне сайта. Устал повторять, но это опять для поисковых систем. Не буду вдаваться в подробности об их создании - этим заполнен интернет. На досуге поищите информацию, создадите, загрузите на сервер.

Загрузка файлов сайта на сервер хостинга

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

Настройка FileZilla FTP

После установки программы на компьютер заходим в "Менеджер сайтов" (верняя левая кнопка, как на рисунке) и производим настройки входа на хостинг по FTP соединению.
Для этого вводим FTP адрес хостинга, логин при регистрации и пароль входа по FTP. У каждого хостинга свои настройки. Настройки хостинга HostiMan показаны на рисунке и имеют значения, которые вы получили в письме при регистрации. Как помните, выше я просил сохранить его.

менеджер FTP FileZilla настройка

После выполненных настроек возвращаемся к менеджеру FileZilla, используя стрелку ▼ в "Менеджере сайтов". Выбираем имя настроенного соединения и попадаем на компьютер хостинга. В левом окне программы ваш компьютер, в правом - компьютер хостинга. Работаем с файлами, как на обычном компьютере: файлы можно переносить туда и обратно мышкой или используя выпадающее меню правой кнопки мыши. Удаление файлов и папок производится аналогично.

Для практики можете залить индексный файл заставку index.html, который сообщит случайным посетителям, что сайт скоро возобновит работу.

Скачать готовую заставку с комментариями внутри кода: Repair-for-Hosting.zip [3,62 Kb] (cкачиваний: 5)

Дополнительные модули расширяющие функциональность сайта

В шаблонах вы можете встретить дополнительные модули, многие из них функционируют с использованием JS, PHP скриптов, например:
1. Обратная связь.
2. Заказ обратного звонка с админкой.
3. Анимация элементов и блоков при прокрутке страницы построенная по технологии WOW.
4. Интерактивная карта местности (Яндекс, Google).
5. Сортировка картинок при просмотре галереи изображений.
6. Вставка видео.
7. Слайдеры обычные и построенные с использованием технологии Slider Revolution.
8. Калькуляторы.
9. Модули оплаты товара и услуг.
10. Полосы прогресса и т.д.

Секреты редактирования дополнительных модулей и расширений не возможно описать в одной статье. Просто хотелось показать широкие возможности сайтов построенных на статических страницах.

Адаптивность просмотра сайта на мобильных устройствах

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

Начинающим веб-мастерам не стоит углубляться в настройки адаптивности. Достаточно использовать для редактирования шаблоны построенные на Bootstrap v.3 или v.4. Если шаблон построен на подобных фреймворках, то это говорит не только о его адаптивности к мобильным устройствам, но и о его современности.
Версия Bootstrap 3 приостановила своё развитие в 2016 году.
Стабильная версия Bootstrap 4 официально начала своё существование в начале 2018 года.

Внешняя SEO оптимизация проекта для увеличения посещаемости

Под внешней оптимизацией сайта понимают раскрутку сайта в сети, наращивание ссылочной массы на его страницы со значимых ресурсов.
На сегодняшний день поисковый робот Яндекса научился определять покупные ссылки и строго наказывает сайты размещающие их.
Яндекс взял путь на определение пользовательской активности, внимательно следит за поведением посетителя на сайте: сколько времени пробыл на странице, сколько совершил переходов. Он называет это "поведенческими факторами". Чем выше показатель ПФ (ИКС), тем ближе сайт к ТОПу выдачи в результате поиска.
При этом Яндекс удачно продаёт рекламные показы сайта. Но платить деньги за переходы на сайт выгодно только ресурсам продающим товары или услуги, т.к. стоимость рекламы заложена в цену товара.

Обычным сайтам в такой обстановке продвигаться очень тяжело.
Остаётся только прислушаться к призывам Яндекса, краткое изложение его статьи "Признаки некачественного сайта":
- Не копировать информацию с чужих ресурсов;
- Не размещать SEO-ссылки на других сайтах;
- Не имитировать действия посетителей;
- Не размещать информацию партнерских программ;
- Не допускать низкокачественный автоматический перевод чужого контента;
- Не включать многократное повторение ключевых слов и т.д.

Для естественной внешней оптимизации необходимо создавать качественные сайты с оригинальным контентом.


Итак, мы создали свой сайт начиная с регистрации домена до размещения готового проекта в сети. Научились управлять хостингом, начали учиться редактировать шаблоны сайтов, оптимизировать структуру html документа, заливать файлы на сервер хостинга, рассмотрели адаптивность сайта к мобильным устройствам и напряглись при упоминании о предстоящей внешней SEO оптимизации проекта.

Удачных начинаний в веб-строительстве. Оставляйте комментарии, задавайте вопросы ниже.

Автор: Saah | Просмотров: 100 | 2-09-2019,Пн, 00:37  

Похожие публикации

Добавить свой комментарий:

@