К сожалению, мы использовали слово “ organized” в названии.

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

Let’ S держать его классный, и Imagine we’ повторного создания веб-сайта для модного ресторана / café называется “ bEat”, обслуживающих искусств.It’ с атмосферными место с 1920′ искусству на его внутренних кирпичных стен, живой джаз, и богатые покровители.Но они don’ T имеют большой сайт, так they’ нас позвал тебя, чтобы спасти день.Как талантливый дизайнер, you’ Re уверен you’ сможете вытащить фантастический дизайн вместе, что they’ LL любви, но they’ меня есть много умных мыслей о website’ функциональности с, а you’ Re совсем не такуверенно о том, как организовать все файлы, что ваш сайт будет need.

Они должны быть в состоянии изменить содержание самих, загружать фотографии для своих еженедельных сообщений в блоге и новое содержание.Довольно нормальных до сих пор.Они также должны подключить через Twitter, так что их сообщения в блоге, автоматически твиттере.Им нужны мобильные приложения для iPhone и Android, потому что их клиенты используют смартфон, и они хотят предложить скидки & меню прямо на своих смартфонах.Вниз по дорожке, they’ хотел бы иметь отзывов, представленных их клиенты, с возможным фотографии, ссылки и т.д. Много интересных интерактивных социальных networky вещи, друзья, интернет-пользователь представлен video.

‘ Facebook для restaurants’ говорят, путем делая проще для вас, чтобы получить вашу голову.Ладно, на этом этапе, you’ бы, вероятно, сказать им, чтобы пойти отходы кто-то else’ пора.Но вы получаете idea.

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

После того, как проект, как, что, it’ не трудно увидеть актуальность хорошо организованной сайте project.

Общие Principles

Структура суть проекта.Изображение от Крис Halderman

Держите все просто и понятно.Don’ T более-организовать — некоторые веб-сайты & рамок там, кажется, есть мазохистские необходимо сделать все, теоретически идеальнойабстракции.В практическом плане это обычно означает, it’ невозможно работать with.

Если вы начнете создавать десятков (или сотен) мелких файлов, каждый из которых содержит не более чем небольшой класс или функцию, you’ Re безусловно, важно не переусердствовать.Если ваши файлы и папки имеют имена, которые являются слишком абстрактными или общими, то все, вероятно, начинают получать немного глупо.Например, если код для проверки входа для администратора сайта хранится в файле с именем WebsiteData/Items/GenericUser/AdminUser/Code/Auth.php, то you’ ве совершенные как грехи.Почему бы не просто функция называется check_login() в файле code/users.php?

Don’ т смеси различных аспектов вашего сайта.Держите модули функциональности отдельно, и сохранить разные языки в отдельных файлах.I’ нас недавно помогли над проектом, где некоторые бедные, ошибочной программист смешивается CSS, ASP VB Script, JavaScript, HTML и SQL в большой беспорядок, в течение всего одной, огромной, плохо отступом файл.I’ м не преувеличиваю.Достаточно said.

Один размер не подходит All

  Отражение перед началом помогает.Изображение от Энди Mangold

Глубину вашей иерархии папок и количество отдельных файлов должно иметь смысл для размера сайта.Храните ее в perspective.

Here’ SA краткий список некоторых типичных приблизительные размеры веб-сайт, и как вы могли бы структурировать вещи accordingly.

• 1 страница website
  Создайте папку для изображений, один файл для CSS, JavaScript для другого, другой по содержанию, и еще один файл для кода.It’ определенно не стоит разделение шаблона и контента, если у Вас есть конкретные requirements.
• 5 страниц website
  папки для изображений, один файл для CSS, JS, код.Рассмотреть вопрос о создании файлов содержимого в отдельную папку.Опять же, не так много нужно для шаблонов здесь, как правило.На этом этапе, убедитесь, что у вас есть шаблон для верхнего и нижнего колонтитула на странице (и любые другие общие элементы на всех страницах)
• 20 страниц website
  папка для образов, еще одна папка для добавления и других связанных с бизнесом файлов (“ assets”), другой папки для содержимого (или вы могли бы использовать базу данных на основе CMS на данном этапе).Ваш JavaScript, код и стилей, вероятно, получить достаточно сложно на данном этапе рассматривать положить их в отдельную папку.Имя папки то сразу видно, например,css/, javascript/ code/.

  Убедитесь, что all файлы идут в свои соответствующие папки.Вы shouldn’ т у бродячих JS файл сидит, скажем, в content/. Папки, просто потому, что it’ S удобно.Если ваши шаблоны или код don’ T позволяют организовать файлы так, как вам необходимо, то сделатьбыстро рефакторинга кода, чтобы сделать его work.

  Не кладите CSS, шаблоны, оформление и дизайн изображения, или наличие в assets/ (или uploads/ или resources/, в зависимости от того, что вы это называете).Эти файлы являются эффективным код, что ваш клиент никогда не должны думать, и assets/ папка для связанных с бизнесом файлов и средства массовой информации.Сделать это золотое правило для рабочего процесса и придерживаться it.

• 20 веб-страниц application
  Многое, как указано выше, но на данном этапе вы должны definitely помещать весь код в отдельную папку.Убедитесь, что it’ S не внутри папки, в которой Apache может случайно обслуживать до текстовые файлы, когда некоторые сценариев детских имеет tinker.

• 100 страниц website
  Вы должны использовать хорошую CMS для вашего контента на данном этапе.Это doesn’ имеет значения, если it’ SA базы данных или файлов на основе CMS, но если it’ с последним, убедитесь, что содержимое файлов хорошо организованы, и убедитесь, что вы можете определить метаданные для отдельных заголовков страниц, описаний и т.д., или ваш SEO усилий будет очень difficult.

  You’ повторно, вероятно, также начинают оказывать целый ряд различных разделов вашего сайта в настоящее время.You’ будете, вероятно, потребуется, чтобы начать факторинга из стилей, JavaScript, дизайн изображений и шаблонов в отдельные файлы и папки.Убедитесь, что эти папки соответствуют друг другу и совпадают с разделами вашего сайта — или что имеет смысл для вашего сайта.Использование языка CSS, как Sass или LESS также очень хорошая идея этой stage.

• 2500 страниц website
  Вы определенно должны думать о найме некоторые люди посвященные некоторым аспектам веб-сайта, такие как контент-редактор, дизайнер, программист и SEO специалист.You’ будем также хотите, чтобы ваше содержание, чтобы быть в базе данных на основе CMS на данном этапе, если it’ ы не сделали.You’ начнем будучи менеджером, и имеющие основную часть работы, проделанной другими людьми.Убедитесь, что у вас есть отлаженной системы, чтобы позволить вам пересмотреть свою работу, и изменить его, прежде чем он идет live.
• 100000000 страницах website
  You’ повторно Microsoft.Вы должны знать, что you’ делаем по now.

Самые небольшие веб-сайты очень быстро вырасти до более чем 20 страниц, если they’ Re активно поддерживается — к тому времени you’ ве добавил пару FAQ страниц, несколько небольших лакомых кусочков содержания что-то объяснить более подробно, и продуктили два, он складывает quickly.

В свете этого, рассмотреть вопрос о внесении всех небольших сайтов структурированы как (примерно) 20-страницу веб-сайта, если вы не знаете проекта является быстрое, одноразовые сайта, такие как информационный сайт для предстоящего события, или страницудля wife’ День рождения с.План роста, но don’ T плана Хоккейной клюшки роста curve.

Ваш Client

Связь с клиентом помогает очистить вещи.Изображение от Энди Mangold

У вас должна быть папка для каждого клиента, не связанных с реальным проектом you’ работаем над для них.Внутри этой папки, you’ Придется папка для каждого проекта.Первоначально there’ VL быть просто папка с именем website/, но в скором времени, возможно, другие папки под названием logo/ reports/ competitive analysis/ и т.д. Он также имеет смысл поместить ваши файлы дизайна в эту папку, возможно, в design/ или graphics/.

Don’ т сделать эту папку доступны Apache.Она will содержат конфиденциальную information.

В зависимости от основы вы используете, вы хотели бы поместить код в эту папку, чтобы держать его за пределами вашего сайта папку.Вы могли бы назвать это code/, или, если вы считаете, there’ буду отдельный код для других проектов, website-code/.Если большинство ваших других проектов дизайна или связанные с бизнесом, то они, вероятно, won’ т у любой код, кроме нечетных скрипт, который wouldn’ т необходимо отдельное folder.

В дополнение к customer’ папки работе с, вы хотели бы иметь совершенно отдельную папку для документов, которые don’ t хотите, чтобы ваш клиент, чтобы видеть.Вы могли бы найти себе регулярно обмена, связанных с работой документов с вашим клиентом, и it’ S вполне вероятно, что в какой-то момент you’ захотите, чтобы дать им доступ к их целую папку (и некоторые клиенты будут просить об этом: “ Можете ли вы почтовый? все мои файлы и отправлять их через Я просто хочу, чтобы убедиться, что у меня есть копия everything”).Вместо того, риск случайной отправки им файл “ 10 вещей, которые я ненавижу об этих guys.doc”, положить его в вашу customer’ частную folder.

Напомним быстро, here’ приведен пример структуры we’ Re настоящее время рассматривает:

YourBusiness/
  Accounts/
  Documents/
  Customers/
    bEat/
      Minutes/
      10 things I hate about these guys.doc
      Proposal.doc
    CustomerProjects/
      bEat/
        website/
            ... this is the bit we'll be discussing ....
        code/
            ... and this ...
        reports/
        graphics/

Итак, What’? Ы на веб-сайте Like This

С этого момента, we’ говорим о “ code/” и “ website/” папок, перечисленных above.

Images

Есть (почти всегда) двух видов изображений: те, которые являются частью дизайна, и те, которые являются частью содержится на веб-сайте.Последние должны идти в свой активов (или добавления или средствах массовой информации) папку, возможно, в pictures/ подкаталога.Для оформления изображений, you’ будете редко нужно отклониться от проторенных путей. Поместить их всех в images/

Если ваш дизайн немного более сложным, вы можете иметь изображения для кнопок, иконок, навигация, фон страницы и т.д. В этомслучае, you’ будете быстро подняться выше 10 или 20 изображений в этой папке, так что можно разбить его на вложенные папки.It’ все еще хорошо иметь общего назначения изображений в топ-уровня, но подпапки поможет держать под контролем все свои огромные количества маленьких файлов.Имя файла разумным, легко запоминающиеся имена, как form-warning-icon.png.

Stylesheets

Для большинства сайтов, таблицы стилей don’ т необходимо получить очень большие.Для небольшого сайта, или даже больше на сайте, без различных секций (каждая с различным дизайном), you’ будете часто сойти с рук только один файл для вашей CSS.Если это так, то просто назовите его main.css, или styles.css.

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

Я считаю, что лучшим вариантом будет выделить “ layout” и “ content” стили.“ Layout” включает в себя такие вещи, как навигация, заголовка & нижний колонтитулы, боковые панели, ящики, секции.“ Content” включает в себя такие вещи, как абзацев, заголовков, цитат, списков, плавающих изображений, ссылок.Если вы носите это немного дальше, он также имеет смысл иметь файл “ forms” стили.Однако, как контент на веб становится более интерактивным, грань между формами и содержанием (! Не каламбур) быстро бытия blurred.

Опять же, называть вещи своими именами, и назвать эти файлы layout.css content.css и forms.css.Если вы дадите им несколько расплывчатыми названиями вроде presentation.css model.css page.css, you’ всегда будете иметь, чтобы думать, прежде чем решить, что файл, чтобы посмотреть in.

Иногда it’ S полезно иметь отдельный файл CSS для специальных страниц, которые имеют свои собственные требования дизайна.Это может быть больше проблем, чем it’ стоит, в зависимости от сложности страницы.Если вы обнаружили, стряхивая между вкладками в редакторе, пытаясь найти нужный файл CSS для конкретного элемента, то было бы лучше, чтобы упростить CSS.Кроме того, серьезно подумайте об использовании Sass или LESS чтобы сделать ваш CSS гора� …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров