x
 
Александр Сушко
1 июня 2017
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Вопрос Василию Половнёву.

Здравствуйте. В одном из советов про редизайн Михаил вскользь упомянул, что раскладка работает без админки. А на чём всё держится? Как устроен сайт бюро изнутри, расскажите, пожалуйста.


Раскладка — это схема расположения проектов в портфолио бюро. Раскладка состоит из этажей — шаблонов, отображающих проекты в соответствии с их значимостью. Шаблоны подбираются по количеству проектов и особым правилам: например, мы чередуем ритм, чтобы на соседних этажах не оказывались работы в одной сетке, чтобы не образовывались «псевдомодули».

Михаил Нозик о создании сайта бюро и раскладке работ

Раскладка

Страница

Раскладка создается автоматически в четыре этапа:

  1. Собираем информацию о проектах: название, описание, продукт, рубрики, дату и превьюшки.
  2. Группируем проекты по продуктам-клиентам: редстандарты Актиона, Т2, Мэри Трюфель.
  3. Группируем продукты, в которых по одному проекту.
  4. Собираем раскладку этаж за этажом, примеряя и оценивая каждый из шаблонов к текущему продукту.

Мы решили информацию, нужную для раскладки проектов на страницах рубрик, хранить не в БД, а прямо в коде страниц отдельных проектов. Так мы ускоряем разработку, не создаём лишних интерфейсов и держим связанную информацию в одном месте:

// projects/action-pishet-articles/index.pug
+webpage({
  // Рубрики, в которых показываем проект
  categories: 'Продукты и услуги; Логотипы и фирстили; Книги и СМИ;',

  // Описание проекта
  description: '<span>Актион-МЦФЭР пишет</span> — программа
    редакционных стандартов издательства,
    призванная помочь повысить качество текста
    и упростить обучение новых авторов',

  // Продукт, к которому относится проект
  product: 'Редстандарты Актиона'
})
  // Название проекта
  h1 Плакаты о структуре статьи

  .thumb-meta(style="display: none;")
    // Какие картинки использовать в раскладке, когда
    // проект занимает всю ширину, 7/8 и половину этажа
    +thumbnail({fitsTo: '1', fitToProportion: '880:639'})
      +image({ src: 'action-pishet-articles_880x639.png' })

    +thumbnail({fitsTo: '7:8', fitToProportion: '767:639'})
      +image({ src: 'action-pishet-articles_767x639.png' })

    +thumbnail({fitsTo: '1:2', fitToProportion: '430:432'})
      +image({ src: 'action-pishet-articles_430x432.png' })

    // Дата выхода проекта: по ней сортируем проекты внутри продукта
    date 11.04.2017
В старых проектах, не использующих новый движок, мы используем тот же формат, но данные храним в отдельном файле meta.pug

Данные извлекаем после компиляции Джейд (Паг) шаблонов в ХТМЛ:

<div class="webpage project js__webpage"
  categories="Продукты и услуги; Логотипы и фирстили; Книги и СМИ;"
  description="<span>Актион‑МЦФЭР пишет</span> — программа
    редакционных стандартов издательства,
    призванная помочь повысить качество текста
    и упростить обучение новых авторов"
  product="Редстандарты Актиона">
ХТМЛ парсим с помощью cheerio

Естественно, есть возможности для тонкой настройки:

+webpage({
  // importance управляет порядком проектов внутри продукта.
  // Значение по умолчанию — 1. Проект с importance 100
  // встанет на самый верх этажа, невзирая на дату
  importance: 100,
  
  // Модификатор noindex скрывает проект из портфолио
  // до его публикации
  mod: 'noindex'
})

В следующем совете расскажу об архитектуре нового сайта бюро: как устроен внутри, как взаимодействует со старым сайтом, на чём работает.

P. S. Это был совет о веб-разработке. Хотите знать всё о коде, тестах, фронтенд-разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор весной. Оставьте почту, и мы напишем вам, когда откроется следующий набор.
 

Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Как устроена беспарольная аутентификация почтой 7 Как вы проверяете соответствие вёрстки макету 2




Недавно всплыло

Как вы верифицируете оценку сроков от сотрудника? 1 Как избежать «эффекта Тильды»? 2 3 3