Сайт-конструктор для Кефира
И админская часть:
Ну что тут сказать - жесть. Указанный выше Sir Trevor JS курит в сторонке. Из макетов видно:
- Полностью свободное позиционирование элементов на странице.
- Множество типов данных: текст, картинки, видео, карты, слайдеры, формы
- Возможности инлайн-редактирования для все этих данных.
- Редактировать будут не программисты.
Поиск аналогов ни к чему не привел. Есть модуль для друпала, который делает что-то похожее, но как бы такое сдавать стыдно гейм-студии. Битрикс? Не, эту громадину допиливать до таких кастомных инструментов себе дороже, да и в нем нет ничего, что могло бы пригодиться.
Главная проблема при создании такого сайта это конечно клиентский JS. Его казалось бы нужно много: тут и формы разных типов и лайв перестроение блоков при редактировании. Однако подход был простой: минимум работы на клиенте - построение всего HTML на сервере. JS отвечает только за окошки (https://github.com/dimsemenov/Magnific-Popup/), ресайз, драг блоков (http://jqueryui.com/).
В момент показа страницы сайта, мы рендерим весь HTML на сервере как для обычного сайта. При редактировании, мы загружаем тот же HTML и инициализируем JS инструменты. При каждом изменении на странице на сервер уходит AJAX запрос на сохранение данных, а на клиент возвращается полный HTML новой отрендеренной на сервере страницы.
С виду все просто, однако есть несколько моментов:
1. Должно работать быстро. Постоянные перестроения всего HTML - это дорого для сервера, поэтому код PHP части максимально быстрый. Это не наш любимый ZendFramework, он бы тут затормозил весь интерфейс. Это новая библиотека, которая специально была написана для создания тяжелых сайтов. Время генерации типового раздела 30-50мс.
2. В основе должна лежать мощная библиотека для генерации разделов для редактирования. Форм много, контролов разных много. Поэтому тут на редактирования задействована наша обычная админка:
Когда мы хотим изменить текст блока - во всплывающем окне появляется ее кусочек и создает нужную форму, решает проблему обработки данных.
Клиентская часть строится с помощью CSS и нестандартной колоночной сетки. Ширина колонки выбрана исходя из дизайна: 20px, то есть это 48 колонок. По высоте также есть стили для 20px рядов. В общем-то все позиционирование осуществляется с помощью CSS, без использования стилей. при выключенном режиме редактирования в HTML нет мусора style=""
В принципе, если к этому движку сделать кучу стилей оформления (скинов), то можно быстро создавать разные сайты, просто таская блоки. Из коробки есть все нужное:
- Ленты. На базе которых можно делать такие разделы как новости, статьи, вакансии, списки разных документов. Кроме того, у каждой ленты может быть виджет, позволяющий транслировать ее содержимое в любом разделе. Например, показать 2 новости на главной с переходом в основной раздел.
- Формы. Можно создавать любые формы и опросы: выбор типов контролов. Все результаты отправки форм видны в админке и приходят на почту.
- Карты. Можно делать карту Google или Яндекс и размещать на ней маркеры с информационными попапами.
- Фото - вставка произвольной картинки в любое место страницы, картинки со ссылкой.
- Видео - размещение ролика в Youtube.
- Слайдер, пример на главной kefirgames.ru. Можно загружать свои слайды и задавать его размеры.
- Комментарии Вконтакте. Ну просто как бонус.
- Группировка слоев. К примеру, можно сделать блок "шапка сайта" и таскать его по странице с вложенными блоками. Полезно для организации блоков.
- Шаблоны блоков. Когда чуть поиграешься с таким конструктором - становится понятно, что делать сайт даже так, визуально - это тяжело. Есть переиспользуемые области, которые нужны на всех страницах. Для этого введено понятие именованных шаблонов. То есть мы можем создать десяток важных заготовок блоков и использовать их на любых страницах. Например, шапка, подвал, правая колонка. Плюс это дополняется возможностью сбросить настройки блока-шаблона на любой странице.
- Мультиязычность. Текст в блоках можно задавать на разных языках, при отсутствии перевода показывается русских.
В общем, получился больше чем сайт - инструмент для его создания. Для желающих поиграться мы сделали песочницу на этом движке:
Там вайп каждые 5 минут, но подвигать блоки можно.
Вообще, мы делаем много интересных штук, постараюсь находить время и писать про них. Это и сайт на NodeJS, без обращений к диску и БД в процессе работы. прям в памяти. Сервис сжатия CSS/JS и компиляции SASS/COMPASS для сайтов, которые не могут этого делать на слабых хостингах. Фасетный фильтр для интернет-магазина, работающий через memcached. Сайты на нескольких серверах, балансировка статики, БД, PHP. Если вы программист и решать нестандартные задачи - приходите к нам работать, вакансии всегда есть: http://magwai.ru/vacancy