Автоматизация вёрстки

image

Это заметка о подходе к реализации автоматизации механизма psd to html.

Главная задача, которую должен решать механизм psd to html – это уменьшение времени на вёрстку, никак не влияя при этом на работу дизайнера (например, введение специального синтаксиса в названиях слоёв макета, как это сделано на psd2htmlconverter-е и т. д.).

Основной минус состоит в том, что при данной задаче невозможна 100%-ная автоматизация. Для вёрстки требуется человек, обладающий базовыми навыками HTML. Несмотря на невозможность 100%-ной автоматизации, оптимизация временных затрат все-таки возможна :). Делается это путём определения размеров и координат блоков в макете и, исходя из полученных данных, можно: сгенерировать сетку сайта, расставить текстовые и пр. блоки (не через position: absolute), определить ссылки, вырезать картинки.

Следующая задача состоит в том, чтобы работать с проектом в целом: выделять глобальные блоки сайта, например шапка, футер и т. д., получать HTML/CSS этих блоков и при работе с последующими макетами не возвращаться к ним, или, в случае необходимости, получать быстрый доступ к этим блокам (например, добавить ссылку в футер).

И третья из важных задач – сократить до минимума процесс написания кода руками, по возможности, полное отсутствие ручного написания кода.


Для начала, коротко о psd


Для понимания того, что можно автоматизировать, а что – нет, необходимо понимать какую информацию можно получить из PSD-файла.

PSD-файл содержит информацию о слоях: список слоёв и папок, вложенность каждого слоя и папки, эффекты слоя, тип слоя (обычный, текстовый и т. д.) и если это слой-изображение, то содержится само изображение.

Эффекты слоя, которые считываются из psd-файла, можно посмотреть с помощью меню Layer Style (см. на изображении ниже); для текстовых слоёв добавляется текст, который содержит слой, а для слоев с изображениями – ссылка на сохраненное в psd-файле изображение, привязанное к данному слою.

image

Схема


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

image

Глобальные настройки проекта – информация об основных шрифтах используемых на сайте, указание минимальной и максимальной ширины сайта, кодировка и пр. общая информация о сайте.

Также есть html-элементы, которые не так легко получить из psd-файла автоматически. Например, фоновое изображение сайта или таблицы. Основная сложность с фонами – это составные фоны, которые состоят из нескольких слоев в psd-макете, а с таблицами – то, что дизайнеры по-разному рисуют таблицы в макетах: это могут быть отдельные текстовые слои или один текстовый слой, в котором текст отбит пробелами или табуляциями и переносами. Для таких элементов необходимо создать модули, которые помогут определить эти элементы.

Интерфейс


Главная задача, которую решает интерфейс – визуализация процесса вёрстки. Сам процесс вёрстки можно разделить на 3 вида:

  1. Автоматическая. В момент загрузки макетов система автоматически преобразовывает psd в html насколько это возможно.
  2. Методом drag n drop. Перетягивая выбранные слои и папки psd-макета в область DOM-дерева, их можно преображать в html/css.
  3. Ручная вёрстка. Не всегда автоматизация и полуавтоматизация могут быть эффективны на 100%, потому нужна возможность добавить/отредактировать вручную элементы в DOM-дерева или поправить/дописать css.


image

Попытка решить эту задачу отображена на изображении выше.

Экран делится на 4 части: область отображения макета, область отображения слоёв макета, DOM-дерево документа и CSS-стили элемента.

Область отображения макета

Большая область в левой части экрана. В этой области отображается PSD-макет, слои которого преобразованы в пнг-изображения. При необходимости посмотреть на результат вёрстки, переключать отображение psd-макета, на сгенерированный результат.

Drag n drop: при перемещении слоя (или группы выбранных слоёв) в область DOM-дерева, создаются элементы в дом дереве и цсс стили, в основе которых, – эффекты выбранных слоев.

Mousehover: подсвечиваются слои макета, элементы в списке слоев psd-макета и теги, созданные в DOM-дереве при перемещении слов в область DOM-дерева.

В правой части экрана 3 ячейки для работы со слоями макета, DOM-деревом страницы и сгенерированными css стилями:

Область со списком слоев psd-макета

Левая из 2х колонок, в правой части экрана. Показывается список папок/слоев с отступами для отображения вложенности и возможностью скрыть/отобразить слой или папку (скрываются/отображаются слои в области отображения макетов).

Drag n drop: при перемещении слоя (или группы выбранных слоёв) в область DOM-дерева, создаются элементы в дом дереве и цсс стили, в основе которых, – эффекты выбранных слоев.

Mousehover: подсвечиваются слои в области psd-макета и теги созданные в DOM-дереве при перемещении слов в область DOM-дерева.
Список остается неизменным (сортировать или удалять элементы нельзя).

Область DOM-дерева

Правая из 2х колонок, в правой части экрана. Показывается список элементов DOM-дерева и вложенность.

Drag n drop: при перемещении слоя меняется вложенность и положение выбранного элемента в DOM-дереве.

Mousehover: подсвечиваются слои в области psd-макета и элементы в списке слоев psd-макета, в случае, если элемент был создан методом drag n drop из областей макета.

Onclick: показываются цсс-стили, которые назначены элементу.

Можно менять количество элементов в списке (удаляя имеющиеся или добавляя новые), менять положение и вложенность элементов.

Область CSS-стилей

Нижняя ячейка в правой нижней части экрана. Отображение и функционал а-ля firebug для ФФ, или панель разработчика для Google Chrome: добавление новых стилей или редактирование/удаление существующих.

Дополнительный функционал


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

Создание модулей для автоматического встраивания в код открытых js-скриптов, как галереи (lightbox, fancybox), слайдеры, табы и пр.
Поделиться публикацией
Ой, у вас баннер убежал!

Ну. И что?
Реклама
Комментарии 71
  • –33
    нужно ли автоматизировать то без чего можно жить?

    когда уже дизайнеры перестанут рисовать картинки и начнут делать полезную работу?

    возможно эти вопросы так и останутся без ответа
    • +5
      Не согласен. Без красивого, завлекающего и удобного дизайна нельзя.
      • +12
        Полезная работа дизайнера — это в том числе и рисовать картинки. Или их программисту рисовать?)
        • +9
          Полезную работу? Это заборы красить?
          • +7
            А чем Вам дизайнеры не угодили? Или просто так, чтобы придраться?
            Тогда можно придраться к вашему нику например или вообще к тому что нужно делать полезную работу а не писать на хабр коментарии.
            • 0
              А вот теперь представьте себе ситуацию, что все дизайнеры переключились на «более полезную работу» и все вещи, окружающие вас, стали чопорными, угловатыми, машины превратились бы в отвратительную безвкусицу, а если заглянуть в интернет, то там уж вообще ужас приключился бы. Все сайты будут похожи на одно и тоже, никаких новшеств, никаких украшательств. Так ведь и в депрессию недолго впасть. Пусть творят, вам-то что
            • +4
              Когда в следующий раз посмотрите на свой смартфон — задайте вопрос про бесполезность дизайнеров еще раз.
              • –26
                мой смотрфон не нарисованный а вполне себе реальный в отличие от psd'шек
                я его могу потрогать и, о ужас, им даже можно пользоваться
                расскажите как мне пользоваться картинками, кроме как в мусорку их выкинуть
                • +2
                  Вы не поверите, практически все, что можно увидеть на экране вашего смартфона однажды было psd'шками…
                  • НЛО прилетело и опубликовало эту надпись здесь
                    • +2
                      Вот вот! А после этого был куском пенопласта, потом куском дерева… а потом первым пластиковым прототипом только.
                      3 года занимаюсь дизайном мобильных приложений и обидно даже как-то, что люди не понимают роль дизайнера и проектировщика в этой и любой другой отрасли.

                      Кстати для сомневающихся в нужности профессии, придумал игру — просто прошу человека посмотреть вокруг и показать мне хоть один рукотворный предмет в комнате, к которому не приложил руку дизайнер хотя-бы на одном этапе разработки. Никто еще не выиграл, а терапевтический эффект поразителен! :-)
                      • +1
                        Зачастую сами дизайнеры не понимают своей роли. И смотришь на предмет и думаешь, что лучше бы дизайнер к нему руку не прикладывал :)
                        • 0
                          Будет вот так. (это мышка)
                          • +1
                            Я ни разу ни дизайнер, но красивее мышки делал.
                            • +1
                              Мне кажется, что красивее мышки у вас получались благодаря тому, что вы уже видели чужие дизайны.
                              • 0
                                Видел я примерно такие
                                image

                                А к чему-то похожему на современные бюджетные пришел просто методом проб и ошибок сначала на снежных и пластилиновых «моделях» со скидкой на доступные материалы (пенопласт прежде всего), а потом нескольких итерациях. Запомнилась как-то из одной советской юношеской книжки про туризм концепция моделирования удобных вещей — из пластичных веществ сформировать удобную форму, а потом повторить её из практически применимых. А что она красивой обтекаемой формы получилась — случайность.Ну или мое извращенное понимание красоты как квинтэссенции функциональности.

                                Собственно мои претензии ко многим дизайнерам, что они в погоне за красотой забывают про удобство и технологичность.
                      • –4
                        не был он никогда psd'шкой
                        хорошо если его нариисовали на бумаге
                        а для 3d моделирования есть спец софт, или вы все в фотошопе делаете?
                        • 0
                          А чего вы к psd прицепились?
                          Дизайнер свои идеи может и на бумаге излогать, и на доске, и в 3dsMax. Дизайн можна описать в текстовом документе и слепить с пластелина. Неважно как, в чем, и чем, суть одна — передать образ, который родился в голове.
                          Одним людям дано видеть эти образы, другим нет.

                          Мы все могли бы прожить без дизайна, но только нам бы пришлось испорожняться в кустах, есть руками и жить под открытым небом
                          • 0
                            В таких топиках нужно прежде всего договариваться о терминах. Я вот не понимаю почему без дизайнеров мы бы ели руками, не говоря об остальном. Дизайнер для меня тот, кто из удобной и практичной вещи делает ещё и красивую.
                            • –1
                              а что есть результат дизайна?
                              подсказка: готовый продукт (в данном случае работающий веб сайт)
                              для большинства же местных обитателей он и есть psd'шки
                              а взглянуть правде в глаза не хватает смелости
                              • 0
                                Моя точка зрения, что результат дизайна где-то посередине между макетом/эскизом и готовым продуктом. Это комплект документации необходимый и достаточный для производства сайта.
                                • 0
                                  Чтобы показать, как попап на самом деле должен появляться надо все-таки что-то сверстать и еще js заюзать
                                  А это, пускай и статичный, но уже готовый продукт
                                  Но проще в документации написать, что попап должен появляться 3.14здато
                                  • 0
                                    Да хоть бы так писали. А то зачастую из документации только названия слоев типа «Copy of ...»
                        • –4
                          расскажите ка мне поподробнее как сделать плавную анимацию в фотошопе?
                          или о чем мы тут тогда разговариваем?
                          может дизайнер не проектирует взаимодействие с пользователем? (анимация — это самое простое взаимодействие)
                          • +4
                            перестаньте молоть чушь!!!
                          • –2
                            вы же помните как создавался калькулятор для мака, тогда еще и фотошопа то не было
                          • 0
                            Посмотрите чуть глубже чем на внешнюю часть вашего смартфона (на графический интерфейс).

                            • 0
                              Гуглите промышленный дизайн.
                              Или вы считаете, что Ваш смартфон делается уборщиком, или еще кем?
                          • +6
                            Фу как некрасиво. Во-первых, назвали работу дизайнеров бесполезной. Во-вторых, назвали труд дизайнеров рисованием картинок. Позор, позор, позор.
                            • 0
                              Ох уж и не говорите…
                              Когда уже IT-шники перестанут лупиться в мониторыи начнут делать полезную работу?
                              Дрова то не рублены, уголь не копан, дома не построены, мамонты не доены…
                              • 0
                                Мало того, что не рубленые, так еще и глючат.
                              • +1
                                Мне кажется, или xxxYURAxxx просто зарабатывает меньше старшего помощника младшего дизайнера в своей компани?
                              • +2
                                имхо, пока не будет придуман некий стандарт для разработки дизайна(спец софт там и прочее), что вряд ли в силу не универсальности последнего, то говорить о какой-то автоматизации бесполезно.
                                • 0
                                  Вот я тоже часто на эту тему думаю. Но тут такое дело, что даже человек человека не всегда может понять. А когда заказывают дизайн и в ТЗ пишут ахинею типа белый сделайте поярче… Ну про какие программы можно тут говорить?
                                  • 0
                                    не совсем в тему, но сейчас прочел про «белый поярче» и улыбнулся :) мне именно такое как-то ляпнули. я попытался объяснить, что такое «белый», но потом мне показали несколько сайтов, где «белый ярче» и я очень удивился тому, что мой глаз воспринимал тот белый и мой белый действительно по-разному :) этот эффект достигался путем внедрения пары контрастных пятен и мелких деталей лимонного цвета. так что белый может быть ярче (по крайней мере, в понимании заказчика, который и не обязан знать всех этих тонких хитростей, а просто излагать то, что хочет на примере того, что видит) ;)
                                    • 0
                                      Вот. А теперь представьте, что это нужно объяснить программе :)
                                      • 0
                                        Так речь о верстке, а не о дизайне.
                                  • +1
                                    Я как разработчик, когда приходится делать какой-то простой дизайн, делаю его сразу в HTML + CSS, почему-то мне так удобнее и понятнее, вот и дизайнеров бы заставить слои с блоками делать сразу в HTML, а не в фотошопе, а рисовать только картинки.

                                    P.S. Хотя им, конечно, виднее как им работать:)
                                    • 0
                                      я с вами согласен. однако по факту — найти дизайнера который в psd уж как попало называя слои сделает красивый дизайн — уже непростая задача. найти такого который сверстать нормально может — вероятно очень очень дорого.
                                      • +2
                                        Мне кажется, если бы все дизайнеры сразу делали макет в HTML + CSS или просто сами верстали, то верстальщики бы исчезли как класс и работа дизайнера сильно бы подорожала. Ещё бы увеличилось время работы дизайнера, ибо в процессе дизайна часто приходится перетаскивать блоки местами и т.п. Представляете сколько действий нужно совершить в коде, что бы переместить какой-то блок или увеличить в сравнении с перетаскиванием и трансформацией в фотошопе?
                                        А так хорошего верстающего дизайнера и сейчас реально найти, просто это очень дорого :)
                                    • 0
                                      Иногда приходится долго думать над макетом как же его сверстать, а компы это смогут только лет через 10. Да и то, через 1 место это получится.
                                      • 0
                                        Вы это собираетесь как-то разрабатывать или это только концепция?
                                        • 0
                                          часть работы была сделана, а часть нет. если будет интересный вариант, возможно закончим :)
                                        • +2
                                          Увидев заголовок, сразу вспоминась статья о разработчике, который отдавал свою работу на аутсорс в индию(или китай ли).
                                          • 0
                                            тогда это было бы не ново :))
                                          • 0
                                            Помню, в одной компании в которой я работал, айфон-девелоперов называли «PSD to Objective-C»
                                            • 0
                                              А не проще ли использовать Fireworks для этого? там возможностей в плане отрисовки макетов поболе будет (одновременно можно и прототипизировать), и в плане автоматизации процесса верстки тоже проще.
                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                • 0
                                                  Вопервых проще работать с векторной графикой (а уж простите, она больше подходит для сайтов). Можно спокойно определять как и что будет экспортировано, оптимизирует размер PNG файлов и хорошо жмет JPEG (по лучше чем фотошоп), есть возможность добавлять какие-то действия по нажатию на элементы, в одном файле можно размещать все скрины… Словом, я не вижу причин, кроме как привычки, почему все пользуются именно фотошопом под WEB.
                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                    • 0
                                                      Все что необходимо для разработки дизайна сайта/WEB приложения в FW имеется. Да, что по другому, чуть сложнее, но более чем норм. Нету проблем со шрифтами, управляемое сглаживание, возможность прототипирования. Как по мне плюсов предостаточно. (я не фанат размалеванных сайтов где много ненужных отвлекающих картинок, но если клиент хочет — всю эту трибуху можно нарисовать и в PH, просто факт остается фактом. На сложных проектах, проектах WEB приложений, FW дает преимущество при проектировании интерфейса. А уже украшательства — это детали, которые опять же можно спокойно сделать и чуть позже.

                                                      Вы можете со мной не соглашаться, я не говорю что FW лучше фотошопа, просто как по мне у PH сфера применения должна быть другая. И складывается порой впечатление что люди просто привыкли и им даже не хочется подумать о том, как можно что-то улучшить, ускорить процесс взаимодействия программистов и дизайнеров и т.д.
                                                      • НЛО прилетело и опубликовало эту надпись здесь
                                                      • 0
                                                        Может только потому, что (веб-)дизайнеры «путем олигополического сговора» заставили заказчиков и работодателей ожидать от них только художественного решения, а не художественно-технического? Требования в ТЗ на разработку эскизного проекта интерфеса типа:
                                                        Технически структура макета должна облегчать дальнейшую с ним работу, должны широко использоваться такие возможности графического редактора как слои и блоки, по возможности с именами (на английском языке), отражающими не их вид, а их назначение в макете или интерфейсе (не left_blue_box, а menu_sidebar), желательно явно семантически коррелирующие с элементами языка разметки  HTML5 (header, footer, section, sidebar  и т. п.)
                                                        не говоря о
                                                        При разработке Макета должно быть уделено максимум внимания на простоту дальнейшей разработки Кода на его основе, должны максимально использоваться графические инструменты и эффекты, имеющие аналоги в языке стилей CSS, используемого в современных браузерах (включая ещё не стандартизированные Консорциумом Word Wide Web свойства, но реализованные в основных популярных браузерах в “префиксной” форме, такие как градиенты, границы с использованием скруглений и изображений, трансформации изображений, прозрачность, тени и т. п.), минимизируя необходимость при дальнейшей разработке использовать множество внешних (экспортируемых из Макета) изображений, особенно необходимость ссылаться на них из HTML-кода (тег IMG и т. п.) или вводить в него элементы (div, span и т. д.), служащие исключительно для визуального оформления. Растровые изображения, использование которых является необходимым для реализации художественного замысла разработчика, должны быть максимально подготовленны для масштабирования по вертикали и горизонтали.
                                                        .  если не заставляют их отказываться от работы, то «заставляют» увеличивать цену в цену в разы.
                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                          • 0
                                                            Аргументация второго для меня выглядит как аргументация архитектора (тоже по сути дизайнера): «я вам здание нарисую, но есть ли материалы из которых можно его построить и, тем более, сколько они стоят, меня не волнует. Ах, да, ещё я оставляю за собой право авторского надзора, чтобы вы не дай бог вместо стены в 99 мм шириной, не сделали 100 лишь потому, что стандартная панель в 10 раз дешевле сделанной по индивидуальному заказу».
                                                            • 0
                                                              Из-за 1 мм, бывает, дома падают и ракеты не взлетают.

                                                              Если бы все начали придерживаться похожих правил, годах эдак в 90-х, мы бы до сих пор видели бы только вот такие сайты. Ведь такие сайты стоят явно дешевле, чем «панели по индивидуальному заказу». А если никто тенюшек не рисует и градиентов не придумывает, то нафига нам вообще CSS, 3D-движки и тому подобное? Можно вообще было остаться на чёрно-зелёных компьютерах, управляемых через командную строку, ведь всё остальное придумывать и реализовывать дорого и лениво, лучше напишем правила для всех, что бы не вздумали использовать и придумывать то чего по умолчанию система не умеет.
                                                              • +1
                                                                Подразумевается, что архитектор нарисовал, а инженеры изменили не просто так, а провели прочностные расчеты и т. п.

                                                                Речь не о красоте, а о том, что дизайнеры часто не думают чего эта красота будет стоить. Абстрактная ситуация: человек придумал идею бизнеса в инете, узнал расценки на дизайн (условно 30к), верстку (10к), движок (10к), взял кредит 50к, заказал дизайн и движок. Всё сделали, осталось дизайн сверстать и на движок натянуть, а верстальщик глянул и говорит, что меньше чем за 50к он ТАКОЕ верстать не будет, скажем потому что дизайнер сделал все треугольными блоками, которые в HTML никак не поддерживаются. Всё, бизнес накрылся, 40к убытков.

                                                • +1
                                                  Не хочу вас обидеть, но кому это нужно? Сложный макет верстается за один рабочий день, если не быстрее. На производные от него макеты уходит в 3-5 раз меньше времени. При этом я целиком и полностью контролирую процесс, стараясь на ранних этапах предупреждать проблемы кроссбраузерности и т.п. Разве это можно будет автоматизировать? Я вижу только возможность автоматизации разметки лейаута, но это не та задача, которую следует решать таким тернистым путем. Она вручную решается за 15 минут. Поправьте, если я не понял вашу идею.
                                                  • 0
                                                    Сложный макет за 1 день? Ну примеры, что у вас в портфолио — может быть, если поднапрячься. Но если надо мало-мальски сделать через эффекты через CSS, адаптивную вёрстку, там, замысловатый лэйаут, типографический или интерфейсный тулкит — u’re fuckd. Там порой и неделей не отделаешься.
                                                  • 0
                                                    завтра может в скайп позвоню тоже есть идеи но не все так прекрасно. Мы все равно упираемся в какой то шаблонизатор.
                                                    • 0
                                                      лучше пишите, так как интернет у меня не быстрый :(
                                                    • 0
                                                      Рискну вбросить мысль о том, что фотошоп как инструмент для создания сайтов не нужен в 99% случаев. Нужен инструмент, который позволит дизайнеру по завершению работы сделать экспорт в HTML/CSS (разумеется не так погано как это делает Fireworks, к примеру). Таким образом верстальщики (преобразователи дизайна в код разметки) станут не нужны, что в общем-то логично ибо в 21-м веке пора уже роботизировать рутину, а востребованы станут фронт-эндщики, прикуручивающие всякие анимации.
                                                      • 0
                                                        Для начала нужен инструмент, который дизайн сможет однозначно описать в художественно-технических терминах. Сейчас такого нет вроде как.
                                                      • 0
                                                        У нас в фирме обсуждалась идея создания подобного софта. Идея базировалась на выделении из псд-файла блоков методом выделения области и применения к этой области определённого набора заранее известных скриптов/кусков кода (чем-то для некоторых, может напоминать редактор музыки или видео). После чего все эти блоки компилируются в один макет. Даже думали на кикстартер выложить, в идеале — было бы очень полезным инструментам для людей, которые ничего не понимают в создании сайтов, или не имеют времени/средств для его создания, особенно со своим (дизайнерским) дизайном, простите уж за туфтологию.
                                                        Столкнулись вот с какой трудностью: нужно создавать второй инструмент, который будет проверять вёрстку на кросс-браузерность, т.е. Аналог IE-tester, но для Всех браузеров. Что является второй неплохой идеей… если, конечно, уже таких совтин нету.
                                                        • 0
                                                          Не обязательно писать проверочный софт. Основные непонятки при отображении обрабатываются на этапе разработки. К примеру, для того, чтоб задать прозрачность для блоков включая более ранние версии браузеров надо написать такие стили:
                                                          .block {
                                                          filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
                                                          -moz-opacity: 0.7;
                                                          -khtml-opacity: 0.7;
                                                          opacity: 0.7;
                                                          }
                                                          и т. д.
                                                          Скорее всего, изначально все подобные ситуации не охватить, придется дописывать по мере поступления багов.
                                                          • 0
                                                            Согласен, что надо будет делать каскады релизов, но даже «голый» вариант смотрелся бы неплохо. Кросс-браузерность вообще думали или отдельно-работающей прогой делать, или как свободную от основного ядра плагину… но как-то всё встало на стадии обсуждения.
                                                            • 0
                                                              В нашем случае всё зашло чуть дальше. Написали парсер псд, примитивную генерацию хтмл и примитивный интерфейс :)
                                                              • 0
                                                                Будем надеяться, что изыскания продолжаться и когда-нибудь пользователям будет доступен подобный сервис.
                                                      • –1
                                                        Это похоже на запись из блога проекта.

                                                        Хотите создать HTML верстку сайта абсолютно бесплатно?

                                                        Разместите пост содержащий партнерскую ссылку на своем web ресурсе, в блоге, в социальной сети (вконтакте, фейсбуке, твиттере, ...), на форуме и т.п.

                                                        Мы подарим 2 HTML/CSS верстки за каждую запись..


                                                        (1 конвертация стоит 99 руб.)

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

                                                        Самое читаемое