Вторая часть о порядке в файлах и голове для «совсем джуниоров»
Часть 1
Ваш клиент
У вас должна быть папка для каждого клиента, не связанная с проектом, который вы сейчас для него делаете. Внутри этой папки должна быть папка для каждого проекта. Изначально у вас будет только папка под названием website/, но в скором времени у вас появятся еще такие папки, как logo/, reports/, competitive analysis/ и пр. Также имеет смысл сложить в эту папку файлы дизайна, вероятно, создав для них подпапку design/ или graphics/.
Не открывайте доступ к этой папке для Apache. В ней будет храниться чувствительная информация. В зависимости от используемого средства разработки, вы можете выбрать либо хранить код в этой папке, либо вынести его за рамки папки сайта. Можно назвать ее code/ или, если вы считаете, что для других проектов будет отдельный код — website-code/. Если большинство других ваших проектов связаны с дизайном или бизнесом, тогда, вероятно, в них вообще не будет кода, кроме случайного скрипта, для которого вообще не нужна отдельная папка.
Кроме рабочей папки клиента, можно также создать полностью отдельную папку для документов, которые не должен видеть ваш клиент. Наверняка вы будете регулярно показывать клиенту документы, связанные с работой, и вполне вероятно, что в какой-то момент вы захотите дать ему доступ ко всей папке (а некоторые клиенты обязательно об этом попросят: «А можешь заархивировать все мои файлы и скинуть их мне? Я просто хочу убедиться, что у меня есть копии всего»). Чтобы не подвергаться риску случайно отправить им файл «10 вещей, за которые я их ненавижу.doc», складывайте такие файлы в отдельную личную папку по клиенту.
В общем, вот пример структуры, которую мы только что построили:
А теперь поговорим о папках “code/” и “website/”, описанных выше
ИЗОБРАЖЕНИЯ
Существует два типа изображений (практически всегда): те, которые являются частью дизайна, и те, которые являются частью контента, представленного на сайте. Последние должны находиться в папке ресурсов (или загрузок, или мультимедиа), например, в подпапке pictures/. Картинки дизайна, которые вряд ли придется часто искать, можно положить в папку images/.
Если ваш дизайн немного более сложный, у вас должны быть изображения для кнопок, значков, навигации, фона страницы и пр. В таком случае, в этой папке у вас скоро появится от 10 до 20 изображений, поэтому стоит разбить ее на подпапки. Все равно неплохо бы иметь изображения общего назначения в папке верхнего уровня, но при этом подпапки помогут контролировать огромное количество ваших мелких файлов. Давайте файлам чувствительные и легко запоминаемые имена, например form-warning-icon.png.
ТАБЛИЦЫ СТИЛЕЙ
Для большинства сайтов таблицы стилей не должны быть очень большими. Для небольшого сайта или даже для более крупного сайта без большого количества различных разделов (у каждого из которых свой дизайн), вам обычно достаточно одного файла для CSS. В таком случае его можно просто назвать main.css или styles.css.
Несмотря на это, многие любят разбивать таблицы стилей на несколько файлов. Есть несколько способов, как это сделать. Наиболее популярный вариант – это одна таблица для разметки, одна для шрифтов и еще одна для цветов. Идея неплохая, но на практике это усложняет управление – вы погрязнете в назначении большого количества классов по 3 (или более) раза, а отслеживание багов может стать ночным кошмаром.
Я считаю, что лучше разделить стили для «разметки» и «контента». «Разметка» будет включать такие элементы, как навигация, колонтитулы, боковые панели, поля, разделы. «Контент» будет включать такие элементы, как абзацы, заголовки, цитаты, списки, плавающие изображения, ссылки. Двигаясь дальше, имеет смысл создать файл стилей «формы». Однако, так как контент в сети становится все более интерактивным, черта между формами и контентом довольно быстро стирается.
Опять же, называйте вещи своими именами, а потому эти файлы лучше назвать layout.css, content.css и forms.css. Если вы решите дать им более неточные названия, вроде presentation.css, model.css,page.css, вам каждый раз придется думать, прежде чем решить, какой файл нужно открыть.
Иногда полезно иметь отдельные CSS-файлы для отдельных страниц, у которых есть собственные требования к дизайну. Но это может оказаться себе дороже, в зависимости от сложности такой страницы. Если вам приходится щелкать по вкладкам в редакторе в поиске нужного CSS-файла для определенного элемента, наверное, лучше все же упростить CSS. Также не помешает подумать об использовании Sass или LESS, чтобы сделать CSS более привлекательным и чистым. Возможно, у вас также будут отдельные таблицы стилей для различных мультимедиа-файлов, и они уж точно должны быть отдельным файлом. Ну и, как обычно, им следует дать чувствительное название, например, print.css.
Если у вас несколько файлов CSS – это прекрасно, но, прежде чем их преподнести, объедините их в один с помощью автоматизированного инструмента, иначе скорость загрузки вашего сайта будет очень печальной. Не объединяйте свои превосходно разложенные CSS вручную. Компьютер сам это легко сделает с помощью шахматного автомата. Для этого можно использовать Minify (PHP) или Juicer(Ruby).
JAVASCRIPT
Между организацией файлов JavaScript и CSS для большинства сайтов много общего. У них похожие (но разные) функции, они оба преподносятся браузеру для интерпретации, они оба взаимодействуют с DOM (если правильно используются), а также они часто взаимодействуют между собой. JavaScript часто используется для добавления функциональности тому же набору элементов, которые используются в CSS для создания стиля.
Обычно вы приходите к тому, что у вас есть файл библиотеки JavaScript (jquery.js, mootools.js и пр.), несколько виджетов (скажем, datepicker.js и dropdown.js) и несколько файлов кода для каждого сайта (например, my-image-slider.js). Определенно имеет смысл хранить всю эту информацию в отдельных файлах, однако у вас зачастую есть немного JavaScriptа для сайтов, что имеет смысл создать для него всего один файл.
Положите все эти файлы в папку под названием javascript/. Если вы используете стороннюю библиотеку вроде jQuery, вы крайне редко будете создавать настолько сложные сайты, чтобы была необходимость разделять эту папку.
ШАБЛОНЫ
Шаблоны – это не контент, не код и не презентация. Шаблоны могут включать определенные аспекты этих элементов, но только голый намек на них, если они используются правильно. Это должно помочь выработать представление о шаблоне как о скелете. Ваш серверный код помогает шаблонам обрастать контентом (контентом из баз данных, сообщений об ошибках, значений полей данных и пр.), а браузер дополняет его эстетической оболочкой, позволяя добиться окончательного результата.
Конечно, в ваших шаблонах может быть случайный кусок читабельного для человека текста, например, для кнопки, выпадающего меню и прочего. Это нормально – такой текст, как правило, тесно связан с функцией на странице, а не с контентом.
Сложите все шаблоны в папку templates/. Несмотря на сказанное выше, шаблоны действительно представляют собой серверный код (они чувствительны), поэтому убедитесь, что к ним нет общего доступа. Если ваш сайт рассылает и-мейлы, тогда создайте в этой папке несколько подпапок для шаблонов обычного текста и электронных сообщений в HTML. Если ваш сайт более чем просто рекламный, вам понадобится много шаблонов для разных страниц и экранов вашего приложения. Если у вас версия сайта для смартфонов, для нее тоже должна быть отдельная подпапка. Создайте соответствующую структуру таких подпапок. Вот неплохой пример:
Часть 1
Ваш клиент
У вас должна быть папка для каждого клиента, не связанная с проектом, который вы сейчас для него делаете. Внутри этой папки должна быть папка для каждого проекта. Изначально у вас будет только папка под названием website/, но в скором времени у вас появятся еще такие папки, как logo/, reports/, competitive analysis/ и пр. Также имеет смысл сложить в эту папку файлы дизайна, вероятно, создав для них подпапку design/ или graphics/.
Не открывайте доступ к этой папке для Apache. В ней будет храниться чувствительная информация. В зависимости от используемого средства разработки, вы можете выбрать либо хранить код в этой папке, либо вынести его за рамки папки сайта. Можно назвать ее code/ или, если вы считаете, что для других проектов будет отдельный код — website-code/. Если большинство других ваших проектов связаны с дизайном или бизнесом, тогда, вероятно, в них вообще не будет кода, кроме случайного скрипта, для которого вообще не нужна отдельная папка.
Кроме рабочей папки клиента, можно также создать полностью отдельную папку для документов, которые не должен видеть ваш клиент. Наверняка вы будете регулярно показывать клиенту документы, связанные с работой, и вполне вероятно, что в какой-то момент вы захотите дать ему доступ ко всей папке (а некоторые клиенты обязательно об этом попросят: «А можешь заархивировать все мои файлы и скинуть их мне? Я просто хочу убедиться, что у меня есть копии всего»). Чтобы не подвергаться риску случайно отправить им файл «10 вещей, за которые я их ненавижу.doc», складывайте такие файлы в отдельную личную папку по клиенту.
В общем, вот пример структуры, которую мы только что построили:
YourBusiness/
Accounts/
Documents/
Customers/
bEat/
Minutes/
10 вещей, за которые я их ненавижу.doc
Proposal.doc
CustomerProjects/
bEat/
website/
... об этом мы еще поговорим ....
code/
... и об этом ...
reports/
graphics/
А теперь поговорим о папках “code/” и “website/”, описанных выше
ИЗОБРАЖЕНИЯ
Существует два типа изображений (практически всегда): те, которые являются частью дизайна, и те, которые являются частью контента, представленного на сайте. Последние должны находиться в папке ресурсов (или загрузок, или мультимедиа), например, в подпапке pictures/. Картинки дизайна, которые вряд ли придется часто искать, можно положить в папку images/.
Если ваш дизайн немного более сложный, у вас должны быть изображения для кнопок, значков, навигации, фона страницы и пр. В таком случае, в этой папке у вас скоро появится от 10 до 20 изображений, поэтому стоит разбить ее на подпапки. Все равно неплохо бы иметь изображения общего назначения в папке верхнего уровня, но при этом подпапки помогут контролировать огромное количество ваших мелких файлов. Давайте файлам чувствительные и легко запоминаемые имена, например form-warning-icon.png.
ТАБЛИЦЫ СТИЛЕЙ
Для большинства сайтов таблицы стилей не должны быть очень большими. Для небольшого сайта или даже для более крупного сайта без большого количества различных разделов (у каждого из которых свой дизайн), вам обычно достаточно одного файла для CSS. В таком случае его можно просто назвать main.css или styles.css.
Несмотря на это, многие любят разбивать таблицы стилей на несколько файлов. Есть несколько способов, как это сделать. Наиболее популярный вариант – это одна таблица для разметки, одна для шрифтов и еще одна для цветов. Идея неплохая, но на практике это усложняет управление – вы погрязнете в назначении большого количества классов по 3 (или более) раза, а отслеживание багов может стать ночным кошмаром.
Я считаю, что лучше разделить стили для «разметки» и «контента». «Разметка» будет включать такие элементы, как навигация, колонтитулы, боковые панели, поля, разделы. «Контент» будет включать такие элементы, как абзацы, заголовки, цитаты, списки, плавающие изображения, ссылки. Двигаясь дальше, имеет смысл создать файл стилей «формы». Однако, так как контент в сети становится все более интерактивным, черта между формами и контентом довольно быстро стирается.
Опять же, называйте вещи своими именами, а потому эти файлы лучше назвать layout.css, content.css и forms.css. Если вы решите дать им более неточные названия, вроде presentation.css, model.css,page.css, вам каждый раз придется думать, прежде чем решить, какой файл нужно открыть.
Иногда полезно иметь отдельные CSS-файлы для отдельных страниц, у которых есть собственные требования к дизайну. Но это может оказаться себе дороже, в зависимости от сложности такой страницы. Если вам приходится щелкать по вкладкам в редакторе в поиске нужного CSS-файла для определенного элемента, наверное, лучше все же упростить CSS. Также не помешает подумать об использовании Sass или LESS, чтобы сделать CSS более привлекательным и чистым. Возможно, у вас также будут отдельные таблицы стилей для различных мультимедиа-файлов, и они уж точно должны быть отдельным файлом. Ну и, как обычно, им следует дать чувствительное название, например, print.css.
Если у вас несколько файлов CSS – это прекрасно, но, прежде чем их преподнести, объедините их в один с помощью автоматизированного инструмента, иначе скорость загрузки вашего сайта будет очень печальной. Не объединяйте свои превосходно разложенные CSS вручную. Компьютер сам это легко сделает с помощью шахматного автомата. Для этого можно использовать Minify (PHP) или Juicer(Ruby).
JAVASCRIPT
Между организацией файлов JavaScript и CSS для большинства сайтов много общего. У них похожие (но разные) функции, они оба преподносятся браузеру для интерпретации, они оба взаимодействуют с DOM (если правильно используются), а также они часто взаимодействуют между собой. JavaScript часто используется для добавления функциональности тому же набору элементов, которые используются в CSS для создания стиля.
Обычно вы приходите к тому, что у вас есть файл библиотеки JavaScript (jquery.js, mootools.js и пр.), несколько виджетов (скажем, datepicker.js и dropdown.js) и несколько файлов кода для каждого сайта (например, my-image-slider.js). Определенно имеет смысл хранить всю эту информацию в отдельных файлах, однако у вас зачастую есть немного JavaScriptа для сайтов, что имеет смысл создать для него всего один файл.
Положите все эти файлы в папку под названием javascript/. Если вы используете стороннюю библиотеку вроде jQuery, вы крайне редко будете создавать настолько сложные сайты, чтобы была необходимость разделять эту папку.
ШАБЛОНЫ
Шаблоны – это не контент, не код и не презентация. Шаблоны могут включать определенные аспекты этих элементов, но только голый намек на них, если они используются правильно. Это должно помочь выработать представление о шаблоне как о скелете. Ваш серверный код помогает шаблонам обрастать контентом (контентом из баз данных, сообщений об ошибках, значений полей данных и пр.), а браузер дополняет его эстетической оболочкой, позволяя добиться окончательного результата.
Конечно, в ваших шаблонах может быть случайный кусок читабельного для человека текста, например, для кнопки, выпадающего меню и прочего. Это нормально – такой текст, как правило, тесно связан с функцией на странице, а не с контентом.
Сложите все шаблоны в папку templates/. Несмотря на сказанное выше, шаблоны действительно представляют собой серверный код (они чувствительны), поэтому убедитесь, что к ним нет общего доступа. Если ваш сайт рассылает и-мейлы, тогда создайте в этой папке несколько подпапок для шаблонов обычного текста и электронных сообщений в HTML. Если ваш сайт более чем просто рекламный, вам понадобится много шаблонов для разных страниц и экранов вашего приложения. Если у вас версия сайта для смартфонов, для нее тоже должна быть отдельная подпапка. Создайте соответствующую структуру таких подпапок. Вот неплохой пример:
templates/
blog/
sidebar.tpl
post.tpl
comment.tpl
emails-plaintext/
subscribe.tpl
change-password.tpl
emails-html/
subscribe.tpl
change-password.tpl
social/
twitter-feed.tpl
facebook-sidebar.tpl
mobile/
base.tpl
contact.tpl
customer-profile.tpl
friend.tpl
homepage.tpl
reviews.tpl
base.tpl
contact.tpl
customer-profile.tpl
friend.tpl
homepage.tpl
reviews.tpl
