PhPh-Pack - это совокупность разработок нашей студии для CMS NetCat, выполненных в едином стандарте. PhPh-стандарте. Пак позволяет разрабатывать на себе все более и более технологичные и навороченные сайты.
Содержание: (спрятать)
Цели, архитектура и состав
Мы довольно долго разрабатывали сайты на NetCat, в результате чего создали несколько оригинальных Рецептов, решающих разнообразные популярные задачи сайтостроения. В какой-то момент мы неожиданно осознали, что весь наш опыт разработки может быть обобщен, описан и стандартизирован. Может - и должен, ведь формулировка общих принципов позволяет делегировать частные задачи, а значит освобождать ресурсы для новых достижений.
Цели
- установить стандарт адаптивной верстки и frontend-программирования на базе мощного современного CSS-фреймворка и других бесплатных разработок взамен устаревшего решения в дефолтной поставке NetCat
- как следствие - обеспечить совместимость всех наших решений друг с другом (визуальную и в верстке)
- установить стандарт физического размещения файлов и, следовательно:
- упростить применение всего комплекса наработок в новых сайтах
- упростить обновление функционала существующих сайтов
- обеспечить прозрачную интеграцию отдельных решений
- создать платформу для разработки новых совместимых решений
- установить стандарт репликации решений:
- можно легко поделиться своим кодом со всем миром: все решения имеют демонстрационный режим, все бесплатные - позволяют получить их исходный код прямо с демостраницы
- можно писать технические задания на сайты ссылаясь на существующие решения
- установить стандарт легкого и удобного документирования разработок. Документация интегрирована с описанием решений как в деморежиме, так и в админке
- как следствие - упрощение поддержки существующих сайтов
- разработать платформу для быстрого прототипирования сайтов
Архитектура
Для решения задачи создан специальный сайт templates.finar.ru (в разработке). Все базовые разработки производятся первоначально на нем в соответствии со стандартом, а затем переносятся на целевой клиентский сайт. Для каждого решения или шаблона создается демонстрационная страница, на которой можно увидеть его в действии и, если он распространяется бесплатно, скачать исходный код и внедрить на свой сайт по инструкции.
По мере расширения функционала наших разработок, все ключевые изменения вносятся на сайт templates.finar.ru. Таким образом вся мировая общественность получает доступ к актуальным версиям наших разработок, забирая текущий "живой" код прямо с демостраницы.
Состав
- Адаптивный шаблон дизайна на базе CSS-фрейморка Bootstrap , интегрированный в архитектуру NetCat. Предназначен для быстрого прототипирования сайтов. Единая верстка для всех версий сайта (мобильная, планшетная, основная)
- Демонстрационные компоненты для разных представлений информации с использованием возможностей Bootstrap (запрограммированные элементы верстки)
- Шаблоны NetCat. Готовые дизайны сайтов, совместимые с компонентами | не готово
- Рецепты NetCat. Готовые компоненты, концепции и модули, совместимые с шаблонами | частично готово (см. список стандартизированных рецептов)
- Файловый архив: | не готово
- полный набор оригинальных скриптов PhPh-Pack
- полных набор сторонних свободных разработок, используемых в PhPh-Pack
- отдельные архивы для каждого решения
Описание стандарта разработки
см. Верстка сайтов: Bootstrap, NetCat и Less
Компоненты NetCat на сайте templates.finar.ru
В группе !PhPh-Pack находятся компоненты, совместимые с !PhPh-Pack. Они гарантированно будут совместимы по верстке с макетами дизайна и другими разработками.
Правила и инструкции
см. Верстка сайтов: Bootstrap, NetCat и Less
Разработка компонентов и рецептов
- при разработке рецепта на сайте templates.finar.ru для него создается отдельный демораздел с говорящим Ключевым Словом:
- раздел должен живо представлять возможности рецепта, пути его применения, краткое описание архитектуры (предпочтительно писать в Описании Компонента)
- раздел должен описывать способ интеграции рецепта на свой сайт
- в случае, если рецепт бесплатен, должны быть обеспечены условия получения его живого исходного кода (того, из которого он выполняется)
- эталонный пример оформления рецепта со всеми плюшками: http://templates.finar.ru/netcat-components/content-export-tools/
- рецепт должен быть сверстан на Бутстрапе по возможности без изменения CSS
- компоненты рецепта должны быть расположены в группе !PhPh-Pack
- код рецепта:
- css-код, если необходим, вносится в файл phph-components.css, окружается комментариями с указанием Ключевого Слова Рецепта
- js-код вносится в файл phph-application.js, окружается комментариями с указанием Ключевого Слова Рецепта
- php-код пока не решено, где будет размещаться.
Список стандартизированных рецептов (не автоматизирован):
Еще вопросы? Задавайте, буду отвечать.
Смотри, начать нужно с того, что скачать полный пак Бутстрапа. Дальше берешь примеры из него (те, которые по адресу /bootstrap/examples.html) и смотришь, как они сделаны. Берешь самый простой пример и делаешь из него ту сетку, которая тебе нужна, используя классы row*, span*, offset*. При этом сам файл bootstrap.css ты не правишь, делаешь все это в html. Потом, когда сделаешь сетку, создаешь отдельный файл phph-styles.css. К блокам в сетке добавляешь какие-то свои классы, скажем phph-header-left, но можешь их и по-своему назвать; и описываешь их в phph-styles.css
Судя по описанию , есть только две опции - interval и pause - все остальное можно доделать, допилив исходники. Только в этом случае нужно скопировать файл (скажем, phph-bootstrap-carousel.js) и править уже в нем.
Спасибо, отличная ссылка!
Оставить комментарий