О веб-разработке для самых маленьких (часть 0.1). Подготовка
Доброго времени суток, уважаемые пикабушники.
Для начала позвольте ещё раз сказать для кого пишется данный цикл. Я затеял это для того, чтобы помочь молодым разработчикам и сайтостроителям вступить в мир веб-разработки. Многие из них научившись базовым понятиям и техникам не знают как сделать свой первый шаг.
Второй задачей, которую я поставил перед собой, является демонстрация того, что отсутствие опыта работы с другими языками программирования не является сдерживающим фактором. Как я уже написал, моим основных языком программирования является C# (до этого был pascal и vb). С PHP я практически не сталкивался, поэтому на своём примере покажу с какой стороны подойти к новому для себя языку.
Также считаю необходимым сказать следующее. В комментариях было предложение начать с поднятия локального сервера и его настройки. Так как я обозначил аудиторию (разработчики, владеющие базовыми навыками и знаниями), то подразумевается, что читатель знаком с WAMP, Brackets, Sublime Text, VSCode и другими сопутствующими инструментами. Да и на просторах интернета туториалов по их установке и настройке слишком много, чтобы добавлять ещё один фантик в мусорную кучу.
Данный пост немного опишет основные моменты дальнейшей работы. Он практически не несёт в себе полезной информации с точки зрения разработки, а является вступлением.
Итак, прежде чем приступить к прототипированию и созданию макетов, нам необходимо определиться с тематикой нашего тестового сайта.
В реальной жизни на этом этапе разработчик получает ТЗ от заказчика, проводятся обсуждения и совещания для согласования деталей и особенностей проекта. После чего мы как разработчики переходим к этапу подготовки и планирования. Почему не надо сразу бросаться в пучины графических редакторов и написания кода? Как показывает практика, такой подход чреват огромным количеством переделок на ходу и тратой лишнего времени на внесение изменений в уже сделанный проект.
Но в данном случае, мы будем выступать как в роли заказчика, так и в роли исполнителя. Поэтому первый этап будет довольно большим и отнимет много времени.
Начнём с выбора тематики. Можно придумать много интересных тем, выбрать что-то необычное. Но данный цикл рассчитан на начинающих и мы будем немного приземлёнными. Разработка огромного портала для нас сложна (пока), а набираться опыта и заработать деньги хочется. Давайте начнём с создания личного сайта, на котором разместим информацию о себе, наших навыках, портфолио и ещё какой-нибудь полезную информации. Постойте, не бросайте в меня помидоры. Позвольте обосновать такое решение.
Разберемся в происходящем.
Вы - молодой разработчик, только вступивший на путь самурая сайтостроения. Подавляющая часть заказчиков (для упрощения будем рассматривать заказчиков с фриланс бирж) требуют от потенциального исполнителя примеров работ. Некоторые, особо упоротые важные заказчики ещё хотят знать о вашем опыте и стеке технологий, которым вы владеете. Конечно, вы можете каждый раз отправлять заготовленный шаблон с этой информацией, но это не для джедаев. Да и где на первых порах взять это портфолио? Для привлечения заказчика нужно выделиться из толпы. Как минимум ваш сайт - первый пример того, как вы умеете верстать и создавать сайты.
Давайте приступим к самому важному этапу - подготовке.
Самое важное, что нужно решить сейчас - структура сайта. Вы можете сказать "что там думать? нужен крутой, красочный лендинг и поехали!". Но если останавливаться только на лендинге, то создание сайта на CMS не имеет смысла, так как такую работу можно сделать быстрее и намного проще в любом конструкторе. Да и сайты с "бесконечной прокруткой" не очень информативны.
Я не оспариваю важность лендинга. Лендинг/домашняя страница - лицо сайта которая может привлечь или отпугнуть посетителя. Поэтому без этого важного кирпичика мы не можем обойтись. Но и делать сайт, состоящий только из лендига не самый лучший вариант.
Давайте набросаем список страниц, которые должны присутствовать на нашем будущем сайте.
1. Лендинг (без него никуда)
2. О нас (здесь мы напишем кто мы и что умеем)
3. "Стек" (назовём пока так. здесь напишем те технологии и языки программирования с которыми работаем)
4. Портфолио
5. Форма обратной связи/заказа
Теперь можно выбрать концепцию дизайна. Что я имею в виду? Как ни странно, нужно определиться с выбором цветовой гаммы для сайта, общими блоками, которые будут присутствовать на каждой странице (например, заголовок и подвал), типографией. Данный этап очень важен, так как он определит внешний вид будущего сайта и удобство для посетителей.
Давайте сделаем сайт белым, а функциональные блоки будут синими (у меня этот цвет является любимым. вы можете выбрать на свой вкус).
На главной странице сайта мы разместим следующие блоки:
1. Наша опухшая рожа самую красивая фотография с небольшим текстом, описывающим нас
2. Последние N выполненных работ с комментариями заказчиков
3. Расценки на работу
4. Форма заказа/обратной связи
Больше блоков делать не будем (я уже писал о лендингах с "бесконечной прокруткой"). Остальная информация отправится на свои страницы.
Вот мы и определились с "скелетом" для нашего проекта. Также на данном этапе необходимо выбрать CMS на основе которой будет выполняться разработка. В вступительной статье я уже назвал её, так что мы будем работать с wordpress.
Что дальше?
Следующим этапом будет прототипирование нашего будущего сайта. Под прототипированием я подразумеваю создание визуальной модели (Wireframe) наших страниц. Этот этап важен для общего понимания строения наших страниц. Также данный метод позволит быстро внести изменения в структуру, если что-то нам не понравится. И на основе таких моделей гораздо проще разрабатывать макеты в графических редакторах.