EkzoMan

Доброго времени суток, дорогие друзья и подписчики.

Вы, наверное, подумали, что автор сдулся. Но нет, я был в отпуске. А после отпуска на работе накопились дела, которые не позволяли вернуться.

Текучку закрыл, собрался с мыслями и вернулся к вам. Итак, для начала объясню смысл слова "Перезагрузка" в названии.

У меня было достаточно времени чтобы обдумать всё. И я пришел к выводу, что неправильно подошел к вопросу.

В предыдущих постах было много претензий со стороны читателей. Некоторые были конструктивными и я учту из. Другие, уж простите, немного бредовые. Учитывая изначально обозначенный круг аудитории (а именно уже практикующие программисты), просьба описать установку локального веб-сервера выходит за рамки статьи. Те, кто собирается выполнять проекты с популярных фриланс платформ, должны знать как выполнять такие простые действия. А также всё зависит от ОС, которой пользуетесь вы. Нет, ну честно, всем ли будет интересно, если я вам напишу 5 команд, которые необходимо ввести в терминале Linux? Особенно если вы пользуетесь MacOS.

С другой стороны, покажу и расскажу как настроить инструменты разработки. Данная тема, действительно, поможет быстрому старту.

И на сладкое. Я решил перезагрузить идею цикла. Вместо создания скучного сайта-визитки, мы возьмём макет реального задания с фриланс-сайта и сделаем проект на его основе.

Представляю вам макет главной страницы взятого проекта.

Небольшие допущения, которые будут в работе:

1. Некоторые изображения будут заменены, так как исходников у нас нет. А пихать картинки с нарисованными кнопками и текстом - не наш выбор.

2. Шрифты будем подбирать максимально похожие, но расхождения всё равно могут быть.

3. В шаблоне есть варианты для мобильной версии. Мне не всё в них нравится, поэтому их тоже немного переделаем.

Что ждёт вас дальше? Мы пройдём следующий путь:

1. Установим и настроим редактор для дальнейшей работы.

2. Создадим каркасный дизайн (wireframe) из представленного шаблона.

3. Разрежем и подготовим макет. Создадим необходимые заготовки для верстки (less файлы).

4. Создадим базовый шаблон для Wordpress с базовым дизайном.

5. Добавим шаблоны нестандартных страниц.

6. Сверстаем блоки заказов и обратной связи.

7. Установим плагины для работы с формами обратной связи и заказов.

Вот такая перезагрузка у нас получается.

P.S. баянометр ругается на картинку

Самое главное для продуктивной работы - создавать для себя уровни абстракции на каждом этапе работы.

Не имеет большого значения, делаете ли вы заказ или разрабатываете сайт "для себя". Первым и самым важным этапом, по моему скромному мнению, является создание прототипа на wireframe'ах (далее визуальных моделях). Уже предчувствую огромное количество критики в свою сторону, но я готов объяснить почему именно так стоит делать.

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

С другой стороны, даже если заказчик вам предоставил готовый дизайн, не стоит сразу бросаться переносить всё это в html. Визуальная модель поможет создать абстракцию на уровне функциональных блоков. Такими блоками будут хидер, подвал, графические блоки страниц, формы и т.п. При этом ваше внимание не будет отвлекать цвет и графическое наполнение.

Написание html и css удобнее делать иерархически. Это позволит вам структурировать конечный код и сохранять его чистоту.

Для создания визуальной модели можно воспользоваться любым удобным редактором. Для примера можете воспользоваться сервисом wireframe.cc (не реклама. выдаётся первым в поисковиках и, как бонус, можно рисовать без регистрации).

Давайте набросаем простую модель с следующими блоками:

1. Горизонтальное меню

2. Графический блок с нашим суровым красноглазым лицом нашей фотографией

3. Блок с последними выполненными работами

4. Блок с списком наших услуг

5. Форма заказа разработки

И получается примерно такая картинка

Описывать принцип работы с wireframe редактором не имеет смысла, так как всё сводится к перетаскиванию блоков на рабочее поле.

Не надо добиваться идеальной точности. Важна структура, которую мы будем переносить в макет и далее в шаблоны.

Результат сохраняем в first_template\temp\images\wireframe.jpg

Наша визуальная модель готова. Как только вы получите удовлетворительный результат, настаёт время переноса этой модели в графику (если нет готового дизайна).

Для начала мы создадим следующий уровень абстракции в который добавим только цвета и графические изображения.

Не заостряйте внимание на нарисованном макете. Во-первых, у меня извращённое чувство прекрасного. Во-вторых, всё сделано на коленке за 15 минут свободного времени. Да и не имеет значения данный дизайн, так как он сделан исключительно для демонстрации.

Наш макет начинает обрастать деталями. В отличии от визуальной модели, теперь мы видим графическое наполнение наших блоков.

Фиксируем завершенный этап работы и положим его в first_template\temp\images\design_clean.jpg

Теперь наступает, по моему скромному мнению, самый занудный этап создания макета. Мы добавим текст и детали. А не люблю этот этап я из-за типографии. Подгонка шрифтов, отступов и т.д. вгоняет меня в тоску-печаль.

Для ускорения наполнения шаблона лучше всего текстовые блоки заполнять стандартной рыбой lorem ipsum. Я же для наглядности написал более-менее осмысленный текст.

Наш макет начал походить на сайт. На текущий момент мы сделали всё, что нам необходимо для того, чтобы приступить к созданию наших шаблонов (не путать с шаблоном для wordpress. до него ещё не дошло). Сохраняем последний макет в first_template\temp\images\design.jpg

И также сохраняем исходник в формате редактора, которым вы создавали этот макет (Photoshop,GIMP, etc.). Он нам понадобится для быстрого внесения изменений или доработок, если в них будет необходимость.

Вот мы и подготовили минимальный набор для того чтобы приступить непосредственно к разработке. Чем больше материалов вы подготовите на этом этапе тем проще вам будет и скорость работы будет выше. Я же показал самый минимальный набор, который необходим на этапе подготовки и создания макетов.

Вопрос к аудитории.

Уважаемый подписчик @zlobak сделал ряд замечаний. Основное замечание, что посты получаются не совсем познавательными. В них не хватает таких вещей, как:

1. Установка и настройка локального сервера

2. Установка и настройка рабочего окружения

3. Посты не для новичков, которые ничего не понимают в разработке (хотя я писал, что на них и не рассчитано)

Буду признателен если вы выскажите своё мнение о том, стоит ли настолько глубоко расписывать? Потому что для этого мне придётся или на работе ставить весь стандартный набор WAMP и т.д. Или поднимать виртуальную машину с windows так как дома сижу на linux.

Доброго времени суток, уважаемые пикабушники.

Матёрым и написавшим 100500 строк кода программистам сразу могу посоветовать не тратить время на чтение. Этот материал будет для вас скучен.

Этим постом я начинаю серию, в которой постараюсь рассказать начинающим веб-разработчикам (и просто интересующимся) о процессе создания сайтов. Очень часто на форумах и специализированных порталах появляется один и тот же вопрос от новичков в мире программирования и сайтостроения о том как начать. Именно это я и постараюсь рассказать.
Сразу договоримся, что рассказывать азы html, css, javascript и сопутствующих технологий я не буду. Этой информации в сети и книгах дох... очень много.
За основу возьмём CMS Wordpress как самую популярную систему управления сайтами. Объясню почему.
Во-первых, большая популярность системы означает, что в сети полно информации и документации.
Во-вторых, огромное количество плагинов, позволяющих получить 80% функционала не тратя время на самостоятельную разработку.
В-третьих, мне просто самому интересно с ней разобраться.
В-четвёртых, самостоятельная разработка даже простейшей CMS займет неоправданно много времени.

Ах, да! Забыл сказать, что я практически не владею PHP. Зачем же я ввязываюсь во всё это не имея опыта разработки на PHP? Хочу показать новичкам, что знание одного языка программирования (в моём случае С#) не является преградой в работе с другими языками. Так что я вместе с вами изучу этот популярный язык программирования.

Цикл будет состоять из следующих больших тем:
1. Идея. От задачи до макета.
2. Погружение. От макета до прототипа.
3. Внедрение. От прототипа до шаблона.
4. Развертывание. Структурирование и наполнение.
5. Развитие. Разработка собственных дополнений.
6. Заключение.

Также, будут небольшие отступления от основной идеи, если понадобится немного порассуждать о тех или иных шагах и решениях.

Если вам интересно, ждите новые посты. Постараюсь не затягивать с публикациями.