Перенос макета сайта в HTML

CSS, HTML, LESS, SASS

Расскажу про одну методику, которая позволяет достаточно быстро перевести макет страницы в HTML-код прототипа.

Например у нас есть лендинг. Как правило на первом этапе происходит сбор информации, а потом рисуется графический прототип. Это может быть обычный Ворд, или гугл-документы, но часто это сервис wireframe.cc. Мне он очень нравится, поскольку не содержит ничего лишнего и прост для работы. Ну и бесплатный, что тоже важно.

Иногда работу в wireframe.cc выполняет сам копирайтер. Там он не только пишет тексты, но и размечает блоки, которые по его мнению можно скомбинировать определённым образом. Когда всё готово, этот макет получает html-верстальщик, который должен перенести тексты (это простое копирование) и разверстать блоки, только уже в HTML-код.

Здесь есть очень важный момент — первая версия вёрстки должна повторять макет wireframe.cc (это может быть любой другой сервис — я привожу его только как пример). То есть не нужно верстать в цвете, задавать все изображения, настраивать отступы: нет — это будет тоже черновой вариант, но только выполненный в html-коде.

Читать дальше →

Релиз шаблона MF 10 (декабрь 2020)

Шаблон MF

C 20 декабря можно будет получить обновление шаблона MF. Версия содержит достаточно много изменений, поэтому лучше ставить отдельно. В основном изменения касаются «подчистки хвостов», но есть и ряд существенных изменений.

Первое, что стоит отметить — документация mfdoc исключена из комплекта шаблона. Вместо неё я сделал отдельный сайт, где разместил не только документацию и скриншоты, но и пошаговое руководство. Многие пользователи MF не программисты и мне хотелось рассказать о работе с шаблоном в простой форме (и с картинками).

Второй момент касается общей тенденции развития MF. Это постепенный отказ от jQuery в пользу Alpine.js. Я не хочу делать резких изменений, да и в будущее не заглянешь, поэтому переход будет плавным. Зачем это нужно? jQuery — «Ахиллесова пята» многих сайтов, которая не позволяет получить 100 баллов с точки зрения гугла. Мы не можем отказаться от jQuery, поскольку на неё завязано много кода, взять те же плагины. Мы вынуждены загружать jQuery в HEAD-секции, иначе это приведёт к проблемам на сайтах, но именно это и тормозит загрузку страницы и понижает её рейтинг.

Alpine в этом плане намного лучше, поскольку позволяет загружаться в любой части страницы, либо в асинхронном режиме. Задача сложная и к тому же решается на уровне MaxSite CMS, но в MF можно ослабить зависимость от jQuery, чтобы потом изменения в MaxSite CMS не затронули этот шаблон.

Читать дальше →

Новости по моим проектам

Дневник

Расскажу о том, что произошло нового в моих проектах. О некоторых я уже рассказывал в телеграмм-канале (подписывайтесь!).

Начну с Berry CSS. Было небольшое изменения в дизайне документации, но самое интересное — это новая страница для подбора цветовых сочетаний. Саму идею я заимствовал с сайта 2colors.colorion.co, только используются классы Berry.

Читать дальше →

Что такое API. Объяснение с примерами

Alpine.js, PHP

По идее про «API» должны знать все разработчики. Переводится как программный интерфейс приложения, но поскольку для нас наибольший интерес представляет Интернет, то речь пойдёт о Web API. Под ним обычно понимают некие http-запросы между клиентом и сервером. То есть всегда есть тот, кто отправляет запрос и есть тот, кто его обрабатывает и возвращает результат.

Простой пример. Вася — верстальщик, который делает сайт и знает только HTML и JavaScript. На сайте есть страница, которая выводит список пользователей. Чтобы его отобразить, нужно вначале откуда-то получить данные.

Петя, наоборот, ничего не знает о JS и верстке, но неплохо разбирается в PHP и базах данных. То есть Петя делает так, чтобы можно было сформировать данные о юзерах, а Вася сможет их получить через простой Ajax-запрос к серверу. Петя даёт Васе URL-адрес такого запроса, http-метод и список возможных параметров. Вася указывает их в fetch()или XMLHttpRequest()и получает готовые JSON-данные, которые прекрасно работают с его js-скриптами.

Вот этот механизм, когда программа предоставляет интерфейс для управления и называется API.

Читать дальше →

Albireo Doc и другие новости

Дневник

Расскажу об изменениях в проекте Albireo. (Вы также можете подписаться на мой телеграмм-канал, чтобы получать новости оперативно.) За последнее время, в Albireo было два важных изменения. Первое — доработка админ-панели. Я добавил кнопки для вставки кода в текстовый редактор (сделал на Alpine.js), а также ряд мелких правок, чтобы сделать панель более удобной.

Другое крупное изменение — работа кэша. Раньше он работал только по времени модификации файлов, но не учитывал изменения в структуре каталогов. Это могло приводить к тому, что кэш оказывался невалидным, если загрузить старые файлы или добавить/удалить каталоги. Это частая ситуация. Теперь кэш работает чуть по другому. Он создаёт «снимок» (snapshot) всего каталога, включая каждый файл и его дату модификации и получает числовой полином CRC32. Он сохраняется в отдельном файле. При повтором использовании, кэш сравнивает новое значение со старым и если были изменения, кэш считается невалидным.

Это позволяет отслеживать самые разные ситуации и изменения в каталоге данных. Я об этом рассказывал в телеграмм-канале и даже приводил цифры по нагрузочному тестированию.

Сегодня я выложил ещё одно дополнение, которое условно называется Albireo Doc — это готовое решение для тех разработчиков, которым нужен простой и удобный механизм для создания документации к своим проектам.

Читать дальше →

Перейти к странице: