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'
})


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

Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор закрыт. Оставьте почту, и мы напишем вам, когда откроется следующий набор.
 

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

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

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

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

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

Автотесты «на пальцах» Как следить за качеством кода? Часть вторая: метрики Что такое СВГ и как его использовать в ХТМЛ-вёрстке? 1 Джанго или Рельсы?




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

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