Ниже я покажу некотрые особенности верстки, решения и демо работы.
Товар
Когда на нескольких страницах есть похожая сущность, я стараюсь сделать ее одним классом. Чтобы этот элемент был модульным, можно было легко заменить его и вставить его в любом месте сайта и чтобы он не сломался.
В этом проекте такой сущностью была карточка товара. Она незначительно видоизменялась на страницах, но в целом использовала одни и те же элементы.
Поэтому для этого элемента я сделал один класс, который расширил модификациями: для корзины, для каталога, для избранного.
Демо работы интерфейса
Меню в каталоге
Переключение вида товаров
Фильтры и сортировка
Боковое меню
Демо прокрутки, прокрутка двух областей
Клиент хотел, чтобы при загрузке мы показывали, что область с фотографиями можно прокручивать. Я предложил идею после загрузки показывать пользователю, что область прокручивается. Для этого в блоке с изображениями прокрутили немного вниз и вернули в начало.
Сначала обсуждалась возможность создания сайта на Тильде.
Я оплатил платный тариф на своём аккаунте и приступил к работе. На следующий день была готова бета-версия сайта для компьютеров.
Но потом мы столкнулись с ограничениями, которые не позволяли:
Сделать меню как в дизайне
Сделать анимацию и смену слайдов, как в дизайне.
Анимация кнопок была очень затратной по времени — приходилось составлять кнопку из 7 элементов анимацию кнопок. Для сравнения, кнопка в собственной разработке состояла всего лишь из 3 элементов и легко преобразовывалась в кнопки с другой темой.
Анимированная кнопка из 7 элементов.
Александр хотел найти разработчика для проработки этих моментом и встраивания их в Тильду.
Мы обсудили это решение, я рассказал плюсы и минусы такого подхода и мы вместе пришли к решению продолжить разработку вне Тильды.
Разработка вне Тильды
Буквально за 4 дня удалось запрограммировать всю страницу с анимациями кнопок, анимированным слайдером и меню.
Правки контента
После утверждения сайта пришли правки по тексту сайта. Изначально текстовую часть мы не обсуждали, но я пошел на встречу и исправил некоторый текст на сайте.
В подарок установил на сайта админ. панель, в которой можно редактировать сайт без знания кода.
Отчёт о работе
Я знал, что клиент живёт проектом, он был на связи 24/7 и волновался по поводу того, успеем ли мы в срок.
Поэтому каждый день я делал отчет о выполненной работе и планах на завтра. Скидывал ссылку для просмотра результата сегодняшней работы.
Просмотрев макеты, я понял, что многие блоки повторяются на нескольких страницах, значит следует сделать их переиспользуемыми.
За счет чего это достигается?
Следует писать код так, чтобы можно было вырезать целую секцию и переместить ее ниже, выше или на другую страницу. Нужно разбивать верстку на компоненты, которые будут написаны не зависимо оттого, где будут вставлены.
Вся внутренняя стилизация остается внутри компонента, а вот отступы, ширина задается извне.
После создания главной страницы и страницы каталога, другие страницы можно было собирать как на конструкторе.
Возьмем список товаров:
Товары на странице«Каталог»
И имеем тот же блок на посадочной странице
Товары на посадочной странице
То есть мне нужно было один раз создать блок и потом просто скопировать его. Это ведь просто осознать, не так ли?
К сожалению во многих проектах я замечаю, как программисты дублируют десятки строк кода, затягивают разработку и усложняют себе работу.
Слайдер
Слайдер — карусель изображений
Была интересная задачка. Есть 4 вкладки. В каждой вкладке есть карусель с товарами.
Было 2 проблемы:
Из-за особенностей кода, нельзя было стрелки разместить вне плитки товаров. Чтобы они были автоматически связаны со слайдером, нужно было положить их в том же контейнере, что и товары.
Обычно для каждого слайдера свои стрелки. Мне не хотелось делать 4 блока с стрелками, чтобы они накладывались друг на друга.
Карусель переключение
Как я поступил.
Я создал несвязанные ни с одним слайдером стрелки и в коде прописал, чтобы для видимого слайдера стрелка влево переключала на один слайд назад, стрелка право — на один вперед.
Смотрите. Где поместится список ссылок у блока«Контакты» при наведении?
Переполнение меню
Правильно. Уедет вправо и создаст полосу прокрутки сайта.
Для этого нужно было придумывать решение, ведь не будешь каждый раз помечать тот блок, который может заехать за сайт.
Решение: при загрузке сайта брать все подменю и проверить их отступ слева + ширину, если это число больше чем ширина сайта, то есть будет вылезать наружу, добавлять стили для отображения справа.
Код:
/* .nav__sublist — класс списка, который появляется при наведении */
// Jquery
$('.nav__sublist').each(function(i, item) {
var offset = $(item).offset().left +
$(item).outerWidth();
if ($(window).width() < offset) {
$(item).addClass('position-right');
}
});
В итоге на любом разрешении экрана при видимости меню подменю будут автоматически перемещены для предотвращения выпадания за границы сайта.
Сделал окно браузера уже
Калькуляция товаров в корзине
По техническому заданию нужно было реализовать калькуляцию товаров.
В таблице, при изменении количества или удаления товаров считается: общая сумма, сумма товара.
Так же был добавлен функционал, который показывает сообщение об ошибке, когда пользователь пытается заказать товаров больше, чем есть на складе.
Компания по предоставлению VPN-услуг искала разработчика, который сможет сделать свежий дизайн для текущего сайта и сверстать его.
Результат
Полностью переработал главную страницу сайта. Проработал структуру, которая закрывает боли клиентов, показали что умеет программа.
Улучшили удобство и дизайн личного кабинета, модальных окон, таблицы серверов.
Отзыв клиента
Очень понравилось сотрудничать с Даниилом Пстновым. Работа была сделана качественно, с индивидуальным подходом и самое главное — в срок. Чёткого технического задания не было, но Даниил понял задачу и предложил свои вариант, который нас устроил. Будем сотрудничать и дальше.
Личный кабинет разделён на информацию и реферельную программу. По умолчанию всегда открыта первая вкладка. На первой вккладвке пользователь может просмотреть информацию об аккаунте, пополнить счёт и активировать промокод.
Во второй вкладке расположились реферальная и партнерские программы. В реферальной программе время от рефералов и реферальная ссылка, можно скопировать её кликнув на иконку справа от ссылки.
Серверы
На странице«Серверы» пользователи могут просматривать нагрузку и статус серверов, а также сортировать их по параметрам.
Ко мне обратился директор компании Вебпрактик — Александр Букуров.
Задача
За 6 дней разработать лендинг по макету от дизайнера компании.
Был важен дедлайн, так как до карантина нужно было запустить в рекламу лендинг и обсудить вопросы с предпринимателями и сотрудниками образовательных учреждений. Это была не только коммерческая, но и государственная задача.
Результат
Сайт со всеми доработками утвержден и сдан клиенту 30 марта, за день до дедлайна.
Демонстрация работы сайта
Демо сайта
Отзыв
«Очень благодарен тебе за работу по созданию лендинга для проекта НТИ. Спасибо за вовлечённость, желание сделать качественно.
Это на самом деле не так часто на рынке фриланса, когда стараются сделать не только то, что тебе сказали по ТЗ, но и предлагают сделать что-то лучше, более качественно, более интересно.
Это очень важная твоя характеристика, развивай, масштабируй, это очень востребовано на рынке.
Конечно самое главное это сроки. Был сжатый срок под сложный проект с дедлайном под масштабные мероприятия. Нельзя было подвести заказчика. Большой объем работы в очень сжатые сроки. Ты не только уложился в срок, но и сделал на один день раньше. При этом потратил на это кроме будних дней и все свои выходные. Так что спасибо большое, это очень ценно.
Рекомендуют сотрудничество с тобой. Делаешь быстро, качественно, надежно.»
Разработать страницу каталога и детальную товара для онлайн-магазина. Кроме вёрстки необходимо запрограммировать калькуляцию в детальной и интерактивность в списке товаров.
За 6 дней была сверстана страница каталога с мобильной версией и интерактивностью: смена вида, фильтр по цене, цвету, дополнитлеьные вкладки.
Также была сверстана детальная страница, для которой кроме вёрстки был запрограммирован калькулятор для 5 видов расчёта стоимости в зависимости от параметров
При работе над проектом использовал новые методики оптимизации скорости, это позволило добиться высшей оценки от Google Page Speed как для мобильных, так и для компьютерной версии.
Скорость загрузки первой страницы: 1.5 секунды
Версия для компьютеровВерсия для мобильных
Сетка на странице«Девушки»
Сетка на странице«Девушки»
Высота фотографий может быть разная, если бы просто вставить фото девушек и ничего не дорабатывать, это выглядело бы вот так:
Поведение по умолчанию
Высота строки выставляется по самому высокому элементу. Я подумал, а что если разместить их по колонкам? Тогда строк не будет совсем и они будут вставать как полагается.
Да, этот вариант сработает, но структура списка сломается, программисты потратили бы гораздо больше времени на форматировании этого списка с данными из админ панели.
А я уважаю своих коллег и не делаю работу для них еще сложнее.
В итоге я нашел решение в виде библиотеки Masonry, теперь плитка выглядит как на макете и структура кода удобна для интеграции:
Разработать 3 страницы для проекта InRed по готовому дизайн-макету. Страницы должны также корректно отображаться на ноутбуках, планшетах и мобильных.
Это был первый проект в сотрудничестве с студией«Рекламный знак».
Разработка была закончена за 7 дней. Мы определили техническое задание, я задал уточняющие вопросы по всем непонятным для меня вопросам и мы начали разработку.
Интересно реализована прокрутка таблицы. Мы помещаем только несколько столбцов в видимую область, остальное скрываем и делаем блок прокручиваемым по горизонтали.
Кнопка с стрелкой выступает в роли намека, что можно прокручивать и в роли кнопки, после нажатии на нее блок прокручивает право.
Сайт сверстан и хорошо отображается на компьютерах, планшетах, мобильных, код не содержит ошибок, проведена оптимизация для более быстрой загрузки.
Интеграция в CMS
Для того, чтобы изменить на сайте текст или цвет фона блока -- не обязательно привлекать каждый раз программиста.
Можно интегрировать все в систему администрирования, заранее предусмотрев функционал для изменения сайта без программиста.
Интеграция была выполнена с CMS WordPress.
Создание функционала для интернет-магазина
Для создания интернет-магазина был выбран плагин Woocommerce. Сайт был в роли витрины: вы могли просмотреть товар, покупать товар нельзя.
Отзыв
Всем привет, хочу поделится своей историей работы с Даниилом. У нашей компании уже был сайт- страничка, но компания развивалась и требовалась его глубокая модернизация.
Решил поискать кто сможет взяться за эту работу. Обзвонил порядком 10 компаний и людей, ко всему прочему, нашему сайту требовался хороший дизайнер.
Бюджет был ограничен и так как средний ценник в компаниях выходил в 100 т. р поиски пришлось продолжить. Мы ведём в страничку в инстаграм soudal_russia поиски продолжились там, пару дней спустя я нахожу страничку Диниила и решаюсь на запрос, получаю данные, расценки, сроки и портфолио.
Все рассмотреть и оценив, принимаем решение начать работу. Диниил посоветовал дизайнера и как только дизайн сайта был готов, выполнил свою часть работы за 2 недели + дороботки по нашим пожеланиям заняли примерно неделю. Как итог наш сайт готов пена-герметики.рф. Хорошая работа, приемлемые цены, мы советуем.
Была задача: сделать на сайте как можно больше анимации. Я постарался сделать сайт более«живым» с помощью анимации, добавил ее при прокрутке, наведении на элементы, открытие мобильного меню.
Анимация статистики
Анимация меню
Модульность сайта
Не писать лишний код — важное умение. По хожу каждого проекта неопытные или ленивые разработчики любят писать множество кода для одинаковых элементов.
Я — ленивый разработчик. Когда я вижу 2 или более повторения какого-то элемента, я делаю этот элемент модульным.
Модульный — это элемент, который имеет одно описание стилей и может быть встроен в любую часть страницы без последствий.
Пример, карточки с описанием услуг:
На странице баньНа странице бассейновНа главной странице
Я не создавал 3 разных секции и для каждой писал свои стили. Я оформил их как одну группу и создавал стиль.
Если в коде что-то поменяется, поменяется сразу во всех блоках. Это кажется очевидным, правда? Но не все так делают.
Моя девушка — мастер маникюра, педикюра и депиляции. Она постоянно покупает какие-то новые инструменты, расходники для своих клиентов, с каждым днем их становится все больше 🙂
Иногда появляется необходимость считать себестоимость оказания одной услуги в каждом из трех направлений.
Каждый раз когда мы собирались делать это, мы брали листок, ручку и калькулятор, выписывали каждый материал на листок и считали в какой бутылке или пачке сколько всего, сколько используется и что в итоге получается.
Однажды программист во мне взял вверх и я решил немного автоматизировать это процесс.
В качестве практики я сделал для любимой мини-приложение для расчета себестоимости услуг, которым она конечно не пользуется.
Я тут понимаете ли стараюсь, а она до сих пор с листом и ручкой 🙂
Демо работы
Как пользоваться?
Нажмите на «+» для добавления нового материала
Введите название материала
Введите стоимость пачки/бутылки
Введите количество/объем в пачке/бутылке
Введите количество материала, которое тратится на на одного клиента
Если вы не введете стоимость, объем и количество на одного клиента, сумма не рассчитается.
Для удаления материала нажмите«x» Для того чтобы стереть данные из материала нажмите на «↻»
Справа показывается количество всех материалов, ниже количества показывается стоимость на одного клиента.
В срок адаптивно сверстано 7 страниц, настроены слайдеры, калькуляция, фильтры, аккордеоны. Вся вёрстка выполнена модульно, проект может масштабироваться с меншьшими затратами
Имея главную страницу сайта, стараясь не дублировать код создать еще 12 страниц сайта по макетам от дизайнера(ссылки внизу страницы).
Клиент обратился ко мне, так как его специалист был в отпуске, а проект нужно было быстро закрывать. Я откликнулся и мы закончили верстку проекта спустя 2 недели.
Проект был интересный, получил много опыта в решении каверзных задачек в разработке сайта. Много из них чисто технические, я прикреплю скриншоты
Было чем-то новым разрабатывать код для песен в плейлисте:
Списки песен в плейлисте.
Поле с продолжительностью песни можно нажимать и оно будет заполняться, сама линия идет градиентом, выглядит приятно.
Модульность
Множество компонентов в сайте нужно было сделать модульными, то есть чтобы они могли использоваться на многих страницах.
Например воспроизведение аудио:
Страница трекаСтраница публикации аудио Список аудио
Отдельные компоненты, которые есть на многих страницах были определены в отдельные файлы и подключались из одного места, чтобы в случае изменений, изменения происходили на многих страницах.
Как на мобильном?
Отлично 🙂 Сайт адаптирован под ноутбуки, планшеты, мобильные. Отлично смотрится и удобен в использовании.
Задача пришла от руководителя отдела разработки веб-студии«Рекламный знак».
Задача: в короткий срок разработать 29 страниц страниц сайта.
Для сравнения, нормальный срок на такой объем — месяц, а мне нужно было уложиться в 14 календарных дней.
Ко мне обратились как с специалисту, который успеет в срок, а работа не потеряет в качестве.
Оценка проекта
Я знал, что смогу выполнить эту работу в срок и эту уверенность я взял не с потолка.
На этапе оценки я просмотрел все 29 макетов, изучил закономерности и понял, что большая часть блоков имеет общие стили и по сути одинаковые. Нужно лишь создать готовые блоки и собирать сразу целые страницы, как из кирпичиков лего.
Вот некоторые из них:
ФильтрыШапка страницПлитка новостейУпоминания работников
Объем был не как 29 сайтов, он был в разы меньше, поэтому я взялся и уложился в срок.
