Как создаются современные сайты?

Добрый день! Подскажите пожалуйста, как создаются современные сайты. Я начинающий верстальщик, изучила html, css, предпроцессоры SASS/Stylus, сейчас осваиваю JavaScript. Создаю пока для себя различные тематические сайты с использованием того, что прописала выше. Далее планирую создать портфолио для будущих заказов. Но вот дилемма. Сейчас современные верстальщики создают сайты именно с использованием cms, фреймворков и других подобных фишек? То есть, сайт на чистом html/css (я работаю в редакторе Sublime Text 3) и JavaScript уже не так актуальны и не привлекут никого? А как тогда? Берется готовый psd-макет и верстается с помощью разных технологий и все? Или объясните пожалуйста, как это происходит. Спасибо большое, надеюсь понятно объяснила)
  • Вопрос задан
  • 6660 просмотров
Решения вопроса 2
@Astrawelt
Антон
Сейчас многие современные верстальщики страдают какой-то небывалой дичью, засовывая тонны JS куда только можно и не можно.
Пожалуй, мы ушли от простого: база данных, php и htm/css обвязка. Более того, тот же Гугл просит сайтостроителей делать простые и легкие сайты. А то порой дизайнеры такую ерунду в фотошопе нарисуют, что это никак не сверстать. И сайт получается очень тяжелый, что еле еле загружается даже при скорости 100мбит.
Ответ написан
by_DK
@by_DK
Комплексно автоматизарую малый бизнес
Здравствуйте!
Странно что вопрос собрал такой небольшой отклик, да и ответы насколько я понял совсем не содержательны, по этому решил вставить немного и от себя.
Для начала стоит сказать, что я в своём понимании делю весь рынок на малых предпринимателей и крупных игроков. Именно с малыми работаем мы в компании, и я буду говорить с этой точки зрения. Сам я занимаюсь подбором подходящих решений для разных ситуаций и разного бизнеса, фактически - автоматизацией малого бизнеса, в разных проявлениях. В том числе и создании сайтов (именно для малого и среднего бизнеса, мы не работаем над enterprise - решениям!).

1. Языки разметки
html, css и все дополнения вроде препроцессоров - довольно понятная и лёгкая штука, научится верстать сайт - реально просто в данный момент, главное иметь достаточно времени на изучение вопроса и практику. Однако стоит понимать, что страницы на чистом html совершенно статичны - однажды создав и сдав сайт заказчику он уже ничего не сможет с ним сделать без помощи другого разработчика, или не научившись работать с кодом напрямую, а им это конечно не нужно. Тут на помощь как раз приходят CMS-системы, которые позволяют и править контент по-человечески, и динамически выводить информацию (например в блоге или интернет-магазине). Так что конечно - ни один современный сайт (возможно не считая лендингов) не работает только на языках разметки.



2. CMS - системы
Тут всё тоже не очень просто - CMS систем много, и критерии выбора подходящей для определённой ситуации системы могут быть очень сильно размыты. Тут каждый решает для себя что нравится ему, и только так - иначе мы не имели бы такого разнообразия вариантов. Для себя я выделяю 3 рабочих инструмента:
  • WordPress - в первую очередь он хорош потому что очень популярен, в том числе в русскоязычном пространстве, и решить можно любую проблему просто загуглив её. Обилие плагинов так же упрощает работу и позволяет в кратчайшие сроки сдать проект. Конечно, у плагинов есть и обратная сторона - они безусловно работают медленнее, чем аналогичное решение выполненное на чистых языках. Итого, если вам нужны плагины и не хочется возится с кодом - WP подойдёт. Если хочется сделать хороший продукт и навыки позволяют - лучше идти дальше.
  • October CMS - относительно новая и совершенно не популярная в России CMS-система. Но она потрясающая. Почти все свои новые проекты я делаю на ней, но нужно быть готовым к тому, что понадобиться неплохое знание php и работа именно с кодом. Для сравнения и понимая - разработка сайта на WP вообще очень частично касается работы с редактором кода, больше приходится возиться с созданием и настройками темы, плагинов и прочей ерунды (которая конечно облегчает создание сайта для людей не знакомым с кодом, но усложняет жизнь разработчикам). Короче говоря, на мой взгляд October - лучшая CMS для разработчиков на сегодняшний день.
  • Битрикс УС. Конечно Битрикс ненавидят все, и в общем-то вполне резонно - система очень старая, до сих пор сохранившая в себе пережитки старых технологий и очень долго поворачивающаяся к чему-то новому. Конечно, создавать простые сайты на БУСе я бы не стал ни за что, но когда речь заходит об интернет - магазинах - ему реально нет равных, во всяком случае если сложить вместе все возможности и уметь пользоваться инструментом. Важный момент - это касается интернет - магазинов с номенклатурой не менее 1.500 позиций, необходимости отслеживания товара на складе, управления логистикой и интеграции с 1С: Предприятием. Из минусов - придётся потратить месяца 4 на изучение, и не факт что это себя оправдает.


3. Альтернатива для клиента
Самая важная штука в том, что дело не в визуальной оболочке сайта, а в том, как он работает, зачем он работает и какую цель преследовал заказчик когда его заказал. Создавая портфолио из простых сайтов, работающих на html никого удивить не получится. Мы уже давно начали работать с готовыми html шаблонами, и стоят они от 6$ до 30$ в невероятных по своей красоте и функциональности решениях. И для бизнеса это очень классный инструмент, потому что заказать дизайн + верстку у любого фрилансера будет стоить не менее 200$ (за очень и очень плохой вариант), а за хорошие решения для корпоративного сайта цена за тот же пакет услуг может достигать и 5.000$ ( а сайт всё ещё не работает!). А теперь зайдите на themeforest и посмотрите что можно найти там. ИМХО - ручная верстка в ближайшем будущем будет нужна разве что крупным проектам, которым реально требуется уникальность, неповторимость, идеальные показатели конверсии, когда каждый процент отражается на прибыли. Я не говорю что для небольших предприятий на всё это можно забить, нет - я хочу сказать что большая часть заказчиков закроет все свои желания на ближайшие 5 лет и классным html шаблоном, тем более что уровень этих самых шаблонов сейчас просто запредельный - они всегда отлично написаны, понятны и функциональны.
Однако что делать с шаблоном? Чаще всего заказчик не сможет сам его запустить, он вообще ничего в нём не поймёт. Скорее всего он вообще не знает что это такое. И этот вопрос уже не закрыть парой баксов - нужно сделать так, чтобы сайт реально работал, был правильно оптимизирован, чтобы заказчик сам мог менять контент, не заглядывая в код, что бы он был интегрирован с CRM-системой, что бы все формы работали, скрипты справлялись с задачами всегда, письма и смс отправлялись клиентам (часто это вопрос CRM-системы, но на мой взгляд это не очень должно волновать клиента, ему нужно чтобы работало). Кроме того шаблон ещё нужно заполнить правильным, красивым тестом (уникальным текстом!) и вероятно ещё много всего.
Такой подход позволяет конечному клиенту получить офигенный (для меня это важно - современный сайт должен быть классным, быстрым, адаптивным, понятным финальному клиенту и приносящим прибыль), полноценный сайт на 20 - 40 страниц за 50.000 рублей. И я уверяю вас - никто и никогда не поймёт, что сайт сделан при помощи шаблона, потому что даже если шаблон купили хоть 30.000 раз - он всё равно занимает настолько маленькую часть в интернете, что на общей диаграмме его видно не будет.

4. Вывод
Раз вопрос был довольно расплывчатым, ответ тоже оказался таким. Опять же, это моё мнение, и мы работает так. Оно не касается крупных проектов, и если вы хотите в это море - вам стоит двигаться в бэкенд по полной - дело там совсем не в верстке. Представьте себе, например, калькулятор ОСАГО - как он работает, откуда берёт информацию, как обрабатывает? Верстка всегда работает по одним и тем же правилам. Важно то, что находится под капотом у сайта. Потому что пока вы работаете с учебными лендингами - всё просто, но реальному проекту надо жить. Сайт не создаётся ради того, чтобы превратить картинку из PSD в картинку в браузере. Сайт всегда решает задачи. Самый простой способ практиковаться - посмотреть задачи на том же фрилансе. Конечно, конечно и конечно верстка неотъемлемая часть работы над сайтом, но это лишь капля в море. И верстальщик, как специалист, на мой взгляд сейчас умирает - верстки мало, чтобы сайт работал. Развивайтесь как комплексный специалист. Раньше, когда мы работали без препроцессоров, без фреймворков это была сложная кропотливая работа. Сейчас ты запускаешь тот же bootstrap, добавляешь пару строк в CSS и подключаешь папку с любимыми js-ами, которые проанимируют что угодно на сайте - готово. Фактически это так. Однако не думайте что вы зря учились верстке - каждому специалисту в вебе нужен html и css, и они часто нужны в работе, но опять же - это лишь малая часть от всего остального, что нужно для работы современного сайта.

Прямой ответ на то, какое ПО реально используется в работе (Windows):
  • Редактор кода (нравится ST3 - здорово, пусть будет он. Я использую VS Code.
  • Ftp - клиент (для подключения к хостингу) - File Zilla. Да, текстовые редакторы сейчас умеют подключаться к хостингам напрямую, но это ужасно медленно работает.
  • Локальный сервер - лучше делать сайты так, потому что гораздо быстрее. По окончанию разработки сайт переносится на реальный сервер/хостинг. Для меня лучший - Mamp, если его мало - OpenServer.
  • Photoshop - без него никуда.
  • PHP 7.xx - если с js в целом всё в вебе понятно и просто, скрипты на PHP для меня всегда казались чуть сложнее и более функциональными. Что бы всё работало на локальном сервере вашего ПК - должен быть установлен PHP. Если сильно хотите идти по пути сложнее - возьмитесь за Python. Если сейчас ничего не понятно - это языки программирования, в целом очень похожие и решать они у вас будут одни и те же задачи, но по PHP сильно больше информации в сети.
  • Отдельно - нужно понимать как работает хостинг, ftp/sftp, панель управления хостингом, DNS-записи доменов, phpMyAdmin и конечно база данных - чаще всего MySQL. Вам не нужно знать это идеально и тонко улавливать как работает одно и как работает другое. Но зачем они нужны, как связаны и что делают - конечно нужно понимать.
  • Всё. Это вообще всё, что может понадобится в работе при создании сайта.


Если появятся дополнительные вопросы - я с радостью буду делится своим мнением и дальше. Если хотите попробовать свои силы в работе по подобной схеме - я ищу удалённых сотрудников, или могу дать реальный пример того, как мы работает с заказчиками.
Мои контакты есть в карточке, всего хорошего и удачи в освоении вопроса - надеюсь вы на верном пути!
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
@niknik_ykt
Самоучка. Энтузиаст.
Приветствую! Давайте я тоже блесну :D во-первых: я тоже начинающий и начинал как раз как вы. Изучил чисто азы для понимания что из себя представляет то или иное и за что эта штука отвечает. Потом на скорую руку пробежался по php (не помню как пришел к этой цели). Сейчас делаю вполне себе годные (рабочие, не виснущие) сайты, правда на cms. Вот тут мне здорово помогает вышеупомянутое. Не редко приходится редачить исходники шаблонов, плагинов, тем, добавлять чтото свое или удалять неугодные куски кода и т.д.
Думаю чистого html, css, js не совсем достаточно чтобы демонстрировать портфолио. Тут надо будет подумать про SEO - sitemap и robot.txt. Ведь заказчику важен именно трафик
Чистой воды ИМХО)
P.S. тема и ответы довольно интересные
Ответ написан
@granty
Современные сайты создаются только на CMS. Сайт - это айсберг. "Верстальщики и PSD-макеты" относятся лишь к маленькой видимой части айсберга - то, что видит и с чем взаимодействует посетитель.
А на вебсервере работает огромная невидимая подводная часть айсберга - множество скриптов, баз данных и тп. В общем, это и есть CMS - система управления контентом. Она может быть связана связана с оплатой, бухгалтерией, наличием товара на складе, системой учета посетителей и кучей всего.

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

Поэтому на голом HTML можно сделать только простые сайты-визитки и одностраничные лендинги.
Ответ написан
Комментировать
@Vaultboy84
Как вы что то там создаете не понимая базовых основ, остается загадкой... Если у вас нет представления о том, что выбор инструментария обусловлен стоящими перед разработчиком задачами, понимания что такое оригинал-макет и как происходит работа с ним, о каком портфолио может идти речь. Какое редактирование разными программами psd макета... Господи, вот что сейчас происходит на рынке фронтенда, тысячи людей выдают себя за верстальщиков банально не понимая даже что они делают. Я рекомендую вам начать с основ и фундаментальных знаний, почитать про http, dom, связь между фронт частью веб проекта и бэком, как происходит обмен данными, запросы к серверу, спа приложения , где они нужны, взять какую нибудь цмску, например октобер, посмотреть пару туториалов и натянуть на нее верстку, после этого. Тогда вы хотя бы будете понимать какие задачи решают те или иные инструменты.
Ответ написан
Кроме верстки есть фронтенд и бекенд
Путь по верстке
Путь разработчика

Есть еще ниши cms и конструкторов вроде тильды, но это не для разработчиков и перспектив нету там.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы