Файловая структура сайта: «Файловая структура сайта-портфолио» — Домашняя работа «Как спроектировать сайт-портфолио» — Тренажёр «Знакомство с HTML и CSS» — HTML Academy

Содержание

Файловая структура для веб-сайта на базе PHP



Я впервые создаю веб-приложение на основе PHP и не нашел ничего, что можно было бы использовать по шаблону. На данный момент мне больше всего интересно, как файлы должны быть организованы в каталоги, чтобы разработка веб-сайта могла быть управляемой. Сюда входят javascript скрипта, изображения, таблицы стилей, cgi скриптов, html файлов, чистые php файлы, определяющие общие функции и т. д.

Вопрос: Может ли кто-нибудь указать мне на объяснение того, как такой веб-сайт обычно организован на сервере?

web-applications
Поделиться Источник JnBrymn     01 января 2011 в 17:46

4 ответа


  • Файловая структура для проекта PHP

    Моя файловая структура: /holiday/admin/list.php /holiday/includes/functions.php # common functions /holiday/index.

    php # / is the document root # /holiday/ is a self-contained sub-directory # There are other self-contained sub-directories e.g. /promotion/, /international/ В functions.php у меня…

  • Что такое правильная файловая структура веб-приложения? И почему?

    Какова типичная файловая структура веб-приложения? У вас есть свои сайты brouchure: [+] корень [+] images [+] css [+] javascripts [+] pages — index.html — biographies.html — contacts.html И у вас есть свои веб-приложения ( что здесь происходит? Это мое понимание): [ +] корень [+] build [+] classes…



1

Я бы предложил паттерн MVC :

Общедоступные файлы (JavaScript, CSS и т. д.) должны быть помещены в папку documentroot.

Например, если корневая папка вашего сайта /public, вы можете сделать что-то вроде:

/public/js
/public/style
/public/img

Поделиться PeeHaa     01 января 2011 в 17:51



0

Часто в корневом каталоге есть папка активов с папками /image, /js и /css. Вы можете создать папку include, которая также содержит файлы ваших классов или функций. Создавайте подкаталоги в соответствии с вашими потребностями в зависимости от структуры вашего сайта.

Поделиться Trevor     01 января 2011 в 17:53



0

Я бы создал структуру вложенных папок.

Так например у вас есть ваша корневая папка:

rootFolder/js  
rootFolder/css  
rootFolder/images  
rootFolder/classes  
rootFolder/includes  *this folder holds the additional PHP 'libraries' you'll use*

Если вы создаете классы PHP, то я обычно также использую соглашение об именовании.

Поэтому, если я создам класс MyClass , я помещу файл в папку classes и назову его как MyClass.class.php

До сих пор это работало на меня.

Поделиться Wifi Cordon     01 января 2011 в 18:01


  • PHP получить корневой каталог веб-сайта

    Я делаю сайт, и мне нужно получить каталог root этого сайта. Например, если бы файловая структура была похожа на CloudShop \-internal \-js … \-inc inc.all.php index.php \-login login.php loginError.php page.php В inc.all.php я получаю все страницы в базе данных, чтобы отобразить их на панели…

  • Django файловая структура проекта

    Я новичок в Django и должен понимать структуру файлов. ниже приведен пример моего проекта Django (некоторые файлы отсутствуют) Моя путаница связана с производством на реальном сервере и с тем, как соотносится моя файловая структура. У меня есть следующие вопросы по этому вопросу, которые, как я…



0

Что я обычно делаю, так это сначала создаю следующее.

img/ js/ css/

Затем, когда он становится более сложным,когда требуется включить новый include/. Я положил flash anims также в include. Если на сайте есть админ-панель, то каждый из вышеперечисленных элементов может быть разделен на два, например css/admin/main. css и т. д.

Поделиться chamilad     01 января 2011 в 18:23


Похожие вопросы:


django файловая структура приложения

Ниже приведена общая файловая структура приложения: app/ views.py forms.py urls.py tests.py Я обнаружил, что становится все труднее поддерживать код, когда база кода становится большой. Я думаю…


Как перенести веб-сайт на базе PHP на Joomla?

У меня есть веб-сайт на базе PHP, с подключениями к базе данных, обработкой форм и т. д., на котором мне нужно использовать CMS. Я пытаюсь использовать Joomla, но после использования его в течение 2…


PHP файловая структура для простого веб-сайта?

Я работаю с PHP уже пару лет, но не считаю себя более чем умеренным программистом. При создании некоторых веб-сайтов (от презентационных сайтов до некоторых простых CMS’es) я использовал 2 подхода,…


Файловая структура для проекта PHP

Моя файловая структура: /holiday/admin/list.php /holiday/includes/functions.php # common functions /holiday/index.php # / is the document root # /holiday/ is a self-contained sub-directory # There…


Что такое правильная файловая структура веб-приложения? И почему?

Какова типичная файловая структура веб-приложения? У вас есть свои сайты brouchure: [+] корень [+] images [+] css [+] javascripts [+] pages — index.html — biographies.html — contacts.html И у вас…


PHP получить корневой каталог веб-сайта

Я делаю сайт, и мне нужно получить каталог root этого сайта. Например, если бы файловая структура была похожа на CloudShop \-internal \-js … \-inc inc.all.php index.php \-login login.php…


Django файловая структура проекта

Я новичок в Django и должен понимать структуру файлов. ниже приведен пример моего проекта Django (некоторые файлы отсутствуют) Моя путаница связана с производством на реальном сервере и с тем, как.

..


структура сайта php, seo и mod_rewrite

Еще один очень начинающий вопрос на сайте. Итак, глядя на файловую структуру простого сайта php: Файловая структура для веб-сайта на базе PHP Соглашения О Структуре Папок/Файлов? Предложите…


Безопасная структура папок для сайта php

Я разработчик Java (SE, EE) и работаю с этими технологиями уже почти 6 лет, а также работаю с php для не-веб-приложений. Теперь мне нужно создать сайт в php, но я много гуглил и не могу найти…


Структура рекомендаций для веб-сайта на базе NodeJS

Я планирую включить механизм рекомендаций для веб-сайта, который основан на NodeJS. В настоящее время он также имеет базу данных MongoDB в качестве уровня хранения. В идеале я хотел бы иметь клиента…

Joomla 3. Структура каталогов сайта на Joomla 3

Структура каталогов Joomla сайта

После установки Joomla, в корневом каталоге сайта мы видим следующую картину.

Вкратце рассмотрим каждый каталог.

  • administrator – это каталог, который содержит файлы, обеспечивающие работу административной части сайта на Joomla. В некотором смысле админка это сайт в сайте, поэтому каталог administrator имеет свою структуру подкаталогов, частично повторяющую структуру каталога сайта. Когда мы набираем http://имя_сайта/administrator, то мы обращаемся именно к этому каталогу;
  • bin – это новый каталог, предназначен для хранения служебных и вспомогательных программ Joomla. Сейчас в нём находится единственный файл keychain.php, который задуман для поддержки безопасных соединений с другими серверами, например серверами обновлений;
  • cache – этот каталог используется системой кэширования Joomla, которая в свою очередь позволяет увеличить производительность сайта. Эту тему мы затронем в одной из следующих статей, когда будем настраивать сайт;
  • cli – каталог для хранения приложений с интерфейсом командной строки;
  • components – место хранения файлов компонентов. Внутри себя он содержит структуру подкаталогов, название которых формируется следующим образом. Каждый подкаталог начинается с символов «com_» (от component), а далее следует название компонента. В свежеустановленной Joomla 3.6 их 15;
  • images – каталог для изображений. Сразу после установки в нём содержится три подкаталога: banners, headers, sampledata. Они в свою очередь, содержат образцы баннеров и изображений, использующихся в демонстрационных данных. Причём, всё это будет в наличии даже, если при установке Joomla вы отказались от установки демонстрационных материалов;
  • includes – каталог служебных файлов CMS Joomla;
  • language – хранилище языковых файлов. Подавляющее большинство языковых файлов хранится именно здесь. Все они сгруппированы в своих подкаталогах. Каждый такой подкаталог именуется следующим образом: два символа кода языка, затем дефис и два символа кода государства. Для России это ru-RU. В некоторых расширениях Joomla отсутствует нужный перевод.
    Так вот добавляется он именно здесь;
  • layouts – ещё один новый, служебный каталог. Его содержимое в большей степени интересно для разработчиков Joomla и расширений для неё. Каталог содержит файлы макетов кода;
  • libraries — служебный каталог для хранения файлов библиотек функций, используемых системой управления контента
  • logs – здесь хранятся журналы самой Joomla и её расширений;
  • media – каталог для хранения медиа-файлов.
  • modules – место хранения файлов модулей. Так же, как и каталог components содержит структуру подкаталогов. Их название формируется так: имя каждого подкаталога начинается с символов «mod_» (от module), а далее следует название модуля. Сразу же после установки Joomla каталог modules содержит 26 подкаталогов;
  • plugins – каталог для плагинов. Все плагины сгруппированы в подкаталоги по типам. В свежеустановленной Joomla таких подкаталогов 12;
  • templates – здесь размещены подкаталоги шаблонов. Изначально их два, это шаблон protostar для админки и шаблон beez3 для сайта. Так же каталог templates содержит системный подкаталог system;
  • tmp – это каталог для хранения временных файлов;

Нужно или не нужно? Убираем лишнее

Кроме каталогов, в корне сайта, сейчас находятся ещё 7 файлов. Не все из них нужны. Давайте разберёмся!

index.php – очень нужный файл. Именно с него начинается ваш сайт на Joomla. Это индексный файл — файл главной (начальной) страницы папки на сайте, то есть тот файл, который загружается, когда посетитель обращается напрямую к какому-либо каталогу. В данном случае обращение происходит к корню сайта. Это удобно. Не надо набирать лишние символы, не надо думать об имени начального файла сайта. Просто договорились именовать начальные файлы так. Для того, чтобы это работало, веб-сервер настраивается определённым образом. У веб-сервера Apache, входящего в XAMPP за это отвечает директива DirectoryIndex. У себя на локальном хостинге, вы можете открыть основной файл настроек Apache, найти директиву DirectoryIndex и посмотреть список возможных индексных файлов. Имя настроечного файла веб-сервера Apache — httpd.conf. Он находится в каталоге \xampp\apache\conf. Если сейчас вернуться в каталог administrator, то там мы тоже обнаружим свой индексный файл. А как мы запускаем админку? http://имя _сайта/adminstrator. Т .е. обращаемся прямо к каталогу. Поэтому выше я написал, что админка это сайт в сайте.

Если в каталоге не будет индексного файла, то при обращении к нему веб-сервер отобразит содержимое этого каталога. А это не очень хорошо. Во-первых, посетитель сайта вместо нужной ему информации увидит не нужный ему список файлов и папок. Во-вторых, это шанс для злоумышленника узнать структуру вашего сайта. Вот поэтому в Joomla, в каждом каталоге кроме корневого каталога и каталога administrator присутствует файл index.html, который выводит пустую страницу;

configuration.php – это тоже очень нужный файл. Он содержит основные настройки сайта на Joomla. В следующей статье мы их и рассмотрим, а затем подробнее познакомимся с этим файлом. Без файла configuration.php сайт под управлением Joomla работать не будет.

robots.txt – файл, который нужен поисковым системам. Сайт без него может работать, но удалять этот файл не надо.

Файл htaccess.txt – это не совсем тот файл, который нам нужен. Его нужно переименовать в .htaccess. Всё бы хорошо, но только на локальном компьютере под управлением Windows это не тривиальная задача, хотя и не сложная. Делается это так. Открываем этот файл в текстовом редакторе. Пусть будет хоть «Блокнот». Выбираем в меню Файл -> Сохранить как

Переименовываем, тип файла задаём «Все файлы» и не забываем о кодировке – она должна быть UTF-8. В принципе, сайт может работать и без этого файла. Но в дальнейшем, он вам очень пригодится.

Файл web.config.txt надо бы переименовать в web.config, но мы этого делать не будем. Файл web.config используется только тогда, когда сайт размещён на веб-сервере IIS. Наш локальный хостинг использует веб-сервер Apache. Большинство хостеров тоже используют Apache или Nginx. Поэтому, скопируйте файл web.config.txt в какую-нибудь другую директорию на своём компьютере, а из корня сайта удалите. Если вдруг вы решите заказать себе хостинг, который использует веб-сервер IIS, то тогда нужно будет удалить файл .htaccess, переименовать файл web.config.txt в web.config и скопировать его в корень сайта.

Остались два файла: LICENSE.txt и README.txt вот их и удаляем. Кто-то скажет, вот, дескать, какие-то два маленьких файла. Кому они мешают? Всё дело в безопасности. Дело в том, что эти файлы появляются в корне сайта, после установки Joomla и после её каждого обновления. По тексту этих файлов злоумышленник может с большой вероятностью определить версию движка, что может облегчить ему работу по взлому вашего сайта. Вы ведь этого не хотите, не так ли?

Это всё, что я хотел рассказать в этой статье. Корень сайта теперь выглядит так.


Держите свой сайт под контролем! В следующий раз, поговорим об общих настройках сайта на Joomla.

Об авторе:

Меня зовут Андрей Золкин. Из более, чем пятнадцати лет работы в сфере информационных технологий, десять лет работаю с системами, базирующимися на открытом исходном коде. На страницах сайта Aitishnik.Ru веду блоги по CMC Joomla и Debian GNU/Linux.

 

Ещё статьи о Joomla 3

    • Joomla 3. Настройка электронной почты сайта…

      Предыдущая статья закончилась тем, что о настройках почты сайта будет рассказано отдельно. В этой статье и поговорим о том, как настроить электронную почту сайта. Электронная почта сайта, в первую очередь нужна для автоматической…

    • Joomla 3 Структура каталогов

      Давайте поговорим о структуре каталогов Joomla сайта. На самом деле не каждому владельцу сайта нужна эта информация. Но если, вы хотите пойти дальше, и освоить навыки веб-мастера или администратора Joomla, если у вас есть желание…

    • Персональные данные в Joomla! ч.1

      Начиная с версии 3.9, в Joomla появился набор расширений для обеспечения конфиденциальности и соответствия таким законам, как GDPR (для Европейского Союза) и ФЗ-152 (для России). Суть этих законов в том, чтобы усилить и стандартизировать…

    • Joomla 3 (часть 1)

      Этой статьей я начинаю новый цикл для новичков, посвящённый CMS Joomla 3. Предыдущий цикл был о CMS Joomla 2.5. И хотя с начала его написания прошло много времени, но он «живой», пополняется статьями. С тех пор многое изменилось: вышел последний релиз Joomla 2.5, изменилась стратегия развития этой CMS, произошли…

    • Joomla 3. Общие настройки. Сайт

      CMS Joomla очень гибкая система управления контентом. Она имеет множество опций и хорошо настраивается. Настраиваются отдельные компоненты и модули, меню и материалы. В этой статье описываются настройки общие, для всего сайта на Joomla 3….

    • Локальный хостинг на XAMPP

      В предыдущих статьях мы разобрались с тем, что такое CMS Joomla, какие возможности она имеет, где её скачать и каковы системные требования Joomla. Теперь для установки и изучения этой системы управления содержимым мы организуем локальный хостинг. Конечно, можно установить Joomla сразу на…

Структура сайта в 1С Битрикс / Логическая и физическая информация

Приступаем к новой группе уроков по эффективному управлению сайтом при помощи Структуры сайт на 1С Битрикс.

В данном уроке Вы научитесь:

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

Структура сайта

Как в пару кликов переместить файлы и папки в структуре сайта!

Большинство пользователей делают это следующим способом. Заходят в административную часть, выбирают Контент -> Структура сайта -> Файлы и папки.

Допустим по заданию нам нужно переместить папку about наше портфолио, для этого мы ее выделяем, в нижней части выбираем из списка «Перенести», жмем применить, далее указываем путь, куда она будет перенесена, подтверждаем действия, и жмем перенести. Всего, каких-то восемь действий и мы достигли своего результата. 

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

Быстрое копирование файлов

Перейдем в визуальную часть сайта, нажимаем, «Структура сайта», затем просто зажимаем папку и перетаскиваем туда, куда нам нужно, подтверждаем свои действия.


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

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

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


Кликнув по файлу, можем изменить его при помощи редактора, или редактировать как html файл, менять заголовок, доступ к странице или при необходимости просто удалить его.

При всем этом удобстве не забываем, если нужно провести массовые операции по редактированию или перемещению файлов и папок, лучше воспользоваться «Менеджером файлов» в административном меню.

Перейдя в административный раздел, жмем Контент, Структура сайта. В рамках данной структуры представлено два вида отображения файлов, это:

  • Логическая структура – представлены папки и файлы в том виде, как они показываются пользователям сайта;
  • Физическая структура – это тот вид, в котором они находятся на сервере.


Основное их отличие в том что, в рамках логической структуры невозможно удаление, перемещение файлов, а только их редактирование и просмотр.

ЛОГИЧЕСКАЯ СТРУКТУРА

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

Имеются также дополнительные свойства по редактированию файла как PHP, что довольно удобно, а также добавлена возможность, просмотра или скачивания файла.

ФИЗИЧЕСКАЯ СТРУКТУРА

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

Элементы управления в структуре сайта

Контекстная панель нам помогает — загружать файлы. Добавлять папки, файлы или дополнительное меню. Дополнительно менять свойства или отобразить права на папку для определенных групп пользователей. При помощи поиска можем проводить поиск по слову или фразе в файле, а также есть возможность заменить искомую фразу при дополнительных настройках. Следующий элемент контекстной панели «Настройки списка», где можем настраивать внешний вид списка, и задавать какие колонки отображать и как упорядочить записи. Вторая настройка позволяет экспортировать данный список в Excel.


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


Панель групповых операций позволяет выполнять операции над всеми отмеченными элементами списка. Опция «Для всех» позволяет выбрать все элементы из списка, есть также возможность их редактирования или удаления. Список доступных действий позволяет менять права, копировать, переносить выделенные элементы.


Все эти функции помогают эффективно управлять контентом на сайте, не забывайте об этом, ведь вы за это заплатили.

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

Урок 1.

Создание файловой структуры

Приветствую вас в мини курсе по созданию собственного шаблона для системы управления контентом Joomla. Шаблон отвечает за внешний вид вашего сайта, а значит, если вы хотите создать уникальный сайт с уникальным дизайном, вы должны использовать уникальный шаблон на своем сайте. И здесь сразу же возникает вопрос: «Где же взять уникальный шаблон сайта для CMS Joomla?» Конечно, в данный момент на просторах интернета можно отыскать множество различных шаблонов, скачав и установив который вы сможете использовать его на своем сайте.

Собственный шаблон сайта на Joomla 3 за 2 вечера. Урок 1. Создание файловой структуры

Используя используя готовые шаблоны с интернета вы не обеспечиваете уникальность дизайна вашего сайта потому как, наряду с вами данный шаблон могут скачать другие пользователи интернета и также использовать на своем сайте. Поэтому для обеспечения уникальности дизайна вашего сайта лучше создавать шаблоны для вашего сайта с абсолютного нуля, используя верстку макета шаблона. То есть, к примеру в фотошопе вы создаете дизайн вашего сайта, то есть вы отрисовываете макет вашего будущего сайта. Используя данный макет, вы верстаете его и получаете уже шаблон в виде html-страницы, то есть как бы статический сайт. То есть html страничка вашего макета, то есть вёрстка вашего макета. Используя верстку макета мы с вами научимся в данном мини-курсе создавать шаблон, который можно использовать в системе управления контентом Joomla. То есть создав шаблон на основе вашего дизайна вы обеспечиваете уникальность вашего сайта потому, что дизайн вы придумали сами, вы его сами нарисовали, и вы таким образом обеспечиваете то, что в интернете не будет уже другого сайта, который будет идентичен с вашим по дизайну.

Подготовка к созданию шаблона сайта на Joomla 3

Давайте поговорим о том что нам нужно для собственной работы. Во первых нам нужна Joomla. Я ее уже скачал и установил. На момент записи данного урока это версия 3.3.1. Как видите в пользовательской части используется стандартный шаблон Protostar. Никаких данных здесь нет, то есть контента нет, — Джумла абсолютно пуста и, в принципе, нам сейчас это и нужно. Нам не нужно сейчас добавлять еще не какие данные. Данные мы будем добавлять далее по ходу мини-курса. Шаблон впоследствии мы с вами сменим и установим свой собственный, а Protostar отключим. Для работы нам еще потребуется нам потребуется верстка макета, собственно верстка которую мы с вами будем использовать для данного мини-курса: несложный шаблончик.

Это 2 колоночный сайт, где в центральной колонке у нас выводится контент, в правой колоночке у нас выводится блок вспомогательного меню. Здесь мы будем выводить с вами категории нашего сайта, но вы можете выводить здесь все то, что вам нужно.

Из каких элементов состоит шаблон сайта на Joomla 3

Во первых это верхний элемент, который состоит из непосредственно меню (главное меню нашего сайта: «О компании», «Услуги», «Работы») и логотип сайта, то есть логотип той компании, которую представляет данный сайт.

Дальше шапочка нашего сайта где выводится изображение компании, которую представляет данный сайт, а также изображение меньшего размера и небольшое описание либо слоган (девиз той компании которую представляет данный сайт).

Дальше, центральная область и левая колоночка и футер, в котором расположены логотип, копирайты и кнопочки социальных сетей. Такой вот сайт мы с вами и будем создавать, а именно мы создадим шаблон сайта который и установим на систему управления контентом Joomla.

Структура шаблона сайта на Joomla 3

Давайте посмотрим структуру данного шаблона. Данный шаблон состоит из двух файлов это файл index.html, который мы с вами просматриваем в браузере. И css файл стилей, его код мы можем посмотреть в текстовом редакторе. И папочка images, которая содержит все изображения которые, используются в данном шаблоне.

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

Создадим новую папку, где и будем разрабатывать собственный шаблон, под названием companylogo.

Давайте поговорим о файловой структуре шаблона Джумла. Шаблон Joomla состоит из следующих элементов…


Для продолжения изучения того, как сверстать шаблон сайта CMS Joomla, смотрите видео-урок канала WebForMySelf на YouTube.

Продолжение → «Урок 2. Локализация шаблона»

Заберите ссылку на статью к себе, чтобы потом легко её найти 😉

Выберите, то, чем пользуетесь чаще всего:

Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )

Файловая структура DIAFAN.CMS — Полная документация системы управления сайтами DIAFAN.CMS

После установки DIAFAN.CMS на хостинге вебмастеру открывается следующая структура файлов:
adm
cache
css
custom
img
includes
js
langs
modules
plugins
return
themes
tmp
userfiles
. htaccess
index.html
index.php
install.php
config.php
update.php
update.txt
readme.txt
favicon.ico

Что есть что?

adm – папка панели администрирования. Прямого доступа http://site.ru/adm/ при запросе из адресной строки не имеет. На сайте может иметь любой адрес (по умолчанию http://site.ru/admin/), задаваемый в процессе инсталляции DIAFAN.CMS в любом виде, например, http://site.ru/papka-admina/. После инсталляции этот адрес из настроек сайта можно изменить. В папке хранится ядро системы управления сайтом, оформление, картинки панели управления, визуальный редактор и вспомогательные функции для управления сайтом. Как правило, менять и править веб-мастеру там нечего.

cache – служебная папка CMS, где хранятся файлы дополнительного кеширования, сокращающие SQL-запросы к БД. Файлы создаются автоматически, удаляются тоже, поэтому туда можно также особо не заглядывать. Чтобы DIAFAN. CMS успешно работала с файлами кеша, необходимо установить на папку cache права 777.

css – папка с CSS-стилями оформления стандартного шаблона дизайна, поставляемого с DIAFAN.CMS, CSS-стили для jQuery-плагинов.

custom – пользовательские измененные модули и шаблоны дизайна, необходимо установить на папку custom права 777.

img – папка с картинками оформления стандартного шаблона дизайна, поставляемого с DIAFAN.CMS, изображения для jQuery-плагинов.

includes – здесь хранятся общие функции и вспомогательные алгоритмы для DIAFAN.CMS.

js – папка с дополнительными JavaScript-скриптами, используемыми на сайте опционально. Это анимация увеличения картинок, всплывающий календарь, загрузчики файлов и т.д.

langs – файлы перевода интерфейса.

modules – здесь находятся все модули DIAFAN. CMS. Например, в папке modules/news – все файлы модуля «Новости», включая инсталляцию, алгоритм модуля, его оформление и административную часть.

plugins – здесь хранятся плагины на PHP, используемые в DIAFAN.CMS.

return – архив точек возврата (резервных копий предыдущих обновлений), необходимо установить на папку return права 777.

themes – папка стандартного шаблона дизайна. Основной шаблон дизайна сайта – файл site.php. Подробнее о шаблонах дизайна можно прочитать здесь.

tmp – папка для временных файлов. Чтобы DIAFAN.CMS успешно работала, необходимо установить на папку tmp права 777.

userfiles – здесь хранятся все файлы, загружаемые пользователями сайта через административный интерфейс. Картинки из фотогалереи, фотографии к новостям, статьям, загружаемые файлы и изображения. Сразу после установки DIAFAN. CMS папка пустая. Необходимо устанавливать на эту папку и все вложенные в нее элементы (рекурсивно) права 777. Имя папки, по которому будут доступны все файлы пользователям сайта, можно изменить в настройках сайта.

.htaccess – управляющий файл DIAFAN.CMS. Достаточно важный файл. Обеспечивает работу псевдоссылок, кодировки, переадресаций и пр. В случае изменений данного файла работоспособность DIAFAN.CMS не гарантируется.

index.html – файл кэша главной страницы. Раз в сутки в этом файле создается полная копия внешнего вида и контента главной страницы. Если на хостинге происходит сбой и перестает работать БД или интерпретатор, система открывает на сайте содержимое данного файла. Таким образом, главная страница сайта не бывает «На техобслуживании» из-за сбоя в БД, что особенно важно, когда сайт SEO-продвигается. Необходимо установить на этот файл права 777.

index.php – инициализирующий файл DIAFAN. CMS, стартовый. Изменений не требует.

install.php – файл установки DIAFAN.CMS. После установки системы удаляется. Необходимо установить на этот файл права 777.

config.php – файл конфигурации DIAFAN.CMS. Cохраняет данные из раздела «Параметры сайта» административной части сайта. В случае, если какие-то параметры сбились и вход в административную часть сайта недоступен, можно править параметры вручную в этом файле. Например, изменившиеся параметры подключения к БД. Необходимо установить на этот файл права 777.

update.php – файл обновления предыдущей версии DIAFAN.CMS до текущей версии.

update.txt – руководство по обновлению DIAFAN.CMS с предыдущей версии.

readme.txt – краткое руководство для разработчиков.

favicon.ico – фавикон DIAFAN.CMS.

Проектирование структуры сайта | Веб-программирование

Последовательная и логичная структура веб-сайта — важный фактор, влияющий на лояльность пользователей. Выбор подходящей структуры осуществляется на этапе проектирования и зависит от назначения сайта.

Знакомство человека с новым для него окружением всегда начинается с его предположения о том, как он должен вести себя в нем. Он строит свое поведение, в первую очередь, на основе предыдущего опыта, оценивая свое отношение к тому, с чем уже сталкивался и тому, что впервые видит (создает т.н. ментальную модель). Популярность нового веб-сайта в значительной мере будет определяться тем, насколько хорошо его информационная структура соответствует ментальной модели пользователя, его ожиданиям. Логичная и предсказуемая структура позволяет новому посетителю делать успешные предположения о том, где может находиться нужная веб-страница, а регулярные методы организации и отображения информации позволяют прозрачно «обучить» пользователя работе с сайтом.

Внутренняя и внешняя структура

Структуризация представляемой на сайте информации выполняется на двух уровнях: внутреннем и внешнем.

Внутренняя структура определяет логические связи между веб-страницами, то, что в SEO называется внутренней перелинковкой. Продуманная внутренняя структура позволяет избежать ситуаций, когда, например, на сайте появляются страницы, доступные более чем в 3-х кликах от стартовой или в поисковую выдачу попадают приватные страницы или множественные дубли. С другой стороны, под внутренней структурой сайта иногда подразумевают размещение файлов и каталогов в файловой системе веб-сервера. Хороший пример — размещение всех изображений в каталоге images, а скачиваемых файлов — в каталоге download. Внутренняя структура может частично или полностью отображаться во внешнюю структуру.

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

Типовые структуры

Линейная структура

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

Рис. 1. Сайт с линейной структурой

Иерархия

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

Рис. 2. Иерархическая структура веб-сайта

«Паутина»

«Паутина» — это структура, практически идентичная концепции сервиса WWW, но в масштабах отдельно взятого сайта (рис.  3). Она основана на установлении таких связей между страницами, которые позволяют быстро перемещаться между ними, минуя какие-либо промежуточные страницы (стартовую или страницы разделов). Подобная структура избыточна, управление ей сильно затрудняется с ростом числа страниц, а пользователь может элементарно «увязнуть» на страницах такого сайта.

Рис. 3. Сайт со структурой типа «паутина»

БОльший порядок на сайте можно навести, если установить связи между страницами по принципу «решетки» (рис. 4)

Рис. 4. Структура типа «решетка»

Практические соображения

Приведенные выше базовые структуры на практике редко используются в исходном виде. Подавляющее большинство сайтов используют их в той или иной комбинации. Так, например, каталог статей начинается с тематической иерархии, но отдельные, объемные статьи раздела имеет смысл представлять линейно, поделив их на несколько страниц. Это пример того, что называется гибридной (или комбинированной) структурой.

Приведем концептуальный пример гибридной структуры сайта, не только удобной и понятной для пользователя, но и, как показывает личный опыт, позволяющей только на одной внутренней перелинковке поднять PR главной страницы до 3-4, а страниц разделов — до 1-2 (рис. 5).

Рис. 5. Комбинированная структура сайта, учитывающая передачу «веса» страниц
(цветом выделены исходящие связи).

Некоторые пояснения к рис. 5:

  • На всех страницах имеется ссылка на стартовую страницу (т.н. «сквозная ссылка»).
  • Страницы нижнего уровня ссылаются на страницу раздела и, линейно, на соседние тематические страницы.
  • Страницы разделов связаны между собой и ссылаются на тематические страницы нижележащего уровня.
  • Исходящие ссылки с главной страницы ведут на разделы и, возможно, на целевые страницы.

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

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

Вместо заключения

Большинство более-менее сложных сайтов имеют комбинированную структуру. Линейная или иерархическая организация связей между страницами удобна и логична для навигации по сайту, но ссылки, встроенные в содержание, создают «паутину» ассоциативных связей, которая намного сложнее и гибче исходной структурной модели. Это вовсе не означает, что нелинейные модели поведения типичных посетителей освобождают разработчиков от создания веб-сайтов с логичной и продуманной структурой. На рис. 6 условно показаны типовые структуры и их применимость в зависимости от функциональности сайта и сложности представляемой информации.

Рис. 6. Сравнение основных структур

Анатольев А.Г., 03.11.2015

Постоянный адрес этой страницы:

Файловая структура — Документация Webasyst

  • wa-apps

    исходный код приложений

    • APP_ID

      • api

        публичные API-методы приложения (необязательно)

      • css

        CSS-стили приложения

      • img

        файлы изображений

      • js

        файлы с JavaScript-кодом

      • lib

        файлы с основным PHP кодом приложения

      • locale

        файлы локализации приложения (gettext)

      • plugins

        плагины приложения (необязательно)

        • PLUGIN_ID

          • css

            CSS-стили плагина

          • img

            файлы изображений

          • js

            файлы с JavaScript-кодом

          • lib

            файлы с основным PHP-кодом плагина

          • locale

            файлы локализации плагина (gettext)

          • templates

            файлы HTML-шаблонов плагина

      • templates

        файлы HTML-шаблонов бекенда приложения

      • themes

        темы дизайна для фронтенда приложения

        • THEME_ID

          • theme. xml

            файл-манифест темы дизайна

            index.html

            основной шаблон

            другие шаблоны темы дизайна

      • widgets

        виджеты приложения (необязательно)

        • WIDGET_ID

          • css

            CSS-стили виджета

          • img

            файлы изображений

          • js

            файлы с JavaScript-кодом

          • lib

            файлы с основным PHP-кодом плагина

          • locale

            файлы локализации виджета (gettext)

          • templates

            файлы HTML-шаблонов виджета

  • wa-cache

    файлы кеша: SQL-запросы, скомпилированные шаблоны веб-страниц и т. п.

  • wa-config

    системные конфигурационные файлы

    • apps.php

      список установленных приложений

    • db.php

      параметры подключения к базе данных

    • routing.php

      правила маршрутизации HTTP-запросов по URL

  • wa-content

    общее содержимое, подключаемое на страницах разных приложений: библиотеки JavaScript, CSS-стили, изображения и т. п.

  • wa-data

    файлы, хранящие данные, необходимые для работы приложений

    • public

      файлы, доступные напрямую по HTTP

    • protected

      защищенные файлы, доступные только с помощью PHP-скриптов приложений

  • wa-installer

    установочные скрипты фреймворка

  • wa-log

    лог-файлы

  • wa-plugins

    общесистемные плагины, например, для подключения к платежным системам, плагины расчета стоимости доставки, модули интеграции с SMS-шлюзами

  • wa-system

    файлы с исходным кодом ядра фреймворка

  • wa-widgets

    файлы с исходным кодом системных виджетов

  • api. php

    точка доступа к публичным API

  • cli.php

    обработчик запросов через командную строку (CLI)

  • index.php

    центральный диспетчер HTTP-запросов

  • install.php

    скрипт установки фреймворка (автоматически удаляется после завершения установки)

  • wa.php

    скрипт для выполнения служебных команд разработчиками

  • Организация веб-сайта

    Структура каталогов

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

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

    Проектируя внутреннюю структуру вашей папки, вы должны учитывать, что размещение всех файлов в главном каталоге (также называемом «корневым») может подойти для небольшого сайта (скажем, 5 страниц и 3 изображения). Но если вам нужно обработать 20 страниц и 200 изображений, такая организационная модель может превратиться в серьезную проблему и затруднить поиск документов среди такого количества изображений.Итак, что вы можете сделать в таком случае, так это начать каким-то образом группировать файлы и размещать их в разных каталогах, чтобы упростить управление и обновление вашего сайта.

    Структура для небольших сайтов

    Для небольших веб-сайтов лучше сохранить простую структуру каталогов. Например, предположим, что у вас есть сайт, на котором вы показываете свои работы: коллекция из 5 изображений, созданных вами. Подумав некоторое время, вы решаете, что создадите только одну страницу для отображения изображений, а также домашнюю страницу и страницу контактов.Всего получается 3 страницы и 5 изображений. Это немного, поэтому вы можете использовать следующую структуру каталогов:

    • корень
      Папка
      • изображений
        Папка
        • image1.jpg
          JPEG изображение
        • image2.jpg
          JPEG изображение
        • image3.jpg
          JPEG изображение
        • image4.jpg
          JPEG изображение
        • изображение5.jpg
          Изображение JPEG
      • contact.html
        HTML-документ
      • images.html
        Документ HTML
      • index.html
        Документ HTML

    Как видите, структура каталога состоит из корневого каталога, который содержит подкаталог с именем «images». В этой организационной модели вы помещаете все свои изображения в каталог «images», а все документы в корень.

    Разделение на категории

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

    В этом сценарии жизнеспособным решением было бы разделить ваши изображения на тематические группы: «цветы», «люди», «животные», «фэнтези» и «сюрреализм».Таким образом, вы можете показать все изображения, соответствующие категории, на одной странице, имея по одной странице для каждой категории. Посмотрим, как это выглядит.

    • корень
      Папка
      • изображений
        Папка
        • животные
          Папка
        • фэнтези
          Папка
        • цветы
          Папка
        • человек
          Папка
        • сюрреализм
          Папка
      • животных. html
        Документ HTML
      • contact.html
        HTML-документ
      • fantasy.html
        HTML-документ
      • flowers.html
        HTML-документ
      • index.html
        Документ HTML
      • people.html
        HTML-документ
      • surrealism.html
        Документ HTML

    Теперь вы можете поместить каждое изображение в соответствующий каталог, получая в среднем 20 изображений на каталог.Тем не менее, эти каталоги можно подразделить: например, каталог «животные» может содержать такие подкаталоги, как «птицы», «лошади» или «кошачьи».

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

    Разделение на под-сайты

    Хорошая идея для решения проблемы, представленной в предыдущем абзаце, — использовать предыдущие модели, но в качестве подразделов веб-сайта, таким образом имея небольшой веб-сайт для каждого художника, отображающего на нем его работы. В этой схеме у каждого художника будет каталог со всеми его изображениями и страницами, правильно расположенными. Давайте посмотрим на это получше, чтобы мы могли продолжить работу с более четким изображением.

    • корень
      Папка
      • художников
        Папка
        • isaac
          Папка
          • изображений
            Папка
          • био.html
            Документ HTML
          • contact.html
            HTML-документ
          • images.html
            Документ HTML
        • me
          Папка
          • изображений
            Папка
          • bio. html
            Документ HTML
          • contact.html
            HTML-документ
          • images.html
            Документ HTML
        • Индекс
        • .html
          Документ HTML
      • contact.html
        HTML-документ
      • index.html
        Документ HTML

    Теперь обратите внимание на папку «художники». Это плюс, который позволяет как организовывать, так и расширять, делая структуру более гибкой для добавления новых художников. А файл «index.html» в папке «Artist» содержит документ, показывающий всех художников, присутствующих на сайте.Размещение этого файла кажется уместным с точки зрения принадлежности: это список художников; он должен быть в каталоге «художники».

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

    Разработка структуры файлов на веб-сайте — это поиск решения организационной проблемы.И особенность решений (точнее, подходов) заключается в том, что их всегда больше одного. Таким образом, подходы, предложенные в этом документе, в лучшем случае являются одним из многих вариантов.

    Структура файла

    Веб-сайты состоят из файлов — файлов кода, таких как HTML и CSS, и файлов мультимедиа, таких как изображения, видео и аудио. Чтобы все работало должным образом, важно уделять особое внимание структуре папок, в которых находятся эти файлы.

    на этой странице

    Папка проекта Домашняя страница Подпапки Родительские папки Практическое упражнение

    Папка проекта

    У каждого проекта веб-сайта должна быть собственная домашняя папка. Он называется корневым каталогом . (Справочник — это жаргонный термин для папки .)

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

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

    Домашняя страница

    HTML-файл для домашней страницы веб-сайта должен всегда называться index.html . Это связано с тем, что браузер, который был направлен на сервер или каталог, всегда пытается отобразить файл с этим именем, если он не был специально указан для другого файла.

    Таким образом, файл index.html всегда следует размещать непосредственно в корневом каталоге, а не в каких-либо подпапках.

    Примечание: любая папка может иметь собственный индекс . html , и браузер, направленный в эту папку без указанного файла, отобразит index.html . Например, если браузер был направлен на https://site.com/folder , он отобразит https://site.com/folder/index.html , если присутствует файл index.html .

    Подпапки

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

    Чтобы обратиться к файлу в подпапке, необходимо указать путь к файлу (записанное местоположение файла), чтобы включить имя папки, за которым следует косая черта: subfolder / file.html . Если имеется несколько папок, каждая из них может быть записана в одном формате: подпапка / подпапка подпапки / file.html .

    Родительские папки

    Чтобы указать папку, которая является родительским элементом , указывает на папку, содержащую текущий файл, записав две точки и косую черту (. ./ ) в пути к файлу указывает на перемещение вверх по дереву файлов. Таким образом, ../file.html будет указывать на файл с одной папкой с по от файла, в котором записан путь к файлу.

    Для перемещения вверх по нескольким папкам один и тот же шаблон может повторяться столько раз, сколько необходимо: ../../../file.html указывает на файл на три папки выше файла, в котором он записан.

    Практическое упражнение

    Разработка файловой структуры веб-сайта

    Разработка файловой структуры веб-сайта

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

    Сделать

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

    Вспомните абстрактную информационную архитектуру веб-сайта, который мы исследовали на примере компании, которая продает услуги разработки программного обеспечения и язык программирования реализации:

    Как бы вы реализовали эту структуру на веб-сервере? В наиболее очевидным способом может быть поиск файлов, связанных с отдельные страницы в своих каталогах — один каталог для компонентов домашней страницы, по одному для страниц A1, A2, A3, B1 и т. д. на.Однако это может быть чрезмерным и привести к относительной адресации. ошибки. Что еще более важно, такой дизайн не предполагает менять. Если информационная архитектура отражает отделы бизнес — отдел A, отдел B и т. д. — тогда изменения в отделах могут привести к серьезному техническому обслуживанию накладные расходы. Предпочтительная структура может иметь каталоги для только основные отделы:

    Папка для отдела будет содержать все файлы для A1, A2 и A3 — как файлы HTML, так и файлы изображений (и, возможно, даже JavaScript файлы, файлы QuickTime и т. д.). С этой структурой ссылка из А1 до A3 может происходить следующим образом:

      См. Прайс-лист на стулья 
         

    С другой стороны, ссылка от A1 до C2 должна включать относительный путь к файлу, например:

      См. Компьютер
     конфигурации 
         

    Фактически, вы обнаружите, просматривая веб-сайты и разработать свой собственный, что полезно иметь отдельный набор папки для общих полезных компонентов.Например, Активы папка может содержать файлы для кнопок GIF, иконок GIF или JPEG, Программы на JavaScript, документы Acrobat PDF и фотографии в формате JPEG:

    Структура папок / файлов веб-сайта — Создание и развертывание веб-сайта

    crly:

    Должен ли я создать каталог для каждой страницы моего веб-сайта?

    В этом нет необходимости, поскольку нет ограничений на количество файлов, содержащихся в каталоге, включая корень.Преимущество использования папок заключается в том, что URL-адрес легче записывать по всему сайту.

      о / index.html => / about /
    блог / index.html => / блог /
      

    , пока в каждой папке есть страница index.html, имя файла можно не указывать в URL-адресе.

    Что касается contact.html и, возможно, about.html, не помешало бы разместить их в корне сайта, где SE по умолчанию могут их найти. изображений — стандартное имя, которое ищут и SE.Если вы не хотите, чтобы посторонние имели доступ к списку папок, обязательно предоставьте ему страницу index.html. Подойдет простая шаблонная страница, пока работает навигация, и пользователь может отступить. Присвойте этой странице атрибут noindex, чтобы она не индексировалась.

    Графические изображения

    Skin — это то, что мы, вероятно, не захотим индексировать, поэтому используйте CSS для их установки и поместите их в отдельную папку внутри папку css . Я обычно называю эту папку, скин .

      background-image: url (skin / bg.png)
      

    Дайте этой папке собственную страницу index.html, точно такую ​​же, как у папки изображений, с атрибутом noindex. Вы также можете дать папкам css и script тот же index.html.

    В итоге, корневой каталог должен быть аккуратным и достаточно разреженным. После того, как вы выберете место для установки файлов, убедитесь, что навигация работает должным образом, и никогда больше не перемещайте эти страницы после запуска сайта. Используйте абсолютные URL-адреса, ведущие от корня к каталогу страницы.

      / блог /
      

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

    Лучшие практики структуры каталогов веб-сайтов? : webdev

    ДЕЙСТВИТЕЛЬНО простой вопрос для вас, ребята.

    Для базового статического веб-сайта с несколькими страницами и подстраницами я не совсем понимаю передовой опыт структуры каталогов для HTML-страниц.

    Скажем, у меня есть простой веб-сайт вроде этого:

    Индексная (домашняя) страница, информация, контакты и страница новостей.На странице новостей есть две ссылки на две подстраницы страницы новостей, fizz.html и buzz.html

    . Лучше всего, чтобы все HTML-страницы находились в одной папке корневого каталога, как показано ниже? (Я бы предположил, что нет) ..

    Пр. 1

      /foobar.com
      / css
      / js
      /изображений
      index.html
      about.html
      contact.html
      news.html
      fizz.html
      buzz.html
      

    Или лучше всего иметь все подстраницы в отдельной папке каталога, как это?

    Пр. 2

      / foobar.ком
      / css
      / js
      /изображений
      index.html
      about.html
      contact.html
      news.html
      /Новости
         fizz.html
         buzz.html
      

    Или лучше иметь любую страницу с подстраницами в отдельной папке, как эта?

    Пр. 3

      /foobar.com
      / css
      / js
      /изображений
      index.html
      about.html
      contact.html
      /Новости
         news.html (следует ли называть его index.html?)
         fizz.html
         buzz.html
      

    Если метод в Прим. 3 — лучший способ организовать, хотите ли вы оставить новости.html как есть, или изменить его имя на index.html? В случае последнего, плохо ли иметь несколько файлов html с именем index? Есть ли из-за этого проблемы с SEO?

    Кроме того, если бы вы сделали пример 3, не отображался бы URL-адрес повторно как www .foobar.com / news / news.html ?

    В настоящее время мой тестовый веб-сайт структурирован в соответствии с прим. 2, что вызывает проблему, например: если пользователь находится по адресу www .foobar.com / news / fizz.html , и он хочет вернуться на страницу новостей, если ему удастся стереть «fizz.html «из URL-адреса, это не работает.

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

    Как структурировать веб-сайт для SEO

    Расчетное время чтения: 13 минут

    Несколько лет назад меня вызвали на собеседование в известный банк. Встреча должна была пройти на верхнем этаже одного из самых высоких зданий в Уилмингтоне, штат Делавэр. Уровень стресса сразу повысился.Не спрашивая, я знал, что есть хороший шанс поговорить с руководителем корпорации. Как я узнал? Поскольку офисы руководителей обычно располагаются на верхнем этаже здания, где арендная плата самая высокая, виды здесь самые лучшие, и они обязательно произведут впечатление.

    Структура вашего веб-сайта, как и макет здания, может быть бесшумным и мощным средством коммуникации. Если ваш сайт продуман и целенаправленно структурирован, он:

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

    Это основы успеха веб-сайта.

    В этом посте описывается, как структурировать веб-сайт малого бизнеса для SEO, чтобы он хорошо занимал место в результатах поиска, удовлетворял пользователей, а также его было проще и дешевле в управлении и обслуживании. Он определяет структуру веб-сайта, передовой опыт и выделяет некоторые из наиболее распространенных недостатков, наблюдаемых на практике.

    Цель этого поста — помочь вам добиться успеха в поисковой оптимизации (SEO).

    Что такое структура сайта?

    Структура сайта относится к способу, которым контент сайта — его приложения, текст, изображения, видео, музыка и т. Д. — сгруппированы, взаимосвязаны и представлены посетителям-людям и людям, не являющимся людьми.Он устанавливает порядок, в котором контент обнаруживается, просматривается, интерпретируется и используется.

    Думайте об этом, как о меню ресторана. Вы хотите, чтобы люди быстро сориентировались и получили удовольствие от навигации по меню и принятия решения о том, что они хотят заказать. Не стоит перегружать их слишком большим количеством вариантов одновременно. Вместо этого лучше мягко их упростить, выделив иерархически в ограниченном количестве логических категорий и подкатегорий.Сначала идут закуски, затем вторые блюда, салаты и десерты. Без сюрпризов. Посетителям легко быстро найти то, что они ищут, и продолжить свою жизнь.

    Как реализована структура сайта?

    Структура сайта реализована с использованием каталогов, папок и ссылок.

    • Каталоги и папки группируют содержимое в значимые коллекции. Группы определяют, как разные части соотносятся друг с другом и какие из них наиболее важны.На веб-сайте контент группируется в каталоги и папки путем назначения родительской (для страниц) или постоянной структуры ссылок (для сообщений в блогах), а также категорий и / или тегов (для сообщений в блогах).
    • Ссылки соединяют связанный контент как на сайте, так и за его пределами. Они облегчают и ускоряют навигацию. На веб-сайте ссылки — это уникальный веб-адрес или URL-адрес (единый указатель ресурсов) для определенного фрагмента контента, папки или каталога. Ссылка позволяет посетителям-людям и не людям напрямую переходить к контенту.Когда ссылки имеют значимые имена, они помогают людям и поисковым системам сориентироваться и установить контекст и ожидания в отношении целевого контента.
    • Веб-сайт меню и хлебные крошки — это еще один тип ссылки. Они также обеспечивают контекст, помогая посетителям быстро ориентироваться, отслеживать, где они находятся, сокращать количество кликов, необходимых для того, чтобы добраться туда, куда они хотят перейти, и в целом упрощают и ускоряют навигацию.

    Некоторые инструменты разработки веб-сайтов предоставляют ограниченный контроль над структурой вашего сайта.Лучше всего проконсультироваться со специалистом по SEO, прежде чем принимать решение о покупке и начинать проектирование и разработку.

    Почему важна структура сайта?

    Структура сайта

    дает вам контроль — Фото Ханнеса Эглера на Unsplash

    Структура сайта важна, потому что она дает вам возможность:

    • сигнализируют о ваших приоритетах и ​​релевантности поисковым системам;
    • упрощает ориентацию и навигацию посетителя; и
    • оценить общее состояние и производительность вашего сайта.

    Это дает вам контроль.

    Сообщите о своих приоритетах

    Поисковые системы ранжируют только контент, о котором они знают. Чтобы содержание вашего сайта отображалось в результатах поиска, его сначала необходимо включить в индекс Google.

    Индекс Google похож на индекс библиотеки. Индекс содержит информацию обо всех книгах в библиотеке или, в случае Google, обо всем веб-контенте, о котором он знает. Когда Google посещает ваш веб-сайт, он обнаруживает новое и измененное содержание и обновляет свой индекс.

    Индекс

    Google похож на индекс библиотеки

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

    Ссылки передают ссылочный вес. Справедливость ссылок — это фактор ранжирования в поисковых системах, основанный на предпосылке, что ссылки сигнализируют о доверии; что источник ссылки рекомендует ваш контент своим читателям. Чем авторитетнее и надежнее источник ссылки, тем большее положительное влияние она окажет на ваш рейтинг.

    Большинство входящих ссылок на веб-сайт указывают на домашнюю страницу. Оттуда ссылочная стоимость стекает на сайт, как шампанское течет по пирамиде шампанского.Контент, ближайший к верхнему, имеет наибольшее «ссылочное значение».

    Лучшая иерархическая структура вашего контента гарантирует, что поисковые системы могут быстро и легко находить и обновлять ваш контент. Поместите ваши самые важные страницы ближе всего к верхним позициям, чтобы они были обнаружены первыми и получили больше ссылок, чем менее важные страницы. Большее количество ссылок помогает им занимать более высокие позиции в результатах поиска.

    Сообщите о своей значимости

    Для любого заданного поискового запроса есть тысячи, а иногда и миллионы результатов поиска.Алгоритмы поисковой системы Google сортируют весь контент, о котором ему стало известно, и сохраняют в своем индексе, чтобы найти наиболее релевантное и наиболее полезное содержание для удовлетворения вашего запроса.

    Алгоритм Google учитывает множество факторов при принятии решения о том, кто занимает какое место в результатах поиска. Он учитывает, например, слова в поисковом запросе, пригодность и удобство использования страниц в их индексе, опыт источников контента, а также ваше географическое положение и настройки поиска. Вес, применяемый к каждому фактору, варьируется в зависимости от характера запроса — например, свежесть контента играет большую роль в ответах на запросы о текущих событиях, чем для рецептов.

    Хорошо структурированный веб-сайт группирует контент в тематически связанные каталоги и папки с осмысленными именами, которые помогают поисковым системам распознавать релевантность вашего контента.

    Простота ориентации и навигации для посетителей

    Меню, внутренние ссылки, категории и теги блогов, а также хлебные крошки упрощают ориентацию и навигацию для посетителей-людей и других людей. Это помогает им определять и отслеживать, где они находятся, быстрее добираться туда, куда они хотят, и в целом упрощает и ускоряет навигацию.

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

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

    Оценка работоспособности и производительности сайта

    Лица, которые обслуживают ваш веб-сайт и управляют им, также выигрывают, когда ваш контент сгруппирован логически и иерархически и хранится в папках и каталогах со значимыми именами. Разработчики веб-сайтов повышают свою продуктивность, когда они могут быстрее находить, понимать и перемещаться по контенту. Менеджеры веб-сайтов получают возможность выполнять микро- и макро-анализ производительности веб-сайта, когда контент систематически организован, потому что аналитические приложения используют структуру вашего сайта при создании отчетов.

    Рекомендации по структуре сайта

    В идеале веб-сайт должен иметь логическую и иерархическую структуру, при этом наиболее сегментированный, высокоуровневый и важный контент представляется первым, а наиболее конкретный и подробный — последним. Структура вашего сайта должна позволять посетителям-людям и не людям получать доступ к интересующему их контенту с наименьшим количеством кликов.

    Карта сайта — это визуальное представление структуры вашего сайта. Идеальная карта сайта имеет форму пирамиды с одной вводной (домашней) страницей вверху, ожидаемыми и стандартными элементами навигации ниже, приоритетными группировками предметных областей далее и отдельными страницами и сообщениями в самом низу.

    Пример структуры сайта: пирамидальная структура веб-сайта

    Лучшие практики при структурировании веб-сайта малого бизнеса :

    1. Домашняя страница всегда должна быть вверху.
    2. Вы должны следовать нормам дизайна веб-сайтов и иметь предсказуемые и ожидаемые страницы «О нас», «Продукты и / или услуги», «Блог» и «Контакты» на втором уровне.
    3. На этом втором уровне не должно быть более 5-7 группировок.
    4. Ваши самые важные группы продуктов и / или услуг должны быть на третьем уровне вместе с сообщениями в блогах.
    5. Ссылка на файлы или папки 2-го уровня и (необязательно) только на самые важные страницы продуктов и / или услуг в главном меню.
    6. Отдельные страницы и сообщения должны быть на самом низком уровне.
    7. Сайты малого бизнеса, как правило, не должны иметь более 4 уровней.
    8. Перекрестные ссылки на контент.
    9. Предоставьте пользователям хлебные крошки, если ваш сайт имеет 3 или более уровней.
    10. Используйте однозначные, узнаваемые и описательные метки для пунктов меню, каталогов, папок и ссылок.Используйте тот же язык, что и ваша предполагаемая аудитория, чтобы обеспечить полезный «информационный аромат», который направляет посетителей туда, куда они хотят пойти.

    Всегда предоставляйте поисковым системам копию вашей машиночитаемой карты поиска, чтобы они получали уведомления при добавлении, удалении или изменении содержимого. Это ускоряет индексацию и переиндексацию.

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

    Какие факторы необходимо учитывать при выборе структуры сайта?

    Рассмотрите разные аудитории

    При принятии решения о структурировании вашего контента примите во внимание:

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

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

    Ошибки в общей структуре сайта

    1. Плоская структура веб-сайта

    Плоская структура веб-сайта — это отсутствие иерархии веб-сайтов.Каждый фрагмент контента находится в корневом каталоге (под домашней страницей).

    Пример структуры сайта: плоская структура сайта

    Это проблематично, поскольку бюджет сканирования — объем контента, который Google решает проиндексировать на сайте, — может иссякнуть до того, как все будет проиндексировано или переиндексировано. Когда каждый файл находится в корневом домене, SEO равномерно распределяется по каждой части контента на сайте. Это мешает Google решить, какой контент наиболее важен и как контент соотносится друг с другом.Это влияет на ваш рейтинг и может расстроить посетителей, которые пытаются найти информацию на вашем сайте.

    2. Мегаменю

    Мега-меню — это большие панели расширяемых пунктов меню, отображаемые в виде раскрывающихся опций. Они позволяют посетителям сразу увидеть страницы сайта нижнего уровня.

    Проблема с мегаменю в том, что они отрицают любое структурирование, которое имело место с папками и каталогами в том, что поисковые системы видят все сразу и неоднократно — практически на каждой странице веб-сайта.Когда все имеет приоритет, на самом деле ничто не имеет приоритета, и вы можете обнаружить, что ваши самые важные страницы устарели в индексе и имеют более низкий рейтинг, чем ожидалось. Это также может быть ошеломляющим для посетителей-людей, которые, как в примере с переполненным меню, о котором говорилось выше, получают слишком много опций одновременно.

    3. Плохо названные структуры

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

    Исследование ключевых слов — это метод SEO, используемый для определения конкретного языка (ключевых слов), используемого вашей поисковой аудиторией. Он выявляет объемы поиска, сезонность, сложность ключевых слов и наличие достаточной коммерческой ценности, чтобы гарантировать оптимизацию контента по конкретным словам и фразам.

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

    Пример исследования ключевых слов

    4. Исходящие ссылки на домашней странице

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

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

    5. Повторяющееся содержимое

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

    Пример оценки дублированного контента неоптимизированного веб-сайта WordPress

    Результат не всегда такой, как вы ожидаете или хотите. Ваш SEO-капитал многократно снижается, а анализ эффективности контента становится сложным и требует много времени.

    Если вам известны экземпляры дублированного контента, вам необходимо указать поисковым системам, какие из них ранжировать, а какие игнорировать.Существуют инструменты и методы SEO, которые позволяют управлять этими усилиями, но они часто либо не установлены, не настроены или настроены неправильно. В худшем случае выбранная вами CMS не предлагает возможности выполнять какие-либо из этих действий.

    5. Перекрывающиеся, недифференцированные, слишком многие или нечеткие таксономии

    Таксономии

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

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

    5. Неуправляемые структуры сайта

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

    Целенаправленное структурирование вашего контента и управление им вокруг групп востребованной информации с использованием передовых методов и значимых и точных навигационных подсказок гарантирует, что посетители не будут разочарованы и уйдут, когда они не смогут найти то, что искали.Это помогает вам лучше ранжироваться в результатах поиска, потому что ваш SEO-капитал в первую очередь направляется на ваш самый важный контент, а имена файлов и папок дают контекст поисковым системам. Хорошая структура сайта облегчает управление и обслуживание сайта, повышая вашу продуктивность и возможности для улучшения.

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

    Структурирование файлов проекта веб-сайта | Phoenix Web Development

    Краткое руководство по файловой структуре и управлению проектом веб-сайта

    Хаки / haks /: Маленькие отклонения от благонамеренного проекта.Небольшие несоответствия со стороны дизайнеров, которые делают сайт безупречным, но затрудняют управление кодом, как Скайнет (если вы!

    Где именно разместить этот самосознательный код, чтобы он полностью соответствовал требованиям и стандартам, которые мы установили для всего остального кода? Как гарантировать, что после того, как монстр был создан, монстр останется в его пределах — и не будет распространяться подобно вирусу по каждому фрагменту проекта на каждой итерации?

    Почему следует использовать файловую структуру

    Проект должен быть поддерживаемым, последовательным и простым для понимания.Когда другой разработчик перейдет в проект, чтобы закрыть Скайнет, будут ли они знать, над какими файлами работать? Целью является ремонтопригодность и согласованность как в рамках одного проекта, так и в рамках нескольких проектов.

    Правильная файловая структура — первый шаг к этой цели.

    Файловая структура может помочь установить стандарт для проекта. Это след сайта, и при правильной работе на него будут следить в 90% случаев. Как вам скажут многие руководства по стилю кода, согласованность является ключевым моментом. Разработчики склонны следовать базовой структуре инициатора проекта в качестве любезности и как способ убедиться, что проект остается поддерживаемым и понятным.Если проект начинается с определенной структуры, ее следует придерживаться от начала до конца, поскольку она устанавливает ожидания.

    Вот несколько предостережений, о которых следует помнить:

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

    Ниже показано, как команда разработчиков Zion & Zion строит структуру нашего проекта. Это не бетонные, обязательные к использованию конструкции. Мы органично вросли в них, постепенно добавляя и извлекая их для каждого проекта. Это предложения. Я ожидаю, что вы отрегулируете их по своему вкусу.

    Структура 1: Небольшие проекты

    Небольшой проект обычно состоит из одной страницы. Маленькие проекты действительно не требуют большого количества файлов и не содержат много мяса и картофеля.Обычно они используются для целевых страниц. Рекламные страницы Google ориентированы в основном на конверсии, поэтому они, как правило, просты и понятны, не содержат системы управления контентом (CMS) и обычно требуют минимального динамического контента.

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

    • скриптов /
    • стилей /
      • _импорт. Без
      • _variables.less
      • _mixins.less
      • xs.less
      • см. Меньше
      • мкр. Без
      • без длины
    • изображений /
    • шрифтов /

    Для небольших проектов Codekit пригодится, чтобы сразу перейти к коду. Structurer также отлично подходит для быстрой и согласованной настройки файлов в небольших проектах.

    Структура 2: Крупные проекты

    Крупные проекты обычно представляют собой полноценные веб-сайты.Обычно они работают на CMS (системе управления контентом), такой как WordPress или Drupal, и даже могут быть сайтами электронной коммерции, использующими инструменты каталогов, такие как Magento. У них есть несколько страниц, большинство из которых являются шаблонными, с несколькими уникальными страницами, такими как домашняя страница или страница контактов.

    Для них действительно следует рассмотреть этап сборки и язык шаблонов. Twig, например, является фаворитом в офисе. Он входит в состав Drupal, и у WordPress есть отличный плагин для него.

    Вот пример структуры ресурсов темы WordPress:

    • активов /
      • разработка /
        • фотографий /
        • шрифтов /
        • стилей /
          • _импорт.менее
          • глобалов /
            • переменн. Без
            • без миксинов
            • строительные леса. Без
          • компонентов /
            • navbar.less
            • без гармошки
          • страниц /
        • скриптов /
          • _import.js
          • глобалов /
          • компонентов /
          • страниц /
        • беседка
      • производство /
        • шрифтов /
        • изображений /
        • стилей /
          • стилей.css
          • styles.min.css
        • скриптов /
          • scripts.js
          • scripts.min.js
          • scripts.min.js.map

    Здесь сторонние инструменты обрабатываются менеджером пакетов Bower, а стили и скрипты разделены гораздо больше, чем в структуре небольшого проекта. Файл less каждого компонента содержит стили для каждого размера экрана. _Import.less и _import.js извлекают стили или сценарии во время компиляции и отправляют эти файлы в нашу производственную папку, которая отражает аналогичную структуру.Grunt объединяет и минимизирует сценарии, меньше компилирует, минимизирует изображения и копирует шрифты в соответствующие рабочие папки.

    Структура 3: Компонентные сборки

    Компонентные сборки — это проекты с очень последовательным визуальным соответствием. Они включают в себя несколько элементов, которые всегда отображаются и функционируют одинаково, независимо от их положения на экране. В общем, это веб-приложения — и они могут стать очень большими, очень быстро . Однако их структура, как правило, менее сложна, чем у крупных проектов, потому что нет необходимости учитывать уникальность.

    Имейте в виду, что веб-приложения обычно не имеют «страниц». Вместо этого они содержат «области», созданные с помощью таких инструментов, как angular.js, с использованием данных, которые передаются в шаблоны для каждой области сайта. Инструменты сборки, такие как grunt, инструменты построения лесов, такие как yeoman, и методологии, такие как BEM, важны для быстрой и масштабируемой разработки.

    • глобальный /
      • переменн. Без
      • variables.js
    • компонент /
      • кнопка /
        • кнопка.менее
        • button.js
        • кнопка. Tmpl
        • button.png
      • аккордеон /
        • без гармошки
        • accordion.js
        • аккордеон.tmpl

    Здесь файлы конфигурации определяют, какие компоненты загружаются, в какую область они загружаются, а также настраивают CSS и JavaScript для динамической компиляции и загрузки по мере необходимости. Каждый компонент является самодостаточным и может определять подобласти для импорта других компонентов в них.Это может быть настолько сложно или просто, насколько необходимо, а этап сборки может быть полностью автоматизирован.

    Выше приведено очень упрощенное представление файловой структуры БЭМ, которая является еще более надежной и может обрабатывать практически все, что может потребоваться для больших веб-приложений.

    Заключение

    Существует как минимум миллиард различных способов структурировать проект. (Почти) Все они для кого-то имеют смысл. Однако цель правильной структуры проекта — не иметь смысла только для одного человека.Цель состоит в том, чтобы проект был понятен всем интуитивно, легко поддерживался и масштабировался.

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

    Добавить комментарий

    Ваш адрес email не будет опубликован.