Сегодня существует огромное количество инструментов, чтобы самостоятельно создать веб-сайт без программирования. Я хочу рассказать про эти инструменты, их преимущества и недостатки. А так же, хочу поделиться тем, как самому создать простой сайт, используя базовое программирование. Буквально за 15 минут, через обычный блокнот. Приятный спойлер - на чтение статьи уйдет около 13 минут, а на сам сайт - около 2-х. Специальных технических знаний для этого не потребуется. Итак, поехали!
Способ №1. NoCode конструктор.
Начнём с самого простого способа. Уже достаточно давно работают так называемые NoCode-системы типа Tilda, Wix, Bubble, Webflow и прочие им подобные. Они называются NoCode потому, что не требуют от пользователя навыков программирования. На NoCode-конструкторе можно сделать красивую визитку, MVP или форму для приёма заявок. В отдельных случаях, можно добавить простую логику и интегрироваться с облачными CRM. Но сделать на такой платформе что-то серьёзное, или более интерактивное, будет уже затруднительно.
Конструктор сайтов — это как правило система с перетягиванием элементов по экрану, и написанием текстов. Условно говоря, в левой части экрана у такой системы находится список из готовых блоков, а в правой части - рабочая поверхность сайта. Мы берём понравившиеся нам блоки, перетаскиваем их на рабочую область, и пишем к ним тексты.
Преимущество NoCode-конструкторов в их простоте. Достаточно зарегистрироваться, нажать несколько кнопок, выбрать подходящий дизайн, накидать немного текстов, и сайт готов. Уровень вхождения в такие конструкторы очень лоялен, и не требует технических знаний.
Стоит так же заметить, что большинство NoCode-конструкторов представляют из себя облачные решения. То есть, созданный таким образом сайт будет частью выбранной системы, и будет работать внутри серверов этой системы. Твоя точка доступа к такому сайту - это личный кабинет и условный поддомен-URL, базирующийся на этой системе. Кстати, для поисковой оптимизации и привлечения органического трафика, на мой взгляд, это не очень хорошо.
Способ №2. CMS. Wordpress.
Следующая градация в создании сайтов - использование CMS. Эта аббревиатура переводится как Content Management System ( Система управления контентом ). Такая система позволяет выбрать внешний вид сайта ( шаблон ), добавить к нему модули, личный кабинет, статьи и многие другие элементы. CMS представляет из себя систему, устанавливаемую на хостинг. Такая система требует наличие сервера, и купленного доменного имени.
Преимущество использования CMS в том, что она уже не зависит от облачного поставщика решений, как в способе №1. Достаточно купить собственное доменное имя и арендовать сервер. Установить туда CMS. И делать с ней все что захочешь.
В таких системах уже гораздо больше модулей и возможностей, чем в NoCode-конструкторах. Некоторые системы позволяют писать собственный программный код, создавать собственные модули и менять дизайн сайта на своё усмотрение. Внутри нескольких CMS есть собственные магазины приложений, по типу AppStore или PlayMarket. Там разработчики со всего мира предлагают модули ( части сайта ) и готовые шаблоны сайтов, на платной и бесплатной основе.
Самая популярная в мире CMS - это Wordpress. По различным оценкам, на этой системе работает от 50% до 80% существующих в мире сайтов. То есть, каждый второй или каждый почти-первый в интернете сайт. Преимущество этой системы в её глобальности, бесплатности и простоте. Её установка и запуск занимает считанные минуты, а количество модулей превышает сотни тысяч. Система сделана на высокоуровневом языке PHP, который знает буквально каждый программист. И на мой личный взгляд, Wordpress это прекрасный выбор для создания удобного сайта для решения самых разных задач. С минимальными знаниями в программировании.
Конечно, по сравнению с NoCode это чуть сложней, и как минимум потребуется купить доменное имя и арендовать хостинг. Но это и более профессиональный уровень работы. По крайне мере, освоив CMS по типу Wordpress, Вы уже сможете находить на фриланс-платформах коммерческие заказы.
Способ №3. DIY - Сделай свой сайт сам.
Профессия программиста окутана завесой тайны. Какие-то там программные коды, сервера, дата-центры, хостинг-провайдеры, и множество других непонятных слов. Прямо-таки мистика! Наверное это даже хорошо, поскольку вызывает больше уважения к профессии. Но многие вещи здесь работают проще, чем это принято считать. И так же дело обстоит с самописными сайтами. Давайте разберёмся в этом вопросе.
Что такое сайт, с технической точки зрения?
Технически, интернет-сайт это набор страниц, которые связаны между собой ссылками. Каждая страница сайта — это обычный текстовый файл с набором html-кода и текста. Все языки веб-программирования нужны как раз для подготовки этого HTML-кода (но и не ограничиваясь этим).
Условный сайт это всегда обычная папка на серверном компьютере, в которой хранятся эти самые .html-файлы. Каждый файл представляет из себя отдельную страницу сайта. Например - корзину, личный кабинет, страницу в социальной сети и так далее. Когда мы переходим по некоторой ссылке, то сервер анализирует эту ссылку, и определяет какой файл нужно открыть и обработать. Результат работы веб-сервера это подготовка и отправка html-кода выбранного файла по запросу от клиента.
А вот для трансляции этого html-кода в видимый набор элементов нужен веб-браузер. Например Google Chrome, Firefox, Яндекс.Браузер или всеми любимый Explorer.
Что происходит, когда мы открываем страницу сайта в браузере?
С точки зрения пользователя, процесс работы со страницей любого сайта начинается с перехода на эту страницу. Сначала отрабатывает серверный язык программирования (например PHP, Ruby или Python), который помогает сформировать страницу на основе её базового файла. Потом, страница в сформированном виде (текст + html-код) физически пересылается на компьютер. Далее, страница отображается в браузере, и начинает работать JavaScript, который донастраивает страницу.
То есть. Когда ты читаешь текст на странице сайта или листаешь её вниз - происходит работа с локальной копией страницы. С локальной копией .html-файла. Сайт всё так же хранится где-то там на далёком сервере, а страница уже скачана и отрисована на твоём компьютере. Её кэш загружен в браузер, и отображён на экране. Соответственно, при нажатии на различные кнопки или при переходе на другие страницы — процесс повторяется.
Создаём свой первый сайт на чистом HTML. Практическая часть.
Итак, переходим от теории к практике. Как же нам сделать самый простой сайт на основе базовых принципов HTML? Начнём! Создаём на рабочем столе текстовый файл index.html (обрати внимание, нам нужен именно файл с форматом .html, а не .txt). Открываем файл в обычном блокноте, например notepad++ или "Блокнот". Пишем внутри файла - <html><body><div>Hello world!</div></body></html>. Сохраняем файл. А теперь магия — перетаскиваем этот файл с рабочего стола в Google Chrome. Прямо вот хватаем мышкой и перетаскиваем в браузер. Ждём пока страница загрузится. Ура! Ты создал свой первый интернет-сайт! 🥳
Если загрузить этот самый файл на веб-сервер и купить адрес сайта, то будет работать точно так же, но уже с URL-адресом. А пока что в роли веб-сервера выступает твой рабочий стол, а в роли адреса сайта - название index.html. Такие вот дела.
Конечно, это самый простой и базовый пример. Но практически любой сайт, любой веб-проект работает именно на таких принципах. Всевозможные кнопки, формы ввода, картинки и таблицы - это уже более глубокие знания различных комбинаций HTML и CSS-кода. Но это точно такой же код, написанный точно в таких же файлах. И никакой магии. В следующих статьях мы будем углубляться в изучении HTML и CSS, и со временем научимся создавать современные и красивые сайты. Со всякими крутилками, мигалками и прочими красивостями.
Понравилась статья? Подписывайся, дальше будет ещё интересней! Программирование - это легко.
#программист #it #itтехнологии #обучениепрограммированию #информационныетехнологии #айтишник #программирование #программированиеснуля #программированиедляначинающих #айти #компьютерыитехнологии #языкпрограммирования #обучение #технологии #образование #студенты #сайт #сделатьсайт
🔥 Понравилось? Подпишись! Победим восстание роботов вместе! 🔥
🚀 P.S. Ты можешь круто поддержать меня и проект "Войти в IT" на boosty! Так же, я публикую там более эксклюзивный и профессиональный, иногда немного личный контент. Хочешь посмотреть как автор выглядит в реальной жизни? Тогда жми: Ссылка 🚀
P.S.2 У меня ещё есть Telegram-канал. Там посты чуть попроще, и чуть повеселей. Ссылка
