Skip to content

D
developer-guide
Commit aec520c2 authored by Тест Карнаухов's avatar Тест Карнаухов
Browse files
Options

refactor(*): convert spaces to tabs

parent c39ed3c7
Hide whitespace changes
Inline Side-by-side
Showing with 116 additions and 109 deletions
1-standards/1.1.1-html.md
View file @ aec520c2
......@@ -5,23 +5,23 @@
## Оглавление
- [HTML](#html)
- [Синтаксис](#html-syntax)
- [HTML5 doctype](#html-doctype)
- [Атрибут языка](#html-lang)
- [Режим совместимости Internet Explorer](#html-ie-compatibility-mode)
- [Кодировка символов](#html-encoding)
- [Подключение CSS и JavaScript](#html-style-script)
- [Относительные и абсолютные пути до ресурсов](#html-absolute-and-relative-paths)
- [Название файлов](#html-file-name)
- [Идентификаторы](#html-identificators)
- [Порядок атрибутов](#html-attribute-order)
- [Логические атрибуты](#html-boolean-attributes)
- [Элементы и атрибуты элементов форм](#html-form)
- [Ссылки с протоколами](#html-links-and-protocol)
- [Сокращение разметки](#html-reducing-markup)
- [Изображения](#html-images)
- [Взаимодействие HTML и JavaScript](#html-javascript)
- [Комментарии](#html-comments)
- [Синтаксис](#html-syntax)
- [HTML5 doctype](#html-doctype)
- [Атрибут языка](#html-lang)
- [Режим совместимости Internet Explorer](#html-ie-compatibility-mode)
- [Кодировка символов](#html-encoding)
- [Подключение CSS и JavaScript](#html-style-script)
- [Относительные и абсолютные пути до ресурсов](#html-absolute-and-relative-paths)
- [Название файлов](#html-file-name)
- [Идентификаторы](#html-identificators)
- [Порядок атрибутов](#html-attribute-order)
- [Логические атрибуты](#html-boolean-attributes)
- [Элементы и атрибуты элементов форм](#html-form)
- [Ссылки с протоколами](#html-links-and-protocol)
- [Сокращение разметки](#html-reducing-markup)
- [Изображения](#html-images)
- [Взаимодействие HTML и JavaScript](#html-javascript)
- [Комментарии](#html-comments)
## <a name="html">HTML</a>
......@@ -52,7 +52,7 @@
<!-- Хорошо -->
<div class="block">
<div class="block__element">ZK</div>
<div class="block__element">ZK</div>
</div>
```
......@@ -61,23 +61,23 @@
```html
<!-- Плохо -->
<div class="project">
<div class="project__name">Lorem</div>
<div class="project__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="project__name">Lorem</div>
<div class="project__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>
<div class="project">
<div class="project__name">Ipsum.</div>
<div class="project__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="project__name">Ipsum.</div>
<div class="project__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>
<!-- Хорошо-->
<div class="project">
<div class="project__name">Lorem</div>
<div class="project__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="project__name">Lorem</div>
<div class="project__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>
<div class="project">
<div class="project__name">Ipsum.</div>
<div class="project__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="project__name">Ipsum.</div>
<div class="project__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>
```
......@@ -86,12 +86,12 @@
```html
<!-- Плохо -->
<span>
<div>:(</div>
<div>:(</div>
</span>
<!-- Хорошо -->
<span>
<span>:)</span>
<span>:)</span>
</span>
```
......@@ -100,12 +100,12 @@
```html
<!-- Плохо -->
<div class="block">∙
<div class="block__element">ZK</div>∙∙∙∙
<div class="block__element">ZK</div>∙∙∙∙
</div>――――――――
<!-- Хорошо -->
<div class="block">
<div class="block__element">ZK</div>
<div class="block__element">ZK</div>
</div>
```
......@@ -124,16 +124,16 @@
```html
<!-- Плохо -->
<div class=block>
<div class=block__element>ZK</div>
<div class=block__element>ZK</div>
</div>
<div class='block'>
<div class='block__element'>ZK</div>
<div class='block__element'>ZK</div>
</div>
<!-- Хорошо -->
<div class="block">
<div class="block__element">ZK</div>
<div class="block__element">ZK</div>
</div>
```
......@@ -152,22 +152,22 @@
```html
<!-- Плохо -->
<body>
<p>Полезные инструменты
<ul>
<li>Grunt
<li>Jade
<li>Stylus
</ul>
<p>Полезные инструменты
<ul>
<li>Grunt
<li>Jade
<li>Stylus
</ul>
<!-- Хорошо -->
<body>
<p>Полезные инструменты</p>
<ul>
<li>Grunt</li>
<li>Jade</li>
<li>Stylus</li>
</ul>
<p>Полезные инструменты</p>
<ul>
<li>Grunt</li>
<li>Jade</li>
<li>Stylus</li>
</ul>
</body>
```
......@@ -179,10 +179,10 @@
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
<!-- ... -->
</head>
<body>
<!-- ... -->
<!-- ... -->
</body>
</html>
```
......@@ -354,20 +354,20 @@ contacts.html
- Формы не должны вкладываться друг в друга. Если они разные, то должны быть раздельны друг от друга.
- Форма должна иметь атрибуты:
- `action` - для указания адреса отправки данных.
- `method` - метод передачи данных, обычно в значении указывается `post`.
- `action` - для указания адреса отправки данных.
- `method` - метод передачи данных, обычно в значении указывается `post`.
```html
<!-- Плохо -->
<form>
<!-- ... -->
<button type="submit">Подать заявку</button>
<!-- ... -->
<button type="submit">Подать заявку</button>
</form>
<!-- Хорошо -->
<form action="send.php" method="post">
<!-- ... -->
<button type="submit">Подать заявку</button>
<!-- ... -->
<button type="submit">Подать заявку</button>
</form>
```
......@@ -376,22 +376,22 @@ contacts.html
```html
<!-- Плохо -->
<form action="send.php" method="post">
<!-- ... -->
<a href="send.php">Подать заявку</a>
<!-- ... -->
<a href="send.php">Подать заявку</a>
</form>
<!-- Хорошо -->
<form action="send.php" method="post">
<!-- ... -->
<button type="submit">Подать заявку</button>
<!-- ... -->
<button type="submit">Подать заявку</button>
</form>
```
- Если нестандартные элементы форм типа списков или слайдеров генерируются с помощью JavaScript, то выбранное значение должно сохраняться в специальном теге `<input type="hidden">`, если испольузется тег `select`, то сохраняться в дочернем теге `option`.
- Элементы формы должны иметь атрибуты:
- `name` и `value` - для ключа и значения.
- `for` и `id` - для связи надписи и элемента, при клике на надпись элемент будет фокусироваться.
- `name` и `value` - для ключа и значения.
- `for` и `id` - для связи надписи и элемента, при клике на надпись элемент будет фокусироваться.
```html
<label for="skype">Skype</label>
......
1-standards/1.1.2-pug.md
View file @ aec520c2
......@@ -123,16 +123,16 @@ input.input-text(type='text' name='price' value=24999)
```pug
//- Плохо
input.input-text(type='text' name='project' value='zk' data-required='Это поле обязательно для заполнения!' data-hint='Допустимы только символы латинского алфавита `[a-z-A-Z]` и числа `[0-9]`.' required)
input.input-text(type='text' name='project' value='zk' data-required='Это поле обязательно для заполнения!' data-hint='Допустимы только символы латинского алфавита `[a-z-A-Z]` и числа `[0-9]`.' required)
//- Хорошо
input.input-text(
type='text'
name='project'
value='zk'
data-required='Это поле обязательно для заполнения!'
data-hint='Допустимы только символы латинского алфавита `[a-z-A-Z]` и числа `[0-9]`.'
required
type='text'
name='project'
value='zk'
data-required='Это поле обязательно для заполнения!'
data-hint='Допустимы только символы латинского алфавита `[a-z-A-Z]` и числа `[0-9]`.'
required
)
```
......@@ -143,28 +143,28 @@ input.input-text(
```pug
//- Плохо
.project
.project__name Lorem
.project__desc
| Lorem ipsum dolor sit amet, consectetur adipisicing elit.
| Unde doloremque neque facilis sed repudiandae tempore ipsum provident officia eaque quas.
.project__name Lorem
.project__desc
| Lorem ipsum dolor sit amet, consectetur adipisicing elit.
| Unde doloremque neque facilis sed repudiandae tempore ipsum provident officia eaque quas.
.project
.project__name Ipsum.
.project__desc
| Lorem ipsum dolor sit amet, consectetur adipisicing elit.
| Unde doloremque neque facilis sed repudiandae tempore ipsum provident officia eaque quas.
.project__name Ipsum.
.project__desc
| Lorem ipsum dolor sit amet, consectetur adipisicing elit.
| Unde doloremque neque facilis sed repudiandae tempore ipsum provident officia eaque quas.
//- Хорошо
.project
.project__name Lorem
.project__desc
| Lorem ipsum dolor sit amet, consectetur adipisicing elit.
| Unde doloremque neque facilis sed repudiandae tempore ipsum provident officia eaque quas.
.project__name Lorem
.project__desc
| Lorem ipsum dolor sit amet, consectetur adipisicing elit.
| Unde doloremque neque facilis sed repudiandae tempore ipsum provident officia eaque quas.
.project
.project__name Ipsum.
.project__desc
| Lorem ipsum dolor sit amet, consectetur adipisicing elit.
| Unde doloremque neque facilis sed repudiandae tempore ipsum provident officia eaque quas.
.project__name Ipsum.
.project__desc
| Lorem ipsum dolor sit amet, consectetur adipisicing elit.
| Unde doloremque neque facilis sed repudiandae tempore ipsum provident officia eaque quas.
```
- Строчные элементы можно записывать на одной строке через двоеточие `:`.<br>Не злоупотреблять с длинными классами.
......@@ -172,18 +172,18 @@ input.input-text(
```pug
//- Хорошо
ul.nav
li.nav__item
a.nav__link(href='/') Главная
li.nav__item
a.nav__link(href='/projects') Проекты
li.nav__item
a.nav__link(href='/contacts') Контакты
li.nav__item
a.nav__link(href='/') Главная
li.nav__item
a.nav__link(href='/projects') Проекты
li.nav__item
a.nav__link(href='/contacts') Контакты
//- Лучше
ul.nav
li.nav__item: a.nav__link(href='/') Главная
li.nav__item: a.nav__link(href='/projects') Проекты
li.nav__item: a.nav__link(href='/contacts') Контакты
li.nav__item: a.nav__link(href='/') Главная
li.nav__item: a.nav__link(href='/projects') Проекты
li.nav__item: a.nav__link(href='/contacts') Контакты
```
## 6. Комментарии
......@@ -215,15 +215,15 @@ meta(name='msthemecompatible' content='no')
```pug
mixin tools(list)
ul.list
each item in list
li.list__item
span.mark= item[0]
= ' - ' + item[1]
ul.list
each item in list
li.list__item
span.mark= item[0]
= ' - ' + item[1]
+tools([
['spritesmith', 'генератор спрайтов и CSS переменных'],
['imagemin', 'сжатие картинок']
['spritesmith', 'генератор спрайтов и CSS переменных'],
['imagemin', 'сжатие картинок']
])
```
......@@ -231,12 +231,12 @@ mixin tools(list)
```html
<ul class="list">
<li class="list__item">
<span class="mark">spritesmith</span> - генератор спрайтов и CSS переменных
</li>
<li class="list__item">
<span class="mark">imagemin</span> - сжатие картинок
</li>
<li class="list__item">
<span class="mark">spritesmith</span> - генератор спрайтов и CSS переменных
</li>
<li class="list__item">
<span class="mark">imagemin</span> - сжатие картинок
</li>
</ul>
```
......
3-software/3.1-local-server.md
View file @ aec520c2
......@@ -15,9 +15,11 @@ Composer - менеджер зависимостей для PHP. По-умолч
1. Скачайте последнюю версию файла [`composer.phar`](https://getcomposer.org/download/)
1. Замените им устаревшую версию в папке `php`
1. Создайте bat-файл для исполнения команды composer (для Windows):
```
echo @php "%~dp0composer.phar" %*>composer.bat
```
```
echo @php "%~dp0composer.phar" %*>composer.bat
```
1. Добавить папку php в PATH
### Работа с проектами
......
3-software/readme.md
View file @ aec520c2
......@@ -15,6 +15,7 @@ Node.js используется практически в каждом прое
1. Скачайте и установите [Node.js](https://nodejs.org)
1. Установите глобальные пакеты
```bash
npm install -g bower eslint eslint-config-google express-generator grunt-cli gulp mongodb node-inspector spawn-sync supervisor yo
```
......@@ -26,7 +27,9 @@ Node.js используется практически в каждом прое
1. Устанавливаем [MongoDB Community Server](https://www.mongodb.com/download-center)
1. Добавить папку с установленными бинарниками в PATH
1. Настраиваем исполнение MongoDB в качестве демона в Unix и в качестве службы в Windows
Для Windows
Для Windows
```
// Устанавливаем службу
mongod --dbpath=D:\mongodb --logpath=D:\mongodb\log.txt --install
......@@ -46,11 +49,13 @@ _Рекомендую установить **portable** версию для по
`View > Show Console menu`. После открытия вставьте соответствующий Python код для Вашей версии Sublime Text в консоль.
Для Sublime Text 3:
```python
import urllib.request,os,hashlib; h = '2deb499853c4371624f5a07e27c334aa' + 'bf8c4e67d14fb0525ba4f89698a6d7e1'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
```
Для Sublime Text 2:
```python
import urllib2,os,hashlib; h = '2deb499853c4371624f5a07e27c334aa' + 'bf8c4e67d14fb0525ba4f89698a6d7e1'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')
```
......@@ -64,6 +69,7 @@ import urllib2,os,hashlib; h = '2deb499853c4371624f5a07e27c334aa' + 'bf8c4e67d14
* `CoffeeScript` - подсветка кода для CoffeeScript.
* Настройте редактор для удобства с помощью `Preferences > Settings - User`. После открытия файла пользовательских настроек вставьте код ниже и сохраните.
```js
{
// Всегда отображается карта кода с рамкой текущего положения
......@@ -116,7 +122,6 @@ import urllib2,os,hashlib; h = '2deb499853c4371624f5a07e27c334aa' + 'bf8c4e67d14
// Добавляет новую строку в конце файла
"ensure_newline_at_eof_on_save": true
}
```
* Добавляем проект в Sublime Text с помощью `Project > Add Folder to Project`. Выбрав папку с проектом, он появится на панели проектов слева, которую можно открыть с помощью последовательных комбинаций горячих клавиш `ctrl+k` и `ctrl+b` или `View > Side Bar > Show Side Bar`.<br>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment