Finar.ru
web.finar.ru
video.finar.ru
Темы для BootstrapNew!

PhPh-Pack - наш стандарт разработки чего угодно в NetCat

Автор: Филипп Казаков, дата: 2012-09-25, просмотров 1709
Тэги

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-код пока не решено, где будет размещаться.

Список стандартизированных рецептов (не автоматизирован):


Еще вопросы? Задавайте, буду отвечать.

Алекс — 2012-06-28, 15:52

Правильно ли я понимаю? По большому счету нужно выучить (или знать приблизительно)названия (имена) CSS стилей которые есть в Бутстрапе.css, чтобы суметь сверстать макет?

Смотри, начать нужно с того, что скачать полный пак Бутстрапа. Дальше берешь примеры из него (те, которые по адресу /bootstrap/examples.html) и смотришь, как они сделаны. Берешь самый простой пример и делаешь из него ту сетку, которая тебе нужна, используя классы row*, span*, offset*. При этом сам файл bootstrap.css ты не правишь, делаешь все это в html. Потом, когда сделаешь сетку, создаешь отдельный файл phph-styles.css. К блокам в сетке добавляешь какие-то свои классы, скажем phph-header-left, но можешь их и по-своему назвать; и описываешь их в phph-styles.css

Finar

Alex — 2012-06-29, 19:24

Возможно ли в плагине слайдинга js Бутстрапа (bootstrap-carousel.js):

  1. сделать так чтобы отображалась не 1 .item, а две, например.
  2. И делался эффект плавного передвижения между item при нажатии управляющих кнопок вперед\наозад.

Понятно что на jQuey это свободно реализуется, вопрос в том можно ли это быстро сделать с помощью вышесказанного плагина?

Судя по описанию , есть только две опции - interval и pause - все остальное можно доделать, допилив исходники. Только в этом случае нужно скопировать файл (скажем, phph-bootstrap-carousel.js) и править уже в нем.

Finar

Dasha — 2012-10-06, 20:52

Спасибо, отличная ссылка!

Finar

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


Ваше имя:
->