SAPID INFO

Структура файлов и файловой системы (без WP)

Мы стандартизируем файловую структуру и содержимое файлов. Это позволит:

  • нескольким специалистам параллельно разрабатывать отдельные части одного проекта;
  • выполнять обслуживание или доработку проекта любому специалисту независимо от того, кто начинал разработку.

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

Файловая структура

  • Корневая директория или папка темы
    • fonts содержит папки со шрифтами
    • include содержит папки со стандартными плагинами и скриптами
    • lp содержит папки с файлами отдельных страниц сайта
      • main содержит папки касающиеся страницы main
        • mob папка с файлами для мобильной версии страницы main
          • images папка с изображениями для мобильной версии страницы main
          • initialization папка с js файлами в которых производится инициализация скриптов
          • mob.php мобильная версия страницы main
        • pc папка с файлами для настольной версии страницы main
          • images папка с изображениями для настольной версии страницы main
          • initialization папка с js файлами в которых производится инициализация скриптов
          • pc.php компьютерная версия страницы main
      • thanks содержит папки касающиеся страницы thanks
        • mob папка с файлами для мобильной версии страницы thanks
          • images папка с изображениями для мобильной версии страницы thanks
          • initialization папка с js файлами в которых производится инициализация скриптов
          • mob.php мобильная версия страницы thanks
        • pc папка с файлами для настольной версии страницы thanks
          • images папка с изображениями для настольной версии страницы thanks
          • initialization папка с js файлами в которых производится инициализация скриптов
          • pc.php компьютерная версия страницы thanks
    • main.php основной файл страницы main
    • thanks.php основной файл страницы thanks

Содержимое файла

Мы переходим на модульную структуру файлов. Зачем она нужна?

  • Чтобы наша работа была готова для А/Б тестирования, дальнейшего развития.
  • На сайте больше не нужен какой-то блок? Удалили его и css идущий сразу за ним.
  • Нужен дополнительный блок – просто добавили его между существующими.
  • Нужно заменить местами? Просто заменили местами блоки.

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

Что означает “переход на модульную структуру”? Это означает, что мы разделяем сайт на отдельные блоки:

Еще раз. Мы переходим на модульную структуру. Это означает, что у нас идут сначала стили, нужные для всех блоков страницы, а потом по очереди блоки и их стили один за другим. Обратите внимание:

  • основной блок модуля имеет класс с названием, начинающимся на unit;
  • внутренние блоки, служащие для позиционирования контента имеют класс с названием, начинающимся на ark;
  • такие классы как title и descr могут повторяться в каждом модуле;
  • когда мы описываем css для отдельного модуля – мы каждый раз указываем в начале строки соответствующий unit.

Пример разметки страницы:

<html>
<header>
	<title></title>
</header>
<body>

<!-- стили общие для всей страницы -->
<style>
* { margin: 0px; padding: 0px; }
.ark_centered { width: 1100px; padding: 0px 50px; margin: 0px auto; }
.ark_centered:after { content: ''; display: block; clear: both;}
</style>

<!-- контент первого блока -->
<div class="unit_horisontal_menu">
	<div class="ark_centered">
		<!-- контент, горизонтальное меню -->
	</div>
</div>
<!-- стили для первого блока -->
<style>
.unit_horisontal_menu { width: 100%; min-width: 1200px; }
</style>

<!-- контент второго блока -->
<div class="unit_your_chance">
	<div class="ark_centered">
		<div class="ark_text">
			<div class="title">Заголовок (УТП)</div>
			<div class="descr">Подзаголовок (детальное описание и уточнения по УТП)</div>
		</div>
		<div class="ark_form">
			<form>
				<!-- форма захвата данных человека -->
			</form>
		</div>
	</div>
</div>
<!-- стили для второго блока -->
<style>
.unit_your_chance { width: 100%; min-width: 1200px; }
.unit_your_chance .ark_text { float: left; width: 300px; }
.unit_your_chance .title {  }
.unit_your_chance .descr {  }
.unit_your_chance .ark_form { float: left; width: 300px; }
.unit_your_chance form {  }
</style>

</body>
</html>

 


Комментарии к статье
Добавьте свой комментарий - оставьте след в блоге!