Как разработчику, мне часто задают вопрос: может ли человек без специальных знаний создать веб-сайт? И ответ на него, будет зависеть от того, что мы понимаем под словом сайт и что, в итоге, мы хотим получить.
С одной стороны, с нынешним обилием конструкторов сайтов и веб-сервисов, позволяющих создавать веб-страницы по клику мыши, создать сайт действительно может каждый. Правда, в таком случае, это будет просто “информация, размещенная где-то в сети”. Создать же, привлекательный, адаптивный и быстрый ресурс, проходящий ранжирование в поисковых системах и гарантирующий владельцу хотя бы минимальную конверсию — дело веб-разработчиков.
В данной статье я попытаюсь объяснить процесс создания сайта с точки зрения современной разработки. Всё изложенное ниже скорее подойдёт начинающим веб-мастерам или тем, кто только думает связать жизнь с разработкой.
В общих чертах процесс создания сайта можно поделить на 4 этапа:
- Планирование
- Дизайн
- Разработка. Сюда входит клиентская (фронденд) и серверная (бэкенд) часть.
- Вывод сайта на хостинг или VPS.
Разберём каждый из них по очереди:
Планирование
Здесь стоит выделить несколько важных пунктов, а именно:
Идея проекта
Приступая к работе, мы должны решить, что мы хотим получить от сайта, определиться с тематикой и концепцией. Построить список целей, которые мы собираемся реализовать в разработке. На данном этапе мы должны чётко представлять себе контент, который будем публиковать на нашем ресурсе.
Если проект большой, то целесообразным будет использовать программы для управления проектами, например, Trello. Создав доску с планом работы, мы можем подключить к ней других разработчиков или заказчика проекта. В таком случае, каждый сможет видеть на какой стадии в данный момент находиться разработка.
Структура сайта
Решив каким будет наш будущий проект, следует определиться с его структурой. Сюда входят разделы сайта. Согласно разделам, будет строиться меню навигации. Здесь же следует решить, будет ли это лэндинг или многостраничный сайт, выстроить логику подачи материала. Всё это будет играть немаловажную роль в проработке дизайна.
Прототип макета
Профессиональные дизайнеры сразу не приступают к созданию конечного дизайн-макета. Для удобства создания макета, следует создать его более упрощённый вариант, своего рода набросок или прототип. Он может быть выполнен в любом графическом редакторе ( Adobe Photoshop, Figma и т.д) или даже спроектирован от руки.
Такой прототип представляет собой схематическое отображение структуры сайта. В него входят:
- блоки контента
- расположение навигации
- логотип
- сайдбары
- шапка сайта (хедер)
- нижний колонтитул (футер)
- внутренние и внешние отступы.
Основные элементы страницы
Блок контейнер
Контейнер определяет область показа контента на странице. В большинстве случаев он задает максимальную ширину макета.
Хедер или шапка сайта
Хедер может содержать ключевые сведения о ресурсе, логотип или слоган компании, блоки обратной связи (например, “заказать звонок”) и элементы навигации. При этом очень важно не перегружать хедер. Обычно наличие хедера определяет дизайн навигации сайта, расположенный поверх контента.
Навигация
Панель навигации содержит ссылки или специальные “якоря” для перехода или прокрутки к нужным разделам. Может располагаться в хедере, справа или слева. В мобильной версии, навигацию иногда располагают внизу экрана, подобно нативным приложениям на смартфонах.
Логотип
Хороший логотип способен привлечь внимание пользователя. Чаще всего его выносят в верхний левый угол макета или помещают в середине шапки сайта, в зависимости от задумки дизайнера. Ещё логотип можно использовать в момент загрузки сайта в качестве прелодера.
Блок содержимого
Блок непосредственно для вывода контента. Может быть разбит на секции или другие блоки.
Нижний колонтитул или футер
Представляет “подвал” сайта. По традиции включает в себя копирайт и прочую правовую информацию. Может содержать ссылки на другие ресурсы и социальные сети. Часто в футер помещают формы обратной связи.
Разбирая вёрстку, мы ещё познакомимся с этими компонентами. Пока что нам достаточно лишь схематически очертить их границы.
Следующим важным шагом, будет продумать соотношение этих элементов при просмотре с мобильных устройств. Это важно, учитывая, что по статистике более 60% пользователей просматривают сайты с экранов планшета или смартфона.
Фиксированный макет, резиновая и адаптивная верстка
Ещё недавно, адаптивная и резиновая вёрстка считалась неким необязательным дополнением. Многие элементы веб-страниц задавались фиксировано в пикселях. В результате при изменении ширины экрана, они либо оставались в прежнем качестве, либо верстка и вовсе “съезжала”. В любом случае, просмотр таких веб-страниц затруднялся, а сайт терял в конверсии.
В настоящее время, подобное фиксированное отображение почти не используется, а резиновая и адаптивная верстка является принятым стандартом.
Резиновый или отзывчивый макет
Такой дизайн полагает, что элементы и блоки веб-страницы могут менять размеры пропорционально размерам экрана. Подобный эффект достигается за счёт использования относительных свойств элемента:
- min-height / max-height
- min-width / max-width
А также установки значений этих свойств в относительных единицах измерения, таких как:
- % (процентное соотношение)
- vh / vw (ширина и высота окна браузера)
- vmin / vmax (максимальные и минимальные значения высоты и ширины)
- em — (значение font-size родителя)
- rem — (значение font-size корневого элемента)
Несмотря на универсальность подобной концепции, на практике возникают моменты, когда одного лишь резинового подхода недостаточно. Порой нужно менять позиционирование блоков, а то и вовсе скрывать и показывать те или иные элементы. Поэтому, сегодня “резиновый” способ редко используется сам по себе. В большинстве случаев, его применяют вместе с техникой адаптивной верстки.
Адаптивная верстка. Или почему одного макета может не хватить
Создавая адаптив, верстальщик определяет так называемые “брейкпоинты”. Проще говоря, это точки перехода, реагирующие на изменение размеров экрана. При достижении которых будет выполнено определенное условие изменяющие поведение элементов страницы: смена расположения блоков, скрытие ненужных элементов. Такие точки задаются в пикселях, а измеряемой величиной обычно является ширина экрана.
На этапах планирования и дизайна, нам важно определиться какие устройства мы хотим поддерживать в нашем проекте. К слову, это могут не только мобильные устройства, но и большие экраны.
Исходя из вышесказанного, становиться ясно, почему может потребоваться дизайн нескольких вариантов макета.
Модульная сетка
Хорошей практикой в составлении дизайна и позиционировании элементов страницы, является модульная сетка. Она делит страницу на колонки, и задаёт стандарт расположения элементов страницы.
На данный момент самыми популярными являются сетки:
- Предоставляет сетку, которая делит страницу на 12 равных колонок. Обычно с ней используют контейнер, ограничивающий рабочую область шириной 1170px.
- Figma Layout Grid. Адаптивная сетка в графическом редакторе Figma. Данную сетку можно наложить с нужным количеством колонок, и динамически подогнать под макет.
Mobile First
Подход к верстке сайтов, при котором дизайн-макет и последующую верстку начинают с мобильной версии, и только после делают адаптив под десктоп. При этом основными критериями здесь выступают:
- Продуманность дизайна и навигации под мобильные устройства.
- Правильная подача контента (в начале — самая важная информация)
- Оптимизация сайта под слабое интернет соединение.
Освоив основные паттерны построения макета, мы можем перейти к более детальной реализации дизайна
Дизайн
Создав набросок, мы можем приступить к проектированию дизайн-макета. Он создаётся в графических редакторах. Среди таковых на данный момент используются Figma, Photoshop, Avocode и Sketch (чаще всего используют первые два).
Moodboard
Чтобы создать качественный дизайн-макет дизайнеры прибегают к составлению moodboard (букв. пер. доска настроения). Такая доска заключается в поисках референсов по теме сайта, что помогает построить визуальную концепцию.
Референсами могут послужить ассоциативный ряд изображений, заголовки и многое другое. Порой для составления такой доски используют специальные программы. Самая лёгкая и простая из них это Pureref.
Составив доску ассоциаций, нужно определиться с цветовой палитрой.
Для подбора палитры можно использовать множество сервисов:
- adobe.com — Позволяет создавать палитры на основе изображения.
- ru — Замечательный сервис, с возможность просмотра выбранной палитры на примере веб-странички
- palettable — Упрощает подбор цветовой схемы по принципу нравится/не нравится
- flatcolors — Сервис по подбору палитры для flat дизайна.
- materialpalette — Палитры для material дизайна, соответсвено.
В большинстве случаев для гармоничной палитры нам нужно выбрать два контрастирующих цвета, а также акцентный цвет для выделения нужных нам элементов. Кроме этого, стоит позаботиться о цветах для шрифтов.
Элементы интерфейса и Call to Action
Говоря о дизайне, стоит уделить внимание также интерактивным элементам сайта. Сюда относятся: кнопки, баннеры, слайдеры, квизы и т.д.
Они должны захватывать внимание, побуждать пользователя выполнить действие, но при этом не быть слишком навязчивыми, чтобы не перегружать визуал.
Например, для лендингов подходит наиболее известная формула мотивации пользователя — AIDA.
Принцип AIDA
Смысл AIDA заключается в построении макета в виде маркетинговой воронки, базирующейся на принципах:
- Привлечь внимание (Attention)
- Заинтересовать (Interest)
- Вызвать желание (Desire)
- Побудить к действию (Action).
Именно в таком порядке выстраиваются блоки с подаваемой информацией. То есть, в начале должен стоять интригующий заголовок и яркая картинка. Потом информация разъясняющая, почему это стоит внимания. Дальнейшим шагом, может быть, к примеру, специальное предложение. И в конечном счете форма связи, кнопка “оформить заказ”, “записаться на курсы” и т.д.
Возможно данный отступ покажется незначительным в плане разработки, но чтобы создавать сайты с хорошей конверсией, важно понимать психологию пользователя.
Шаблоны просмотра страниц
Традиционный паттерн отображает блоки один под другим, с изображениями на одной стороне макета и текстом на другой.
Распространенной альтернативой такому шаблону считается Z паттерн. Руководствуясь такой схемой, разработчик чередует медиа-контент и текст в каждом блоке. Такое размещение разбавляет монотонность контента, и по некоторым данным лучше воспринимается пользователем.
Визуальное направление
Ещё один приём для акцентирования внимания пользователя на нужном элементе. Такими направляющими могут служить:
- Акцентная картинка
- SVG графика
- Шрифты
- Анимации
- Стрелки и переходы
Здесь важно не выходить за рамки концепции дизайна, в которой создается макет.
Тренды дизайна веб-страниц
И конечно, стоит рассмотреть основные тренды направлений дизайна.
Flat UI. Плоский дизайн, экстра-глубина и параллакс
Плоский дизайн постулирует минимализм, векторную графику и отсутствие объемных объектов. Важную роль в основе стиля занимает контрастность палитры и типографика.
В последние годы популярным стал “почти плоский” дизайн, когда к классическому Flat’у добавляется концепция пространства и глубины. Иногда при таком подходе также используют тени.
Material UI
Материальный дизайн, разработанный компанией Google, продвигает целую концепцию по созданию интерфейсов. Она основывается на строгом понимании опыта пользователей. Основными критериями при этом являются: логичность, строгость и целенаправленность. Каждый объект имеет четкие границы и положение. Каждое действие должно иметь значение.
При этом материальный дизайн отличается интерактивностью. По сравнению с плоским дизайном элементы более тактильны. Отсюда и происходит название стиля.
Впрочем, чистый Material больше встречается в нативных приложениях андроид или продуктах Google. Большинство веб-дизайнеров не любят ограничиваться строгими рамками стиля и часто подмешивают что-то своё.
Скевоморфизм
Относительно старый тренд в построении дизайнов. Он заключается в том, чтобы делать объекты интерфейса близкими к реальным аналогам. Самый распространенный пример — это дизайн старых продуктов Apple. В настоящее время редко используется, занимая незначительную нишевую область.
Неоморфизм
Сплав абстракции от скевоморфизма и плоского дизайна. Но в отличие от Flat, где используется контраст палитры, элементы управления в неоморфизме выделяются с помощью внутренних и внешних теней.
Разработка
Разобравшись с дизайном, можно переходить к процессу “оживления” нашего макета. Но чтобы начать верстать и писать код, необходимо установить редактор кода и настроить окружение.
Редактор кода
Редакторов кода огромное множество, мы рассмотрим два самых популярных.
Visual Studio Code
VS Code — свободный текстовый редактор от Microsoft. Он интересен тем, что поддерживает все нужные фронтенд разработчику инструменты практически “из коробки”. В случае чего, его функционал может быть расширен дополнениями.
В частности, в нём изначально встроен такой полезный инструмент как Emmet. Позволяющий пользоваться сокращениями при написании HTML-разметки. Еще одним существенным плюсом является наличие встроенного терминала (что упрощает работу с командной строкой).
Данный редактор прекрасно подходит как для новичков, так для профессионалов. Единственным его минусом, пожалуй, будет скорость работы с файлами большого размера.
Sublime Text
Sublime Text — Давно и заслуженно любимый многими программистами редактор. Имеет гибкую, модульную структуру. Откровенно слаб “из коробки”, но при грамотной настройке не уступает платным IDE. Имеет огромную базу пакетов расширений, которые устанавливаются из репозиториев с помощью встроенной утилиты Site Package Control. Написан на С++, а потому работает довольно быстро, даже с большими проектами.
Так или иначе, выбор редактора дело сугубо индивидуальное и проверяется временем. Чтобы определиться – нужно установить и начать работать.
Организация проекта.
По правде говоря, уже давно прошла та пора, когда готовую верстку можно было просто сбросить в папке с файлами html, css и js, кучей картинок и прочего хлама, и все были бы довольны.
Тот же сервис Google Page Speed, настоятельно рекомендует нам использовать минифицированные версии файлов скриптов и стилей. Картинки следует сжимать, ради экономии трафика и скорости загрузки сайта.
Также мы хотим писать код используя современные методы разработки. А именно использовать препроцессоры для CSS и синтаксис ES2015 для файлов скриптов. Всё это действительно важно. Во-первых, потому что это облегчает работу.
Во-вторых, это делает наш код — удобочитаемым и сопровождаемым. И людям после нас (а порой и нам самим!) будет легче разобраться в нём, в случае необходимости внесения правок.
В-третьих– оптимизированные сайты лучше индексируются в поисковых системах. А это уже немаловажный факт.
Именно поэтому для достижения speed, concurrency и всего такого, лучше пользоваться сборщиками. Самые распространенные это Gulp и Grunt. Есть и более сложные инструменты, вроде Webpack, но в этой статье мы не будем их касаться.
Gulp
Gulp — это инструмент для автоматизации и организации задач веб-разработки.
Чтобы установить и запустить gulp, на вашем компьютере должен быть установлен Node.js (среда для выполнения javascript вне браузера). Также Gulp не имеет графического интерфейса и для работы с ним придётся пользоваться командной строкой.
На сайте Gulp представлена подробная документация об установке и первом запуске.
После успешной установки в директории проекта необходимо создать конфигурационный файл gulpfile.js. В нём будут описываться все необходимые задания.
В заданиях (они представлены функциями) указываются файлы и директории, из которых Gulp будет забирать файлы. Все дальнейшие манипуляции с файлами проводятся посредством плагинов.
Например, установив плагины gulp-clean-css и gulp-concat , мы сможем чистить весь css код от комментариев, сжимать его и на выходе выдавать минифицированный, собранный в один style.min.сss файл код.
Плагин gulp-sass, позволит нам компилировать код препроцессоров SCSS и SaSS в читаемый браузерами CSS. А плагин gulp-autoprefixer автоматически добавит css-префиксы для поддержки старых браузеров. gulp-imagemin сожмет картинки и положит их в отдельную папку.
Аналогично, с js скриптами. Мы можем сжимать их, конкатенировать, а также использовать полифилы для улучшенной поддержки нашего кода браузерами.
И всё это можно делать “на лету”. При этом через Gulp мы можем даже настроить авто перезагрузку страницы в браузере. Думаю, теперь вы понимаете, почему этот инструмент столь популярен у разработчиков.
пример task функции в gulpfile.js
Написание HTML
HTML представляет собой скелет проекта. Разметка создаётся с помощью тэгов.
В стандарте HTML5 добавлено множество специальных тэгов, стандартизирующих верстку. Со всеми ними можно ознакомиться по ссылке.
Готовые каркасы и шаблонизаторы
Существует множество готовых html boilerplate’ов — заранее созданных каркасов для ускорения разработки.
Более опытные разработчики часто используют шаблонизаторы HTML, облегчающие написание и чтение страниц. Такие шаблонизаторы также позволяют избежать многократное повторение кода, путём переиспользования шаблона. На данный момент популярностью пользуется Pug (Jade). Используя Gulp можно писать разметку на Pug и собирать её в HTML.
Методология наименования классов. БЭМ
Чтобы как-то стандартизировать и упростить вёрстку существуют правила её написания. На территории стран СНГ, в основном, принято соглашение на основе БЭМ (Блок, Элемент, Модификатор). Данная методология была разработана Яндексом, и уже давно стала неким стандартом хорошей верстки.
Блоком называется независимый компонент, который может быть переиспользован. Название его класса должно характеризовать блок, говорить, что он собой представляет (menu, content и т.д.)
Элемент — это составная часть блока. Структура его имени записывается по принципу “имя-блока__имя-элемента”.
Модификатором называют класс определяющий поведение или состояние элемента (focused, active и т.д)
В документации к БЭМ записаны основные правила наименования классов и соблюдения вложенности.
Написание CSS
Написав разметку страницы и задав имена классам, можно переходить к написанию стилей.
Normalize.css
Перед подключением собственных стилей, правильным подходом будет привести к дефолтным настройкам стили заданные браузером. Обычно для этого подключают файл Normalize.css
Не рекомендуется сбрасывать все стили в ноль, используя конструкцию вроде:
Операция по выборке всех элементов страницы может дорого вам обойтись, замедлив загрузку сайта.
Данный файл можно конкатенировать и сжать вместе c другими стилями посредством сборщика. Только не забудьте, что он должен быть первым.
Снятие размеров с макета
Значения отступов и размеров берутся из дизайн-макета. При работе с пикселями, нам поможет инструмент “Линейка”. Производится замер и значения переносятся в CSS.
Если нам необходимо конвертировать размер в проценты, то значение вычисляется по формуле:
ширина элемента / ширина блока родителя * 100%
Cелекторы и пространство имен
В СSS лучше избегать слишком длинных записей ссылающиеся на всю родительскую ветвь тэгов, вроде .main .navbar li span a . Такой вид записи создаёт лишние зависимости. Если понадобиться поменять какой-либо промежуточный элемент, нам придётся менять и стили. К тому же, парсер читает CSS код справа налево, поэтому такая запись не только не ускорит загрузку, а напротив замедлит её.
Следует всячески избегать контекстной зависимости кода. К примеру использование селекторов класса вместе с селекторами типа. Это создает лишнюю работу и путаницу.
Позиционирование и выравнивание элементов. Flexbox и Grid CSS
Пожалуй, самым важным в верстке макета, является расстановка и выравнивание элементов на странице. Раньше это достигалось за счет использования свойства float или абсолютного позиционирования.
В настоящее время в СSS существуют инструменты разметки такие Flexbox и Grid.
Они представляют собой модули с набором свойств для построения и выравнивания элементов даже с динамическими или не указанными параметрами.
Поддержка Grid браузерами пока что недостаточно полная. Flexbox уже вовсю используется в современной верстке.
Переменные
В современном стандарте CSS3 появилась возможность использовать переменные.
Вы можете объявить переменную для элемента или глобально — используя псевдокласс :root
В дальнейшем их можно использовать где угодно.
Следует учитывать, что некоторые старые браузеры не поддерживают подобную технологию. Чтобы узнать степень поддержки того или иного свойства можно воспользоваться сервисом caniuse.com
Препроцессоры Sass/SCSS
Если вам понравилась идея переменных, то возможно вы захотите большего? Препроцессинг добавляет в CSS элементы из языков программирования, среди которых:
- типы данных (строки, массивы, ассоциативные массивы)
- математические операции
- функции
- логические условия
- импорты и миксины
- наследование
и много других полезных свойств.
Sass/SCSS является самым популярным препроцессором и представляет два вида синтаксиса. Какой из них выбрать — дело вкуса.
CSS Фреймворки
Существуют целые фреймворки для написания стилей. Самый известный из них Bootstrap, мы уже упоминали его, в разделе о модульных сетках. Данный фрейморк ориентирован на модульную сетку из 12 колонок. В общих чертах, позиционирование и стилизация происходят методом добавления уже стилизованных классов в разметку.
Есть и другие популярные фреймворки, вроде Tailwind CSS или Foundation .
Стоит сказать, что использование подобных комбайнов, целесообразно в крупных проектах, нежели одностраничных лендингах.
Написание JS
DOM
Ну вот мы и добрались до программирования. В первую очередь скрипты используют для придания интерактивности элементам и обработки событий. Сами же элементы страницы представлены в виде документно-объектноймодели (Document Object Model). Для получения доступа ко всем элементам DOM в js предопределен объект document.
Через него, например, осуществляется выборка элементов. С которыми позже мы сможем взаимодействовать.
jQuery и другие
Ещё один незыблемый столп веб-разработки — библиотека jQuery. Это маленькая и простая библиотека, созданная для упрощения запросов к DOM. Она может оказаться полезной при валидации форм, поиске по дереву DOM или отправке ajax запросов.
За время её существования, было написано тысячи плагинов, реализующих тот или иной функционал. Так что, если вы соберетесь писать слайдер или аккордеон, не торопитесь, ведь кто-то его уже написал до вас.
Всё же, не стоит подключать лишние скрипты, если вы не уверены в их востребованности. В настоящее время многие задачи можно решить даже средствами CSS.
Если говорить о современном js, то всё больше разработчиков отказывается от подобной реализации. Сайты и веб-приложения переписывают на более новые библиотеки и фреймворки. такие как React, Vue или Angular, предлагающие компонентный подход. Но это уже материал для отдельной статьи. А мы тем временем переходим на сторону сервера.
CMS. Системы управления контентом сайта
Для создания динамически генерируемых страниц на базе нашей вёрстки проще всего использовать CMS.
СMS (Content Management System) — это движок сайта, упрощающий публикацию и редактирование контента, а при должной настройке позволяющий менять саму структуру сайта. Существует множество решений, но какое из них выбрать?
Во-первых, CMS разделяются на открытые (WordPress, Drupal) и проприетарные (Битрикс). Во-вторых, по назначению: для коммерческих проектов (Opencart, Prestashop) и более-менее универсальные.
Ниже приведён обзор нескольких популярных CMS:
WordPress
Вероятно, эту CMS знает даже тот, кто напрямую не связан с веб-разработкой. Множество российских и заграничных сайтов выбирают эту платформу, за её открытость, простую установку и настройку. А также благодаря огромному количеству плагинов, позволяющим свести время разработки дополнительного функционала сайта к минимуму усилий.
Плюс в копилку WordPress — это её распространенность, которая даёт разработчику широкий выбор среди хостинг-провайдеров.
WP хорошо подойдёт для создания лендинга, блога или новостного сайта, но среди набора её плагинов есть и те, что позволяют существенно расширить функционал. Используя WP вместе с WooCommerce можно создавать интернет магазины и другие коммерческие проекты.
Минусом WordPress является возможность работы только с базами данных типа MySQL.
1С-Битрикс
1С-Битрикс — это довольно популярный проприетарный продукт на российском сегменте. Имеет множество версий для реализации нужной архитектуры сайта:
- “1С-Битрикс: Управление сайтом”
- “Битрикс 24”,
- “Интернет-магазин + CRM”
- “Enterprise”
Предлагает решения от простого веб-сайта до интернет-магазинов и сложных корпоративных сайтов. Из минусов стоит отметить определённые сложности посадки сверстанных страниц, и необходимость покупки лицензии.
MODX
MODX — открытая и расширяемая посредством модулей среда. ModX сочетает в себе простоту и много достоинств, таких как: встроенные из коробки AJAX поиск и систему регистрации пользователей.
В отличие от WordPress Modx может работать не только на Apache, но и на других веб-серверах (например, Nginx). Совместима с принципами MVC. По-сути является не CMS, а чем-то средним между системой управления контентом и фреймворком.
Modx имеет две ветки развития: Revolution — собственно новейшая версия от разработчиков, и Evolution — версия от комьюнити.
Из минусов данного программного обеспечения можно отметить более высокий порог вхождения.
Работа с CMS
Как только мы определились с CMS, можно начинать интегрировать в выбранный движок свою вёрстку. Процесс посадки вёрстки состоит в основном из добавления php-скриптов и кастомных полей, выводящий необходимую информацию из редактора админ панели.
Чтобы не делать это сразу на хостинге, существуют программы, позволяющие запустить локальный сервер на своём компьютере. Самым простым и типичным вариантом для пользователей Windows является использование Open Server.
Вывод сайта на хостинг
Закончив наконец настройку CMS можно перейти к развертыванию сайта на хостинге. Для этого нужно купить доменное имя и прописать для него DNS-серверы вашего хостинг провайдера. Также не будет лишним позаботиться о подключении SSL сертификата, чтобы подключение шло по защищенному соединению.
С этого момента начинается работа для SEO — продвижение сайта в поисковой выдаче.
Итоги и размышления
Данная статья описывает лишь самые базовые принципы создания сайтов. Как видно из материала, задача нетривиальна и требует определённых знаний. Но если вы решили стать на путь веб-разработки, то это лишь малая часть, того что придётся изучить для создания конкурентоспособных веб-интерфейсов.
В любом случае, сложность процесса — не повод откладывать мечту в долгий ящик. Вы можете заказать разработку вашего сайта в студии Business-up и наши специалисты помогут вашим идеям увидеть просторы сети.
