Внимание! Данная запись отмечена как устаревшая и/или потерявшая актуальность! Возможно автор уже передумал и теперь придерживается другой точки зрения, нежели изложенная в тексте ниже.

Концепция: быстрое создание сайта

Дневник / Вёрстка сайтов: CSS, HTML, LESSПросмотров: 9678 (161)

Идея о быстром создании сайтов давно уже витает в воздухе, правда, пока без практической реализации. Есть некоторые подвижки по отдельным направлениям, но если смотреть в целом, то вебмастера до сих пор работают как в «каменном веке».

Моя концепция предполагает вёрстку функциональными блоками. Частично это уже реализовано в MaxSite CMS в виде компонентов шапки и подвала, когда уже готовые компоненты выстраиваются в произвольном порядке, имеют свои стили, опции и js-код (при необходимости).

Рассмотрим отличия моей концепции от традиционых подходов.

Традиционная старая вёрстка

Заказчик предоставляет графический макет, верстальщик располагает все блоки в HTML (часто смешивая с php-вставками) и оформляет в CSS. Если нужно будет поменять какой-то блок, то придется переверстывать общий HTML и переопределять общие CSS-стили.

Трудозатраты очень высоки - по сути приходится каждый раз писать ручками весь код.

Традиционная с использованием фреймворков

Принципиально отличается от предудущего варианта тем, что верстальщик использует какие-то предопределенные css-заготовки. Сейчас распространено использование css и html-фреймворов, что на порядок упрощает и ускоряет верстку. Проблема здесь в том, что сторонние фреймворки не учитывают особенностей CMS и верстальщик вынужден каждый раз вручную прописывать стили элементов, на которые он не может (или сложно) повлиять. Ну и плюс, опять же, при смене функционального блока страницы, придётся переверстывать общие HTML и CSS.

Традиционая из своих templates

К этому варианту подходят все вебмастера, которые делают сайты «на потоке». Очень сложно следовать чужим фреймворкам и скриптам, поэтому вебмастер постепенно нарабатывает некий каркас из готовых для использования файлов. Пример такого каркаса есть в MaxSite CMS: каталог _create_a_new_template default-шаблона. Всё, что нужно сделать - это скопировать каркас как новый шаблон. В нем уже реализованы подключения стилей, компонентов, опций, вспомогательных функций и т.п.

После этого копируются свои css-файлы, картинки, компоненты и т.п.

Современная на основе компонентов и css-фреймворке

Это то, что сейчас реализовано в MaxSite CMS. Базовый «каркас» наполняется за счет отдельных компонентов. Физически компоненты - отдельные файлы, со своими стилями, опциями и js-скриптами. То есть вебмастер, после того, как описал структуру сайта, занимается только вёрсткой отдельно взятых компонентов, которые не влияют (как правило) друг на друга. CSS-фреймворк в MaxSite CMS - это style-all.css из default-шаблона. В нем прописаны стили, которые практически 100% встречаются в каждом шаблоне (стили плагинов, вывода системы и т.п.).

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

Современная: быстрое создание сайта

Как и в предыдущем варианте, верстка сайта осуществляется некими аналогами компонентов - функциональными блоками. Эта верстка совпадает с прототипированием сайта, когда на макете отмечаются прямоугольники с заданным функционалом: тут меню, тут баннер, тут второе меню, тут лого и т.д. Вебмастер должен лишь задать модульную сетку сайта (расположение основных контейнеров), а все остальные блоки программируются/верстаются в виде отдельных файлов.

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

  • подключать блок в произвольном месте шаблона и
  • менять параметры блока под разные сайты.

Поскольку это лишь концепция, неоформившаяся до конца идея, то рассмотрим как на текущий момент как она практически реализуется в MaxSite CMS. (В других CMS реализация будет отличаться, хотя идею можно попрбовать перенести.)

Прототипирование

Классическое прототипирование выполняют перед созданием дизайна. В нашем же случае прототипирование выполняется уже после (возможно слово прототипирование не совсем удачное). Прямо по дизайну рисуются прямоугольники, которые и будут в будущем функциональными блоками. Единственное на что стоит особо обратить внимание - все блоки должны иметь свой контейнер. Это может быть и wrap-блок, и контейнер для float-блока. Лучше всего считать, что блок - это row на всю ширину родительского контейнера.

Пример прототипирования в Pencil

Файлы блоков

Такие блоки лучше всего хранить в каталоге stock шаблона - каждый блок в отдельном подкаталоге. Такая структура позволяет содержать и файлы стилей, и файлы скриптов, и основной php-файл в одном месте. Иногда блоки содержат изображения. В этом случае я делаю каталог images с «дефолтными» файлами, которые копируются в основной шаблонный images. Так проще и удобней.

Подключение блоков

Сам блок подключается как обычный php-файл с помощью require(). JS-стили подключаются в этом же php-файле. А вот, что касается css-стилей, то тут большая проблема: они должны подключаться в HEAD.

Есть три варианта решения проблемы.

Первый - подключение стилей в custom/head.php. Можно так

mso_add_file('stock/myscript/myscript.css');
JS-стили, кстати, можно подключать таким же способом.

Минус этого способа в том, что файл стилей располагается в каталоге блока, а не общем css. Отсюда следует второй вариант - скопировать css-файл «заготовки» блока в общий css-каталог и подключать уже из него. Этот вариант гораздо удобней.

Третий - призвать на помощь LESS. Блок содержит два less-файла. Первый - неизменяемые стили компонента, второй - изменяемые. В общем var_style.less шаблона через @import подключаем неизменяемые стили прямо из каталога компонента, а второй файл из css, предварительно скопировав. Вариант самый удобный, посколько нет нагромождения лишних стилей блока и все нужные файлы одном месте. Плюс не нужно думать о подключении в HEAD - стили блока попадут в общий var_style.css.

@import url('../stock/myblock/base.less');
@import url('myblock.less');

Если стилей мало, то можно ограничиться копированием less-файла в основной var_style.less.

Принудительное под(от)ключение компонентов

Если шаблон предусматривает фиксированное расположение компонентов шапки и подвала, то можно подключить их в custom/header_components.php и custom/footer_components.php. Например:

require(getinfo('template_dir') . 'components/logo-links.php');
require(getinfo('template_dir') . 'components/menu.php');
require(getinfo('template_dir') . 'components/image-slider.php');

При таком коде, независимо от выбора в админ-панели, будут подключены строго указанные компоненты.

Свой контент

Если нужно менять вывод контента, то скорее всего вы неверно делаете шаблон. Но, даже если это так, то делается это с помощью файлов

  • custom/main-out.php
  • custom/main-out-start.php
  • custom/main-out-end.php

Последние два файла можно использовать, если функциональный блок должен выводиться до или после контента.

Сайдбары

Для вывода сайдбара (или в колонке сайдбара) используйте файл custom/sidebars.php.

Прочие custom-файлы

Правильно сделаный шаблон предполагает, что все необходимые изменения по подключению блоков сделаны в custom-файлах.



Правильное видение концепции быстрого создания сайтов

Правильно - это видеть на сайте функциональные блоки. Блоки - самостоятельны и ими можно тусовать сайт как конструктор Лего. Если нужнен слайдер, берем блок слайдера и размещаем ровно там, где это нужно: подключаем в custom, оформляем стили в less-файле. Нужен другой блок, отключаем этот, подключаем другой.

Этот процесс напоминает визуальное построение сайта. Правда в отличие от существующих редакторов, процесс подразумевает первоначальное определение блоков, их положение и уже после - оформление под дизайн сайта.

Данный процесс наверняка можно автоматизировать. Впрочем, об этом в другой раз. smile

Оставьте комментарий!

Комментарий будет опубликован после проверки. Вы соглашаетесь с правилами сайта.

(обязательно)

РЕКЛАМА
Заказать разработку веб сайта | Концепция быстрого создания интернет-магазина предполагает шаблонный дизайн. |

О сайте

Здесь вы получите самую полную информацию о создании сайтов на MaxSite CMS.

Рейтинг@Mail.ru