Skip to content

Commit

Permalink
Merge pull request #46 from pafnuty/dev
Browse files Browse the repository at this point in the history 
14.12.2015
  • Loading branch information
@pafnuty
pafnuty committed Dec 14, 2015
2 parents 6b5075a + ab4b13f commit eaf2dd8
Showing 1 changed file with 31 additions and 37 deletions.
68 changes: 31 additions & 37 deletions storage/pages/code/html.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,19 @@ template: index

# Правила оформления HTML-кода

<div class="tip">
:construction: Страница не закончена. <a href="https://github.com/pafnuty/bqs-site/blob/dev/storage/pages/code/html.md" class="btn btn-small" target="_blank">Редактировать</a>
</div>
<a href="https://github.com/pafnuty/bqs-site/blob/dev/storage/pages/code/html.md" class="btn btn-mini" target="_blank">Редактировать эту страницу</a>

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

Под вёрсткой на быстром старте понимается создание вёрстки на основе php-файлов из репозитория [QuickStart](https://github.com/pafnuty/quickstart)
<div class="tip">На этапе вёрстки собственных проектов необходимо на основе графического макета произвести html-вёрстку сайта, которая будет передана на следующий этап разработки.</div>

---
## Основные принципы разметки кода{.h1}
## [Основные правила](#principles){#principles.h3}
---

- Для более эффективной организации работы следует использовать набор [Быстрый старт](https://github.com/pafnuty/quickstart). Он полностью соответствует требованиям данного документа.
- В качестве отступов используем табуляцию (а не пробелы). Вложенные блоки должны отделяться одним отступом.
- DOCTYPE по умолчанию: **html5** `<!DOCTYPE html>`.
- **Запрещено использование таблиц для нетабличных данных!**
- **Запрещено вкладывать блочные элементы внутрь строчных!**
- DOCTYPE по умолчанию: **html** `<!DOCTYPE html>`.
- Кодировка по умолчанию: **UTF-8** `<meta charset="UTF-8">`.
- Не забываем про метатег для IE `<meta http-equiv="X-UA-Compatible" content="IE=Edge">`.
- Если сайт адаптивный — не забываем про метатег `<meta name="viewport" content="width=device-width, initial-scale=1.0">`.
Expand All @@ -30,10 +28,10 @@ template: index
<link rel="stylesheet" href="...">
<script src="..."></script>
```
- Шапка сайта заключается в тег `<header />`.
- Основная навигация по сайту — в тег `<nav />`.
- Контентные блоки сайта заключаются в тег `<section />`, но лишь в том случае, если они нормально воспринимаются отдельно от всего контента страницы. (например блок с новостями или статьями сайта или сама статья или детальная страница товара).
- Подвал сайта — в тег `<footer />`.
- Шапка сайта заключается в тег `<header></header>`.
- Основная навигация по сайту — в тег `<nav></nav>`.
- Контентные блоки сайта заключаются в тег `<section></section>`, но лишь в том случае, если они нормально воспринимаются отдельно от всего контента страницы. (например блок с новостями или статьями сайта или сама статья или детальная страница товара).
- Подвал сайта — в тег `<footer></footer>`.
- Если используемый тег имеет закрывающий тег — он должен быть закрыт не зависимо от желания разработчика.
```html
<p>текст</p>
Expand Down Expand Up @@ -87,8 +85,6 @@ template: index
<span data-basket-add='{"id":"150","name":"Заголовок товара"}'>текст</span>
```
- Вёрстка должна полностью проходить [валидацию](http://validator.w3.org/).
- **Запрещено использование таблиц для нетабличных данных!**
- **Запрещено вкладывать блочные элементы внутрь строчных!**
- При разметке страниц так же можно делать микроразметку.
+ Ссылки на стандарт: [schema.org](http://schema.org/), [ruschema.org](http://ruschema.org/).
+ Инструменты проверки: [от google](http://www.google.ru/webmasters/tools/richsnippets?hl=ru), [от яндекса](http://webmaster.yandex.ru/microtest.xml).
Expand All @@ -104,51 +100,49 @@ template: index
- В подвале сайта необходимо предусмотреть блок с `id="bx-composite-banner"`, размером 182x31px. Этот блок необходим для отображения баннера композитного режима работы bitrix.

---
## Создание стилей less/css{.h1}
## [Создание стилей less/css](#less_css){#less_css .h3}
---
<div class="tip">
Под созданием стилей понимается создание одного результирующего файла стилей (css-файл) вне зависимости от использования препроцессоров (less). В отдельных случаях допускается использование нескольких css файлов, к примеру если в проекте есть плагины (карусель, слайдеры, внешние сервисы) с большими объёмами css-кода.
</div>

При создании стилей следует учитывать следующее:
- **Правила написания LESS и CSS кода находятся на [этой странице](/code/css).**
- Используем препроцессор [LESS](http://lesscss.org/).
- В качестве локального компилятора рекомендуется использовать [prepros](http://alphapixels.com/prepros/) при этом в настройках отключить авторасстановку префиксов, расставлять их следует либо вручную, либо через миксины. *Это связано с техническими моментами компиляции средствами php на серверной стороне.*
- В качестве серверного компилятора используем, встроенный в Быстрый старт, компилятор на php.
- Основные правила написания LESS и CSS кода описаны на [этой странице](/code/css).
- Результирующий css-файл должен быть один вне зависимости от использования препроцессоров.
- В качестве серверного компилятора используем, встроенный в Быстрый старт, компилятор на php или компонент [Less4Bitrix](https://github.com/pafnuty/LessForBitrix)
- Все кликабельные элементы должны иметь `cursor: pointer;`, а так же визуально реагировать на три состояния: обычное, при наведении `:hover`, активное `:active`, `:focus`. Если эти состояния не описаны в дизайне - ~~следует поставить минус в карму дизайнеру и~~ реализовать эти поведения на своё усмотрение, но не внося дисгармонии в общий дизайн сайта.
- Все видимые инпуты форм должны реагировать на получение фокуса `:focus` и, если это предусмотрено дизайном, при наведении. Если эти состояния не описаны в дизайне - ~~следует поставить минус в карму дизайнеру и~~ реализовать реакцию на получение фокуса на своё усмотрение, но не внося дисгармонии в общий дизайн сайта.
- Не следует использовать следующие названия классов, *т.к. они зарезервированы системными стилями bitrix*:
+ `.section` (исп. в всплывающем окне редактирования параметров компонентов)
+ `.empty` (исп. в всплывающем окне редактирования параметров компонентов)

- **Ни при каких условиях не используем reset.css** Если вы не понимаете для чего нужен сброс стилей — просто попробуйте в контент вставить нумерованный список или параграф. Вместо reset.css используем **[normalize.css](http://necolas.github.io/normalize.css/)**
- В качестве отступов используем табуляцию (а не пробелы).
- Стили для пользовательского интерфейса форм (инпуты, текстовые поля, кнопки) должны основываться на именах классов, а не на html-тегах. Т.е. к примеру класс `.btn`, применённый к диву, должен визуально превращать этот див в кнопку.

---
## Написание необходимых скриптов js/jQuery{.h1}
## [Написание необходимых скриптов js/jQuery](#js_jq){#js_jq .h3}
---

<div class="tip">
Под написанием js-скриптов понимается создание одного основного js-файла
</div>

- **Правила написания js-кода находятся на [этой странице](/code/js).**
- В качестве библиотеки используем **jQuery 2.x**. Если в ТЗ прописана поддержка IE8 - используем последнюю актуальную версию jQuery 1.x.
- **Комментарии в коде обязательны!** В качестве стандарта используем [jsDoc](http://ru.wikipedia.org/wiki/JSDoc).
- Если какой то код можно превратить в функцию - делаем это.
- Если какую-то функцию можно превратить в плагин - превращаем.
- Не используем устаревшие и неоптимальные функции.
```javascript
//Например:
//Вместо
```js
// Плохо
$('.element').click(function(){});
// Используем

// Хорошо
$(document).on('click', '.element', function(){});
```
- Инициализацию необходимых плагинов производим в одном основном рабочем файле, который подключается к странице. При этом учитываем тот факт, что элемент, на который навешивается плагин, может отсутствовать на странице (если плагин плохо написан, он может выдавать ошибку).
- При использовании плагинов следует правильно именовать их по типу jquery.[имя_плагина][.min].js и по умолчанию минимизировать код плагина, оставляя ссылку на источник, откуда взят плагин в комментариях на первой строке и версию плагина. Пример:
```javascript
- При использовании плагинов следует правильно именовать их по типу **jquery.[имя_плагина][.min].js** и по умолчанию минимизировать код плагина, оставляя ссылку на источник, откуда взят плагин в комментариях на первой строке и версию плагина.
```js
/*! http://site.ru | v.1.0 */
jQuery(document).ready(function(a){a(".btn-quont").on("click",function(){var b=a(this),c=b.parent().find("input").val();if("+"==b.text())var d=parseInt(c)+1;else if(c>0)var d=parseInt(c)-1;else d=0;b.parent().find("input").val(d)})});
```
Expand All @@ -174,24 +168,24 @@ jQuery(document).ready(function(a){a(".btn-quont").on("click",function(){var b=a


---
## Подготовка изображений{.h1}
## [Подготовка изображений](#images){#images .h3}
---

При подготовке изображений для вёрстки следует учитывать следующее:
- Все иконки объединяем в спрайт.
- Вcе изображения, объёмом менее 500 байт смело перегоняем в [base64](http://b64i.ru/). Регистрируемся в сервисе для автоматической оптимизации картинок через kraken.io.
- Для уменьшения объёма изображений используем сервис [kraken.io](https://kraken.io/web-interface), не забываем, что сжимать надо в режиме lossless (без потерь).
- Все изображения контента получаем через сервис [imgholder.ru](http://imgholder.ru/) или [lorempixel](http://lorempixel.com/) или другие подобные сервисы. *Вёрстку всё равно клиенту не показывает никто, а вычищать левые картинки из продакшна — плохая идея*.
- Если в PSD используется такой способ реализации задумки дизайнера, при котором невозможно адекватно сохранить картинку — нужно передать дизайн на доработку, либо попросить дизайнера сохранить картинку в нужном формате ~~,пусть помучается~~.
- Все иконки объединяем в спрайт. Если это возможно в текущем проекте — используем SVG.
- Вcе изображения, объёмом менее 500 байт смело перегоняем в [base64](http://b64i.ru/). (*Регистрируемся в сервисе для автоматической оптимизации картинок через kraken.io.*)
- Для уменьшения объёма изображений используем сервис [kraken.io](https://kraken.io/web-interface), не забываем, что сжимать надо в режиме lossless (без потерь) или [tinyPNG](https://tinypng.com/).
- Все изображения контента получаем через сервис [imgholder.ru](http://imgholder.ru/) или [lorempixel](http://lorempixel.com/) или другие подобные сервисы. (*Вёрстку всё равно клиенту не показывает никто, а вычищать левые картинки из продакшна — плохая идея*).
- Если в PSD используется такой способ реализации задумки дизайнера, при котором невозможно адекватно сохранить картинку — нужно передать дизайн на доработку, либо попросить дизайнера сохранить картинку в нужном формате, ~~пусть помучается~~.

---
## Тестирование{.h1}
## [Тестирование](#testing){#testing .h3}
---

При тестировании выделяем браузеры, под которые нужно делать:
- «абсолютную» поддержку (полное соответствие дизайну). По умолчанию это браузеры, прописанные в ТЗ. Если в ТЗ нет такого, то тестируем под актуальными версиями Chrome, Firefox, Opera, а так же IE9-10 и выше.
- «относительную» поддержку (не допускать явного визуального смещения элементов). Если при этом некоторые эффекты не будут отображаться (к примеру, вместо «вдавленного» текста - простой), об этом нужно предупредить менеджера.
- Если сайт адаптивный, то вёрстка тестируется на iphone, ipad и на современном смартфоне и планшете Android (4.x) в стандартных браузерах.
- **Абсолютную поддержку** (полное соответствие дизайну). По умолчанию это браузеры, прописанные в ТЗ. Если в ТЗ нет такого, то тестируем под актуальными версиями Chrome, Firefox, Opera, а так же IE10 и выше. (IE9 с низким приоритетов).
- **Относительную поддержку** (не допускать явного визуального смещения элементов). Если при этом некоторые эффекты не будут отображаться (к примеру, вместо «вдавленного» текста - простой), об этом нужно предупредить менеджера.
- Если сайт адаптивный, то вёрстка тестируется на iPhone, iPad и на современном смартфоне и планшете Android (4.2+) в стандартных браузерах.



Expand Down

0 comments on commit eaf2dd8

Please sign in to comment.