Какие инструменты использовать Веб-разработчику для создания сайта на заказ?

Question

[Алексей Юдов]

Всем доброго времени суток!

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

Comments

[Hyubert]

Frontend

• node.js
  
• npm/yarm
  
• gulp/webpack
  
• sublime text/atom
  
• avocode/photoshop
  

[Модератор]

Конкретизируйте вопрос.

Answer 1

[Захар Кущенко]

Слабо понимаю, что вы хотите, но как я понял вам нужны все инструменты для создания сайта.
IDE: WebStorm(PhpStorm, etc)
Программа где будете смотреть PSD макет: тут есть 2 варианта, PhotoShop или Adobe Creative Cloud. В первом вы смотрите все ручками, а в другом вы загружаете макет в сайт и тоже смотрите все ручками как в Фотошопе. Если знакомы с Фотошопом берите его.
Локальный хостинг: Open Server, Apache, MySQL. Тут выберете, то что вам нужно.
По желанию: Git(SVN, Mercurial ), FileZilla.
Вроде все. Опять же много зависит какой сайт вы хотите сделать, интернет-магазин, лендинг, etc.
U.P.D Если у вас only-верстка, то можете взять Brackets вместо WebStorm'а, или прикрутить к нему(WebStorm'у) LivePrewiew.

Comments

[Anton Filippov]

спасибо, что вернули меня в 2013) ностальгия

[Захар Кущенко]

Anton Filippov, Вы про что? Все технологии не самые новые, но и не самые старые.

[Алексей Юдов]

Вопрос по большей части такой. Стоит ли исключать ручную верстку при выполнении заказа или эффективнее пользоваться кликерами?

[archelon]

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

[Иван]

Anton Filippov, А что ныне в тренде?

[Алексей Юдов]

archelon, под кликерами я подразумеваю например WebSite X5 и подобные

[archelon]

Алексей Юдов, а также wix, ukoz, tilda и т.д.
Это не профессиональные инструменты.
С помощью таких конструкторов вы можете быстро сделать шаблонный сайт.
Во многих случаях это будет лучше и эффективнее, чем сайт, криво сверстанный вручную начинающим вебмастером.
Возможно, в ближайшем будущем рынок низкобюджетных сайтов полностью уйдет к таким сервисам.
Но сейчас это скорее инструмент для быстрого прототипирования, молниеносного запуска лендинга (когда нужно вот прямо через пару часов запустить), либо для заказчиков, которые хотят сэкономить на разработке.

[Алексей Юдов]

archelon, то есть в других случаях, пишется все руками?

[archelon]

Алексей Юдов, совершенно верно.
есть вспомогательные инструменты, которые берут на себя некоторые рутинные задачи.
но основная часть работы — именно руками.

[Алексей Юдов]

archelon, именно такой ответ мне нужен

[darksladen]

Anton Filippov, как жалко, что ответы минусовать нельзя! Ляпнул и в кусты спрятался. Скажите же чем вы пользуетесь. Или apache и mysql старье для вас из 90-х, а вы такой модник на хипстерском монге сидите и делаете сайты визитки?

[Алексей Юдов]

darksladen, да Бог с ним. Вопрос решен, отметки только нет, т.к. господин, написавший ответ на вопрос писал в комментариях.

[Anton Filippov]

darksladen, я не хочу срач разводить, в ответах уже перечислены более современные технологии, да и к тому же, выяснилось, что автор не о технологиях спросил, а о подходе.
ну и перечитайте мой коммент ещё раз, он был позитивно настроен, а вы чет какой-то негативный)

Answer 2

[tema_sun]

стоит ли исключать верстание шаблонов с того же PSD используя IDE, т.е. руками?

Как это можно исключить, если это единственный способ верстать нормально?

Comments

[Алексей Юдов]

В этом и соль вопроса. Может я чего пропустил и не знаю о каких то инструментах.

Просто тут на днях верстал сайтик для одного спортивного тренера, использовал WеbStorm от JеtBrains ( нереально умная IDE, умнее пока не видел ), так вот, верстал я верстал и мягко говоря заепался... От сюда и вытек мой вопрос. Как свести труд к минимуму? Отмечу, что я не ищу халявы, просто не хочу делать лишнюю работу.

[Александр Филиппенко]

Машинная вёрстка существует, но результат на выходе нельзя назвать даже удовлетворительным. А уж когда захотите натянуть её на CMS, взвоете.

Answer 3

[Александр Таратин]

https://avocode.com/
https://webpack.js.org/
https://code.visualstudio.com/ (тут стоит понимать, что вся мощь автокомплита js/ts будет работать только при использовании модулей СommonJS/ES6 для подгрузки библиотк + не забывать устанавливать https://github.com/DefinitelyTyped/DefinitelyTyped для библиотек, которые публикуются в npm без d.ts файлов)

Answer 4

[Odisseya]

Связку инструментов и свой Workflow выработается в ходе работы, попробуйте ускорить процесс используя что-то вроде:

• Редактор + Хоткеи — ускоряют создание html/css структуры. Например: Sublime+Emmet. Пишем что-то вроде: «ul>li.item-${$$}*6» — это разворачивается в:
  

  <ul>
  		<li class="item-1">01</li>
  		<li class="item-2">02</li>
  		<li class="item-3">03</li>
  		<li class="item-4">04</li>
  		<li class="item-5">05</li>
  		<li class="item-6">06</li>
  	</ul>

  
  
  
• Сборщик, например Node.js+Gulp — автоматизируют конкатенацию, минификацию, препроцессинг и пр.